feat(SPA): i18n internationzalization, english and french

web/src/components/DeleteMediaDialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
@@ -15,12 +17,18 @@ const emit = defineEmits<{ close: [confirmed: boolean] }>()
 
 const inUse = computed(() => props.item.used_in > 0)
 const title = computed(() =>
-	inUse.value ? "Delete an image that's in use?" : 'Delete this image?',
+	inUse.value ? t("Delete an image that's in use?") : t('Delete this image?'),
 )
 const description = computed(() =>
 	inUse.value
-		? `"${props.item.filename}" is used in ${pluralArticles(props.item.used_in)}. If you delete it, they will show a broken image. This can't be undone.`
-		: `"${props.item.filename}" will be deleted from your library. No article uses it. This can't be undone.`,
+		? t(
+				"\u0022{0}\u0022 is used in {1}. If you delete it, they will show a broken image. This can't be undone.",
+				[props.item.filename, pluralArticles(props.item.used_in)],
+			)
+		: t(
+				"\u0022{0}\u0022 will be deleted from your library. No article uses it. This can't be undone.",
+				[props.item.filename],
+			),
 )
 </script>
 
@@ -28,9 +36,9 @@ const description = computed(() =>
 	<ConfirmDialog
 		:title="title"
 		:description="description"
-		confirm-label="Delete image"
-		cancel-label="Cancel"
-		pending-label="Deleting…"
+		:confirm-label="t('Delete image')"
+		:cancel-label="t('Cancel')"
+		:pending-label="t('Deleting…')"
 		tone="danger"
 		:action="action"
 		@close="emit('close', $event)"