feat(main): Language setting in config file

Load localization according to either the environment or the
configuration file from the list of supported locales.

Ideally, we would also set the chromium locale with --lang, but by the
time we have read the config file (to known which locale to set),
electron has already initialized the chromium resource bundle.
So the chromium localization will always be auto-detected by chromium.

Also makes startup hopefully a bit faster by doing more things
concurrently while the localization and the main window is being loaded.

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

11 files changed, 157 insertions, 27 deletions

diff --git a/packages/main/esbuild.config.js b/packages/main/esbuild.config.js
index 996ec5a..ae8565d 100644
--- a/packages/main/esbuild.config.js
+++ b/packages/main/esbuild.config.js
@@ -1,9 +1,15 @@
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+
 import getRepoInfo from 'git-repo-info';
 
 import { node } from '../../config/buildConstants.js';
 import fileUrlToDirname from '../../config/fileUrlToDirname.js';
 import getEsbuildConfig from '../../config/getEsbuildConfig.js';
 
+/** @type {string} */
+const thisDir = fileUrlToDirname(import.meta.url);
+
 const externalPackages = ['electron'];
 
 if (process.env.MODE !== 'development') {
@@ -12,9 +18,12 @@ if (process.env.MODE !== 'development') {
 
 const gitInfo = getRepoInfo();
 
+/** @type {string[]} */
+const locales = await readdir(path.join(thisDir, '../../locales'));
+
 export default getEsbuildConfig(
   {
-    absWorkingDir: fileUrlToDirname(import.meta.url),
+    absWorkingDir: thisDir,
     entryPoints: ['src/index.ts'],
     outfile: 'dist/index.cjs',
     format: 'cjs',
@@ -27,5 +36,6 @@ export default getEsbuildConfig(
     GIT_SHA: gitInfo.abbreviatedSha,
     GIT_BRANCH: gitInfo.branch,
     BUILD_DATE: Date.now(),
+    SUPPORTED_LOCALES: locales,
   },
 );
diff --git a/packages/main/package.json b/packages/main/package.json
index 491e83a..c84816d 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -23,6 +23,7 @@
     "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 ec3cf84..0413373 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -18,33 +18,31 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { fallbackLng } from '@sophie/shared';
+import { FALLBACK_LOCALE } from '@sophie/shared';
 import i18next from 'i18next';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
-import type Resources from '../infrastructure/resources/Resources';
 import type MainStore from '../stores/MainStore';
 import { getLogger } from '../utils/log';
 
 import I18nStore from './I18nStore';
+import LocatlizationRepository from './LocalizationRepository';
 import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
 import i18nLog from './i18nLog';
-import LocalizationFiles from './impl/LocaltizationFiles';
 
 const log = getLogger('loadLocationzation');
 
 export default async function loadLocalization(
   store: MainStore,
-  resources: Resources,
+  repository: LocatlizationRepository,
   devMode: boolean,
 ): Promise<void> {
-  const repository = new LocalizationFiles(resources);
   const backend = new RepositoryBasedI18nBackend(repository, devMode);
   const i18n = i18next
     .createInstance({
       lng: store.shared.language,
-      fallbackLng,
+      fallbackLng: [FALLBACK_LOCALE],
       debug: devMode,
       saveMissing: devMode,
     })
@@ -58,6 +56,7 @@ export default async function loadLocalization(
       shared: { language },
     } = store;
     if (i18n.language !== language) {
+      log.debug('Setting language', language);
       i18n.changeLanguage(language).catch((error) => {
         log.error('Failed to change language', error);
       });
diff --git a/packages/main/src/i18n/synchronizeLocalizationSettings.ts b/packages/main/src/i18n/synchronizeLocalizationSettings.ts
new file mode 100644
index 0000000..971a593
--- /dev/null
+++ b/packages/main/src/i18n/synchronizeLocalizationSettings.ts
@@ -0,0 +1,99 @@
+/*
+ * 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 cdff551..b383c8f 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -19,8 +19,11 @@
  */
 
 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';
@@ -44,28 +47,36 @@ export default async function initReactions(
     store.shared,
     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,
+  // but `app.isReady()` is often already `true`, so we're too late to do that.
   await app.whenReady();
   const disposeNativeThemeController = synchronizeNativeTheme(store.shared);
-  const resources = getDistResources(devMode);
   hardenSession(resources, devMode, session.defaultSession);
-  if (devMode) {
-    await installDevToolsExtensions();
-  }
   const userAgents = new UserAgents(app.userAgentFallback);
   app.userAgentFallback = userAgents.fallbackUserAgent(devMode);
-  const localizeInterface = async () => {
-    await loadLocalization(store, resources, devMode);
-    setApplicationMenu(store, devMode, isMac);
-  };
-  const localization = localizeInterface();
+  const devToolsLoaded = devMode
+    ? installDevToolsExtensions()
+    : Promise.resolve();
   const viewFactory = new ElectronViewFactory(userAgents, resources, devMode);
-  const [mainWindow] = await Promise.all([
-    viewFactory.createMainWindow(store),
-    viewFactory.loadServiceInject(),
-  ]);
-  store.setMainWindow(mainWindow);
+  const mainWindow = (async () => {
+    await localizationLoaded;
+    setApplicationMenu(store, devMode, isMac);
+    await devToolsLoaded;
+    return viewFactory.createMainWindow(store);
+  })();
+  await viewFactory.loadServiceInject();
   loadServices(store, viewFactory);
-  await localization;
+  store.setMainWindow(await mainWindow);
   return () => {
     disposeNativeThemeController();
     disposeConfigController();
diff --git a/packages/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
index 67d58d6..960b65e 100644
--- a/packages/main/src/stores/SharedStore.ts
+++ b/packages/main/src/stores/SharedStore.ts
@@ -64,6 +64,9 @@ const SharedStore = defineSharedStoreModel(GlobalSettings, Profile, Service)
     loadConfig(config: Config): void {
       loadConfig(self, config);
     },
+    setLanguage(langauge: string): void {
+      self.language = langauge;
+    },
     setShouldUseDarkColors(shouldUseDarkColors: boolean): void {
       self.shouldUseDarkColors = shouldUseDarkColors;
     },
diff --git a/packages/main/types/importMeta.d.ts b/packages/main/types/importMeta.d.ts
index 7426961..9818ca1 100644
--- a/packages/main/types/importMeta.d.ts
+++ b/packages/main/types/importMeta.d.ts
@@ -7,5 +7,6 @@ interface ImportMeta {
     GIT_SHA: string;
     GIT_BRANCH: string;
     BUILD_DATE: number;
+    SUPPORTED_LOCALES: string[];
   };
 }
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index 19d1e2d..b078aeb 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { fallbackLng, SophieRenderer } from '@sophie/shared';
+import { FALLBACK_LOCALE, SophieRenderer } from '@sophie/shared';
 import i18next from 'i18next';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
@@ -40,7 +40,7 @@ export default function loadRendererLocalization(
     const i18n = i18next
       .createInstance({
         lng: store.shared.language,
-        fallbackLng,
+        fallbackLng: [FALLBACK_LOCALE],
         interpolation: {
           escapeValue: false, // Not needed for react
         },
@@ -73,6 +73,7 @@ export default function loadRendererLocalization(
         shared: { language },
       } = store;
       if (i18n.language !== language) {
+        log.debug('Setting language', language);
         i18n.changeLanguage(language).catch((error) => {
           log.error('Failed to change language', error);
         });
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 51f9f06..c4de885 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -18,8 +18,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export const fallbackLng = ['en'];
-
 export type { default as SophieRenderer } from './contextBridge/SophieRenderer';
 
 export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc';
@@ -44,6 +42,7 @@ export type {
 export {
   default as GlobalSettingsBase,
   defineGlobalSettingsModel,
+  SYSTEM_LOCALE,
 } from './stores/GlobalSettingsBase';
 
 export { default as Profile } from './stores/Profile';
@@ -79,4 +78,5 @@ export type {
 export {
   default as SharedStoreBase,
   defineSharedStoreModel,
+  FALLBACK_LOCALE,
 } from './stores/SharedStoreBase';
diff --git a/packages/shared/src/stores/GlobalSettingsBase.ts b/packages/shared/src/stores/GlobalSettingsBase.ts
index 1bd0628..c74c822 100644
--- a/packages/shared/src/stores/GlobalSettingsBase.ts
+++ b/packages/shared/src/stores/GlobalSettingsBase.ts
@@ -30,10 +30,13 @@ import { ThemeSource } from '../schemas/ThemeSource';
 
 import ServiceBase from './ServiceBase';
 
+export const SYSTEM_LOCALE = 'system';
+
 export function defineGlobalSettingsModel<TS extends IAnyModelType>(
   service: TS,
 ) {
   return types.model('GlobalSettings', {
+    language: SYSTEM_LOCALE,
     themeSource: types.optional(
       types.enumeration(ThemeSource.options),
       'system',
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index 86bd0fc..a576a0e 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -31,6 +31,8 @@ import GlobalSettingsBase from './GlobalSettingsBase';
 import ProfileBase from './Profile';
 import ServiceBase from './ServiceBase';
 
+export const FALLBACK_LOCALE = 'en';
+
 export function defineSharedStoreModel<
   TG extends IAnyModelType,
   TP extends IAnyModelType,
@@ -43,7 +45,7 @@ export function defineSharedStoreModel<
     servicesById: types.map(service),
     services: types.array(types.reference(service)),
     shouldUseDarkColors: false,
-    language: 'en',
+    language: FALLBACK_LOCALE,
   });
 }