From e860e04cfa8a969fef67b4b7c3ac5042814b7793 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 23 Aug 2025 13:07:16 -0700
Subject: [PATCH] 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>
---
 src/components/bottomPanel/BottomPanel.vue    | 19 +++++++++++++------
 src/components/topbar/CommandMenubar.vue      | 14 +++++++-------
 .../bottomPanelTabs/useShortcutsTab.ts        |  7 ++++---
 .../bottomPanelTabs/useTerminalTabs.ts        |  6 ++++--
 src/locales/ar/main.json                      |  4 ++--
 src/locales/fr/main.json                      |  4 ++--
 src/locales/ja/main.json                      |  4 ++--
 src/locales/ru/main.json                      |  8 ++++----
 src/locales/zh-TW/main.json                   |  6 +++---
 src/stores/workspace/bottomPanelStore.ts      |  3 ++-
 src/types/extensionTypes.ts                   |  3 ++-
 11 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue
index 63d6874c0..0aff9442d 100644
--- 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')
 }
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index 20e44c993..b1e32c69b 100644
--- 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
       ? [
           {
diff --git a/src/composables/bottomPanelTabs/useShortcutsTab.ts b/src/composables/bottomPanelTabs/useShortcutsTab.ts
index e06cf933d..b4c699282 100644
--- 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'
diff --git a/src/composables/bottomPanelTabs/useTerminalTabs.ts b/src/composables/bottomPanelTabs/useTerminalTabs.ts
index e1c13efe5..23b7f2bef 100644
--- 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'
   }
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index b19f25ea0..50511f2de 100644
--- 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": "تراجع",
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 0e015f57d..c0031836d 100644
--- 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",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 2efba3f9f..5582ec97c 100644
--- 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": "カスタムノードマネージャーを切り替え",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index b5976f392..a2333d06a 100644
--- 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": "Отменить",
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index 43718e086..e7b79ee5a 100644
--- 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": "復原",
diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts
index d2b96be95..1fd95babe 100644
--- 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'
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index 1cd3e4480..c1a9e9c2a 100644
--- 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'
 }