feat(SPA): i18n internationzalization, english and french

web/src/components/UsersTable.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
 import RoleBadge from '@/components/RoleBadge.vue'
 import UserRowAction from '@/components/UserRowAction.vue'
@@ -37,18 +39,18 @@ function rowKey(item: UserListItem) {
 <template>
 	<div class="border border-default bg-default" :aria-busy="loading ? 'true' : undefined">
 		<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
-			<span>Email</span>
-			<span>Display name</span>
-			<span>Role</span>
-			<span>Invite status</span>
+			<span>{{ t('Email') }}</span>
+			<span>{{ t('Display name') }}</span>
+			<span>{{ t('Role') }}</span>
+			<span>{{ t('Invite status') }}</span>
 			<span class="flex items-center gap-1 text-highlighted">
-				Created
+				{{ t('Created') }}
 				<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
 			</span>
 			<span></span>
 		</div>
 		<template v-if="loading">
-			<span role="status" class="sr-only">Loading users</span>
+			<span role="status" class="sr-only">{{ t('Loading users') }}</span>
 			<div
 				v-for="n in USER_SKELETON_ROWS"
 				:key="n"