From 84cf6ecab0faade3f83a465270a72868522b88a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 25 Feb 2026 10:15:28 +0100 Subject: [PATCH] feat: remove keyboard shortcuts from media app --- components/media/FileConverter.tsx | 84 +----------------------- components/ui/KeyboardShortcutsModal.tsx | 61 ----------------- lib/media/hooks/useKeyboardShortcuts.ts | 65 ------------------ 3 files changed, 1 insertion(+), 209 deletions(-) delete mode 100644 components/ui/KeyboardShortcutsModal.tsx delete mode 100644 lib/media/hooks/useKeyboardShortcuts.ts diff --git a/components/media/FileConverter.tsx b/components/media/FileConverter.tsx index 27d5ee8..88dc4dc 100644 --- a/components/media/FileConverter.tsx +++ b/components/media/FileConverter.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import { ArrowRight, ArrowDown, Keyboard } from 'lucide-react'; +import { ArrowRight, ArrowDown } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { FileUpload } from './FileUpload'; @@ -22,8 +22,6 @@ import { convertWithImageMagick } from '@/lib/media/converters/imagemagickServic import { addToHistory } from '@/lib/media/storage/history'; import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils'; import { getPresetById, type FormatPreset } from '@/lib/media/utils/formatPresets'; -import { useKeyboardShortcuts, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts'; -import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal'; import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media'; export function FileConverter() { @@ -33,7 +31,6 @@ export function FileConverter() { const [compatibleFormats, setCompatibleFormats] = React.useState([]); const [conversionJobs, setConversionJobs] = React.useState([]); const [conversionOptions, setConversionOptions] = React.useState({}); - const [showShortcutsModal, setShowShortcutsModal] = React.useState(false); const fileInputRef = React.useRef(null); @@ -377,69 +374,6 @@ export function FileConverter() { const isConvertDisabled = selectedFiles.length === 0 || !outputFormat || isConverting; const completedCount = conversionJobs.filter(job => job.status === 'completed').length; - // Define keyboard shortcuts - const shortcuts: KeyboardShortcut[] = [ - { - key: 'o', - ctrl: true, - description: 'Open file dialog', - action: () => { - if (!isConverting) { - fileInputRef.current?.click(); - } - }, - }, - { - key: 'Enter', - ctrl: true, - description: 'Start conversion', - action: () => { - if (!isConvertDisabled) { - handleConvert(); - } - }, - }, - { - key: 's', - ctrl: true, - description: 'Download results', - action: () => { - if (completedCount > 0) { - handleDownloadAll(); - } - }, - }, - { - key: 'r', - ctrl: true, - description: 'Reset converter', - action: () => { - if (!isConverting) { - handleReset(); - } - }, - }, - { - key: '/', - ctrl: true, - description: 'Show keyboard shortcuts', - action: () => setShowShortcutsModal(true), - }, - { - key: 'Escape', - description: 'Close shortcuts modal', - action: () => setShowShortcutsModal(false), - }, - { - key: '?', - description: 'Show keyboard shortcuts', - action: () => setShowShortcutsModal(true), - }, - ]; - - // Enable keyboard shortcuts - useKeyboardShortcuts(shortcuts, !showShortcutsModal); - return (
{/* Header */} @@ -566,22 +500,6 @@ export function FileConverter() { ))}
)} - - {/* Keyboard Shortcuts Button */} - - - {/* Keyboard Shortcuts Modal */} - setShowShortcutsModal(false)} - /> ); } diff --git a/components/ui/KeyboardShortcutsModal.tsx b/components/ui/KeyboardShortcutsModal.tsx deleted file mode 100644 index e0cac94..0000000 --- a/components/ui/KeyboardShortcutsModal.tsx +++ /dev/null @@ -1,61 +0,0 @@ -'use client'; - -import * as React from 'react'; -import { X } from 'lucide-react'; -import { Button } from '@/components/ui/button'; -import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; -import { formatShortcut, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts'; -import { cn } from '@/lib/utils'; - -interface KeyboardShortcutsModalProps { - shortcuts: KeyboardShortcut[]; - isOpen: boolean; - onClose: () => void; -} - -export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) { - React.useEffect(() => { - if (isOpen) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = ''; - } - return () => { - document.body.style.overflow = ''; - }; - }, [isOpen]); - - if (!isOpen) return null; - - return ( -
-
- - - Keyboard Shortcuts - - - -
- {shortcuts.map((shortcut, index) => ( -
- {shortcut.description} - - {formatShortcut(shortcut)} - -
- ))} -
-
- -
- - -
- ); -} diff --git a/lib/media/hooks/useKeyboardShortcuts.ts b/lib/media/hooks/useKeyboardShortcuts.ts deleted file mode 100644 index 611dc94..0000000 --- a/lib/media/hooks/useKeyboardShortcuts.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { useEffect } from 'react'; - -export interface KeyboardShortcut { - key: string; - ctrl?: boolean; - alt?: boolean; - shift?: boolean; - description: string; - action: () => void; -} - -/** - * Hook for managing keyboard shortcuts - */ -export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[], enabled: boolean = true) { - useEffect(() => { - if (!enabled) return; - - const handleKeyDown = (event: KeyboardEvent) => { - // Find matching shortcut - const shortcut = shortcuts.find((s) => { - const keyMatch = s.key.toLowerCase() === event.key.toLowerCase(); - const ctrlMatch = s.ctrl ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey; - const altMatch = s.alt ? event.altKey : !event.altKey; - const shiftMatch = s.shift ? event.shiftKey : !event.shiftKey; - - return keyMatch && ctrlMatch && altMatch && shiftMatch; - }); - - if (shortcut) { - event.preventDefault(); - shortcut.action(); - } - }; - - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [shortcuts, enabled]); -} - -/** - * Format shortcut key combination for display - */ -export function formatShortcut(shortcut: KeyboardShortcut): string { - const parts: string[] = []; - - // Use Cmd on Mac, Ctrl on others - const isMac = typeof window !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform); - - if (shortcut.ctrl) { - parts.push(isMac ? '⌘' : 'Ctrl'); - } - - if (shortcut.alt) { - parts.push(isMac ? '⌥' : 'Alt'); - } - - if (shortcut.shift) { - parts.push(isMac ? '⇧' : 'Shift'); - } - - parts.push(shortcut.key.toUpperCase()); - - return parts.join(' + '); -}