diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
index 10f3c7b59..29a85fce9 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -20,7 +20,7 @@
>
- {{ command.label || command.id }}
+ {{ command.getTranslatedLabel() }}
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue
index 97a373421..cd8136e38 100644
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/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(() => {
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
}))
diff --git a/src/components/searchbox/CommandSearchItem.vue b/src/components/searchbox/CommandSearchItem.vue
index db10ce35c..ed8dc667b 100644
--- a/src/components/searchbox/CommandSearchItem.vue
+++ b/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
diff --git a/src/services/commandSearchService.ts b/src/services/commandSearchService.ts
index e3e05ae23..7443f998c 100644
--- a/src/services/commandSearchService.ts
+++ b/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
diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts
index 70154e5ae..c38773d5e 100644
--- a/src/stores/commandStore.ts
+++ b/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', () => {
diff --git a/src/stores/menuItemStore.ts b/src/stores/menuItemStore.ts
index a1502e14a..39d3e348e 100644
--- a/src/stores/menuItemStore.ts
+++ b/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
diff --git a/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts b/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts
index d8ad4d6a0..8e0248b1f 100644
--- a/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts
+++ b/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
]
diff --git a/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts b/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts
index d42e7250c..fab2f5988 100644
--- a/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts
+++ b/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, {