fix: save the locale in storage

web/src/components/UserMenu.vue

@@ -42,6 +42,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app.store'
 import { useLogout } from '@/composables/useLogout'
+import { saveLocale } from '@/plugins/i18n'
 import { useUpdater } from '@/composables/useUpdater'
 import { useUserStore } from '@/stores/user.store'
 import { $ls } from '@/plugins/axios'
@@ -176,7 +177,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
           checked: locale.value === 'en',
           onSelect(e: Event) {
             e.preventDefault()
-            locale.value = 'en'
+            saveLocale('en')
           },
         },
         {
@@ -185,7 +186,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
           checked: locale.value === 'ru',
           onSelect(e: Event) {
             e.preventDefault()
-            locale.value = 'ru'
+            saveLocale('ru')
           },
         },
       ],

web/src/main.ts

@@ -8,7 +8,7 @@ import type { Plugin } from 'vue'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import ui from '@nuxt/ui/vue-plugin'
-import { i18n } from './plugins/i18n'
+import { i18n, restoreSavedLocale } from './plugins/i18n'
 
 addCollection(lucide)
 addCollection(mdi)
@@ -82,3 +82,4 @@ app.use(router)
 app.use(ui as unknown as Plugin)
 
 app.mount('#app')
+restoreSavedLocale()

web/src/plugins/i18n.ts

@@ -1,5 +1,7 @@
 import { createI18n } from 'vue-i18n'
-import { messages, defaultLocale } from '@/locales'
+import { messages, defaultLocale, locales, type Locale } from '@/locales'
+
+export const LOCALE_STORAGE_KEY = 'locale'
 
 export const i18n = createI18n({
   legacy: false,
@@ -8,6 +10,20 @@ export const i18n = createI18n({
   messages,
 })
 
+export async function restoreSavedLocale() {
+  const { $ls } = await import('@/plugins/axios')
+  const value = await $ls.getValue(LOCALE_STORAGE_KEY)
+  if (value && locales.includes(value as Locale)) {
+    i18n.global.locale.value = value as Locale
+  }
+}
+
+export async function saveLocale(locale: Locale) {
+  const { $ls } = await import('@/plugins/axios')
+  await $ls.setValue(LOCALE_STORAGE_KEY, locale)
+  i18n.global.locale.value = locale
+}
+
 export function useI18n() {
   return i18n.global
 }