refactor keybinding files

docs/DDD_KEYBINDING_REFACTORING.md

@@ -0,0 +1,134 @@
+# Keybinding Domain DDD Refactoring
+
+## Overview
+
+This document outlines the refactoring of ComfyUI's keybinding functionality from technical layers to domain-driven design (DDD) following VSCode's proven three-layer architecture.
+
+## Architecture
+
+### Three-Layer Design
+
+Following VSCode's enterprise-grade architecture:
+
+1. **Base Layer** - Foundational utilities (no dependencies)
+2. **Platform Layer** - Core abstractions (reusable across frontends)  
+3. **Workbench Layer** - UI-specific implementation
+
+### Final Structure
+
+```
+src/
+├── base/keybinding/                           # Base Layer
+│   └── reservedKeyCombos.ts                  # Reserved key combinations
+│
+├── platform/keybinding/                      # Platform Layer
+│   ├── constants/
+│   │   └── coreKeybindings.ts               # Core keybinding definitions
+│   └── types/
+│       └── keybinding.ts                    # Schema types and interfaces
+│
+└── workbench/keybindings/                    # Workbench Layer
+    ├── components/                           # UI Components
+    │   ├── KeybindingPanel.vue              # Settings panel
+    │   ├── KeyComboDisplay.vue              # Key display component
+    │   └── shortcuts/                       # Shortcuts panel
+    │       ├── EssentialsPanel.vue
+    │       ├── ShortcutsList.vue
+    │       └── ViewControlsPanel.vue
+    ├── composables/
+    │   └── useShortcutsTab.ts               # UI logic
+    ├── services/
+    │   └── keybindingService.ts             # Service implementation
+    └── stores/
+        └── keybindingStore.ts               # State management
+```
+
+## Migration Summary
+
+### Before (Technical Layers)
+- `services/keybindingService.ts`
+- `stores/keybindingStore.ts`
+- `constants/coreKeybindings.ts`
+- `schemas/keyBindingSchema.ts`
+- `components/dialog/content/setting/KeybindingPanel.vue`
+- `components/bottomPanel/tabs/shortcuts/`
+- `composables/bottomPanelTabs/useShortcutsTab.ts`
+
+### After (Domain-Driven)
+All keybinding functionality organized by architectural layer and domain responsibility.
+
+## Key Import Paths
+
+```typescript
+// Platform types and constants
+import type { Keybinding, KeyCombo } from '@/platform/keybinding/types/keybinding'
+import { CORE_KEYBINDINGS } from '@/platform/keybinding/constants/coreKeybindings'
+
+// Base utilities
+import { RESERVED_BY_TEXT_INPUT } from '@/base/keybinding/reservedKeyCombos'
+
+// Workbench services
+import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
+import { 
+  KeyComboImpl, 
+  KeybindingImpl, 
+  useKeybindingStore 
+} from '@/workbench/keybindings/stores/keybindingStore'
+
+// UI components
+import KeybindingPanel from '@/workbench/keybindings/components/KeybindingPanel.vue'
+import { useShortcutsTab } from '@/workbench/keybindings/composables/useShortcutsTab'
+```
+
+## Benefits
+
+### 1. Clear Architectural Boundaries
+- **Base**: Reusable across any JavaScript environment
+- **Platform**: Reusable across any UI framework  
+- **Workbench**: Vue/PrimeVue specific implementation
+
+### 2. Frontend Flexibility
+The base + platform layers enable building alternative frontends (React, Angular, etc.) while reusing core keybinding logic.
+
+### 3. VSCode Alignment
+Follows the same proven patterns used by one of the most successful code editors, ensuring scalability and maintainability.
+
+### 4. Domain Cohesion
+All keybinding-related functionality is now located together, making it easier to:
+- Find related code
+- Make changes across the domain
+- Test domain functionality
+- Understand feature scope
+
+### 5. Dependency Management
+Clear dependency flow: `base/` ← `platform/` ← `workbench/`
+
+## Migration Process
+
+1. ✅ **Analysis**: Identified all keybinding-related files
+2. ✅ **Structure Creation**: Built three-layer directory structure
+3. ✅ **File Migration**: Moved files to appropriate layers
+4. ✅ **Import Updates**: Updated all import paths using `@` aliases
+5. ✅ **Testing**: Verified TypeScript compilation and linting
+6. ✅ **Cleanup**: Removed old files and empty directories
+
+## Quality Assurance
+
+- **TypeScript**: `pnpm typecheck` passes
+- **Code Quality**: `pnpm lint --fix` applied
+- **Testing**: All test imports updated
+- **No Breaking Changes**: All functionality preserved
+
+## Future Considerations
+
+### Potential Enhancements
+- Add platform-level abstractions as needed
+- Create additional keybinding editor components
+- Consider splitting large components into smaller, focused ones
+
+### Extension Points
+- New UI components can be added to `workbench/keybindings/components/`
+- Platform-level services can be extended in `platform/keybinding/`
+- Base utilities can be enhanced in `base/keybinding/`
+
+This refactoring establishes a solid foundation for future keybinding feature development while maintaining backward compatibility and improving code organization.

src/components/sidebar/SideToolbar.vue

@@ -38,10 +38,10 @@ import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
+import { useKeybindingStore } from '@/workbench/keybindings/stores/keybindingStore'
 
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'

src/platform/keybinding/constants/coreKeybindings.ts

@@ -1,4 +1,4 @@
-import type { Keybinding } from '@/schemas/keyBindingSchema'
+import type { Keybinding } from '@/platform/keybinding/types/keybinding'
 
 export const CORE_KEYBINDINGS: Keybinding[] = [
   {

src/platform/settings/composables/useSettingUI.ts

@@ -101,7 +101,7 @@ export function useSettingUI(
       children: []
     },
     component: defineAsyncComponent(
-      () => import('@/components/dialog/content/setting/KeybindingPanel.vue')
+      () => import('@/workbench/keybindings/components/KeybindingPanel.vue')
     )
   }
 

src/platform/settings/constants/coreSettings.ts

@@ -1,8 +1,8 @@
 import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { Keybinding } from '@/platform/keybinding/types/keybinding'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
-import type { Keybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 

src/schemas/apiSchema.ts

@@ -1,12 +1,12 @@
 import { z } from 'zod'
 
 import { LinkMarkerShape } from '@/lib/litegraph/src/litegraph'
+import { zKeybinding } from '@/platform/keybinding/types/keybinding'
 import {
   zComfyWorkflow,
   zNodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { colorPalettesSchema } from '@/schemas/colorPaletteSchema'
-import { zKeybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 

src/scripts/app.ts

@@ -53,7 +53,6 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useModelStore } from '@/stores/modelStore'
 import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
@@ -81,6 +80,10 @@ import {
 } from '@/utils/migration/migrateReroute'
 import { getSelectedModelsMetadata } from '@/utils/modelMetadataUtil'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
+import {
+  KeyComboImpl,
+  useKeybindingStore
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'

src/services/extensionService.ts

@@ -5,11 +5,14 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { KeybindingImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { ComfyExtension } from '@/types/comfy'
+import {
+  KeybindingImpl,
+  useKeybindingStore
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 export const useExtensionService = () => {
   const extensionStore = useExtensionStore()

src/stores/commandStore.ts

@@ -3,8 +3,10 @@ import { computed, ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ComfyExtension } from '@/types/comfy'
-
-import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'
+import {
+  type KeybindingImpl,
+  useKeybindingStore
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 export interface ComfyCommand {
   id: string

src/stores/workspace/bottomPanelStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { useShortcutsTab } from '@/composables/bottomPanelTabs/useShortcutsTab'
 import {
   useCommandTerminalTab,
   useLogsTerminalTab
@@ -10,6 +9,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import type { ComfyExtension } from '@/types/comfy'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
+import { useShortcutsTab } from '@/workbench/keybindings/composables/useShortcutsTab'
 
 type PanelType = 'terminal' | 'shortcuts'
 

src/types/comfy.ts

@@ -1,8 +1,8 @@
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { Keybinding } from '@/platform/keybinding/types/keybinding'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { Keybinding } from '@/schemas/keyBindingSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { ComfyApp } from '@/scripts/app'
 import type { ComfyWidgetConstructor } from '@/scripts/widgets'

src/views/GraphView.vue

@@ -53,7 +53,6 @@ import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
-import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
@@ -69,6 +68,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
+import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
 
 setupAutoQueueHandler()
 useProgressFavicon()

src/workbench/keybindings/components/KeyComboDisplay.vue

@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
-import type { KeyComboImpl } from '@/stores/keybindingStore'
+import type { KeyComboImpl } from '@/workbench/keybindings/stores/keybindingStore'
 
 const { keyCombo, isModified = false } = defineProps<{
   keyCombo: KeyComboImpl

src/workbench/keybindings/components/KeybindingPanel.vue

@@ -142,17 +142,17 @@ import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import { useKeybindingService } from '@/services/keybindingService'
+import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import { useCommandStore } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
 import {
   KeyComboImpl,
   KeybindingImpl,
   useKeybindingStore
-} from '@/stores/keybindingStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
+} from '@/workbench/keybindings/stores/keybindingStore'
 
-import PanelTemplate from './PanelTemplate.vue'
-import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
+import KeyComboDisplay from './KeyComboDisplay.vue'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }

src/workbench/keybindings/components/shortcuts/EssentialsPanel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="h-full flex flex-col p-4">
+    <div class="flex-1 min-h-0 overflow-auto">
+      <ShortcutsList
+        :commands="essentialsCommands"
+        :subcategories="essentialsSubcategories"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import {
+  ESSENTIALS_CONFIG,
+  useCommandSubcategories
+} from '@/composables/bottomPanelTabs/useCommandSubcategories'
+import { useCommandStore } from '@/stores/commandStore'
+
+import ShortcutsList from './ShortcutsList.vue'
+
+const commandStore = useCommandStore()
+
+const essentialsCommands = computed(() =>
+  commandStore.commands.filter((cmd) => cmd.category === 'essentials')
+)
+
+const { subcategories: essentialsSubcategories } = useCommandSubcategories(
+  essentialsCommands,
+  ESSENTIALS_CONFIG
+)
+</script>

src/workbench/keybindings/components/shortcuts/ShortcutsList.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="shortcuts-list flex justify-center">
+    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
+      <div
+        v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
+        :key="subcategory"
+        class="flex flex-col"
+      >
+        <h3
+          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
+        >
+          {{ getSubcategoryTitle(subcategory) }}
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <div
+            v-for="command in subcategoryCommands"
+            :key="command.id"
+            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
+          >
+            <div class="shortcut-info grow pr-4">
+              <div class="shortcut-name text-sm font-medium">
+                {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
+              </div>
+            </div>
+
+            <div class="keybinding-display shrink-0">
+              <div
+                class="keybinding-combo flex gap-1"
+                :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"
+              >
+                <span
+                  v-for="key in command.keybinding!.combo.getKeySequences()"
+                  :key="key"
+                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
+                >
+                  {{ formatKey(key) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+const { t } = useI18n()
+
+const { subcategories } = defineProps<{
+  commands: ComfyCommandImpl[]
+  subcategories: Record<string, ComfyCommandImpl[]>
+}>()
+
+const filteredSubcategories = computed(() => {
+  const result: Record<string, ComfyCommandImpl[]> = {}
+
+  for (const [subcategory, commands] of Object.entries(subcategories)) {
+    result[subcategory] = commands.filter((cmd) => !!cmd.keybinding)
+  }
+
+  return result
+})
+
+const getSubcategoryTitle = (subcategory: string): string => {
+  const titleMap: Record<string, string> = {
+    workflow: t('shortcuts.subcategories.workflow'),
+    node: t('shortcuts.subcategories.node'),
+    queue: t('shortcuts.subcategories.queue'),
+    view: t('shortcuts.subcategories.view'),
+    'panel-controls': t('shortcuts.subcategories.panelControls')
+  }
+
+  return titleMap[subcategory] || subcategory
+}
+
+const formatKey = (key: string): string => {
+  const keyMap: Record<string, string> = {
+    Control: 'Ctrl',
+    Meta: 'Cmd',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Backspace: '⌫',
+    Delete: '⌦',
+    Enter: '↵',
+    Escape: 'Esc',
+    Tab: '⇥',
+    ' ': 'Space'
+  }
+
+  return keyMap[key] || key
+}
+</script>
+
+<style scoped>
+.subcategory-title {
+  color: var(--p-text-muted-color);
+}
+
+.key-badge {
+  background-color: var(--p-surface-200);
+  border: 1px solid var(--p-surface-300);
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.dark-theme .key-badge {
+  background-color: var(--p-surface-600);
+  border-color: var(--p-surface-500);
+}
+</style>

src/workbench/keybindings/composables/useShortcutsTab.ts

@@ -1,9 +1,9 @@
 import { markRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
-import ViewControlsPanel from '@/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
+import EssentialsPanel from '@/workbench/keybindings/components/shortcuts/EssentialsPanel.vue'
+import ViewControlsPanel from '@/workbench/keybindings/components/shortcuts/ViewControlsPanel.vue'
 
 export const useShortcutsTab = (): BottomPanelExtension[] => {
   const { t } = useI18n()

src/workbench/keybindings/services/keybindingService.ts

@@ -1,4 +1,4 @@
-import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
+import { CORE_KEYBINDINGS } from '@/platform/keybinding/constants/coreKeybindings'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
@@ -7,7 +7,7 @@ import {
   KeyComboImpl,
   KeybindingImpl,
   useKeybindingStore
-} from '@/stores/keybindingStore'
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 export const useKeybindingService = () => {
   const keybindingStore = useKeybindingStore()

src/workbench/keybindings/stores/keybindingStore.ts

@@ -3,8 +3,11 @@ import { defineStore } from 'pinia'
 import type { Ref } from 'vue'
 import { computed, ref, toRaw } from 'vue'
 
-import { RESERVED_BY_TEXT_INPUT } from '@/constants/reservedKeyCombos'
-import type { KeyCombo, Keybinding } from '@/schemas/keyBindingSchema'
+import { RESERVED_BY_TEXT_INPUT } from '@/base/keybinding/reservedKeyCombos'
+import type {
+  KeyCombo,
+  Keybinding
+} from '@/platform/keybinding/types/keybinding'
 
 export class KeybindingImpl implements Keybinding {
   commandId: string

tests-ui/tests/services/keybindingService.escape.test.ts

@@ -1,15 +1,15 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
-import { useKeybindingService } from '@/services/keybindingService'
+import { CORE_KEYBINDINGS } from '@/platform/keybinding/constants/coreKeybindings'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
 import {
   KeyComboImpl,
   KeybindingImpl,
   useKeybindingStore
-} from '@/stores/keybindingStore'
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 // Mock stores
 vi.mock('@/platform/settings/settingStore', () => ({

tests-ui/tests/services/keybindingService.forwarding.test.ts

@@ -2,9 +2,9 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { app } from '@/scripts/app'
-import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
 
 // Mock the app and canvas using factory functions
 vi.mock('@/scripts/app', () => {

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

@@ -1,7 +1,10 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { KeybindingImpl, useKeybindingStore } from '@/stores/keybindingStore'
+import {
+  KeybindingImpl,
+  useKeybindingStore
+} from '@/workbench/keybindings/stores/keybindingStore'
 
 describe('useKeybindingStore', () => {
   beforeEach(() => {