From 8a080c55f62010e3138cd23ceb6cd7042fd15cc1 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sat, 20 Jul 2024 14:37:52 +0000
Subject: [PATCH] web: refactor and deduplicate locale preference logic

---
 .../settings/LanguageAutoToggle.svelte        | 27 ----------------
 .../settings/LanguageDropdown.svelte          |  3 +-
 web/src/lib/i18n/locale.ts                    | 31 +++++++++++++++++++
 web/src/lib/i18n/translations.ts              |  4 +--
 web/src/routes/+layout.svelte                 |  2 +-
 web/src/routes/+layout.ts                     | 18 +----------
 .../settings/general/appearance/+page.svelte  |  5 +--
 7 files changed, 40 insertions(+), 50 deletions(-)
 delete mode 100644 web/src/components/settings/LanguageAutoToggle.svelte
 create mode 100644 web/src/lib/i18n/locale.ts

diff --git a/web/src/components/settings/LanguageAutoToggle.svelte b/web/src/components/settings/LanguageAutoToggle.svelte
deleted file mode 100644
index aa896c9f..00000000
--- a/web/src/components/settings/LanguageAutoToggle.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import settings from "$lib/state/settings";
-    import { device } from "$lib/device";
-    import { locale } 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) {
-            $locale = device.prefers.language;
-        } else {
-            $locale = $settings.appearance.language;
-        }
-    }
-
-    $: $settings.appearance.autoLanguage, updateLocale();
-</script>
-
-<SettingsToggle
-    settingContext="appearance"
-    settingId="autoLanguage"
-    {title}
-    {description}
-/>
diff --git a/web/src/components/settings/LanguageDropdown.svelte b/web/src/components/settings/LanguageDropdown.svelte
index 3cc0ac17..64be9a19 100644
--- a/web/src/components/settings/LanguageDropdown.svelte
+++ b/web/src/components/settings/LanguageDropdown.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import settings, { updateSetting } from "$lib/state/settings";
-    import { t, locale, locales } from "$lib/i18n/translations";
+    import { t, locales } from "$lib/i18n/translations";
+    import locale from "$lib/i18n/locale";
 
     import languages from "$i18n/languages.json";
 
diff --git a/web/src/lib/i18n/locale.ts b/web/src/lib/i18n/locale.ts
new file mode 100644
index 00000000..b6896b22
--- /dev/null
+++ b/web/src/lib/i18n/locale.ts
@@ -0,0 +1,31 @@
+import { derived } from 'svelte/store';
+
+import languages from '$i18n/languages.json';
+
+import settings from '$lib/state/settings';
+import { device } from '$lib/device';
+import { INTERNAL_locale, defaultLocale } from '$lib/i18n/translations';
+
+const isValid = (lang: string) => (
+    Object.keys(languages).includes(lang)
+);
+
+export default derived(
+    settings,
+    ($settings) => {
+        let currentLocale = defaultLocale;
+
+        if ($settings.appearance.autoLanguage) {
+            if (isValid(device.prefers.language)) {
+                currentLocale = device.prefers.language;
+            }
+        } else {
+            if (isValid($settings.appearance.language)) {
+                currentLocale = $settings.appearance.language;
+            }
+        }
+
+        INTERNAL_locale.set(currentLocale);
+        return currentLocale;
+    }
+);
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 7c8cb476..97a200f2 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -1,6 +1,6 @@
 import i18n from 'sveltekit-i18n';
 
-import type { Config } from 'sveltekit-i18n'
+import type { Config } from 'sveltekit-i18n';
 import type {
     GenericImport,
     StructuredLocfileInfo,
@@ -45,6 +45,6 @@ const config: Config = {
 
 export { defaultLocale };
 export const {
-    t, loading, locales, locale, translations,
+    t, loading, locales, locale: INTERNAL_locale, translations,
     loadTranslations, addTranslations, setLocale, setRoute
 } = new i18n(config);
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 7bb8c8ff..5781d247 100644
--- a/web/src/routes/+layout.svelte
+++ b/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";
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index c62761f5..dd482ffc 100644
--- a/web/src/routes/+layout.ts
+++ b/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);
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/general/appearance/+page.svelte
index b3927f36..b086f494 100644
--- a/web/src/routes/settings/general/appearance/+page.svelte
+++ b/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")}
     />