Keyboard Shortcut Bottom Panel (#4635)

src/composables/useCoreCommands.ts

@@ -46,6 +46,9 @@ export function useCoreCommands(): ComfyCommand[] {
   const toastStore = useToastStore()
   const canvasStore = useCanvasStore()
   const executionStore = useExecutionStore()
+
+  const bottomPanelStore = useBottomPanelStore()
+
   const { getSelectedNodes, toggleSelectedNodesMode } =
     useSelectedLiteGraphItems()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
@@ -70,6 +73,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-plus',
       label: 'New Blank Workflow',
       menubarLabel: 'New',
+      category: 'essentials' as const,
       function: () => workflowService.loadBlankWorkflow()
     },
     {
@@ -77,6 +81,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-folder-open',
       label: 'Open Workflow',
       menubarLabel: 'Open',
+      category: 'essentials' as const,
       function: () => {
         app.ui.loadFile()
       }
@@ -92,6 +97,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-save',
       label: 'Save Workflow',
       menubarLabel: 'Save',
+      category: 'essentials' as const,
       function: async () => {
         const workflow = useWorkflowStore().activeWorkflow as ComfyWorkflow
         if (!workflow) return
@@ -104,6 +110,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-save',
       label: 'Save Workflow As',
       menubarLabel: 'Save As',
+      category: 'essentials' as const,
       function: async () => {
         const workflow = useWorkflowStore().activeWorkflow as ComfyWorkflow
         if (!workflow) return
@@ -116,6 +123,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-download',
       label: 'Export Workflow',
       menubarLabel: 'Export',
+      category: 'essentials' as const,
       function: async () => {
         await workflowService.exportWorkflow('workflow', 'workflow')
       }
@@ -133,6 +141,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Undo',
       icon: 'pi pi-undo',
       label: 'Undo',
+      category: 'essentials' as const,
       function: async () => {
         await getTracker()?.undo?.()
       }
@@ -141,6 +150,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Redo',
       icon: 'pi pi-refresh',
       label: 'Redo',
+      category: 'essentials' as const,
       function: async () => {
         await getTracker()?.redo?.()
       }
@@ -149,6 +159,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.ClearWorkflow',
       icon: 'pi pi-trash',
       label: 'Clear Workflow',
+      category: 'essentials' as const,
       function: () => {
         const settingStore = useSettingStore()
         if (
@@ -190,6 +201,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.RefreshNodeDefinitions',
       icon: 'pi pi-refresh',
       label: 'Refresh Node Definitions',
+      category: 'essentials' as const,
       function: async () => {
         await app.refreshComboInNodes()
       }
@@ -198,6 +210,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Interrupt',
       icon: 'pi pi-stop',
       label: 'Interrupt',
+      category: 'essentials' as const,
       function: async () => {
         await api.interrupt(executionStore.activePromptId)
         toastStore.add({
@@ -212,6 +225,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.ClearPendingTasks',
       icon: 'pi pi-stop',
       label: 'Clear Pending Tasks',
+      category: 'essentials' as const,
       function: async () => {
         await useQueueStore().clear(['queue'])
         toastStore.add({
@@ -234,6 +248,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Canvas.ZoomIn',
       icon: 'pi pi-plus',
       label: 'Zoom In',
+      category: 'view-controls' as const,
       function: () => {
         const ds = app.canvas.ds
         ds.changeScale(
@@ -247,6 +262,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Canvas.ZoomOut',
       icon: 'pi pi-minus',
       label: 'Zoom Out',
+      category: 'view-controls' as const,
       function: () => {
         const ds = app.canvas.ds
         ds.changeScale(
@@ -260,6 +276,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Canvas.FitView',
       icon: 'pi pi-expand',
       label: 'Fit view to selected nodes',
+      category: 'view-controls' as const,
       function: () => {
         if (app.canvas.empty) {
           toastStore.add({
@@ -325,6 +342,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-play',
       label: 'Queue Prompt',
       versionAdded: '1.3.7',
+      category: 'essentials' as const,
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
         await app.queuePrompt(0, batchCount)
@@ -335,6 +353,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-play',
       label: 'Queue Prompt (Front)',
       versionAdded: '1.3.7',
+      category: 'essentials' as const,
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
         await app.queuePrompt(-1, batchCount)
@@ -371,6 +390,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-cog',
       label: 'Show Settings Dialog',
       versionAdded: '1.3.7',
+      category: 'view-controls' as const,
       function: () => {
         dialogService.showSettingsDialog()
       }
@@ -380,6 +400,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-sitemap',
       label: 'Group Selected Nodes',
       versionAdded: '1.3.7',
+      category: 'essentials' as const,
       function: () => {
         const { canvas } = app
         if (!canvas.selectedItems?.size) {
@@ -423,6 +444,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-volume-off',
       label: 'Mute/Unmute Selected Nodes',
       versionAdded: '1.3.11',
+      category: 'essentials' as const,
       function: () => {
         toggleSelectedNodesMode(LGraphEventMode.NEVER)
         app.canvas.setDirty(true, true)
@@ -433,6 +455,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-shield',
       label: 'Bypass/Unbypass Selected Nodes',
       versionAdded: '1.3.11',
+      category: 'essentials' as const,
       function: () => {
         toggleSelectedNodesMode(LGraphEventMode.BYPASS)
         app.canvas.setDirty(true, true)
@@ -443,6 +466,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-pin',
       label: 'Pin/Unpin Selected Nodes',
       versionAdded: '1.3.11',
+      category: 'essentials' as const,
       function: () => {
         getSelectedNodes().forEach((node) => {
           node.pin(!node.pinned)
@@ -516,8 +540,9 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-list',
       label: 'Toggle Bottom Panel',
       versionAdded: '1.3.22',
+      category: 'view-controls' as const,
       function: () => {
-        useBottomPanelStore().toggleBottomPanel()
+        bottomPanelStore.toggleBottomPanel()
       }
     },
     {
@@ -525,6 +550,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-eye',
       label: 'Toggle Focus Mode',
       versionAdded: '1.3.27',
+      category: 'view-controls' as const,
       function: () => {
         useWorkspaceStore().toggleFocusMode()
       }
@@ -750,6 +776,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-sitemap',
       label: 'Convert Selection to Subgraph',
       versionAdded: '1.20.1',
+      category: 'essentials' as const,
       function: () => {
         const canvas = canvasStore.getCanvas()
         const graph = canvas.subgraph ?? canvas.graph
@@ -768,6 +795,16 @@ export function useCoreCommands(): ComfyCommand[] {
         const { node } = res
         canvas.select(node)
       }
+    },
+    {
+      id: 'Workspace.ToggleBottomPanel.Shortcuts',
+      icon: 'pi pi-key',
+      label: 'Show Keybindings Dialog',
+      versionAdded: '1.24.1',
+      category: 'view-controls' as const,
+      function: () => {
+        bottomPanelStore.togglePanel('shortcuts')
+      }
     }
   ]