feat: support changing quest language

app/src/components/header/LanguageSelector.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { setLocale, type SupportedLocale } from '../../i18n'
+import { setLocale } from '../../i18n'
+import type { QuestLocale } from '../../../../packages/constants'
+import {
+  SUPPORTED_LOCALES,
+  LOCALE_NAME_MAP,
+} from '../../../../packages/constants'
 
-const { locale } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
 
 function changeLanguage(event: Event) {
   const selectedLocale = (event.target as HTMLSelectElement)
-    .value as SupportedLocale
+    .value as QuestLocale
 
   setLocale(selectedLocale)
 }
@@ -15,12 +20,14 @@ function changeLanguage(event: Event) {
 <template>
   <select
     :value="locale"
+    :title="t('language.change')"
     class="bg-bg-secondary px-3 py-2 text-sm text-text shadow-md outline-none"
     aria-label="Language"
     @change="changeLanguage"
     style="font-size: 2vh"
   >
-    <option value="en">English</option>
-    <option value="zh-TW">繁體中文</option>
+    <option v-for="locale in SUPPORTED_LOCALES" :key="locale" :value="locale">
+      {{ LOCALE_NAME_MAP[locale] }}
+    </option>
   </select>
 </template>