markupr 2.1.8 → 2.5.0

package/src/renderer/components/KeyboardShortcuts.tsx

@@ -1,787 +0,0 @@
-/**
- * markupr Keyboard Shortcuts Panel
- *
- * A comprehensive cheatsheet and customization interface featuring:
- * - Organized shortcuts by category (Recording, Navigation, Editing, Annotation)
- * - Real-time search/filter functionality
- * - Platform-aware display (Cmd on macOS, Ctrl on Windows)
- * - Click-to-rebind with conflict detection (for customizable shortcuts)
- * - Accessible modal with keyboard navigation
- *
- * Design: Follows macOS keyboard shortcut panel conventions
- */
-
-import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface Shortcut {
-  id: string;
-  label: string;
-  description?: string;
-  keys: string;
-  category: ShortcutCategory;
-  customizable: boolean;
-}
-
-type ShortcutCategory = 'Recording' | 'Navigation' | 'Editing' | 'Annotation' | 'Window';
-
-interface KeyboardShortcutsProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onRebind?: (shortcutId: string, newKeys: string) => void;
-  customBindings?: Partial<Record<string, string>>;
-}
-
-// ============================================================================
-// Constants
-// ============================================================================
-
-const CATEGORY_ORDER: ShortcutCategory[] = ['Recording', 'Navigation', 'Editing', 'Annotation', 'Window'];
-
-const CATEGORY_ICONS: Record<ShortcutCategory, React.ReactNode> = {
-  Recording: (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
-      <circle cx="8" cy="8" r="2.5" fill="currentColor" />
-    </svg>
-  ),
-  Navigation: (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M8 2v12M2 8h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      <path d="M5 5l3-3 3 3M5 11l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  ),
-  Editing: (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M11.5 2.5l2 2M2 14l1-4L12.5 .5l2 2L5 12l-4 1 1 1z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  ),
-  Annotation: (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M2 11l3-8 3 8M3.5 8h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M12 6v6M10 10h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    </svg>
-  ),
-  Window: (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" strokeWidth="1.5" />
-      <path d="M2 6h12" stroke="currentColor" strokeWidth="1.5" />
-      <circle cx="4" cy="4.5" r="0.5" fill="currentColor" />
-      <circle cx="6" cy="4.5" r="0.5" fill="currentColor" />
-      <circle cx="8" cy="4.5" r="0.5" fill="currentColor" />
-    </svg>
-  ),
-};
-
-const DEFAULT_SHORTCUTS: Shortcut[] = [
-  // Recording
-  {
-    id: 'toggle-recording',
-    label: 'Start/Stop Recording',
-    description: 'Toggle feedback recording session',
-    keys: 'CmdOrCtrl+Shift+F',
-    category: 'Recording',
-    customizable: true,
-  },
-  {
-    id: 'manual-screenshot',
-    label: 'Take Screenshot',
-    description: 'Capture current screen immediately',
-    keys: 'CmdOrCtrl+Shift+S',
-    category: 'Recording',
-    customizable: true,
-  },
-  {
-    id: 'pause-resume',
-    label: 'Pause/Resume',
-    description: 'Temporarily pause recording',
-    keys: 'CmdOrCtrl+Shift+P',
-    category: 'Recording',
-    customizable: true,
-  },
-
-  // Navigation
-  {
-    id: 'open-settings',
-    label: 'Open Settings',
-    description: 'Open preferences panel',
-    keys: 'CmdOrCtrl+,',
-    category: 'Navigation',
-    customizable: false,
-  },
-  {
-    id: 'open-history',
-    label: 'Session History',
-    description: 'View past recording sessions',
-    keys: 'CmdOrCtrl+H',
-    category: 'Navigation',
-    customizable: false,
-  },
-  {
-    id: 'show-shortcuts',
-    label: 'Keyboard Shortcuts',
-    description: 'Show this panel',
-    keys: 'CmdOrCtrl+/',
-    category: 'Navigation',
-    customizable: false,
-  },
-  {
-    id: 'close-dialog',
-    label: 'Close Dialog',
-    description: 'Close current modal or panel',
-    keys: 'Escape',
-    category: 'Navigation',
-    customizable: false,
-  },
-
-  // Editing
-  {
-    id: 'delete-item',
-    label: 'Delete Selected',
-    description: 'Remove selected feedback item',
-    keys: 'Backspace',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'edit-item',
-    label: 'Edit Item',
-    description: 'Open item for editing',
-    keys: 'Enter',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'move-up',
-    label: 'Move Up',
-    description: 'Move item up in list',
-    keys: 'CmdOrCtrl+Up',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'move-down',
-    label: 'Move Down',
-    description: 'Move item down in list',
-    keys: 'CmdOrCtrl+Down',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'undo',
-    label: 'Undo',
-    description: 'Undo last action',
-    keys: 'CmdOrCtrl+Z',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'redo',
-    label: 'Redo',
-    description: 'Redo undone action',
-    keys: 'CmdOrCtrl+Shift+Z',
-    category: 'Editing',
-    customizable: false,
-  },
-  {
-    id: 'select-all',
-    label: 'Select All',
-    description: 'Select all items',
-    keys: 'CmdOrCtrl+A',
-    category: 'Editing',
-    customizable: false,
-  },
-
-  // Annotation Tools
-  {
-    id: 'tool-arrow',
-    label: 'Arrow Tool',
-    description: 'Draw arrows to highlight',
-    keys: '1',
-    category: 'Annotation',
-    customizable: false,
-  },
-  {
-    id: 'tool-circle',
-    label: 'Circle Tool',
-    description: 'Draw circles to highlight',
-    keys: '2',
-    category: 'Annotation',
-    customizable: false,
-  },
-  {
-    id: 'tool-rectangle',
-    label: 'Rectangle Tool',
-    description: 'Draw rectangles to highlight',
-    keys: '3',
-    category: 'Annotation',
-    customizable: false,
-  },
-  {
-    id: 'tool-freehand',
-    label: 'Freehand Tool',
-    description: 'Draw freeform annotations',
-    keys: '4',
-    category: 'Annotation',
-    customizable: false,
-  },
-  {
-    id: 'tool-text',
-    label: 'Text Tool',
-    description: 'Add text annotations',
-    keys: '5',
-    category: 'Annotation',
-    customizable: false,
-  },
-  {
-    id: 'clear-annotations',
-    label: 'Clear Annotations',
-    description: 'Remove all annotations from current item',
-    keys: 'CmdOrCtrl+Backspace',
-    category: 'Annotation',
-    customizable: false,
-  },
-
-  // Window
-  {
-    id: 'minimize-window',
-    label: 'Minimize',
-    description: 'Minimize to dock',
-    keys: 'CmdOrCtrl+M',
-    category: 'Window',
-    customizable: false,
-  },
-  {
-    id: 'quit-app',
-    label: 'Quit',
-    description: 'Exit markupr',
-    keys: 'CmdOrCtrl+Q',
-    category: 'Window',
-    customizable: false,
-  },
-];
-
-// Key symbols for display
-const KEY_SYMBOLS: Record<string, string> = {
-  CmdOrCtrl: '',  // Handled separately
-  Cmd: '\u2318',   // ⌘
-  Ctrl: '',        // Handled separately
-  Control: '',     // Handled separately
-  Shift: '\u21E7', // ⇧
-  Alt: '\u2325',   // ⌥
-  Option: '\u2325',
-  Backspace: '\u232B', // ⌫
-  Delete: '\u2326',    // ⌦
-  Enter: '\u23CE',     // ⏎
-  Return: '\u23CE',
-  Escape: 'Esc',
-  Tab: '\u21E5',       // ⇥
-  Up: '\u2191',        // ↑
-  Down: '\u2193',      // ↓
-  Left: '\u2190',      // ←
-  Right: '\u2192',     // →
-  Space: 'Space',
-};
-
-// ============================================================================
-// Utility Functions
-// ============================================================================
-
-/**
- * Detect if running on macOS
- */
-function isMacOS(): boolean {
-  return typeof navigator !== 'undefined' && navigator.platform.toLowerCase().includes('mac');
-}
-
-/**
- * Format key combination for display
- */
-function formatKeys(keys: string, isMac: boolean): string[] {
-  const parts = keys.split('+');
-
-  return parts.map(part => {
-    const trimmed = part.trim();
-
-    // Handle CmdOrCtrl specially
-    if (trimmed === 'CmdOrCtrl' || trimmed === 'CommandOrControl') {
-      return isMac ? '\u2318' : 'Ctrl';
-    }
-
-    // Handle Cmd/Ctrl
-    if (trimmed === 'Cmd' || trimmed === 'Command') {
-      return isMac ? '\u2318' : 'Ctrl';
-    }
-    if (trimmed === 'Ctrl' || trimmed === 'Control') {
-      return isMac ? '\u2303' : 'Ctrl'; // ⌃ on Mac
-    }
-
-    // Check symbol map
-    if (KEY_SYMBOLS[trimmed]) {
-      return KEY_SYMBOLS[trimmed];
-    }
-
-    // Return as-is (capitalize single letters)
-    return trimmed.length === 1 ? trimmed.toUpperCase() : trimmed;
-  });
-}
-
-// ============================================================================
-// Sub-Components
-// ============================================================================
-
-/**
- * Individual key badge component
- */
-function KeyBadge({ keyText }: { keyText: string }) {
-  const isSymbol = keyText.length === 1 && /[\u2300-\u23FF\u2190-\u21FF]/.test(keyText);
-
-  return (
-    <kbd
-      className={`
-        inline-flex items-center justify-center
-        min-w-[24px] h-6 px-1.5
-        bg-gray-800 border border-gray-600 rounded
-        font-mono text-xs text-gray-200
-        shadow-[0_1px_0_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.1)]
-        ${isSymbol ? 'text-sm' : ''}
-      `}
-    >
-      {keyText}
-    </kbd>
-  );
-}
-
-/**
- * Shortcut row component
- */
-interface ShortcutRowProps {
-  shortcut: Shortcut;
-  isMac: boolean;
-  isEditing: boolean;
-  onStartEdit: () => void;
-  onCancelEdit: () => void;
-  onSaveEdit: (newKeys: string) => void;
-  recordedKeys: string | null;
-  conflict: string | null;
-}
-
-function ShortcutRow({
-  shortcut,
-  isMac,
-  isEditing,
-  onStartEdit,
-  onCancelEdit,
-  onSaveEdit,
-  recordedKeys,
-  conflict,
-}: ShortcutRowProps) {
-  const keyParts = formatKeys(recordedKeys || shortcut.keys, isMac);
-
-  return (
-    <div
-      className={`
-        flex items-center justify-between py-2.5 px-3 rounded-lg
-        transition-colors duration-150
-        ${isEditing
-          ? 'bg-blue-500/20 ring-1 ring-blue-500/50'
-          : 'hover:bg-gray-800/50'
-        }
-        ${shortcut.customizable ? 'cursor-pointer' : ''}
-      `}
-      onClick={shortcut.customizable && !isEditing ? onStartEdit : undefined}
-    >
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-white text-sm font-medium">{shortcut.label}</span>
-          {shortcut.customizable && !isEditing && (
-            <span className="text-[10px] text-gray-500 uppercase tracking-wider">
-              click to edit
-            </span>
-          )}
-        </div>
-        {shortcut.description && (
-          <p className="text-xs text-gray-400 mt-0.5 truncate">{shortcut.description}</p>
-        )}
-        {isEditing && conflict && (
-          <p className="text-xs text-amber-400 mt-1 flex items-center gap-1">
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
-              <path d="M6 0l6 11H0L6 0zm0 4.5v3m0 1.5v1" />
-            </svg>
-            Conflicts with: {conflict}
-          </p>
-        )}
-      </div>
-
-      <div className="flex items-center gap-1.5 ml-3">
-        {isEditing ? (
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1 px-2 py-1 bg-gray-700 rounded border border-gray-600 min-w-[80px]">
-              {recordedKeys ? (
-                keyParts.map((key, i) => (
-                  <React.Fragment key={i}>
-                    {i > 0 && <span className="text-gray-500 text-xs">+</span>}
-                    <KeyBadge keyText={key} />
-                  </React.Fragment>
-                ))
-              ) : (
-                <span className="text-gray-400 text-xs animate-pulse">Press keys...</span>
-              )}
-            </div>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onCancelEdit();
-              }}
-              className="p-1 text-gray-400 hover:text-white"
-              title="Cancel"
-            >
-              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-              </svg>
-            </button>
-            {recordedKeys && !conflict && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onSaveEdit(recordedKeys);
-                }}
-                className="p-1 text-green-400 hover:text-green-300"
-                title="Save"
-              >
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path d="M2 7l4 4 6-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-              </button>
-            )}
-          </div>
-        ) : (
-          keyParts.map((key, i) => (
-            <KeyBadge key={i} keyText={key} />
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function KeyboardShortcuts({
-  isOpen,
-  onClose,
-  onRebind,
-  customBindings = {},
-}: KeyboardShortcutsProps) {
-  const [search, setSearch] = useState('');
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [recordedKeys, setRecordedKeys] = useState<string | null>(null);
-  const [conflict, setConflict] = useState<string | null>(null);
-
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const isMac = useMemo(() => isMacOS(), []);
-
-  // Merge default shortcuts with custom bindings
-  const shortcuts = useMemo(() => {
-    return DEFAULT_SHORTCUTS.map(shortcut => ({
-      ...shortcut,
-      keys: customBindings[shortcut.id] || shortcut.keys,
-    }));
-  }, [customBindings]);
-
-  // Filter shortcuts by search
-  const filteredShortcuts = useMemo(() => {
-    if (!search.trim()) return shortcuts;
-
-    const searchLower = search.toLowerCase();
-    return shortcuts.filter(s =>
-      s.label.toLowerCase().includes(searchLower) ||
-      s.category.toLowerCase().includes(searchLower) ||
-      (s.description?.toLowerCase().includes(searchLower))
-    );
-  }, [shortcuts, search]);
-
-  // Group shortcuts by category
-  const groupedShortcuts = useMemo(() => {
-    const groups: Record<ShortcutCategory, Shortcut[]> = {
-      Recording: [],
-      Navigation: [],
-      Editing: [],
-      Annotation: [],
-      Window: [],
-    };
-
-    filteredShortcuts.forEach(shortcut => {
-      groups[shortcut.category].push(shortcut);
-    });
-
-    return groups;
-  }, [filteredShortcuts]);
-
-  // Check for key conflicts
-  const checkConflict = useCallback((newKeys: string, excludeId: string): string | null => {
-    const conflict = shortcuts.find(s =>
-      s.id !== excludeId &&
-      s.keys.toLowerCase() === newKeys.toLowerCase()
-    );
-    return conflict?.label || null;
-  }, [shortcuts]);
-
-  // Handle key recording for rebinding
-  useEffect(() => {
-    if (!editingId) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      // Build key combination
-      const parts: string[] = [];
-
-      if (e.metaKey || e.ctrlKey) {
-        parts.push('CmdOrCtrl');
-      }
-      if (e.shiftKey) {
-        parts.push('Shift');
-      }
-      if (e.altKey) {
-        parts.push('Alt');
-      }
-
-      // Add the actual key
-      const key = e.key;
-      if (!['Meta', 'Control', 'Shift', 'Alt'].includes(key)) {
-        parts.push(key.length === 1 ? key.toUpperCase() : key);
-      }
-
-      if (parts.length > 0 && !['Meta', 'Control', 'Shift', 'Alt'].includes(key)) {
-        const newKeys = parts.join('+');
-        setRecordedKeys(newKeys);
-        setConflict(checkConflict(newKeys, editingId));
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown, true);
-    return () => window.removeEventListener('keydown', handleKeyDown, true);
-  }, [editingId, checkConflict]);
-
-  // Handle escape to close or cancel editing
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (editingId) {
-          setEditingId(null);
-          setRecordedKeys(null);
-          setConflict(null);
-        } else {
-          onClose();
-        }
-      }
-    };
-
-    if (isOpen && !editingId) {
-      window.addEventListener('keydown', handleKeyDown);
-    }
-
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, editingId, onClose]);
-
-  // Focus search on open
-  useEffect(() => {
-    if (isOpen) {
-      // Small delay to allow animation
-      const timer = setTimeout(() => {
-        searchInputRef.current?.focus();
-      }, 100);
-      return () => clearTimeout(timer);
-    } else {
-      // Reset state on close
-      setSearch('');
-      setEditingId(null);
-      setRecordedKeys(null);
-      setConflict(null);
-    }
-  }, [isOpen]);
-
-  // Handlers
-  const handleStartEdit = (id: string) => {
-    setEditingId(id);
-    setRecordedKeys(null);
-    setConflict(null);
-  };
-
-  const handleCancelEdit = () => {
-    setEditingId(null);
-    setRecordedKeys(null);
-    setConflict(null);
-  };
-
-  const handleSaveEdit = (shortcutId: string, newKeys: string) => {
-    if (onRebind && !conflict) {
-      onRebind(shortcutId, newKeys);
-    }
-    setEditingId(null);
-    setRecordedKeys(null);
-    setConflict(null);
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"
-      onClick={onClose}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="shortcuts-title"
-    >
-      <div
-        className="
-          bg-gray-900 border border-gray-700 rounded-2xl
-          w-full max-w-2xl mx-4
-          max-h-[80vh] overflow-hidden
-          flex flex-col
-          shadow-2xl shadow-black/50
-          animate-in fade-in zoom-in-95 duration-200
-        "
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
-          <h2 id="shortcuts-title" className="text-lg font-semibold text-white">
-            Keyboard Shortcuts
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
-            aria-label="Close"
-          >
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-              <path
-                d="M4 4l10 10M14 4L4 14"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* Search */}
-        <div className="px-6 py-3 border-b border-gray-800">
-          <div className="relative">
-            <svg
-              className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
-              fill="none"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M7 12A5 5 0 107 2a5 5 0 000 10zM14 14l-3.5-3.5"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-            <input
-              ref={searchInputRef}
-              type="text"
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              placeholder="Search shortcuts..."
-              className="
-                w-full bg-gray-800 text-white text-sm
-                pl-10 pr-4 py-2 rounded-lg
-                border border-gray-700
-                focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50
-                focus:outline-none
-                placeholder:text-gray-500
-                transition-colors
-              "
-            />
-            {search && (
-              <button
-                onClick={() => setSearch('')}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
-              >
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Shortcuts List */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
-          {filteredShortcuts.length === 0 ? (
-            <div className="text-center py-8">
-              <p className="text-gray-400">No shortcuts match &ldquo;{search}&rdquo;</p>
-            </div>
-          ) : (
-            CATEGORY_ORDER.map(category => {
-              const categoryShortcuts = groupedShortcuts[category];
-              if (categoryShortcuts.length === 0) return null;
-
-              return (
-                <div key={category}>
-                  <h3 className="flex items-center gap-2 text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">
-                    <span className="text-gray-500">{CATEGORY_ICONS[category]}</span>
-                    {category}
-                  </h3>
-                  <div className="space-y-0.5">
-                    {categoryShortcuts.map(shortcut => (
-                      <ShortcutRow
-                        key={shortcut.id}
-                        shortcut={shortcut}
-                        isMac={isMac}
-                        isEditing={editingId === shortcut.id}
-                        onStartEdit={() => handleStartEdit(shortcut.id)}
-                        onCancelEdit={handleCancelEdit}
-                        onSaveEdit={(newKeys) => handleSaveEdit(shortcut.id, newKeys)}
-                        recordedKeys={editingId === shortcut.id ? recordedKeys : null}
-                        conflict={editingId === shortcut.id ? conflict : null}
-                      />
-                    ))}
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="px-6 py-3 border-t border-gray-800 bg-gray-900/50">
-          <div className="flex items-center justify-between text-xs text-gray-400">
-            <span>
-              Press{' '}
-              <kbd className="px-1.5 py-0.5 bg-gray-800 rounded text-gray-300 border border-gray-700">
-                {isMac ? '\u2318' : 'Ctrl'}+/
-              </kbd>{' '}
-              anytime to show this panel
-            </span>
-            <span className="flex items-center gap-1">
-              {filteredShortcuts.filter(s => s.customizable).length > 0 && (
-                <>
-                  <span className="inline-block w-2 h-2 rounded-full bg-blue-500/50"></span>
-                  Click customizable shortcuts to rebind
-                </>
-              )}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export default KeyboardShortcuts;
-export type { KeyboardShortcutsProps, Shortcut, ShortcutCategory };