From 0fddc054432758a6618aa65c12630ce62c911af0 Mon Sep 17 00:00:00 2001
From: neilchen0812 <neil.chentl@gmail.com>
Date: Mon, 21 Sep 2026 01:49:48 +0930
Subject: [PATCH] feat(i18n): implement language selector

---
 app/src/components/LanguageSelector.vue  | 26 ++++++++++++++++++++++++
 app/src/components/header/HeaderPart.vue |  8 +++++++-
 app/src/i18n/locales/en.json             |  8 +++++++-
 app/src/i18n/locales/zh-TW.json          |  8 +++++++-
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 app/src/components/LanguageSelector.vue

diff --git a/app/src/components/LanguageSelector.vue b/app/src/components/LanguageSelector.vue
new file mode 100644
index 0000000..86ee789
--- /dev/null
+++ b/app/src/components/LanguageSelector.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { setLocale, type SupportedLocale } from '../i18n'
+
+const { locale } = useI18n({ useScope: 'global' })
+
+function changeLanguage(event: Event) {
+  const selectedLocale = (event.target as HTMLSelectElement)
+    .value as SupportedLocale
+
+  setLocale(selectedLocale)
+}
+</script>
+
+<template>
+  <select
+    :value="locale"
+    class="bg-bg-secondary px-3 py-2 font-mono 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>
+  </select>
+</template>
diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 488698c..fba3fd6 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+import LanguageSelector from '../LanguageSelector.vue'
+
+const { t } = useI18n()
+
 defineProps({
   title: {
     type: String,
@@ -19,9 +24,10 @@ const toggleMenu = () => {
 </script>
 <template>
   <div
-    class="w-full top-0 px-5 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
+    class="w-full top-0 px-2 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
   >
     <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
+      <LanguageSelector />
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
       <RouterLink
         to="/"
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 0967ef4..920a106 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -1 +1,7 @@
-{}
+{
+  "language": {
+    "change": "Change language",
+    "traditionalChinese": "繁體中文",
+    "english": "English"
+  }
+}
diff --git a/app/src/i18n/locales/zh-TW.json b/app/src/i18n/locales/zh-TW.json
index 0967ef4..21f804f 100644
--- a/app/src/i18n/locales/zh-TW.json
+++ b/app/src/i18n/locales/zh-TW.json
@@ -1 +1,7 @@
-{}
+{
+  "language": {
+    "change": "切換語言",
+    "traditionalChinese": "繁體中文",
+    "english": "English"
+  }
+}