From dec11f0c01af1ab2e1c2c89e6d7f7ee0cdeada47 Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Mon, 13 Apr 2026 21:08:51 +0500
Subject: [PATCH] =?UTF-8?q?fix:=20hero=20carousel=20=E2=80=94=20horizontal?=
 =?UTF-8?q?=20book=20spine=20stack=20instead=20of=20vertical=20overlap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/+page.svelte | 88 +++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 45 deletions(-)

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index a618b69..71ff11a 100644
--- a/ui/src/routes/+page.svelte
+++ b/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}