Merge pull request #3690 from rommapp/posthog-code/detect-browser-language

feat: default UI language to browser language when available

Author: gantoine

frontend/src/RomM.vue

@@ -29,11 +29,11 @@ const languageStore = storeLanguage();
 const consoleStore = storeConsole();
 const vuetifyTheme = useTheme();
 const { consoleMode } = storeToRefs(consoleStore);
-const { defaultLanguage, languages } = storeToRefs(languageStore);
+const { languages } = storeToRefs(languageStore);
 const storedLocale = useLocalStorage("settings.locale", "");
 const selectedLanguage = ref(
   languages.value.find((lang) => lang.value === storedLocale.value) ||
-    defaultLanguage.value,
+    languageStore.detectBrowserLanguage(),
 );
 locale.value = selectedLanguage.value.value;
 languageStore.setLanguage(selectedLanguage.value);

frontend/src/stores/language.ts

@@ -32,6 +32,25 @@ export default defineStore("language", {
     setLanguage(lang: { value: string; name: string }) {
       this.selectedLanguage = lang;
     },
+    // Match the browser's preferred languages against the available locales,
+    // falling back to the default (en_US) when none line up. Tries an exact
+    // match first (e.g. "en-US" -> "en_US"), then a language-only match
+    // (e.g. "fr" -> "fr_FR").
+    detectBrowserLanguage() {
+      for (const pref of navigator.languages) {
+        const normalized = pref.replace("-", "_").toLowerCase();
+        const exact = this.languages.find(
+          (lang) => lang.value.toLowerCase() === normalized,
+        );
+        if (exact) return exact;
+        const base = normalized.split("_")[0];
+        const partial = this.languages.find(
+          (lang) => lang.value.toLowerCase().split("_")[0] === base,
+        );
+        if (partial) return partial;
+      }
+      return this.defaultLanguage;
+    },
     reset() {
       Object.assign(this, { ...defaultLanguageState });
     },