fix(locales): prefer location locale

- use locale from window location (apply 'ru' locale if user enter on '/ru/...' location) if it is not a default application locale (en)

src/App.vue

@@ -32,6 +32,7 @@ import { useRouter } from 'vue-router'
 import { isDark, isNewVersionNotificationDisabled, selectedLocale } from '@/utilities'
 import { watch } from 'vue'
 import { ref } from 'vue'
+import { INITIAL_LOCATION_LOCALE } from './constants'
 const BaseNotification = defineAsyncComponent(() => import('@/components/base/BaseNotification.vue'))
 
 const keepAliveComponents = ['DamageCalculatorPage', 'MagicCalculatorPage', 'CreaturesLibraryPage']
@@ -67,7 +68,7 @@ const notificationsButtons = computed(() => [
 // Collect initial data about game
 const stop = watch(router.currentRoute, ({ path }) => {
   if (!store.isDataLoaded && ['/damage', '/magic', '/creatures'].includes(path)) {
-    store.loadData(selectedLocale.value)
+    store.loadData(selectedLocale.value ?? INITIAL_LOCATION_LOCALE)
     stop()
   }
 })

src/components/PageFooter.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { type AvailableLocale } from '@/i18n'
+import type { AvailableLocale } from '@/constants'
 import { isDark, isNewVersionNotificationDisabled, selectedLocale } from '@/utilities'
 import { ref } from 'vue'
 import { defineAsyncComponent, inject } from 'vue'
@@ -100,7 +100,7 @@ const locales: ReadonlyArray<{ name: AvailableLocale; value: string }> = [
 async function updatePage(event: Event) {
   const locale = (event.target as HTMLInputElement).value as AvailableLocale
   selectedLocale.value = locale
-  router.go(0)
+  location.replace(location.origin)
 }
 
 const appVersion = import.meta.env.__APP_VERSION__

src/constants.ts

@@ -0,0 +1,6 @@
+export type AvailableLocale = 'en' | 'ru'
+
+export const DEFAULT_LOCALE: AvailableLocale = 'en'
+export const AVAILABLE_LOCALES: Readonly<Array<AvailableLocale>> = ['en', 'ru']
+export const INITIAL_LOCATION_LOCALE =
+  AVAILABLE_LOCALES.find((locale) => locale === location.pathname.split('/').at(1)) ?? 'en'

src/i18n.ts

@@ -1,13 +1,10 @@
 import { createI18n } from 'vue-i18n'
 import { selectedLocale } from './utilities'
-
-export type AvailableLocale = 'en' | 'ru'
-export const DEFAULT_LOCALE: AvailableLocale = 'en'
-export const AVAILABLE_LOCALES: Readonly<Array<AvailableLocale>> = ['en', 'ru']
+import { AVAILABLE_LOCALES, DEFAULT_LOCALE, INITIAL_LOCATION_LOCALE, type AvailableLocale } from './constants'
 
 const i18n = createI18n({
   legacy: false,
-  locale: DEFAULT_LOCALE,
+  locale: getAppLocale(),
   availableLocales: AVAILABLE_LOCALES,
 })
 
@@ -16,8 +13,6 @@ export async function loadLocaleMessages(locale: string) {
 }
 
 export function getBrowserLanguage(): AvailableLocale {
-  if (!navigator.language) return DEFAULT_LOCALE
-
   // get first language code (e.g. get 'en' from en-US)
   const browserLanguage = navigator.language.trim().split(/-|_/)[0]
   if (AVAILABLE_LOCALES.some((language) => language === browserLanguage)) {
@@ -27,6 +22,12 @@ export function getBrowserLanguage(): AvailableLocale {
   }
 }
 
+export function getAppLocale(): AvailableLocale {
+  if (INITIAL_LOCATION_LOCALE !== DEFAULT_LOCALE) return INITIAL_LOCATION_LOCALE
+  else if (selectedLocale.value) return selectedLocale.value
+  else return getBrowserLanguage()
+}
+
 export async function setLocale(locale: AvailableLocale) {
   selectedLocale.value = locale
   const messages = await loadLocaleMessages(locale)

src/main.ts

@@ -1,11 +1,10 @@
 import App from '@/App.vue'
-import i18n, { setLocale } from '@/i18n'
+import i18n, { getAppLocale, setLocale } from '@/i18n'
 import router from '@/router'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
-import { selectedLocale } from './utilities'
 
-setLocale(selectedLocale.value).then(() => {
+setLocale(getAppLocale()).then(() => {
   createApp(App).use(i18n).use(router).use(createPinia()).use(createHead()).mount('#app')
 })

src/router.ts

@@ -1,9 +1,11 @@
 import { AVAILABLE_LOCALES, DEFAULT_LOCALE } from '@/i18n'
 import { createRouter, createWebHistory } from 'vue-router'
-import { selectedLocale } from './utilities'
+import { AVAILABLE_LOCALES, DEFAULT_LOCALE } from './constants'
+import i18n from './i18n'
+const BASE_PATH = i18n.global.locale.value !== DEFAULT_LOCALE ? i18n.global.locale.value : '/'
 
 const router = createRouter({
-  history: createWebHistory(selectedLocale.value === DEFAULT_LOCALE ? '/' : `${selectedLocale.value}`),
+  history: createWebHistory(BASE_PATH),
   routes: [
     {
       path: '/',

src/utilities.ts

@@ -1,6 +1,6 @@
-import { getBrowserLanguage, type AvailableLocale } from '@/i18n'
 import type { UseHeadInput } from '@unhead/vue'
 import { useDark, useLocalStorage } from '@vueuse/core'
+import { type AvailableLocale } from './constants'
 
 export const isDark = useDark({
   selector: 'body',
@@ -13,7 +13,7 @@ export const isDark = useDark({
   },
 })
 
-export const selectedLocale = useLocalStorage<AvailableLocale>('locale', getBrowserLanguage(), {
+export const selectedLocale = useLocalStorage<AvailableLocale | null>('locale', null, {
   listenToStorageChanges: false,
 })