feat(SPA): i18n internationzalization, english and french

web/src/components/MediaDetailPanel.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
 import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
@@ -47,11 +49,36 @@ const metadata = computed(() => {
 		return []
 	}
 	return [
-		{ label: 'Type', value: formatType(item.content_type) },
-		{ label: 'Size', value: formatSize(item.size) },
-		{ label: 'Dimensions', value: formatDimensions(item.width, item.height) },
-		{ label: 'Uploaded', value: formatMediaDate(item.created_at) },
-		{ label: 'Uploaded by', value: item.uploaded_by },
+		{
+			get label() {
+				return t('Type')
+			},
+			value: formatType(item.content_type),
+		},
+		{
+			get label() {
+				return t('Size')
+			},
+			value: formatSize(item.size),
+		},
+		{
+			get label() {
+				return t('Dimensions')
+			},
+			value: formatDimensions(item.width, item.height),
+		},
+		{
+			get label() {
+				return t('Uploaded')
+			},
+			value: formatMediaDate(item.created_at),
+		},
+		{
+			get label() {
+				return t('Uploaded by')
+			},
+			value: item.uploaded_by,
+		},
 	]
 })
 
@@ -63,8 +90,18 @@ const duplicateAlert = computed(() => {
 	}
 	const names = props.copies.map((copy) => copy.filename)
 	return {
-		title: `Identical to ${props.copies.length} other ${props.copies.length === 1 ? 'image' : 'images'}`,
-		description: `${joinNames(names)} ${names.length === 1 ? 'has' : 'have'} the same content.`,
+		get title() {
+			return t('Identical to {0} other {1}', [
+				props.copies.length,
+				props.copies.length === 1 ? 'image' : 'images',
+			])
+		},
+		get description() {
+			return t('{0} {1} the same content.', [
+				joinNames(names),
+				names.length === 1 ? 'has' : 'have',
+			])
+		},
 	}
 })
 </script>
@@ -74,7 +111,7 @@ const duplicateAlert = computed(() => {
 		v-model:open="open"
 		side="right"
 		:title="item?.filename ?? ''"
-		description="Image details"
+		:description="t('Image details')"
 		:close="closeButton"
 		:ui="{
 			content: 'w-full max-w-none md:max-w-115',
@@ -102,7 +139,7 @@ const duplicateAlert = computed(() => {
 						:class="ACTION_BUTTON"
 						@click="emit('copy-url')"
 					>
-						Copy URL
+						{{ t('Copy URL') }}
 					</UButton>
 					<UButton
 						color="neutral"
@@ -112,7 +149,7 @@ const duplicateAlert = computed(() => {
 						:class="ACTION_BUTTON"
 						@click="emit('rename')"
 					>
-						Rename
+						{{ t('Rename') }}
 					</UButton>
 					<UButton
 						color="neutral"
@@ -123,7 +160,7 @@ const duplicateAlert = computed(() => {
 						class="text-error"
 						@click="emit('delete')"
 					>
-						Delete
+						{{ t('Delete') }}
 					</UButton>
 				</div>
 
@@ -149,7 +186,7 @@ const duplicateAlert = computed(() => {
 							:ui="{ leadingIcon: 'size-3.5' }"
 							@click="emit('review-duplicates')"
 						>
-							Review duplicates
+							{{ t('Review duplicates') }}
 						</UButton>
 					</template>
 				</UAlert>
@@ -169,8 +206,8 @@ const duplicateAlert = computed(() => {
 					<h3 class="text-base font-semibold text-highlighted">
 						{{
 							item.used_in > 0
-								? `Used in ${pluralArticles(item.used_in)}`
-								: 'Not used in any article'
+								? t('Used in {0}', [pluralArticles(item.used_in)])
+								: t('Not used in any article')
 						}}
 					</h3>
 					<template v-if="item.used_in > 0">
@@ -196,11 +233,15 @@ const duplicateAlert = computed(() => {
 							</li>
 						</ul>
 						<p class="text-xs text-muted">
-							Counted from the text of your articles each time you open this page.
+							{{
+								t(
+									'Counted from the text of your articles each time you open this page.',
+								)
+							}}
 						</p>
 					</template>
 					<p v-else class="text-muted">
-						This image is safe to delete. No article shows it.
+						{{ t('This image is safe to delete. No article shows it.') }}
 					</p>
 				</section>
 			</div>