web: refactor and deduplicate locale preference logic

web/src/components/settings/LanguageAutoToggle.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-    import settings from "$lib/state/settings";
-    import { device } from "$lib/device";
-    import { locale } from "$lib/i18n/translations";
-
-    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-
-    export let title: string;
-    export let description: string;
-
-    const updateLocale = () => {
-        if ($settings.appearance.autoLanguage) {
-            $locale = device.prefers.language;
-        } else {
-            $locale = $settings.appearance.language;
-        }
-    }
-
-    $: $settings.appearance.autoLanguage, updateLocale();
-</script>
-
-<SettingsToggle
-    settingContext="appearance"
-    settingId="autoLanguage"
-    {title}
-    {description}
-/>

web/src/components/settings/LanguageDropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import settings, { updateSetting } from "$lib/state/settings";
-    import { t, locale, locales } from "$lib/i18n/translations";
+    import { t, locales } from "$lib/i18n/translations";
+    import locale from "$lib/i18n/locale";
 
     import languages from "$i18n/languages.json";
 

web/src/lib/i18n/locale.ts

@@ -0,0 +1,31 @@
+import { derived } from 'svelte/store';
+
+import languages from '$i18n/languages.json';
+
+import settings from '$lib/state/settings';
+import { device } from '$lib/device';
+import { INTERNAL_locale, defaultLocale } from '$lib/i18n/translations';
+
+const isValid = (lang: string) => (
+    Object.keys(languages).includes(lang)
+);
+
+export default derived(
+    settings,
+    ($settings) => {
+        let currentLocale = defaultLocale;
+
+        if ($settings.appearance.autoLanguage) {
+            if (isValid(device.prefers.language)) {
+                currentLocale = device.prefers.language;
+            }
+        } else {
+            if (isValid($settings.appearance.language)) {
+                currentLocale = $settings.appearance.language;
+            }
+        }
+
+        INTERNAL_locale.set(currentLocale);
+        return currentLocale;
+    }
+);

web/src/lib/i18n/translations.ts

@@ -1,6 +1,6 @@
 import i18n from 'sveltekit-i18n';
 
-import type { Config } from 'sveltekit-i18n'
+import type { Config } from 'sveltekit-i18n';
 import type {
     GenericImport,
     StructuredLocfileInfo,
@@ -45,6 +45,6 @@ const config: Config = {
 
 export { defaultLocale };
 export const {
-    t, loading, locales, locale, translations,
+    t, loading, locales, locale: INTERNAL_locale, translations,
     loadTranslations, addTranslations, setLocale, setRoute
 } = new i18n(config);

web/src/routes/+layout.svelte

@@ -5,7 +5,7 @@
     import env from "$lib/env";
     import settings from "$lib/state/settings";
     import { device, app } from "$lib/device";
-    import { locale } from "$lib/i18n/translations";
+    import locale from "$lib/i18n/locale";
     import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";

web/src/routes/+layout.ts

@@ -6,7 +6,6 @@ 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';
 
 export const load: Load = async ({ url }) => {
@@ -15,22 +14,7 @@ export const load: Load = async ({ url }) => {
     let preferredLocale = defaultLocale;
 
     if (browser) {
-        const device = (await import('$lib/device')).device;
+        preferredLocale = get((await import('$lib/i18n/locale')).default);
-        const settings = get((await import('$lib/state/settings')).default);
-        const deviceLanguage = device.prefers.language;
-        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);

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

@@ -9,7 +9,6 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 
     import LanguageDropdown from "$components/settings/LanguageDropdown.svelte";
-    import LanguageAutoToggle from "$components/settings/LanguageAutoToggle.svelte";
 </script>
 
 <SettingsCategory sectionId="theme" title={$t("settings.theme")}>
@@ -27,7 +26,9 @@
 </SettingsCategory>
 
 <SettingsCategory sectionId="language" title={$t("settings.language")}>
-    <LanguageAutoToggle
+    <SettingsToggle
+        settingContext="appearance"
+        settingId="autoLanguage"
         title={$t("settings.language.auto.title")}
         description={$t("settings.language.auto.description")}
     />