feat(SPA): i18n internationzalization, english and french

web/src/components/MediaBulkBar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t, formatNumber } from '@/i18n'
+
 import { computed } from 'vue'
 import { useElementBounding, useMediaQuery } from '@vueuse/core'
 
@@ -24,14 +26,14 @@ const centre = computed(() => `${content.left.value + content.width.value / 2}px
 <template>
 	<div
 		role="region"
-		aria-label="Selection"
+		:aria-label="t('Selection')"
 		data-testid="media-bulk-bar"
 		class="fixed bottom-4 z-(--z-banner) flex items-center gap-2 bg-inverted py-2 pr-2 pl-4 text-inverted shadow-(--shadow-popover) max-md:inset-x-4 md:bottom-6 md:left-(--bulk-centre) md:w-100 md:-translate-x-1/2"
 		:class="{ invisible: obscured }"
 		:inert="obscured || undefined"
 		:style="isDesktop ? { '--bulk-centre': centre } : undefined"
 	>
-		<span class="flex-1 font-medium">{{ count }} selected</span>
+		<span class="flex-1 font-medium">{{ formatNumber(count) }} {{ t('selected') }}</span>
 		<UButton
 			color="error"
 			icon="i-lucide-trash-2"
@@ -40,7 +42,7 @@ const centre = computed(() => `${content.left.value + content.width.value / 2}px
 			class="h-11 px-3 md:h-8"
 			@click="emit('delete')"
 		>
-			Delete
+			{{ t('Delete') }}
 		</UButton>
 		<UButton
 			color="neutral"
@@ -49,7 +51,7 @@ const centre = computed(() => `${content.left.value + content.width.value / 2}px
 			class="h-11 border border-(--ui-text-inverted) bg-transparent px-3 text-inverted ring-0 hover:bg-transparent md:h-8"
 			@click="emit('clear')"
 		>
-			Clear
+			{{ t('Clear') }}
 		</UButton>
 	</div>
 </template>