added i18n, english and french for now

src/pages/AccountPage.vue

@@ -1,36 +1,53 @@
 <template>
   <div class="account-page">
-    <h1>Your Account</h1>
+    <h1>{{ $t('account-title') }}</h1>
 
     <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
 
     <div v-if="user" class="info-card">
-      <button class="update-btn" @click="showUpdateModal = true">Update</button>
-      <p><strong>Username:</strong> {{ user.username }}</p>
-      <p><strong>Email:</strong> {{ user.email }}</p>
+      <button class="update-btn" @click="showUpdateModal = true">{{ $t('account-update-btn') }}</button>
+      <p><strong>{{ $t('account-label-username') }}</strong> {{ user.username }}</p>
+      <p><strong>{{ $t('account-label-email') }}</strong> {{ user.email }}</p>
     </div>
     <div v-else class="loading-state">
-      <p>Loading account details...</p>
+      <p>{{ $t('account-loading') }}</p>
+    </div>
+
+    <div class="input-group">
+      <span>{{ $t('account-language') }}</span>
+      <div class="lang-grid">
+        <button v-for="lang in languages" :key="lang.code" class="lang-btn"
+          :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
+          {{ lang.name }}
+        </button>
+      </div>
     </div>
 
     <button class="logout-btn" @click="logout">
       <i class="fa-solid fa-right-from-bracket"></i>
-      <span>Logout</span>
+      <span>{{ $t('account-logout-btn') }}</span>
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { logout as authLogout } from '../store.ts'
 import { getAuthData } from "../authStore.ts"
 import type { User } from "../types"
 import UpdateAccountModal from '../components/UpdateAccountModal.vue'
+import { useFluent } from 'fluent-vue'
+import { saveLocalePreference, getLocalePreference } from "../authStore.ts"
+import { getSupportedLanguagesMetadata, setLanguage } from '../i18n'
 
 const router = useRouter()
 const user = ref<User | null>(null)
 const showUpdateModal = ref(false)
+const { $t } = useFluent()
+const currentLang = ref('')
+
+const languages = computed(() => getSupportedLanguagesMetadata())
 
 async function fetchUserData() {
   try {
@@ -41,7 +58,19 @@ async function fetchUserData() {
   }
 }
 
-onMounted(fetchUserData)
+onMounted(async () => {
+  const pref = await getLocalePreference()
+  // Synchronize the UI state with the actual active language
+  currentLang.value = pref || (navigator.language.split('-')[0])
+
+  fetchUserData()
+})
+
+async function changeLanguage(code: string) {
+  const actual = setLanguage(code)
+  currentLang.value = actual
+  await saveLocalePreference(actual)
+}
 
 function logout() {
   authLogout()
@@ -73,6 +102,26 @@ function logout() {
   top: 10px;
 }
 
+.lang-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.lang-btn {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  margin: 0;
+}
+
+.lang-btn.active {
+  background: var(--accent);
+  color: #000;
+  border-color: var(--accent);
+}
+
 .logout-btn {
   cursor: pointer;
   display: flex;