feat(SPA): i18n internationzalization, english and french

web/src/components/ArticleCardList.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { useRouter } from 'vue-router'
 import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
 import { formatRelativeDate } from '@/lib/relativeDate'
@@ -39,12 +41,16 @@ function actionsFor(article: Article) {
 	return [
 		[
 			{
-				label: 'Edit',
+				get label() {
+					return t('Edit')
+				},
 				icon: 'i-lucide-pencil',
 				onSelect: () => router.push(editPath(article)),
 			},
 			{
-				label: article.is_online ? 'Unpublish' : 'Publish',
+				get label() {
+					return article.is_online ? t('Unpublish') : t('Publish')
+				},
 				icon: article.is_online ? 'i-lucide-globe-lock' : 'i-lucide-globe',
 				disabled: isBusy(article),
 				onSelect: () => {
@@ -56,14 +62,18 @@ function actionsFor(article: Article) {
 				},
 			},
 			{
-				label: 'Copy API URL',
+				get label() {
+					return t('Copy API URL')
+				},
 				icon: 'i-lucide-link',
 				onSelect: () => emit('copy-url', article.id),
 			},
 		],
 		[
 			{
-				label: 'Delete…',
+				get label() {
+					return t('Delete…')
+				},
 				icon: 'i-lucide-trash-2',
 				color: 'error' as const,
 				onSelect: () => emit('delete', article),
@@ -122,7 +132,8 @@ function onRowClick(article: Article, event: MouseEvent) {
 							:pending="pendingFor(article)"
 						/>
 						<span :title="article.updated_at"
-							>Updated {{ formatRelativeDate(article.updated_at, now) }}</span
+							>{{ t('Updated') }}
+							{{ formatRelativeDate(article.updated_at, now) }}</span
 						>
 					</div>
 				</div>
@@ -135,7 +146,7 @@ function onRowClick(article: Article, event: MouseEvent) {
 						icon="i-lucide-ellipsis-vertical"
 						color="neutral"
 						variant="ghost"
-						:aria-label="`Actions for ${article.title}`"
+						:aria-label="t('Actions for {0}', [article.title])"
 						class="size-11 justify-center text-toned"
 						@click.stop
 					/>