Skip to content

Commit e860e04

Browse files
christian-byrnebenceruleanlugithub-actions
authored
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 <[email protected]> Co-authored-by: github-actions <[email protected]>
1 parent 215814b commit e860e04

File tree

11 files changed

+45
-33
lines changed

11 files changed

+45
-33
lines changed

‎src/components/bottomPanel/BottomPanel.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div class="flex flex-col h-full">
3-
<Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
3+
<Tabs
4+
:key="$i18n.locale"
5+
v-model:value="bottomPanelStore.activeBottomPanelTabId"
6+
>
47
<TabList pt:tab-list="border-none">
58
<div class="w-full flex justify-between">
69
<div class="tabs-container">
@@ -11,11 +14,7 @@
1114
class="p-3 border-none"
1215
>
1316
<span class="font-bold">
14-
{{
15-
shouldCapitalizeTab(tab.id)
16-
? tab.title.toUpperCase()
17-
: tab.title
18-
}}
17+
{{ getTabDisplayTitle(tab) }}
1918
</span>
2019
</Tab>
2120
</div>
@@ -60,13 +59,16 @@ import Tab from 'primevue/tab'
6059
import TabList from 'primevue/tablist'
6160
import Tabs from 'primevue/tabs'
6261
import { computed } from 'vue'
62+
import { useI18n } from 'vue-i18n'
6363
6464
import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
6565
import { useDialogService } from '@/services/dialogService'
6666
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
67+
import type { BottomPanelExtension } from '@/types/extensionTypes'
6768
6869
const bottomPanelStore = useBottomPanelStore()
6970
const dialogService = useDialogService()
71+
const { t } = useI18n()
7072
7173
const isShortcutsTabActive = computed(() => {
7274
const activeTabId = bottomPanelStore.activeBottomPanelTabId
@@ -80,6 +82,11 @@ const shouldCapitalizeTab = (tabId: string): boolean => {
8082
return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
8183
}
8284
85+
const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
86+
const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
87+
return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
88+
}
89+
8390
const openKeybindingSettings = async () => {
8491
dialogService.showSettingsDialog('keybinding')
8592
}

‎src/components/topbar/CommandMenubar.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ const showManageExtensions = () => {
177177
}
178178
}
179179
180-
const extraMenuItems: MenuItem[] = [
180+
const extraMenuItems = computed<MenuItem[]>(() => [
181181
{ separator: true },
182182
{
183183
key: 'theme',
@@ -202,15 +202,15 @@ const extraMenuItems: MenuItem[] = [
202202
icon: 'mdi mdi-puzzle-outline',
203203
command: showManageExtensions
204204
}
205-
]
205+
])
206206
207-
const lightLabel = t('menu.light')
208-
const darkLabel = t('menu.dark')
207+
const lightLabel = computed(() => t('menu.light'))
208+
const darkLabel = computed(() => t('menu.dark'))
209209
210210
const activeTheme = computed(() => {
211211
return colorPaletteStore.completedActivePalette.light_theme
212-
? lightLabel
213-
: darkLabel
212+
? lightLabel.value
213+
: darkLabel.value
214214
})
215215
216216
const onThemeChange = async () => {
@@ -243,7 +243,7 @@ const translatedItems = computed(() => {
243243
items.splice(
244244
helpIndex,
245245
0,
246-
...extraMenuItems,
246+
...extraMenuItems.value,
247247
...(helpItem
248248
? [
249249
{

‎src/composables/bottomPanelTabs/useShortcutsTab.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@ import { BottomPanelExtension } from '@/types/extensionTypes'
77

88
export const useShortcutsTab = (): BottomPanelExtension[] => {
99
const { t } = useI18n()
10-
1110
return [
1211
{
1312
id: 'shortcuts-essentials',
14-
title: t('shortcuts.essentials'),
13+
title: t('shortcuts.essentials'), // For command labels (collected by i18n workflow)
14+
titleKey: 'shortcuts.essentials', // For dynamic translation in UI
1515
component: markRaw(EssentialsPanel),
1616
type: 'vue',
1717
targetPanel: 'shortcuts'
1818
},
1919
{
2020
id: 'shortcuts-view-controls',
21-
title: t('shortcuts.viewControls'),
21+
title: t('shortcuts.viewControls'), // For command labels (collected by i18n workflow)
22+
titleKey: 'shortcuts.viewControls', // For dynamic translation in UI
2223
component: markRaw(ViewControlsPanel),
2324
type: 'vue',
2425
targetPanel: 'shortcuts'

‎src/composables/bottomPanelTabs/useTerminalTabs.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export const useLogsTerminalTab = (): BottomPanelExtension => {
99
const { t } = useI18n()
1010
return {
1111
id: 'logs-terminal',
12-
title: t('g.logs'),
12+
title: t('g.logs'), // For command labels (collected by i18n workflow)
13+
titleKey: 'g.logs', // For dynamic translation in UI
1314
component: markRaw(LogsTerminal),
1415
type: 'vue'
1516
}
@@ -19,7 +20,8 @@ export const useCommandTerminalTab = (): BottomPanelExtension => {
1920
const { t } = useI18n()
2021
return {
2122
id: 'command-terminal',
22-
title: t('g.terminal'),
23+
title: t('g.terminal'), // For command labels (collected by i18n workflow)
24+
titleKey: 'g.terminal', // For dynamic translation in UI
2325
component: markRaw(CommandTerminal),
2426
type: 'vue'
2527
}

‎src/locales/ar/main.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1544,12 +1544,12 @@
15441544
"Show Keybindings Dialog": "عرض مربع حوار اختصارات لوحة المفاتيح",
15451545
"Show Settings Dialog": "عرض نافذة الإعدادات",
15461546
"Sign Out": "تسجيل خروج",
1547-
"Toggle Essential Bottom Panel": "تبديل اللوحة السفلية الأساسية",
1547+
"Toggle Essential Bottom Panel": "تبديل لوحة العناصر الأساسية السفلية",
15481548
"Toggle Logs Bottom Panel": "تبديل لوحة السجلات السفلية",
15491549
"Toggle Search Box": "تبديل مربع البحث",
15501550
"Toggle Terminal Bottom Panel": "تبديل لوحة الطرفية السفلية",
15511551
"Toggle Theme (Dark/Light)": "تبديل السمة (داكن/فاتح)",
1552-
"Toggle View Controls Bottom Panel": "تبديل لوحة التحكم في العرض السفلية",
1552+
"Toggle View Controls Bottom Panel": "تبديل لوحة عناصر التحكم في العرض السفلية",
15531553
"Toggle the Custom Nodes Manager": "تبديل مدير العقد المخصصة",
15541554
"Toggle the Custom Nodes Manager Progress Bar": "تبديل شريط تقدم مدير العقد المخصصة",
15551555
"Undo": "تراجع",

‎src/locales/fr/main.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -820,12 +820,12 @@
820820
"Save As": "Enregistrer sous",
821821
"Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
822822
"Sign Out": "Se déconnecter",
823-
"Toggle Essential Bottom Panel": "Afficher/Masquer le panneau inférieur essentiel",
823+
"Toggle Essential Bottom Panel": "Basculer le panneau inférieur essentiel",
824824
"Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
825825
"Toggle Search Box": "Basculer la boîte de recherche",
826826
"Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
827827
"Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
828-
"Toggle View Controls Bottom Panel": "Afficher/Masquer le panneau inférieur des contrôles de vue",
828+
"Toggle View Controls Bottom Panel": "Basculer le panneau inférieur des contrôles d’affichage",
829829
"Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
830830
"Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
831831
"Undo": "Annuler",

‎src/locales/ja/main.json‎

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

‎src/locales/ru/main.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -820,12 +820,12 @@
820820
"Save As": "Сохранить как",
821821
"Show Settings Dialog": "Показать диалог настроек",
822822
"Sign Out": "Выйти",
823-
"Toggle Essential Bottom Panel": "Показать/скрыть основную нижнюю панель",
824-
"Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
823+
"Toggle Essential Bottom Panel": "Показать/скрыть нижнюю панель основных элементов",
824+
"Toggle Logs Bottom Panel": "Показать/скрыть нижнюю панель логов",
825825
"Toggle Search Box": "Переключить поисковую панель",
826-
"Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
826+
"Toggle Terminal Bottom Panel": "Показать/скрыть нижнюю панель терминала",
827827
"Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
828-
"Toggle View Controls Bottom Panel": "Показать/скрыть панель управления просмотром",
828+
"Toggle View Controls Bottom Panel": "Показать/скрыть нижнюю панель элементов управления",
829829
"Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
830830
"Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
831831
"Undo": "Отменить",

‎src/locales/zh-TW/main.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -820,12 +820,12 @@
820820
"Save As": "另存新檔",
821821
"Show Settings Dialog": "顯示設定對話框",
822822
"Sign Out": "登出",
823-
"Toggle Essential Bottom Panel": "切換基本下方面板",
824-
"Toggle Logs Bottom Panel": "切換日誌下方面板",
823+
"Toggle Essential Bottom Panel": "切換基本底部面板",
824+
"Toggle Logs Bottom Panel": "切換日誌底部面板",
825825
"Toggle Search Box": "切換搜尋框",
826826
"Toggle Terminal Bottom Panel": "切換終端機底部面板",
827827
"Toggle Theme (Dark/Light)": "切換主題（深色/淺色）",
828-
"Toggle View Controls Bottom Panel": "切換檢視控制下方面板",
828+
"Toggle View Controls Bottom Panel": "切換檢視控制底部面板",
829829
"Toggle the Custom Nodes Manager": "切換自訂節點管理器",
830830
"Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
831831
"Undo": "復原",

‎src/stores/workspace/bottomPanelStore.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,11 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
110110
panel.activeTabId = tab.id
111111
}
112112

113+
const tabName = tab.title || tab.titleKey || tab.id
113114
useCommandStore().registerCommand({
114115
id: `Workspace.ToggleBottomPanelTab.${tab.id}`,
115116
icon: 'pi pi-list',
116-
label: `Toggle ${tab.title} Bottom Panel`,
117+
label: `Toggle ${tabName} Bottom Panel`,
117118
category: 'view-controls' as const,
118119
function: () => toggleBottomPanelTab(tab.id),
119120
source: 'System'

0 commit comments

Comments
 (0)