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/dialogs/DeleteFolderDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import clsx from 'clsx'
+import { cn } from '@/lib/utils'
 import { Trash2, Archive } from 'lucide-react'
 
 import {
@@ -124,7 +124,7 @@ function ModeCard({
   return (
     <Label
       htmlFor={id}
-      className={clsx(
+      className={cn(
         'flex w-full cursor-pointer gap-3 rounded-lg border p-3 text-left transition-colors',
         selected
           ? destructive
@@ -135,7 +135,7 @@ function ModeCard({
     >
       <RadioGroupItem id={id} value={value} className="mt-0.5" />
       <div
-        className={clsx(
+        className={cn(
           'mt-0.5 flex-shrink-0',
           selected
             ? destructive
@@ -148,7 +148,7 @@ function ModeCard({
       </div>
       <div className="flex-1">
         <div
-          className={clsx(
+          className={cn(
             'text-sm font-medium',
             selected
               ? destructive