feat(SPA): i18n internationzalization, english and french

web/src/components/SaveStatus.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
@@ -36,24 +38,24 @@ function formatClock(date: Date) {
 function formatElapsed(diffMs: number) {
 	const minutes = Math.floor(diffMs / MINUTE_MS)
 	if (minutes < 60) {
-		return `${minutes} min`
+		return t('{0} min', [minutes])
 	}
 	const hours = Math.floor(minutes / 60)
 	if (hours < 24) {
-		return `${hours} h`
+		return t('{0} h', [hours])
 	}
-	return `${Math.floor(hours / 24)} d`
+	return t('{0} d', [Math.floor(hours / 24)])
 }
 
 const savedText = computed(() => {
 	if (!props.savedAt) {
-		return 'Saved'
+		return t('Saved')
 	}
 	const diffMs = now.value - props.savedAt.getTime()
 	if (diffMs < HOUR_MS) {
-		return `Saved at ${formatClock(props.savedAt)}`
+		return t('Saved at {0}', [formatClock(props.savedAt)])
 	}
-	return `Saved ${formatElapsed(diffMs)} ago`
+	return t('Saved {0} ago', [formatElapsed(diffMs)])
 })
 </script>
 
@@ -73,15 +75,15 @@ const savedText = computed(() => {
 		</template>
 		<template v-else-if="state === 'dirty'">
 			<UIcon name="i-lucide-circle-dot" class="size-3.5" />
-			<span>Unsaved changes</span>
+			<span>{{ t('Unsaved changes') }}</span>
 		</template>
 		<template v-else-if="state === 'saving'">
 			<UIcon name="i-lucide-loader-circle" class="size-3.5 animate-spin" />
-			<span>Saving…</span>
+			<span>{{ t('Saving…') }}</span>
 		</template>
 		<template v-else-if="state === 'error'">
 			<UIcon name="i-lucide-circle-alert" class="size-3.5" />
-			<span>Save failed</span>
+			<span>{{ t('Save failed') }}</span>
 			<UButton
 				size="xs"
 				color="neutral"
@@ -90,12 +92,12 @@ const savedText = computed(() => {
 				class="h-6 gap-1 px-2 text-xs text-highlighted"
 				@click="$emit('retry')"
 			>
-				Retry
+				{{ t('Retry') }}
 			</UButton>
 		</template>
 		<template v-else-if="state === 'offline'">
 			<UIcon name="i-lucide-wifi-off" class="size-3.5" />
-			<span>Waiting for connection</span>
+			<span>{{ t('Waiting for connection') }}</span>
 		</template>
 	</span>
 </template>