web: i18n system & navbar translations

dynamic page language and language dropdown!! finally!!

web/src/lib/device.ts

@@ -4,10 +4,14 @@ const isIOS = ua.includes("iphone os") || (ua.includes("mac os") && navigator.ma
 const isAndroid = ua.includes("android") || ua.includes("diordna");
 const isMobile = isIOS || isAndroid;
 
-const deviceInfo = {
+const preferredLocale = navigator.language.toLowerCase().slice(0, 2);
+
+const device = {
     isIOS,
     isAndroid,
     isMobile,
+
+    preferredLocale,
 }
 
-export default deviceInfo;
+export default device;

web/src/lib/i18n/translations.ts

@@ -0,0 +1,48 @@
+import i18n from 'sveltekit-i18n';
+import type { Config } from 'sveltekit-i18n';
+
+import languages from '$i18n/languages.json';
+
+export const defaultLocale = 'en';
+
+export const config: Config = {
+    translations: {
+        en: { languages },
+        ru: { languages },
+    },
+    loaders: [
+        {
+            locale: 'en',
+            key: 'tabs',
+            loader: async () => (
+                await import(`$i18n/en/tabs.json`)
+            ).default,
+        },
+        {
+            locale: 'en',
+            key: 'a11y.tabs',
+            loader: async () => (
+                await import(`$i18n/en/a11y/tabs.json`)
+            ).default,
+        },
+        {
+            locale: 'ru',
+            key: 'tabs',
+            loader: async () => (
+                await import(`$i18n/ru/tabs.json`)
+            ).default,
+        },
+        {
+            locale: 'ru',
+            key: 'a11y.tabs',
+            loader: async () => (
+                await import(`$i18n/ru/a11y/tabs.json`)
+            ).default,
+        },
+    ],
+};
+
+export const {
+    t, loading, locales, locale, translations,
+    loadTranslations, addTranslations, setLocale, setRoute
+} = new i18n(config);

web/src/lib/settings/defaults.ts

@@ -1,18 +1,21 @@
+import { defaultLocale } from "$lib/i18n/translations";
 import type { CobaltSettings } from "$lib/types/settings";
 
 const defaultSettings: CobaltSettings = {
     schemaVersion: 1,
     accessibility: {
         reduceAnimations: false,
-        reduceTransparency: false
+        reduceTransparency: false,
     },
     appearance: {
-        theme: "auto"
+        theme: "auto",
+        language: defaultLocale,
+        autoLanguage: true,
     },
     general: {
         customProcessingEndpoint: "",
         seenOnboarding: false,
-        seenSafetyWarning: false
+        seenSafetyWarning: false,
     },
     save: {
         audioFormat: "mp3",
@@ -25,22 +28,11 @@ const defaultSettings: CobaltSettings = {
         twitterGif: false,
         videoQuality: "720",
         youtubeVideoCodec: "h264",
-        youtubeDubBrowserLang: false
+        youtubeDubBrowserLang: false,
     },
     privacy: {
-        trafficAnalytics: true
-    }
+        trafficAnalytics: true,
+    },
 }
-export default defaultSettings;
 
-export const settingArrays = {
-    appearance: {
-        theme: ["auto", "light", "dark"]
-    },
-    save: {
-        audioFormat: ["best", "mp3", "ogg", "wav", "opus"],
-        filenameStyle: ["classic", "basic", "pretty", "nerdy"],
-        videoQuality: ["max", "2160", "1440", "1080", "720", "480", "360", "240", "144"],
-        youtubeVideoCodec: ["h264", "av1", "vp9"],
-    },
-}
+export default defaultSettings;

web/src/lib/types/settings.ts

@@ -1,3 +1,5 @@
+import languages from '$i18n/languages.json';
+
 export type CobaltSettingsAccessibility = {
     reduceAnimations: boolean,
     reduceTransparency: boolean,
@@ -12,6 +14,8 @@ export const youtubeVideoCodecOptions = ["h264", "av1", "vp9"] as const;
 
 type CobaltSettingsAppearance = {
     theme: typeof themeOptions[number],
+    language: keyof typeof languages,
+    autoLanguage: boolean,
 };
 
 type CobaltSettingsGeneral = {