fix: replace {#await} IIFE trick with $effect for streamed data on discover page

The {#await ... then} + {@const} IIFE pattern for assigning to $state
variables stopped working reliably in Svelte 5.53+. Replaced with a
proper $effect that awaits both streamed promises and assigns to state,
which correctly triggers reactivity.

Also: switch library page selection mode entry from long-press to a
'Select' button in the page header.

ui/src/routes/+page.svelte

@@ -136,40 +136,18 @@
 
 <!-- ── Hero carousel ──────────────────────────────────────────────────────────── -->
 {#if heroBook}
-{@const stackBook1 = heroBooks[(heroIndex + 1) % heroBooks.length]}
-{@const stackBook2 = heroBooks[(heroIndex + 2) % heroBooks.length]}
+{@const stackBooks = heroBooks.length > 1
+	? Array.from({ length: Math.min(heroBooks.length - 1, 3) }, (_, i) =>
+		heroBooks[(heroIndex + 1 + i) % heroBooks.length])
+	: []}
 <section class="mb-6">
-	<div class="relative">
-		<!-- Stack layer 2 (furthest back) — only shown on sm+ when there are 3+ books -->
-		{#if heroBooks.length >= 3}
-			<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
-				translate-y-[-6px] translate-x-[10px] scale-[0.94] opacity-40 z-0">
-				{#if stackBook2.book.cover}
-					<img src={stackBook2.book.cover} alt="" aria-hidden="true"
-						class="w-full h-full object-cover" loading="lazy" />
-				{:else}
-					<div class="w-full h-full bg-(--color-surface-2)"></div>
-				{/if}
-			</div>
-		{/if}
-
-		<!-- Stack layer 1 (one behind front) — only shown on sm+ when there are 2+ books -->
-		{#if heroBooks.length >= 2}
-			<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
-				translate-y-[-3px] translate-x-[5px] scale-[0.97] opacity-60 z-[1]">
-				{#if stackBook1.book.cover}
-					<img src={stackBook1.book.cover} alt="" aria-hidden="true"
-						class="w-full h-full object-cover" loading="lazy" />
-				{:else}
-					<div class="w-full h-full bg-(--color-surface-2)"></div>
-				{/if}
-			</div>
-		{/if}
+	<!-- Outer flex row: front card + queued book spines (sm+ only) -->
+	<div class="relative flex items-stretch gap-0">
 
 		<!-- Front card — swipe to navigate -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all z-[2]"
+			class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all z-[2] flex-1 min-w-0"
 			ontouchstart={onSwipeStart}
 			ontouchend={onSwipeEnd}
 		>
@@ -226,23 +204,43 @@
 			</div>
 		</div>
 
-		<!-- Dot indicators -->
-		{#if heroBooks.length > 1}
-			<div class="flex items-center justify-center gap-2 mt-2.5">
-				{#each heroBooks as _, i}
-					<button
-						type="button"
-						onclick={() => heroDot(i)}
-						aria-label="Go to book {i + 1}"
-					>
-						<span class="block rounded-full transition-all duration-300 {i === heroIndex
-							? 'w-4 h-1.5 bg-(--color-brand)'
-							: 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"></span>
-					</button>
-				{/each}
-			</div>
-		{/if}
+		<!-- Queued book spines — visible sm+ only, peek to the right of the front card -->
+		{#each stackBooks as stackBook, i}
+			{@const opacity = i === 0 ? 'opacity-70' : 'opacity-40'}
+			{@const width = i === 0 ? 'sm:w-10' : 'sm:w-7'}
+			<a
+				href="/books/{stackBook.book.slug}/chapters/{stackBook.chapter}"
+				class="hidden sm:block shrink-0 {width} rounded-r-xl overflow-hidden border border-l-0 border-(--color-border) {opacity} hover:opacity-90 transition-opacity"
+				aria-label={stackBook.book.title}
+				tabindex="-1"
+			>
+				{#if stackBook.book.cover}
+					<img src={stackBook.book.cover} alt="" aria-hidden="true"
+						class="w-full h-full object-cover object-left" loading="lazy" />
+				{:else}
+					<div class="w-full h-full bg-(--color-surface-3)"></div>
+				{/if}
+			</a>
+		{/each}
+
 	</div>
+
+	<!-- Dot indicators -->
+	{#if heroBooks.length > 1}
+		<div class="flex items-center justify-center gap-2 mt-2.5">
+			{#each heroBooks as _, i}
+				<button
+					type="button"
+					onclick={() => heroDot(i)}
+					aria-label="Go to book {i + 1}"
+				>
+					<span class="block rounded-full transition-all duration-300 {i === heroIndex
+						? 'w-4 h-1.5 bg-(--color-brand)'
+						: 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"></span>
+				</button>
+			{/each}
+		</div>
+	{/if}
 </section>
 {/if}
 

ui/src/routes/books/+page.svelte

@@ -53,11 +53,6 @@
 		filteredBooks.length > 0 && filteredBooks.every((b) => selected.has(b.slug))
 	);
 
-	function enterSelectMode(slug: string) {
-		selectMode = true;
-		selected = new Set([slug]);
-	}
-
 	function exitSelectMode() {
 		selectMode = false;
 		selected = new Set();
@@ -81,43 +76,11 @@
 		}
 	}
 
-	// Long-press support (pointer events, works on desktop + mobile)
-	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
-	let longPressFired = false;
-
-	function onPointerDown(slug: string) {
-		if (selectMode) return;
-		longPressFired = false;
-		longPressTimer = setTimeout(() => {
-			longPressFired = true;
-			enterSelectMode(slug);
-		}, 500);
-	}
-
-	function onPointerUp() {
-		if (longPressTimer) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-
-	function onPointerCancel() {
-		if (longPressTimer) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-
-	// Prevent navigation click if long-press just fired
+	// Card click: in selection mode, toggle selection; otherwise navigate normally
 	function onCardClick(e: MouseEvent, slug: string) {
 		if (selectMode) {
 			e.preventDefault();
 			toggleSelect(slug);
-			return;
-		}
-		if (longPressFired) {
-			e.preventDefault();
-			longPressFired = false;
 		}
 	}
 
@@ -175,6 +138,14 @@
 		>
 			Cancel
 		</button>
+	{:else if data.books?.length}
+		<button
+			type="button"
+			onclick={() => { selectMode = true; }}
+			class="text-sm text-(--color-muted) hover:text-(--color-text) transition-colors pt-1"
+		>
+			Select
+		</button>
 	{/if}
 </div>
 
@@ -228,9 +199,6 @@
 			<a
 				href="/books/{book.slug}"
 				onclick={(e) => onCardClick(e, book.slug)}
-				onpointerdown={() => onPointerDown(book.slug)}
-				onpointerup={onPointerUp}
-				onpointercancel={onPointerCancel}
 				draggable="false"
 				class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-colors select-none
 					{isSelected

ui/src/routes/discover/+page.svelte

@@ -60,10 +60,17 @@
 		try { return JSON.parse(genres) as string[]; } catch { return []; }
 	}
 
-	// Resolved books from streamed promise (populated in {#await} block via binding trick)
+	// Resolved books from streamed promises — populated via $effect once promises settle
 	let resolvedBooks = $state<Book[]>([]);
 	let resolvedVotedBooks = $state<VotedBook[]>([]);
 
+	$effect(() => {
+		Promise.all([data.streamed.books, data.streamed.votedBooks]).then(([books, vb]) => {
+			resolvedBooks = books as Book[];
+			resolvedVotedBooks = vb as VotedBook[];
+		});
+	});
+
 	let deck = $derived.by(() => {
 		let books = resolvedBooks;
 		if (prefs.onboarded && prefs.genres.length > 0) {
@@ -479,12 +486,6 @@
 </div>
 {/if}
 
-<!-- ── Await streamed data ─────────────────────────────────────────────────────── -->
-{#await Promise.all([data.streamed.books, data.streamed.votedBooks]) then [books, vb]}
-	<!-- Silently populate reactive state once data resolves -->
-	{@const _ = (() => { resolvedBooks = books as Book[]; resolvedVotedBooks = vb as VotedBook[]; return ''; })()}
-{/await}
-
 <!-- ── Page layout ────────────────────────────────────────────────────────────── -->
 <div class="select-none -mx-4 -my-8 lg:min-h-[calc(100svh-3.5rem)]
 	lg:grid lg:grid-cols-[1fr_380px] xl:grid-cols-[1fr_420px]">