docs: add homelab secrets setup instructions

feat: add homelab runner deployment step to release workflow
- Add deploy-homelab job to sync homelab/runner/docker-compose.yml - Rename deploy → deploy-prod for clarity - Both deployments run in parallel after Docker images are pushed - Homelab runner pulls only the runner image and restarts Required secrets (to be added in Gitea): - HOMELAB_HOST (192.168.0.109) - HOMELAB_USER (root) - HOMELAB_SSH_KEY (same as PROD_SSH_KEY or separate) - HOMELAB_SSH_KNOWN_HOSTS (ssh-keyscan -H 192.168.0.109)
2026-04-16 19:08:25 +05:00 · 2026-04-16 19:07:59 +05:00 · 2026-04-16 14:36:40 +05:00 · 2026-04-16 14:19:54 +05:00
5 changed files with 308 additions and 102 deletions
--- a/.gitea/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@@ -103,7 +103,7 @@ jobs:
  #   PROD_USER             — SSH login user (typically root)
  #   PROD_SSH_KEY          — private key whose public half is in authorized_keys
  #   PROD_SSH_KNOWN_HOSTS  — output of: ssh-keyscan -H <PROD_HOST>
-  deploy:
+  deploy-prod:
    name: Deploy to prod
    runs-on: ubuntu-latest
    needs: [docker]
@@ -132,6 +132,43 @@ jobs:
             doppler run -- docker compose pull backend runner ui caddy pocketbase
             doppler run -- docker compose up -d --remove-orphans'

+  # ── deploy homelab runner ─────────────────────────────────────────────────────
+  # Syncs the homelab runner compose file and restarts the runner service.
+  #
+  # Required Gitea secrets:
+  #   HOMELAB_HOST          — homelab server IP (192.168.0.109)
+  #   HOMELAB_USER          — SSH login user (typically root)
+  #   HOMELAB_SSH_KEY       — private key whose public half is in authorized_keys
+  #   HOMELAB_SSH_KNOWN_HOSTS — output of: ssh-keyscan -H <HOMELAB_HOST>
+  deploy-homelab:
+    name: Deploy to homelab
+    runs-on: ubuntu-latest
+    needs: [docker]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install SSH key
+        run: |
+          mkdir -p ~/.ssh
+          printf '%s\n' "${{ secrets.HOMELAB_SSH_KEY }}" > ~/.ssh/homelab_key
+          chmod 600 ~/.ssh/homelab_key
+          printf '%s\n' "${{ secrets.HOMELAB_SSH_KNOWN_HOSTS }}" >> ~/.ssh/known_hosts
+
+      - name: Copy docker-compose.yml to homelab
+        run: |
+          scp -i ~/.ssh/homelab_key \
+            homelab/runner/docker-compose.yml \
+            "${{ secrets.HOMELAB_USER }}@${{ secrets.HOMELAB_HOST }}:/opt/libnovel-runner/docker-compose.yml"
+
+      - name: Pull new runner image and restart
+        run: |
+          ssh -i ~/.ssh/homelab_key \
+            "${{ secrets.HOMELAB_USER }}@${{ secrets.HOMELAB_HOST }}" \
+            'set -euo pipefail
+             cd /opt/libnovel-runner
+             doppler run --project libnovel --config prd_homelab -- docker compose pull runner
+             doppler run --project libnovel --config prd_homelab -- docker compose up -d runner'
+
  # ── Gitea release ─────────────────────────────────────────────────────────────
  release:
    name: Gitea Release
--- a/HOMELAB_SECRETS_SETUP.md
+++ b/HOMELAB_SECRETS_SETUP.md
@@ -0,0 +1,60 @@
+# Homelab Deployment Secrets Setup
+
+The release workflow now includes automatic deployment to the homelab runner server. You need to add these secrets to Gitea.
+
+## Required Secrets
+
+Go to: `https://gitea.kalekber.cc/kamil/libnovel/settings/secrets/actions`
+
+### 1. HOMELAB_HOST
+```
+192.168.0.109
+```
+
+### 2. HOMELAB_USER
+```
+root
+```
+
+### 3. HOMELAB_SSH_KEY
+
+If you want to use the same SSH key as prod:
+- Copy the value from `PROD_SSH_KEY` secret
+
+If you want a separate key:
+```bash
+# On your local machine or CI runner
+cat ~/.ssh/id_rsa  # or your preferred key
+```
+
+### 4. HOMELAB_SSH_KNOWN_HOSTS
+
+Run this when the homelab server is reachable:
+```bash
+ssh-keyscan -H 192.168.0.109 2>/dev/null
+```
+
+Expected output format:
+```
+|1|base64hash...|192.168.0.109 ssh-rsa AAAAB3NzaC...
+|1|base64hash...|192.168.0.109 ecdsa-sha2-nistp256 AAAAE2...
+|1|base64hash...|192.168.0.109 ssh-ed25519 AAAAC3...
+```
+
+## Testing
+
+After adding the secrets, the next release (e.g., v4.1.10) will automatically:
+1. Build all Docker images
+2. Deploy to prod (165.22.70.138) ✅
+3. Deploy to homelab (192.168.0.109) ✅ NEW
+4. Create a Gitea release
+
+Both deployments run in parallel for faster releases.
+
+## Troubleshooting
+
+If the homelab deployment fails:
+- Check that the secrets are set correctly
+- Verify SSH access: `ssh root@192.168.0.109`
+- Check Doppler config exists: `doppler configs --project libnovel`
+- Manually test: `cd /opt/libnovel-runner && doppler run --project libnovel --config prd_homelab -- docker compose pull runner`
--- a/ui/src/lib/components/StarRating.svelte
+++ b/ui/src/lib/components/StarRating.svelte
@@ -16,7 +16,7 @@
 	const display = $derived(hovered || rating || 0);
 </script>

-<div class="flex items-center gap-1">
+<div class="flex items-center gap-2">
 	<div class="flex items-center gap-0.5">
 		{#each [1,2,3,4,5] as star}
 			<button
@@ -44,10 +44,13 @@
 			</button>
 		{/each}
 	</div>
-	{#if avg && count}
-		<span class="text-xs text-(--color-muted) ml-1">{avg} ({count})</span>
-	{:else if avg}
-		<span class="text-xs text-(--color-muted) ml-1">{avg}</span>
+	{#if count > 0}
+		<div class="flex flex-col">
+			<span class="text-sm font-semibold text-(--color-text)">{avg.toFixed(1)}</span>
+			<span class="text-xs text-(--color-muted) leading-none">{count} {count === 1 ? 'rating' : 'ratings'}</span>
+		</div>
+	{:else if !readonly}
+		<span class="text-xs text-(--color-muted)">Rate this book</span>
 	{/if}
 </div>

--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -780,7 +780,7 @@
 			{/if}

 			<!-- Meta -->
-			<div class="flex flex-col gap-2 min-w-0 flex-1">
+			<div class="flex flex-col gap-3 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-(--color-text) leading-tight">{book.title}</h1>
@@ -794,28 +794,57 @@
 					{/if}
 				</div>

-				<!-- Author -->
-				{#if book.author}
-					<p class="text-(--color-muted) text-sm">{book.author}</p>
-				{/if}
+				<!-- Author + Quick Stats -->
+				<div class="flex flex-col gap-1.5">
+					{#if book.author}
+						<p class="text-(--color-text) text-sm font-medium">{book.author}</p>
+					{/if}
+					<!-- Quick Stats Row -->
+					<div class="flex items-center gap-3 flex-wrap text-xs text-(--color-muted)">
+						{#if book.total_chapters}
+							<span class="flex items-center gap-1">
+								<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+								</svg>
+								{book.total_chapters} chapters
+							</span>
+						{/if}
+						{#if ratingAvg.count > 0}
+							<span class="flex items-center gap-1">
+								<svg class="w-3.5 h-3.5 fill-amber-400" viewBox="0 0 24 24">
+									<path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+								</svg>
+								{ratingAvg.avg.toFixed(1)} ({ratingAvg.count} {ratingAvg.count === 1 ? 'rating' : 'ratings'})
+							</span>
+						{/if}
+						{#if data.readersThisWeek && data.readersThisWeek > 0}
+							<span class="flex items-center gap-1">
+								<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+									<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+									<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+								</svg>
+								{data.readersThisWeek} this week
+							</span>
+						{/if}
+					</div>
+				</div>

 				<!-- Status + genres -->
-				<div class="flex flex-wrap gap-1.5 mt-0.5">
+				<div class="flex flex-wrap gap-1.5">
 					{#if book.status}
-						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) border border-(--color-border)">{book.status}</span>
+						<span class="text-xs px-2.5 py-1 rounded-full font-medium
+							{book.status.toLowerCase() === 'ongoing' 
+								? 'bg-green-500/15 text-green-400 border border-green-500/30' 
+								: 'bg-(--color-surface-3) text-(--color-text) border border-(--color-border)'}">
+							{book.status}
+						</span>
 					{/if}
 					{#each genres as genre}
 						<a
 							href="/catalogue?genre={encodeURIComponent(genre)}"
-							class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border) hover:border-(--color-brand)/50 hover:text-(--color-text) transition-colors"
+							class="text-xs px-2.5 py-1 rounded-full bg-(--color-brand)/10 text-(--color-brand) border border-(--color-brand)/20 hover:bg-(--color-brand)/20 hover:border-(--color-brand)/40 transition-colors"
 						>{genre}</a>
 					{/each}
-					{#if data.readersThisWeek && data.readersThisWeek > 0}
-						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border) flex items-center gap-1">
-							<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
-							{data.readersThisWeek} reading this week
-						</span>
-					{/if}
 				</div>


@@ -1020,7 +1049,8 @@

 <!-- ── Book description ──────────────────────────────────────────────────────── -->
 {#if book.summary}
-<div class="mb-6">
+<div class="mb-6 bg-(--color-surface-2)/40 rounded-xl p-5 border border-(--color-border)/50">
+	<h2 class="text-sm font-semibold text-(--color-text) uppercase tracking-wide mb-3">Summary</h2>
 	<div class="relative">
 		<p
 			class="text-(--color-muted) text-sm leading-7 break-words whitespace-pre-line {summaryExpanded ? '' : 'line-clamp-5'}"
@@ -1029,13 +1059,13 @@
 		</p>
 		{#if !summaryExpanded && book.summary.length > 300}
 			<!-- gradient fade over the last line when collapsed -->
-			<div class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-(--color-surface) to-transparent pointer-events-none"></div>
+			<div class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-(--color-surface-2)/40 to-transparent pointer-events-none"></div>
 		{/if}
 	</div>
 	{#if book.summary.length > 300}
 		<button
 			onclick={() => (summaryExpanded = !summaryExpanded)}
-			class="mt-2 text-xs text-(--color-brand)/70 hover:text-(--color-brand) transition-colors inline-flex items-center gap-1"
+			class="mt-3 px-3 py-1.5 text-xs font-medium text-(--color-brand) hover:text-(--color-brand-dim) bg-(--color-brand)/10 hover:bg-(--color-brand)/20 border border-(--color-brand)/20 rounded-lg transition-colors inline-flex items-center gap-1.5"
 		>
 			{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
 			<svg class="w-3 h-3 transition-transform {summaryExpanded ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
--- a/ui/src/routes/discover/+page.svelte
+++ b/ui/src/routes/discover/+page.svelte
@@ -36,6 +36,7 @@
 	let prefs = $state<Prefs>(loadPrefs());
 	// svelte-ignore state_referenced_locally
 	let showOnboarding = $state(!prefs.onboarded);
+	let isEditingPrefs = $state(false);

 	// Onboarding temp state
 	// svelte-ignore state_referenced_locally
@@ -46,11 +47,10 @@
 	function finishOnboarding(skip = false) {
 		if (!skip) {
 			prefs = { genres: tempGenres, status: tempStatus, onboarded: true };
-		} else {
-			prefs = { ...prefs, onboarded: true };
+			savePrefs(prefs);
 		}
-		savePrefs(prefs);
 		showOnboarding = false;
+		isEditingPrefs = false;
 	}

 	// ── Book deck (client-side filtered) ───────────────────────────────────────
@@ -60,6 +60,14 @@
 		try { return JSON.parse(genres) as string[]; } catch { return []; }
 	}

+	function cleanSummary(text: string): string {
+		return text.replace(/^summary\s*/i, '').trim();
+	}
+
+	function capitalizeFirst(s: string): string {
+		return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+	}
+
 	// Resolved books from streamed promises — populated via $effect once promises settle
 	let resolvedBooks = $state<Book[]>([]);
 	let resolvedVotedBooks = $state<VotedBook[]>([]);
@@ -237,6 +245,8 @@
 		read_now: { x: 30,   y: -1300 },
 	};

+	let votedToastTimer: ReturnType<typeof setTimeout> | null = null;
+
 	async function doAction(action: VoteAction) {
 		if (animating || !currentBook) return;
 		animating = true;
@@ -271,6 +281,10 @@
 		animating = false;
 		showPreview = false;

+		// Auto-clear toast after 4 s
+		if (votedToastTimer) clearTimeout(votedToastTimer);
+		votedToastTimer = setTimeout(() => { voted = null; }, 4000);
+
 		if (action === 'read_now') {
 			goto(`/books/${book.slug}`);
 		} else {
@@ -278,6 +292,16 @@
 		}
 	}

+	async function undoLast() {
+		if (!voted || animating) return;
+		const { slug } = voted;
+		voted = null;
+		if (votedToastTimer) { clearTimeout(votedToastTimer); votedToastTimer = null; }
+		votedBooks = votedBooks.filter((v) => v.slug !== slug);
+		if (idx > 0) idx--;
+		await fetch(`/api/discover/vote?slug=${encodeURIComponent(slug)}`, { method: 'DELETE' });
+	}
+
 	async function resetDeck() {
 		await fetch('/api/discover/vote', { method: 'DELETE' });
 		votedBooks = [];
@@ -301,6 +325,10 @@
 	});
 </script>

+<svelte:head>
+	<title>Discover — libnovel</title>
+</svelte:head>
+
 <!-- ── Onboarding modal ───────────────────────────────────────────────────────── -->
 {#if showOnboarding}
 <div class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
@@ -349,11 +377,11 @@
 			<div class="flex gap-3">
 				<button type="button" onclick={() => finishOnboarding(true)}
 					class="flex-1 py-2.5 rounded-xl text-sm font-medium text-(--color-muted) hover:text-(--color-text) transition-colors">
-					Skip
+					{isEditingPrefs ? 'Cancel' : 'Skip'}
 				</button>
 				<button type="button" onclick={() => finishOnboarding(false)}
 					class="flex-[2] py-2.5 rounded-xl text-sm font-bold bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) transition-colors">
-					Start Discovering
+					{isEditingPrefs ? 'Save Preferences' : 'Start Discovering'}
 				</button>
 			</div>
 		</div>
@@ -395,11 +423,11 @@
 				<p class="text-sm text-(--color-muted) mb-3">{previewBook.author}</p>
 			{/if}
 			{#if previewBook.summary}
-				<p class="text-sm text-(--color-muted) leading-relaxed line-clamp-5 mb-4">{previewBook.summary}</p>
+				<p class="text-sm text-(--color-muted) leading-relaxed line-clamp-5 mb-4">{cleanSummary(previewBook.summary)}</p>
 			{/if}
 			<div class="flex flex-wrap gap-2 mb-5">
 				{#each parseBookGenres(previewBook.genres).slice(0, 4) as genre}
-					<span class="text-xs px-2 py-0.5 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
+					<span class="text-xs px-2 py-0.5 rounded-full bg-(--color-surface-3) text-(--color-muted)">{capitalizeFirst(genre)}</span>
 				{/each}
 				{#if previewBook.status}
 					<span class="text-xs px-2 py-0.5 rounded-full bg-(--color-surface-3) text-(--color-text)">{previewBook.status}</span>
@@ -486,6 +514,37 @@
 </div>
 {/if}

+<!-- ── Voted toast ─────────────────────────────────────────────────────────────── -->
+{#if voted}
+{@const toastBg = voted.action === 'like' ? 'bg-green-500/15 border-green-500/30' : voted.action === 'read_now' ? 'bg-blue-500/15 border-blue-500/30' : 'bg-(--color-surface-2) border-(--color-border)'}
+{@const toastColor = voted.action === 'like' ? 'text-green-400' : voted.action === 'read_now' ? 'text-blue-400' : 'text-(--color-muted)'}
+<div class="fixed bottom-24 left-1/2 -translate-x-1/2 z-30 flex items-center gap-3 px-4 py-3
+	rounded-2xl {toastBg} border shadow-xl text-sm whitespace-nowrap pointer-events-auto animate-in slide-in-from-bottom-2 duration-200">
+	<div class="flex items-center gap-2">
+		{#if voted.action === 'like'}
+			<svg class="w-4 h-4 {toastColor}" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+			</svg>
+		{:else if voted.action === 'read_now'}
+			<svg class="w-4 h-4 {toastColor}" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M8 5v14l11-7z"/>
+			</svg>
+		{:else}
+			<svg class="w-4 h-4 {toastColor}" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+			</svg>
+		{/if}
+		<span class="font-semibold {toastColor}">
+			{voted.action === 'like' ? 'Added to Library' : voted.action === 'read_now' ? 'Opening Book...' : 'Skipped'}
+		</span>
+	</div>
+	<button type="button" onclick={undoLast}
+		class="px-2 py-1 rounded-lg text-xs font-bold text-(--color-text) hover:bg-(--color-surface-3)/50 transition-colors">
+		Undo
+	</button>
+</div>
+{/if}
+
 <!-- ── 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]">
@@ -496,34 +555,43 @@
 		min-h-[calc(100svh-3.5rem)] lg:border-r lg:border-(--color-border)">

 		<!-- Header row -->
-		<div class="w-full max-w-sm lg:max-w-none flex items-center justify-between mb-4 shrink-0">
-			<div>
-				<h1 class="text-xl font-bold text-(--color-text)">Discover</h1>
-				{#if !loading && !deckEmpty}
-					<p class="text-xs text-(--color-muted)">{totalRemaining} books left</p>
-				{/if}
-			</div>
-			<div class="flex items-center gap-1">
-				<button type="button" onclick={() => (showHistory = true)} title="History"
-					class="relative w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors">
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-					</svg>
-					{#if votedBooks.length}
-						<span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[9px] font-bold flex items-center justify-center leading-none">
-							{votedBooks.length > 9 ? '9+' : votedBooks.length}
-						</span>
+		<div class="w-full max-w-sm lg:max-w-none flex flex-col gap-3 mb-4 shrink-0">
+			<div class="flex items-center justify-between">
+				<div>
+					<h1 class="text-xl font-bold text-(--color-text)">Discover</h1>
+					{#if !loading && !deckEmpty}
+						<p class="text-xs text-(--color-muted)">{totalRemaining} of {deck.length} books remaining</p>
 					{/if}
-				</button>
-				<button type="button"
-					onclick={() => { showOnboarding = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
-					title="Preferences"
-					class="w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors">
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-					</svg>
-				</button>
+				</div>
+				<div class="flex items-center gap-1">
+					<button type="button" onclick={() => (showHistory = true)} title="History"
+						class="relative w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors">
+						<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+						</svg>
+						{#if votedBooks.length}
+							<span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[9px] font-bold flex items-center justify-center leading-none">
+								{votedBooks.length > 9 ? '9+' : votedBooks.length}
+							</span>
+						{/if}
+					</button>
+					<button type="button"
+						onclick={() => { showOnboarding = true; isEditingPrefs = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
+						title="Preferences"
+						class="w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors">
+						<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+						</svg>
+					</button>
+				</div>
 			</div>
+			<!-- Progress bar -->
+			{#if !loading && !deckEmpty && deck.length > 0}
+				<div class="w-full h-1.5 bg-(--color-surface-2) rounded-full overflow-hidden">
+					<div class="h-full bg-(--color-brand) transition-all duration-500 ease-out rounded-full"
+						style="width: {((idx / deck.length) * 100).toFixed(1)}%"></div>
+				</div>
+			{/if}
 		</div>

 		{#if loading}
@@ -539,23 +607,41 @@

 		{:else if deckEmpty}
 			<!-- ── Empty state ───────────────────────────────────────────────── -->
-			<div class="flex-1 flex flex-col items-center justify-center gap-6 text-center max-w-xs">
-				<div class="w-20 h-20 rounded-full bg-(--color-surface-2) flex items-center justify-center text-4xl">📚</div>
+			<div class="flex-1 flex flex-col items-center justify-center gap-6 text-center max-w-sm px-4">
+				<div class="relative">
+					<div class="w-24 h-24 rounded-full bg-(--color-brand)/10 flex items-center justify-center text-5xl border-4 border-(--color-brand)/20">
+						🎉
+					</div>
+					<div class="absolute -top-1 -right-1 w-8 h-8 rounded-full bg-green-500/20 border-2 border-green-500/40 flex items-center justify-center">
+						<svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+						</svg>
+					</div>
+				</div>
 				<div>
-					<h2 class="text-lg font-bold text-(--color-text) mb-2">All caught up!</h2>
-					<p class="text-sm text-(--color-muted)">
-						You've seen all available books.
-						{#if prefs.genres.length > 0}Try adjusting your preferences to see more.
-						{:else}Check your library for books you liked.{/if}
+					<h2 class="text-xl font-bold text-(--color-text) mb-2">All Caught Up!</h2>
+					<p class="text-sm text-(--color-muted) leading-relaxed">
+						You've explored all {deck.length} books in your discover queue.
+						{#if prefs.genres.length > 0}
+							<br />Try adjusting your genre preferences to discover more.
+						{:else}
+							<br />Set your preferences to get personalized recommendations.
+						{/if}
 					</p>
 				</div>
-				<div class="flex flex-col gap-2 w-full">
-					<a href="/books" class="py-2.5 rounded-xl text-sm font-bold bg-(--color-brand) text-(--color-surface) text-center hover:bg-(--color-brand-dim) transition-colors">
-						My Library
-					</a>
+				<div class="flex flex-col gap-3 w-full">
+					{#if votedBooks.filter(v => v.action === 'like' || v.action === 'read_now').length > 0}
+						<a href="/books" class="py-3 rounded-xl text-sm font-bold bg-(--color-brand) text-(--color-surface) text-center hover:bg-(--color-brand-dim) transition-colors shadow-lg shadow-(--color-brand)/20">
+							View My Library
+						</a>
+					{/if}
+					<button type="button" onclick={() => { showOnboarding = true; isEditingPrefs = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
+						class="py-3 rounded-xl text-sm font-semibold bg-(--color-surface-2) text-(--color-text) hover:bg-(--color-surface-3) transition-colors border border-(--color-border)">
+						Change Preferences
+					</button>
 					<button type="button" onclick={resetDeck}
-						class="py-2.5 rounded-xl text-sm font-medium bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) transition-colors">
-						Start over
+						class="py-2 rounded-xl text-sm font-medium text-(--color-muted) hover:text-(--color-text) transition-colors">
+						Start Over
 					</button>
 				</div>
 			</div>
@@ -619,7 +705,7 @@
 						{#if book.author}<p class="text-white/70 text-sm mb-2">{book.author}</p>{/if}
 						<div class="flex flex-wrap gap-1.5 items-center">
 							{#each parseBookGenres(book.genres).slice(0, 2) as genre}
-								<span class="text-xs bg-white/15 text-white/90 px-2 py-0.5 rounded-full backdrop-blur-sm">{genre}</span>
+								<span class="text-xs bg-white/15 text-white/90 px-2 py-0.5 rounded-full backdrop-blur-sm">{capitalizeFirst(genre)}</span>
 							{/each}
 							{#if book.status}
 								<span class="text-xs bg-white/10 text-white/60 px-2 py-0.5 rounded-full">{book.status}</span>
@@ -674,8 +760,27 @@
 				</button>
 			</div>

+			<!-- Swipe hint (mobile only, shown while cards remain) -->
+			<p class="lg:hidden text-xs text-(--color-muted)/60 mt-2 shrink-0 text-center">Swipe ← skip · swipe → like · tap for details</p>
 			<!-- Keyboard hint (desktop only) -->
-			<p class="hidden lg:block text-xs text-(--color-muted)/40 mt-2 shrink-0">← Skip · ↑ Read now · → Like · Space for details</p>
+			<div class="hidden lg:flex items-center justify-center gap-4 mt-3 shrink-0">
+				<div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/30">
+					<kbd class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-(--color-surface-3) text-(--color-muted) border border-(--color-border)">←</kbd>
+					<span class="text-xs text-(--color-muted)">Skip</span>
+				</div>
+				<div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/30">
+					<kbd class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-(--color-surface-3) text-(--color-muted) border border-(--color-border)">↑</kbd>
+					<span class="text-xs text-(--color-muted)">Read</span>
+				</div>
+				<div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/30">
+					<kbd class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-(--color-surface-3) text-(--color-muted) border border-(--color-border)">→</kbd>
+					<span class="text-xs text-(--color-muted)">Like</span>
+				</div>
+				<div class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/30">
+					<kbd class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-(--color-surface-3) text-(--color-muted) border border-(--color-border)">Space</kbd>
+					<span class="text-xs text-(--color-muted)">Details</span>
+				</div>
+			</div>
 		{/if}
 	</div>

@@ -711,7 +816,7 @@
 				<!-- Metadata pills -->
 				<div class="flex flex-wrap gap-2">
 					{#each parseBookGenres(book.genres).slice(0, 5) as genre}
-						<span class="text-xs px-2.5 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
+						<span class="text-xs px-2.5 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{capitalizeFirst(genre)}</span>
 					{/each}
 					{#if book.status}
 						<span class="text-xs px-2.5 py-1 rounded-full bg-(--color-surface-3) text-(--color-text) font-medium">{book.status}</span>
@@ -735,38 +840,9 @@
 				{#if book.summary}
 					<div>
 						<p class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Summary</p>
-						<p class="text-sm text-(--color-muted) leading-relaxed">{book.summary}</p>
+						<p class="text-sm text-(--color-muted) leading-relaxed">{cleanSummary(book.summary)}</p>
 					</div>
 				{/if}
-
-				<!-- Action buttons (duplicated for desktop convenience) -->
-				<div class="mt-auto flex flex-col gap-2.5 pt-4 border-t border-(--color-border)">
-					<button type="button" onclick={() => doAction('read_now')} disabled={animating}
-						class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-blue-500 text-white font-bold text-sm hover:bg-blue-400 active:scale-95 transition-all disabled:opacity-40 shadow-lg shadow-blue-500/20">
-						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-						Read Now
-					</button>
-					<div class="flex gap-2">
-						<button type="button" onclick={() => doAction('skip')} disabled={animating}
-							class="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl bg-red-500/15 border border-red-500/30 text-red-400 text-sm font-semibold hover:bg-red-500/25 active:scale-95 transition-all disabled:opacity-40">
-							<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.5" d="M6 18L18 6M6 6l12 12"/>
-							</svg>
-							Skip
-						</button>
-						<button type="button" onclick={() => doAction('like')} disabled={animating}
-							class="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl bg-green-500/15 border border-green-500/30 text-green-400 text-sm font-semibold hover:bg-green-500/25 active:scale-95 transition-all disabled:opacity-40">
-							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-							</svg>
-							Like
-						</button>
-					</div>
-					<button type="button" onclick={() => { showPreview = true; }}
-						class="w-full py-2 rounded-xl text-xs text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors">
-						More details
-					</button>
-				</div>
 			</div>
 		{:else if deckEmpty}
 			<div class="flex-1 flex flex-col items-center justify-center gap-4 text-center p-8 text-(--color-muted)">
Author	SHA1	Message	Date
Admin	50a13447a4	docs: add homelab secrets setup instructions Some checks failed Release / Test backend (push) Successful in 1m2s Details Release / Check ui (push) Successful in 1m0s Details Release / Docker (push) Successful in 4m39s Details Release / Deploy to prod (push) Successful in 2m18s Details Release / Deploy to homelab (push) Failing after 4s Details Release / Gitea Release (push) Successful in 29s Details	2026-04-16 19:08:25 +05:00
Admin	ce34d2c75f	feat: add homelab runner deployment step to release workflow - Add deploy-homelab job to sync homelab/runner/docker-compose.yml - Rename deploy → deploy-prod for clarity - Both deployments run in parallel after Docker images are pushed - Homelab runner pulls only the runner image and restarts Required secrets (to be added in Gitea): - HOMELAB_HOST (192.168.0.109) - HOMELAB_USER (root) - HOMELAB_SSH_KEY (same as PROD_SSH_KEY or separate) - HOMELAB_SSH_KNOWN_HOSTS (ssh-keyscan -H 192.168.0.109)	2026-04-16 19:07:59 +05:00
Admin	d394ac454b	Remove duplicate action buttons on discover page All checks were successful Release / Test backend (push) Successful in 57s Details Release / Check ui (push) Successful in 59s Details Release / Docker (push) Successful in 4m26s Details Release / Gitea Release (push) Successful in 26s Details Release / Deploy to prod (push) Successful in 2m18s Details - Remove redundant Skip/Read Now/Like buttons from desktop right panel - Main action buttons in center area remain visible on both mobile and desktop - Keyboard shortcuts hint still available at bottom - Cleaner UI with no repeated functionality	2026-04-16 14:36:40 +05:00
Admin	f24720b087	Enhance UI/UX for book info and discover pages All checks were successful Release / Test backend (push) Successful in 57s Details Release / Check ui (push) Successful in 54s Details Release / Docker (push) Successful in 4m24s Details Release / Deploy to prod (push) Successful in 2m14s Details Release / Gitea Release (push) Successful in 27s Details Book Info Page Improvements: - Add quick stats row (chapters, rating, readers) - Enhance author display with better typography - Improve genre tags with amber-branded pills - Add green badge for 'ongoing' status - Wrap summary in card with better styling - Enhance 'More' button with proper design - Improve StarRating component to show rating more prominently Discover Page Improvements: - Add progress bar showing completion through deck - Enhance keyboard shortcuts with visual kbd elements - Improve empty state with better visuals and CTA hierarchy - Enhance toast notifications with icons and color-coded backgrounds - Add auto-dismiss for toast (4s timeout) - Improve preferences modal button labels - Add undo functionality for last vote - Better stat display (X of Y remaining) All changes maintain consistency with LibNovel's design system.	2026-04-16 14:19:54 +05:00