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/layout/FolderTree.svelte

@@ -142,25 +142,30 @@
 					     left-align with the Views/Heaps rows. -->
 					<span class="inline-block h-[18px] w-4" aria-hidden="true"></span>
 				{/if}
+				<!--
+					Count badge lives INSIDE the button so the entire row (label
+					+ badge) is one hit target — the badge was previously a dead
+					zone right where the user's eye lands.
+				-->
 				<button
-					class="flex min-w-0 flex-1 items-center truncate text-left"
+					class="flex min-w-0 flex-1 items-center text-left"
 					class:px-1={hasChildren || depth > 0}
 					onclick={() => onPick(node.path)}
 					ondblclick={readonly ? undefined : () => onRename?.(node.path)}
 					title={node.path}
 				>
 					<span class="truncate">{node.name}</span>
+					{#if counts && counts[node.path] !== undefined}
+						{@const n = counts[node.path]}
+						<span
+							class="ml-auto shrink-0 rounded px-1 text-[10px] tabular-nums {active
+								? 'bg-primary-foreground/15 text-primary-foreground'
+								: 'bg-secondary text-muted-foreground'}"
+						>
+							{n >= 1000 ? '1000+' : n}
+						</span>
+					{/if}
 				</button>
-				{#if counts && counts[node.path] !== undefined}
-					{@const n = counts[node.path]}
-					<span
-						class="ml-auto shrink-0 rounded px-1 text-[10px] tabular-nums {active
-							? 'bg-primary-foreground/15 text-primary-foreground'
-							: 'bg-secondary text-muted-foreground'}"
-					>
-						{n >= 1000 ? '1000+' : n}
-					</span>
-				{/if}
 				{#if !readonly}
 					<!-- Hover-revealed kebab. `display: none` until row hover
 					     (or while the menu is open via has-[[data-state=open]])