Keyboard Shortcut Bottom Panel (#4635)

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

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock ShortcutsList component
+vi.mock('@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue', () => ({
+  default: {
+    name: 'ShortcutsList',
+    props: ['commands', 'subcategories', 'columns'],
+    template:
+      '<div class="shortcuts-list-mock">{{ commands.length }} commands</div>'
+  }
+}))
+
+// Mock command store
+const mockCommands: ComfyCommandImpl[] = [
+  {
+    id: 'Workflow.New',
+    label: 'New Workflow',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Node.Add',
+    label: 'Add Node',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Queue.Clear',
+    label: 'Clear Queue',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Other.Command',
+    label: 'Other Command',
+    category: 'view-controls',
+    function: vi.fn(),
+    icon: 'pi pi-test',
+    tooltip: 'Test tooltip',
+    menubarLabel: 'Other Command',
+    keybinding: null
+  } as ComfyCommandImpl
+]
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    commands: mockCommands
+  })
+}))
+
+describe('EssentialsPanel', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should render ShortcutsList with essentials commands', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    expect(shortcutsList.exists()).toBe(true)
+
+    // Should pass only essentials commands
+    const commands = shortcutsList.props('commands')
+    expect(commands).toHaveLength(3)
+    commands.forEach((cmd: ComfyCommandImpl) => {
+      expect(cmd.category).toBe('essentials')
+    })
+  })
+
+  it('should categorize commands into subcategories', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    const subcategories = shortcutsList.props('subcategories')
+
+    expect(subcategories).toHaveProperty('workflow')
+    expect(subcategories).toHaveProperty('node')
+    expect(subcategories).toHaveProperty('queue')
+
+    expect(subcategories.workflow).toContain(mockCommands[0])
+    expect(subcategories.node).toContain(mockCommands[1])
+    expect(subcategories.queue).toContain(mockCommands[2])
+  })
+})

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

@@ -0,0 +1,165 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock vue-i18n
+const mockT = vi.fn((key: string) => {
+  const translations: Record<string, string> = {
+    'shortcuts.subcategories.workflow': 'Workflow',
+    'shortcuts.subcategories.node': 'Node',
+    'shortcuts.subcategories.queue': 'Queue',
+    'shortcuts.subcategories.view': 'View',
+    'shortcuts.subcategories.panelControls': 'Panel Controls'
+  }
+  return translations[key] || key
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}))
+
+describe('ShortcutsList', () => {
+  const mockCommands: ComfyCommandImpl[] = [
+    {
+      id: 'Workflow.New',
+      label: 'New Workflow',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'n']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Node.Add',
+      label: 'Add Node',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Shift', 'a']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Queue.Clear',
+      label: 'Clear Queue',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'Shift', 'c']
+        }
+      }
+    } as ComfyCommandImpl
+  ]
+
+  const mockSubcategories = {
+    workflow: [mockCommands[0]],
+    node: [mockCommands[1]],
+    queue: [mockCommands[2]]
+  }
+
+  it('should render shortcuts organized by subcategories', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check that subcategories are rendered
+    expect(wrapper.text()).toContain('Workflow')
+    expect(wrapper.text()).toContain('Node')
+    expect(wrapper.text()).toContain('Queue')
+
+    // Check that commands are rendered
+    expect(wrapper.text()).toContain('New Workflow')
+    expect(wrapper.text()).toContain('Add Node')
+    expect(wrapper.text()).toContain('Clear Queue')
+  })
+
+  it('should format keyboard shortcuts correctly', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check for formatted keys
+    expect(wrapper.text()).toContain('Ctrl')
+    expect(wrapper.text()).toContain('n')
+    expect(wrapper.text()).toContain('Shift')
+    expect(wrapper.text()).toContain('a')
+    expect(wrapper.text()).toContain('c')
+  })
+
+  it('should filter out commands without keybindings', () => {
+    const commandsWithoutKeybinding: ComfyCommandImpl[] = [
+      ...mockCommands,
+      {
+        id: 'No.Keybinding',
+        label: 'No Keybinding',
+        category: 'essentials',
+        keybinding: null
+      } as ComfyCommandImpl
+    ]
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: commandsWithoutKeybinding,
+        subcategories: {
+          ...mockSubcategories,
+          other: [commandsWithoutKeybinding[3]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).not.toContain('No Keybinding')
+  })
+
+  it('should handle special key formatting', () => {
+    const specialKeyCommand: ComfyCommandImpl = {
+      id: 'Special.Keys',
+      label: 'Special Keys',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Meta', 'ArrowUp', 'Enter', 'Escape', ' ']
+        }
+      }
+    } as ComfyCommandImpl
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: [specialKeyCommand],
+        subcategories: {
+          special: [specialKeyCommand]
+        }
+      }
+    })
+
+    const text = wrapper.text()
+    expect(text).toContain('Cmd') // Meta -> Cmd
+    expect(text).toContain('↑') // ArrowUp -> ↑
+    expect(text).toContain('↵') // Enter -> ↵
+    expect(text).toContain('Esc') // Escape -> Esc
+    expect(text).toContain('Space') // ' ' -> Space
+  })
+
+  it('should use fallback subcategory titles', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: {
+          unknown: [mockCommands[0]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('unknown')
+  })
+})

tests-ui/tests/store/bottomPanelStore.test.ts

@@ -0,0 +1,166 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
+
+// Mock dependencies
+vi.mock('@/composables/bottomPanelTabs/useShortcutsTab', () => ({
+  useShortcutsTab: () => [
+    {
+      id: 'shortcuts-essentials',
+      title: 'Essentials',
+      component: {},
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    },
+    {
+      id: 'shortcuts-view-controls',
+      title: 'View Controls',
+      component: {},
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    }
+  ]
+}))
+
+vi.mock('@/composables/bottomPanelTabs/useTerminalTabs', () => ({
+  useLogsTerminalTab: () => ({
+    id: 'logs',
+    title: 'Logs',
+    component: {},
+    type: 'vue',
+    targetPanel: 'terminal'
+  }),
+  useCommandTerminalTab: () => ({
+    id: 'command',
+    title: 'Command',
+    component: {},
+    type: 'vue',
+    targetPanel: 'terminal'
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    registerCommand: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: () => false
+}))
+
+describe('useBottomPanelStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should initialize with empty panels', () => {
+    const store = useBottomPanelStore()
+
+    expect(store.activePanel).toBeNull()
+    expect(store.bottomPanelVisible).toBe(false)
+    expect(store.bottomPanelTabs).toEqual([])
+    expect(store.activeBottomPanelTab).toBeNull()
+  })
+
+  it('should register bottom panel tabs', () => {
+    const store = useBottomPanelStore()
+    const tab: BottomPanelExtension = {
+      id: 'test-tab',
+      title: 'Test Tab',
+      component: {},
+      type: 'vue',
+      targetPanel: 'terminal'
+    }
+
+    store.registerBottomPanelTab(tab)
+
+    expect(store.panels.terminal.tabs.find((t) => t.id === 'test-tab')).toEqual(
+      tab
+    )
+    expect(store.panels.terminal.activeTabId).toBe('test-tab')
+  })
+
+  it('should toggle panel visibility', () => {
+    const store = useBottomPanelStore()
+    const tab: BottomPanelExtension = {
+      id: 'test-tab',
+      title: 'Test Tab',
+      component: {},
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    }
+
+    store.registerBottomPanelTab(tab)
+
+    // Panel should be hidden initially
+    expect(store.activePanel).toBeNull()
+
+    // Toggle should show panel
+    store.togglePanel('shortcuts')
+    expect(store.activePanel).toBe('shortcuts')
+    expect(store.bottomPanelVisible).toBe(true)
+
+    // Toggle again should hide panel
+    store.togglePanel('shortcuts')
+    expect(store.activePanel).toBeNull()
+    expect(store.bottomPanelVisible).toBe(false)
+  })
+
+  it('should switch between panel types', () => {
+    const store = useBottomPanelStore()
+
+    const terminalTab: BottomPanelExtension = {
+      id: 'terminal-tab',
+      title: 'Terminal',
+      component: {},
+      type: 'vue',
+      targetPanel: 'terminal'
+    }
+
+    const shortcutsTab: BottomPanelExtension = {
+      id: 'shortcuts-tab',
+      title: 'Shortcuts',
+      component: {},
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    }
+
+    store.registerBottomPanelTab(terminalTab)
+    store.registerBottomPanelTab(shortcutsTab)
+
+    // Show terminal panel
+    store.togglePanel('terminal')
+    expect(store.activePanel).toBe('terminal')
+    expect(store.activeBottomPanelTab?.id).toBe('terminal-tab')
+
+    // Switch to shortcuts panel
+    store.togglePanel('shortcuts')
+    expect(store.activePanel).toBe('shortcuts')
+    expect(store.activeBottomPanelTab?.id).toBe('shortcuts-tab')
+  })
+
+  it('should toggle specific tabs', () => {
+    const store = useBottomPanelStore()
+    const tab: BottomPanelExtension = {
+      id: 'specific-tab',
+      title: 'Specific Tab',
+      component: {},
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    }
+
+    store.registerBottomPanelTab(tab)
+
+    // Toggle specific tab should show it
+    store.toggleBottomPanelTab('specific-tab')
+    expect(store.activePanel).toBe('shortcuts')
+    expect(store.panels.shortcuts.activeTabId).toBe('specific-tab')
+
+    // Toggle same tab again should hide panel
+    store.toggleBottomPanelTab('specific-tab')
+    expect(store.activePanel).toBeNull()
+  })
+})