feat: Add i18n infrastructure with Chinese and English translations

package.json

@@ -87,6 +87,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

@@ -105,6 +105,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'
@@ -151,6 +153,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)
 
@@ -248,7 +274,7 @@ watch(
   (isOnline) => {
     if (!isOnline) {
       openSnackbar({
-        message: 'Vehicle connection lost: reestablishing',
+        message: t('errors.vehicleConnectionLost'),
         variant: 'error',
         duration: 3000,
         closeButton: false,
@@ -259,7 +285,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/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/CameraReplacementDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <InteractionDialog
     :show-dialog="showDialog"
-    title="Camera stream change detected"
+    :title="$t('components.CameraReplacementDialog.title')"
     :actions="dialogActions"
     variant="text-only"
     max-width="520px"
@@ -10,8 +10,7 @@
     <template #content>
       <div class="flex flex-col gap-4 min-w-[340px]">
         <p class="text-sm text-gray-300">
-          We noticed that a stream used by your widgets is no longer available, but a new stream has appeared. This
-          usually happens when replacing a camera. Would you like to update your widgets to use the new stream?
+          {{ $t('components.CameraReplacementDialog.description') }}
         </p>
 
         <div v-for="orphan in orphanedWidgetStreams" :key="orphan.externalId" class="flex flex-col gap-3">
@@ -20,20 +19,20 @@
               <v-icon size="18" color="red-lighten-1">mdi-video-off</v-icon>
               <span class="font-medium text-white text-sm">{{ orphan.internalName }}</span>
               <v-chip size="x-small" color="red-darken-1" variant="flat" label class="text-white ml-auto">
-                Unavailable
+                {{ $t('components.CameraReplacementDialog.unavailable') }}
               </v-chip>
             </div>
             <div class="stream-card-details">
               <div class="detail-row">
-                <span class="detail-label">Source</span>
+                <span class="detail-label">{{ $t('components.CameraReplacementDialog.source') }}</span>
                 <span class="detail-value">{{ orphan.displayInfo.source }}</span>
               </div>
               <div class="detail-row">
-                <span class="detail-label">Stream ID</span>
+                <span class="detail-label">{{ $t('components.CameraReplacementDialog.streamId') }}</span>
                 <span class="detail-value text-xs">{{ orphan.externalId }}</span>
               </div>
               <div class="detail-row">
-                <span class="detail-label">Type</span>
+                <span class="detail-label">{{ $t('components.CameraReplacementDialog.type') }}</span>
                 <span class="detail-value">
                   <v-chip
                     size="x-small"
@@ -47,7 +46,7 @@
                 </span>
               </div>
               <div v-if="orphan.displayInfo.resolution !== 'Unknown'" class="detail-row">
-                <span class="detail-label">Resolution</span>
+                <span class="detail-label">{{ $t('components.CameraReplacementDialog.resolution') }}</span>
                 <span class="detail-value">
                   {{ orphan.displayInfo.resolution }}
                   <template v-if="orphan.displayInfo.fps"> @ {{ orphan.displayInfo.fps }}</template>
@@ -69,7 +68,7 @@
               density="compact"
               variant="outlined"
               hide-details
-              label="Replace with"
+              :label="$t('components.CameraReplacementDialog.replaceWith')"
             />
           </div>
           <template v-else>
@@ -78,20 +77,20 @@
                 <v-icon size="18" color="green-lighten-1">mdi-video</v-icon>
                 <span class="font-medium text-white text-sm">{{ corr.name }}</span>
                 <v-chip size="x-small" color="green-darken-1" variant="flat" label class="text-white ml-auto">
-                  Available
+                  {{ $t('components.CameraReplacementDialog.available') }}
                 </v-chip>
               </div>
               <div class="stream-card-details">
                 <div class="detail-row">
-                  <span class="detail-label">Source</span>
+                  <span class="detail-label">{{ $t('components.CameraReplacementDialog.source') }}</span>
                   <span class="detail-value">{{ videoStore.getStreamDisplayInfo(corr.externalId).source }}</span>
                 </div>
                 <div class="detail-row">
-                  <span class="detail-label">Stream ID</span>
+                  <span class="detail-label">{{ $t('components.CameraReplacementDialog.streamId') }}</span>
                   <span class="detail-value text-xs">{{ corr.externalId }}</span>
                 </div>
                 <div class="detail-row">
-                  <span class="detail-label">Type</span>
+                  <span class="detail-label">{{ $t('components.CameraReplacementDialog.type') }}</span>
                   <span class="detail-value">
                     <v-chip
                       size="x-small"
@@ -109,7 +108,7 @@
                   </span>
                 </div>
                 <div v-if="videoStore.getStreamDisplayInfo(corr.externalId).resolution !== '...'" class="detail-row">
-                  <span class="detail-label">Resolution</span>
+                  <span class="detail-label">{{ $t('components.CameraReplacementDialog.resolution') }}</span>
                   <span class="detail-value">
                     {{ videoStore.getStreamDisplayInfo(corr.externalId).resolution }}
                     <template v-if="videoStore.getStreamDisplayInfo(corr.externalId).fps">
@@ -123,7 +122,7 @@
         </div>
 
         <p class="text-xs text-gray-500 mt-1">
-          {{ affectedWidgetCount }} widget{{ affectedWidgetCount === 1 ? '' : 's' }} will be updated.
+          {{ $t('components.CameraReplacementDialog.widgetsWillBeUpdated', { count: affectedWidgetCount }) }}
         </p>
       </div>
     </template>
@@ -132,6 +131,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { useVideoStore } from '@/stores/video'
@@ -142,6 +142,7 @@ import { MiniWidgetType, WidgetType } from '@/types/widgets'
 
 import InteractionDialog, { type Action } from './InteractionDialog.vue'
 
+const { t } = useI18n()
 const videoStore = useVideoStore()
 const widgetStore = useWidgetManagerStore()
 
@@ -341,14 +342,14 @@ const handleDialogClose = (value: boolean): void => {
 
 const dialogActions = computed((): Action[] => [
   {
-    text: 'Dismiss',
+    text: t('components.CameraReplacementDialog.dismiss'),
     action: () => {
       markDismissed()
       showDialog.value = false
     },
   },
   {
-    text: 'Replace stream',
+    text: t('components.CameraReplacementDialog.replaceStream'),
     color: 'white',
     action: replaceStreams,
   },