web/settings: refresh the locale state when auto mode is toggled

web/src/components/settings/LanguageAutoToggle.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import settings from "$lib/settings";
+    import { device } from "$lib/device";
+    import { locale, locales } 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) {
+            if ($locales.includes(device.preferredLocale)) {
+                $locale = device.preferredLocale;
+            }
+        } else {
+            $locale = $settings.appearance.language;
+        }
+    }
+
+    $: $settings.appearance.autoLanguage, updateLocale();
+</script>
+
+<SettingsToggle
+    settingContext="appearance"
+    settingId="autoLanguage"
+    {title}
+    {description}
+/>

web/src/components/settings/LanguageDropdown.svelte

@@ -27,7 +27,7 @@
             </h4>
             <div class="right-side">
                 <span class="selector-current" aria-hidden="true">
-                    {$t(`languages.${$locale}`)}
+                    {$t(`languages.${currentSetting}`)}
                 </span>
                 <IconSelector />
             </div>

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

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