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.11.3",
+    "i18next-browser-languagedetector": "7.2.1",
+    "i18next-http-backend": "2.5.1",
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "2.6.0",
@@ -64,6 +67,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
     "react-google-recaptcha": "2.1.0",
+    "react-i18next": "14.1.1",
     "react-modal": "3.16.1",
     "react-range": "1.8.14",
     "react-router-dom": "6.20.0",

public/locales/de.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " hat den Raum Name geändert"
+    }
+  }
+}

public/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " changed room name"
+    }
+  }
+}

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/room/RoomTimeline.tsx

@@ -44,6 +44,7 @@ import {
   toRem,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
+import { useTranslation } from 'react-i18next';
 import {
   decryptFile,
   eventWithShortcode,
@@ -1254,6 +1255,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     },
   });
 
+  const { t } = useTranslation();
+
   const renderMatrixEvent = useMatrixEventRenderer<[number, EventTimelineSet, boolean]>({
     renderRoomMessage: (mEventId, mEvent, item, timelineSet, collapse) => {
       const reactionRelations = getEventReactions(timelineSet, mEventId);
@@ -1494,7 +1497,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               <Box grow="Yes" direction="Column">
                 <Text size="T300" priority="300">
                   <b>{senderName}</b>
-                  {' changed room name'}
+                  {t('Organisms.RoomCommon.changed_room_name')}
                 </Text>
               </Box>
             }

src/index.tsx

@@ -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

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