feat: Add Electron menu translations and expand i18n coverage

- Add Electron menu translation service with dynamic language switching
- Move language selector from MainMenu to General settings
- Translate all configuration views (Actions, Alerts, Development, General, Joystick, Logs, MAVLink, Mission, UI, Video)
- Translate mission planning, data lake, and tools views
- Translate all mini-widgets and major components
- Add glass effect styling for language selector dropdown
- Integrate Electron menu language sync with i18n system
- Expand translation keys in en.json and zh.json for comprehensive UI coverage

Changes:
- 56 component/view files translated
- 2 locale files updated with 500+ translation keys
- Electron menu fully integrated with i18n
- Language persisted to localStorage
- Menu language updates automatically on app language change

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,26 @@ const missionStore = useMissionStore()
 // Initialize the snapshot store to register action callbacks
 useSnapshotStore()
 
+// Sync Vuetify locale with vue-i18n
+const { locale: i18nLocale } = 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)
 

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">
@@ -75,13 +73,15 @@
 
 <script setup lang="ts">
 import { onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import CockpitLogo from '@/assets/cockpit-logo.png'
 import lite from '@/assets/lite.png'
 import InteractionDialog from '@/components/InteractionDialog.vue'
 import { app_version } from '@/libs/cosmos'
 import { isElectron } from '@/libs/utils'
 
+const { t } = useI18n()
 const showDialog = ref(true)
 const emit = defineEmits(['update:showAboutDialog'])
 

src/components/EditMenu.vue

@@ -1,52 +1,52 @@
 <template>
-  <div class="language-switcher">
-    <v-select
-      v-model="currentLocale"
-      :items="languages"
-      item-title="label"
-      item-value="value"
-      density="compact"
-      variant="outlined"
-      hide-details
-      @update:model-value="changeLanguage"
-    >
-      <template #prepend-inner>
-        <v-icon size="small">mdi-translate</v-icon>
-      </template>
-    </v-select>
-  </div>
+  <GlassButton
+    :label="simplified ? '' : languageLabel"
+    :label-class="[labelSize, '-mb-0.5 mt-6']"
+    :icon="simplified ? 'mdi-translate' : undefined"
+    :icon-size="simplified ? 25 : undefined"
+    variant="uncontained"
+    :tooltip="simplified ? languageLabel : undefined"
+    :width="buttonSize"
+    @click="toggleLanguage"
+  >
+    <v-icon v-if="!simplified" size="20" class="mr-2">mdi-translate</v-icon>
+  </GlassButton>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useLocale } from 'vuetify'
+import GlassButton from './GlassButton.vue'
+
+interface Props {
+  simplified?: boolean
+  buttonSize?: string
+  labelSize?: string
+}
+
+const props = defineProps<Props>()
 
 const { locale } = useI18n()
-const currentLocale = ref(locale.value)
+const { current: vuetifyLocale } = useLocale()
 
-const languages = [
-  { label: 'English', value: 'en' },
-  { label: '中文', value: 'zh' },
-]
+const languageLabel = computed(() => {
+  return locale.value === 'zh' ? '中文' : 'English'
+})
 
-const changeLanguage = (newLocale: string) => {
+const toggleLanguage = () => {
+  const newLocale = locale.value === 'zh' ? 'en' : 'zh'
   locale.value = newLocale
-  currentLocale.value = newLocale
+  
+  // Update Vuetify locale
+  vuetifyLocale.value = newLocale === 'zh' ? 'zhHans' : 'en'
+  
+  // Save to localStorage
   localStorage.setItem('cockpit-language', newLocale)
   
   // Update Electron menu language if running in Electron
   if (window.electronAPI?.updateMenuLanguage) {
     window.electronAPI.updateMenuLanguage(newLocale)
   }
 }
-
-onMounted(() => {
-  currentLocale.value = locale.value
-})
 </script>
-
-<style scoped>
-.language-switcher {
-  min-width: 120px;
-}
-</style>

src/components/LanguageSwitcher.vue

@@ -128,7 +128,6 @@
                   alt="Fullscreen Icon"
                 />
               </GlassButton>
-              <LanguageSwitcher :simplified="simplifiedMainMenu" :button-size="buttonSize" :label-size="menuLabelSize" />
               <GlassButton
                 :label="simplifiedMainMenu ? '' : $t('menu.about')"
                 :label-class="[menuLabelSize, '-mb-0.5 mt-6']"
@@ -218,7 +217,6 @@ import MissionPlanningIcon from '@/assets/icons/mission-planning.svg'
 import SettingsIcon from '@/assets/icons/settings.svg'
 import ToolsIcon from '@/assets/icons/tools.svg'
 import GlassButton from '@/components/GlassButton.vue'
-import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import {
   availableCockpitActions,
   registerActionCallback,

src/components/MainMenu.vue

@@ -131,55 +131,29 @@ const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
 const isDecember = (): boolean => getMonth(new Date()) === 11
 
 import { useFullscreen } from '@vueuse/core'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { isElectron } from '@/libs/utils'
 
+const { tm } = useI18n()
+
 const randomLightHeartedMessage = ref<string>('')
 let timerId: ReturnType<typeof setTimeout>
 
-const startupLightHeartedMessages: string[] = [
-  'Distributing dolphins for sonar translations...',
-  'Observing octopuses to optimize dark mode...',
-  'Persuading Poseidon to trade us his trident...',
-  'Sailing the seas, in sync with the breeze...',
-  'Jiggling jellyfish to frost up the UI...',
-  'Corralling coral for calibration...',
-  'Languishing in life-jackets...',
-  'Salvaging shipwrecks...',
-  'Searching for Nemo...',
-  'Singing with whales...',
-  'Tuning harps for carp...',
-  'Stargazing with starfish...',
-  'Recharging electric eels...',
-  'Swaying at the seaweed disco...',
-  'Fencing in the swordfish showdown...',
-  'Assembling AUVs into a single-file line...',
-  'Polishing portholes for crystal-clear viewports...',
-  'Convincing crabs to stop double-clicking everything...',
-  'Syncing compass with the stars (hold still, Orion)...',
-  'Kowtowing to kelp for a greener UI theme...',
-  'Warming up thrusters — and the coffee machine...',
-  'Updating barnacle firmware — this might tickle...',
-  'Deploying rubber ducks for safety certification...',
-  'Filling ballast tanks with fresh ideas...',
-  'Mapping ocean puns… depth-level humor detected...',
-  'Rendering waves pixel by pixel — surf’s almost up...',
-  'Teaching seagulls the latest hover gestures...',
-  'Checking tide tables to schedule snack breaks...',
-  'Swapping batteries in the sea turtles (just kidding)...',
-  'Dusting off code gremlins  —  please keep arms inside the Cockpit...',
-  'Aligning gyros — because spin is only fun on dance floors...',
-]
-
-const remainingMessages = ref<string[]>([...startupLightHeartedMessages])
+const getStartupMessages = (): string[] => {
+  const messages = tm('splash.messages')
+  return Array.isArray(messages) ? messages : []
+}
+
+const remainingMessages = ref<string[]>([...getStartupMessages()])
 
 const scheduleNextMessage = (): void => {
   const randomIndex = Math.floor(Math.random() * remainingMessages.value.length)
   const delay = Math.random() * 5000 + 3000
 
   if (remainingMessages.value.length === 0) {
-    remainingMessages.value = [...startupLightHeartedMessages]
+    remainingMessages.value = [...getStartupMessages()]
   }
   randomLightHeartedMessage.value = remainingMessages.value.splice(randomIndex, 1)[0]
   timerId = setTimeout(scheduleNextMessage, delay)

src/components/SplashScreen.vue

@@ -211,7 +211,7 @@ const isValidForm = computed(() => {
 
 const saveTransformingFunction = (): void => {
   if (!isValidForm.value) {
-    openSnackbar({ message: 'Please fill in all fields', variant: 'error' })
+    openSnackbar({ message: t('errors.pleaseFillAllFields'), variant: 'error' })
     return
   }
 

src/components/TransformingFunctionDialog.vue

@@ -1,23 +1,23 @@
 <template>
   <InteractionDialog
     v-model="isOpen"
-    :title="searching ? 'Searching for vehicles...' : 'Vehicle Discovery'"
+    :title="searching ? $t('vehicleDiscovery.searching') : $t('vehicleDiscovery.title')"
     :actions="dialogActions"
     :persistent="searching"
     :variant="'text-only'"
   >
     <template #content>
       <div v-if="props.showAutoSearchOption && preventAutoSearch">
-        <div class="text-sm mb-4">You can still search for vehicles in the general configuration menu.</div>
+        <div class="text-sm mb-4">{{ $t('vehicleDiscovery.canStillSearch') }}</div>
       </div>
       <div v-else class="flex flex-col items-center justify-center gap-4 min-w-[300px] min-h-[100px]">
         <div v-if="searching" class="flex flex-col items-center gap-2 mb-2">
           <v-progress-circular class="mb-2" indeterminate />
-          <span>Searching for vehicles in your network...</span>
+          <span>{{ $t('vehicleDiscovery.searching_status') }}</span>
         </div>
 
         <div v-else-if="vehicles.length > 0" class="flex flex-col gap-2 mb-3">
-          <div class="h-4 font-weight-bold text-center mb-5">Vehicles found!</div>
+          <div class="h-4 font-weight-bold text-center mb-5">{{ $t('vehicleDiscovery.vehiclesFound') }}</div>
           <div v-for="vehicle in vehicles" :key="vehicle.address" class="flex items-center gap-2">
             <v-btn variant="tonal" class="max-w-[500px] justify-start truncate" @click="selectVehicle(vehicle.address)">
               <span class="max-w-[300px] truncate">{{ vehicle.name }}</span>
@@ -26,18 +26,18 @@
           </div>
         </div>
 
-        <div v-else-if="searched" class="text-sm">No vehicles found in your network.</div>
+        <div v-else-if="searched" class="text-sm">{{ $t('vehicleDiscovery.noVehicles') }}</div>
 
         <div v-if="!searching && !searched" class="flex flex-col gap-2 items-center justify-center text-center">
-          <p v-if="props.showAutoSearchOption" class="font-bold">It looks like you're not connected to a vehicle!</p>
+          <p v-if="props.showAutoSearchOption" class="font-bold">{{ $t('vehicleDiscovery.notConnected') }}</p>
           <p class="max-w-[25rem] mb-2">
-            This tool allows you to locate and connect to BlueOS vehicles within your network.
+            {{ $t('vehicleDiscovery.description') }}
           </p>
         </div>
 
         <div v-if="!searching" class="flex justify-center items-center">
           <v-btn variant="outlined" :disabled="searching" class="mb-5" @click="searchVehicles">
-            {{ searched ? 'Search again' : 'Search for vehicles' }}
+            {{ searched ? $t('vehicleDiscovery.searchAgain') : $t('vehicleDiscovery.searchButton') }}
           </v-btn>
         </div>
       </div>
@@ -48,6 +48,7 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useSnackbar } from '@/composables/snackbar'
 import vehicleDiscover, { NetworkVehicle } from '@/libs/electron/vehicle-discovery'
@@ -71,6 +72,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
 }>()
 
+const { t } = useI18n()
 const { openSnackbar } = useSnackbar()
 const mainVehicleStore = useMainVehicleStore()
 const discoveryService = vehicleDiscover
@@ -83,7 +85,7 @@ const preventAutoSearch = useStorage('cockpit-prevent-auto-vehicle-discovery-dia
 
 const originalActions = [
   {
-    text: 'Close',
+    text: t('vehicleDiscovery.close'),
     action: () => {
       isOpen.value = false
     },
@@ -92,7 +94,7 @@ const originalActions = [
 
 if (props.showAutoSearchOption) {
   originalActions.unshift({
-    text: "Don't show again",
+    text: t('vehicleDiscovery.dontShowAgain'),
     action: () => preventFutureAutoSearchs(),
   })
 }
@@ -123,7 +125,7 @@ const selectVehicle = async (address: string): Promise<void> => {
   mainVehicleStore.globalAddress = address
   isOpen.value = false
   await reloadCockpitAndWarnUser()
-  openSnackbar({ message: 'Vehicle address updated', variant: 'success', duration: 5000 })
+  openSnackbar({ message: t('success.vehicleAddressUpdated'), variant: 'success', duration: 5000 })
 }
 
 const preventFutureAutoSearchs = (): void => {