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

* 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: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: github-actions <github-actions@github.com>
2026-02-04 23:20:07 +00:00 · 2025-08-23 13:07:16 -07:00
parent 215814b62b
commit e860e04cfa
11 changed files with 45 additions and 33 deletions
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/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')
 }
--- a/src/components/topbar/CommandMenubar.vue
+++ b/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
      ? [
          {
--- a/src/composables/bottomPanelTabs/useShortcutsTab.ts
+++ b/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'
--- a/src/composables/bottomPanelTabs/useTerminalTabs.ts
+++ b/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'
  }
--- a/src/locales/ar/main.json
+++ b/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": "تراجع",
--- a/src/locales/fr/main.json
+++ b/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",
--- a/src/locales/ja/main.json
+++ b/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": "カスタムノードマネージャーを切り替え",
--- a/src/locales/ru/main.json
+++ b/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": "Отменить",
--- a/src/locales/zh-TW/main.json
+++ b/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": "復原",
--- a/src/stores/workspace/bottomPanelStore.ts
+++ b/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'
--- a/src/types/extensionTypes.ts
+++ b/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'
 }