feat(SPA): i18n internationzalization, english and french

web/src/components/MergeMediaDialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
@@ -15,21 +17,27 @@ const props = defineProps<{
 const emit = defineEmits<{ close: [confirmed: boolean] }>()
 
 const otherCount = computed(() => props.copies.length - 1)
-const others = computed(() => (otherCount.value === 1 ? 'copy' : `${otherCount.value} copies`))
+const others = computed(() =>
+	otherCount.value === 1 ? t('copy') : t('{0} copies', [otherCount.value]),
+)
 const articles = computed(() => mergeArticleCount(props.copies, props.keep.id))
-const description = computed(
-	() =>
-		`Articles that use the other ${others.value} will be switched to ${props.keep.filename}, and the other ${others.value} will be deleted. ${pluralArticles(articles.value)} will be updated. This can't be undone.`,
+const description = computed(() =>
+	t(
+		"Articles that use the other {0} will be switched to {1}, and the other {2} will be deleted. {3} will be updated. This can't be undone.",
+		[others.value, props.keep.filename, others.value, pluralArticles(articles.value)],
+	),
 )
 </script>
 
 <template>
 	<ConfirmDialog
-		:title="`Merge into ${keep.filename}?`"
+		:title="t('Merge into {0}?', [keep.filename])"
 		:description="description"
-		:confirm-label="`Merge ${otherCount === 1 ? '1 copy' : `${otherCount} copies`}`"
-		cancel-label="Cancel"
-		pending-label="Merging…"
+		:confirm-label="
+			t('Merge {0}', [otherCount === 1 ? t('1 copy') : t('{0} copies', [otherCount])])
+		"
+		:cancel-label="t('Cancel')"
+		:pending-label="t('Merging…')"
 		tone="danger"
 		:action="action"
 		@close="emit('close', $event)"
@@ -40,7 +48,8 @@ const description = computed(
 				<div class="flex min-w-0 flex-col">
 					<span class="truncate font-medium text-highlighted">{{ keep.filename }}</span>
 					<span class="text-xs/5 text-muted"
-						>Kept · used in {{ pluralArticles(keep.used_in) }} now</span
+						>{{ t('Kept · used in') }} {{ pluralArticles(keep.used_in) }}
+						{{ t('now') }}</span
 					>
 				</div>
 			</div>