Support i18n

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -20,7 +20,7 @@
           >
             <div class="shortcut-info flex-grow pr-4">
               <div class="shortcut-name text-sm font-medium">
-                {{ command.label || command.id }}
+                {{ command.getTranslatedLabel() }}
               </div>
             </div>
 

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -139,7 +139,6 @@ import Message from 'primevue/message'
 import Tag from 'primevue/tag'
 import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useKeybindingService } from '@/services/keybindingService'
@@ -149,7 +148,6 @@ import {
   KeybindingImpl,
   useKeybindingStore
 } from '@/stores/keybindingStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
@@ -161,7 +159,6 @@ const filters = ref({
 const keybindingStore = useKeybindingStore()
 const keybindingService = useKeybindingService()
 const commandStore = useCommandStore()
-const { t } = useI18n()
 
 interface ICommandData {
   id: string
@@ -173,10 +170,7 @@ interface ICommandData {
 const commandsData = computed<ICommandData[]>(() => {
   return Object.values(commandStore.commands).map((command) => ({
     id: command.id,
-    label: t(
-      `commands.${normalizeI18nKey(command.id)}.label`,
-      command.label ?? ''
-    ),
+    label: command.getTranslatedLabel(),
     keybinding: keybindingStore.getKeybindingByCommandId(command.id),
     source: command.source
   }))

src/components/searchbox/CommandSearchItem.vue

@@ -24,7 +24,7 @@ const { command, currentQuery } = defineProps<{
 }>()
 
 const highlightedLabel = computed(() => {
-  const label = command.label || command.id
+  const label = command.getTranslatedLabel()
   if (!currentQuery) return label
 
   // Simple highlighting logic - case insensitive

src/services/commandSearchService.ts

@@ -14,7 +14,11 @@ export class CommandSearchService {
     this.commands = commands
     this.fuse = new Fuse(commands, {
       keys: [
-        { name: 'label', weight: 2 },
+        {
+          name: 'translatedLabel',
+          weight: 2,
+          getFn: (command: ComfyCommandImpl) => command.getTranslatedLabel()
+        },
         { name: 'id', weight: 1 }
       ],
       includeScore: true,
@@ -28,7 +32,11 @@ export class CommandSearchService {
     this.commands = commands
     const options = {
       keys: [
-        { name: 'label', weight: 2 },
+        {
+          name: 'translatedLabel',
+          weight: 2,
+          getFn: (command: ComfyCommandImpl) => command.getTranslatedLabel()
+        },
         { name: 'id', weight: 1 }
       ],
       includeScore: true,
@@ -46,11 +54,11 @@ export class CommandSearchService {
     // Remove the leading ">" if present
     const searchQuery = query.startsWith('>') ? query.slice(1).trim() : query
 
-    // If empty query, return all commands sorted alphabetically by label
+    // If empty query, return all commands sorted alphabetically by translated label
     if (!searchQuery) {
       const sortedCommands = [...this.commands].sort((a, b) => {
-        const labelA = a.label || a.id
-        const labelB = b.label || b.id
+        const labelA = a.getTranslatedLabel()
+        const labelB = b.getTranslatedLabel()
         return labelA.localeCompare(labelB)
       })
       return options?.limit

src/stores/commandStore.ts

@@ -2,7 +2,9 @@ import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { t } from '@/i18n'
 import type { ComfyExtension } from '@/types/comfy'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'
 
@@ -66,6 +68,19 @@ export class ComfyCommandImpl implements ComfyCommand {
   get keybinding(): KeybindingImpl | null {
     return useKeybindingStore().getKeybindingByCommandId(this.id)
   }
+
+  getTranslatedLabel(): string {
+    // Use the same pattern as KeybindingPanel to get translated labels
+    return t(`commands.${normalizeI18nKey(this.id)}.label`, this.label ?? '')
+  }
+
+  getTranslatedMenubarLabel(): string {
+    // Use the same pattern but for menubar labels
+    return t(
+      `commands.${normalizeI18nKey(this.id)}.menubarLabel`,
+      this.menubarLabel ?? this.getTranslatedLabel()
+    )
+  }
 }
 
 export const useCommandStore = defineStore('command', () => {

src/stores/menuItemStore.ts

@@ -54,7 +54,7 @@ export const useMenuItemStore = defineStore('menuItem', () => {
         (command) =>
           ({
             command: () => commandStore.execute(command.id),
-            label: command.menubarLabel,
+            label: command.getTranslatedMenubarLabel(),
             icon: command.icon,
             tooltip: command.tooltip,
             comfyCommand: command

tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts

@@ -41,7 +41,9 @@ const mockCommands: ComfyCommandImpl[] = [
     icon: 'pi pi-test',
     tooltip: 'Test tooltip',
     menubarLabel: 'Other Command',
-    keybinding: null
+    keybinding: null,
+    getTranslatedLabel: () => 'Other Command',
+    getTranslatedMenubarLabel: () => 'Other Command'
   } as ComfyCommandImpl
 ]
 

tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts

@@ -32,7 +32,8 @@ describe('ShortcutsList', () => {
         combo: {
           getKeySequences: () => ['Control', 'n']
         }
-      }
+      },
+      getTranslatedLabel: () => 'New Workflow'
     } as ComfyCommandImpl,
     {
       id: 'Node.Add',
@@ -42,7 +43,8 @@ describe('ShortcutsList', () => {
         combo: {
           getKeySequences: () => ['Shift', 'a']
         }
-      }
+      },
+      getTranslatedLabel: () => 'Add Node'
     } as ComfyCommandImpl,
     {
       id: 'Queue.Clear',
@@ -52,7 +54,8 @@ describe('ShortcutsList', () => {
         combo: {
           getKeySequences: () => ['Control', 'Shift', 'c']
         }
-      }
+      },
+      getTranslatedLabel: () => 'Clear Queue'
     } as ComfyCommandImpl
   ]
 
@@ -104,7 +107,8 @@ describe('ShortcutsList', () => {
         id: 'No.Keybinding',
         label: 'No Keybinding',
         category: 'essentials',
-        keybinding: null
+        keybinding: null,
+        getTranslatedLabel: () => 'No Keybinding'
       } as ComfyCommandImpl
     ]
 
@@ -130,7 +134,8 @@ describe('ShortcutsList', () => {
         combo: {
           getKeySequences: () => ['Meta', 'ArrowUp', 'Enter', 'Escape', ' ']
         }
-      }
+      },
+      getTranslatedLabel: () => 'Special Keys'
     } as ComfyCommandImpl
 
     const wrapper = mount(ShortcutsList, {