feat(SPA): i18n internationzalization, english and french

web/src/composables/useAccountMenu.ts

@@ -1,3 +1,4 @@
+import { t } from '@/i18n'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useColorMode, type ColorModePreference } from '@/composables/useColorMode'
@@ -6,9 +7,24 @@ import { accountInitials, accountName } from '@/lib/accountName'
 const PROFILE_PATH = '/profile'
 
 export const colorModeOptions: { label: string; value: ColorModePreference }[] = [
-	{ label: 'System', value: 'system' },
-	{ label: 'Light', value: 'light' },
-	{ label: 'Dark', value: 'dark' },
+	{
+		get label() {
+			return t('System')
+		},
+		value: 'system',
+	},
+	{
+		get label() {
+			return t('Light')
+		},
+		value: 'light',
+	},
+	{
+		get label() {
+			return t('Dark')
+		},
+		value: 'dark',
+	},
 ]
 
 export function useAccountMenu(account: () => { username: string; displayName?: string }) {