Migrate to lingui

Switch to "lingui" for better DX.
Tried to persist existing languages as much as possible.

Removed "vite-plugin-node-polyfills" because it's incompatible with "lingui"

src/i18n/index.ts

@@ -6,66 +6,47 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { use } from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import HttpBackend from 'i18next-http-backend';
-import { SubpathUtil } from '@/lib/utils/SubpathUtil.ts';
+import { i18n } from '@lingui/core';
+import { DEFAULT_LANGUAGE, getISOLanguage, getPreferredISOLanguageCodes } from '@/lib/ISOLanguageUtil.ts';
+import { AppStorage } from '@/lib/storage/AppStorage.ts';
+import localesConfig from '@/i18n/locales.json';
 
-/**
- * Keys have to match {@link IsoLanguages} codes, they're used for showing the language name in the dropdown in the {@link Settings}.<br/>
- * In case there is no language code for the key in {@link IsoLanguages}, the corresponding language has to be added
- *
- * **IMPORTANT:**
- *
- * This is generated by the `i18n:gen-resources` script
- */
-export const i18nResources = [
-    'de',
-    'en',
-    'es',
-    'fa',
-    'fr',
-    'it',
-    'ja',
-    'ko',
-    'pl',
-    'pt-BR',
-    'pt',
-    'ru',
-    'ta',
-    'tr',
-    'vi',
-    'zh_Hans',
-    'zh_Hant',
-] as const;
+export const i18nResources = localesConfig.locales;
 
 export type I18nResourceCode = (typeof i18nResources)[number];
 
-export const i18n = use(initReactI18next)
-    .use(HttpBackend)
-    .use(LanguageDetector)
-    .init({
-        supportedLngs: i18nResources,
-        fallbackLng: 'en',
+const DEFAULT_LOCALE = localesConfig.defaultLocale;
 
-        backend: {
-            loadPath: `${SubpathUtil.getSubpath()}/locales/{{lng}}.json`,
-            allowMultiLoading: true,
-        },
+const SELECTED_LANGUAGE_CODE_KEY = 'i18n:selected-language';
 
-        interpolation: {
-            escapeValue: false,
-            format: (value, format) => {
-                switch (format) {
-                    case 'lowercase':
-                        return value.toLocaleLowerCase();
-                    default:
-                        return value;
-                }
-            },
-        },
+export async function loadCatalog(locale: string): Promise<void> {
+    const localeToLoad = i18nResources.includes(locale as (typeof i18nResources)[number]) ? locale : DEFAULT_LOCALE;
 
-        returnNull: false,
-        debug: process.env.NODE_ENV !== 'production',
-    });
+    const { messages } = await import(`./locales/${localeToLoad}.po`);
+    i18n.loadAndActivate({ locale: localeToLoad, messages });
+
+    AppStorage.local.setItem(SELECTED_LANGUAGE_CODE_KEY, localeToLoad);
+}
+
+function detectLocale(): string {
+    const storedLanguage = AppStorage.local.getItem(SELECTED_LANGUAGE_CODE_KEY);
+    const preferredLanguages = getPreferredISOLanguageCodes();
+    const languageCodes = [storedLanguage, ...preferredLanguages];
+
+    const normalizedLanguageCodes = languageCodes
+        .filter((code) => code !== null)
+        .filter((code) => getISOLanguage(code))
+        .filter((code) => i18nResources.includes(code as (typeof i18nResources)[number]));
+
+    return normalizedLanguageCodes[0] ?? DEFAULT_LANGUAGE;
+}
+
+export async function initializeLocalization(): Promise<void> {
+    try {
+        await loadCatalog(detectLocale());
+    } catch (e) {
+        await loadCatalog(DEFAULT_LOCALE);
+    }
+}
+
+export { i18n };