|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useEffect, useState, useCallback, useRef } from 'react'; |
| 4 | +import { Keyboard, X } from 'lucide-react'; |
| 5 | +import { useFocusTrap } from '@/hooks/useFocusTrap'; |
| 6 | +import { getAllShortcuts, type KeyboardShortcut } from '@/hooks/useKeyboardShortcuts'; |
| 7 | + |
| 8 | +function formatKey(shortcut: KeyboardShortcut): string { |
| 9 | + const parts: string[] = []; |
| 10 | + if (shortcut.ctrl) parts.push('Ctrl'); |
| 11 | + if (shortcut.alt) parts.push('Alt'); |
| 12 | + if (shortcut.meta) parts.push('Cmd'); |
| 13 | + |
| 14 | + let keyLabel = shortcut.key; |
| 15 | + if (keyLabel === ' ') keyLabel = 'Space'; |
| 16 | + else if (keyLabel === 'Escape') keyLabel = 'Esc'; |
| 17 | + else if (keyLabel === '?') keyLabel = '?'; |
| 18 | + else if (keyLabel.length === 1) keyLabel = keyLabel.toUpperCase(); |
| 19 | + |
| 20 | + if (shortcut.shift && keyLabel !== '?') parts.push('Shift'); |
| 21 | + |
| 22 | + parts.push(keyLabel); |
| 23 | + return parts.join(' + '); |
| 24 | +} |
| 25 | + |
| 26 | +export function KeyboardShortcutsDialog() { |
| 27 | + const [isOpen, setIsOpen] = useState(false); |
| 28 | + const [shortcuts, setShortcuts] = useState<KeyboardShortcut[]>([]); |
| 29 | + const previousFocusRef = useRef<HTMLElement | null>(null); |
| 30 | + |
| 31 | + const handleOpen = useCallback(() => { |
| 32 | + previousFocusRef.current = document.activeElement as HTMLElement; |
| 33 | + setShortcuts(getAllShortcuts()); |
| 34 | + setIsOpen(true); |
| 35 | + }, []); |
| 36 | + |
| 37 | + const handleClose = useCallback(() => { |
| 38 | + setIsOpen(false); |
| 39 | + previousFocusRef.current?.focus(); |
| 40 | + }, []); |
| 41 | + |
| 42 | + useEffect(() => { |
| 43 | + const onShowHelp = () => handleOpen(); |
| 44 | + const onClose = () => { |
| 45 | + if (isOpen) handleClose(); |
| 46 | + }; |
| 47 | + |
| 48 | + window.addEventListener('keyboard-shortcut:show-help', onShowHelp); |
| 49 | + window.addEventListener('keyboard-shortcut:close', onClose); |
| 50 | + |
| 51 | + return () => { |
| 52 | + window.removeEventListener('keyboard-shortcut:show-help', onShowHelp); |
| 53 | + window.removeEventListener('keyboard-shortcut:close', onClose); |
| 54 | + }; |
| 55 | + }, [handleOpen, handleClose, isOpen]); |
| 56 | + |
| 57 | + const focusTrapRef = useFocusTrap(isOpen, { |
| 58 | + onEscape: handleClose, |
| 59 | + initialFocusSelector: '[data-shortcuts-close]', |
| 60 | + }); |
| 61 | + |
| 62 | + if (!isOpen) return null; |
| 63 | + |
| 64 | + const grouped = shortcuts.reduce<Record<string, KeyboardShortcut[]>>((acc, s) => { |
| 65 | + (acc[s.category] = acc[s.category] || []).push(s); |
| 66 | + return acc; |
| 67 | + }, {}); |
| 68 | + |
| 69 | + return ( |
| 70 | + <div |
| 71 | + role="dialog" |
| 72 | + aria-modal="true" |
| 73 | + aria-label="Keyboard shortcuts" |
| 74 | + className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" |
| 75 | + ref={focusTrapRef} |
| 76 | + > |
| 77 | + <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg max-h-[80vh] overflow-hidden"> |
| 78 | + <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"> |
| 79 | + <div className="flex items-center gap-2"> |
| 80 | + <Keyboard size={20} className="text-blue-600 dark:text-blue-400" /> |
| 81 | + <h2 className="text-lg font-semibold text-gray-900 dark:text-white"> |
| 82 | + Keyboard Shortcuts |
| 83 | + </h2> |
| 84 | + </div> |
| 85 | + <button |
| 86 | + type="button" |
| 87 | + onClick={handleClose} |
| 88 | + data-shortcuts-close |
| 89 | + className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
| 90 | + aria-label="Close keyboard shortcuts" |
| 91 | + > |
| 92 | + <X size={18} className="text-gray-500 dark:text-gray-400" /> |
| 93 | + </button> |
| 94 | + </div> |
| 95 | + |
| 96 | + <div className="p-4 overflow-y-auto max-h-[60vh]"> |
| 97 | + {Object.entries(grouped).map(([category, categoryShortcuts]) => ( |
| 98 | + <div key={category} className="mb-4 last:mb-0"> |
| 99 | + <h3 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2"> |
| 100 | + {category} |
| 101 | + </h3> |
| 102 | + <ul className="space-y-1" role="list"> |
| 103 | + {categoryShortcuts.map((shortcut, i) => ( |
| 104 | + <li |
| 105 | + key={`${category}-${i}`} |
| 106 | + className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700/50" |
| 107 | + > |
| 108 | + <span className="text-sm text-gray-700 dark:text-gray-300"> |
| 109 | + {shortcut.description} |
| 110 | + </span> |
| 111 | + <kbd className="inline-flex items-center gap-0.5 px-2 py-0.5 text-xs font-mono font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded"> |
| 112 | + {formatKey(shortcut)} |
| 113 | + </kbd> |
| 114 | + </li> |
| 115 | + ))} |
| 116 | + </ul> |
| 117 | + </div> |
| 118 | + ))} |
| 119 | + </div> |
| 120 | + |
| 121 | + <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50"> |
| 122 | + <p className="text-xs text-center text-gray-500 dark:text-gray-400"> |
| 123 | + Press <kbd className="px-1.5 py-0.5 text-xs font-mono bg-gray-200 dark:bg-gray-700 rounded border border-gray-300 dark:border-gray-600">?</kbd> to toggle this dialog |
| 124 | + </p> |
| 125 | + </div> |
| 126 | + </div> |
| 127 | + </div> |
| 128 | + ); |
| 129 | +} |
| 130 | + |
| 131 | +export default KeyboardShortcutsDialog; |
0 commit comments