fix(timeline): scroll-driven visibility scan, factor PhotoTile + SkeletonGrid

- visibleRange action rewritten to scan [data-uid-shell] divs on each
  rAF-throttled scroll instead of attaching an IntersectionObserver to
  sample tiles. The observer approach broke on return from /inbox: with
  cached photo data, shells mounted in the same Svelte pass as the
  scroll root and tileRegister fired before any __visibleRange stash
  was in place, so registrations dropped silently. Fast scrolling could
  also strand the observer in a dead zone when every sample tile left
  the viewport before the next was mounted. Shells are always rendered,
  so a DOM scan always finds a true first/last.
- Extract PhotoTile + SkeletonGrid so the timeline and the drill-in
  PhotoGrid share one tile chrome (selection animation, badges,
  hover-only "open preview" affordance).
- FolderTree count badge moves inside the row's button so the badge
  area becomes part of the click target instead of a dead zone.

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

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

@@ -0,0 +1,31 @@
+<!--
+	Loading skeleton for photo grids. Renders a small fixed batch of
+	pulsing tiles in the same column track as the real grid so the layout
+	doesn't shift when data arrives. Used on initial load only — the
+	infinite-scroll "Loading more…" sentinel at the bottom of the timeline
+	is a different signal and stays as text.
+-->
+<script lang="ts">
+	import { view } from '$lib/stores/view.svelte';
+
+	interface Props {
+		/** Number of skeleton tiles. Default ~first-viewport-worth. */
+		count?: number;
+		/** Override the column template (matches the real grid's CSS). */
+		columns?: string;
+	}
+	let { count = 20, columns }: Props = $props();
+	const tracks = $derived(
+		columns ?? `repeat(auto-fill, minmax(${view.thumbnailSize}px, 1fr))`
+	);
+</script>
+
+<div
+	aria-hidden="true"
+	class="grid gap-2"
+	style="grid-template-columns: {tracks};"
+>
+	{#each Array.from({ length: count }) as _, i (i)}
+		<div class="aspect-square animate-pulse rounded-md bg-secondary"></div>
+	{/each}
+</div>