feat: Add i18n infrastructure with Chinese and English translations

.eslintrc.cjs

@@ -102,6 +102,7 @@ module.exports = {
         ignoreHTMLAttributeValues: true,
         ignoreHTMLTextContents: true,
         ignoreUrls: true,
+        ignoreStrings: true,
       },
     ],
   },

package.json

@@ -88,6 +88,7 @@
     "vue": "^3.4.21",
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-draggable-resizable": "3.0.0",
+    "vue-i18n": "9",
     "vue-router": "^4.0.14",
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "vue3-slider": "^1.9.0",

src/App.vue

@@ -117,6 +117,8 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLocale } from 'vuetify'
 
 import ArchitectureWarning from '@/components/ArchitectureWarning.vue'
 import CameraReplacementDialog from '@/components/CameraReplacementDialog.vue'
@@ -172,6 +174,30 @@ useSnapshotStore()
 // VehicleDefaultsAutoImportModal when the user still needs to make a decision.
 useVehicleDefaultsAutoImport()
 
+// 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)
 
@@ -267,15 +293,15 @@ watch(
       showReconnectedFeedback.value = false
       if (!vehicleStore.isVehicleConnectionLost) return
       openSnackbar({
-        message: 'Vehicle connection lost: reestablishing',
+        message: t('Vehicle connection lost'),
         variant: 'error',
         duration: 3000,
         closeButton: false,
       })
       return
     }
 
-    openSnackbar({ message: 'Vehicle connected', variant: 'success', duration: 3000, closeButton: false })
+    openSnackbar({ message: t('Vehicle is connected'), variant: 'success', duration: 3000, closeButton: false })
     showReconnectedFeedback.value = true
     reconnectedFeedbackTimeout = setTimeout(() => (showReconnectedFeedback.value = false), 4000)
   }

src/components/About.vue

@@ -16,26 +16,32 @@
           <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(
+                    'Cockpit is an intuitive and customizable cross-platform ground control station for remote vehicles of all types.'
+                  )
+                }}
               </p>
-              <p class="my-3">It was created by Blue Robotics and is entirely open-source.</p>
+              <p class="my-3">{{ $t("It was created by Blue Robotics and it's fully open source.") }}</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(
+                    'It currently supports Ardupilot-based vehicles but plans to support any general vehicle, whether MAVLink-communicating or not.'
+                  )
+                }}
               </p>
             </div>
             <div class="w-[45%] flex flex-col justify-end text-end">
               <p class="mb-1">
-                Version
+                {{ $t('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('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('Created by Blue Robotics') }}</p>
+              <p class="mt-1">{{ $t('License: AGPL-3.0-only OR LicenseRef-Cockpit-Custom') }}</p>
             </div>
           </div>
           <div class="mb-5 flex justify-center align-center">
@@ -67,7 +73,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('Close') }}</v-btn>
+        </div></template
       >
     </InteractionDialog>
   </teleport>

src/components/AltitudeSlider.vue

@@ -10,7 +10,7 @@
       always-show-handle="true"
       step="0.1"
     />
-    <div class="slider-value"><span>Alt (Rel)</span></div>
+    <div class="slider-value"><span>{{ $t('Alt (Rel)') }}</span></div>
     <div class="slider-value">{{ formattedValue }}</div>
   </div>
 </template>

src/components/ArchitectureWarning.vue

@@ -1,7 +1,7 @@
 <template>
   <InteractionDialog
     v-model="showArchWarningDialog"
-    title="Performance Warning"
+    :title="$t('Performance Warning')"
     variant="text-only"
     :actions="dialogActions"
     max-width="820"
@@ -10,16 +10,22 @@
       <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(
+              'You are running the x64 version of Cockpit on an Apple Silicon Mac (M series), which causes severely degraded performance, including:'
+            )
+          }}
           <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('3-4x slower application startup times') }}</li>
+            <li>- {{ $t('2x the memory usage') }}</li>
+            <li>- {{ $t('Reduced overall performance') }}</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(
+                'This warning cannot be disabled - we strongly recommend that you download and install the intended version for your system.'
+              )
+            }}
           </p>
         </div>
       </div>
@@ -29,22 +35,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('Dismiss'),
     action: () => {
       showArchWarningDialog.value = false
     },
   },
   {
-    text: 'Download ARM64 Version',
+    text: t('Download ARM64 Version'),
     action: () => {
       window.open('https://github.com/bluerobotics/cockpit/releases/', '_blank')
       showArchWarningDialog.value = false

src/components/ArmSafetyDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <InteractionDialog v-model="show" title="Be careful" variant="text-only" max-width="780px" :persistent="false">
+  <InteractionDialog v-model="show" :title="$t('Be careful')" 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 +11,48 @@
       <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(
+              'The vehicle is currently armed, and the main-menu contains configurations and tools that can cause unsafe situations.'
+            )
+          }}
+        </p>
+        <p class="w-[560px] text-balance">
+          {{ $t('Come back later, or proceed carefully with one of the following options:') }}
         </p>
-        <p class="w-[560px] text-balance">Come back later, or proceed carefully with one of the following options:</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('Continue and never warn again') }}
+        </button>
         <button class="option-button" @click="doNotAskAgainInThisSession">
-          Continue and don't warn again during this session
+          {{ $t("Continue and don't warn again during this session") }}
+        </button>
+        <button class="option-button" @click="continueAnyway">
+          {{ $t('Continue anyway') }}
+        </button>
+        <button class="option-button" @click="disarmVehicle">
+          {{ $t('Disarm vehicle and continue') }}
         </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('Armed menu warning disabled. You can re-enable it in the Settings > Alerts menu.'),
     variant: 'info',
     duration: 10000,
     closeButton: true,