feat(renderer): Renderer translations

Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.

Translations are hot-reloaded automatically.

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

34 files changed, 806 insertions, 193 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index 2cd7959..e215adc 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -1,4 +1,16 @@
 {
+  "banner": {
+    "close": "Dismiss notification",
+    "newWindow": {
+      "followLink": "Follow link in this window",
+      "openInExternalBrowser": "Open in browser",
+      "openAllInExternalBrowser": "Open all",
+      "dismiss": "Ignore",
+      "messageSingleLink": "{{name}} wants to open <2>{{url}}</2> in a new window",
+      "messageMultipleLinks_one": "{{name}} wants to open <2>{{url}}</2> and <5>{{count}}</5> other link in new windows",
+      "messageMultipleLinks_other": "{{name}} wants to open <2>{{url}}</2> and <5>{{count}}</5> other links in new windows"
+    }
+  },
   "menu": {
     "servicesMenu": "Services",
     "view": {
@@ -16,5 +28,31 @@
     "help": {
       "gitlab": "Gitlab"
     }
+  },
+  "securityLabel": {
+    "notSecureConnection": "Not secure",
+    "secureConnection": "Secure connection",
+    "unknownSite": "Unknown site"
+  },
+  "service": {
+    "title": {
+      "nameWithMessages": "{{name}} ({{messages}})",
+      "nameWithNoMessages": "{{name}}",
+      "directMessageCount_one": "{{count}} direct message",
+      "directMessageCount_other": "{{count}} direct messages",
+      "indirectMessageCount_one": "{{count}} indirect message",
+      "indirectMessageCount_other": "{{count}} indirect messages",
+      "directAndIndirectMessageCount": "$t(service.title.directMessageCount, { \"count\": {{directMessageCount}} }) and $t(service.title.indirectMessageCount, { \"count\": {{indirectMessageCount}} })"
+    }
+  },
+  "toolbar": {
+    "back": "Back",
+    "forward": "Forward",
+    "home": "Home",
+    "openInBrowser": "Open in browser",
+    "reload": "Reload",
+    "stop": "Stop",
+    "toggleDarkMode": "Toggle dark mode",
+    "toggleLocationBar": "Toggle location bar"
   }
 }
diff --git a/packages/main/src/i18n/I18nStore.ts b/packages/main/src/i18n/I18nStore.ts
index c364f0e..54c3d20 100644
--- a/packages/main/src/i18n/I18nStore.ts
+++ b/packages/main/src/i18n/I18nStore.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { i18n, TFunction } from 'i18next';
+import type { i18n, ResourceKey, TFunction } from 'i18next';
 import { IAtom, createAtom } from 'mobx';
 
 import { getLogger } from '../utils/log';
@@ -113,4 +113,33 @@ export default class I18nStore {
     });
     log.debug('Reloaded translations');
   }
+
+  async getTranslation(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey> {
+    if (!this.i18next.hasResourceBundle(language, namespace)) {
+      await this.i18next.loadLanguages([language]);
+      await this.i18next.loadNamespaces([namespace]);
+    }
+    const bundle = this.i18next.getResourceBundle(
+      language,
+      namespace,
+    ) as unknown;
+    if (typeof bundle !== 'object' || bundle === null) {
+      throw new Error(
+        `Failed to load ${namespace} resource bundle for language ${language}`,
+      );
+    }
+    return bundle as ResourceKey;
+  }
+
+  addMissingTranslation(
+    languages: string[],
+    namespace: string,
+    key: string,
+    value: string,
+  ): void {
+    this.i18next.modules.backend?.create?.(languages, namespace, key, value);
+  }
 }
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index 1408a30..ec3cf84 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -18,16 +18,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { fallbackLng } 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 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,
@@ -37,14 +43,25 @@ export default async function loadLocalization(
   const backend = new RepositoryBasedI18nBackend(repository, devMode);
   const i18n = i18next
     .createInstance({
-      lng: 'en',
-      fallbackLng: ['en'],
+      lng: store.shared.language,
+      fallbackLng,
       debug: devMode,
       saveMissing: devMode,
     })
     .use(backend)
     .use(i18nLog);
-  await i18n.init();
   const i18nStore = new I18nStore(i18n);
   store.setI18n(i18nStore);
+  await i18n.init();
+  const disposeChangeLanguage = autorun(() => {
+    const {
+      shared: { language },
+    } = store;
+    if (i18n.language !== language) {
+      i18n.changeLanguage(language).catch((error) => {
+        log.error('Failed to change language', error);
+      });
+    }
+  });
+  addDisposer(store, disposeChangeLanguage);
 }
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
index cff7957..6144d89 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
@@ -22,6 +22,7 @@ import {
   Action,
   MainToRendererIpcMessage,
   RendererToMainIpcMessage,
+  Translation,
 } from '@sophie/shared';
 import { BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
@@ -96,6 +97,24 @@ export default class ElectronMainWindow implements MainWindow {
       return this.bridge.snapshot;
     });
 
+    ipcMain.handle(
+      RendererToMainIpcMessage.GetTranslation,
+      (event, translation) => {
+        const { id } = event.sender;
+        if (id !== webContents.id) {
+          log.warn(
+            'Unexpected',
+            RendererToMainIpcMessage.GetTranslation,
+            'from webContents',
+            id,
+          );
+          throw new Error('Invalid IPC call');
+        }
+        const { language, namespace } = Translation.parse(translation);
+        return store.getTranslation(language, namespace);
+      },
+    );
+
     this.bridge = new RendererBridge(store, (patch) => {
       webContents.send(MainToRendererIpcMessage.SharedStorePatch, patch);
     });
@@ -142,6 +161,12 @@ export default class ElectronMainWindow implements MainWindow {
     );
   }
 
+  reloadTranslations(): void {
+    this.browserWindow.webContents.send(
+      MainToRendererIpcMessage.ReloadTranslations,
+    );
+  }
+
   dispose() {
     this.bridge.dispose();
     this.browserWindow.destroy();
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
index 49bfbfd..8e10383 100644
--- a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -91,10 +91,7 @@ export default function setApplicationMenu(
                 },
                 {
                   role: 'toggleDevTools',
-                  label: t<string>(
-                    'menu.view.toggleSophieDeveloperTools',
-                    'Toggle Sophie Developer Tools',
-                  ),
+                  label: t<string>('menu.view.toggleSophieDeveloperTools'),
                   accelerator: 'CommandOrControl+Shift+Alt+I',
                 },
                 { type: 'separator' },
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 4716f0b..e5b0fd6 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -41,6 +41,8 @@ export interface MainWindow {
 
   setServiceView(serviceView: ServiceView | undefined): void;
 
+  reloadTranslations(): void;
+
   dispose(): void;
 }
 
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index 93cabb9..d717bed 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -19,7 +19,8 @@
  */
 
 import type { Action, BrowserViewBounds } from '@sophie/shared';
-import { applySnapshot, Instance, types } from 'mobx-state-tree';
+import type { ResourceKey } from 'i18next';
+import { applySnapshot, flow, Instance, types } from 'mobx-state-tree';
 
 import type I18nStore from '../i18n/I18nStore';
 import type { UseTranslationResult } from '../i18n/I18nStore';
@@ -67,6 +68,12 @@ const MainStore = types
     useTranslation(ns?: string): UseTranslationResult {
       return self.i18n?.useTranslation(ns) ?? { ready: false };
     },
+    getTranslation(language: string, namespace: string): Promise<ResourceKey> {
+      if (self.i18n === undefined) {
+        throw new Error('i18next has not been set');
+      }
+      return self.i18n.getTranslation(language, namespace);
+    },
   }))
   .volatile(
     (): {
@@ -79,10 +86,43 @@ const MainStore = types
     setBrowserViewBounds(bounds: BrowserViewBounds): void {
       applySnapshot(self.browserViewBounds, bounds);
     },
+    setMainWindow(mainWindow: MainWindow | undefined): void {
+      self.mainWindow = mainWindow;
+    },
+    openWebpageInBrowser() {
+      getEnv(self).openURLInExternalBrowser(
+        'https://gitlab.com/say-hi-to-sophie/shophie',
+      );
+    },
+    openAboutDialog() {
+      getEnv(self).openAboutDialog();
+    },
+    beforeDestroy(): void {
+      self.mainWindow?.dispose();
+    },
+    setI18n(i18n: I18nStore): void {
+      self.i18n = i18n;
+    },
+    addMissingTranslation(
+      languages: string[],
+      namespace: string,
+      key: string,
+      value: string,
+    ): void {
+      self.i18n?.addMissingTranslation(languages, namespace, key, value);
+    },
+    reloadTranslations: flow(function* reloadTranslations() {
+      if (self.i18n !== undefined) {
+        yield self.i18n.reloadTranslations();
+        self.mainWindow?.reloadTranslations();
+      }
+    }),
+  }))
+  .actions((self) => ({
     dispatch(action: Action): void {
       switch (action.action) {
         case 'set-browser-view-bounds':
-          this.setBrowserViewBounds(action.browserViewBounds);
+          self.setBrowserViewBounds(action.browserViewBounds);
           break;
         case 'set-selected-service-id':
           self.settings.setSelectedServiceId(action.serviceId);
@@ -98,11 +138,19 @@ const MainStore = types
           break;
         case 'reload-all-translations':
           if (self.i18n !== undefined) {
-            self.i18n.reloadTranslations().catch((error) => {
+            self.reloadTranslations().catch((error) => {
               log.error('Failed to reload translations', error);
             });
           }
           break;
+        case 'add-missing-translation':
+          self.addMissingTranslation(
+            action.languages,
+            action.namespace,
+            action.key,
+            action.value,
+          );
+          break;
         case 'dispatch-service-action': {
           const { serviceId, serviceAction } = action;
           const service = self.shared.servicesById.get(serviceId);
@@ -123,23 +171,6 @@ const MainStore = types
           break;
       }
     },
-    setMainWindow(mainWindow: MainWindow | undefined): void {
-      self.mainWindow = mainWindow;
-    },
-    openWebpageInBrowser() {
-      getEnv(self).openURLInExternalBrowser(
-        'https://gitlab.com/say-hi-to-sophie/shophie',
-      );
-    },
-    openAboutDialog() {
-      getEnv(self).openAboutDialog();
-    },
-    beforeDestroy(): void {
-      self.mainWindow?.dispose();
-    },
-    setI18n(i18n: I18nStore): void {
-      self.i18n = i18n;
-    },
   }));
 
 /*
diff --git a/packages/preload/package.json b/packages/preload/package.json
index 150d514..a8d73e8 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@sophie/shared": "workspace:*",
     "electron": "17.1.0",
+    "i18next": "^21.6.14",
     "loglevel": "^1.8.0",
     "mobx": "^6.4.1",
     "mobx-state-tree": "^5.1.3"
diff --git a/packages/preload/src/contextBridge/SharedStoreConnector.ts b/packages/preload/src/contextBridge/SharedStoreConnector.ts
new file mode 100644
index 0000000..13f9ac1
--- /dev/null
+++ b/packages/preload/src/contextBridge/SharedStoreConnector.ts
@@ -0,0 +1,88 @@
+/*
+ * 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
+ */
+
+import {
+  Action,
+  MainToRendererIpcMessage,
+  RendererToMainIpcMessage,
+  SharedStoreListener,
+  SharedStoreSnapshotIn,
+} from '@sophie/shared';
+import { ipcRenderer } from 'electron';
+import log from 'loglevel';
+import type { IJsonPatch } from 'mobx-state-tree';
+
+export default class SharedStoreConnector {
+  private onSharedStoreChangeCalled = false;
+
+  private listener: SharedStoreListener | undefined;
+
+  constructor(private readonly allowReplaceListener: boolean) {
+    ipcRenderer.on(
+      MainToRendererIpcMessage.SharedStorePatch,
+      (_event, patch) => {
+        try {
+          // `mobx-state-tree` will validate the patch, so we can safely cast here.
+          this.listener?.onPatch(patch as IJsonPatch[]);
+        } catch (error) {
+          log.error('Shared store listener onPatch failed', error);
+          this.listener = undefined;
+        }
+      },
+    );
+  }
+
+  async onSharedStoreChange(listener: SharedStoreListener): Promise<void> {
+    if (this.onSharedStoreChangeCalled && !this.allowReplaceListener) {
+      throw new Error('Shared store change listener was already set');
+    }
+    this.onSharedStoreChangeCalled = true;
+    let success = false;
+    let snapshot: unknown;
+    try {
+      snapshot = await ipcRenderer.invoke(
+        RendererToMainIpcMessage.GetSharedStoreSnapshot,
+      );
+      success = true;
+    } catch (error) {
+      log.error('Failed to get initial shared store snapshot', error);
+    }
+    if (!success) {
+      throw new Error('Failed to connect to shared store');
+    }
+    // `mobx-state-tree` will validate the snapshot, so we can safely cast here.
+    listener.onSnapshot(snapshot as SharedStoreSnapshotIn);
+    this.listener = listener;
+  }
+}
+
+export function dispatchAction(actionToDispatch: Action): void {
+  // Let the full zod parse error bubble up to the main world,
+  // since all data it may contain was provided from the main world.
+  const parsedAction = Action.parse(actionToDispatch);
+  try {
+    ipcRenderer.send(RendererToMainIpcMessage.DispatchAction, parsedAction);
+  } catch (error) {
+    // Do not leak IPC failure details into the main world.
+    const message = 'Failed to dispatch action';
+    log.error(message, actionToDispatch, error);
+    throw new Error(message);
+  }
+}
diff --git a/packages/preload/src/contextBridge/TranslationsConnector.ts b/packages/preload/src/contextBridge/TranslationsConnector.ts
new file mode 100644
index 0000000..284b793
--- /dev/null
+++ b/packages/preload/src/contextBridge/TranslationsConnector.ts
@@ -0,0 +1,71 @@
+/*
+ * 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 {
+  MainToRendererIpcMessage,
+  RendererToMainIpcMessage,
+  Translation,
+} from '@sophie/shared';
+import { ipcRenderer } from 'electron';
+import type { ResourceKey } from 'i18next';
+import log from 'loglevel';
+
+export default class TranslationsConnector {
+  private listener: (() => void) | undefined;
+
+  constructor(private readonly devMode: boolean) {
+    ipcRenderer.on(MainToRendererIpcMessage.ReloadTranslations, () => {
+      try {
+        this.listener?.();
+      } catch (error) {
+        log.error('Translations listener onReloadTranslations failed', error);
+        this.listener = undefined;
+      }
+    });
+  }
+
+  onReloadTranslations(listener: () => void): void {
+    if (!this.devMode) {
+      throw new Error(
+        'Translation reloading is only supported in development mode',
+      );
+    }
+    this.listener = listener;
+  }
+}
+
+export async function getTranslation(
+  translation: Translation,
+): Promise<ResourceKey> {
+  const parsedTranslation = Translation.parse(translation);
+  try {
+    // We don't have any way to validate translations,
+    // but they are coming from a trusted source and will be validated
+    // in the renderer anyways, so we should be fine.
+    return (await ipcRenderer.invoke(
+      RendererToMainIpcMessage.GetTranslation,
+      parsedTranslation,
+    )) as ResourceKey;
+  } catch (error) {
+    const message = 'Failed to get translation';
+    log.error(message, translation, error);
+    throw new Error(message);
+  }
+}
diff --git a/packages/preload/src/contextBridge/createSophieRenderer.ts b/packages/preload/src/contextBridge/createSophieRenderer.ts
index 8bdf07e..3de9d9e 100644
--- a/packages/preload/src/contextBridge/createSophieRenderer.ts
+++ b/packages/preload/src/contextBridge/createSophieRenderer.ts
@@ -18,85 +18,21 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  Action,
-  MainToRendererIpcMessage,
-  RendererToMainIpcMessage,
-  SharedStoreListener,
-  SharedStoreSnapshotIn,
-  SophieRenderer,
-} from '@sophie/shared';
-import { ipcRenderer } from 'electron';
-import log from 'loglevel';
-import type { IJsonPatch } from 'mobx-state-tree';
+import { SophieRenderer } from '@sophie/shared';
 
-class SharedStoreConnector {
-  readonly #allowReplaceListener: boolean;
+import SharedStoreConnector, { dispatchAction } from './SharedStoreConnector';
+import TranslationsConnector, { getTranslation } from './TranslationsConnector';
 
-  #onSharedStoreChangeCalled = false;
-
-  #listener: SharedStoreListener | undefined;
-
-  constructor(allowReplaceListener: boolean) {
-    this.#allowReplaceListener = allowReplaceListener;
-    ipcRenderer.on(
-      MainToRendererIpcMessage.SharedStorePatch,
-      (_event, patch) => {
-        try {
-          // `mobx-state-tree` will validate the patch, so we can safely cast here.
-          this.#listener?.onPatch(patch as IJsonPatch[]);
-        } catch (error) {
-          log.error('Shared store listener onPatch failed', error);
-          this.#listener = undefined;
-        }
-      },
-    );
-  }
-
-  async onSharedStoreChange(listener: SharedStoreListener): Promise<void> {
-    if (this.#onSharedStoreChangeCalled && !this.#allowReplaceListener) {
-      throw new Error('Shared store change listener was already set');
-    }
-    this.#onSharedStoreChangeCalled = true;
-    let success = false;
-    let snapshot: unknown;
-    try {
-      snapshot = await ipcRenderer.invoke(
-        RendererToMainIpcMessage.GetSharedStoreSnapshot,
-      );
-      success = true;
-    } catch (error) {
-      log.error('Failed to get initial shared store snapshot', error);
-    }
-    if (!success) {
-      throw new Error('Failed to connect to shared store');
-    }
-    // `mobx-state-tree` will validate the snapshot, so we can safely cast here.
-    listener.onSnapshot(snapshot as SharedStoreSnapshotIn);
-    this.#listener = listener;
-  }
-}
-
-function dispatchAction(actionToDispatch: Action): void {
-  // Let the full zod parse error bubble up to the main world,
-  // since all data it may contain was provided from the main world.
-  const parsedAction = Action.parse(actionToDispatch);
-  try {
-    ipcRenderer.send(RendererToMainIpcMessage.DispatchAction, parsedAction);
-  } catch (error) {
-    // Do not leak IPC failure details into the main world.
-    const message = 'Failed to dispatch action';
-    log.error(message, actionToDispatch, error);
-    throw new Error(message);
-  }
-}
-
-export default function createSophieRenderer(
-  allowReplaceListener: boolean,
-): SophieRenderer {
-  const connector = new SharedStoreConnector(allowReplaceListener);
+export default function createSophieRenderer(devMode: boolean): SophieRenderer {
+  const sharedStoreConnector = new SharedStoreConnector(devMode);
+  const translationsConnector = new TranslationsConnector(devMode);
   return {
-    onSharedStoreChange: connector.onSharedStoreChange.bind(connector),
+    onSharedStoreChange:
+      sharedStoreConnector.onSharedStoreChange.bind(sharedStoreConnector),
     dispatchAction,
+    getTranslation,
+    onReloadTranslations: translationsConnector.onReloadTranslations.bind(
+      translationsConnector,
+    ),
   };
 }
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 81e66d7..4f00a3f 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.3",
     "@sophie/shared": "workspace:*",
+    "i18next": "^21.6.14",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
@@ -21,7 +22,8 @@
     "mobx-react-lite": "^3.3.0",
     "mobx-state-tree": "^5.1.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.16.2"
   },
   "devDependencies": {
     "@jest/globals": "^27.5.1",
diff --git a/packages/renderer/src/components/Loading.tsx b/packages/renderer/src/components/Loading.tsx
new file mode 100644
index 0000000..019b5ed
--- /dev/null
+++ b/packages/renderer/src/components/Loading.tsx
@@ -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 CircularProgress from '@mui/material/CircularProgress';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+const LoadingRoot = styled('div')({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export default function Loading() {
+  return (
+    <LoadingRoot>
+      <CircularProgress />
+    </LoadingRoot>
+  );
+}
diff --git a/packages/renderer/src/components/NewWindowBanner.tsx b/packages/renderer/src/components/NewWindowBanner.tsx
index a49b4b1..9aa6121 100644
--- a/packages/renderer/src/components/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/NewWindowBanner.tsx
@@ -23,6 +23,7 @@ import IconOpenInNew from '@mui/icons-material/OpenInNew';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type Service from '../stores/Service';
 
@@ -33,6 +34,10 @@ function NewWindowBanner({
 }: {
   service: Service | undefined;
 }): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.newWindow',
+  });
+
   if (service === undefined) {
     // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
     return null;
@@ -63,7 +68,7 @@ function NewWindowBanner({
             color="inherit"
             size="small"
           >
-            Follow link in this window
+            {t('followLink')}
           </Button>
           <Button
             onClick={() => service.openPopupInExternalBrowser(url)}
@@ -71,7 +76,7 @@ function NewWindowBanner({
             size="small"
             startIcon={<IconOpenInBrowser />}
           >
-            Open in browser
+            {t('openInExternalBrowser')}
           </Button>
           {count > 1 && (
             <>
@@ -81,27 +86,29 @@ function NewWindowBanner({
                 size="small"
                 startIcon={<IconOpenInBrowser />}
               >
-                Open all
+                {t('openAllInExternalBrowser')}
               </Button>
               <Button
                 onClick={() => service.dismissPopup(url)}
                 color="inherit"
                 size="small"
               >
-                Ignore
+                {t('dismiss')}
               </Button>
             </>
           )}
         </>
       }
     >
-      {name} wants to open <b>{url}</b>{' '}
       {count === 1 ? (
-        <>in a new window</>
+        <Trans i18nKey="messageSingleLink" t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> in a new window
+        </Trans>
       ) : (
-        <>
-          and <b>{count}</b> other links in new windows
-        </>
+        <Trans i18nKey="messageMultipleLinks" count={count - 1} t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> and{' '}
+          <strong>{{ count: count - 1 }}</strong> other links in new windows
+        </Trans>
       )}
     </NotificationBanner>
   );
diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
index d591e14..36c192a 100644
--- a/packages/renderer/src/components/NotificationBanner.tsx
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -23,6 +23,7 @@ import Alert, { AlertColor } from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
   paddingTop: 7,
@@ -77,11 +78,14 @@ export default function NotificationBanner({
   buttons?: ReactNode;
   children?: ReactNode;
 }): JSX.Element {
+  const { t } = useTranslation();
+
   return (
     <NotificationBannerRoot
       severity={severity ?? 'success'}
       icon={icon ?? false}
       onClose={onClose}
+      closeText={t<string>('banner.close')}
     >
       <NotificationBannerText>{children}</NotificationBannerText>
       {buttons && (
diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 4eaee29..1755495 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -23,6 +23,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -31,6 +32,10 @@ function ExtraButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
+
   return (
     <Box
       sx={{
@@ -39,7 +44,7 @@ function ExtraButtons({
       }}
     >
       <IconButton
-        aria-label="Open in browser"
+        aria-label={t('openInBrowser')}
         disabled={service?.currentUrl === undefined}
         onClick={() => service?.openCurrentURLInExternalBrowser()}
       >
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 9995a21..219ed90 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -28,6 +28,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -36,6 +37,9 @@ function NavigationButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
   const { direction } = useTheme();
 
   return (
@@ -46,26 +50,26 @@ function NavigationButtons({
       }}
     >
       <IconButton
-        aria-label="Back"
+        aria-label={t('back')}
         disabled={service === undefined || !service.canGoBack}
         onClick={() => service?.goBack()}
       >
         {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
-        aria-label="Forward"
+        aria-label={t('forward')}
         disabled={service === undefined || !service.canGoForward}
         onClick={() => service?.goForward()}
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.loading ?? false ? (
-        <IconButton aria-label="Stop" onClick={() => service?.stop()}>
+        <IconButton aria-label={t('stop')} onClick={() => service?.stop()}>
           <IconStop />
         </IconButton>
       ) : (
         <IconButton
-          aria-label="Refresh"
+          aria-label={t('reload')}
           disabled={service === undefined}
           onClick={(event) => service?.reload(event.shiftKey)}
         >
@@ -73,7 +77,7 @@ function NavigationButtons({
         </IconButton>
       )}
       <IconButton
-        aria-label="Home"
+        aria-label={t('home')}
         disabled={service === undefined}
         onClick={() => service?.goHome()}
       >
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index 6e27e6b..d9dff86 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -24,6 +24,7 @@ import IconGlobe from '@mui/icons-material/Public';
 import IconWarning from '@mui/icons-material/Warning';
 import { styled } from '@mui/material/styles';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import LocationInputAdornment from './LocationInputAdornment';
 import getAlertColor from './getAlertColor';
@@ -60,6 +61,10 @@ export default function SecurityLabel({
   changed: boolean;
   position: 'start' | 'end';
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'securityLabel',
+  });
+
   const { type } = splitResult;
   if (changed || type === 'empty') {
     return (
@@ -75,14 +80,14 @@ export default function SecurityLabel({
         <SecurityLabelRoot
           alert={false}
           position={position}
-          aria-label="Secure connection"
+          aria-label={t('secureConnection')}
         >
           <IconHttps fontSize="small" />
         </SecurityLabelRoot>
       ) : (
         <SecurityLabelRoot alert position={position}>
           <IconHttp fontSize="small" />
-          <SecurityLabelText>Not secure</SecurityLabelText>
+          <SecurityLabelText>{t('notSecureConnection')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     }
@@ -90,7 +95,7 @@ export default function SecurityLabel({
       return (
         <SecurityLabelRoot alert position={position}>
           <IconWarning fontSize="small" />
-          <SecurityLabelText>Unknown site</SecurityLabelText>
+          <SecurityLabelText>{t('unknownSite')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     default:
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index b8f9b96..1017be9 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -129,7 +129,9 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
         }}
       >
         <ServiceIconRoot hasError={hasError}>
-          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
+          <ServiceIconText aria-hidden="true">
+            {name.length > 0 ? name[0] : '?'}
+          </ServiceIconText>
         </ServiceIconRoot>
       </ServiceIconBadge>
     </ServiceIconErrorBadge>
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 404149b..010c716 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -21,9 +21,12 @@
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { alpha, styled } from '@mui/material/styles';
+import type { TFunction } from 'i18next';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
+import type Service from '../../stores/Service';
 import { useStore } from '../StoreProvider';
 
 import ServiceIcon from './ServiceIcon';
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, {
   },
 }));
 
+function getServiceTitle(service: Service, t: TFunction) {
+  const {
+    settings: { name },
+    directMessageCount,
+    indirectMessageCount,
+  } = service;
+  let messagesText: string | undefined;
+  if (indirectMessageCount > 0) {
+    messagesText =
+      directMessageCount > 0
+        ? t('service.title.directAndIndirectMessageCount', {
+            directMessageCount,
+            indirectMessageCount,
+          })
+        : t('service.title.indirectMessageCount', {
+            count: indirectMessageCount,
+          });
+  } else if (directMessageCount > 0) {
+    messagesText = t('service.title.directMessageCount', {
+      count: directMessageCount,
+    });
+  }
+  if (messagesText === undefined) {
+    return t('service.title.nameWithNoMessages', { name });
+  }
+  return t('service.title.nameWithMessages', { name, messages: messagesText });
+}
+
 function ServiceSwitcher(): JSX.Element {
+  const { t } = useTranslation();
   const { settings, services } = useStore();
   const { selectedService } = settings;
 
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element {
           key={service.id}
           value={service.id}
           icon={<ServiceIcon service={service} />}
-          aria-label={service.settings.name}
+          aria-label={getServiceTitle(service, t)}
         />
       ))}
     </ServiceSwitcherRoot>
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index bacbf07..51c3b18 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -23,16 +23,18 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
+  const { t } = useTranslation();
   const { shared } = useStore();
   const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
-      aria-label="Toggle dark mode"
+      aria-label={t('toolbar.toggleDarkMode')}
       onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 57b17e9..325160e 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -25,6 +25,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
@@ -45,6 +46,7 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
+  const { t } = useTranslation();
   const { settings } = useStore();
   const { selectedService, showLocationBar } = settings;
 
@@ -52,7 +54,7 @@ function ToggleLocationBarButton(): JSX.Element {
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
-      aria-label="Show location bar"
+      aria-label={t('toolbar.toggleLocationBar')}
       onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
diff --git a/packages/renderer/src/i18n/RendererIpcI18nBackend.ts b/packages/renderer/src/i18n/RendererIpcI18nBackend.ts
new file mode 100644
index 0000000..13e03b5
--- /dev/null
+++ b/packages/renderer/src/i18n/RendererIpcI18nBackend.ts
@@ -0,0 +1,75 @@
+/*
+ * 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 { SophieRenderer } from '@sophie/shared';
+import type { BackendModule, ReadCallback } from 'i18next';
+
+export default class RendererIpcI18nBackend implements BackendModule<unknown> {
+  type = 'backend' as const;
+
+  constructor(
+    private readonly ipc: SophieRenderer,
+    private readonly devMode = false,
+  ) {}
+
+  // eslint-disable-next-line class-methods-use-this -- Method required by interface.
+  init() {}
+
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    const readAsync = async () => {
+      const translations = await this.ipc.getTranslation({
+        language,
+        namespace,
+      });
+      // eslint-disable-next-line unicorn/no-null -- `i18next` API requires `null`.
+      setTimeout(() => callback(null, translations), 0);
+    };
+
+    readAsync().catch((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`.
+      */
+      setTimeout(() => callback(callbackError, null), 0);
+    });
+  }
+
+  create(
+    languages: string[],
+    namespace: string,
+    key: string,
+    fallbackValue: string,
+  ): void {
+    if (!this.devMode) {
+      throw new Error('Refusing to add missing translation in production mode');
+    }
+    this.ipc.dispatchAction({
+      action: 'add-missing-translation',
+      languages,
+      namespace,
+      key,
+      value: fallbackValue,
+    });
+  }
+}
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
new file mode 100644
index 0000000..19d1e2d
--- /dev/null
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -0,0 +1,87 @@
+/*
+ * 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
+ */
+
+import { fallbackLng, SophieRenderer } from '@sophie/shared';
+import i18next from 'i18next';
+import { autorun } from 'mobx';
+import { addDisposer } from 'mobx-state-tree';
+import { initReactI18next } from 'react-i18next';
+
+import RendererStore from '../stores/RendererStore';
+import { getLogger } from '../utils/log';
+
+import RendererIpcI18nBackend from './RendererIpcI18nBackend';
+
+const log = getLogger('loadRendererLocalization');
+
+export default function loadRendererLocalization(
+  store: RendererStore,
+  ipc: SophieRenderer,
+  devMode: boolean,
+): void {
+  const loadAsync = async () => {
+    const i18n = i18next
+      .createInstance({
+        lng: store.shared.language,
+        fallbackLng,
+        interpolation: {
+          escapeValue: false, // Not needed for react
+        },
+        debug: devMode,
+        saveMissing: devMode,
+      })
+      .use(new RendererIpcI18nBackend(ipc, devMode))
+      .use(initReactI18next);
+
+    if (devMode) {
+      const reloadTranslationsAsync = async () => {
+        await i18n.reloadResources();
+        if (i18n.isInitialized) {
+          // Spuriously change language to re-trigger `useTranslation` hooks.
+          await i18n.changeLanguage(store.shared.language);
+        }
+        log.info('Reloaded translations');
+      };
+
+      ipc.onReloadTranslations(() => {
+        reloadTranslationsAsync().catch((error) => {
+          log.error('Failed to reload translations', error);
+        });
+      });
+    }
+
+    await i18n.init();
+    const disposeChangeLanguage = autorun(() => {
+      const {
+        shared: { language },
+      } = store;
+      if (i18n.language !== language) {
+        i18n.changeLanguage(language).catch((error) => {
+          log.error('Failed to change language', error);
+        });
+      }
+    });
+    addDisposer(store, disposeChangeLanguage);
+  };
+
+  loadAsync().catch((error) => {
+    log.error('Failed to connect to load localization', error);
+  });
+}
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 54e157c..0022ec8 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -24,13 +24,16 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autorun } from 'mobx';
-import React from 'react';
+import { addDisposer } from 'mobx-state-tree';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 
 import App from './components/App';
+import Loading from './components/Loading';
 import StoreProvider from './components/StoreProvider';
 import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReload } from './devTools';
+import loadRendererLocalization from './i18n/loadRendererLoalization';
 import { createAndConnectRendererStore } from './stores/RendererStore';
 import { getLogger } from './utils/log';
 
@@ -42,7 +45,9 @@ if (isDevelopment) {
   hotReload();
 }
 
-const store = createAndConnectRendererStore(window.sophieRenderer);
+const { sophieRenderer: ipc } = window;
+
+const store = createAndConnectRendererStore(ipc);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store).catch((error) => {
@@ -50,13 +55,16 @@ if (isDevelopment) {
   });
 }
 
-autorun(() => {
+loadRendererLocalization(store, ipc, isDevelopment);
+
+const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;
   const formattedServiceTitle =
     serviceTitle === undefined ? '' : `${serviceTitle} - `;
   document.title = `${titlePrefix}${formattedServiceTitle}Sophie`;
 });
+addDisposer(store, disposeSetTitle);
 
 function Root(): JSX.Element {
   return (
@@ -64,7 +72,9 @@ function Root(): JSX.Element {
       <StoreProvider store={store}>
         <ThemeProvider>
           <CssBaseline enableColorScheme />
-          <App />
+          <Suspense fallback={<Loading />}>
+            <App />
+          </Suspense>
         </ThemeProvider>
       </StoreProvider>
     </React.StrictMode>
diff --git a/packages/shared/esbuild.config.js b/packages/shared/esbuild.config.js
index e8dcc2f..6e46742 100644
--- a/packages/shared/esbuild.config.js
+++ b/packages/shared/esbuild.config.js
@@ -14,5 +14,5 @@ export default getEsbuildConfig({
   minify: false,
   platform: 'node',
   target: [chrome, node],
-  external: ['mobx', 'mobx-state-tree', 'zod'],
+  external: ['i18next', 'mobx', 'mobx-state-tree', 'zod'],
 });
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 5b075e3..d39d7ee 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -11,6 +11,7 @@
     "types": "yarn g:types"
   },
   "dependencies": {
+    "i18next": "^21.6.14",
     "mobx": "^6.4.1",
     "mobx-state-tree": "^5.1.3",
     "zod": "^3.12.0"
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index dc77c97..732f941 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -18,11 +18,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { ResourceKey } from 'i18next';
+
 import { Action } from '../schemas/Action';
+import { Translation } from '../schemas/Translation';
 import { SharedStoreListener } from '../stores/SharedStoreBase';
 
 export default interface SophieRenderer {
   onSharedStoreChange(this: void, listener: SharedStoreListener): Promise<void>;
 
   dispatchAction(this: void, action: Action): void;
+
+  getTranslation(this: void, translation: Translation): Promise<ResourceKey>;
+
+  onReloadTranslations(this: void, listener: () => void): void;
 }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index f7c5bcf..51f9f06 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -18,6 +18,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+export const fallbackLng = ['en'];
+
 export type { default as SophieRenderer } from './contextBridge/SophieRenderer';
 
 export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc';
@@ -30,6 +32,8 @@ export { ServiceAction } from './schemas/ServiceAction';
 
 export { ThemeSource } from './schemas/ThemeSource';
 
+export { Translation } from './schemas/Translation';
+
 export type { CertificateSnapshotIn } from './stores/Certificate';
 export { default as Certificate } from './stores/Certificate';
 
diff --git a/packages/shared/src/ipc.ts b/packages/shared/src/ipc.ts
index 54d761a..2716633 100644
--- a/packages/shared/src/ipc.ts
+++ b/packages/shared/src/ipc.ts
@@ -20,9 +20,11 @@
 
 export enum MainToRendererIpcMessage {
   SharedStorePatch = 'sophie-main-to-renderer:shared-store-patch',
+  ReloadTranslations = 'sophie-main-to-renderer:reload-translations',
 }
 
 export enum RendererToMainIpcMessage {
   GetSharedStoreSnapshot = 'sophie-renderer-to-main:get-shared-store-snapshot',
+  GetTranslation = 'sophie-renderer-to-main:get-translation',
   DispatchAction = 'sophie-renderer-to-main:dispatch-action',
 }
diff --git a/packages/shared/src/schemas/Action.ts b/packages/shared/src/schemas/Action.ts
index 8d6ca3a..ce983fa 100644
--- a/packages/shared/src/schemas/Action.ts
+++ b/packages/shared/src/schemas/Action.ts
@@ -49,6 +49,13 @@ export const Action = /* @__PURE__ */ (() =>
       action: z.literal('reload-all-translations'),
     }),
     z.object({
+      action: z.literal('add-missing-translation'),
+      languages: z.string().nonempty().array(),
+      namespace: z.string().nonempty(),
+      key: z.string().nonempty(),
+      value: z.string(),
+    }),
+    z.object({
       action: z.literal('dispatch-service-action'),
       serviceId: z.string(),
       serviceAction: ServiceAction,
diff --git a/packages/shared/src/schemas/Translation.ts b/packages/shared/src/schemas/Translation.ts
new file mode 100644
index 0000000..ab513b5
--- /dev/null
+++ b/packages/shared/src/schemas/Translation.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { z } from 'zod';
+
+export const Translation = /* @__PURE__ */ (() =>
+  z.object({
+    language: z.string().nonempty(),
+    namespace: z.string().nonempty(),
+  }))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the schema definition.
+*/
+export type Translation = z.infer<typeof Translation>;
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index 8d6624b..86bd0fc 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -43,6 +43,7 @@ export function defineSharedStoreModel<
     servicesById: types.map(service),
     services: types.array(types.reference(service)),
     shouldUseDarkColors: false,
+    language: 'en',
   });
 }
 
diff --git a/yarn.lock b/yarn.lock
index b0afd2d..d1754ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -439,7 +439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
   version: 7.17.2
   resolution: "@babel/runtime@npm:7.17.2"
   dependencies:
@@ -448,7 +448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.17.2":
+"@babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.17.2":
   version: 7.17.8
   resolution: "@babel/runtime@npm:7.17.8"
   dependencies:
@@ -603,7 +603,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.1, @emotion/is-prop-valid@npm:^1.1.2":
+"@emotion/is-prop-valid@npm:^1.1.2":
   version: 1.1.2
   resolution: "@emotion/is-prop-valid@npm:1.1.2"
   dependencies:
@@ -1021,14 +1021,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-alpha.69":
-  version: 5.0.0-alpha.69
-  resolution: "@mui/base@npm:5.0.0-alpha.69"
+"@mui/base@npm:5.0.0-alpha.74":
+  version: 5.0.0-alpha.74
+  resolution: "@mui/base@npm:5.0.0-alpha.74"
   dependencies:
-    "@babel/runtime": ^7.17.0
-    "@emotion/is-prop-valid": ^1.1.1
-    "@mui/utils": ^5.4.2
-    "@popperjs/core": ^2.4.4
+    "@babel/runtime": ^7.17.2
+    "@emotion/is-prop-valid": ^1.1.2
+    "@mui/types": ^7.1.3
+    "@mui/utils": ^5.5.3
+    "@popperjs/core": ^2.11.4
     clsx: ^1.1.1
     prop-types: ^15.7.2
     react-is: ^17.0.2
@@ -1039,15 +1040,15 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 8d5acc6abed1bba7a50252c65751258145544a87f3154c39fe46c8413f4613bac3d3bbd69fe3d5b57b370f3b0e1b8dd7d915e42fa622c6c22ef58487d55317d4
+  checksum: e66a77933274eff27011bbe5a634c5812efdc0c7b96d1cf00cf7406080459919631fd929c0652ed18c5169d21ea7f3cac041b0f5a7473a984a915dacf9afe751
   languageName: node
   linkType: hard
 
 "@mui/icons-material@npm:^5.4.2":
-  version: 5.4.2
-  resolution: "@mui/icons-material@npm:5.4.2"
+  version: 5.5.1
+  resolution: "@mui/icons-material@npm:5.5.1"
   dependencies:
-    "@babel/runtime": ^7.17.0
+    "@babel/runtime": ^7.17.2
   peerDependencies:
     "@mui/material": ^5.0.0
     "@types/react": ^16.8.6 || ^17.0.0
@@ -1055,22 +1056,22 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 7db675c77bb25a18b48166491a4ec421281cc93b083467715139458e25ceaa5c7d4384cac8627977065704963e1aeda5428821a059db006020c150f2f69f8cf3
+  checksum: 9b3430d99607ad243632cdc91c51a5115df35cf6c235165fe1ba5c1245e64ca6da107717e26d2e9f9b54f63c37663a90b74b54b906ab877dbd8bd8548398db42
   languageName: node
   linkType: hard
 
 "@mui/material@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "@mui/material@npm:5.4.3"
-  dependencies:
-    "@babel/runtime": ^7.17.0
-    "@mui/base": 5.0.0-alpha.69
-    "@mui/system": ^5.4.3
-    "@mui/types": ^7.1.2
-    "@mui/utils": ^5.4.2
+  version: 5.5.3
+  resolution: "@mui/material@npm:5.5.3"
+  dependencies:
+    "@babel/runtime": ^7.17.2
+    "@mui/base": 5.0.0-alpha.74
+    "@mui/system": ^5.5.3
+    "@mui/types": ^7.1.3
+    "@mui/utils": ^5.5.3
     "@types/react-transition-group": ^4.4.4
     clsx: ^1.1.1
-    csstype: ^3.0.10
+    csstype: ^3.0.11
     hoist-non-react-statics: ^3.3.2
     prop-types: ^15.7.2
     react-is: ^17.0.2
@@ -1088,16 +1089,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 128a850b1f514d28d72470ed50023df7d93bac83f268fdb472c15dfaf226c93c50da063ff92e1525b77e49661e87c8721a28db791fb90d94038089c6fed95ce3
+  checksum: 4a66c00d07aa15ea229a1bb20025d240556d582f195e4d7ac5080a81c4fa45aa2cc294c0fbfc165d0d2acc0d4c545e0e7ba2d09f1cf0ed5ec8d7a38de4955aa3
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.4.2":
-  version: 5.4.2
-  resolution: "@mui/private-theming@npm:5.4.2"
+"@mui/private-theming@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "@mui/private-theming@npm:5.5.3"
   dependencies:
-    "@babel/runtime": ^7.17.0
-    "@mui/utils": ^5.4.2
+    "@babel/runtime": ^7.17.2
+    "@mui/utils": ^5.5.3
     prop-types: ^15.7.2
   peerDependencies:
     "@types/react": ^16.8.6 || ^17.0.0
@@ -1105,15 +1106,15 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: ae5050aa9d999c0645de80ce3af3a363ef508c55d87fe9a4f5c646dd892a825e999dda88bf555adc909fd5c398662810e51f1f018c11f96bd56ff876c1b6df40
+  checksum: aa7a0cecc8cdc261650d8ba8639ce59ec2dd69b59cd326fc31c48e7fd7d49d85d2ddbabfb1b3a61d253b9d9c8a4dfdc6c537e0eff0469ea92e3570e0e3a776fa
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^5.4.2":
-  version: 5.4.2
-  resolution: "@mui/styled-engine@npm:5.4.2"
+"@mui/styled-engine@npm:^5.5.2":
+  version: 5.5.2
+  resolution: "@mui/styled-engine@npm:5.5.2"
   dependencies:
-    "@babel/runtime": ^7.17.0
+    "@babel/runtime": ^7.17.2
     "@emotion/cache": ^11.7.1
     prop-types: ^15.7.2
   peerDependencies:
@@ -1125,21 +1126,21 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: f7e73ddcec545bc43ccc95f67a2926ed6feb95762a8557b5ba9c002ac109964a957f20b6334f89657614ebad9bf6affe1b9d7d98610d29f24e294da63b0f7718
+  checksum: 450bc9f16929e003f48aa2864b034fb24bc9804e67624bcd2b8a9e7cd8e8d4335250e2bd8383a43e4b18a3c6dea80390f2c656bfc6a25f405f6277b33f184cc5
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "@mui/system@npm:5.4.3"
+"@mui/system@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "@mui/system@npm:5.5.3"
   dependencies:
-    "@babel/runtime": ^7.17.0
-    "@mui/private-theming": ^5.4.2
-    "@mui/styled-engine": ^5.4.2
-    "@mui/types": ^7.1.2
-    "@mui/utils": ^5.4.2
+    "@babel/runtime": ^7.17.2
+    "@mui/private-theming": ^5.5.3
+    "@mui/styled-engine": ^5.5.2
+    "@mui/types": ^7.1.3
+    "@mui/utils": ^5.5.3
     clsx: ^1.1.1
-    csstype: ^3.0.10
+    csstype: ^3.0.11
     prop-types: ^15.7.2
   peerDependencies:
     "@emotion/react": ^11.5.0
@@ -1153,34 +1154,34 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: fe4776f113f787c3d4fa83ed06899738bf19e866b694a1c8b9459fb24ceede4102a73d6ef9c42d77550952dc0bd14b501157120359510c94da871c0553fb844c
+  checksum: 7f2e7a1c4b1947e4d6a6efb70197f2978b45c56d09534e047c10d72c641dd338f1399972b7e47077d9e721ccb3ebe6e9161f122e59b99e7e39c1601f2d2c9f39
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "@mui/types@npm:7.1.2"
+"@mui/types@npm:^7.1.3":
+  version: 7.1.3
+  resolution: "@mui/types@npm:7.1.3"
   peerDependencies:
     "@types/react": "*"
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 0d37947b0d2bcaed80b245ec4ac91bdff64ffedb5b0d56784311472b2c44131498ea700485f09dd3236baa97cd16af628e398453263e7081fabfe4fc1477249c
+  checksum: 4990f505f1058bdd4c01ea21a6a6f788e5d3ff73b50962879d33bbf9c98ef1f18d8b6664025ce1dbd42544a79d7697d0011834f8fd83d12c9705f2c702829bb4
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.4.2":
-  version: 5.4.2
-  resolution: "@mui/utils@npm:5.4.2"
+"@mui/utils@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "@mui/utils@npm:5.5.3"
   dependencies:
-    "@babel/runtime": ^7.17.0
+    "@babel/runtime": ^7.17.2
     "@types/prop-types": ^15.7.4
     "@types/react-is": ^16.7.1 || ^17.0.0
     prop-types: ^15.7.2
     react-is: ^17.0.2
   peerDependencies:
     react: ^17.0.0
-  checksum: 8d69572a2989bf11b897fb62b8c671968356b549dac285e99eab9cf8a9bce78a758926551fde8979f469b21a9647fc0dc42b49f0c0d30fe89d768c4eadf1e9a8
+  checksum: 0c7c73aaeeb75792620a11aaca66c3c325777b16388559c7ac7ad60d80a9db82e09af40e76b62ae15c9d92a1d90aaad353e05e8774f3f50399f2af9ebb6ef4f5
   languageName: node
   linkType: hard
 
@@ -1231,10 +1232,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.4.4":
-  version: 2.11.0
-  resolution: "@popperjs/core@npm:2.11.0"
-  checksum: 84d6f197d3ddfd8a5b05c7276c3692d8404c96128a946ab0a800b25567d8fc231928319c1f97a67e0817e76ce2a1b735589ef0f38f8e8835692408660a2395a1
+"@popperjs/core@npm:^2.11.4":
+  version: 2.11.4
+  resolution: "@popperjs/core@npm:2.11.4"
+  checksum: 36168d274aa164368a50aef2e7b2f858e1b9145d9250af9dc1315ff719d874a367177760f8285efb75c8cf48267194a50e7dc9cdb41bf0b1958c38805c13564c
   languageName: node
   linkType: hard
 
@@ -1320,6 +1321,7 @@ __metadata:
     "@sophie/shared": "workspace:*"
     "@types/jest": ^27.4.1
     electron: 17.1.0
+    i18next: ^21.6.14
     jest: ^27.5.1
     jest-mock: ^27.5.1
     jsdom: ^19.0.0
@@ -1345,6 +1347,7 @@ __metadata:
     "@types/react": ^17.0.39
     "@types/react-dom": ^17.0.11
     "@vitejs/plugin-react": ^1.2.0
+    i18next: ^21.6.14
     jest: ^27.5.1
     jest-mock: ^27.5.1
     jsdom: ^19.0.0
@@ -1357,6 +1360,7 @@ __metadata:
     mst-middlewares: ^5.1.3
     react: ^17.0.2
     react-dom: ^17.0.2
+    react-i18next: ^11.16.2
     remotedev: ^0.2.9
     vite: ^2.8.4
   languageName: unknown
@@ -1393,6 +1397,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sophie/shared@workspace:packages/shared"
   dependencies:
+    i18next: ^21.6.14
     mobx: ^6.4.1
     mobx-state-tree: ^5.1.3
     zod: ^3.12.0
@@ -3129,7 +3134,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.10, csstype@npm:^3.0.2":
+"csstype@npm:^3.0.11":
+  version: 3.0.11
+  resolution: "csstype@npm:3.0.11"
+  checksum: 95e56abfe9ca219ae065acb4e43f61771a03170eed919127f558dfa168240867aba7629c8d98a201a0dd06d9a5ce82686f0570031c928516c61816adbc7c877f
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.0.2":
   version: 3.0.10
   resolution: "csstype@npm:3.0.10"
   checksum: 20a8fa324f2b33ddf94aa7507d1b6ab3daa6f3cc308888dc50126585d7952f2471de69b2dbe0635d1fdc31223fef8e070842691877e725caf456e2378685a631
@@ -4991,13 +5003,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-escaper@npm:^2.0.0":
+"html-escaper@npm:^2.0.0, html-escaper@npm:^2.0.2":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
   checksum: d2df2da3ad40ca9ee3a39c5cc6475ef67c8f83c234475f24d8e9ce0dc80a2c82df8e1d6fa78ddd1e9022a586ea1bd247a615e80a5cd9273d90111ddda7d9e974
   languageName: node
   linkType: hard
 
+"html-parse-stringify@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "html-parse-stringify@npm:3.0.1"
+  dependencies:
+    void-elements: 3.1.0
+  checksum: 334fdebd4b5c355dba8e95284cead6f62bf865a2359da2759b039db58c805646350016d2017875718bc3c4b9bf81a0d11be5ee0cf4774a3a5a7b97cde21cfd67
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.0.0, http-cache-semantics@npm:^4.1.0":
   version: 4.1.0
   resolution: "http-cache-semantics@npm:4.1.0"
@@ -7558,6 +7579,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:^11.16.2":
+  version: 11.16.2
+  resolution: "react-i18next@npm:11.16.2"
+  dependencies:
+    "@babel/runtime": ^7.14.5
+    html-escaper: ^2.0.2
+    html-parse-stringify: ^3.0.1
+  peerDependencies:
+    i18next: ">= 19.0.0"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 3e86c5e7a73eef88eff7487bbc87ecf3d5c6808ce3d0cc1e9599e6a1b72466d2d6ced2b1b600c18a2309757bea49d1670526a1bc8953a9bf377964e9ea3c9166
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.7.0, react-is@npm:^16.8.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -9048,6 +9088,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"void-elements@npm:3.1.0":
+  version: 3.1.0
+  resolution: "void-elements@npm:3.1.0"
+  checksum: 0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+  languageName: node
+  linkType: hard
+
 "w3c-hr-time@npm:^1.0.2":
   version: 1.0.2
   resolution: "w3c-hr-time@npm:1.0.2"