perf+ux: cut grid re-renders, coalesce discard, dedup bulk mutations

Frontend cleanup pass driven by the post-shadcn review.

Performance
- Memoize PhotoThumbnail and route cell click/double-click through
  stable handlers so heap-membership invalidation no longer re-renders
  every visible thumbnail.
- Cap usePhotosQuery's eager background page-walk at 20 pages with a
  50ms inter-page yield — was unbounded (up to 100k photos cold).
- Drop the per-thumbnail loading spinner in favour of the existing
  pulse skeleton; only retry state still surfaces a spinner.

UX
- Coalesce rapid X/U presses into a single undo entry + one toast
  (1.2s window) so accidental bursts are easy to back out.
- Optimistic rating/color updates with per-id snapshot rollback on
  error, matching the existing discard pattern.
- Section-aware empty timeline state with a Clear-all-filters CTA.
- Carry the search-match chip from the grid into the preview header.
- Add a basket-icon badge for active heap membership so the green
  tint isn't the only signal (colorblind-safe).
- Standardise error toasts via formatApiError(): FastAPI detail,
  validation arrays, axios message, with a 'Network Error' filter.

Architecture
- Extract useBulkPhotoMutations and stop duplicating
  bulkRating/bulkColor across RightSidebar and useKeyboardShortcuts.
- Split RightSidebar (714 -> 448 LOC) and PhotoInfoPanel (952 -> 716)
  into co-located sub-components: BulkTakenAtEditor, BulkTagsEditor,
  TagsEditor, TakenAtEditor.

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

frontend/src/hooks/usePhotosQuery.ts

@@ -87,12 +87,19 @@ export function usePhotosQuery() {
     queryFn: async ({ signal }) => {
       // Two-phase fetch using cursor-based (keyset) pagination.
       // Phase 1 returns the first page (resolves the useQuery promise
-      // so consumers exit loading state). Phase 2 chains cursors in
-      // the background — each response includes a `next_cursor` that
+      // so consumers exit loading state). Phase 2 chains a bounded
+      // background loop — each response includes a `next_cursor` that
       // seeks directly to the next slice via an indexed range scan,
       // O(1) regardless of depth (no OFFSET skipping).
+      //
+      // MAX_PAGES is intentionally modest: 20 × 500 = 10 000 photos
+      // covers almost every browsing session up-front without burning
+      // through a 100k library on cold load. If a user scrolls past
+      // that horizon we'll add an infinite-query trigger; for now the
+      // cap keeps cold-load memory / network pressure sane.
       const PER_PAGE = 500
-      const MAX_PAGES = 200
+      const MAX_PAGES = 20
+      const INTER_PAGE_DELAY_MS = 50
 
       const first = await fetchCursorPage(
         { per_page: PER_PAGE, ...filterParams },
@@ -119,6 +126,10 @@ export function usePhotosQuery() {
                 (prev) => (prev ? [...prev, ...more] : more)
               )
               if (!nextCursor || more.length < PER_PAGE) return
+              // Yield a beat between pages so the main thread stays
+              // responsive (thumbnail decode, scroll handling) while
+              // we're back-filling in the background.
+              await new Promise((r) => setTimeout(r, INTER_PAGE_DELAY_MS))
             } catch {
               return
             }