web: i18n system & navbar translations

dynamic page language and language dropdown!! finally!!

web/src/routes/+layout.ts

@@ -1,2 +1,39 @@
 export const prerender = true;
 export const ssr = false;
+
+import { browser } from '$app/environment';
+
+import { get } from 'svelte/store';
+import type { Load } from '@sveltejs/kit';
+
+import languages from '$i18n/languages.json';
+import { loadTranslations, defaultLocale } from '$lib/i18n/translations';
+
+import device from '$lib/device.js';
+
+export const load: Load = async ({ url }) => {
+    const { pathname } = url;
+
+    let preferredLocale = defaultLocale;
+
+    if (browser) {
+        const settings = get((await import('$lib/settings')).default);
+        const deviceLanguage = device.preferredLocale;
+        const settingsLanguage = settings.appearance.language;
+
+        const isValid = (lang: string) => (
+            Object.keys(languages).includes(lang)
+        );
+
+        if (settings.appearance.autoLanguage) {
+            if (isValid(deviceLanguage)) {
+                preferredLocale = deviceLanguage;
+            }
+        } else if (isValid(settingsLanguage)) {
+            preferredLocale = settingsLanguage
+        }
+    }
+
+    await loadTranslations(preferredLocale, pathname);
+    return {};
+}

web/src/routes/settings/general/appearance/+page.svelte

@@ -5,6 +5,7 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import { themeOptions } from "$lib/types/settings";
+    import LanguageDropdown from "$components/settings/LanguageDropdown.svelte";
 </script>
 
 <SettingsCategory title="theme">
@@ -31,3 +32,13 @@
         description="replaces rapid animations with smooth transitions."
     />
 </SettingsCategory>
+
+<SettingsCategory title="language">
+    <LanguageDropdown />
+    <SettingsToggle
+        settingContext="appearance"
+        settingId="autoLanguage"
+        title="use default browser language"
+        description="automatically picks the best language for you. if preferred browser language isn't available, english is used instead."
+    />
+</SettingsCategory>