Sebastian Krüger
3f4fcf39bc
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>
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { X, Keyboard } from 'lucide-react';
|
|
import { Button } from './Button';
|
|
import { Card } from './Card';
|
|
import { formatShortcut, type KeyboardShortcut } from '@/lib/hooks/useKeyboardShortcuts';
|
|
|
|
interface KeyboardShortcutsModalProps {
|
|
shortcuts: KeyboardShortcut[];
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-40 animate-fadeIn"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<Card className="w-full max-w-md max-h-[80vh] overflow-y-auto animate-fadeIn">
|
|
<div className="p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-2">
|
|
<Keyboard className="h-5 w-5 text-primary" />
|
|
<h2 className="text-lg font-semibold">Keyboard Shortcuts</h2>
|
|
</div>
|
|
<Button variant="ghost" size="icon" onClick={onClose}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Shortcuts List */}
|
|
<div className="space-y-3">
|
|
{shortcuts.map((shortcut, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between py-2 border-b border-border last:border-0"
|
|
>
|
|
<span className="text-sm text-foreground">{shortcut.description}</span>
|
|
<kbd className="px-2 py-1 text-xs font-semibold text-foreground bg-muted border border-border rounded">
|
|
{formatShortcut(shortcut)}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-6 text-xs text-muted-foreground text-center">
|
|
Press <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted border border-border rounded">Esc</kbd> or{' '}
|
|
<kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted border border-border rounded">?</kbd> to close
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|