fix(stage-*): language switch not working

apps/stage-tamagotchi/src/App.vue

@@ -25,8 +25,8 @@ useEventListener(window, 'resize', () => {
   windowControlStore.size.height = window.innerHeight
 })
 
-watch(language, (language) => {
-  i18n.locale.value = language
+watch(language, () => {
+  i18n.locale.value = language.value
 })
 
 // FIXME: store settings to file

apps/stage-tamagotchi/src/modules/i18n.ts

@@ -2,24 +2,33 @@ import messages from '@proj-airi/i18n/locales'
 
 import { createI18n } from 'vue-i18n'
 
+const languageRemap: Record<string, string> = {
+  'zh-CN': 'zh-Hans',
+  'zh-TW': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-HK': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-Hant': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'en-US': 'en',
+  'en-GB': 'en',
+  'en-AU': 'en',
+  'en': 'en',
+}
+
+function getLocale() {
+  let language = localStorage.getItem('settings/language')
+  const languages = Object.keys(messages!)
+
+  if (languageRemap[language || 'en'] != null) {
+    language = languageRemap[language || 'en']
+  }
+  if (language && languages.includes(language))
+    return language
+
+  return 'en'
+}
+
 export const i18n = createI18n({
   legacy: false,
   locale: getLocale(),
   fallbackLocale: 'en',
   messages,
 })
-
-function getLocale() {
-  const language = localStorage.getItem('settings/language')
-  const languages = Object.keys(messages!)
-
-  if (language && languages.includes(language))
-    return language
-
-  // let locale = navigator.language
-
-  // if (locale === 'zh')
-  //   locale = 'zh-CN'
-
-  return 'en'
-}

apps/stage-web/src/modules/i18n.ts

@@ -2,24 +2,33 @@ import messages from '@proj-airi/i18n/locales'
 
 import { createI18n } from 'vue-i18n'
 
+const languageRemap: Record<string, string> = {
+  'zh-CN': 'zh-Hans',
+  'zh-TW': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-HK': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-Hant': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'en-US': 'en',
+  'en-GB': 'en',
+  'en-AU': 'en',
+  'en': 'en',
+}
+
+function getLocale() {
+  let language = localStorage.getItem('settings/language')
+  const languages = Object.keys(messages!)
+
+  if (languageRemap[language || 'en'] != null) {
+    language = languageRemap[language || 'en']
+  }
+  if (language && languages.includes(language))
+    return language
+
+  return 'en'
+}
+
 export const i18n = createI18n({
   legacy: false,
   locale: getLocale(),
   fallbackLocale: 'en',
   messages,
 })
-
-function getLocale() {
-  const language = localStorage.getItem('settings/language')
-  const languages = Object.keys(messages!)
-
-  if (language && languages.includes(language))
-    return language
-
-  // let locale = navigator.language
-
-  // if (locale === 'zh')
-  //   locale = 'zh-CN'
-
-  return 'en'
-}

apps/stage-web/src/pages/settings/appearance/general.vue

@@ -41,10 +41,10 @@ const dark = useDark()
       transition="all ease-in-out duration-250"
       cursor-pointer bg-transparent text-right outline-none
     >
-      <option value="en-US">
+      <option value="en">
         {{ $t('settings.language.english') }}
       </option>
-      <option value="zh-CN">
+      <option value="zh-Hans">
         {{ $t('settings.language.chinese') }}
       </option>
     </select>

packages/stage-ui/src/stores/settings.ts

@@ -11,7 +11,7 @@ const getHueFrom = (color?: string) => color ? convert(color)?.h : DEFAULT_THEME
 export const useSettings = defineStore('settings', () => {
   const selectedAudioDevice = ref<MediaDeviceInfo>()
 
-  const language = useLocalStorage('settings/language', 'en-US')
+  const language = useLocalStorage('settings/language', 'en')
   const stageView = useLocalStorage('settings/stage/view/model-renderer', '2d')
 
   const isAudioInputOn = useLocalStorage('settings/audio/input', 'false')