feat: loupe view with zoom, pan, video, and filmstrip

Adds the Lightroom-style full-screen single-photo viewer (spec §6.11).
Open with E / Enter / double-click; navigate with arrow keys; Esc returns
to grid. Filmstrip at the bottom auto-scrolls the active cell into view.

Display:
- Stills source from /photos/{id}/proxy so RAW/HEIC are decoded server-
  side; large thumbnail is the onError fallback only.
- Videos render in a <video controls> sourced from /original.
- Continuous wheel zoom (1×–8×, ~15% per tick) with click-drag pan when
  zoomed past fit. Z toggles between fit and natural-resolution
  (computed from naturalWidth / clientWidth); a second Z snaps back.
- Live percentage indicator in the bottom-center while zoomed.

Polish:
- Neighbor preloading via new Image() when currentIndex changes so arrow
  nav feels instant (skips videos).
- Focus trap with role=dialog, aria-modal, focus-on-mount, restore-on-
  unmount, and Tab cycling among focusable children.

Plumbing:
- New canonical Photo TS interface in types/photo.ts; removes the three
  duplicated definitions in PhotoThumbnail/Timeline/photoStore.
- photoStore gains viewMode + openLoupe/closeLoupe.
- useKeyboardShortcuts wires E/Enter/G to open/close, gates rating and
  flag stubs with { enabled: viewMode === 'grid' } so they're inert in
  loupe.
- App.tsx mounts <LoupeView/> as a z-40 overlay covering TopBar, gates
  the auto-open right sidebar effect on viewMode === 'grid' so leaving
  loupe doesn't fight the user's prior sidebar state.
- PhotoThumbnail gains an onDoubleClick prop wired to openLoupe.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import { Timeline } from './components/timeline/Timeline'
 import { LeftSidebar } from './components/layout/LeftSidebar'
 import { RightSidebar } from './components/layout/RightSidebar'
@@ -7,27 +8,40 @@ 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 { usePhotoStore } from './store/photoStore'
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
+import type { Photo } from './types/photo'
 
 function App() {
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(true)
   const [rightSidebarOpen, setRightSidebarOpen] = useState(false)
   const selectedPhotos = usePhotoStore((state) => state.selectedPhotos)
+  const viewMode = usePhotoStore((state) => state.viewMode)
+  const queryClient = useQueryClient()
 
   // Set up global keyboard shortcuts
   useKeyboardShortcuts({
     onToggleLeftSidebar: () => setLeftSidebarOpen(!leftSidebarOpen),
     onToggleRightSidebar: () => setRightSidebarOpen(!rightSidebarOpen),
+    getFirstPhotoId: () => {
+      const photos = queryClient.getQueryData<Photo[]>(['photos'])
+      return photos && photos.length > 0 ? photos[0].id : null
+    },
   })
 
-  // Show right sidebar when photos are selected
-  if (selectedPhotos.length > 0 && !rightSidebarOpen) {
-    setRightSidebarOpen(true)
-  } else if (selectedPhotos.length === 0 && rightSidebarOpen) {
-    setRightSidebarOpen(false)
+  // Auto-show right sidebar when photos are selected — but only in grid mode,
+  // so leaving loupe doesn't fight the user's prior sidebar state.
+  if (viewMode === 'grid') {
+    if (selectedPhotos.length > 0 && !rightSidebarOpen) {
+      setRightSidebarOpen(true)
+    } else if (selectedPhotos.length === 0 && rightSidebarOpen) {
+      setRightSidebarOpen(false)
+    }
   }
 
+  const showRightSidebar = rightSidebarOpen && viewMode === 'grid'
+
   return (
     <div className="flex flex-col h-screen bg-bg text-text">
       <TopBar />
@@ -50,24 +64,27 @@ function App() {
         {/* Right Sidebar */}
         <div
           className={`transition-all duration-200 ${
-            rightSidebarOpen ? 'w-80' : 'w-0'
+            showRightSidebar ? 'w-80' : 'w-0'
           } overflow-hidden border-l border-border bg-surface`}
         >
           <RightSidebar />
         </div>
       </div>
-      
+
       {/* Contextual Keyboard Hints */}
       <KeyboardHints />
-      
+
       {/* Keyboard Shortcuts Legend */}
       <KeyboardShortcuts />
-      
+
       {/* Scan Progress Indicator */}
       <ScanProgress />
-      
+
       {/* Toast Notifications */}
       <ToastContainer />
+
+      {/* Loupe overlay — covers TopBar when active */}
+      {viewMode === 'loupe' && <LoupeView />}
     </div>
   )
 }