fIx: side toolbar tab tooltip not reactive when changing locale

[hyq2015]

In current comfyui, after I changed my locale from 中文 to English , I found the side toobar title/label not up to date, it seems the side toolbar button text is not a reactive value regarding the locale change

┆Issue is synchronized with this Notion page by Unito

[webfiltered]

Hey - thank you for the PR!

So looking this over, it feels like updateSidebarText is a very internal function - it has no params and should only be called be e.g. a watcher. (edit: because workspaceStore is a public API for extensions)

Instead, we should probably just make the sidebar text reactive.

If this is something you'd like to look into, please feel free! If not, no stress - we can look into it when time permits.

[hyq2015]

Thanks. Digged a bit, I suggest to follow the pattern in <SidebarThemeToggleIcon /> and <SidebarSettingsToggleIcon />, can use $t in the element directly no? And when registerSidebarTab, we can just pass a locale key for both label and tooltip.
and btw the label of tabs seems not used at all, can be cleand?

[christian-byrne]

PR Review: fix: side toolbar tab tooltip not reactive when changing locale (#4213)

Summary

• Files changed: 7
• Lines added/removed: +22/-22
• Review scope: all

Review Comments:

1. [src/stores/workspace/sidebarTabStore.ts:31] - [SEVERITY: Medium]

   label: tab.title,

   Issue: The command label is now using the translation key instead of translated text
   Impact: Commands in the command palette will show translation keys (e.g., "sideToolbar.workflows") instead of translated labels (e.g., "Workflows")
   Suggestion: The command registration needs access to i18n to translate the title:

   import { useI18n } from 'vue-i18n'
   
   // Inside the registerSidebarTab function
   const { t } = useI18n()
   useCommandStore().registerCommand({
     // ...
     label: t(tab.title),
     // ...
   })

Positive Observations:

• ✅ Elegant fix that properly makes tooltips reactive to locale changes
• ✅ Maintains backward compatibility for extensions using plain strings
• ✅ Clean separation of concerns
• ✅ Minimal code changes with maximum effect

[christian-byrne]

Tests will re-run when new changes are made 👍

[hyq2015]

PR Review: fix: side toolbar tab tooltip not reactive when changing locale (#4213)

Summary

• Files changed: 7
• Lines added/removed: +22/-22
• Review scope: all

Review Comments:

1. [src/stores/workspace/sidebarTabStore.ts:31] - [SEVERITY: Medium]

   label: tab.title,

   Issue: The command label is now using the translation key instead of translated text
   Impact: Commands in the command palette will show translation keys (e.g., "sideToolbar.workflows") instead of translated labels (e.g., "Workflows")
   Suggestion: The command registration needs access to i18n to translate the title:

   import { useI18n } from 'vue-i18n'
   
   // Inside the registerSidebarTab function
   const { t } = useI18n()
   useCommandStore().registerCommand({
     // ...
     label: t(tab.title),
     // ...
   })

Positive Observations:

• ✅ Elegant fix that properly makes tooltips reactive to locale changes
• ✅ Maintains backward compatibility for extensions using plain strings
• ✅ Clean separation of concerns
• ✅ Minimal code changes with maximum effect

[christian-byrne]

Hi @hyq2015, apologies for the confusion in my previous comments.

I've tested your PR thoroughly:

• Changed language from English to Chinese and back
• All sidebar tooltips (Queue, Node Library, Model Library, Workflows) now properly translate and update when changing locales
• Theme toggle and settings icons also work correctly

Your fix successfully makes the sidebar tooltips reactive to locale changes. This was the issue - tooltips were stuck in English before your changes.

LGTM! Thanks for fixing this.

Let's just see if the automated tests pass and then fix any failures, then we can merge!

[christian-byrne]

Just a heads up - the component tests for SidebarIcon will fail after this change because the component now uses useI18n().

To fix the tests, you'll need to update src/components/sidebar/SidebarIcon.spec.ts to include the i18n plugin:

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    en: {}
  }
})

// In mountSidebarIcon function, add i18n to plugins:
global: {
  plugins: [PrimeVue, i18n],
  // ... rest of config
}

You can verify the tests locally with:

npm run test:component -- src/components/sidebar/SidebarIcon.spec.ts

[hyq2015]

@christian-byrne oh thanks for the good catch, I will be more careful next time! btw, I fixed the component test error.