feat(SPA): i18n internationzalization, english and french

web/src/components/ArticleStatusBadge.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 withDefaults(
 	defineProps<{
 		online: boolean
@@ -21,10 +23,10 @@ withDefaults(
 		:class="size === 'lg' ? undefined : 'px-2'"
 		:ui="{ leadingIcon: 'animate-spin' }"
 	>
-		{{ pending === 'publish' ? 'Publishing…' : 'Unpublishing…' }}
+		{{ pending === 'publish' ? t('Publishing…') : t('Unpublishing…') }}
 	</UBadge>
 	<UBadge v-else-if="online" color="neutral" variant="solid" icon="i-lucide-globe" :size="size">
-		Online
+		{{ t('Online') }}
 	</UBadge>
 	<UBadge
 		v-else
@@ -34,6 +36,6 @@ withDefaults(
 		:size="size"
 		:class="size === 'lg' ? undefined : 'px-2'"
 	>
-		Draft
+		{{ t('Draft') }}
 	</UBadge>
 </template>