From 20c45e267689f191a78e2831f847c94c0626e115 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Fri, 6 Mar 2026 20:17:57 +0500
Subject: [PATCH] Mobile hero: move CTAs to full-width row below cover; fix
 chapter dates still showing on mobile

---
 ui/src/routes/books/[slug]/+page.svelte | 255 ++++++++++++++----------
 1 file changed, 151 insertions(+), 104 deletions(-)

diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index 5ae845d..09bd267 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -172,117 +172,164 @@
 	{/if}
 	<div class="absolute inset-0 bg-gradient-to-b from-zinc-900/60 to-zinc-900/95 pointer-events-none" aria-hidden="true"></div>
 
-	<div class="relative flex gap-5 sm:gap-8 p-5 sm:p-7">
-		<!-- Cover image -->
-		{#if data.book.cover}
-			<img
-				src={data.book.cover}
-				alt={data.book.title}
-				class="w-36 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-zinc-700 shadow-xl self-start"
-			/>
-		{/if}
-
-		<!-- Meta -->
-		<div class="flex flex-col gap-2 min-w-0 flex-1">
-			<!-- Title + "not in library" badge -->
-			<div class="flex items-start gap-2 flex-wrap">
-				<h1 class="text-2xl sm:text-3xl font-bold text-zinc-100 leading-tight">{data.book.title}</h1>
-				{#if !data.inLib}
-					<span
-						class="mt-1 text-xs px-2 py-0.5 rounded-full bg-zinc-700 text-zinc-400 border border-zinc-600 shrink-0"
-						title="This book was fetched live from the source and is not yet in your library"
-					>
-						not in library
-					</span>
-				{/if}
-			</div>
-
-			<!-- Author -->
-			{#if data.book.author}
-				<p class="text-zinc-400 text-sm">{data.book.author}</p>
+	<div class="relative flex flex-col p-5 sm:p-7 gap-4">
+		<!-- Cover + meta row -->
+		<div class="flex gap-5 sm:gap-8">
+			<!-- Cover image -->
+			{#if data.book.cover}
+				<img
+					src={data.book.cover}
+					alt={data.book.title}
+					class="w-28 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-zinc-700 shadow-xl self-start"
+				/>
 			{/if}
 
-			<!-- Status + genres -->
-			<div class="flex flex-wrap gap-1.5 mt-0.5">
-				{#if data.book.status}
-					<span class="text-xs px-2 py-0.5 rounded bg-zinc-700 text-zinc-300 border border-zinc-600">{data.book.status}</span>
-				{/if}
-				{#each genres as genre}
-					<span class="text-xs px-2 py-0.5 rounded bg-zinc-800 text-zinc-400 border border-zinc-700">{genre}</span>
-				{/each}
-			</div>
-
-			<!-- Summary with expand toggle -->
-			{#if data.book.summary}
-				<div class="mt-1">
-					<p class="text-zinc-400 text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
-						{data.book.summary}
-					</p>
-					{#if data.book.summary.length > 220}
-						<button
-							onclick={() => (summaryExpanded = !summaryExpanded)}
-							class="text-xs text-amber-400/70 hover:text-amber-400 mt-1 transition-colors"
+			<!-- Meta -->
+			<div class="flex flex-col gap-2 min-w-0 flex-1">
+				<!-- Title + "not in library" badge -->
+				<div class="flex items-start gap-2 flex-wrap">
+					<h1 class="text-xl sm:text-3xl font-bold text-zinc-100 leading-tight">{data.book.title}</h1>
+					{#if !data.inLib}
+						<span
+							class="mt-1 text-xs px-2 py-0.5 rounded-full bg-zinc-700 text-zinc-400 border border-zinc-600 shrink-0"
+							title="This book was fetched live from the source and is not yet in your library"
 						>
-							{summaryExpanded ? 'Less' : 'More'}
+							not in library
+						</span>
+					{/if}
+				</div>
+
+				<!-- Author -->
+				{#if data.book.author}
+					<p class="text-zinc-400 text-sm">{data.book.author}</p>
+				{/if}
+
+				<!-- Status + genres -->
+				<div class="flex flex-wrap gap-1.5 mt-0.5">
+					{#if data.book.status}
+						<span class="text-xs px-2 py-0.5 rounded bg-zinc-700 text-zinc-300 border border-zinc-600">{data.book.status}</span>
+					{/if}
+					{#each genres as genre}
+						<span class="text-xs px-2 py-0.5 rounded bg-zinc-800 text-zinc-400 border border-zinc-700">{genre}</span>
+					{/each}
+				</div>
+
+				<!-- Summary with expand toggle -->
+				{#if data.book.summary}
+					<div class="mt-1">
+						<p class="text-zinc-400 text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
+							{data.book.summary}
+						</p>
+						{#if data.book.summary.length > 220}
+							<button
+								onclick={() => (summaryExpanded = !summaryExpanded)}
+								class="text-xs text-amber-400/70 hover:text-amber-400 mt-1 transition-colors"
+							>
+								{summaryExpanded ? 'Less' : 'More'}
+							</button>
+						{/if}
+					</div>
+				{/if}
+
+				<!-- CTA buttons — desktop only (hidden on mobile, shown below on mobile) -->
+				<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
+					{#if data.lastChapter}
+						<a
+							href="/books/{data.book.slug}/chapters/{data.lastChapter}"
+							class="px-5 py-2 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
+						>
+							Continue ch.{data.lastChapter}
+						</a>
+					{/if}
+					{#if chapterList.length > 0}
+						<a
+							href="/books/{data.book.slug}/chapters/1"
+							class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors
+								{data.lastChapter
+									? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
+									: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
+						>
+							{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
+						</a>
+					{/if}
+					{#if data.inLib}
+						<button
+							onclick={toggleSave}
+							disabled={saving}
+							title={saved ? 'Remove from library' : 'Add to library'}
+							class="flex items-center justify-center w-9 h-9 rounded-lg border transition-colors disabled:opacity-50
+								{saved
+									? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
+									: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
+						>
+							{#if saving}
+								<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+									<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+									<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+								</svg>
+							{:else if saved}
+								<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+									<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+								</svg>
+							{:else}
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+								</svg>
+							{/if}
 						</button>
 					{/if}
 				</div>
-			{/if}
-
-			<!-- CTA buttons -->
-			<div class="flex gap-2 mt-3 flex-wrap items-center">
-				<!-- Primary: Continue (shown only when there's a last chapter) -->
-				{#if data.lastChapter}
-					<a
-						href="/books/{data.book.slug}/chapters/{data.lastChapter}"
-						class="px-5 py-2 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
-					>
-						Continue ch.{data.lastChapter}
-					</a>
-				{/if}
-
-				<!-- Secondary: Start / Preview ch.1 -->
-				{#if chapterList.length > 0}
-					<a
-						href="/books/{data.book.slug}/chapters/1"
-						class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors
-							{data.lastChapter
-								? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
-								: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
-					>
-						{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
-					</a>
-				{/if}
-
-				<!-- Save: icon-only bookmark button -->
-				{#if data.inLib}
-					<button
-						onclick={toggleSave}
-						disabled={saving}
-						title={saved ? 'Remove from library' : 'Add to library'}
-						class="flex items-center justify-center w-9 h-9 rounded-lg border transition-colors disabled:opacity-50
-							{saved
-								? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
-								: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
-					>
-						{#if saving}
-							<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-							</svg>
-						{:else if saved}
-							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
-							</svg>
-						{:else}
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
-							</svg>
-						{/if}
-					</button>
-				{/if}
 			</div>
 		</div>
+
+		<!-- CTA buttons — mobile only, full-width row below cover+meta -->
+		<div class="flex sm:hidden gap-2 items-center">
+			{#if data.lastChapter}
+				<a
+					href="/books/{data.book.slug}/chapters/{data.lastChapter}"
+					class="flex-1 text-center px-4 py-2.5 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
+				>
+					Continue ch.{data.lastChapter}
+				</a>
+			{/if}
+			{#if chapterList.length > 0}
+				<a
+					href="/books/{data.book.slug}/chapters/1"
+					class="flex-1 text-center px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors
+						{data.lastChapter
+							? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
+							: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
+				>
+					{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
+				</a>
+			{/if}
+			{#if data.inLib}
+				<button
+					onclick={toggleSave}
+					disabled={saving}
+					title={saved ? 'Remove from library' : 'Add to library'}
+					class="flex items-center justify-center w-10 h-10 flex-shrink-0 rounded-lg border transition-colors disabled:opacity-50
+						{saved
+							? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
+							: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
+				>
+					{#if saving}
+						<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+						</svg>
+					{:else if saved}
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+						</svg>
+					{:else}
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+						</svg>
+					{/if}
+				</button>
+			{/if}
+		</div>
 	</div>
 </div>
 
@@ -355,7 +402,7 @@
 						</span>
 						<!-- Date label — desktop only -->
 						{#if (chapter as { date_label?: string }).date_label}
-							<span class="text-xs text-zinc-600 flex-shrink-0 hidden sm:inline">&middot; {(chapter as { date_label?: string }).date_label}</span>
+							<span class="text-xs text-zinc-600 flex-shrink-0 max-sm:hidden">&middot; {(chapter as { date_label?: string }).date_label}</span>
 						{/if}
 						<!-- "reading" badge -->
 						{#if isCurrent}