Skip to content

feat: Add comprehensive keyboard shortcuts and VS Code-style Command Palette System#61

Merged
bchou9 merged 2 commits intoResilientApp:mainfrom
saksham-1304:feature/keyboard-shortcuts
Oct 30, 2025
Merged

feat: Add comprehensive keyboard shortcuts and VS Code-style Command Palette System#61
bchou9 merged 2 commits intoResilientApp:mainfrom
saksham-1304:feature/keyboard-shortcuts

Conversation

@saksham-1304
Copy link
Copy Markdown
Contributor

🎯 Overview

This PR introduces a comprehensive keyboard shortcuts system and VS Code-style command palette to ResCanvas, enabling power users to work efficiently without mouse/toolbar interactions.

✨ Features Added

Core System

  • KeyboardShortcutManager - Smart shortcut registration with conflict detection
  • CommandRegistry - Centralized command management with search capabilities
  • CommandPalette - VS Code-style quick command access (Ctrl+K)
  • KeyboardShortcutsHelp - Comprehensive shortcuts reference dialog (Ctrl+/)

User Experience

  • ⌨️ 40+ Keyboard Shortcuts across 6 categories
    • Tools: Single-key shortcuts (P, E, R, C, L, A)
    • Edit: Ctrl+Z (Undo), Ctrl+Shift+Z (Redo)
    • Canvas: Ctrl+R (Refresh), Ctrl+Shift+K (Clear)
    • Commands: Ctrl+K (Palette), Ctrl+/ (Help)
  • 🔍 Fuzzy Search with keyword matching
  • ⬆️ Keyboard Navigation (↑↓ arrows, Enter, Escape)
  • 🕐 Recent Commands tracking in localStorage
  • 🍎 Platform-Aware - Shows ⌘ on Mac, Ctrl on Windows/Linux
  • 🎯 Smart Input Detection - Shortcuts don't fire in text fields

📁 Files Changed

New Files (9)

  • frontend/src/services/KeyboardShortcuts.js (297 lines) - Core shortcut manager
  • frontend/src/services/CommandRegistry.js (297 lines) - Command registry
  • frontend/src/config/shortcuts.js (452 lines) - Default shortcuts config
  • frontend/src/components/CommandPalette.jsx (403 lines) - Command palette UI
  • frontend/src/components/KeyboardShortcutsHelp.jsx (277 lines) - Help dialog
  • frontend/src/styles/KeyboardShortcuts.css (183 lines) - Component styles
  • frontend/src/services/__tests__/KeyboardShortcuts.test.js (442 lines) - Unit tests
  • frontend/src/services/__tests__/CommandRegistry.test.js (422 lines) - Unit tests
  • KEYBOARD_SHORTCUTS.md (393 lines) - Complete documentation

Modified Files (1)

  • frontend/src/components/Canvas.js - Integrated keyboard shortcuts (256 lines added)

🧪 Testing

Unit Tests

  • 55+ test cases covering all core functionality
  • ✅ KeyboardShortcutManager: Registration, execution, conflict detection, platform-specific formatting
  • ✅ CommandRegistry: Command management, search, event listeners
  • ✅ Edge cases: Input field detection, special keys, modifier combinations

Manual Testing

  • ✅ Command palette opens with Ctrl+K
  • ✅ Shortcuts help opens with Ctrl+/
  • ✅ Tool shortcuts work (P, E, R, C, L, A)
  • ✅ Undo/Redo work (Ctrl+Z, Ctrl+Shift+Z)
  • ✅ Shortcuts disabled in text inputs
  • ✅ Keyboard navigation works in dialogs
  • ✅ Recent commands tracked correctly
  • ✅ Platform-specific keys display correctly

📚 Documentation

  • Complete user guide in KEYBOARD_SHORTCUTS.md
  • Architecture documentation with code examples
  • Integration guide for adding new shortcuts
  • Troubleshooting section
  • Updated copilot instructions for AI agents

⚡ Performance

  • No impact on initial load time
  • Lazy initialization of managers
  • Efficient event delegation
  • Minimal memory footprint (~78 KB total)

♿ Accessibility

  • Full keyboard navigation support
  • Focus-visible styles for accessibility
  • ARIA labels on interactive elements
  • Screen reader compatible

🔄 Breaking Changes

None - All changes are additive and backward compatible

📋 Checklist

  • Code follows project style guidelines
  • Self-review completed
  • Comments added for complex logic
  • Documentation updated
  • Unit tests added and passing
  • No console errors or warnings
  • Tested on Chrome, Firefox, Safari
  • Tested on Windows and Mac
  • Mobile responsive design verified

🔗 Related Issues

Closes #45

Note: This PR adds a complete keyboard shortcuts system inspired by VS Code, significantly improving power user productivity and accessibility.

…palette

- Implement KeyboardShortcutManager for shortcut registration and handling
- Add CommandRegistry singleton for centralized command management
- Create CommandPalette component with fuzzy search and keyboard navigation
- Add KeyboardShortcutsHelp dialog with categorized shortcuts display
- Configure 40+ default shortcuts across 6 categories (Tools, Edit, Canvas, etc.)
- Integrate keyboard shortcuts into Canvas component
- Add comprehensive unit tests (55+ test cases)
- Update documentation
Features:
 VS Code-style command palette (Ctrl+K)
 Keyboard shortcuts help dialog (Ctrl+/)
 Platform-specific key display ( for Mac, Ctrl for Windows)
 Smart input field detection
 Recent commands tracking
 Fuzzy search with keyword matching
 Single-key tool shortcuts (P, E, R, C, L, A)
 Undo/Redo shortcuts (Ctrl+Z, Ctrl+Shift+Z)
 Closes #[45]
@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 29, 2025

@saksham-1304 is attempting to deploy a commit to the ResilientDB's projects Team on Vercel.

A member of the Team first needs to authorize it.

@bchou9 bchou9 merged commit 126e39f into ResilientApp:main Oct 30, 2025
2 of 10 checks passed
@saksham-1304 saksham-1304 deleted the feature/keyboard-shortcuts branch October 30, 2025 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Keyboard Shortcuts & Command Palette for Power Users

2 participants