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/LeftSidebar.svelte

@@ -424,7 +424,17 @@
 {/snippet}
 
 <div class="flex h-full flex-col">
-<nav class="flex-1 space-y-3 overflow-y-auto p-3">
+<!--
+	Soft fade at the bottom of the scrolling nav so users with hidden
+	scrollbars (default on macOS) get a visual cue that there's more
+	content below the fold — common when the Heaps list grows long.
+	No JS / scroll listener; the trade-off is the last ~16px is always
+	slightly faded even at scroll-bottom.
+-->
+<nav
+	class="flex-1 space-y-3 overflow-y-auto p-3"
+	style="mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent);"
+>
 	<!-- Folders — top of the sidebar because the root folder is the
 	     default landing view (see filters store init), making it the
 	     primary navigation surface. Root-folder row + subfolder tree;
@@ -478,24 +488,29 @@
 					{rootExpanded ? '▾' : '▸'}
 				</button>
 			{/if}
+			<!--
+				Count badge lives INSIDE the button so the entire row (label
+				+ badge) is one hit target — the badge is the most visually
+				prominent element on the row and was previously a dead zone.
+			-->
 			<button
 				type="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={hasSubfolders}
 				onclick={() => pickFolder('/')}
 				title="Photos directly under originals/"
 			>
 				<span class="truncate">/</span>
+				{#if configQuery.data}
+					<span
+						class="ml-auto shrink-0 rounded px-1 text-[10px] tabular-nums {rootActive
+							? 'bg-primary-foreground/15 text-primary-foreground'
+							: 'bg-secondary text-muted-foreground'}"
+					>
+						{rootCount >= 1000 ? '1000+' : rootCount}
+					</span>
+				{/if}
 			</button>
-			{#if configQuery.data}
-				<span
-					class="ml-auto shrink-0 rounded px-1 text-[10px] tabular-nums {rootActive
-						? 'bg-primary-foreground/15 text-primary-foreground'
-						: 'bg-secondary text-muted-foreground'}"
-				>
-					{rootCount >= 1000 ? '1000+' : rootCount}
-				</span>
-			{/if}
 			<!-- Root-row kebab. Only "New subfolder" applies — root itself
 			     can't be renamed or deleted, so those entries are omitted
 			     entirely rather than greyed out. Hidden until row hover (or
@@ -600,12 +615,11 @@
 				{#each heapsQuery.data ?? [] as heap (heap.UID)}
 					{@const active = isActive('heap', heap.UID)}
 					<!--
-						Count + kebab share the right edge: count is the
-						resting state, kebab swaps in on hover (or while the
-						menu is open). Moving the count out of the inner
-						button is what lets it reach the row's right edge
-						the way Views rows do — and the inner button still
-						owns the navigate-on-click area.
+						Count badge lives INSIDE the button (along with the
+						title) so clicking the badge navigates to the heap —
+						previously the badge was a dead zone. Kebab stays a
+						sibling and swaps in on hover (or while the menu is
+						open), pushing the button slightly left.
 					-->
 					<li
 						class="group flex h-[24px] items-center rounded pr-2 text-[12px] leading-tight hover:bg-accent"
@@ -614,20 +628,20 @@
 						class:hover:bg-primary={active}
 					>
 						<button
-							class="flex min-w-0 flex-1 items-center gap-2 truncate px-2 text-left"
+							class="flex min-w-0 flex-1 items-center gap-2 px-2 text-left"
 							onclick={() => navigateTo('heap', heap.UID)}
 							ondblclick={() => onRenameHeap(heap)}
 							title={`${heap.Title} (${heap.PhotoCount ?? 0})`}
 						>
 							<span class="truncate">{heap.Title}</span>
+							<span
+								class="ml-auto flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded px-1 text-[10px] tabular-nums {active
+									? 'bg-primary-foreground/15 text-primary-foreground'
+									: 'bg-secondary text-muted-foreground'}"
+							>
+								{heap.PhotoCount ?? 0}
+							</span>
 						</button>
-						<span
-							class="ml-auto flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded px-1 text-[10px] tabular-nums {active
-								? 'bg-primary-foreground/15 text-primary-foreground'
-								: 'bg-secondary text-muted-foreground'}"
-						>
-							{heap.PhotoCount ?? 0}
-						</span>
 						<div class="ml-1 hidden group-hover:block has-[[data-state=open]]:block">
 							<KebabMenu label="Heap actions">
 								<Item