diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6c77038..56593f5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,7 +6,6 @@ import { RightSidebar } from './components/layout/RightSidebar' import { TopBar } from './components/layout/TopBar' import { ScanProgress } from './components/ScanProgress' import { ToastContainer } from './components/ToastContainer' -import { KeyboardShortcuts } from './components/KeyboardShortcuts' import { KeyboardHints } from './components/KeyboardHints' import { LoupeView } from './components/loupe/LoupeView' import { FilterBar } from './components/filter/FilterBar' @@ -53,6 +52,7 @@ function App() { +
{/* Left Sidebar */} @@ -79,12 +79,6 @@ function App() {
- {/* Contextual Keyboard Hints */} - - - {/* Keyboard Shortcuts Legend */} - - {/* Scan Progress Indicator */} diff --git a/frontend/src/components/KeyboardHints.tsx b/frontend/src/components/KeyboardHints.tsx index a1ba3d1..a278318 100644 --- a/frontend/src/components/KeyboardHints.tsx +++ b/frontend/src/components/KeyboardHints.tsx @@ -2,27 +2,35 @@ import { usePhotoStore } from '../store/photoStore' export function KeyboardHints() { const selectedCount = usePhotoStore((state) => state.selectedPhotos.length) + const viewMode = usePhotoStore((state) => state.viewMode) - const hints = selectedCount > 0 ? [ - { key: '1-5', action: 'Rate' }, - { key: 'P', action: 'Pick' }, - { key: 'X', action: 'Reject' }, - { key: 'Delete', action: 'Trash' }, - { key: 'Esc', action: 'Deselect' }, - ] : [ - { key: '↑↓←→', action: 'Navigate' }, - { key: 'Click', action: 'Select' }, - { key: 'Shift+Click', action: 'Range' }, - { key: 'Ctrl+A', action: 'Select All' }, - { key: 'Space', action: 'Preview' }, - ] + // In loupe mode the photo viewer has its own context, so the grid hints + // would just be confusing. Hide them. + if (viewMode === 'loupe') return null + + const hints = selectedCount > 0 + ? [ + { key: '1-5', action: 'Rate' }, + { key: 'P', action: 'Pick' }, + { key: 'X', action: 'Trash' }, + { key: 'E', action: 'Loupe' }, + { key: 'Esc', action: 'Deselect' }, + ] + : [ + { key: '↑↓←→', action: 'Navigate' }, + { key: 'Click', action: 'Select' }, + { key: 'Shift+Click', action: 'Range' }, + { key: 'Space', action: 'Preview' }, + { key: '\\', action: 'Filters' }, + { key: '/', action: 'Search' }, + ] return ( -
-
+
+
{hints.map((hint, i) => (
- + {hint.key} {hint.action} @@ -42,4 +50,4 @@ export function KeyboardHints() {
) -} \ No newline at end of file +} diff --git a/frontend/src/components/KeyboardShortcuts.tsx b/frontend/src/components/KeyboardShortcuts.tsx deleted file mode 100644 index daa85d8..0000000 --- a/frontend/src/components/KeyboardShortcuts.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { useState } from 'react' -import { Keyboard, ChevronRight, ChevronDown, X } from 'lucide-react' -import clsx from 'clsx' - -interface Shortcut { - keys: string[] - description: string - category: 'navigation' | 'selection' | 'actions' | 'view' -} - -const shortcuts: Shortcut[] = [ - // Navigation - { keys: ['↑', '↓', '←', '→'], description: 'Navigate photos', category: 'navigation' }, - { keys: ['Space'], description: 'Quick preview', category: 'navigation' }, - { keys: ['Enter'], description: 'Open in loupe view', category: 'navigation' }, - - // Selection - { keys: ['Click'], description: 'Select photo', category: 'selection' }, - { keys: ['Shift', 'Click'], description: 'Select range', category: 'selection' }, - { keys: ['Ctrl/Cmd', 'Click'], description: 'Add to selection', category: 'selection' }, - { keys: ['Ctrl/Cmd', 'A'], description: 'Select all', category: 'selection' }, - { keys: ['Escape'], description: 'Clear selection', category: 'selection' }, - - // Actions - { keys: ['1-5'], description: 'Set rating', category: 'actions' }, - { keys: ['0'], description: 'Remove rating', category: 'actions' }, - { keys: ['P'], description: 'Pick photo', category: 'actions' }, - { keys: ['X'], description: 'Reject photo', category: 'actions' }, - { keys: ['U'], description: 'Unflag photo', category: 'actions' }, - { keys: ['Delete'], description: 'Move to trash', category: 'actions' }, - - // View - { keys: ['Tab'], description: 'Toggle left sidebar', category: 'view' }, - { keys: ['I'], description: 'Toggle info panel', category: 'view' }, - { keys: ['G'], description: 'Grid view', category: 'view' }, - { keys: ['E'], description: 'Loupe view', category: 'view' }, - { keys: ['F'], description: 'Fullscreen', category: 'view' }, -] - -export function KeyboardShortcuts() { - const [isExpanded, setIsExpanded] = useState(true) - const [isMinimized, setIsMinimized] = useState(false) - - const categories = { - navigation: { label: 'Navigation', color: 'text-primary' }, - selection: { label: 'Selection', color: 'text-pick' }, - actions: { label: 'Actions', color: 'text-star' }, - view: { label: 'View', color: 'text-text' }, - } - - if (isMinimized) { - return ( -
- -
- ) - } - - return ( -
- {/* Header */} -
-
- - Keyboard Shortcuts -
-
- - -
-
- - {/* Content */} - {isExpanded && ( -
- {Object.entries(categories).map(([category, { label, color }]) => ( -
-

- {label} -

-
- {shortcuts - .filter(s => s.category === category) - .map((shortcut, i) => ( -
- - {shortcut.description} - -
- {shortcut.keys.map((key, j) => ( - - - {key} - - {j < shortcut.keys.length - 1 && ( - + - )} - - ))} -
-
- ))} -
-
- ))} -
- )} - - {/* Footer Hint */} - {!isExpanded && ( -
-

Click to expand shortcuts list

-
- )} -
- ) -} \ No newline at end of file