feat(web): sidebar root folder + folder counts, drill-in colors/tags/ratings, click semantics rework

Sidebar
- New `/` root-folder entry at the top of the Folders group. Active
  when the timeline is scoped to root; the photo grid post-filters to
  `Path === ''` because PhotoPrism's `path:` operator can't express an
  exact-root match. Collapsible chevron, persisted to its own
  localStorage key, and a kebab carrying just "New subfolder".
- Per-folder count badges. `/api/v1/photos?q=path:X&count=1000` per
  folder in parallel via `listFolderCounts`; root count derived from
  `config.count.all − Σ subfolder counts`.
- Folder tree starts at depth=1 under the root so nested rows indent
  visually relative to `/`.
- Footer matches the Toolbar / action-bar h-9 height.

Timeline interaction
- Single click on a tile selects only that tile (clears others); the
  preview now lives on dblclick. Modifier clicks still go through
  `gridKeyNav`'s document handler (shift = range, cmd/ctrl = toggle).
- `x` (archive) now actually archives — PhotoPrism's photo PUT
  silently drops the Archived field, so we route through
  /batch/photos/{archive,restore} the same way the BulkActionBar
  already did. Mirror for `u`.
- Preview close restores the timeline focus + scrolls the last-shown
  photo into view via `forcedExpand`+`scrollTileIntoView` so it
  actually mounts (selection ring would otherwise stay invisible when
  the user navigated far in preview).
- `applyFolderScope` only narrows the timeline to root when the active
  view is a folder view (no heap / search / non-default section), so
  label clicks / heap views / favorites no longer drop subfolder
  photos.

Action bar
- Inline `h-9` row at the bottom of the main column (not `fixed`),
  matching the Toolbar's visual language. Right sidebar stays full
  height — the bar only spans the timeline width.
- Approve action wired for the review pile.

Colors / Tags / Ratings drill-ins
- New shared `PhotoGrid` component owning tile rendering, selection
  styling, single-click-selects + dblclick-previews, and `setOrder`
  for arrow-key nav.
- Each route's drill-in `<main>` carries `use:gridKeyNav` and a
  trailing `<BulkActionBar />` so shift/cmd/ctrl click, arrow keys,
  and the keyboard shortcuts work the same as the timeline.
- Tags switches from `goto('/?q=label:…')` to an in-place drill-in
  with a back button, mirroring `/colors`'s flow.
- Category cards + drill-in photo cards honour the global
  `view.thumbnailSize` (XS–XL) so the timeline's size selector now
  reaches into all four grids.

Settings
- General-settings dialog merges Appearance into UI and switches free
  text inputs to selects for the PhotoPrism theme / language / start
  page / map style (the value-from-server prepends if it's outside
  the curated list so we never silently rewrite a custom value). Time
  zone uses `<datalist>` with `Intl.supportedValuesOf('timeZone')`.

Sidecar
- Heap convert runs reindex synchronously per source path so the
  client's invalidate-and-refetch sees the moved files.

Inbox
- New /inbox route stub for the upcoming import workflow.

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

web/src/lib/components/timeline/PhotoGrid.svelte

@@ -0,0 +1,106 @@
+<!--
+	Flat photo grid for views that don't need infinite-scroll windowing or
+	month headers — the drill-in screens in /colors, /tags, /ratings. Wears
+	the same tile look + click semantics as the timeline so the user gets
+	selection rings, single-click select, dblclick preview, and arrow-key
+	nav (via `gridKeyNav` on the scroll-root) without per-route plumbing.
+
+	The grid carries `data-photo-grid` so gridKeyNav can measure its
+	column count, and each tile carries `data-tile`+`data-uid` so the
+	action's document-level click handler can pick up shift/cmd/ctrl
+	modifiers and route them through the shared selection helpers.
+-->
+<script lang="ts">
+	import {
+		isSelected,
+		selection,
+		setAnchor,
+		setFocused,
+		setOrder
+	} from '$lib/stores/selection.svelte';
+	import { openPreview } from '$lib/stores/preview.svelte';
+	import { thumbUrl } from '$lib/stores/session.svelte';
+	import { view } from '$lib/stores/view.svelte';
+	import { isVideo, primaryFile, type PpPhoto } from '$lib/types/photoprism';
+
+	interface Props {
+		photos: PpPhoto[];
+		/** Override the column template. Defaults to the global
+		 *  `view.thumbnailSize` so drill-in grids honour the same XS–XL
+		 *  preset the timeline uses. */
+		columns?: string;
+	}
+	let { photos, columns }: Props = $props();
+	const tracks = $derived(
+		columns ?? `repeat(auto-fill, minmax(${view.thumbnailSize}px, 1fr))`
+	);
+
+	const order = $derived(photos.map((p) => p.UID));
+	$effect(() => {
+		setOrder(order);
+	});
+
+	function onClick(e: MouseEvent, uid: string) {
+		// Modifier clicks bubble to gridKeyNav's window handler (range +
+		// toggle paths). Plain clicks reduce the selection to this tile,
+		// matching the timeline's selectOnly semantics.
+		if (e.shiftKey || e.metaKey || e.ctrlKey) return;
+		selection.ids.clear();
+		selection.ids.add(uid);
+		setFocused(uid);
+		setAnchor(uid);
+	}
+
+	function onDblclick(e: MouseEvent, uid: string) {
+		if (e.shiftKey || e.metaKey || e.ctrlKey) return;
+		e.preventDefault();
+		openPreview(uid, order);
+	}
+</script>
+
+<div data-photo-grid class="grid gap-2" style="grid-template-columns: {tracks};">
+	{#each photos as photo (photo.UID)}
+		{@const hash = photo.Hash ?? primaryFile(photo).Hash}
+		{@const sel = isSelected(photo.UID) || selection.focused === photo.UID}
+		<button
+			type="button"
+			data-tile
+			data-uid={photo.UID}
+			onclick={(e) => onClick(e, photo.UID)}
+			ondblclick={(e) => onDblclick(e, photo.UID)}
+			class:scale-90={sel}
+			class:ring-2={sel}
+			class:ring-blue-500={sel}
+			class:ring-offset-2={sel}
+			class:ring-offset-background={sel}
+			class:transition-[transform,box-shadow]={sel}
+			class:duration-300={sel}
+			class:ease-[cubic-bezier(0.34,1.56,0.64,1)]={sel}
+			class="group relative aspect-square overflow-hidden rounded-md border border-border bg-secondary p-0 outline-none focus:outline-none"
+		>
+			<img
+				src={thumbUrl(hash, 'tile_500')}
+				alt={photo.OriginalName ?? photo.Name ?? 'Photo'}
+				loading="lazy"
+				class="h-full w-full object-cover"
+				class:transition={!sel}
+				class:group-hover:scale-105={!sel}
+			/>
+			{#if sel}
+				<div class="pointer-events-none absolute inset-0 bg-blue-500/40"></div>
+			{/if}
+			{#if photo.Favorite}
+				<span
+					class="absolute right-1.5 top-1.5 rounded bg-background/80 px-1 text-xs text-red-500"
+					>♥</span
+				>
+			{/if}
+			{#if isVideo(photo)}
+				<span
+					class="absolute left-1.5 top-1.5 rounded bg-background/80 px-1 text-[10px] font-medium text-foreground"
+					>VIDEO</span
+				>
+			{/if}
+		</button>
+	{/each}
+</div>