feat(SPA): i18n internationzalization, english and french

web/src/components/MediaUploadPanel.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { UploadRow } from '@/composables/useMediaUpload'
 import { formatUploadProgress } from '@/lib/imageUpload'
@@ -48,7 +50,7 @@ function percent(row: UploadRow) {
 <template>
 	<section
 		data-testid="media-upload-panel"
-		aria-label="Uploads"
+		:aria-label="t('Uploads')"
 		class="flex flex-col border border-default bg-default"
 	>
 		<div class="flex items-center gap-3 px-3.5 py-3">
@@ -64,7 +66,7 @@ function percent(row: UploadRow) {
 				class="h-11 border border-accented bg-default px-3 text-xs text-highlighted ring-0 md:h-7"
 				@click="header.phase === 'working' ? emit('cancel-all') : emit('dismiss')"
 			>
-				{{ header.phase === 'working' ? 'Cancel all' : 'Dismiss' }}
+				{{ header.phase === 'working' ? t('Cancel all') : t('Dismiss') }}
 			</UButton>
 		</div>
 
@@ -83,7 +85,7 @@ function percent(row: UploadRow) {
 				</div>
 
 				<template v-if="row.status === 'waiting'">
-					<span class="text-muted">Waiting</span>
+					<span class="text-muted">{{ t('Waiting') }}</span>
 				</template>
 
 				<template v-else-if="row.status === 'uploading'">
@@ -91,19 +93,22 @@ function percent(row: UploadRow) {
 					<UProgress
 						:model-value="percent(row)"
 						size="sm"
-						:ui="{ base: 'rounded-none', indicator: 'rounded-none' }"
+						:ui="{
+							base: 'rounded-none',
+							indicator: 'rounded-none',
+						}"
 					/>
 				</template>
 
 				<template v-else-if="row.status === 'added'">
 					<span class="flex items-center gap-1.5 text-success">
 						<UIcon name="i-lucide-circle-check" class="size-3.5 shrink-0" />
-						{{ ADDED_TEXT }}
+						{{ t(ADDED_TEXT) }}
 					</span>
 				</template>
 
 				<template v-else-if="row.status === 'duplicate' && row.existing">
-					<span class="font-semibold text-highlighted">{{ DUPLICATE_TITLE }}</span>
+					<span class="font-semibold text-highlighted">{{ t(DUPLICATE_TITLE) }}</span>
 					<span class="text-xs/5 text-toned">{{
 						duplicateText(row.existing, formatMediaDate)
 					}}</span>
@@ -114,7 +119,7 @@ function percent(row: UploadRow) {
 							:class="BUTTON"
 							@click="emit('use-existing', row.key)"
 						>
-							Use existing
+							{{ t('Use existing') }}
 						</UButton>
 						<UButton
 							color="neutral"
@@ -122,7 +127,7 @@ function percent(row: UploadRow) {
 							:class="BUTTON"
 							@click="emit('upload-anyway', row.key)"
 						>
-							Upload anyway
+							{{ t('Upload anyway') }}
 						</UButton>
 					</div>
 				</template>
@@ -138,9 +143,9 @@ function percent(row: UploadRow) {
 				<template v-else-if="row.status === 'failed'">
 					<span class="flex items-center gap-1.5 font-semibold text-error">
 						<UIcon name="i-lucide-circle-x" class="size-3.5 shrink-0" />
-						{{ FAILED_TITLE }}
+						{{ t(FAILED_TITLE) }}
 					</span>
-					<span class="text-xs/5 text-toned">{{ FAILED_TEXT }}</span>
+					<span class="text-xs/5 text-toned">{{ t(FAILED_TEXT) }}</span>
 					<div class="flex">
 						<UButton
 							color="neutral"
@@ -150,7 +155,7 @@ function percent(row: UploadRow) {
 							:ui="{ leadingIcon: 'size-3.5' }"
 							@click="emit('retry', row.key)"
 						>
-							Try again
+							{{ t('Try again') }}
 						</UButton>
 					</div>
 				</template>
@@ -160,7 +165,7 @@ function percent(row: UploadRow) {
 				color="neutral"
 				variant="ghost"
 				icon="i-lucide-x"
-				:aria-label="`Cancel upload of ${row.name}`"
+				:aria-label="t('Cancel upload of {0}', [row.name])"
 				class="size-6 justify-center text-muted"
 				:ui="{ leadingIcon: 'size-3.5' }"
 				@click="emit('cancel-row', row.key)"