feat(SPA): i18n internationzalization, english and french

web/src/components/UpdateBanner.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 
 export type UpdateBannerState = 'available' | 'ready'
@@ -11,14 +13,23 @@ const props = defineProps<{
 const COPY = {
 	available: {
 		icon: 'i-lucide-circle-arrow-up',
-		title: (version: string) => `Version ${version} is available`,
-		description: 'Update it from Settings. It takes about 2 minutes and the site stays online.',
+		get title() {
+			return (version: string) => t('Version {0} is available', [version])
+		},
+		get description() {
+			return t('Update it from Settings. It takes about 2 minutes and the site stays online.')
+		},
 	},
 	ready: {
 		icon: 'i-lucide-circle-check',
-		title: (version: string) => `Version ${version} is ready to install`,
-		description:
-			'Restart from Settings to finish. The site is unavailable for about 10 seconds.',
+		get title() {
+			return (version: string) => t('Version {0} is ready to install', [version])
+		},
+		get description() {
+			return t(
+				'Restart from Settings to finish. The site is unavailable for about 10 seconds.',
+			)
+		},
 	},
 } as const
 
@@ -33,7 +44,7 @@ const emit = defineEmits<{
 <template>
 	<UAlert
 		role="region"
-		aria-label="Update available"
+		:aria-label="t('Update available')"
 		color="info"
 		variant="soft"
 		orientation="horizontal"
@@ -56,13 +67,13 @@ const emit = defineEmits<{
 					class="h-11 flex-1 justify-center border border-accented bg-default px-3 text-highlighted ring-0 md:h-8 md:flex-none"
 					@click="emit('go-to-settings')"
 				>
-					Go to Settings
+					{{ t('Go to Settings') }}
 				</UButton>
 				<UButton
 					color="neutral"
 					variant="ghost"
 					icon="i-lucide-x"
-					aria-label="Dismiss"
+					:aria-label="t('Dismiss')"
 					class="size-11 shrink-0 justify-center text-muted md:size-8"
 					:ui="{ leadingIcon: 'size-4' }"
 					@click="emit('dismiss')"