From cbc1febab22a006a801b0b62c5e1c1eaa7dc5314 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 8 Jul 2024 19:46:20 +0600
Subject: [PATCH] web/settings: disable the language dropdown when auto

---
 web/i18n/en/settings.json                          |  2 +-
 .../components/settings/LanguageDropdown.svelte    | 14 +++++++++++++-
 .../settings/general/appearance/+page.svelte       |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index cfed9560..2dbd3e35 100644
--- a/web/i18n/en/settings.json
+++ b/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."
 }
diff --git a/web/src/components/settings/LanguageDropdown.svelte b/web/src/components/settings/LanguageDropdown.svelte
index 68bd458f..261ae692 100644
--- a/web/src/components/settings/LanguageDropdown.svelte
+++ b/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%;
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/general/appearance/+page.svelte
index 2c7226d6..84d1eea6 100644
--- a/web/src/routes/settings/general/appearance/+page.svelte
+++ b/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>