add i18n

.vscode/settings.json

@@ -42,5 +42,9 @@
     },
     "debug.javascript.defaultRuntimeExecutable": {
         "pwa-node": "c:\\users\\quent\\appdata\\local\\mise\\shims\\node"
-    }
+    },
+    "i18n-ally.localesPaths": [
+        "src/shared/i18n"
+    ],
+    "i18n-ally.keystyle": "nested"
 }

package.json

@@ -115,6 +115,7 @@
     "valibot": "0.42.1",
     "vee-validate": "4.14.4",
     "vue-dompurify-html": "5.1.0",
+    "vue-i18n": "10",
     "web-worker": "1.3.0",
     "zod": "3.23.8"
   },

src/renderer/components/Settings.vue

@@ -2,11 +2,11 @@
   <div class="card">
     <Tabs value="0">
       <TabList>
-        <Tab value="0">General</Tab>
-        <Tab value="1">Storage</Tab>
-        <Tab value="2">Integrations</Tab>
-        <Tab value="3">Advanced</Tab>
-        <Tab v-if="user.is_anonymous === false" value="4">Billing</Tab>
+        <Tab value="0">{{ t('settings.tabs.general') }}</Tab>
+        <Tab value="1">{{ t('settings.tabs.storage') }}</Tab>
+        <Tab value="2">{{ t('settings.tabs.integrations') }}</Tab>
+        <Tab value="3">{{ t('settings.tabs.advanced') }}</Tab>
+        <Tab v-if="user.is_anonymous === false" value="4">{{ t('settings.tabs.billing') }}</Tab>
       </TabList>
       <TabPanels>
         <!-- General Tab -->
@@ -20,7 +20,23 @@
                   input-id="app-theme"
                   :model-value="false"
                 />
-                <label for="app-theme" class="label">Dark theme</label>
+                <label for="app-theme" class="label">{{ t('settings.darkTheme') }}</label>
+              </div>
+            </div>
+            <div class="field">
+              <div class="field-switch">
+                <div class="locale-changer">
+                  <select v-model="$i18n.locale">
+                    <option
+                      v-for="locale in $i18n.availableLocales"
+                      :key="`locale-${locale}`"
+                      :value="locale"
+                    >
+                      {{ locale }}
+                    </option>
+                  </select>
+                </div>
+                <label for="app-theme" class="label">Language</label>
               </div>
             </div>
           </div>
@@ -122,6 +138,15 @@ import { supabase } from '@@/supabase'
 import { useAuth } from '@renderer/store/auth'
 
 import { format } from 'date-fns'
+import { useI18n } from 'vue-i18n'
+import { MessageSchema } from '@@/i18n-utils'
+
+const { t } = useI18n<
+  {
+    message: MessageSchema
+  },
+  'en-US'
+>()
 
 const appSettings = useAppSettings()
 const api = useAPI()

src/renderer/main.ts

@@ -4,6 +4,7 @@ import { router } from './router/router'
 
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { createI18n } from 'vue-i18n'
 
 import PrimeVue from 'primevue/config'
 import Lara from '@primevue/themes/lara'
@@ -20,6 +21,7 @@ import ToastService from 'primevue/toastservice'
 import ConfirmationService from 'primevue/confirmationservice'
 import posthogPlugin from './plugins/posthog' //import the plugin.
 import posthog from 'posthog-js'
+import { en_US, fr_FR, MessageSchema } from '@@/i18n-utils'
 
 if (window.isPackaged && process.env.TEST !== 'true') {
   init(
@@ -41,6 +43,16 @@ if (window.isPackaged && process.env.TEST !== 'true') {
   )
 }
 
+const i18n = createI18n<[MessageSchema], 'en-US' | 'fr-FR'>({
+  legacy: false,
+  locale: 'en-US',
+  fallbackLocale: 'en-US',
+  messages: {
+    'en-US': en_US,
+    'fr-FR': fr_FR
+  }
+})
+
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
@@ -139,5 +151,6 @@ app.use(ConfirmationService)
 if (window.isPackaged && process.env.TEST !== 'true') {
   app.use(posthogPlugin)
 }
+app.use(i18n)
 
 app.mount('#app')

src/shared/i18n-utils.ts

@@ -0,0 +1,5 @@
+import en_US from './i18n/en_US.json'
+import fr_FR from './i18n/fr_FR.json'
+
+type MessageSchema = typeof en_US
+export { MessageSchema, en_US, fr_FR }

src/shared/i18n/en_US.json

@@ -0,0 +1,17 @@
+{
+  "settings": {
+    "darkTheme": "Dark theme",
+    "language": "Language",
+    "languageOptions": {
+      "en": "English",
+      "fr": "French"
+    },
+    "tabs": {
+      "general": "General",
+      "storage": "Storage",
+      "integrations": "Integrations",
+      "advanced": "Advanced",
+      "billing": "Billing"
+    }
+  }
+}

src/shared/i18n/fr_FR.json

@@ -0,0 +1,17 @@
+{
+  "settings": {
+    "darkTheme": "Thème sombre",
+    "language": "Langue",
+    "languageOptions": {
+      "en": "Anglais",
+      "fr": "Français"
+    },
+    "tabs": {
+      "general": "Général",
+      "advanced": "Avancé",
+      "billing": "Facturation",
+      "integrations": "Intégrations",
+      "storage": "Stockage"
+    }
+  }
+}