feat(i18n): Integrate i18n across all components with enhancements

- Import and use vue-i18n in all components and views
- Add LanguageSwitcher component for runtime language switching
- Replace all hardcoded strings with translation keys
- Add getChatMessage to electron menu for language switching support
- Fix ConfigurationLogsView.vue conflict with upstream monaco editor changes
- Use common.* keys for shared translations (cancel, save, reset)
- Add JSDoc to all new i18n helper functions

Author: norulers

src/App.vue

@@ -149,6 +149,8 @@
 <script setup lang="ts">
 import { useStorage, useWindowSize } from '@vueuse/core'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLocale } from 'vuetify'
 
 import ActionDiscoveryModal from '@/components/ActionDiscoveryModal.vue'
 import ArchitectureWarning from '@/components/ArchitectureWarning.vue'
@@ -194,6 +196,30 @@ const missionStore = useMissionStore()
 // Initialize the snapshot store to register action callbacks
 useSnapshotStore()
 
+// Sync Vuetify locale with vue-i18n
+const { locale: i18nLocale, t } = useI18n()
+const { current: vuetifyLocale } = useLocale()
+
+// Map vue-i18n locales to Vuetify locales
+const localeMap: Record<string, string> = {
+  en: 'en',
+  zh: 'zhHans',
+}
+
+// Watch for i18n locale changes and update Vuetify
+watch(
+  i18nLocale,
+  (newLocale) => {
+    vuetifyLocale.value = localeMap[newLocale] || 'en'
+
+    // Update Electron menu language if running in Electron
+    if (window.electronAPI?.updateMenuLanguage) {
+      window.electronAPI.updateMenuLanguage(newLocale)
+    }
+  },
+  { immediate: true }
+)
+
 const showAboutDialog = ref(false)
 const currentSubMenuComponent = ref<SubMenuComponent>(null)
 
@@ -297,7 +323,7 @@ watch(
   (isOnline) => {
     if (!isOnline) {
       openSnackbar({
-        message: 'Vehicle connection lost: reestablishing',
+        message: t('errors.vehicleConnectionLost'),
         variant: 'error',
         duration: 3000,
         closeButton: false,
@@ -308,7 +334,7 @@ watch(
       return
     }
 
-    openSnackbar({ message: 'Vehicle connected', variant: 'success', duration: 3000, closeButton: false })
+    openSnackbar({ message: t('errors.vehicleConnected'), variant: 'success', duration: 3000, closeButton: false })
     connectionStatusFeedback.value = { border: '3px solid green' }
 
     resetConnectionStatusFeedback()

src/components/About.vue

@@ -16,26 +16,24 @@
           <div class="w-[90%] flex justify-between my-6 py-3">
             <div class="w-[45%] flex flex-col text-start">
               <p class="mb-1">
-                Cockpit is an intuitive and customizable cross-platform ground control station for remote vehicles of
-                all types.
+                {{ $t('about.description1') }}
               </p>
-              <p class="my-3">It was created by Blue Robotics and is entirely open-source.</p>
+              <p class="my-3">{{ $t('about.description2') }}</p>
               <p class="mt-1">
-                It currently supports Ardupilot-based vehicles, but has plans to support any generic vehicle, be it
-                communicating MAVLink or not.
+                {{ $t('about.description3') }}
               </p>
             </div>
             <div class="w-[45%] flex flex-col justify-end text-end">
               <p class="mb-1">
-                Version
+                {{ $t('about.version') }}
                 <a :href="app_version.link" target="_blank" class="text-primary hover:underline">
                   {{ app_version.version }}
                 </a>
                 <br />
-                <span class="text-sm text-gray-500">Released: {{ app_version.date }}</span>
+                <span class="text-sm text-gray-500">{{ $t('about.released') }}: {{ app_version.date }}</span>
               </p>
-              <p class="my-3">Created by Blue Robotics</p>
-              <p class="mt-1">Licensed under AGPL-3.0-only or LicenseRef-Cockpit-Custom</p>
+              <p class="my-3">{{ $t('about.createdBy') }}</p>
+              <p class="mt-1">{{ $t('about.license') }}</p>
             </div>
           </div>
           <div class="mb-5 flex justify-center align-center">
@@ -67,7 +65,9 @@
         </div>
       </template>
       <template #actions
-        ><div class="flex w-full justify-end"><v-btn @click="closeDialog">Close</v-btn></div></template
+        ><div class="flex w-full justify-end">
+          <v-btn @click="closeDialog">{{ $t('common.close') }}</v-btn>
+        </div></template
       >
     </InteractionDialog>
   </teleport>

src/components/ActionDiscoveryModal.vue

@@ -2,19 +2,19 @@
   <GlassModal :is-visible="isVisible" position="center">
     <div class="p-4 w-[550px] max-w-[90vw]">
       <div class="flex justify-center items-center mb-4 pb-2">
-        <h2 class="text-xl font-semibold">Available Actions</h2>
+        <h2 class="text-xl font-semibold">{{ $t('actions.availableActions') }}</h2>
       </div>
       <div class="fixed top-1 right-1">
         <v-btn icon="mdi-close" size="small" variant="text" class="text-lg" @click="closeModal"></v-btn>
       </div>
 
       <div v-if="filteredActions.length === 0" class="text-center py-8">
         <v-icon size="50" color="grey" class="mb-3">mdi-lightning-bolt-outline</v-icon>
-        <p class="text-grey-lighten-1">No new actions available.</p>
+        <p class="text-grey-lighten-1">{{ $t('actions.noNewActions') }}</p>
       </div>
 
       <div v-else class="actions-container">
-        <p class="mb-4">The following actions are available from BlueOS extensions:</p>
+        <p class="mb-4">{{ $t('actions.extensionActionsAvailable') }}</p>
 
         <v-list class="bg-transparent">
           <v-list-item v-for="action in filteredActions" :key="action.id" class="mb-3 p-0">
@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import GlassModal from '@/components/GlassModal.vue'
 import { useSnackbar } from '@/composables/snackbar'
@@ -64,6 +65,7 @@ import { getActionsFromBlueOS } from '@/libs/blueos'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { ActionConfig, customActionTypes, customActionTypesNames } from '@/types/cockpit-actions'
 
+const { t: $t } = useI18n()
 const mainVehicleStore = useMainVehicleStore()
 
 const { openSnackbar } = useSnackbar()

src/components/ArchitectureWarning.vue

@@ -1,7 +1,7 @@
 <template>
   <InteractionDialog
     v-model="showArchWarningDialog"
-    title="Performance Warning"
+    :title="$t('components.ArchitectureWarning.title')"
     variant="text-only"
     :actions="dialogActions"
     max-width="820"
@@ -10,16 +10,14 @@
       <div class="flex items-center justify-center mb-2">
         <v-icon class="text-yellow text-[60px] mx-8">mdi-alert-rhombus</v-icon>
         <div class="flex flex-col font-medium gap-y-3 w-full">
-          You are running the x64 version of Cockpit on an Apple Silicon Mac (M series), which causes severely degraded
-          performance, including:
+          {{ $t('components.ArchitectureWarning.runningWrongVersion') }}
           <ul class="mt- ml-4">
-            <li>- 3-4x slower application startup times</li>
-            <li>- 2x the memory usage</li>
-            <li>- Reduced overall performance</li>
+            <li>- {{ $t('components.ArchitectureWarning.slowerStartup') }}</li>
+            <li>- {{ $t('components.ArchitectureWarning.doubleMemory') }}</li>
+            <li>- {{ $t('components.ArchitectureWarning.reducedPerformance') }}</li>
           </ul>
           <p class="text-sm text-gray-600 mt-2">
-            This warning cannot be disabled - we strongly recommend that you download and install the intended version
-            for your system.
+            {{ $t('components.ArchitectureWarning.cannotDisable') }}
           </p>
         </div>
       </div>
@@ -29,22 +27,24 @@
 
 <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue'
 import { isElectron } from '@/libs/utils'
 import { PlatformUtils } from '@/types/platform'
 
+const { t } = useI18n()
 const showArchWarningDialog = ref(false)
 
-const dialogActions = [
+const dialogActions: Action[] = [
   {
-    text: 'Dismiss',
+    text: t('components.ArchitectureWarning.dismiss'),
     action: () => {
       showArchWarningDialog.value = false
     },
   },
   {
-    text: 'Download ARM64 Version',
+    text: t('components.ArchitectureWarning.downloadARM'),
     action: () => {
       window.open('https://github.com/bluerobotics/cockpit/releases/', '_blank')
       showArchWarningDialog.value = false

src/components/ArmSafetyDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <InteractionDialog v-model="show" title="Be careful" variant="text-only" max-width="780px" :persistent="false">
+  <InteractionDialog
+    v-model="show"
+    :title="$t('components.ArmSafetyDialog.title')"
+    variant="text-only"
+    max-width="780px"
+    :persistent="false"
+  >
     <template #content>
       <div class="flex gap-x-2 absolute top-0 right-0 py-2 pr-3">
         <slot name="help-icon"></slot>
@@ -11,34 +17,42 @@
       <div class="flex items-center justify-center mb-6">
         <v-icon class="text-yellow text-[60px] mx-8">mdi-alert-rhombus</v-icon>
         <p class="w-[560px] text-balance">
-          The vehicle is currently armed, and the main-menu contains configurations and tools that can cause unsafe
-          situations.
+          {{ $t('components.ArmSafetyDialog.vehicleArmedWarning') }}
         </p>
-        <p class="w-[560px] text-balance">Come back later, or proceed carefully with one of the following options:</p>
+        <p class="w-[560px] text-balance">{{ $t('components.ArmSafetyDialog.proceedCarefully') }}</p>
       </div>
     </template>
     <template #actions>
       <div class="flex items-center justify-between gap-8 w-full text-md">
-        <button class="option-button" @click="neverAskAgain">Continue and never warn again</button>
+        <button class="option-button" @click="neverAskAgain">
+          {{ $t('components.ArmSafetyDialog.continueNeverWarn') }}
+        </button>
         <button class="option-button" @click="doNotAskAgainInThisSession">
-          Continue and don't warn again during this session
+          {{ $t('components.ArmSafetyDialog.continueSessionWarn') }}
+        </button>
+        <button class="option-button" @click="continueAnyway">
+          {{ $t('components.ArmSafetyDialog.continueAnyway') }}
+        </button>
+        <button class="option-button" @click="disarmVehicle">
+          {{ $t('components.ArmSafetyDialog.disarmAndContinue') }}
         </button>
-        <button class="option-button" @click="continueAnyway">Continue anyway</button>
-        <button class="option-button" @click="disarmVehicle">Disarm vehicle and continue</button>
       </div>
     </template>
   </InteractionDialog>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import InteractionDialog from '@/components/InteractionDialog.vue'
 import { useSnackbar } from '@/composables/snackbar'
 import { useAlertStore } from '@/stores/alert'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
+const { t } = useI18n()
+
 const vehicleStore = useMainVehicleStore()
 const alertStore = useAlertStore()
 const interfaceStore = useAppInterfaceStore()
@@ -65,7 +79,7 @@ const neverAskAgain = (): void => {
   continueAnyway()
 
   openSnackbar({
-    message: 'Armed menu warning disabled. You can re-enable it in the Settings > Alerts menu.',
+    message: t('components.ArmSafetyDialog.warningDisabled'),
     variant: 'info',
     duration: 10000,
     closeButton: true,

src/components/DataLakeVariableDialog.vue

@@ -1,15 +1,19 @@
-<template>
+<template>
   <v-dialog :model-value="modelValue" max-width="560px" @update:model-value="emit('update:modelValue', $event)">
     <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
       <v-card-title class="text-h6 font-weight-bold py-4 text-center">
-        {{ editMode ? 'Edit Variable' : 'New Variable' }}
+        {{
+          editMode
+            ? $t('components.DataLakeVariableDialog.editVariable')
+            : $t('components.DataLakeVariableDialog.newVariable')
+        }}
       </v-card-title>
       <v-card-text class="px-8">
         <div class="flex flex-col gap-4">
           <div class="flex items-center gap-2">
             <v-text-field
               v-model="variable.id"
-              label="Variable ID"
+              :label="$t('components.DataLakeVariableDialog.variableId')"
               variant="outlined"
               :disabled="editMode || !isManualIdEnabled"
               :rules="[(v) => !!v || 'ID is required']"
@@ -29,24 +33,28 @@
           </div>
           <v-text-field
             v-model="variable.name"
-            label="Variable Name"
+            :label="$t('components.DataLakeVariableDialog.variableName')"
             variant="outlined"
             :rules="[(v) => !!v || 'Name is required']"
             density="compact"
             hide-details
           />
           <div class="flex items-center gap-2">
-            <label class="text-sm">Variable Type: </label>
+            <label class="text-sm">{{ $t('components.DataLakeVariableDialog.variableType') }}: </label>
             <v-radio-group
               v-model="variable.type"
               :rules="[(v) => !!v || 'Type is required']"
               density="compact"
               hide-details
               inline
             >
-              <v-radio class="ml-3 mr-4" label="String" value="string" />
-              <v-radio class="ml-3 mr-4" label="Number" value="number" />
-              <v-radio class="ml-3 mr-4" label="Boolean" value="boolean" />
+              <v-radio class="ml-3 mr-4" :label="$t('components.DataLakeVariableDialog.types.string')" value="string" />
+              <v-radio class="ml-3 mr-4" :label="$t('components.DataLakeVariableDialog.types.number')" value="number" />
+              <v-radio
+                class="ml-3 mr-4"
+                :label="$t('components.DataLakeVariableDialog.types.boolean')"
+                value="boolean"
+              />
             </v-radio-group>
           </div>
           <v-text-field
@@ -60,33 +68,33 @@
           />
           <v-textarea
             v-model="variable.description"
-            label="Description"
+            :label="$t('common.description')"
             variant="outlined"
-            placeholder="Optional description of what this variable is used for"
+            :placeholder="$t('components.DataLakeVariableDialog.descriptionPlaceholder')"
             rows="1"
             density="compact"
             hide-details
           />
           <v-checkbox
             v-model="variable.persistent"
-            label="Persist variable between boots"
+            :label="$t('components.DataLakeVariableDialog.persistBetweenBoots')"
             hide-details
             class="-mb-4 -mt-2"
           />
           <v-checkbox
             v-model="variable.persistValue"
             class="-my-4"
             hide-details
-            label="Save variable value between boots"
+            :label="$t('components.DataLakeVariableDialog.saveValueBetweenBoots')"
             :disabled="!variable.persistent"
           />
         </div>
       </v-card-text>
       <v-divider class="mx-10" />
       <v-card-actions>
         <div class="flex justify-between items-center pa-2 w-full h-full">
-          <v-btn color="white" variant="text" @click="closeDialog">Cancel</v-btn>
-          <v-btn color="white" :disabled="!isValid" @click="saveVariable">Save</v-btn>
+          <v-btn color="white" variant="text" @click="closeDialog">{{ $t('common.cancel') }}</v-btn>
+          <v-btn color="white" :disabled="!isValid" @click="saveVariable">{{ $t('common.save') }}</v-btn>
         </div>
       </v-card-actions>
     </v-card>