feat: add comprehensive keyboard shortcuts system

Keyboard shortcuts:
- **Ctrl/Cmd + O**: Open file dialog
- **Ctrl/Cmd + Enter**: Start conversion
- **Ctrl/Cmd + S**: Download results (ZIP if multiple)
- **Ctrl/Cmd + R**: Reset converter
- **Ctrl/Cmd + /**: Show keyboard shortcuts help
- **?**: Show keyboard shortcuts help
- **Escape**: Close shortcuts modal

Implementation:
- Created useKeyboardShortcuts custom hook
- Platform-aware keyboard handling (Cmd on Mac, Ctrl elsewhere)
- KeyboardShortcutsModal component with beautiful UI
- Floating keyboard icon button (bottom-right)
- Visual shortcut display with kbd tags
- Context-aware shortcut execution (respects disabled states)
- Prevents default browser behavior for shortcuts

User experience:
- Floating help button always accessible
- Clean modal with shortcut descriptions
- Platform-specific key symbols (⌘ on Mac)
- Shortcuts disabled when modal is open
- Clear visual feedback for shortcuts
- Non-intrusive button placement

Features:
- Smart ref forwarding to FileUpload component
- Conditional shortcut execution based on app state
- Professional kbd styling for key combinations
- Responsive modal with backdrop
- Smooth animations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-17 13:34:11 +01:00
parent 6b0bda05db
commit 3f4fcf39bc
4 changed files with 220 additions and 2 deletions

View File

@@ -13,6 +13,7 @@ export interface FileUploadProps {
accept?: string;
maxSizeMB?: number;
disabled?: boolean;
inputRef?: React.RefObject<HTMLInputElement | null>;
}
export function FileUpload({
@@ -22,9 +23,10 @@ export function FileUpload({
accept,
maxSizeMB = 500,
disabled = false,
inputRef,
}: FileUploadProps) {
const [isDragging, setIsDragging] = React.useState(false);
const fileInputRef = React.useRef<HTMLInputElement>(null);
const fileInputRef = inputRef || React.useRef<HTMLInputElement>(null);
const handleDragEnter = (e: React.DragEvent) => {
e.preventDefault();