refactor: use current browser lang as extension default lang on first installation

Author: NekoWings

tests/utils/fake-browser.ts

@@ -10,6 +10,7 @@ interface FakeBrowserOptions {
     usage: number
   }
   fakeAcceptedLanguages?: string[]
+  fakeUILanguage?: string
 }
 
 export function resetFakeBrowser(options: FakeBrowserOptions = {}) {
@@ -28,6 +29,7 @@ export function resetFakeBrowser(options: FakeBrowserOptions = {}) {
   // @ts-expect-error - for test env
   browser.i18n = {
     getAcceptLanguages: () => options.fakeAcceptedLanguages ?? ['en'],
+    getUILanguage: () => options.fakeUILanguage ?? 'en',
   }
 }
 

utils/i18n/browser-locale.ts

@@ -33,3 +33,16 @@ export async function getAcceptLanguages<L extends string>(languages: L[], fallb
   }
   return fallback
 }
+
+/**
+ * get current browser UI language, if matched, normalize and return it
+ * @returns the normalized browser locale string
+ */
+export function useCurrentBrowserLocale<L extends string>(languages: L[], fallback: L): L {
+  const currentLocale = browser.i18n.getUILanguage()
+  const normalizedLocale = normalizeLocale(currentLocale)
+  if (languages.includes(normalizedLocale as L)) {
+    return normalizedLocale as L
+  }
+  return fallback
+}

utils/i18n/index.ts

@@ -21,7 +21,7 @@ import { lazyInitialize } from '../memo'
 import { only } from '../runtime'
 import { JsonPaths } from '../type-utils'
 import { getUserConfig } from '../user-config'
-import { getAcceptLanguages } from './browser-locale'
+import { useCurrentBrowserLocale } from './browser-locale'
 import { SUPPORTED_LOCALES, SupportedLocaleCode } from './constants'
 
 // Type-define 'en-US' as the master schema for the resource
@@ -75,7 +75,7 @@ function formatDuration(t: ComposerTranslation, seconds: number) {
 export const createI18nInstance = lazyInitialize(async () => {
   const userConfig = await getUserConfig()
   const localeInConfig = userConfig?.locale.current.toRef()
-  const defaultLocale = localeInConfig.value ?? await getAcceptLanguages(SUPPORTED_LOCALES.map((l) => l.code), 'en')
+  const defaultLocale = localeInConfig.value ?? useCurrentBrowserLocale(SUPPORTED_LOCALES.map((l) => l.code), 'en')
 
   const i18n = createI18n<[MessageSchema], SupportedLocaleCode>({
     legacy: false,