12 files changed, 150 insertions, 170 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;
diff --git a/yarn.lock b/yarn.lock
index 768f3c0..5a844c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1297,7 +1297,6 @@ __metadata:
     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
     source-map-support: ^0.5.21
@@ -5220,13 +5219,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invert-kv@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "invert-kv@npm:3.0.1"
-  checksum: 782c44c97f8b693006f5ba0995301754bf68d2160ec98fc34d96b266e2c28cc0c91d86c341ca058fe993bc3dd91f104f776a40f04b6c75254a9a1a0d716ac814
-  languageName: node
-  linkType: hard
-
 "ip@npm:^1.1.5":
   version: 1.1.5
   resolution: "ip@npm:1.1.5"
@@ -6429,15 +6421,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lcid@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "lcid@npm:3.1.1"
-  dependencies:
-    invert-kv: ^3.0.0
-  checksum: 7ebab7a2696a3cc6c6c9f25d957ef81dd2a8a2f48b7e2a9185e4bbcfc36d70cb633acf5fa5c9508f3d30badf23a303b1b6afe0bba8f0bb7d353d0f5d59c9ec1b
-  languageName: node
-  linkType: hard
-
 "leven@npm:^3.1.0":
   version: 3.1.0
   resolution: "leven@npm:3.1.0"
@@ -7164,15 +7147,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-locale@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "os-locale@npm:6.0.2"
-  dependencies:
-    lcid: ^3.1.1
-  checksum: 812d73334c8773b971bf7fd257b84d2ce7b85d5d2184370f2875fe0e51451f530d6f7c272de1faa0b9ff02d0d10dafd665b6425ed85489271705ab5738691a43
-  languageName: node
-  linkType: hard
-
 "os-name@npm:^5.0.1":
   version: 5.0.1
   resolution: "os-name@npm:5.0.1"