perf+style: grid subscription hygiene, a11y, shadcn-style consistency

Perf / a11y (high-impact review items)
- Timeline arrow-key handler binds once per (viewMode, currentSection)
  and reads fresh state via navStateRef instead of an 8-element dep
  array of new-each-render values.
- usePhotosQuery collapses 14 individual Zustand selectors into one
  useShallow selector returning the params object.
- PhotoThumbnail no longer subscribes to the search query directly;
  Timeline subscribes once and passes it down as a prop.
- PhotoThumbnail gains role="button", tabIndex, aria-label, aria-pressed,
  Enter/Space key handlers and a focus-visible ring. Timeline marked
  role="grid"; RightSidebar marked role="region".

Style consistency
- Swap clsx for cn (tailwind-merge aware) across 17 files so
  conflicting utility classes collapse correctly.
- New Badge primitive (ui/badge.tsx) with default/neutral/overlay/
  outline variants; adopted in ColorsView, RatedView, TagsView for
  the repeated count overlay pill.
- Fix palette drift: text-amber-400 -> text-star, text-green-*
  -> text-pick, text-red-* -> text-reject (5 files).
- Button gains an xs size (h-6 px-1.5 text-[11px]) for the repeated
  compact-button pattern.

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

frontend/src/components/duplicates/DuplicatesView.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState, useEffect, useCallback } from 'react'
 import { Copy, Layers, Sparkles, Trash2, Loader2, Info, Crown } from 'lucide-react'
-import clsx from 'clsx'
+import { cn } from '@/lib/utils'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Button } from '@/components/ui/button'
 import { formatApiError } from '../../lib/apiError'
@@ -323,7 +323,7 @@ function DuplicateGroupSection({
                *  clearance from PhotoThumbnail's outer selection ring. */}
               {isBest && (
                 <span
-                  className={clsx(
+                  className={cn(
                     'pointer-events-none absolute right-1.5 top-1.5 z-10 uppercase',
                     THUMB_BADGE_BASE,
                     THUMB_BADGE_PICK
@@ -343,7 +343,7 @@ function DuplicateGroupSection({
                     e.stopPropagation()
                     setManualBestId(member.id)
                   }}
-                  className={clsx(
+                  className={cn(
                     'absolute right-1.5 top-1.5 z-10 hidden uppercase transition hover:bg-pick group-hover/dup:inline-flex',
                     THUMB_BADGE_BASE,
                     THUMB_BADGE_NEUTRAL
@@ -359,7 +359,7 @@ function DuplicateGroupSection({
                *  (also bottom-left) is tolerated: rated duplicates are
                *  uncommon in practice. */}
               <div
-                className={clsx(
+                className={cn(
                   'pointer-events-none absolute bottom-1 left-1 z-10 font-mono',
                   THUMB_BADGE_BASE,
                   THUMB_BADGE_NEUTRAL