feat(SPA): i18n internationzalization, english and french

web/src/components/RestartOverlay.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import AppLogo from '@/components/AppLogo.vue'
 import type { RestartKind } from '@/composables/useUpdate'
@@ -21,19 +23,37 @@ const emit = defineEmits<{
 const copy = computed(() => {
 	if (props.slow) {
 		return {
-			title: 'Still restarting',
-			text: 'This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now.',
+			get title() {
+				return t('Still restarting')
+			},
+			get text() {
+				return t(
+					'This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now.',
+				)
+			},
 		}
 	}
 	if (props.kind === 'update') {
 		return {
-			title: `Installing version ${props.version}`,
-			text: 'Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back.',
+			get title() {
+				return t('Installing version {0}', [props.version])
+			},
+			get text() {
+				return t(
+					'Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back.',
+				)
+			},
 		}
 	}
 	return {
-		title: 'Restarting your site',
-		text: 'This takes about 10 seconds. This page reloads on its own when the site is back.',
+		get title() {
+			return t('Restarting your site')
+		},
+		get text() {
+			return t(
+				'This takes about 10 seconds. This page reloads on its own when the site is back.',
+			)
+		},
 	}
 })
 
@@ -62,7 +82,7 @@ const meta = computed(() =>
 			</div>
 			<div
 				role="progressbar"
-				aria-label="Restarting"
+				:aria-label="t('Restarting')"
 				class="h-1 w-full overflow-hidden bg-accented"
 			>
 				<div class="restart-bar h-1 w-7/20 bg-primary" />
@@ -75,7 +95,7 @@ const meta = computed(() =>
 				class="h-11 gap-1.5 border border-accented bg-default px-3.5 text-highlighted ring-0 md:h-8"
 				@click="emit('reload')"
 			>
-				Reload page
+				{{ t('Reload page') }}
 			</UButton>
 		</div>
 	</div>