feat(SPA): i18n internationzalization, english and french

web/src/components/AccountMenuSheet.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { ref } from 'vue'
 import type { ColorModePreference } from '@/composables/useColorMode'
 import { colorModeOptions, useAccountMenu } from '@/composables/useAccountMenu'
+import LanguagePicker from '@/components/LanguagePicker.vue'
 
-const ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"]'
+const ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="combobox"]'
 const ITEM_CLASS = 'h-12 justify-start gap-3 px-4 text-[0.9375rem] text-highlighted'
 
 const props = defineProps<{
@@ -43,6 +46,7 @@ function logOut() {
 }
 
 function moveFocus(event: KeyboardEvent) {
+	if ((event.target as HTMLElement).closest('[role="combobox"]')) return
 	const items = Array.from(menu.value?.querySelectorAll<HTMLElement>(ITEM_SELECTOR) ?? [])
 	if (items.length === 0) {
 		return
@@ -68,8 +72,8 @@ function moveFocus(event: KeyboardEvent) {
 	<USlideover
 		v-model:open="open"
 		side="bottom"
-		title="Account"
-		description="Your account menu"
+		:title="t('Account')"
+		:description="t('Your account menu')"
 		:close="false"
 		:ui="{
 			content: 'max-h-none',
@@ -78,7 +82,13 @@ function moveFocus(event: KeyboardEvent) {
 		}"
 	>
 		<template #body>
-			<div ref="menu" role="menu" aria-label="Account" class="pt-2 pb-6" @keydown="moveFocus">
+			<div
+				ref="menu"
+				role="menu"
+				:aria-label="t('Account')"
+				class="pt-2 pb-6"
+				@keydown="moveFocus"
+			>
 				<div class="mx-auto mb-2 h-1 w-9 bg-accented" aria-hidden="true" />
 				<div class="mb-1 flex items-center gap-3 border-b border-default px-4 pt-2 pb-3.5">
 					<UAvatar
@@ -107,9 +117,11 @@ function moveFocus(event: KeyboardEvent) {
 					:ui="{ leadingIcon: 'size-4.5' }"
 					@click="goToProfile"
 				>
-					Profile
+					{{ t('Profile') }}
 				</UButton>
 
+				<USeparator class="my-1" />
+				<LanguagePicker mobile />
 				<USeparator class="my-1" />
 
 				<UButton
@@ -142,7 +154,7 @@ function moveFocus(event: KeyboardEvent) {
 					:ui="{ leadingIcon: 'size-4.5' }"
 					@click="logOut"
 				>
-					Log out
+					{{ t('Log out') }}
 				</UButton>
 			</div>
 		</template>