web/settings: convert LanguageDropdown to universal SettingsDropdown

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { t } from "$lib/i18n/translations";
+    import { t, locales } from "$lib/i18n/translations";
+    import settings from "$lib/state/settings";
 
     import { themeOptions } from "$lib/types/settings";
 
@@ -7,7 +8,16 @@
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-    import LanguageDropdown from "$components/settings/LanguageDropdown.svelte";
+    import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
+
+    const dropdownItems = () => {
+        return $locales.reduce((obj, lang) => {
+            return {
+                ...obj,
+                [lang]: $t(`languages.${lang}`),
+            };
+        }, {});
+    };
 </script>
 
 <SettingsCategory sectionId="theme" title={$t("settings.theme")}>
@@ -31,7 +41,17 @@
         title={$t("settings.language.auto.title")}
         description={$t("settings.language.auto.description")}
     />
-    <LanguageDropdown />
+
+    <SettingsDropdown
+        title={$t("settings.language.preferred.title")}
+        description={$t("settings.language.preferred.description")}
+        items={dropdownItems()}
+        settingContext="appearance"
+        settingId="language"
+        selectedOption={$settings.appearance.language}
+        selectedTitle={$t(`languages.${$settings.appearance.language}`)}
+        disabled={$settings.appearance.autoLanguage}
+    />
 </SettingsCategory>
 
 <SettingsCategory