feat(SPA): i18n internationzalization, english and french

web/src/components/BulkDeleteMediaDialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaBadge from '@/components/MediaBadge.vue'
@@ -16,7 +18,7 @@ const props = defineProps<{
 const emit = defineEmits<{ close: [confirmed: boolean] }>()
 
 const total = computed(() => props.items.length)
-const imageLabel = computed(() => `${total.value} ${total.value === 1 ? 'image' : 'images'}`)
+const imageLabel = computed(() => t(total.value === 1 ? '{0} image' : '{0} images', [total.value]))
 const inUse = computed(() => props.items.filter((item) => item.used_in > 0))
 const articleCount = computed(() => inUse.value.reduce((sum, item) => sum + item.used_in, 0))
 const description = computed(() => {
@@ -25,28 +27,34 @@ const description = computed(() => {
 	const articles = pluralArticles(articleCount.value)
 	if (usedCount === 0) {
 		return total.value === 1
-			? `It isn't used in any article. ${FINAL_WARNING}`
-			: `None of them are used in any article. ${FINAL_WARNING}`
+			? t("It isn't used in any article. {0}", [t(FINAL_WARNING)])
+			: t('None of them are used in any article. {0}', [t(FINAL_WARNING)])
 	}
 	if (unusedCount === 0) {
-		const subject = total.value === 1 ? "It's" : `All ${total.value} are`
-		return `${subject} used in ${articles}, ${BROKEN_IMAGE} ${FINAL_WARNING}`
+		const subject = total.value === 1 ? t("It's") : t('All {0} are', [total.value])
+		return t('{0} used in {1}, {2} {3}', [subject, articles, t(BROKEN_IMAGE), t(FINAL_WARNING)])
 	}
 	const rest =
 		unusedCount === 1
-			? "The other one isn't used anywhere."
-			: `The other ${unusedCount} aren't used anywhere.`
-	return `${usedCount} of them are used in ${articles}, ${BROKEN_IMAGE} ${rest} ${FINAL_WARNING}`
+			? t("The other one isn't used anywhere.")
+			: t("The other {0} aren't used anywhere.", [unusedCount])
+	return t('{0} of them are used in {1}, {2} {3} {4}', [
+		usedCount,
+		articles,
+		t(BROKEN_IMAGE),
+		rest,
+		t(FINAL_WARNING),
+	])
 })
 </script>
 
 <template>
 	<ConfirmDialog
-		:title="`Delete ${imageLabel}?`"
+		:title="t('Delete {0}?', [imageLabel])"
 		:description="description"
-		:confirm-label="`Delete ${imageLabel}`"
-		cancel-label="Cancel"
-		pending-label="Deleting…"
+		:confirm-label="t('Delete {0}', [imageLabel])"
+		:cancel-label="t('Cancel')"
+		:pending-label="t('Deleting…')"
 		tone="danger"
 		:action="action"
 		@close="emit('close', $event)"
@@ -66,9 +74,9 @@ const description = computed(() => {
 					<MediaBadge
 						v-if="item.used_in > 0"
 						kind="used"
-						:label="`Used in ${item.used_in}`"
+						:label="t('Used in {0}', [item.used_in])"
 					/>
-					<MediaBadge v-else kind="unused" label="Unused" />
+					<MediaBadge v-else kind="unused" :label="t('Unused')" />
 				</li>
 			</ul>
 		</template>