From def5f59242b8ff5835f5f9d8fbdbb33e1ea49b9d Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 7 Jun 2024 18:35:05 +0200
Subject: [PATCH] fix(web): language setting (#10024)

---
 .../user-settings-page/app-settings.svelte    | 27 ++++++++++---------
 web/src/lib/constants.ts                      |  4 +--
 web/src/lib/stores/preferences.store.ts       |  4 +--
 web/src/routes/+layout.ts                     |  4 +--
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index 33b6f5e8b8..7245fd5857 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -2,7 +2,7 @@
   import type { ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { fallbackLang, fallbackLocale, langs, locales } from '$lib/constants';
+  import { defaultLang, fallbackLocale, langs, locales } from '$lib/constants';
   import {
     alwaysLoadOriginalFile,
     colorTheme,
@@ -16,8 +16,7 @@
   import { findLocale } from '$lib/utils';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { t, locale as i18nLocale, init } from 'svelte-i18n';
-  import { get } from 'svelte/store';
+  import { t, init } from 'svelte-i18n';
 
   let time = new Date();
 
@@ -65,18 +64,20 @@
     $locale = $locale ? undefined : fallbackLocale.code;
   };
 
+  const langOptions = langs.map((lang) => ({ label: lang.name, value: lang.code }));
+  const defaultLangOption = { label: defaultLang.name, value: defaultLang.code };
+
   const handleLanguageChange = async (newLang: string | undefined) => {
-    newLang = newLang || fallbackLang;
-    $lang = newLang;
+    if (newLang) {
+      $lang = newLang;
 
-    const previousLang = get(i18nLocale);
+      if (newLang === 'dev') {
+        // Reload required, because fallbackLocale cannot be cleared.
+        window.location.reload();
+      }
 
-    if (newLang === 'dev') {
-      await init({ fallbackLocale: 'dev', initialLocale: 'dev' });
-    } else if (previousLang == 'dev' && newLang !== 'dev') {
-      await init({ fallbackLocale: 'en-US', initialLocale: newLang });
+      await init({ fallbackLocale: defaultLang.code, initialLocale: newLang });
     }
-    $i18nLocale = newLang;
   };
 
   const handleLocaleChange = (newLocale: string | undefined) => {
@@ -101,8 +102,8 @@
       <div class="ml-4">
         <SettingCombobox
           comboboxPlaceholder={$t('language')}
-          {selectedOption}
-          options={langs.map((lang) => ({ label: lang.name, value: lang.code }))}
+          selectedOption={langOptions.find(({ value }) => value === $lang) || defaultLangOption}
+          options={langOptions}
           title={$t('language')}
           subtitle={$t('language_setting_description')}
           onSelect={(combobox) => handleLanguageChange(combobox?.value)}
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 6437766e9b..3ed8f9da5d 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -244,7 +244,7 @@ export const locales = [
   { code: 'zu-ZA', name: 'Zulu (South Africa)' },
 ];
 
-export const fallbackLang = 'en-US';
+export const defaultLang = { name: 'English', code: 'en', loader: () => import('$lib/i18n/en.json') };
 
 export const langs = [
   { name: 'Arabic', code: 'ar', loader: () => import('$lib/i18n/ar.json') },
@@ -252,7 +252,7 @@ export const langs = [
   { name: 'Czech', code: 'cs', loader: () => import('$lib/i18n/cs.json') },
   { name: 'Danish', code: 'da', loader: () => import('$lib/i18n/da.json') },
   { name: 'German', code: 'de', loader: () => import('$lib/i18n/de.json') },
-  { name: 'English', code: 'en', loader: () => import('$lib/i18n/en.json') },
+  defaultLang,
   { name: 'Spanish', code: 'es', loader: () => import('$lib/i18n/es.json') },
   { name: 'Finnish', code: 'fi', loader: () => import('$lib/i18n/fi.json') },
   { name: 'French', code: 'fr', loader: () => import('$lib/i18n/fr.json') },
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 855f2afa02..b9c89fa92c 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { Theme } from '$lib/constants';
+import { Theme, defaultLang } from '$lib/constants';
 import { persisted } from 'svelte-local-storage-store';
 import { get } from 'svelte/store';
 
@@ -42,7 +42,7 @@ export const locale = persisted<string | undefined>('locale', undefined, {
   },
 });
 
-export const lang = persisted<string | undefined>('lang', undefined, {
+export const lang = persisted('lang', defaultLang.code, {
   serializer: {
     parse: (text) => text,
     stringify: (object) => object ?? '',
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index b5ed291ab2..cdbb61eb87 100644
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -1,4 +1,4 @@
-import { fallbackLang, langs } from '$lib/constants';
+import { defaultLang, langs } from '$lib/constants';
 import { lang } from '$lib/stores/preferences.store';
 import { defaults } from '@immich/sdk';
 import { init, register } from 'svelte-i18n';
@@ -20,7 +20,7 @@ export const load = (async ({ fetch }) => {
 
   const preferenceLang = get(lang);
 
-  await init({ fallbackLocale: fallbackLang, initialLocale: preferenceLang || fallbackLang });
+  await init({ fallbackLocale: preferenceLang === 'dev' ? 'dev' : defaultLang.code, initialLocale: preferenceLang });
 
   return {
     meta: {