feat(main): Add localization support

Add i18next with a custom backend to the main process to load
localization from file.

Missing localizations are written to a missing localizations file in
debug mode, but silently fall back in production mode.

We will also need to add a custom backend for the renderer process that
communicates with the main process.

(i18next-fs-electron-backend is not applicable here, because we need
localizations both in the main and renderer processes.)

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

18 files changed, 666 insertions, 130 deletions

diff --git a/.electron-builder.config.cjs b/.electron-builder.config.cjs
index aa7d9e0..4340623 100644
--- a/.electron-builder.config.cjs
+++ b/.electron-builder.config.cjs
@@ -17,6 +17,7 @@ const config = {
     'packages/renderer/dist/**',
     'packages/service-inject/dist/**',
     'packages/service-preload/dist/**',
+    'locales/**',
     // Do not ship with source maps.
     '!**/*.map',
   ],
diff --git a/locales/en/translation.json b/locales/en/translation.json
new file mode 100644
index 0000000..2cd7959
--- /dev/null
+++ b/locales/en/translation.json
@@ -0,0 +1,20 @@
+{
+  "menu": {
+    "servicesMenu": "Services",
+    "view": {
+      "showLocationBar": "Show Location Bar",
+      "reload": "Reload",
+      "forceReload": "Force Reload",
+      "toggleDeveloperTools": "Toggle Developer Tools",
+      "reloadSophie": "Reload Sophie",
+      "toggleSophieDeveloperTools": "Toggle Sophie Developer Tools"
+    },
+    "services": {
+      "nextService": "Next Service",
+      "previousService": "Previous Service"
+    },
+    "help": {
+      "gitlab": "Gitlab"
+    }
+  }
+}
diff --git a/package.json b/package.json
index fcba86e..7f0d9f9 100644
--- a/package.json
+++ b/package.json
@@ -94,8 +94,5 @@
     "typescript": "^4.5.5",
     "vite": "^2.8.4"
   },
-  "packageManager": "yarn@3.1.1",
-  "dependencies": {
-    "preload": "^0.1.0"
-  }
+  "packageManager": "yarn@3.1.1"
 }
diff --git a/packages/main/package.json b/packages/main/package.json
index 4ba6d06..85f9b12 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -14,6 +14,7 @@
     "deep-equal": "^2.0.5",
     "electron": "17.1.0",
     "fs-extra": "^10.0.1",
+    "i18next": "^21.6.14",
     "json5": "^2.2.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
diff --git a/packages/main/src/i18n/I18nStore.ts b/packages/main/src/i18n/I18nStore.ts
new file mode 100644
index 0000000..d833e8a
--- /dev/null
+++ b/packages/main/src/i18n/I18nStore.ts
@@ -0,0 +1,104 @@
+/*
+ * 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 type { i18n, TFunction } from 'i18next';
+import { IAtom, createAtom } from 'mobx';
+
+import { getLogger } from '../utils/log';
+
+const log = getLogger('I18nStore');
+
+export type UseTranslationResult =
+  | { ready: true; i18n: i18n; t: TFunction }
+  | { ready: false };
+
+export default class I18nStore {
+  private readonly languageChangedAtom: IAtom;
+
+  private readonly namespaceLoadedAtoms: Map<string, IAtom> = new Map();
+
+  private readonly notifyLanguageChange = () =>
+    this.languageChangedAtom.reportObserved();
+
+  constructor(private readonly i18next: i18n) {
+    this.languageChangedAtom = createAtom(
+      'i18next',
+      () => i18next.on('languageChanged', this.notifyLanguageChange),
+      () => i18next.off('languageChanged', this.notifyLanguageChange),
+    );
+  }
+
+  useTranslation(ns?: string): UseTranslationResult {
+    const observed = this.languageChangedAtom.reportObserved();
+    const namespaceToLoad =
+      ns ?? this.i18next.options.defaultNS ?? 'translation';
+    if (
+      this.i18next.isInitialized &&
+      this.i18next.hasLoadedNamespace(namespaceToLoad)
+    ) {
+      return {
+        ready: true,
+        i18n: this.i18next,
+        // eslint-disable-next-line unicorn/no-null -- `i18next` API requires `null`.
+        t: this.i18next.getFixedT(null, namespaceToLoad),
+      };
+    }
+    if (observed) {
+      this.loadNamespace(namespaceToLoad);
+    }
+    return { ready: false };
+  }
+
+  private loadNamespace(ns: string): void {
+    const existingAtom = this.namespaceLoadedAtoms.get(ns);
+    if (existingAtom !== undefined) {
+      existingAtom.reportObserved();
+      return;
+    }
+    const atom = createAtom(`i18next-${ns}`);
+    this.namespaceLoadedAtoms.set(ns, atom);
+    atom.reportObserved();
+
+    const loaded = () => {
+      this.namespaceLoadedAtoms.delete(ns);
+      atom.reportChanged();
+    };
+
+    const loadAsync = async () => {
+      await this.i18next.loadNamespaces([ns]);
+      if (this.i18next.isInitialized) {
+        setImmediate(loaded);
+        return;
+      }
+      const initialized = () => {
+        setImmediate(() => {
+          this.i18next.off('initialized', initialized);
+          loaded();
+        });
+      };
+      this.i18next.on('initialized', initialized);
+    };
+
+    loadAsync().catch((error) => {
+      log.error('Failed to load translations for namespace', ns, error);
+      setImmediate(loaded);
+    });
+  }
+}
diff --git a/packages/main/src/i18n/LocalizationRepository.ts b/packages/main/src/i18n/LocalizationRepository.ts
new file mode 100644
index 0000000..041449d
--- /dev/null
+++ b/packages/main/src/i18n/LocalizationRepository.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 type { ResourceKey } from 'i18next';
+
+export default interface LocatlizationRepository {
+  getResourceContents(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey>;
+
+  getMissingResourceContents(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey>;
+
+  setMissingResourceContents(
+    language: string,
+    namespace: string,
+    data: ResourceKey,
+  ): Promise<void>;
+}
diff --git a/packages/main/src/i18n/RepositoryBasedI18nBackend.ts b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
new file mode 100644
index 0000000..4d87ce9
--- /dev/null
+++ b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
@@ -0,0 +1,224 @@
+/*
+ * 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 type {
+  BackendModule,
+  InitOptions,
+  ReadCallback,
+  Services,
+} from 'i18next';
+import { debounce } from 'lodash-es';
+import ms from 'ms';
+
+import { getLogger } from '../utils/log';
+
+import type LocatlizationRepository from './LocalizationRepository';
+
+const MISSING_ENTRIES_DEBOUNCE_TIME = ms('1s');
+
+const log = getLogger('RepositoryBasedI18nBackend');
+
+/**
+ * I18next backend for loading translations from a file.
+ *
+ * Loosely based on [i18next-fs-backend](https://github.com/i18next/i18next-fs-backend),
+ * but we shrink bundle size by omitting JSON5 or YAML translation handling.
+ * Direct file IO is replaced by the `LocalizationRepository`,
+ * which handles platform-specific concerns.
+ */
+export default class RepositoryBasedI18nBackend
+  implements BackendModule<unknown>
+{
+  type = 'backend' as const;
+
+  private writeQueue: Map<string, Map<string, Map<string, string>>> = new Map();
+
+  private keySeparator: string | false = '.';
+
+  private readonly flushWriteQueueImmediately = () => {
+    const savedWriteQueue = this.writeQueue;
+    this.writeQueue = new Map();
+    savedWriteQueue.forEach((languagesMap, namespace) => {
+      languagesMap.forEach((keysMap, language) => {
+        this.flushChanges(language, namespace, keysMap).catch((error) => {
+          log.error(
+            'Cannot write missing',
+            language,
+            'translations for namespace',
+            namespace,
+            error,
+          );
+        });
+      });
+    });
+  };
+
+  private readonly flushWriteQueue = debounce(
+    this.flushWriteQueueImmediately,
+    MISSING_ENTRIES_DEBOUNCE_TIME,
+  );
+
+  constructor(
+    private readonly repository: LocatlizationRepository,
+    private readonly devMode = false,
+  ) {}
+
+  init(
+    _services: Services,
+    _backendOptions: unknown,
+    { keySeparator }: InitOptions,
+  ) {
+    if (keySeparator !== undefined) {
+      this.keySeparator = keySeparator;
+    }
+  }
+
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    const readAsync = async () => {
+      const translations = await this.repository.getResourceContents(
+        language,
+        namespace,
+      );
+      // eslint-disable-next-line unicorn/no-null -- `i18next` API requires `null`.
+      setImmediate(() => callback(null, translations));
+    };
+
+    readAsync().catch((error) => {
+      log.error(
+        'Error while loading',
+        language,
+        'translations for namespace',
+        namespace,
+        error,
+      );
+      const callbackError =
+        error instanceof Error
+          ? error
+          : new Error(`Unknown error: ${JSON.stringify(error)}`);
+      /*
+        eslint-disable-next-line promise/no-callback-in-promise, unicorn/no-null --
+        Converting from promise based API to a callback. `i18next` API requires `null`.
+      */
+      setImmediate(() => callback(callbackError, null));
+    });
+  }
+
+  create(
+    languages: string[],
+    namespace: string,
+    key: string,
+    fallbackValue: string,
+  ): void {
+    if (!this.devMode) {
+      throw new Error(
+        'Refusing to write missing translations in production mode',
+      );
+    }
+    let languagesMapOrUndefined = this.writeQueue.get(namespace);
+    if (languagesMapOrUndefined === undefined) {
+      languagesMapOrUndefined = new Map();
+      this.writeQueue.set(namespace, languagesMapOrUndefined);
+    }
+    const languagesMap = languagesMapOrUndefined;
+    languages.forEach((language) => {
+      let keysMap = languagesMap.get(language);
+      if (keysMap === undefined) {
+        keysMap = new Map();
+        languagesMap.set(language, keysMap);
+      }
+      keysMap.set(key, fallbackValue);
+    });
+    this.flushWriteQueue();
+  }
+
+  /**
+   * Flushes new translations to the missing translations file.
+   *
+   * Will always fails if `devMode` is `false`.
+   * If no changes are made to the translations, the file won't be rewritten.
+   *
+   * @param language The language to add translations for.
+   * @param namespace The namespace to add translations for.
+   * @param entries The translations to add.
+   * @returns A promise that resolves when changes were flushed successfully.
+   */
+  private async flushChanges(
+    language: string,
+    namespace: string,
+    entries: Map<string, string>,
+  ): Promise<void> {
+    if (!this.devMode) {
+      throw new Error(
+        'Refusing to write missing translations in production mode',
+      );
+    }
+    const resourceContents = await this.repository.getMissingResourceContents(
+      language,
+      namespace,
+    );
+    const translations =
+      typeof resourceContents === 'object' ? resourceContents : {};
+    let changed = false;
+    entries.forEach((value, key) => {
+      const splitKey = this.keySeparator ? key.split(this.keySeparator) : [key];
+      let obj = translations;
+      /*
+        eslint-disable @typescript-eslint/no-unsafe-assignment,
+        security/detect-object-injection --
+        We need to modify raw objects, because this is the storage format for i18next.
+        To mitigate the prototype injection security risk,
+        we make sure to only ever run this in development mode.
+      */
+      for (let i = 0; i < splitKey.length - 1; i += 1) {
+        let nextObj = obj[splitKey[i]];
+        if (typeof nextObj !== 'object') {
+          nextObj = {};
+          obj[splitKey[i]] = nextObj;
+        }
+        obj = nextObj;
+      }
+      const lastKey = splitKey[splitKey.length - 1];
+      if (obj[lastKey] !== value) {
+        obj[lastKey] = value;
+        changed = true;
+      }
+      /*
+        eslint-enable @typescript-eslint/no-unsafe-assignment,
+        security/detect-object-injection
+      */
+    });
+    if (!changed) {
+      return;
+    }
+    await this.repository.setMissingResourceContents(
+      language,
+      namespace,
+      translations,
+    );
+    log.debug(
+      'Wrote',
+      entries.size,
+      'missing',
+      language,
+      'translations for namespace',
+      namespace,
+    );
+  }
+}
diff --git a/packages/main/src/i18n/i18nLog.ts b/packages/main/src/i18n/i18nLog.ts
new file mode 100644
index 0000000..33a8c4e
--- /dev/null
+++ b/packages/main/src/i18n/i18nLog.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 type { LoggerModule } from 'i18next';
+
+import { getLogger } from '../utils/log';
+
+const log = getLogger('i18nLog');
+
+/*
+  eslint-disable-next-line @typescript-eslint/unbound-method --
+  loglevel log methods don't rely on `this`, so this is safe,
+  and also keeps stacktraces smaller.
+*/
+const { debug, warn, error } = log;
+
+const i18nLog: LoggerModule = {
+  type: 'logger',
+  log: debug,
+  warn,
+  error,
+};
+
+export default i18nLog;
diff --git a/packages/main/src/i18n/impl/LocaltizationFiles.ts b/packages/main/src/i18n/impl/LocaltizationFiles.ts
new file mode 100644
index 0000000..73a769e
--- /dev/null
+++ b/packages/main/src/i18n/impl/LocaltizationFiles.ts
@@ -0,0 +1,93 @@
+/*
+ * 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 { readFile, writeFile } from 'node:fs/promises';
+
+import type { ResourceKey } from 'i18next';
+
+import type Resources from '../../infrastructure/resources/Resources';
+import isErrno from '../../utils/isErrno';
+import { getLogger } from '../../utils/log';
+import type LocatlizationRepository from '../LocalizationRepository';
+
+const log = getLogger('LocalizationFiles');
+
+export default class LocalizationFiles implements LocatlizationRepository {
+  constructor(private readonly resources: Resources) {}
+
+  async getResourceContents(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey> {
+    const fileName = this.resources.getLocalizationPath(
+      language,
+      `${namespace}.json`,
+    );
+    const contents = await readFile(fileName, 'utf8');
+    log.info('Read localization file', fileName);
+    // The contents of the file should come from a signed archive during production,
+    // so we don't need to (and can't) validate them.
+    return JSON.parse(contents) as ResourceKey;
+  }
+
+  private getMissingLocalizationPath(
+    language: string,
+    namespace: string,
+  ): string {
+    return this.resources.getLocalizationPath(
+      language,
+      `${namespace}.missing.json`,
+    );
+  }
+
+  async getMissingResourceContents(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey> {
+    const fileName = this.getMissingLocalizationPath(language, namespace);
+    try {
+      const contents = await readFile(fileName, 'utf8');
+      // The contents of the file are only used during development,
+      // so we don't need to (and can't) validate them.
+      return JSON.parse(contents) as ResourceKey;
+    } catch (error) {
+      if (isErrno(error, 'ENOENT')) {
+        log.debug(
+          'No missing translations file',
+          language,
+          'for namespace',
+          namespace,
+        );
+        return {};
+      }
+      throw error;
+    }
+  }
+
+  setMissingResourceContents(
+    language: string,
+    namespace: string,
+    data: ResourceKey,
+  ): Promise<void> {
+    const fileName = this.getMissingLocalizationPath(language, namespace);
+    const contents = JSON.stringify(data, undefined, 2);
+    return writeFile(fileName, contents, 'utf8');
+  }
+}
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
new file mode 100644
index 0000000..1408a30
--- /dev/null
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -0,0 +1,50 @@
+/*
+ * 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 i18next from 'i18next';
+
+import type Resources from '../infrastructure/resources/Resources';
+import type MainStore from '../stores/MainStore';
+
+import I18nStore from './I18nStore';
+import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
+import i18nLog from './i18nLog';
+import LocalizationFiles from './impl/LocaltizationFiles';
+
+export default async function loadLocalization(
+  store: MainStore,
+  resources: Resources,
+  devMode: boolean,
+): Promise<void> {
+  const repository = new LocalizationFiles(resources);
+  const backend = new RepositoryBasedI18nBackend(repository, devMode);
+  const i18n = i18next
+    .createInstance({
+      lng: 'en',
+      fallbackLng: ['en'],
+      debug: devMode,
+      saveMissing: devMode,
+    })
+    .use(backend)
+    .use(i18nLog);
+  await i18n.init();
+  const i18nStore = new I18nStore(i18n);
+  store.setI18n(i18nStore);
+}
diff --git a/packages/main/src/infrastructure/config/impl/ConfigFile.ts b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
index e8237b4..4ad0fcc 100644
--- a/packages/main/src/infrastructure/config/impl/ConfigFile.ts
+++ b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
@@ -27,6 +27,7 @@ import { throttle } from 'lodash-es';
 
 import type Config from '../../../stores/config/Config';
 import type Disposer from '../../../utils/Disposer';
+import isErrno from '../../../utils/isErrno';
 import { getLogger } from '../../../utils/log';
 import type ConfigRepository from '../ConfigRepository';
 import type { ReadConfigResult } from '../ConfigRepository';
@@ -55,7 +56,7 @@ export default class ConfigFile implements ConfigRepository {
     try {
       configStr = await readFile(this.#configFilePath, 'utf8');
     } catch (error) {
-      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      if (isErrno(error, 'ENOENT')) {
         log.debug('Config file', this.#configFilePath, 'was not found');
         return { found: false };
       }
@@ -94,7 +95,7 @@ export default class ConfigFile implements ConfigRepository {
         mtime = stats.mtime;
         log.trace('Config file last modified at', mtime);
       } catch (error) {
-        if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        if (isErrno(error, 'ENOENT')) {
           log.debug(
             'Config file',
             this.#configFilePath,
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
index 5166719..49bfbfd 100644
--- a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -30,6 +30,12 @@ export default function setApplicationMenu(
   isMac: boolean,
 ): void {
   const dispose = autorun(() => {
+    const translation = store.useTranslation();
+    if (!translation.ready) {
+      return;
+    }
+    const { t } = translation;
+
     const { settings, shared, visibleService } = store;
     const { showLocationBar, selectedService } = settings;
     const { canSwitchServices, services } = shared;
@@ -42,7 +48,7 @@ export default function setApplicationMenu(
         role: 'viewMenu',
         submenu: [
           {
-            label: 'Show Location Bar',
+            label: t<string>('menu.view.showLocationBar'),
             accelerator: 'CommandOrControl+Shift+L',
             type: 'checkbox',
             checked: showLocationBar,
@@ -52,7 +58,7 @@ export default function setApplicationMenu(
           },
           { type: 'separator' },
           {
-            label: 'Reload',
+            label: t<string>('menu.view.reload'),
             accelerator: 'CommandOrControl+R',
             enabled: selectedService !== undefined,
             click() {
@@ -60,7 +66,7 @@ export default function setApplicationMenu(
             },
           },
           {
-            label: 'Force Reload',
+            label: t<string>('menu.view.forceReload'),
             accelerator: 'CommandOrControl+Shift+R',
             enabled: selectedService !== undefined,
             click() {
@@ -68,7 +74,7 @@ export default function setApplicationMenu(
             },
           },
           {
-            label: 'Toggle Developer Tools',
+            label: t<string>('menu.view.toggleDeveloperTools'),
             accelerator: 'CommandOrControl+Shift+I',
             enabled: visibleService !== undefined,
             click() {
@@ -80,12 +86,15 @@ export default function setApplicationMenu(
             ? ([
                 {
                   role: 'forceReload',
-                  label: 'Reload Sophie',
+                  label: t<string>('menu.view.reloadSophie'),
                   accelerator: 'CommandOrControl+Shift+Alt+R',
                 },
                 {
                   role: 'toggleDevTools',
-                  label: 'Toggle Sophie Developer Tools',
+                  label: t<string>(
+                    'menu.view.toggleSophieDeveloperTools',
+                    'Toggle Sophie Developer Tools',
+                  ),
                   accelerator: 'CommandOrControl+Shift+Alt+I',
                 },
                 { type: 'separator' },
@@ -95,10 +104,10 @@ export default function setApplicationMenu(
         ],
       },
       {
-        label: 'Services',
+        label: t<string>('menu.servicesMenu'),
         submenu: [
           {
-            label: 'Next Service',
+            label: t<string>('menu.services.nextService'),
             accelerator: 'CommandOrControl+Tab',
             enabled: canSwitchServices,
             click() {
@@ -106,7 +115,7 @@ export default function setApplicationMenu(
             },
           },
           {
-            label: 'Previous Service',
+            label: t<string>('menu.services.previousService'),
             accelerator: 'CommandOrControl+Shift+Tab',
             enabled: canSwitchServices,
             click() {
@@ -140,7 +149,7 @@ export default function setApplicationMenu(
         role: 'help',
         submenu: [
           {
-            label: 'Gitlab',
+            label: t<string>('menu.help.gitlab'),
             click() {
               store.openWebpageInBrowser();
             },
diff --git a/packages/main/src/infrastructure/resources/Resources.ts b/packages/main/src/infrastructure/resources/Resources.ts
index 269c838..0e90c6b 100644
--- a/packages/main/src/infrastructure/resources/Resources.ts
+++ b/packages/main/src/infrastructure/resources/Resources.ts
@@ -21,6 +21,8 @@
 export default interface Resources {
   getPath(packageName: string, relativePathInPackage: string): string;
 
+  getLocalizationPath(language: string, fileName: string): string;
+
   getFileURL(packageName: string, relativePathInPackage: string): string;
 
   getRendererURL(relativePathInRendererPackage: string): string;
diff --git a/packages/main/src/infrastructure/resources/impl/getDistResources.ts b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
index f3c3f7b..3c1ffb3 100644
--- a/packages/main/src/infrastructure/resources/impl/getDistResources.ts
+++ b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
@@ -33,6 +33,7 @@ export default function getDistResources(
   devServerURL = import.meta.env?.VITE_DEV_SERVER_URL,
 ): Resources {
   const packagesRoot = path.join(thisDir, '..', '..');
+  const localizationRoot = path.join(packagesRoot, '..', 'locales');
 
   function getPath(packageName: string, relativePathInPackage: string): string {
     return path.join(packagesRoot, packageName, 'dist', relativePathInPackage);
@@ -48,6 +49,9 @@ export default function getDistResources(
 
   return {
     getPath,
+    getLocalizationPath(language, fileName) {
+      return path.join(localizationRoot, language, fileName);
+    },
     getFileURL,
     getRendererURL:
       devMode && devServerURL !== undefined
diff --git a/packages/main/src/initReactions.ts b/packages/main/src/initReactions.ts
index 9c49fc5..cdff551 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -20,6 +20,7 @@
 
 import { app, session } from 'electron';
 
+import loadLocalization from './i18n/loadLocalization';
 import ConfigFile from './infrastructure/config/impl/ConfigFile';
 import UserAgents from './infrastructure/electron/UserAgents';
 import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory';
@@ -52,7 +53,11 @@ export default async function initReactions(
   }
   const userAgents = new UserAgents(app.userAgentFallback);
   app.userAgentFallback = userAgents.fallbackUserAgent(devMode);
-  setApplicationMenu(store, devMode, isMac);
+  const localizeInterface = async () => {
+    await loadLocalization(store, resources, devMode);
+    setApplicationMenu(store, devMode, isMac);
+  };
+  const localization = localizeInterface();
   const viewFactory = new ElectronViewFactory(userAgents, resources, devMode);
   const [mainWindow] = await Promise.all([
     viewFactory.createMainWindow(store),
@@ -60,6 +65,7 @@ export default async function initReactions(
   ]);
   store.setMainWindow(mainWindow);
   loadServices(store, viewFactory);
+  await localization;
   return () => {
     disposeNativeThemeController();
     disposeConfigController();
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index 86fadcb..873f998 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -21,6 +21,8 @@
 import type { Action, BrowserViewBounds } from '@sophie/shared';
 import { applySnapshot, Instance, types } from 'mobx-state-tree';
 
+import type I18nStore from '../i18n/I18nStore';
+import type { UseTranslationResult } from '../i18n/I18nStore';
 import type { MainWindow } from '../infrastructure/electron/types';
 import { getLogger } from '../utils/log';
 
@@ -44,6 +46,7 @@ const MainStore = types
       {},
     ),
     shared: types.optional(SharedStore, {}),
+    i18n: types.frozen<I18nStore | undefined>(),
   })
   .views((self) => ({
     get settings(): GlobalSettings {
@@ -61,6 +64,9 @@ const MainStore = types
         ? selectedService
         : undefined;
     },
+    useTranslation(ns?: string): UseTranslationResult {
+      return self.i18n?.useTranslation(ns) ?? { ready: false };
+    },
   }))
   .volatile(
     (): {
@@ -124,6 +130,9 @@ const MainStore = types
     beforeDestroy(): void {
       self.mainWindow?.dispose();
     },
+    setI18n(i18n: I18nStore): void {
+      self.i18n = i18n;
+    },
   }));
 
 /*
diff --git a/packages/main/src/utils/isErrno.ts b/packages/main/src/utils/isErrno.ts
new file mode 100644
index 0000000..8adbc33
--- /dev/null
+++ b/packages/main/src/utils/isErrno.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C)  2021-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
+ */
+
+export default function isErrno(error: unknown, code: string): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'code' in error &&
+    (error as NodeJS.ErrnoException).code === code
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 320d129..b0afd2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -448,6 +448,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.17.2":
+  version: 7.17.8
+  resolution: "@babel/runtime@npm:7.17.8"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 68d195c1630bb91ac20e86635d292a17ebab7f361cfe79406b3f5a6cc2e59fa283ae5006568899abf869312c2b35b744bd407aea8ffdb650f1a68d07785d47e9
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.16.7, @babel/template@npm:^7.3.3":
   version: 7.16.7
   resolution: "@babel/template@npm:7.16.7"
@@ -1286,6 +1295,7 @@ __metadata:
     esbuild: ^0.14.23
     fs-extra: ^10.0.1
     git-repo-info: ^2.1.1
+    i18next: ^21.6.14
     jest: ^27.5.1
     jest-mock: ^27.5.1
     json5: ^2.2.0
@@ -3231,13 +3241,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:~0.0.0":
-  version: 0.0.0
-  resolution: "deep-equal@npm:0.0.0"
-  checksum: 024cf06cfe917e2f2debf531891537fa21a859a8e5696085d97aefc89e20c66ac20f98dd472fcbe0001f235a3b978a1f5bbbfd661ca795d87e5832b3831bd01a
-  languageName: node
-  linkType: hard
-
 "deep-extend@npm:^0.6.0":
   version: 0.6.0
   resolution: "deep-extend@npm:0.6.0"
@@ -3275,13 +3278,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"defined@npm:~0.0.0":
-  version: 0.0.0
-  resolution: "defined@npm:0.0.0"
-  checksum: 037f80bb4d8b92e72ca99f1b24d1d9d683741b28b9cb9c7b5f4a4c913826fd7f4b103440a623a3882f2218ec3d87649fbf86c65c45e6999cf1124b9a8924fca5
-  languageName: node
-  linkType: hard
-
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -4820,16 +4816,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"global@npm:~2.0.7":
-  version: 2.0.7
-  resolution: "global@npm:2.0.7"
-  dependencies:
-    min-document: ~0.2.2
-    process: ~0.5.1
-  checksum: f2ae2bfd251c014cd8273680b4be221f4c20eb07ad9bfce21f6de7bddbcb5d58b393488e8ebf119ede54addb561c648aa47b2407a630c3a69188c8d11c5b0d75
-  languageName: node
-  linkType: hard
-
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -5067,6 +5053,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:^21.6.14":
+  version: 21.6.14
+  resolution: "i18next@npm:21.6.14"
+  dependencies:
+    "@babel/runtime": ^7.17.2
+  checksum: bc6e117874d9b69a39d6ad322851d25f75908c7fa977c8771b98ba7b0273aceba96e82326ed0855b8db098b1490c5a0decbe62b4f61dac84fdc677c2fdc52bb8
+  languageName: node
+  linkType: hard
+
 "iconv-corefoundation@npm:^1.1.7":
   version: 1.1.7
   resolution: "iconv-corefoundation@npm:1.1.7"
@@ -5183,7 +5178,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:~2.0.1, inherits@npm:~2.0.3":
+"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:~2.0.3":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -5204,13 +5199,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"insert-css@npm:0.0.0":
-  version: 0.0.0
-  resolution: "insert-css@npm:0.0.0"
-  checksum: d0441ad656674fe971a594dcf6f53f53cdb8d469668344a7dd15dfa7f2805829d553f3cf799d967256cead4d960f884ffcd27e45df9732916a3c8b7763a16f7b
-  languageName: node
-  linkType: hard
-
 "internal-slot@npm:^1.0.3":
   version: 1.0.3
   resolution: "internal-slot@npm:1.0.3"
@@ -6356,13 +6344,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonify@npm:~0.0.0":
-  version: 0.0.0
-  resolution: "jsonify@npm:0.0.0"
-  checksum: d8d4ed476c116e6987a460dcb82f22284686caae9f498ac87b0502c1765ac1522f4f450a4cad4cc368d202fd3b27a3860735140a82867fc6d558f5f199c38bce
-  languageName: node
-  linkType: hard
-
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.2.1":
   version: 3.2.1
   resolution: "jsx-ast-utils@npm:3.2.1"
@@ -6692,15 +6673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"min-document@npm:~0.2.2":
-  version: 0.2.8
-  resolution: "min-document@npm:0.2.8"
-  dependencies:
-    tape: ~1.0.2
-  checksum: 6f861c6169d5b89c8592dafb1247e962319491099b676276e07663be7d4e30d17fc7bcd3576e18dd4e08c5ea6a3a87db33317d813303bdecba0b562a3fb70adc
-  languageName: node
-  linkType: hard
-
 "min-indent@npm:^1.0.0":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -7122,20 +7094,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:~1.1.1":
-  version: 1.1.1
-  resolution: "once@npm:1.1.1"
-  checksum: c5384f8fc8b973476afe84433ed7202cc5fdbf749abc06908716d706caca1ab951209de38f008ce8f5abca8896edec8aff83c97438a7b6808b5582e01b12864f
-  languageName: node
-  linkType: hard
-
-"once@npm:~1.2.0":
-  version: 1.2.0
-  resolution: "once@npm:1.2.0"
-  checksum: 4e0b4908bd34dd1db7c83a262e66bcfd077ac4eff94d0499b52878346d1371770147d4d9ae6cc47f0f3a3370570b6b79289daee9ea4cfad143d19caf04849259
-  languageName: node
-  linkType: hard
-
 "onetime@npm:^5.1.2":
   version: 5.1.2
   resolution: "onetime@npm:5.1.2"
@@ -7410,18 +7368,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"preload@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "preload@npm:0.1.0"
-  dependencies:
-    inherits: ~2.0.1
-    insert-css: 0.0.0
-    once: ~1.2.0
-    xhr: ~1.2.3
-  checksum: 992aa3b9f6c3b4bd40c87bfbdac389337b046d877258d6fc7e4cfc674b60d72eb3fe83ead47665bc76787c6c2ed1a41ff1dedb073f890f098607df1877e5b639
-  languageName: node
-  linkType: hard
-
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -7479,13 +7425,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:~0.5.1":
-  version: 0.5.2
-  resolution: "process@npm:0.5.2"
-  checksum: 613505ec6d518654fc9c677881c6b8c871179dbf4bfe23f5a7a15defdb58efb1b75bfc96576adc118ba0bca1b76c359687a13f7d43950af0b7d5caa27efbe9e3
-  languageName: node
-  linkType: hard
-
 "progress@npm:^2.0.3":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"
@@ -8299,7 +8238,6 @@ __metadata:
     jest: ^27.5.1
     jest-junit: ^13.0.0
     nano-staged: ^0.6.0
-    preload: ^0.1.0
     prettier: ^2.5.1
     rimraf: ^3.0.2
     simple-git-hooks: ^2.7.0
@@ -8614,20 +8552,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tape@npm:~1.0.2":
-  version: 1.0.4
-  resolution: "tape@npm:1.0.4"
-  dependencies:
-    deep-equal: ~0.0.0
-    defined: ~0.0.0
-    jsonify: ~0.0.0
-    through: ~2.3.4
-  bin:
-    tape: ./bin/tape
-  checksum: c8a3e7b0dbb8450d3b18bf8d82a5ac393d0d25ed26a3fa5c1f3205e263f8828b744c6a61cd7d35fa93c4948d2da88232994bf41451186cd9caf77ed87e47871d
-  languageName: node
-  linkType: hard
-
 "tar@npm:^6.0.2, tar@npm:^6.1.2":
   version: 6.1.11
   resolution: "tar@npm:6.1.11"
@@ -8687,13 +8611,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:~2.3.4":
-  version: 2.3.8
-  resolution: "through@npm:2.3.8"
-  checksum: a38c3e059853c494af95d50c072b83f8b676a9ba2818dcc5b108ef252230735c54e0185437618596c790bbba8fcdaef5b290405981ffa09dce67b1f1bf190cbd
-  languageName: node
-  linkType: hard
-
 "tmp-promise@npm:^3.0.2":
   version: 3.0.3
   resolution: "tmp-promise@npm:3.0.3"
@@ -9401,16 +9318,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xhr@npm:~1.2.3":
-  version: 1.2.4
-  resolution: "xhr@npm:1.2.4"
-  dependencies:
-    global: ~2.0.7
-    once: ~1.1.1
-  checksum: 55840633fc96bfee99a9c7c839aa8db670f061fc13c45a4056f66c1194b0525f511dbcb5f01ba6ea2f02908f600fd19af13e6d24622ba26b168afbfd94f9211a
-  languageName: node
-  linkType: hard
-
 "xml-name-validator@npm:^3.0.0":
   version: 3.0.0
   resolution: "xml-name-validator@npm:3.0.0"