Add translation support using i18next

package.json

@@ -43,6 +43,9 @@
     "formik": "2.2.9",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
+    "i18next": "23.7.8",
+    "i18next-browser-languagedetector": "7.2.0",
+    "i18next-http-backend": "2.4.2",
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "1.12.0",
@@ -64,6 +67,7 @@
     "react-dom": "17.0.2",
     "react-error-boundary": "4.0.10",
     "react-google-recaptcha": "2.1.0",
+    "react-i18next": "13.5.0",
     "react-modal": "3.16.1",
     "react-range": "1.8.14",
     "sanitize-html": "2.8.0",

public/locales/de.json

@@ -0,0 +1,12 @@
+{
+  "Organisms": {
+    "Settings": {
+      "theme": {
+        "follow_system": {
+          "title": "System-Theme verwenden",
+          "description": "Verwende den hellen oder dunklen Modus basierend auf den Systemeinstellungen."
+        }
+      }
+    }
+  }
+}

public/locales/en.json

@@ -0,0 +1,12 @@
+{
+  "Organisms": {
+    "Settings": {
+      "theme": {
+        "follow_system": {
+          "title": "Follow system theme",
+          "description": "Use light or dark mode based on the system settings."
+        }
+      }
+    }
+  }
+}

src/app/i18n.ts

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend, { HttpBackendOptions } from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  // i18next-http-backend
+  // loads translations from your server
+  // https://github.com/i18next/i18next-http-backend
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init<HttpBackendOptions>({
+    debug: false,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    load: 'languageOnly',
+    backend: {
+      loadPath: 'public/locales/{{lng}}.json',
+    },
+  });
+
+export default i18n;

src/app/organisms/settings/Settings.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './Settings.scss';
+import { useTranslation } from 'react-i18next';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -64,19 +65,21 @@ function AppearanceSection() {
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const spacings = ['0', '100', '200', '300', '400', '500']
 
+  const { t } = useTranslation();
+
   return (
     <div className="settings-appearance">
       <div className="settings-appearance__card">
         <MenuHeader>Theme</MenuHeader>
         <SettingTile
-          title="Follow system theme"
+          title={t('Organisms.Settings.theme.follow_system.title')}
           options={(
             <Toggle
               isActive={settings.useSystemTheme}
               onToggle={() => { toggleSystemTheme(); updateState({}); }}
             />
           )}
-          content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
+          content={<Text variant="b3">{t('Organisms.Settings.theme.follow_system.description')}</Text>}
         />
         <SettingTile
           title="Theme"

src/index.jsx

@@ -14,6 +14,9 @@ import settings from './client/state/settings';
 
 import App from './app/pages/App';
 
+// import i18n (needs to be bundled ;))
+import './app/i18n';
+
 document.body.classList.add(configClass, varsClass);
 
 settings.applyTheme();

vite.config.js

@@ -33,6 +33,10 @@ const copyFiles = {
       src: 'public/res/android',
       dest: 'public/',
     },
+    {
+      src: 'public/locales',
+      dest: 'public/',
+    },
   ],
 }