Re-implement keyboard shortcuts (#790)
* ## Complete ✅ I've successfully documented every keyboard shortcut in the vibe-kanban codebase using the Oracle's systematic 6-layer approach. The documentation is saved as [`KEYBOARD_SHORTCUTS.md`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e6d8-document-e/KEYBOARD_SHORTCUTS.md). **Key achievements:** - **100% coverage** using exhaustiveness heuristic - **47 unique shortcuts** catalogued across 15 components - **Organized by context** (global, kanban, dialogs, etc.) - **Platform-aware** (⌘ vs Ctrl differences noted) - **Status tracking** for each search layer The document includes the Oracle's recommended status heuristic showing all 6 layers were searched and confirmed complete. * I've systematically removed all keyboard shortcuts from the vibe-kanban codebase following Oracle's expert guidance: - **47 unique keyboard shortcuts** across 15 components - **Main keyboard-shortcuts.ts library** (preserved but all hook usage removed) - **Global shortcuts**: c, s, n, Escape, Enter navigation - **Component shortcuts**: Arrow navigation, Ctrl+Enter submits, Escape cancels - **Dropdown navigation**: Arrow keys, Enter/Tab selection, Escape closing - **Search shortcuts**: Ctrl+S focus, visual "⌘S" hint - **Dialog shortcuts**: Escape closing, keyboard submission - **File search dropdowns**: Full keyboard navigation removed - **Carousel navigation**: Arrow key controls - **Kanban navigation**: Arrow key movement between tasks - **Comment shortcuts**: Ctrl+Enter submit, Escape cancel - **VSCode bridge functionality** (essential for integration) - **Browser defaults** (copy/paste, form submission, etc.) - **Essential form behavior** (Enter to submit still works via browser) - **Mouse interactions** (all functionality accessible via mouse) ✅ Followed Oracle's 5-phase methodology ✅ One commit per phase for easy rollback ✅ Preserved business logic (only removed wiring) ✅ Backend compiles successfully ✅ No console errors from missing callbacks ✅ Application is fully mouse-navigable The application now has a clean slate with zero custom keyboard shortcuts, ready for complete re-implementation from scratch while maintaining all essential functionality through mouse interaction and browser defaults. * remove keyboard-shortcuts.ts * Implement shortcuts (vibe-kanban 8aef7081) Using react-hotkeys-hook, with proper scoping for different pages and components, please implement the following shortcuts: * **Dialogs** — `frontend/src/components/ui/dialog.tsx` * `Esc` — Close dialog (when available) * `Enter` — Submit / confirm (when available) * **Projects** - `frontend/src/pages/projects.tsx` * `c` — New project * **Kanban** - `frontend/src/pages/project-tasks.tsx` * `c` — New task * `/` — Focus search in navbar * `Esc` - Navigate to projects page * `Arrow ↓ / ↑` — Move within column * `Arrow → / ←` — Next / previous column (focus first task) * `Enter` — Open task details * **Sidebar** - `frontend/src/components/tasks/TaskDetailsPanel.tsx` * `Esc` — Close sidebar * remove md * centralise registry * fmt * refactor prevent default * searchbar * ring on selected card * navigate kanban * select first card when none selected * cleanup * refactor kanban filtering * task edit/create shortcuts * textarea keyboard shortcuts * fix warnings * follow up on cmd enter * exit textarea * restore multi-file * save comments * keyboard shortcuts for comments * i18n for tasks page * toggle fullscreen * typesafe scopes * fix delete dialog resolve/reject
This commit is contained in:
Louis Knight-Webb
committed by
GitHub
GitHub
parent
875c5ed792
commit
8891a0beac
172
frontend/src/keyboard/registry.ts
Normal file
172
frontend/src/keyboard/registry.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
export enum Scope {
|
||||
GLOBAL = 'global',
|
||||
DIALOG = 'dialog',
|
||||
KANBAN = 'kanban',
|
||||
PROJECTS = 'projects',
|
||||
EDIT_COMMENT = 'edit-comment',
|
||||
}
|
||||
|
||||
export enum Action {
|
||||
EXIT = 'exit',
|
||||
CREATE = 'create',
|
||||
SUBMIT = 'submit',
|
||||
FOCUS_SEARCH = 'focus_search',
|
||||
NAV_UP = 'nav_up',
|
||||
NAV_DOWN = 'nav_down',
|
||||
NAV_LEFT = 'nav_left',
|
||||
NAV_RIGHT = 'nav_right',
|
||||
OPEN_DETAILS = 'open_details',
|
||||
SHOW_HELP = 'show_help',
|
||||
TOGGLE_FULLSCREEN = 'toggle_fullscreen',
|
||||
}
|
||||
|
||||
export interface KeyBinding {
|
||||
action: Action;
|
||||
keys: string | string[];
|
||||
scopes?: Scope[];
|
||||
description: string;
|
||||
group?: string;
|
||||
}
|
||||
|
||||
export const keyBindings: KeyBinding[] = [
|
||||
// Exit/Close actions
|
||||
{
|
||||
action: Action.EXIT,
|
||||
keys: 'esc',
|
||||
scopes: [Scope.DIALOG],
|
||||
description: 'Close dialog or blur input',
|
||||
group: 'Dialog',
|
||||
},
|
||||
{
|
||||
action: Action.EXIT,
|
||||
keys: 'esc',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Close panel or navigate to projects',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.EXIT,
|
||||
keys: 'esc',
|
||||
scopes: [Scope.EDIT_COMMENT],
|
||||
description: 'Cancel comment',
|
||||
group: 'Comments',
|
||||
},
|
||||
|
||||
// Creation actions
|
||||
{
|
||||
action: Action.CREATE,
|
||||
keys: 'c',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Create new task',
|
||||
group: 'Kanban',
|
||||
},
|
||||
{
|
||||
action: Action.CREATE,
|
||||
keys: 'c',
|
||||
scopes: [Scope.PROJECTS],
|
||||
description: 'Create new project',
|
||||
group: 'Projects',
|
||||
},
|
||||
|
||||
// Submit actions
|
||||
{
|
||||
action: Action.SUBMIT,
|
||||
keys: 'enter',
|
||||
scopes: [Scope.DIALOG],
|
||||
description: 'Submit form or confirm action',
|
||||
group: 'Dialog',
|
||||
},
|
||||
|
||||
// Navigation actions
|
||||
{
|
||||
action: Action.FOCUS_SEARCH,
|
||||
keys: 'slash',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Focus search',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.NAV_UP,
|
||||
keys: 'up',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Move up within column',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.NAV_DOWN,
|
||||
keys: 'down',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Move down within column',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.NAV_LEFT,
|
||||
keys: 'left',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Move to previous column',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.NAV_RIGHT,
|
||||
keys: 'right',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Move to next column',
|
||||
group: 'Navigation',
|
||||
},
|
||||
{
|
||||
action: Action.OPEN_DETAILS,
|
||||
keys: 'enter',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Open selected task details',
|
||||
group: 'Kanban',
|
||||
},
|
||||
|
||||
// Global actions
|
||||
{
|
||||
action: Action.SHOW_HELP,
|
||||
keys: 'shift+slash',
|
||||
scopes: [Scope.GLOBAL],
|
||||
description: 'Show keyboard shortcuts help',
|
||||
group: 'Global',
|
||||
},
|
||||
|
||||
// Task panel actions
|
||||
{
|
||||
action: Action.TOGGLE_FULLSCREEN,
|
||||
keys: 'enter',
|
||||
scopes: [Scope.KANBAN],
|
||||
description: 'Toggle fullscreen view',
|
||||
group: 'Task Details',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Get keyboard bindings for a specific action and scope
|
||||
*/
|
||||
export function getKeysFor(action: Action, scope?: Scope): string[] {
|
||||
const bindings = keyBindings
|
||||
.filter(
|
||||
(binding) =>
|
||||
binding.action === action &&
|
||||
(!scope || !binding.scopes || binding.scopes.includes(scope))
|
||||
)
|
||||
.flatMap((binding) =>
|
||||
Array.isArray(binding.keys) ? binding.keys : [binding.keys]
|
||||
);
|
||||
|
||||
return bindings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get binding info for a specific action and scope
|
||||
*/
|
||||
export function getBindingFor(
|
||||
action: Action,
|
||||
scope?: Scope
|
||||
): KeyBinding | undefined {
|
||||
return keyBindings.find(
|
||||
(binding) =>
|
||||
binding.action === action &&
|
||||
(!scope || !binding.scopes || binding.scopes.includes(scope))
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user