From 35556eb674af501465642baec01a1c0eb4ed318c Mon Sep 17 00:00:00 2001
From: RickyHuang <18030638805@163.com>
Date: Sat, 5 Jul 2025 17:54:23 +0800
Subject: [PATCH] fIx: side toolbar tab tooltip not reactive when changing
 locale (#4213)

Co-authored-by: Huang Yun Qi <yun-qi.huang@ubisoft.com>
---
 src/components/sidebar/SideToolbar.vue              |  3 ++-
 src/components/sidebar/SidebarIcon.spec.ts          | 11 ++++++++++-
 src/components/sidebar/SidebarIcon.vue              | 13 +++++++++++--
 .../sidebarTabs/useModelLibrarySidebarTab.ts        |  7 ++-----
 .../sidebarTabs/useNodeLibrarySidebarTab.ts         |  6 ++----
 src/composables/sidebarTabs/useQueueSidebarTab.ts   |  6 ++----
 .../sidebarTabs/useWorkflowsSidebarTab.ts           |  7 ++-----
 src/stores/workspace/sidebarTabStore.ts             |  2 +-
 8 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 120747b54..4b7e6df00 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -6,7 +6,8 @@
         :key="tab.id"
         :icon="tab.icon"
         :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip + getTabTooltipSuffix(tab)"
+        :tooltip="tab.tooltip"
+        :tooltip-suffix="getTabTooltipSuffix(tab)"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
diff --git a/src/components/sidebar/SidebarIcon.spec.ts b/src/components/sidebar/SidebarIcon.spec.ts
index 806ce69ca..ef02f3d9e 100644
--- a/src/components/sidebar/SidebarIcon.spec.ts
+++ b/src/components/sidebar/SidebarIcon.spec.ts
@@ -4,6 +4,7 @@ import PrimeVue from 'primevue/config'
 import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -15,6 +16,14 @@ type SidebarIconProps = {
   iconBadge?: string | (() => string | null)
 }
 
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
+
 describe('SidebarIcon', () => {
   const exampleProps: SidebarIconProps = {
     icon: 'pi pi-cog',
@@ -24,7 +33,7 @@ describe('SidebarIcon', () => {
   const mountSidebarIcon = (props: Partial<SidebarIconProps>, options = {}) => {
     return mount(SidebarIcon, {
       global: {
-        plugins: [PrimeVue],
+        plugins: [PrimeVue, i18n],
         directives: { tooltip: Tooltip },
         components: { OverlayBadge, Button }
       },
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 3a3761704..1c1dffc1b 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -1,6 +1,10 @@
 <template>
   <Button
-    v-tooltip="{ value: tooltip, showDelay: 300, hideDelay: 300 }"
+    v-tooltip="{
+      value: computedTooltip,
+      showDelay: 300,
+      hideDelay: 300
+    }"
     text
     :pt="{
       root: {
@@ -9,7 +13,7 @@
             ? 'p-button-primary side-bar-button-selected'
             : 'p-button-secondary'
         }`,
-        'aria-label': tooltip
+        'aria-label': computedTooltip
       }
     }"
     @click="emit('click', $event)"
@@ -27,16 +31,20 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const {
   icon = '',
   selected = false,
   tooltip = '',
+  tooltipSuffix = '',
   iconBadge = ''
 } = defineProps<{
   icon?: string
   selected?: boolean
   tooltip?: string
+  tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
 }>()
 
@@ -47,6 +55,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
+const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 </script>
 
 <style>
diff --git a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
index 8c32739b8..5764ec579 100644
--- a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
@@ -1,5 +1,4 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
@@ -7,13 +6,11 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
-
   return {
     id: 'model-library',
     icon: 'pi pi-box',
-    title: t('sideToolbar.modelLibrary'),
-    tooltip: t('sideToolbar.modelLibrary'),
+    title: 'sideToolbar.modelLibrary',
+    tooltip: 'sideToolbar.modelLibrary',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
diff --git a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
index 6e559f28a..bdaa94e19 100644
--- a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
@@ -1,16 +1,14 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   return {
     id: 'node-library',
     icon: 'pi pi-book',
-    title: t('sideToolbar.nodeLibrary'),
-    tooltip: t('sideToolbar.nodeLibrary'),
+    title: 'sideToolbar.nodeLibrary',
+    tooltip: 'sideToolbar.nodeLibrary',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useQueueSidebarTab.ts b/src/composables/sidebarTabs/useQueueSidebarTab.ts
index 775dafc31..9f1501aab 100644
--- a/src/composables/sidebarTabs/useQueueSidebarTab.ts
+++ b/src/composables/sidebarTabs/useQueueSidebarTab.ts
@@ -1,12 +1,10 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
 import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useQueueSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
   return {
     id: 'queue',
@@ -15,8 +13,8 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
       const value = queuePendingTaskCountStore.count.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.queue'),
-    tooltip: t('sideToolbar.queue'),
+    title: 'sideToolbar.queue',
+    tooltip: 'sideToolbar.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
index bdfd72a65..842d3587a 100644
--- a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
@@ -1,5 +1,4 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
@@ -7,10 +6,8 @@ import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
-
   return {
     id: 'workflows',
     icon: 'pi pi-folder-open',
@@ -23,8 +20,8 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
       const value = workflowStore.openWorkflows.length.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.workflows'),
-    tooltip: t('sideToolbar.workflows'),
+    title: 'sideToolbar.workflows',
+    tooltip: 'sideToolbar.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index 725d6e02b..eb6ba77bf 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -28,7 +28,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
     useCommandStore().registerCommand({
       id: `Workspace.ToggleSidebarTab.${tab.id}`,
       icon: tab.icon,
-      label: `Toggle ${tab.title} Sidebar`,
+      label: tab.title,
       tooltip: tab.tooltip,
       versionAdded: '1.3.9',
       function: () => {