feat(SPA): i18n internationzalization, english and french

web/src/components/MediaTable.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import MediaBadge from '@/components/MediaBadge.vue'
 import MediaCheckbox from '@/components/MediaCheckbox.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
@@ -44,19 +46,19 @@ function open(event: Event, id: number) {
 			<span class="flex justify-center">
 				<MediaCheckbox
 					size="sm"
-					label="Select all"
+					:label="t('Select all')"
 					:state="ALL_STATES[allState]"
 					@toggle="emit('toggle-all')"
 				/>
 			</span>
-			<span>Filename</span>
-			<span>Dimensions</span>
-			<span>Size</span>
-			<span>Type</span>
-			<span>Used in</span>
-			<span>Uploaded by</span>
+			<span>{{ t('Filename') }}</span>
+			<span>{{ t('Dimensions') }}</span>
+			<span>{{ t('Size') }}</span>
+			<span>{{ t('Type') }}</span>
+			<span>{{ t('Used in') }}</span>
+			<span>{{ t('Uploaded by') }}</span>
 			<span class="flex items-center gap-1 text-highlighted">
-				Uploaded
+				{{ t('Uploaded') }}
 				<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
 			</span>
 		</div>
@@ -77,7 +79,7 @@ function open(event: Event, id: number) {
 			<span class="relative z-10 flex justify-center">
 				<MediaCheckbox
 					size="sm"
-					:label="`Select ${item.filename}`"
+					:label="t('Select {0}', [item.filename])"
 					:state="selected.includes(item.id) ? 'checked' : 'unchecked'"
 					@toggle="emit('toggle', item.id)"
 				/>
@@ -94,7 +96,7 @@ function open(event: Event, id: number) {
 				>
 					{{ item.filename }}
 				</button>
-				<MediaBadge v-if="item.duplicate" kind="duplicate" label="Duplicate" />
+				<MediaBadge v-if="item.duplicate" kind="duplicate" :label="t('Duplicate')" />
 			</span>
 			<span>{{ formatDimensions(item.width, item.height) }}</span>
 			<span>{{ formatSize(item.size) }}</span>
@@ -109,7 +111,7 @@ function open(event: Event, id: number) {
 				>
 					{{ pluralArticles(item.used_in) }}
 				</button>
-				<MediaBadge v-else kind="unused" label="Unused" />
+				<MediaBadge v-else kind="unused" :label="t('Unused')" />
 			</span>
 			<span class="truncate pr-2">{{ item.uploaded_by }}</span>
 			<span>{{ formatMediaDate(item.created_at) }}</span>