web/settings: disable the language dropdown when auto

web/i18n/en/settings.json

@@ -78,7 +78,7 @@
 
     "language": "language",
     "language.auto.title": "use default browser language",
-    "language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead.",
+    "language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead. disable this toggle to pick a language manually.",
     "language.preferred.title": "preferred language",
     "language.preferred.description": "language used for interface and content."
 }

web/src/components/settings/LanguageDropdown.svelte

@@ -8,6 +8,8 @@
 
     $: currentSetting = $settings.appearance.language;
 
+    $: disabled = $settings.appearance.autoLanguage;
+
     const updateLocale = (lang: string) => {
         updateSetting({
             appearance: {
@@ -17,7 +19,7 @@
     };
 </script>
 
-<div class="language-selector-parent">
+<div class="language-selector-parent" class:disabled aria-hidden={disabled}>
     <div id="language-selector" class="selector button">
         <div class="selector-info">
             <h4 class="selector-title">
@@ -34,6 +36,7 @@
             id="setting-dropdown-appearance-language"
             bind:value={$locale}
             on:change={() => updateLocale($locale)}
+            disabled={disabled}
         >
             {#each $locales as value}
                 <option {value} selected={currentSetting === value}>
@@ -53,6 +56,11 @@
         flex-direction: column;
         gap: 10px;
         overflow: hidden;
+        transition: opacity 0.2s;
+    }
+
+    .language-selector-parent.disabled {
+        opacity: 0.5;
     }
 
     #language-selector {
@@ -68,6 +76,10 @@
         overflow: scroll;
     }
 
+    .disabled #language-selector {
+        pointer-events: none;
+    }
+
     .selector-info {
         height: 100%;
         width: 100%;

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

@@ -48,11 +48,11 @@
 </SettingsCategory>
 
 <SettingsCategory sectionId="language" title={$t("settings.language")}>
-    <LanguageDropdown />
     <SettingsToggle
         settingContext="appearance"
         settingId="autoLanguage"
         title={$t("settings.language.auto.title")}
         description={$t("settings.language.auto.description")}
     />
+    <LanguageDropdown />
 </SettingsCategory>