refactor: Use i18next for language resolution

Due to https://github.com/i18next/i18next/issues/1564 we still have to
implement our own language resolution, but we can rely on
resolvedLanguage to determine which language to pass through to the
renderer.

We will use the language detected by chromium as the system locale, so
there is no need to use os-locale for detection any more.

We use i18next in the main process do resolve the language, then set the
resolve (not requested!) language in the renderer process to avoid doing
resolution twice. This avoids the need in the renderer process to know
the list of supported languages.

We set the language and the writing direction in HTML in the renderer.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

11 files changed, 150 insertions, 144 deletions

diff --git a/packages/main/package.json b/packages/main/package.json
index c84816d..491e83a 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -23,7 +23,6 @@
     "mobx-state-tree": "^5.1.3",
     "ms": "^2.1.3",
     "nanoid": "^3.3.2",
-    "os-locale": "^6.0.2",
     "os-name": "^5.0.1",
     "slug": "^5.3.0"
   },
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index 0413373..507075d 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -18,49 +18,108 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { FALLBACK_LOCALE } from '@sophie/shared';
-import i18next from 'i18next';
-import { autorun } from 'mobx';
+import { FALLBACK_LOCALE, SYSTEM_LOCALE } from '@sophie/shared';
+import i18next, { i18n } from 'i18next';
+import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
 import type MainStore from '../stores/MainStore';
 import { getLogger } from '../utils/log';
 
 import I18nStore from './I18nStore';
-import LocatlizationRepository from './LocalizationRepository';
+import type LocatlizationRepository from './LocalizationRepository';
 import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
 import i18nLog from './i18nLog';
 
 const log = getLogger('loadLocationzation');
 
+const TEST_LOCALE = 'cimode';
+
+function getLanguage(
+  language: string,
+  systemLocale: string,
+  supportedLanguages: string[],
+): string {
+  const selectedLanguage = language === SYSTEM_LOCALE ? systemLocale : language;
+  if (selectedLanguage === TEST_LOCALE) {
+    return selectedLanguage;
+  }
+  // Even though i18next has a `supportedLngs` array from which it can pick a supported language,
+  // we still have to do this ourselves to avoid spurious warnings like
+  // https://github.com/i18next/i18next/issues/1564
+  if (supportedLanguages.includes(selectedLanguage)) {
+    return selectedLanguage;
+  }
+  if (selectedLanguage.includes('-')) {
+    const iso639 = selectedLanguage.split('-')[0];
+    if (supportedLanguages.includes(iso639)) {
+      return iso639;
+    }
+  }
+  return FALLBACK_LOCALE;
+}
+
+function updateSharedStoreLanguage(store: MainStore, i18nInstance: i18n): void {
+  const resolvedLanguage =
+    i18nInstance.language === TEST_LOCALE
+      ? TEST_LOCALE
+      : i18nInstance.resolvedLanguage;
+  const dir = i18nInstance.dir();
+  // We do not want to pass the list of supported languages to the renderer process,
+  // so we extract the resolved languages from `i18n` as pass only that to the renderer.
+  // Thus, the renderer always selects a language that is actually supported.
+  store.shared.setLanguage(resolvedLanguage, dir);
+  log.debug('Loaded language', resolvedLanguage, 'with direction', dir);
+}
+
 export default async function loadLocalization(
   store: MainStore,
+  systemLocale: string,
+  supportedLanguages: string[],
   repository: LocatlizationRepository,
   devMode: boolean,
 ): Promise<void> {
   const backend = new RepositoryBasedI18nBackend(repository, devMode);
-  const i18n = i18next
+  const i18nInstance = i18next
     .createInstance({
-      lng: store.shared.language,
+      lng: getLanguage(
+        store.settings.language,
+        systemLocale,
+        supportedLanguages,
+      ),
+      supportedLngs: supportedLanguages,
       fallbackLng: [FALLBACK_LOCALE],
       debug: devMode,
       saveMissing: devMode,
     })
     .use(backend)
     .use(i18nLog);
-  const i18nStore = new I18nStore(i18n);
+  const i18nStore = new I18nStore(i18nInstance);
   store.setI18n(i18nStore);
-  await i18n.init();
-  const disposeChangeLanguage = autorun(() => {
-    const {
-      shared: { language },
-    } = store;
-    if (i18n.language !== language) {
-      log.debug('Setting language', language);
-      i18n.changeLanguage(language).catch((error) => {
+
+  await i18nInstance.init();
+  updateSharedStoreLanguage(store, i18nInstance);
+
+  const disposeChangeLanguage = reaction(
+    () => store.settings.language,
+    (languageSetting) => {
+      (async () => {
+        const languageToSet = getLanguage(
+          languageSetting,
+          systemLocale,
+          supportedLanguages,
+        );
+        if (i18nInstance.language !== languageToSet) {
+          await i18nInstance.changeLanguage(languageToSet);
+          updateSharedStoreLanguage(store, i18nInstance);
+        }
+      })().catch((error) => {
         log.error('Failed to change language', error);
       });
-    }
-  });
+    },
+    {
+      fireImmediately: true,
+    },
+  );
   addDisposer(store, disposeChangeLanguage);
 }
diff --git a/packages/main/src/i18n/synchronizeLocalizationSettings.ts b/packages/main/src/i18n/synchronizeLocalizationSettings.ts
deleted file mode 100644
index 971a593..0000000
--- a/packages/main/src/i18n/synchronizeLocalizationSettings.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { FALLBACK_LOCALE, SYSTEM_LOCALE } from '@sophie/shared';
-import { reaction } from 'mobx';
-import { addDisposer } from 'mobx-state-tree';
-
-import type MainStore from '../stores/MainStore';
-import { getLogger } from '../utils/log';
-
-const log = getLogger('synchronizeLocalizationSettings');
-
-export const TEST_LOCALE = 'cimode';
-
-/**
- * Finds the closes requested supported language for the requested one.
- *
- * If `language` is supported, this function will return it.
- * Otherwise, it returns a supported language with the same ISO639 code but
- * no country code (e.g., `en` for `en-GB`) if it exists.
- * If no supported language matches, `FALLBACK_LOCALE` will be returned.
- *
- * @param language The requested language.
- * @param supportedLanguages  The set of supported languages.
- * @returns The language to load.
- */
-function getMatchingLocale(
-  language: string,
-  supportedLanguages: Set<string>,
-): string {
-  // Also let the test locale (i.e., show localization keys directly) through.
-  if (language === TEST_LOCALE || supportedLanguages.has(language)) {
-    return language;
-  }
-  const separatorIndex = language.indexOf('-');
-  if (separatorIndex < 0) {
-    return FALLBACK_LOCALE;
-  }
-  const iso639 = language.slice(0, Math.max(0, separatorIndex));
-  if (supportedLanguages.has(iso639)) {
-    return iso639;
-  }
-  return FALLBACK_LOCALE;
-}
-
-export async function synchronizeLocalizationSettings(
-  store: MainStore,
-  supportedLanguages: string[],
-  osLocale: () => Promise<string>,
-): Promise<void> {
-  const { settings, shared } = store;
-  const supportedLangaugesSet = new Set(supportedLanguages);
-  const setLanguageAsync = async (languageSetting: string) => {
-    const requestedLanguage =
-      languageSetting === SYSTEM_LOCALE ? await osLocale() : languageSetting;
-    const matchingLanguage = getMatchingLocale(
-      requestedLanguage,
-      supportedLangaugesSet,
-    );
-    log.debug(
-      'Setting language',
-      matchingLanguage,
-      'for requested language',
-      requestedLanguage,
-    );
-    shared.setLanguage(matchingLanguage);
-  };
-  const disposer = reaction(
-    () => settings.language,
-    (languageSetting) => {
-      setLanguageAsync(languageSetting).catch((error) => {
-        log.error('Failed to update language', error);
-      });
-    },
-    {
-      fireImmediately: false,
-    },
-  );
-  addDisposer(store, disposer);
-  // Make sure that the language is already set when we resolve.
-  await setLanguageAsync(settings.language);
-}
diff --git a/packages/main/src/initReactions.ts b/packages/main/src/initReactions.ts
index b383c8f..94b1f06 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -19,11 +19,9 @@
  */
 
 import { app, session } from 'electron';
-import { osLocale } from 'os-locale';
 
 import LocalizationFiles from './i18n/impl/LocaltizationFiles';
 import loadLocalization from './i18n/loadLocalization';
-import { synchronizeLocalizationSettings } from './i18n/synchronizeLocalizationSettings';
 import ConfigFile from './infrastructure/config/impl/ConfigFile';
 import UserAgents from './infrastructure/electron/UserAgents';
 import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory';
@@ -48,18 +46,17 @@ export default async function initReactions(
     configRepository,
   );
   const resources = getDistResources(devMode);
-  const localizationLoaded = (async () => {
-    const localizationFiles = new LocalizationFiles(resources);
-    await synchronizeLocalizationSettings(
-      store,
-      import.meta.env.SUPPORTED_LOCALES,
-      osLocale,
-    );
-    await loadLocalization(store, localizationFiles, devMode);
-  })();
-  // Ideally, we would the the chromium `--lang` here,
+  // Ideally, we would the the chromium `--lang` according to the settings store here,
   // but `app.isReady()` is often already `true`, so we're too late to do that.
   await app.whenReady();
+  const localizationFiles = new LocalizationFiles(resources);
+  const localizationLoaded = loadLocalization(
+    store,
+    app.getLocale(),
+    import.meta.env.SUPPORTED_LOCALES,
+    localizationFiles,
+    devMode,
+  );
   const disposeNativeThemeController = synchronizeNativeTheme(store.shared);
   hardenSession(resources, devMode, session.defaultSession);
   const userAgents = new UserAgents(app.userAgentFallback);
diff --git a/packages/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
index 960b65e..3aa8c73 100644
--- a/packages/main/src/stores/SharedStore.ts
+++ b/packages/main/src/stores/SharedStore.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineSharedStoreModel } from '@sophie/shared';
+import { defineSharedStoreModel, WritingDirection } from '@sophie/shared';
 import { getSnapshot, Instance } from 'mobx-state-tree';
 
 import { getLogger } from '../utils/log';
@@ -64,8 +64,9 @@ const SharedStore = defineSharedStoreModel(GlobalSettings, Profile, Service)
     loadConfig(config: Config): void {
       loadConfig(self, config);
     },
-    setLanguage(langauge: string): void {
+    setLanguage(langauge: string, writingDirection: WritingDirection): void {
       self.language = langauge;
+      self.writingDirection = writingDirection;
     },
     setShouldUseDarkColors(shouldUseDarkColors: boolean): void {
       self.shouldUseDarkColors = shouldUseDarkColors;
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 18dc2a8..581563b 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -30,10 +30,11 @@ import { useStore } from './StoreProvider';
 export default observer(
   ({ children }: { children: JSX.Element | JSX.Element[] }) => {
     const {
-      shared: { shouldUseDarkColors },
+      shared: { shouldUseDarkColors, writingDirection },
     } = useStore();
 
     const theme = createTheme({
+      direction: writingDirection,
       palette: {
         mode: shouldUseDarkColors ? 'dark' : 'light',
       },
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index b078aeb..4d7b84a 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -20,7 +20,7 @@
 
 import { FALLBACK_LOCALE, SophieRenderer } from '@sophie/shared';
 import i18next from 'i18next';
-import { autorun } from 'mobx';
+import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import { initReactI18next } from 'react-i18next';
 
@@ -68,17 +68,20 @@ export default function loadRendererLocalization(
     }
 
     await i18n.init();
-    const disposeChangeLanguage = autorun(() => {
-      const {
-        shared: { language },
-      } = store;
-      if (i18n.language !== language) {
-        log.debug('Setting language', language);
-        i18n.changeLanguage(language).catch((error) => {
-          log.error('Failed to change language', error);
-        });
-      }
-    });
+
+    const disposeChangeLanguage = reaction(
+      () => store.shared.language,
+      (languageToSet) => {
+        if (i18n.language !== languageToSet) {
+          i18n.changeLanguage(languageToSet).catch((error) => {
+            log.error('Failed to change language', error);
+          });
+        }
+      },
+      {
+        fireImmediately: true,
+      },
+    );
     addDisposer(store, disposeChangeLanguage);
   };
 
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 37116db..60ef714 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -56,6 +56,15 @@ if (isDevelopment) {
 
 loadRendererLocalization(store, ipc, isDevelopment);
 
+const disposeSetHtmlLang = autorun(() => {
+  const {
+    shared: { language, writingDirection },
+  } = store;
+  document.documentElement.lang = language;
+  document.documentElement.dir = writingDirection;
+});
+addDisposer(store, disposeSetHtmlLang);
+
 const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index c4de885..95af73a 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -80,3 +80,5 @@ export {
   defineSharedStoreModel,
   FALLBACK_LOCALE,
 } from './stores/SharedStoreBase';
+
+export { default as WritingDirection } from './stores/WritingDirection';
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index a576a0e..bd71cea 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -30,6 +30,7 @@ import {
 import GlobalSettingsBase from './GlobalSettingsBase';
 import ProfileBase from './Profile';
 import ServiceBase from './ServiceBase';
+import WritingDirection from './WritingDirection';
 
 export const FALLBACK_LOCALE = 'en';
 
@@ -46,6 +47,7 @@ export function defineSharedStoreModel<
     services: types.array(types.reference(service)),
     shouldUseDarkColors: false,
     language: FALLBACK_LOCALE,
+    writingDirection: types.optional(WritingDirection, 'ltr'),
   });
 }
 
diff --git a/packages/shared/src/stores/WritingDirection.ts b/packages/shared/src/stores/WritingDirection.ts
new file mode 100644
index 0000000..561a86b
--- /dev/null
+++ b/packages/shared/src/stores/WritingDirection.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Instance, types } from 'mobx-state-tree';
+
+const WritingDirection = /* @__PURE__ */ (() =>
+  types.enumeration('WritingDirection', ['ltr', 'rtl']))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+type WritingDirection = Instance<typeof WritingDirection>;
+
+export default WritingDirection;