Convert V2 translations to Toml

frontend/src/core/i18n/config.ts

@@ -1,16 +1,16 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import Backend from 'i18next-http-backend';
+import TomlBackend from '@app/i18n/tomlBackend';
 
 i18n
-  .use(Backend)
+  .use(TomlBackend)
   .use(initReactI18next)
   .init({
     lng: 'en',
     fallbackLng: 'en',
     debug: false,
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
+      loadPath: '/locales/{{lng}}/{{ns}}.toml',
     },
     interpolation: {
       escapeValue: false,
@@ -29,7 +29,7 @@ i18n
           'convert.singleOrMultiple': 'Output',
           'convert.emailNote': 'Email attachments and embedded images will be included',
           'common.color': 'Color',
-          'common.grayscale': 'Grayscale', 
+          'common.grayscale': 'Grayscale',
           'common.blackWhite': 'Black & White',
           'common.single': 'Single Image',
           'common.multiple': 'Multiple Images',
@@ -45,4 +45,4 @@ i18n
     }
   });
 
-export default i18n;
+export default i18n;

frontend/src/core/i18n/tomlBackend.ts

@@ -0,0 +1,51 @@
+import { BackendModule, ReadCallback } from 'i18next';
+import { parse } from 'smol-toml';
+
+export interface TomlBackendOptions {
+  loadPath: string | ((lngs: string[], namespaces: string[]) => string);
+}
+
+class TomlBackend implements BackendModule<TomlBackendOptions> {
+  static type = 'backend' as const;
+  type = 'backend' as const;
+
+  constructor(services?: unknown, options?: TomlBackendOptions) {
+    this.init(services, options);
+  }
+
+  init(_services?: unknown, options?: TomlBackendOptions): void {
+    this.options = options;
+  }
+
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    const loadPath = this.options?.loadPath;
+
+    if (!loadPath) {
+      callback(new Error('loadPath is not configured'), null);
+      return;
+    }
+
+    const url = typeof loadPath === 'function'
+      ? loadPath([language], [namespace])
+      : loadPath.replace('{{lng}}', language).replace('{{ns}}', namespace);
+
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to load translation file: ${url} (${response.status})`);
+        }
+        return response.text();
+      })
+      .then((tomlContent) => {
+        const parsed = parse(tomlContent);
+        callback(null, parsed);
+      })
+      .catch((error) => {
+        callback(error, null);
+      });
+  }
+
+  private options?: TomlBackendOptions;
+}
+
+export default TomlBackend;