fix: Make bottom panel tab titles reactive to language changes (#5077)

* computed extraMenuItems

* add i18n key option

* underline fix

* Update locales [skip ci]

* restore title

* Update locales [skip ci]

* refactor: Extract tab title logic to helper method for better readability

- Moved complex nested ternary logic from template to getTabDisplayTitle helper
- Improves code readability and maintainability
- Addresses review feedback about using computed/method for performance

---------

Co-authored-by: github-actions <[email protected]>

src/components/bottomPanel/BottomPanel.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col h-full">
-    <Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
+    <Tabs
+      :key="$i18n.locale"
+      v-model:value="bottomPanelStore.activeBottomPanelTabId"
+    >
       <TabList pt:tab-list="border-none">
         <div class="w-full flex justify-between">
           <div class="tabs-container">
@@ -11,11 +14,7 @@
               class="p-3 border-none"
             >
               <span class="font-bold">
-                {{
-                  shouldCapitalizeTab(tab.id)
-                    ? tab.title.toUpperCase()
-                    : tab.title
-                }}
+                {{ getTabDisplayTitle(tab) }}
               </span>
             </Tab>
           </div>
@@ -60,13 +59,16 @@ import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 const bottomPanelStore = useBottomPanelStore()
 const dialogService = useDialogService()
+const { t } = useI18n()
 
 const isShortcutsTabActive = computed(() => {
   const activeTabId = bottomPanelStore.activeBottomPanelTabId
@@ -80,6 +82,11 @@ const shouldCapitalizeTab = (tabId: string): boolean => {
   return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
 }
 
+const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
+  const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
+  return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
+}
+
 const openKeybindingSettings = async () => {
   dialogService.showSettingsDialog('keybinding')
 }

src/components/topbar/CommandMenubar.vue

@@ -177,7 +177,7 @@ const showManageExtensions = () => {
   }
 }
 
-const extraMenuItems: MenuItem[] = [
+const extraMenuItems = computed<MenuItem[]>(() => [
   { separator: true },
   {
     key: 'theme',
@@ -202,15 +202,15 @@ const extraMenuItems: MenuItem[] = [
     icon: 'mdi mdi-puzzle-outline',
     command: showManageExtensions
   }
-]
+])
 
-const lightLabel = t('menu.light')
-const darkLabel = t('menu.dark')
+const lightLabel = computed(() => t('menu.light'))
+const darkLabel = computed(() => t('menu.dark'))
 
 const activeTheme = computed(() => {
   return colorPaletteStore.completedActivePalette.light_theme
-    ? lightLabel
-    : darkLabel
+    ? lightLabel.value
+    : darkLabel.value
 })
 
 const onThemeChange = async () => {
@@ -243,7 +243,7 @@ const translatedItems = computed(() => {
   items.splice(
     helpIndex,
     0,
-    ...extraMenuItems,
+    ...extraMenuItems.value,
     ...(helpItem
       ? [
           {

src/composables/bottomPanelTabs/useShortcutsTab.ts

@@ -7,18 +7,19 @@ import { BottomPanelExtension } from '@/types/extensionTypes'
 
 export const useShortcutsTab = (): BottomPanelExtension[] => {
   const { t } = useI18n()
-
   return [
     {
       id: 'shortcuts-essentials',
-      title: t('shortcuts.essentials'),
+      title: t('shortcuts.essentials'), // For command labels (collected by i18n workflow)
+      titleKey: 'shortcuts.essentials', // For dynamic translation in UI
       component: markRaw(EssentialsPanel),
       type: 'vue',
       targetPanel: 'shortcuts'
     },
     {
       id: 'shortcuts-view-controls',
-      title: t('shortcuts.viewControls'),
+      title: t('shortcuts.viewControls'), // For command labels (collected by i18n workflow)
+      titleKey: 'shortcuts.viewControls', // For dynamic translation in UI
       component: markRaw(ViewControlsPanel),
       type: 'vue',
       targetPanel: 'shortcuts'

src/composables/bottomPanelTabs/useTerminalTabs.ts

@@ -9,7 +9,8 @@ export const useLogsTerminalTab = (): BottomPanelExtension => {
   const { t } = useI18n()
   return {
     id: 'logs-terminal',
-    title: t('g.logs'),
+    title: t('g.logs'), // For command labels (collected by i18n workflow)
+    titleKey: 'g.logs', // For dynamic translation in UI
     component: markRaw(LogsTerminal),
     type: 'vue'
   }
@@ -19,7 +20,8 @@ export const useCommandTerminalTab = (): BottomPanelExtension => {
   const { t } = useI18n()
   return {
     id: 'command-terminal',
-    title: t('g.terminal'),
+    title: t('g.terminal'), // For command labels (collected by i18n workflow)
+    titleKey: 'g.terminal', // For dynamic translation in UI
     component: markRaw(CommandTerminal),
     type: 'vue'
   }

src/locales/ar/main.json

@@ -1544,12 +1544,12 @@
     "Show Keybindings Dialog": "عرض مربع حوار اختصارات لوحة المفاتيح",
     "Show Settings Dialog": "عرض نافذة الإعدادات",
     "Sign Out": "تسجيل خروج",
-    "Toggle Essential Bottom Panel": "تبديل اللوحة السفلية الأساسية",
+    "Toggle Essential Bottom Panel": "تبديل لوحة العناصر الأساسية السفلية",
     "Toggle Logs Bottom Panel": "تبديل لوحة السجلات السفلية",
     "Toggle Search Box": "تبديل مربع البحث",
     "Toggle Terminal Bottom Panel": "تبديل لوحة الطرفية السفلية",
     "Toggle Theme (Dark/Light)": "تبديل السمة (داكن/فاتح)",
-    "Toggle View Controls Bottom Panel": "تبديل لوحة التحكم في العرض السفلية",
+    "Toggle View Controls Bottom Panel": "تبديل لوحة عناصر التحكم في العرض السفلية",
     "Toggle the Custom Nodes Manager": "تبديل مدير العقد المخصصة",
     "Toggle the Custom Nodes Manager Progress Bar": "تبديل شريط تقدم مدير العقد المخصصة",
     "Undo": "تراجع",

src/locales/fr/main.json

@@ -820,12 +820,12 @@
     "Save As": "Enregistrer sous",
     "Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
     "Sign Out": "Se déconnecter",
-    "Toggle Essential Bottom Panel": "Afficher/Masquer le panneau inférieur essentiel",
+    "Toggle Essential Bottom Panel": "Basculer le panneau inférieur essentiel",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
-    "Toggle View Controls Bottom Panel": "Afficher/Masquer le panneau inférieur des contrôles de vue",
+    "Toggle View Controls Bottom Panel": "Basculer le panneau inférieur des contrôles d’affichage",
     "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",

src/locales/ja/main.json

@@ -821,9 +821,9 @@
     "Show Settings Dialog": "設定ダイアログを表示",
     "Sign Out": "サインアウト",
     "Toggle Essential Bottom Panel": "エッセンシャル下部パネルの切り替え",
-    "Toggle Logs Bottom Panel": "ログパネル下部を切り替え",
+    "Toggle Logs Bottom Panel": "ログ下部パネルの切り替え",
     "Toggle Search Box": "検索ボックスの切り替え",
-    "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
+    "Toggle Terminal Bottom Panel": "ターミナル下部パネルの切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
     "Toggle View Controls Bottom Panel": "ビューコントロール下部パネルの切り替え",
     "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",

src/locales/ru/main.json

@@ -820,12 +820,12 @@
     "Save As": "Сохранить как",
     "Show Settings Dialog": "Показать диалог настроек",
     "Sign Out": "Выйти",
-    "Toggle Essential Bottom Panel": "Показать/скрыть основную нижнюю панель",
-    "Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
+    "Toggle Essential Bottom Panel": "Показать/скрыть нижнюю панель основных элементов",
+    "Toggle Logs Bottom Panel": "Показать/скрыть нижнюю панель логов",
     "Toggle Search Box": "Переключить поисковую панель",
-    "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
+    "Toggle Terminal Bottom Panel": "Показать/скрыть нижнюю панель терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
-    "Toggle View Controls Bottom Panel": "Показать/скрыть панель управления просмотром",
+    "Toggle View Controls Bottom Panel": "Показать/скрыть нижнюю панель элементов управления",
     "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",

src/locales/zh-TW/main.json

@@ -820,12 +820,12 @@
     "Save As": "另存新檔",
     "Show Settings Dialog": "顯示設定對話框",
     "Sign Out": "登出",
-    "Toggle Essential Bottom Panel": "切換基本下方面板",
-    "Toggle Logs Bottom Panel": "切換日誌下方面板",
+    "Toggle Essential Bottom Panel": "切換基本底部面板",
+    "Toggle Logs Bottom Panel": "切換日誌底部面板",
     "Toggle Search Box": "切換搜尋框",
     "Toggle Terminal Bottom Panel": "切換終端機底部面板",
     "Toggle Theme (Dark/Light)": "切換主題（深色/淺色）",
-    "Toggle View Controls Bottom Panel": "切換檢視控制下方面板",
+    "Toggle View Controls Bottom Panel": "切換檢視控制底部面板",
     "Toggle the Custom Nodes Manager": "切換自訂節點管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",

src/stores/workspace/bottomPanelStore.ts

@@ -110,10 +110,11 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
       panel.activeTabId = tab.id
     }
 
+    const tabName = tab.title || tab.titleKey || tab.id
     useCommandStore().registerCommand({
       id: `Workspace.ToggleBottomPanelTab.${tab.id}`,
       icon: 'pi pi-list',
-      label: `Toggle ${tab.title} Bottom Panel`,
+      label: `Toggle ${tabName} Bottom Panel`,
       category: 'view-controls' as const,
       function: () => toggleBottomPanelTab(tab.id),
       source: 'System'

src/types/extensionTypes.ts

@@ -14,7 +14,8 @@ export interface BaseSidebarTabExtension {
 
 export interface BaseBottomPanelExtension {
   id: string
-  title: string
+  title?: string // For extensions that provide static titles
+  titleKey?: string // For core tabs with i18n keys
   targetPanel?: 'terminal' | 'shortcuts'
 }