Keyboard Shortcuts & Power User Features

[adriandarian]

Description

Implement comprehensive keyboard shortcuts and power user features to make navigation and actions faster for experienced users.

---

Requirements

• Global keyboard shortcuts
• Command palette (Ctrl+K/Cmd+K)
• Quick switcher
• Vim-style navigation (optional)
• Custom keyboard bindings
• Keyboard shortcuts cheatsheet
• Focus management
• Skip to content links

---

Keyboard Shortcuts

Global Navigation

• Ctrl/Cmd + K - Command palette
• Ctrl/Cmd + / - Shortcuts cheatsheet
• Ctrl/Cmd + S - Quick save
• Esc - Close dialogs/cancel
• ? - Show help

Page Navigation

• g + a - Go to Applications
• g + c - Go to Companies
• g + d - Go to Documents
• g + n - Go to Analytics
• g + s - Go to Settings
• g + h - Go to Home

Application Actions

• n - New application
• e - Edit selected
• d - Delete selected
• x - Select/deselect
• Shift + x - Select all
• / - Focus search
• f - Toggle filters

List Navigation

• j or ↓ - Next item
• k or ↑ - Previous item
• Enter - Open selected
• Ctrl + Enter - Open in new tab
• Shift + Enter - Quick view

Bulk Operations

• Ctrl/Cmd + A - Select all
• Ctrl/Cmd + Click - Multi-select
• Shift + Click - Range select
• Ctrl/Cmd + Shift + D - Bulk delete
• Ctrl/Cmd + Shift + E - Bulk export

Form Actions

• Tab - Next field
• Shift + Tab - Previous field
• Ctrl/Cmd + Enter - Submit form
• Esc - Cancel form

---

Command Palette

Features

• Fuzzy search
• Recent commands
• Frequently used commands
• Keyboard hints
• Grouped commands

Command Categories

┌────────────────────────────────────┐
│ 🔍 Type a command...               │
├────────────────────────────────────┤
│ Navigation                         │
│ › Go to Applications         g a   │
│ › Go to Companies            g c   │
│ › Go to Documents            g d   │
│                                    │
│ Actions                            │
│ › New Application            n     │
│ › Quick Export               e     │
│ › Toggle Filters             f     │
│                                    │
│ Recent                             │
│ › Edit Google Application          │
│ › View Meta Company Profile        │
└────────────────────────────────────┘

---

Quick Switcher

Application Switcher

• Ctrl/Cmd + P - Quick switch
• Type to filter applications
• Shows recent, favorites, pinned
• Jump to any application instantly

┌────────────────────────────────────┐
│ 🔍 Switch to application...        │
├────────────────────────────────────┤
│ Recent                             │
│ 📄 Google - Senior Developer       │
│ 📄 Meta - Product Engineer         │
│                                    │
│ Matching "soft"                    │
│ 📄 Microsoft - Software Eng        │
│ 📄 Softbank - Developer            │
└────────────────────────────────────┘

---

Custom Key Bindings

Configuration UI

┌────────────────────────────────────┐
│ ⌨️ Keyboard Shortcuts              │
├────────────────────────────────────┤
│ Action              Shortcut       │
│ New Application     [n]      [×]   │
│ Quick Search        [/]      [×]   │
│ Command Palette     [Ctrl+K] [×]   │
│ Toggle Sidebar      [b]      [×]   │
│                                    │
│ [+ Add Custom Shortcut]            │
│                                    │
│ [Reset to Defaults] [Save]         │
└────────────────────────────────────┘

User Settings

interface KeyboardSettings {
  shortcuts: Record<string, string>;
  vimMode: boolean;
  modifierKey: 'ctrl' | 'cmd' | 'alt';
  disabled: string[]; // Disabled shortcuts
}

---

Accessibility Features

Focus Management

• Clear focus indicators
• Focus trap in modals
• Skip to main content
• Focus restoration after dialogs
• Keyboard-only navigation

Screen Reader Support

• ARIA labels on all interactive elements
• Status announcements
• Error announcements
• Progress updates
• Live regions

Skip Links

<a href="#main-content" class="skip-link">
  Skip to main content
</a>
<a href="#search" class="skip-link">
  Skip to search
</a>

---

Cheatsheet

Overlay Cheatsheet

┌────────────────────────────────────┐
│ ⌨️ Keyboard Shortcuts    [Print] [×]│
├────────────────────────────────────┤
│ General                            │
│ ?          Show this help          │
│ Ctrl+K     Command palette         │
│ Esc        Close/Cancel            │
│                                    │
│ Navigation                         │
│ g a        Go to Applications      │
│ g c        Go to Companies         │
│ /          Focus search            │
│                                    │
│ Actions                            │
│ n          New application         │
│ e          Edit selected           │
│ x          Select item             │
│                                    │
│ Lists                              │
│ j / ↓      Next item               │
│ k / ↑      Previous item           │
│ Enter      Open item               │
│                                    │
│ [View All Shortcuts]               │
└────────────────────────────────────┘

---

Power User Features

Quick Actions Bar

• Always-visible action bar at bottom
• Contextual actions based on page
• Keyboard hints shown
• Drag to reorder actions

Vim Mode (Optional)

• h j k l - Navigation
• : - Command mode
• dd - Delete item
• yy - Copy item
• p - Paste item
• Visual mode for selection

Batch Operations

• Multi-line editing
• Pattern-based operations
• Macro recording
• Bulk find & replace

---

Technical Implementation

Keyboard Handler

const useKeyboardShortcut = (
  keys: string[],
  callback: () => void,
  options?: {
    enabled?: boolean;
    preventDefault?: boolean;
    allowInInput?: boolean;
  }
) => {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (!options?.enabled) return;
      if (!options?.allowInInput && isInputElement(e.target)) return;
      
      if (keysMatch(e, keys)) {
        if (options?.preventDefault) e.preventDefault();
        callback();
      }
    };
    
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [keys, callback, options]);
};

Command Registry

interface Command {
  id: string;
  name: string;
  description: string;
  shortcut?: string;
  category: string;
  handler: () => void;
  enabled?: boolean;
}

const commandRegistry = new Map<string, Command>();

const registerCommand = (command: Command) => {
  commandRegistry.set(command.id, command);
};

---

Acceptance Criteria

• All major actions have shortcuts
• Command palette functional
• Quick switcher works
• Custom bindings saveable
• Cheatsheet accessible
• Focus management correct
• Works on Mac and Windows
• Screen reader compatible
• No conflicts with browser shortcuts

---

Documentation

In-App Help

• Interactive tutorial
• Contextual tooltips
• Shortcut hints in UI
• Video tutorials

Keyboard Map

• Visual keyboard layout
• Highlighted active shortcuts
• Conflict warnings
• Export/print option