From ba4a2f87687971334cfbf812a7622daebc423711 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Fri, 5 Dec 2025 07:40:01 +0100
Subject: [PATCH 1/3] fix incorrect browser language detection behavior

---
 frontend/src/components/UserProfile.vue | 17 +++++++---
 frontend/src/i18n/index.ts              | 45 ++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/UserProfile.vue b/frontend/src/components/UserProfile.vue
index 0d21aabf9..684778072 100644
--- a/frontend/src/components/UserProfile.vue
+++ b/frontend/src/components/UserProfile.vue
@@ -22,7 +22,7 @@
             <ArrowTopRightOnSquareIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
             {{ t('userProfile.actions.manageAccount') }}
           </button>
-          <Listbox v-model="locale" as="div">
+          <Listbox v-model="languagePreference" as="div">
             <div class="relative">
               <ListboxButton class="relative w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-xs text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                 <LanguageIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
@@ -33,7 +33,7 @@
               </ListboxButton>
               <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
                 <ListboxOptions class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-hidden text-sm">
-                  <ListboxOption v-slot="{ active, selected }" :value="browserLocale" class="relative cursor-default select-none py-2 pl-3 pr-9 ui-not-active:text-gray-900 ui-active:text-white ui-active:bg-primary" @click="saveLanguage(undefined)">
+                  <ListboxOption v-slot="{ active, selected }" value="browser" class="relative cursor-default select-none py-2 pl-3 pr-9 ui-not-active:text-gray-900 ui-active:text-white ui-active:bg-primary" @click="saveLanguage(undefined)">
                     <span :class="[selected || active ? 'font-semibold' : 'font-normal', 'block truncate']">{{ t('userProfile.actions.changeLanguage.entry.browser') }}</span>
                     <span v-if="selected" :class="[active ? 'text-white' : 'text-primary', 'absolute inset-y-0 right-0 flex items-center pr-4']">
                       <CheckIcon class="h-5 w-5" aria-hidden="true" />
@@ -76,7 +76,7 @@ import backend, { UserDto, VersionDto } from '../common/backend';
 
 import config from '../common/config';
 import userdata from '../common/userdata';
-import { Locale } from '../i18n';
+import { Locale, detectBrowserLocale } from '../i18n';
 import DeviceList from './DeviceList.vue';
 import FetchError from './FetchError.vue';
 import LegacyDeviceList from './LegacyDeviceList.vue';
@@ -85,16 +85,25 @@ import UserkeyFingerprint from './UserkeyFingerprint.vue';
 
 const { locale, t } = useI18n({ useScope: 'global' });
 
+type LanguagePreference = Locale | 'browser';
+
+const languagePreference = ref<LanguagePreference>('browser');
+
 const me = ref<UserDto>();
 const keycloakUserAccountURL = ref<string>();
 const version = ref<VersionDto>();
 const onFetchError = ref<Error | null>();
-const browserLocale = ref<string>(navigator.language);
+const browserLocale = ref<string>(detectBrowserLocale());
 
 onMounted(async () => {
   const cfg = config.get();
   keycloakUserAccountURL.value = `${cfg.keycloakUrl}/realms/${cfg.keycloakRealm}/account`;
   await fetchData();
+  if (me.value?.language) {
+    languagePreference.value = me.value.language as Locale;
+  } else {
+    languagePreference.value = 'browser';
+  }
 });
 
 async function fetchData() {
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index a93068045..1f309e91c 100644
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -102,13 +102,48 @@ export const numberFormats: I18nOptions['numberFormats'] = {
   [Locale.ZH_TW]: defaultNumberFormat
 };
 
-export const mapToLocale = (local: string): Locale =>
-  (Object.values(Locale) as string[]).includes(local)
-    ? (local as Locale)
-    : Locale.EN_US;
+export const mapToLocale = (local: string): Locale => {
+  if (!local) {
+    return Locale.EN_US;
+  }
+
+  const normalized = local.replace('_', '-');
+
+  if ((Object.values(Locale) as string[]).includes(normalized)) {
+    return normalized as Locale;
+  }
+
+  const base = normalized.split('-')[0];
+
+  switch (base) {
+    case 'de': return Locale.DE_DE;
+    case 'en': return Locale.EN_US;
+    case 'fr': return Locale.FR_FR;
+    case 'it': return Locale.IT_IT;
+    case 'ko': return Locale.KO_KR;
+    case 'lv': return Locale.LV_LV;
+    case 'nl': return Locale.NL_NL;
+    case 'pt': return Locale.PT_PT;
+    case 'ru': return Locale.RU_RU;
+    case 'tr': return Locale.TR_TR;
+    case 'uk': return Locale.UK_UA;
+    case 'zh': return Locale.ZH_TW;
+    default: return Locale.EN_US;
+  }
+};
+
+export const detectBrowserLocale = (): Locale => {
+  const raw =
+    (typeof navigator !== 'undefined' &&
+      (navigator.languages && navigator.languages[0])) ||
+    (typeof navigator !== 'undefined' && navigator.language) ||
+    Locale.EN_US;
+
+  return mapToLocale(raw);
+};
 
 const i18n = createI18n({
-  locale: navigator.language,
+  locale: detectBrowserLocale(),
   fallbackLocale: Locale.EN_US,
   messages,
   datetimeFormats,

From 5175d19624a102ee77fb111bbabaf6f736fc214c Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Fri, 5 Dec 2025 13:57:24 +0100
Subject: [PATCH 2/3] refactor browser locale detection for readability

---
 frontend/src/i18n/index.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index 1f309e91c..8d062dce6 100644
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -133,15 +133,22 @@ export const mapToLocale = (local: string): Locale => {
 };
 
 export const detectBrowserLocale = (): Locale => {
-  const raw =
-    (typeof navigator !== 'undefined' &&
-      (navigator.languages && navigator.languages[0])) ||
-    (typeof navigator !== 'undefined' && navigator.language) ||
-    Locale.EN_US;
+  const raw = getBrowserLocale();
 
   return mapToLocale(raw);
 };
 
+function getBrowserLocale(): string {
+  if (typeof navigator === 'undefined') {
+    return Locale.EN_US;
+  } else if (navigator.languages && navigator.languages.length > 0) {
+    return navigator.languages[0];
+  } else if (navigator.language) {
+    return navigator.language;
+  }
+  return Locale.EN_US;
+}
+
 const i18n = createI18n({
   locale: detectBrowserLocale(),
   fallbackLocale: Locale.EN_US,

From ebff23c2b520df60ed49dcc4152d2764e1ff19a3 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Fri, 5 Dec 2025 14:56:16 +0100
Subject: [PATCH 3/3] wrap default locale fallback in else block

---
 frontend/src/i18n/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index 8d062dce6..6a04260fd 100644
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -145,8 +145,9 @@ function getBrowserLocale(): string {
     return navigator.languages[0];
   } else if (navigator.language) {
     return navigator.language;
+  } else {
+    return Locale.EN_US;
   }
-  return Locale.EN_US;
 }
 
 const i18n = createI18n({