import { useState, useEffect, useRef } from 'react'; import { Button } from '../../ui/button'; import { KeyboardShortcuts } from '../../../utils/settings'; import { getShortcutLabel, formatShortcut } from './KeyboardShortcutsSection'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ pressShortcut: { id: 'shortcutRecorder.pressShortcut', defaultMessage: 'Press shortcut...', }, clickToRecord: { id: 'shortcutRecorder.clickToRecord', defaultMessage: 'Click to record...', }, save: { id: 'shortcutRecorder.save', defaultMessage: 'Save', }, cancel: { id: 'shortcutRecorder.cancel', defaultMessage: 'Cancel', }, conflictWarning: { id: 'shortcutRecorder.conflictWarning', defaultMessage: 'This shortcut is already used by {label}. Saving will reassign it to this action.', }, }); interface ShortcutRecorderProps { value: string; onSave: (shortcut: string) => void; onCancel: () => void; allShortcuts?: KeyboardShortcuts; currentKey?: keyof KeyboardShortcuts; } export function ShortcutRecorder({ value, onSave, onCancel, allShortcuts, currentKey, }: ShortcutRecorderProps) { const intl = useIntl(); const [recording, setRecording] = useState(true); const [capturedShortcut, setCapturedShortcut] = useState(value); const [displayShortcut, setDisplayShortcut] = useState(''); const [conflict, setConflict] = useState(null); const inputRef = useRef(null); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, []); useEffect(() => { if (recording && inputRef.current) { inputRef.current.focus(); } }, [recording]); const handleKeyDown = (e: React.KeyboardEvent) => { if (!recording) return; e.preventDefault(); e.stopPropagation(); // Ignore modifier-only presses if (['Control', 'Meta', 'Alt', 'Shift'].includes(e.key)) { return; } const parts: string[] = []; if (e.ctrlKey || e.metaKey) { parts.push('CommandOrControl'); } if (e.altKey) { parts.push('Alt'); } if (e.shiftKey) { parts.push('Shift'); } let key = e.code && e.code.startsWith('Key') ? e.code.replace('Key', '') : e.key; const keyMap: Record = { ' ': 'Space', Space: 'Space', ArrowUp: 'Up', ArrowDown: 'Down', ArrowLeft: 'Left', ArrowRight: 'Right', Escape: 'Esc', Delete: 'Delete', Backspace: 'Backspace', Tab: 'Tab', Enter: 'Return', Minus: '-', Equal: '=', BracketLeft: '[', BracketRight: ']', Backslash: '\\', Semicolon: ';', Quote: "'", Comma: ',', Period: '.', Slash: '/', Backquote: '`', }; if (e.code && e.code.startsWith('Digit')) { key = e.code.replace('Digit', ''); } else if (keyMap[key] || keyMap[e.code]) { key = keyMap[key] || keyMap[e.code]; } else if (key.length === 1) { key = key.toUpperCase(); } parts.push(key); const accelerator = parts.join('+'); setCapturedShortcut(accelerator); if (allShortcuts && currentKey) { const conflictingKey = Object.entries(allShortcuts).find( ([key, shortcut]) => key !== currentKey && shortcut === accelerator ); if (conflictingKey) { setConflict(conflictingKey[0]); } else { setConflict(null); } } setDisplayShortcut(formatShortcut(accelerator)); setRecording(false); }; const handleStartRecording = () => { setRecording(true); setCapturedShortcut(''); setDisplayShortcut(''); setConflict(null); }; const handleSave = () => { onSave(capturedShortcut); }; const handleCancel = () => { onCancel(); }; return (

{recording ? ( {intl.formatMessage(i18n.pressShortcut)} ) : displayShortcut ? ( {displayShortcut} ) : capturedShortcut ? ( {formatShortcut(capturedShortcut)} ) : ( {intl.formatMessage(i18n.clickToRecord)} )}

{conflict && (

⚠️ {intl.formatMessage(i18n.conflictWarning, { label: getShortcutLabel(conflict, intl.formatMessage), })}

)}

); }