feat(SPA): i18n internationzalization, english and french

web/src/components/RenameMediaDialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed, ref } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import type { MediaItem } from '@/composables/useMedia'
@@ -18,10 +20,10 @@ const stem = ref(parts.stem)
 const touched = ref(false)
 
 const error = computed(() =>
-	touched.value && !isValidFilenameStem(stem.value) ? INVALID_FILENAME_MESSAGE : undefined,
+	touched.value && !isValidFilenameStem(stem.value) ? t(INVALID_FILENAME_MESSAGE) : undefined,
 )
-const help = computed(
-	() => `Letters, numbers, dashes and underscores. The ${parts.extension} ending stays.`,
+const help = computed(() =>
+	t('Letters, numbers, dashes and underscores. The {0} ending stays.', [parts.extension]),
 )
 
 async function submit() {
@@ -35,11 +37,15 @@ async function submit() {
 
 <template>
 	<ConfirmDialog
-		title="Rename image"
-		description="Only the filename changes. The URL stays the same, so articles that use this image keep working."
-		confirm-label="Rename"
-		cancel-label="Cancel"
-		pending-label="Renaming…"
+		:title="t('Rename image')"
+		:description="
+			t(
+				'Only the filename changes. The URL stays the same, so articles that use this image keep working.',
+			)
+		"
+		:confirm-label="t('Rename')"
+		:cancel-label="t('Cancel')"
+		:pending-label="t('Renaming…')"
 		tone="neutral"
 		:action="submit"
 		@close="emit('close', $event)"
@@ -47,11 +53,14 @@ async function submit() {
 		<template #body="{ pending, confirm }">
 			<form class="flex flex-col" novalidate @submit.prevent="confirm">
 				<UFormField
-					label="Filename"
+					:label="t('Filename')"
 					name="filename"
 					:error="error"
 					:help="help"
-					:ui="{ error: 'mt-1.5 text-xs/5', help: 'mt-1.5 text-xs/5' }"
+					:ui="{
+						error: 'mt-1.5 text-xs/5',
+						help: 'mt-1.5 text-xs/5',
+					}"
 				>
 					<template v-if="error" #error="{ error: message }">
 						<span class="flex items-center gap-1.5">