feat(SPA): i18n internationzalization, english and french

web/src/components/MediaEmptyState.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 
 const QUERY_MAX_LENGTH = 40
@@ -19,26 +21,40 @@ const current = computed(() => {
 	if (props.variant === 'first-run') {
 		return {
 			icon: 'i-lucide-images',
-			title: 'No images yet',
-			description: 'Upload your first image. You can use it in any article.',
-			action: 'Upload an image',
+			get title() {
+				return t('No images yet')
+			},
+			get description() {
+				return t('Upload your first image. You can use it in any article.')
+			},
+			action: t('Upload an image'),
 		}
 	}
 	if (props.variant === 'no-duplicates') {
 		return {
 			icon: 'i-lucide-copy',
-			title: 'No duplicates',
-			description: 'Every image in your library is different.',
-			action: 'Back to all images',
+			get title() {
+				return t('No duplicates')
+			},
+			get description() {
+				return t('Every image in your library is different.')
+			},
+			action: t('Back to all images'),
 		}
 	}
 	return {
 		icon: 'i-lucide-search',
-		title: truncatedQuery.value
-			? `No images match "${truncatedQuery.value}"`
-			: 'No images match this filter',
-		description: `Nothing matches in ${props.filterLabel ?? 'All'}. Check the spelling, or clear the filters.`,
-		action: 'Clear filters',
+		get title() {
+			return truncatedQuery.value
+				? t('No images match \u0022{0}\u0022', [truncatedQuery.value])
+				: t('No images match this filter')
+		},
+		get description() {
+			return t('Nothing matches in {0}. Check the spelling, or clear the filters.', [
+				props.filterLabel ?? t('All'),
+			])
+		},
+		action: t('Clear filters'),
 	}
 })
 </script>