From 212bf8a607566b53539ff70c6e3b901fc2d5130e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20P=C3=A9rez?=
 <65142395+p3javier@users.noreply.github.com>
Date: Sat, 22 Mar 2025 23:56:43 +0100
Subject: [PATCH] feat(i18n): enhance language management by saving user
 preference and auto detect browser language (#487)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(i18n): enhance language management by saving user preference and detecting browser language

- Added a watcher to save the selected language to localStorage on change.
- Implemented browser language detection to set the default language based on user settings or browser preferences.

* use ~/utils/localstorage, remove setting savedLang in mounted as this is already set in i18.ts.

* do not repeat fallbackLocale and remove console log.

---------

Co-authored-by: Miroslav Šedivý <sedivy.miro@gmail.com>
---
 client/src/components/menu.vue |  8 +++++++-
 client/src/plugins/i18n.ts     | 24 ++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/client/src/components/menu.vue b/client/src/components/menu.vue
index ead446be..0b034da1 100644
--- a/client/src/components/menu.vue
+++ b/client/src/components/menu.vue
@@ -60,8 +60,9 @@
 </style>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator'
+  import { Component, Vue, Watch } from 'vue-property-decorator'
   import { messages } from '~/locale'
+  import { set } from '~/utils/localstorage'
 
   @Component({ name: 'neko-menu' })
   export default class extends Vue {
@@ -77,6 +78,11 @@
       this.$accessor.client.toggleAbout()
     }
 
+    @Watch('$i18n.locale')
+    onLanguageChange(newLang: string) {
+      set('lang', newLang)
+    }
+
     mounted() {
       const default_lang = new URL(location.href).searchParams.get('lang')
       if (default_lang && this.langs.includes(default_lang)) {
diff --git a/client/src/plugins/i18n.ts b/client/src/plugins/i18n.ts
index 6b199e86..7d563a15 100644
--- a/client/src/plugins/i18n.ts
+++ b/client/src/plugins/i18n.ts
@@ -1,11 +1,31 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import { messages } from '~/locale'
+import { get } from '~/utils/localstorage'
 
 Vue.use(VueI18n)
 
+const fallbackLocale = 'en'
+
+function detectBrowserLanguage(): string {
+  const browserLang = navigator.language.toLowerCase()
+
+  const supportedLangs = Object.keys(messages)
+  if (supportedLangs.includes(browserLang)) {
+    return browserLang
+  }
+
+  const baseLang = browserLang.split('-')[0]
+  const matchingLang = supportedLangs.find((lang) => lang.startsWith(baseLang))
+  if (matchingLang) {
+    return matchingLang
+  }
+
+  return fallbackLocale
+}
+
 export const i18n = new VueI18n({
-  locale: 'en',
-  fallbackLocale: 'en',
+  locale: get<string>('lang', detectBrowserLanguage()),
+  fallbackLocale,
   messages,
 })