feat(SPA): i18n internationzalization, english and french

web/src/components/DuplicateGroups.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { MediaItem } from '@/composables/useMedia'
 import type { DuplicateGroup } from '@/lib/mediaDuplicates'
@@ -18,8 +20,8 @@ const emit = defineEmits<{
 }>()
 
 function uploaded(copy: MediaItem) {
-	const by = copy.uploaded_by ? ` by ${copy.uploaded_by}` : ''
-	return `Uploaded ${formatMediaDate(copy.created_at)}${by}`
+	const by = copy.uploaded_by ? t(' by {0}', [copy.uploaded_by]) : ''
+	return t('Uploaded {0}{1}', [formatMediaDate(copy.created_at), by])
 }
 </script>
 
@@ -32,12 +34,14 @@ function uploaded(copy: MediaItem) {
 			class="border border-default bg-default"
 		>
 			<header class="flex flex-col gap-0.5 border-b border-default px-3.5 py-3">
-				<h3 class="font-semibold text-highlighted">Group {{ index + 1 }}</h3>
+				<h3 class="font-semibold text-highlighted">{{ t('Group') }} {{ index + 1 }}</h3>
 				<span class="text-muted">{{ group.header }}</span>
 			</header>
 			<div
 				class="grid md:grid-cols-(--columns) md:gap-4 md:p-4"
-				:style="{ '--columns': `repeat(${group.copies.length}, minmax(0, 1fr))` }"
+				:style="{
+					'--columns': `repeat(${group.copies.length}, minmax(0, 1fr))`,
+				}"
 			>
 				<div
 					v-for="copy in group.copies"
@@ -70,7 +74,7 @@ function uploaded(copy: MediaItem) {
 								<span
 									v-if="copy.id === group.suggested.id"
 									class="inline-flex h-5 items-center bg-primary px-1.5 text-xs font-medium text-inverted"
-									>Suggested</span
+									>{{ t('Suggested') }}</span
 								>
 							</div>
 							<span
@@ -88,7 +92,8 @@ function uploaded(copy: MediaItem) {
 								class="self-start font-medium underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
 								@click="emit('open', copy.id, $event.currentTarget as HTMLElement)"
 							>
-								Used in {{ pluralArticles(copy.used_in) }}
+								{{ t('Used in') }}
+								{{ pluralArticles(copy.used_in) }}
 							</button>
 						</div>
 					</div>
@@ -105,12 +110,12 @@ function uploaded(copy: MediaItem) {
 						"
 						@click="emit('merge', group, copy)"
 					>
-						Merge into this one
+						{{ t('Merge into this one') }}
 					</UButton>
 				</div>
 			</div>
 			<footer class="border-t border-default px-3.5 py-2.5 text-xs/5 text-muted">
-				{{ FOOTER }}
+				{{ t(FOOTER) }}
 			</footer>
 		</section>
 	</div>