refactor: Use i18next for language resolution

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

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

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

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

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

3 files changed, 26 insertions, 13 deletions

diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 18dc2a8..581563b 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -30,10 +30,11 @@ import { useStore } from './StoreProvider';
 export default observer(
   ({ children }: { children: JSX.Element | JSX.Element[] }) => {
     const {
-      shared: { shouldUseDarkColors },
+      shared: { shouldUseDarkColors, writingDirection },
     } = useStore();
 
     const theme = createTheme({
+      direction: writingDirection,
       palette: {
         mode: shouldUseDarkColors ? 'dark' : 'light',
       },
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index b078aeb..4d7b84a 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -20,7 +20,7 @@
 
 import { FALLBACK_LOCALE, SophieRenderer } from '@sophie/shared';
 import i18next from 'i18next';
-import { autorun } from 'mobx';
+import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import { initReactI18next } from 'react-i18next';
 
@@ -68,17 +68,20 @@ export default function loadRendererLocalization(
     }
 
     await i18n.init();
-    const disposeChangeLanguage = autorun(() => {
-      const {
-        shared: { language },
-      } = store;
-      if (i18n.language !== language) {
-        log.debug('Setting language', language);
-        i18n.changeLanguage(language).catch((error) => {
-          log.error('Failed to change language', error);
-        });
-      }
-    });
+
+    const disposeChangeLanguage = reaction(
+      () => store.shared.language,
+      (languageToSet) => {
+        if (i18n.language !== languageToSet) {
+          i18n.changeLanguage(languageToSet).catch((error) => {
+            log.error('Failed to change language', error);
+          });
+        }
+      },
+      {
+        fireImmediately: true,
+      },
+    );
     addDisposer(store, disposeChangeLanguage);
   };
 
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 37116db..60ef714 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -56,6 +56,15 @@ if (isDevelopment) {
 
 loadRendererLocalization(store, ipc, isDevelopment);
 
+const disposeSetHtmlLang = autorun(() => {
+  const {
+    shared: { language, writingDirection },
+  } = store;
+  document.documentElement.lang = language;
+  document.documentElement.dir = writingDirection;
+});
+addDisposer(store, disposeSetHtmlLang);
+
 const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;