web: refactor and deduplicate locale preference logic

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;
-        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
-        }
+        preferredLocale = get((await import('$lib/i18n/locale')).default);
     }
 
     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")}
     />