Remove duplicate action buttons on discover page

- 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
Enhance UI/UX for book info and discover pages
2026-04-16 14:36:40 +05:00 · 2026-04-16 14:19:54 +05:00 · 2026-04-16 13:00:50 +05:00 · 2026-04-16 12:48:33 +05:00 · 2026-04-16 12:34:55 +05:00 · 2026-04-15 21:35:13 +05:00
20 changed files with 545 additions and 363 deletions
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@@ -41,6 +41,9 @@ jobs:
      - name: Build healthcheck
        run: go build -o /dev/null ./cmd/healthcheck

+      - name: Build pocketbase
+        run: go build -o /dev/null ./cmd/pocketbase
+
      - name: Run tests
        run: go test -short -race -count=1 -timeout=60s ./...

--- a/.gitea/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@@ -55,102 +55,7 @@ jobs:
      - name: Build
        run: npm run build

-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: ui-build
-          path: ui/build
-          retention-days: 1
-
-  # ── ui: source map upload ─────────────────────────────────────────────────────
-  # Commented out — re-enable when GlitchTip source map uploads are needed again.
-  #
-  # upload-sourcemaps:
-  #   name: Upload source maps
-  #   runs-on: ubuntu-latest
-  #   needs: [check-ui]
-  #   steps:
-  #     - name: Compute release version (strip leading v)
-  #       id: ver
-  #       run: |
-  #         V="${{ gitea.ref_name }}"
-  #         echo "version=${V#v}" >> "$GITHUB_OUTPUT"
-  #
-  #     - name: Download build artifacts
-  #       uses: actions/download-artifact@v3
-  #       with:
-  #         name: ui-build
-  #         path: build
-  #
-  #     - name: Install sentry-cli
-  #       run: npm install -g @sentry/cli
-  #
-  #     - name: Inject debug IDs into build artifacts
-  #       run: sentry-cli sourcemaps inject ./build
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: ui
-  #
-  #     - name: Upload injected build (for docker-ui)
-  #       uses: actions/upload-artifact@v3
-  #       with:
-  #         name: ui-build-injected
-  #         path: build
-  #         retention-days: 1
-  #
-  #     - name: Create GlitchTip release
-  #       run: sentry-cli releases new ${{ steps.ver.outputs.version }}
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: ui
-  #
-  #     - name: Upload source maps to GlitchTip
-  #       run: sentry-cli sourcemaps upload ./build --release ${{ steps.ver.outputs.version }}
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: ui
-  #
-  #     - name: Finalize GlitchTip release
-  #       run: sentry-cli releases finalize ${{ steps.ver.outputs.version }}
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: ui
-  #
-  #     - name: Prune old GlitchTip releases (keep latest 10)
-  #       run: |
-  #         set -euo pipefail
-  #         KEEP=10
-  #         OLD=$(curl -sf \
-  #           -H "Authorization: Bearer $SENTRY_AUTH_TOKEN" \
-  #           "$SENTRY_URL/api/0/organizations/$SENTRY_ORG/releases/?project=$SENTRY_PROJECT&per_page=100" \
-  #           | python3 -c "
-  #         import sys, json
-  #         releases = json.load(sys.stdin)
-  #         for r in releases[$KEEP:]:
-  #             print(r['version'])
-  #         " KEEP=$KEEP)
-  #         for ver in $OLD; do
-  #           echo "Deleting old release: $ver"
-  #           sentry-cli releases delete "$ver" || true
-  #         done
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: ui
-
-  # ── docker: all images in one job (single login) ──────────────────────────────
-  # backend, runner, ui, and caddy are built sequentially in one job so Docker
-  # Hub only needs to be authenticated once. This also eliminates 3 redundant
-  # checkout + setup-buildx + scheduler round-trips compared to separate jobs.
+  # ── docker: build + push all images via docker bake ──────────────────────────
  docker:
    name: Docker
    runs-on: ubuntu-latest
@@ -160,121 +65,72 @@ jobs:

      - uses: docker/setup-buildx-action@v3

-      # Single login — credential is written to ~/.docker/config.json and
-      # reused by all subsequent build-push-action steps in this job.
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USER }}
          password: ${{ secrets.DOCKER_TOKEN }}

-      # ── backend ──────────────────────────────────────────────────────────────
-      - name: Docker meta / backend
-        id: meta-backend
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ secrets.DOCKER_USER }}/libnovel-backend
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,value=latest
-
-      - name: Build and push / backend
-        uses: docker/build-push-action@v6
-        with:
-          context: backend
-          target: backend
-          push: true
-          tags: ${{ steps.meta-backend.outputs.tags }}
-          labels: ${{ steps.meta-backend.outputs.labels }}
-          build-args: |
-            VERSION=${{ steps.meta-backend.outputs.version }}
-            COMMIT=${{ gitea.sha }}
-          cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-backend:latest
-          cache-to: type=inline
-
-      # ── runner ───────────────────────────────────────────────────────────────
-      - name: Docker meta / runner
-        id: meta-runner
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ secrets.DOCKER_USER }}/libnovel-runner
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,value=latest
-
-      - name: Build and push / runner
-        uses: docker/build-push-action@v6
-        with:
-          context: backend
-          target: runner
-          push: true
-          tags: ${{ steps.meta-runner.outputs.tags }}
-          labels: ${{ steps.meta-runner.outputs.labels }}
-          build-args: |
-            VERSION=${{ steps.meta-runner.outputs.version }}
-            COMMIT=${{ gitea.sha }}
-          cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-runner:latest
-          cache-to: type=inline
-
-      # ── ui ───────────────────────────────────────────────────────────────────
-      - name: Download ui build artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: ui-build
-          path: ui/build
-
-      - name: Allow build/ into Docker context (override .dockerignore)
+      - name: Compute version tags
+        id: ver
        run: |
-          grep -v '^build$' ui/.dockerignore > ui/.dockerignore.tmp
-          mv ui/.dockerignore.tmp ui/.dockerignore
+          V="${{ gitea.ref_name }}"
+          VER="${V#v}"
+          echo "version=$VER" >> "$GITHUB_OUTPUT"
+          echo "major_minor=$(echo "$VER" | cut -d. -f1-2)" >> "$GITHUB_OUTPUT"

-      - name: Docker meta / ui
-        id: meta-ui
-        uses: docker/metadata-action@v5
+      - name: Build and push all images
+        uses: docker/bake-action@v6
        with:
-          images: ${{ secrets.DOCKER_USER }}/libnovel-ui
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,value=latest
+          files: docker-bake.hcl
+          set: |
+            *.output=type=image,push=true
+        env:
+          VERSION: ${{ steps.ver.outputs.version }}
+          MAJOR_MINOR: ${{ steps.ver.outputs.major_minor }}
+          COMMIT: ${{ gitea.sha }}
+          BUILD_TIME: ${{ gitea.event.head_commit.timestamp }}

-      - name: Build and push / ui
-        uses: docker/build-push-action@v6
-        with:
-          context: ui
-          push: true
-          tags: ${{ steps.meta-ui.outputs.tags }}
-          labels: ${{ steps.meta-ui.outputs.labels }}
-          build-args: |
-            BUILD_VERSION=${{ steps.meta-ui.outputs.version }}
-            BUILD_COMMIT=${{ gitea.sha }}
-            BUILD_TIME=${{ gitea.event.head_commit.timestamp }}
-            PREBUILT=1
-          cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-ui:latest
-          cache-to: type=inline
+  # ── deploy: sync docker-compose.yml + restart prod ───────────────────────────
+  # Runs after all images are pushed to Docker Hub.
+  # Copies the compose file from the tagged commit to the server, pulls the new
+  # images, and restarts only the services whose image or config changed.
+  # --remove-orphans cleans up containers no longer defined in the compose file
+  # (e.g. the now-removed pb-init container).
+  #
+  # Required Gitea secrets:
+  #   PROD_HOST             — prod server IP or hostname
+  #   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:
+    name: Deploy to prod
+    runs-on: ubuntu-latest
+    needs: [docker]
+    steps:
+      - uses: actions/checkout@v4

-      # ── caddy ────────────────────────────────────────────────────────────────
-      - name: Docker meta / caddy
-        id: meta-caddy
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ secrets.DOCKER_USER }}/libnovel-caddy
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,value=latest
+      - name: Install SSH key
+        run: |
+          mkdir -p ~/.ssh
+          printf '%s\n' "${{ secrets.PROD_SSH_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          printf '%s\n' "${{ secrets.PROD_SSH_KNOWN_HOSTS }}" >> ~/.ssh/known_hosts

-      - name: Build and push / caddy
-        uses: docker/build-push-action@v6
-        with:
-          context: caddy
-          push: true
-          tags: ${{ steps.meta-caddy.outputs.tags }}
-          labels: ${{ steps.meta-caddy.outputs.labels }}
-          cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-caddy:latest
-          cache-to: type=inline
+      - name: Copy docker-compose.yml to prod
+        run: |
+          scp -i ~/.ssh/deploy_key \
+            docker-compose.yml \
+            "${{ secrets.PROD_USER }}@${{ secrets.PROD_HOST }}:/opt/libnovel/docker-compose.yml"
+
+      - name: Pull new images and restart changed services
+        run: |
+          ssh -i ~/.ssh/deploy_key \
+            "${{ secrets.PROD_USER }}@${{ secrets.PROD_HOST }}" \
+            'set -euo pipefail
+             cd /opt/libnovel
+             doppler run -- docker compose pull backend runner ui caddy pocketbase
+             doppler run -- docker compose up -d --remove-orphans'

  # ── Gitea release ─────────────────────────────────────────────────────────────
  release:
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,6 +2,17 @@

 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

+## Environment / Secrets
+
+All project environment variables are stored in **Doppler**. When you need to access any secret or env var (e.g. API tokens, database URLs, credentials), fetch them via:
+
+```bash
+doppler run -- <command>        # inject all secrets into a command
+doppler secrets get SECRET_NAME # inspect a specific secret
+```
+
+Never use `.env` files. Do not ask the user to provide secrets manually — they are available via Doppler.
+
 ## Commands

 ### Docker (via `just` — the primary way to run services)
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -48,13 +48,11 @@ ENTRYPOINT ["/backend"]
 # On every `serve` startup it applies any pending migrations automatically.
 # Data is stored in /pb_data (mounted as a Docker volume in production).
 FROM alpine:3.21 AS pocketbase
-RUN apk add --no-cache ca-certificates && \
-    addgroup -S appgroup && adduser -S appuser -G appgroup
+RUN apk add --no-cache ca-certificates wget
 COPY --from=builder /out/pocketbase /pocketbase
-RUN mkdir -p /pb_data && chown appuser:appgroup /pb_data
+RUN mkdir -p /pb_data
 VOLUME /pb_data
 EXPOSE 8090
-USER appuser
 CMD ["/pocketbase", "serve", "--dir", "/pb_data", "--http", "0.0.0.0:8090"]

 # ── runner service ───────────────────────────────────────────────────────────
--- a/backend/migrations/20260414000001_initial_schema.go
+++ b/backend/migrations/20260414000001_initial_schema.go
@@ -81,7 +81,7 @@ func saveIfAbsent(app core.App, c *core.Collection) error {
 	if _, err := app.FindCollectionByNameOrId(c.Name); err == nil {
 		return nil // already exists — skip
 	}
-	return saveIfAbsent(app, c)
+	return app.Save(c)
 }

 // ── Collection creators ───────────────────────────────────────────────────────
--- a/docker-bake.hcl
+++ b/docker-bake.hcl
@@ -0,0 +1,106 @@
+# docker-bake.hcl — defines all five production images.
+#
+# CI passes version info as environment variables; locally everything gets :dev tags.
+#
+# Local build (no push):
+#   docker buildx bake
+#
+# CI environment variables: VERSION, MAJOR_MINOR, COMMIT, BUILD_TIME
+
+variable "DOCKER_USER"  { default = "kalekber" }
+variable "VERSION"      { default = "dev" }    # e.g. "4.1.6"  (no leading v)
+variable "MAJOR_MINOR"  { default = "dev" }    # e.g. "4.1"
+variable "COMMIT"       { default = "unknown" }
+variable "BUILD_TIME"   { default = "" }
+
+# ── Shared defaults ───────────────────────────────────────────────────────────
+
+target "_defaults" {
+  pull     = true
+  # CI overrides to push=true via --set *.output=type=image,push=true
+  output   = ["type=image,push=false"]
+  cache-to = ["type=inline"]
+}
+
+# ── Go targets (share the backend/ build context + builder stage) ─────────────
+
+target "backend" {
+  inherits   = ["_defaults"]
+  context    = "backend"
+  target     = "backend"
+  tags       = [
+    "${DOCKER_USER}/libnovel-backend:${VERSION}",
+    "${DOCKER_USER}/libnovel-backend:${MAJOR_MINOR}",
+    "${DOCKER_USER}/libnovel-backend:latest",
+  ]
+  cache-from = ["type=registry,ref=${DOCKER_USER}/libnovel-backend:latest"]
+  args = {
+    VERSION = VERSION
+    COMMIT  = COMMIT
+  }
+}
+
+target "runner" {
+  inherits   = ["_defaults"]
+  context    = "backend"
+  target     = "runner"
+  tags       = [
+    "${DOCKER_USER}/libnovel-runner:${VERSION}",
+    "${DOCKER_USER}/libnovel-runner:${MAJOR_MINOR}",
+    "${DOCKER_USER}/libnovel-runner:latest",
+  ]
+  cache-from = ["type=registry,ref=${DOCKER_USER}/libnovel-runner:latest"]
+  args = {
+    VERSION = VERSION
+    COMMIT  = COMMIT
+  }
+}
+
+target "pocketbase" {
+  inherits   = ["_defaults"]
+  context    = "backend"
+  target     = "pocketbase"
+  tags       = [
+    "${DOCKER_USER}/libnovel-pocketbase:${VERSION}",
+    "${DOCKER_USER}/libnovel-pocketbase:${MAJOR_MINOR}",
+    "${DOCKER_USER}/libnovel-pocketbase:latest",
+  ]
+  cache-from = ["type=registry,ref=${DOCKER_USER}/libnovel-pocketbase:latest"]
+}
+
+# ── UI (SvelteKit — separate context) ────────────────────────────────────────
+
+target "ui" {
+  inherits   = ["_defaults"]
+  context    = "ui"
+  tags       = [
+    "${DOCKER_USER}/libnovel-ui:${VERSION}",
+    "${DOCKER_USER}/libnovel-ui:${MAJOR_MINOR}",
+    "${DOCKER_USER}/libnovel-ui:latest",
+  ]
+  cache-from = ["type=registry,ref=${DOCKER_USER}/libnovel-ui:latest"]
+  args = {
+    BUILD_VERSION = VERSION
+    BUILD_COMMIT  = COMMIT
+    BUILD_TIME    = BUILD_TIME
+  }
+}
+
+# ── Caddy (custom plugins — separate context) ─────────────────────────────────
+
+target "caddy" {
+  inherits   = ["_defaults"]
+  context    = "caddy"
+  tags       = [
+    "${DOCKER_USER}/libnovel-caddy:${VERSION}",
+    "${DOCKER_USER}/libnovel-caddy:${MAJOR_MINOR}",
+    "${DOCKER_USER}/libnovel-caddy:latest",
+  ]
+  cache-from = ["type=registry,ref=${DOCKER_USER}/libnovel-caddy:latest"]
+}
+
+# ── Default group: all five images ────────────────────────────────────────────
+
+group "default" {
+  targets = ["backend", "runner", "pocketbase", "ui", "caddy"]
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -91,11 +91,12 @@ services:
      test: ["CMD", "wget", "-qO-", "http://localhost:8090/api/health"]
      interval: 10s
      timeout: 5s
-      retries: 5
+      retries: 10
+      start_period: 30s

  # ─── Meilisearch (full-text search) ──────────────────────────────────────────
  meilisearch:
-    image: getmeili/meilisearch:latest
+    image: getmeili/meilisearch:v1.40.0
    restart: unless-stopped
    environment:
      MEILI_MASTER_KEY: "${MEILI_MASTER_KEY}"
--- a/2
+++ b/2
@@ -63,7 +63,7 @@ build-push: build push

 # Pull all images from Docker Hub (uses GIT_TAG from Doppler)
 pull-images:
-    {{doppler}} docker compose pull backend runner ui caddy
+    {{doppler}} docker compose pull backend runner ui caddy pocketbase

 # Pull all third-party base images (minio, pocketbase, etc.)
 pull-infra:
--- a/ui/Dockerfile
+++ b/ui/Dockerfile
@@ -21,11 +21,7 @@ ENV PUBLIC_BUILD_VERSION=$BUILD_VERSION
 ENV PUBLIC_BUILD_COMMIT=$BUILD_COMMIT
 ENV PUBLIC_BUILD_TIME=$BUILD_TIME

-# PREBUILT=1 skips npm run build — used in CI when the build/ directory has
-# already been compiled (and debug IDs injected) by a prior job.  The caller
-# must copy the pre-built build/ into the Docker context before building.
-ARG PREBUILT=0
-RUN [ "$PREBUILT" = "1" ] || npm run build
+RUN npm run build

 # ── Runtime image ──────────────────────────────────────────────────────────────
 # adapter-node bundles most server-side code, but packages with dynamic
--- 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/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -247,13 +247,16 @@
 <!-- ── Streak widget ───────────────────────────────────────────────────────────── -->
 {#if streak > 0}
 <div class="mb-6 flex items-center gap-3 flex-wrap text-sm">
-	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
-		<span class="font-semibold text-(--color-text)">{streak}</span>
-		<span class="text-(--color-muted)">day{streak !== 1 ? 's' : ''} reading</span>
+	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-brand)/10 border border-(--color-brand)/30 text-(--color-brand) font-semibold">
+		<svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+			<path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
+		</svg>
+		{streak} day{streak !== 1 ? 's' : ''}
 	</span>
 	{#if data.stats.booksInProgress > 0}
-		<span class="text-(--color-muted)">
-			<span class="font-semibold text-(--color-text)">{data.stats.booksInProgress}</span> {data.stats.booksInProgress === 1 ? 'book' : 'books'} in progress
+		<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-(--color-muted)">
+			<span class="font-semibold text-(--color-text)">{data.stats.booksInProgress}</span>
+			{data.stats.booksInProgress === 1 ? 'book' : 'books'} in progress
 		</span>
 	{/if}
 </div>
@@ -263,32 +266,39 @@
 {#if shelfBooks.length > 0}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">{m.home_continue_reading()}</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">{m.home_continue_reading()}</h2>
 		<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 	</div>
 	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
 		{#each shelfBooks as { book, chapter }}
-			<div class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-32 sm:w-36">
+			<div class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
 				<a href="/books/{book.slug}/chapters/{chapter}" class="block">
 					<div class="aspect-[2/3] overflow-hidden relative">
 						{#if book.cover}
 							<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 						{:else}
 							<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-								<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+								<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 							</div>
 						{/if}
 						<!-- Chapter badge -->
 						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
 							{m.home_chapter_badge({ n: String(chapter) })}
 						</span>
+						<!-- Reading progress bar -->
+						{#if book.total_chapters > 0}
+							{@const pct = Math.min(100, Math.round((chapter / book.total_chapters) * 100))}
+							<div class="absolute bottom-0 left-0 right-0 h-1 bg-black/40">
+								<div class="h-full bg-(--color-brand) transition-all" style="width: {pct}%"></div>
+							</div>
+						{/if}
 					</div>
 				</a>
 				<!-- Listen button (hover overlay) -->
 				<button
 					type="button"
 					onclick={() => playChapter(book.slug, chapter)}
-					class="absolute bottom-8 left-1.5 w-7 h-7 rounded-full bg-black/60 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+					class="absolute bottom-9 left-1.5 w-7 h-7 rounded-full bg-black/60 text-white flex items-center justify-center opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
 					title="Listen"
 					aria-label="Listen to chapter {chapter}"
 				>
@@ -296,6 +306,9 @@
 				</button>
 				<a href="/books/{book.slug}/chapters/{chapter}" class="p-2 block">
 					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					{#if book.author}
+						<p class="text-xs text-(--color-muted) truncate mt-0.5">{book.author}</p>
+					{/if}
 				</a>
 			</div>
 		{/each}
@@ -307,7 +320,7 @@
 {#if data.continueCompleted.length > 0}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">Completed</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">Completed</h2>
 	</div>
 	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
 		{#each data.continueCompleted as { book, chapter }}
@@ -318,7 +331,7 @@
 						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 					{:else}
 						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+							<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 					<span class="absolute top-1.5 right-1.5 text-xs bg-green-600/90 text-white font-bold px-1.5 py-0.5 rounded">Done</span>
@@ -339,7 +352,7 @@
 {#if data.readyToListen.length > 0 && !hidden.has('ready-to-listen')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">Ready to Listen</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">Ready to Listen</h2>
 		<div class="flex items-center gap-3">
 			<a href="/listen" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">View all</a>
 			<button type="button" onclick={() => hide('ready-to-listen')} title="Hide section"
@@ -360,7 +373,7 @@
 							<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 						{:else}
 							<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-								<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+								<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 							</div>
 						{/if}
 						<!-- Headphones badge -->
@@ -402,7 +415,7 @@
 {#if !hidden.has('browse-genre')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">Browse by genre</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">Browse by genre</h2>
 		<div class="flex items-center gap-3">
 			<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 			<button type="button" onclick={() => hide('browse-genre')} title="Hide section"
@@ -415,8 +428,11 @@
 	</div>
 	<div class="flex gap-2 overflow-x-auto pb-1 scrollbar-none -mx-4 px-4">
 		{#each GENRES as genre}
+			{@const isTop = data.topGenre && genre.toLowerCase() === data.topGenre.toLowerCase()}
 			<a href="/catalogue?genre={encodeURIComponent(genre)}"
-				class="shrink-0 px-3.5 py-1.5 rounded-full border border-(--color-border) bg-(--color-surface-2) text-sm text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors whitespace-nowrap">
+				class="shrink-0 px-3.5 py-1.5 rounded-full border text-sm transition-colors whitespace-nowrap {isTop
+					? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand) font-semibold'
+					: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text) hover:bg-(--color-surface-3)'}">
 				{genre}
 			</a>
 		{/each}
@@ -428,7 +444,7 @@
 {#if data.trendingBooks.length > 0 && !hidden.has('trending')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">Trending Now</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">Trending Now</h2>
 		<div class="flex items-center gap-3">
 			<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 			<button type="button" onclick={() => hide('trending')} title="Hide section"
@@ -449,7 +465,7 @@
 						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 					{:else}
 						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+							<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 					<span class="absolute top-1.5 left-1.5 text-xs bg-(--color-brand)/80 text-(--color-surface) font-bold px-1.5 py-0.5 rounded">#{book.ranking}</span>
@@ -477,15 +493,18 @@
 {#if data.recommendedBooks.length > 0 && data.topGenre && !hidden.has('because-you-read')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">
-			Because you read <span class="text-(--color-brand)">{data.topGenre}</span>
+		<h2 class="text-lg font-bold text-(--color-text)">
+			Because you read <span class="text-(--color-brand)">{data.topGenre ? data.topGenre.charAt(0).toUpperCase() + data.topGenre.slice(1) : ''}</span>
 		</h2>
-		<button type="button" onclick={() => hide('because-you-read')} title="Hide section"
-			class="text-(--color-muted) hover:text-(--color-text) transition-colors">
-			<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
-			</svg>
-		</button>
+		<div class="flex items-center gap-3">
+			<a href="/catalogue?genre={encodeURIComponent(data.topGenre ?? '')}" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">View all</a>
+			<button type="button" onclick={() => hide('because-you-read')} title="Hide section"
+				class="text-(--color-muted) hover:text-(--color-text) transition-colors">
+				<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+				</svg>
+			</button>
+		</div>
 	</div>
 	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
 		{#each data.recommendedBooks as book}
@@ -497,7 +516,7 @@
 						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 					{:else}
 						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+							<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 				</div>
@@ -524,7 +543,7 @@
 {#if dedupedRecent.length > 0 && !hidden.has('recently-updated')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">{m.home_recently_updated()}</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">{m.home_recently_updated()}</h2>
 		<div class="flex items-center gap-3">
 			<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 			<button type="button" onclick={() => hide('recently-updated')} title="Hide section"
@@ -545,7 +564,7 @@
 						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 					{:else}
 						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+							<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 					{#if count > 1}
@@ -577,7 +596,7 @@
 {#if data.subscriptionFeed.length > 0 && !hidden.has('from-following')}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
-		<h2 class="text-base font-bold text-(--color-text)">{m.home_from_following()}</h2>
+		<h2 class="text-lg font-bold text-(--color-text)">{m.home_from_following()}</h2>
 		<button type="button" onclick={() => hide('from-following')} title="Hide section"
 			class="text-(--color-muted) hover:text-(--color-text) transition-colors">
 			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -594,7 +613,7 @@
 						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
 					{:else}
 						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+							<span class="text-4xl font-bold text-(--color-muted) select-none opacity-50">{(book.title ?? '?').charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 				</div>
--- a/ui/src/routes/admin/+layout.server.ts
+++ b/ui/src/routes/admin/+layout.server.ts
@@ -1,8 +1,16 @@
 import { redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
+import { listAIJobs } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';

 export const load: LayoutServerLoad = async ({ locals }) => {
 	if (locals.user?.role !== 'admin') {
 		redirect(302, '/');
 	}
+	const jobs = await listAIJobs().catch((e) => {
+		log.warn('admin/layout', 'failed to load ai jobs for sidebar badge', { err: String(e) });
+		return [];
+	});
+	const runningAiJobs = jobs.filter((j) => j.status === 'running' || j.status === 'pending').length;
+	return { runningAiJobs };
 };
--- a/ui/src/routes/admin/+layout.svelte
+++ b/ui/src/routes/admin/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import * as m from '$lib/paraglide/messages.js';
+	import type { LayoutData } from './$types';

 	const internalLinks = [
 		{
@@ -105,8 +106,9 @@

 	interface Props {
 		children?: import('svelte').Snippet;
+		data: LayoutData;
 	}
-	let { children }: Props = $props();
+	let { children, data }: Props = $props();

 	let sidebarOpen = $state(false);
 </script>
@@ -136,6 +138,7 @@
 			<nav class="flex flex-col gap-0.5">
 				{#each internalLinks as link}
 					{@const active = page.url.pathname.startsWith(link.href)}
+					{@const isAiJobs = link.href === '/admin/ai-jobs'}
 					<a
 						href={link.href}
 						onclick={() => (sidebarOpen = false)}
@@ -147,7 +150,12 @@
 						<svg class="w-3.5 h-3.5 shrink-0 {active ? 'text-(--color-brand)' : 'opacity-50'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 							{@html link.icon}
 						</svg>
-						{link.label()}
+						<span class="flex-1">{link.label()}</span>
+						{#if isAiJobs && data.runningAiJobs > 0}
+							<span class="text-[10px] font-bold tabular-nums px-1.5 py-0.5 rounded-full bg-(--color-brand) text-black leading-none">
+								{data.runningAiJobs}
+							</span>
+						{/if}
 					</a>
 				{/each}
 			</nav>
--- a/ui/src/routes/admin/ai-jobs/+page.svelte
+++ b/ui/src/routes/admin/ai-jobs/+page.svelte
@@ -57,6 +57,7 @@
 	// ── Cancel ────────────────────────────────────────────────────────────────────
 	let cancellingIds = $state(new Set<string>());
 	let cancelErrors: Record<string, string> = $state({});
+	let cancellingAll = $state(false);

 	async function cancelJob(id: string) {
 		if (cancellingIds.has(id)) return;
@@ -77,6 +78,14 @@
 		}
 	}

+	async function cancelAllRunning() {
+		if (cancellingAll) return;
+		cancellingAll = true;
+		const inFlight = jobs.filter((j) => j.status === 'running' || j.status === 'pending');
+		await Promise.all(inFlight.map((j) => cancelJob(j.id)));
+		cancellingAll = false;
+	}
+
 	// ── Review & Apply (chapter-names jobs) ──────────────────────────────────────

 	interface ProposedTitle {
@@ -411,7 +420,9 @@

 	function fmtDate(s: string | undefined) {
 		if (!s) return '—';
-		return new Date(s).toLocaleString(undefined, {
+		const d = new Date(s);
+		if (d.getFullYear() < 2000) return '—';
+		return d.toLocaleString(undefined, {
 			month: 'short',
 			day: 'numeric',
 			hour: '2-digit',
@@ -482,6 +493,27 @@
 		{/each}
 	</div>

+	<!-- Bulk actions -->
+	{#if stats.running + stats.pending > 0}
+		<div class="flex justify-end">
+			<button
+				onclick={cancelAllRunning}
+				disabled={cancellingAll}
+				class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium bg-(--color-danger)/10 text-(--color-danger) hover:bg-(--color-danger)/20 disabled:opacity-50 transition-colors"
+			>
+				{#if cancellingAll}
+					<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+					</svg>
+					Cancelling…
+				{:else}
+					Cancel all in-flight ({stats.running + stats.pending})
+				{/if}
+			</button>
+		</div>
+	{/if}
+
 	<!-- Filters -->
 	<div class="flex flex-wrap gap-3 items-center">
 		<input
--- a/ui/src/routes/admin/import/+page.svelte
+++ b/ui/src/routes/admin/import/+page.svelte
@@ -169,7 +169,9 @@

 	function formatDate(dateStr: string) {
 		if (!dateStr) return '-';
-		return new Date(dateStr).toLocaleString();
+		const d = new Date(dateStr);
+		if (d.getFullYear() < 2000) return '-';
+		return d.toLocaleString();
 	}

 	function statusColor(status: string) {
--- a/ui/src/routes/admin/notifications/+page.svelte
+++ b/ui/src/routes/admin/notifications/+page.svelte
@@ -47,9 +47,31 @@
 </svelte:head>

 <div class="max-w-2xl mx-auto px-4 py-8">
+	<!-- Broadcast panel -->
+	<div class="mb-6 rounded-lg border border-(--color-border) bg-(--color-surface-2) p-4 flex items-start gap-3">
+		<svg class="w-5 h-5 text-(--color-brand) mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+		</svg>
+		<div class="min-w-0">
+			<p class="text-sm font-semibold text-(--color-text)">Broadcast to users</p>
+			<p class="text-sm text-(--color-muted) mt-0.5">To send push notifications or in-app messages to all subscribers, use the push dashboard.</p>
+			<a
+				href="https://push.libnovel.cc"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-1 mt-2 text-sm text-(--color-brand) hover:underline"
+			>
+				Open push.libnovel.cc
+				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+				</svg>
+			</a>
+		</div>
+	</div>
+
 	<div class="flex items-center justify-between mb-6">
 		<div>
-			<h1 class="text-xl font-semibold">Notifications</h1>
+			<h1 class="text-xl font-semibold">Your Notification Inbox</h1>
 			{#if unreadCount > 0}
 				<p class="text-sm text-(--color-muted) mt-0.5">{unreadCount} unread</p>
 			{/if}
--- 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/catalogue/+page.server.ts
+++ b/ui/src/routes/catalogue/+page.server.ts
@@ -16,6 +16,7 @@ export const load: PageServerLoad = async ({ url, locals }) => {
 	const sort = url.searchParams.get('sort') ?? 'popular';
 	const status = url.searchParams.get('status') ?? 'all';
 	const q = url.searchParams.get('q') ?? '';
+	const audioOnly = url.searchParams.get('audio') === '1';

 	const params = new URLSearchParams({ page, genre, sort, status });
 	if (q.trim().length >= 2) {
@@ -64,7 +65,8 @@ export const load: PageServerLoad = async ({ url, locals }) => {
 		isAdmin: locals.user?.role === 'admin',
 		searchQuery: q.trim().length >= 2 ? q.trim() : '',
 		searchLocalCount: 0,
-		searchRemoteCount: 0
+		searchRemoteCount: 0,
+		audioOnly
 	};
 };

--- a/ui/src/routes/catalogue/+page.svelte
+++ b/ui/src/routes/catalogue/+page.svelte
@@ -21,11 +21,13 @@
 	});

 	function applyFilters() {
+		filtersOpen = false;
 		const params = new URLSearchParams();
 		params.set('sort', filterSort);
 		params.set('genre', filterGenre);
 		params.set('status', filterStatus);
 		params.set('page', '1');
+		if (filterAudioOnly) params.set('audio', '1');
 		goto(`/catalogue?${params.toString()}`);
 	}

@@ -215,7 +217,7 @@

 	// ── Audio-available set ───────────────────────────────────────────────────
 	let audioSlugs = $state<Set<string>>(new Set());
-	let filterAudioOnly = $state(false);
+	let filterAudioOnly = $state(untrack(() => data.audioOnly));

 	$effect(() => {
 		fetch('/api/audio/slugs')
@@ -224,6 +226,17 @@
 			.catch(() => { /* non-critical */ });
 	});

+	function toggleAudio() {
+		filterAudioOnly = !filterAudioOnly;
+		const u = new URL(window.location.href);
+		if (filterAudioOnly) {
+			u.searchParams.set('audio', '1');
+		} else {
+			u.searchParams.delete('audio');
+		}
+		history.replaceState({}, '', u.toString());
+	}
+
 	const displayedNovels = $derived(
 		filterAudioOnly ? novels.filter((n) => audioSlugs.has(n.slug)) : novels
 	);
@@ -249,7 +262,7 @@
 				{m.catalogue_rank_no_data_body()}
 			{/if}
 		{:else}
-			{m.catalogue_browse_source()}
+			{m.catalogue_browse_source()}{#if data.total > 0}&nbsp;<span class="text-(--color-muted) text-xs">{data.total.toLocaleString()} novels</span>{/if}
 		{/if}
 	</p>
 </div>
@@ -349,7 +362,7 @@
 	<!-- Audio-only filter toggle -->
 	{#if audioSlugs.size > 0}
 		<button
-			onclick={() => (filterAudioOnly = !filterAudioOnly)}
+			onclick={toggleAudio}
 			title="Show only books with audio"
 			class="flex items-center gap-1.5 px-2.5 py-2 rounded border text-sm transition-colors shrink-0
 				{filterAudioOnly
@@ -503,7 +516,7 @@
 					{m.catalogue_rank_run_scrape_user()}
 				{/if}
 			{:else if filterAudioOnly}
-				<button onclick={() => (filterAudioOnly = false)} class="text-(--color-brand) hover:underline">Clear audio filter</button>
+				<button onclick={toggleAudio} class="text-(--color-brand) hover:underline">Clear audio filter</button>
 			{:else}
 				{m.catalogue_no_results_filters()}
 			{/if}
@@ -531,11 +544,8 @@
 							loading="lazy"
 						/>
 					{:else}
-						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
-							<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-									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>
+						<div class="w-full h-full flex items-center justify-center bg-(--color-surface-3)">
+							<span class="text-5xl font-bold text-(--color-muted) select-none opacity-50">{novel.title.charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 					{#if novel.rank}
@@ -622,11 +632,8 @@
 					{#if novel.cover}
 						<img src={novel.cover} alt={novel.title} class="w-full h-full object-cover" loading="lazy" />
 					{:else}
-						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
-							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-									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>
+						<div class="w-full h-full flex items-center justify-center bg-(--color-surface-3)">
+							<span class="text-xl font-bold text-(--color-muted) select-none opacity-50">{novel.title.charAt(0).toUpperCase()}</span>
 						</div>
 					{/if}
 					{#if isLoading}
@@ -688,6 +695,8 @@
 							<span class="text-xs text-emerald-400 font-medium">{m.catalogue_scrape_queued_badge()}</span>
 						{:else if scrapeResult[novel.slug] === 'busy'}
 							<span class="text-xs text-yellow-400 font-medium">{m.catalogue_scrape_busy_list()}</span>
+						{:else if scrapeResult[novel.slug] === 'forbidden'}
+							<span class="text-xs text-(--color-danger) font-medium">{m.catalogue_scrape_forbidden_badge()}</span>
 						{:else if scrapeResult[novel.slug] === 'error'}
 							<span class="text-xs text-(--color-danger) font-medium">{m.common_error()}</span>
 						{:else}
--- 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	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
Admin	71a628673d	feat(ui): homepage UX polish — headings, placeholders, genre highlight, view-all All checks were successful Release / Test backend (push) Successful in 55s Details Release / Check ui (push) Successful in 1m3s Details Release / Docker (push) Successful in 4m26s Details Release / Deploy to prod (push) Successful in 2m38s Details Release / Gitea Release (push) Successful in 27s Details - Bump all section headings to text-lg for visual hierarchy - Replace SVG book icon no-cover placeholders with first-letter avatars across Completed, Ready to Listen, Trending, Recommendations, Recently Updated, and From Following shelves - Highlight user's top genre pill in Browse by Genre strip - Add "View all → /catalogue?genre=…" link to Because You Read section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-16 13:00:50 +05:00
Admin	5f5aac5e3e	fix(admin): UX and bug fixes across admin pages All checks were successful Release / Test backend (push) Successful in 54s Details Release / Check ui (push) Successful in 1m1s Details Release / Docker (push) Successful in 5m15s Details Release / Deploy to prod (push) Successful in 2m0s Details Release / Gitea Release (push) Successful in 26s Details - Import: fix "1/1/1" date display (Go zero time.Time → show dash) - AI Jobs: guard fmtDate against zero-time dates - AI Jobs: add "Cancel all in-flight (N)" bulk action button - AI Jobs sidebar: show live running+pending count badge from layout - Notifications: add broadcast panel linking to push.libnovel.cc, relabel inbox section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-16 12:48:33 +05:00
Admin	e65883cc9e	feat(catalogue): UX improvements and bug fixes All checks were successful Release / Test backend (push) Successful in 56s Details Release / Check ui (push) Successful in 58s Details Release / Docker (push) Successful in 8m2s Details Release / Deploy to prod (push) Successful in 1m52s Details Release / Gitea Release (push) Successful in 27s Details - Persist audio filter in URL (?audio=1) via history.replaceState - Show total novel count in browse mode subtitle - Close filter panel automatically on Apply - Replace missing-cover SVG placeholder with styled first-letter avatar - Add forbidden scrape badge to list view (was missing, grid had it) - Carry audio param through applyFilters() navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-16 12:34:55 +05:00
Admin	b19af1e8f3	fix: simplify Docker build workflow, remove PREBUILT artifact workaround All checks were successful Release / Test backend (push) Successful in 1m6s Details Release / Check ui (push) Successful in 1m4s Details Release / Docker (push) Successful in 8m43s Details Release / Deploy to prod (push) Successful in 2m37s Details Release / Gitea Release (push) Successful in 40s Details - Remove UI build artifact upload/download steps (18 lines removed) - Remove .dockerignore manipulation workaround - Always build UI from source inside Docker (more reliable) - Remove PREBUILT arg from ui/Dockerfile and docker-bake.hcl This fixes the '/app/build not found' error in CI by eliminating the fragile artifact-passing mechanism. UI now builds fresh in Docker using build cache, same as local development.	2026-04-15 21:35:13 +05:00
Admin	2864c4a6c0	chore: clean up release workflow and document Doppler usage Some checks failed Release / Test backend (push) Successful in 54s Details Release / Check ui (push) Successful in 2m0s Details Release / Docker (push) Failing after 2m20s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details	2026-04-15 20:14:45 +05:00
Admin	6d0dac256d	fix: simplify bake file to avoid locals/function blocks (buildx compat) Some checks failed Release / Test backend (push) Successful in 59s Details Release / Check ui (push) Successful in 1m56s Details Release / Docker (push) Failing after 2m21s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details The Gitea runner's docker buildx doesn't support HCL locals{} or function{} blocks (added in buildx 0.12+). Replace with plain variables: VERSION and MAJOR_MINOR are pre-computed in a CI step and passed as env vars to bake. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:43:54 +05:00
Admin	8922111471	fix: pin meilisearch to v1.40.0 Some checks failed Release / Test backend (push) Successful in 56s Details Release / Check ui (push) Successful in 2m10s Details Release / Docker (push) Failing after 1m36s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details v1.42.1 (pulled by latest) is incompatible with existing data (db version 1.40.0). Pinning to v1.40.0 until a deliberate migration is planned. Upgrade path: https://www.meilisearch.com/docs/learn/update_and_migration/updating Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:24:57 +05:00
Admin	74e7c8e8d1	chore: move tag logic into bake file, drop all metadata-action steps Some checks failed Release / Test backend (push) Successful in 59s Details Release / Check ui (push) Successful in 1m55s Details Release / Docker (push) Failing after 1m27s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details docker-bake.hcl now owns semver tag generation via HCL locals + a reusable img_tags() function: GIT_TAG="v4.1.5" → :4.1.5, :4.1, :latest on all images. The Docker job shrinks from 13 steps to 6 — no docker/metadata-action needed. CI simply passes GIT_TAG, COMMIT, BUILD_TIME as env vars to bake-action. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:22:06 +05:00
Admin	2f74b2b229	fix: only pull app images during deploy, not infra images Some checks failed Release / Test backend (push) Successful in 1m8s Details Release / Check ui (push) Successful in 1m59s Details Release / Docker (push) Failing after 1m37s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details docker compose pull without arguments pulls ALL services including getmeili/meilisearch:latest — a recent Meilisearch version bump broke compatibility with existing data on the server, causing meilisearch to crash immediately on restart. CI deploy now only pulls the 5 custom app images (backend, runner, ui, caddy, pocketbase). Infrastructure images (meilisearch, valkey, minio, redis, crowdsec) are updated deliberately via `just pull-infra`. Also add pocketbase to `just pull-images` now that it's a custom image. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:19:31 +05:00
Admin	cb9598a786	chore: migrate Docker builds to docker buildx bake Some checks failed Release / Test backend (push) Successful in 54s Details Release / Check ui (push) Successful in 2m10s Details Release / Docker (push) Failing after 3m43s Details Release / Deploy to prod (push) Has been skipped Details Release / Gitea Release (push) Has been skipped Details Replace 5 sequential build-push-action steps with a single docker/bake-action call backed by docker-bake.hcl. BuildKit now builds all images in parallel: backend/runner/pocketbase share one Go builder stage (compiled once), while caddy and ui build concurrently alongside the Go targets. Workflow YAML goes from ~130 lines of build steps to ~35. Adding a new image now only requires a new target block in docker-bake.hcl. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:09:27 +05:00
Admin	fc73756308	fix: run pocketbase as root + add healthcheck start_period Some checks failed Release / Test backend (push) Successful in 56s Details Release / Check ui (push) Successful in 1m59s Details Release / Docker (push) Successful in 7m49s Details Release / Deploy to prod (push) Failing after 33s Details Release / Gitea Release (push) Successful in 29s Details - Remove non-root user from pocketbase Docker image; the existing pb_data volume was created by the previous root-running image so files are owned by root — running as a non-root appuser caused an immediate permission error and container exit - Increase healthcheck retries to 10 and add start_period=30s so migrations have time to run on first boot before liveness checks begin Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 19:00:21 +05:00
Admin	3f436877ee	fix: pocketbase healthcheck (add wget) + saveIfAbsent infinite recursion Some checks failed Release / Test backend (push) Successful in 1m6s Details Release / Check ui (push) Successful in 1m56s Details Release / Docker (push) Successful in 8m19s Details Release / Deploy to prod (push) Failing after 36s Details Release / Gitea Release (push) Successful in 22s Details - Add wget to pocketbase Alpine image so the docker-compose healthcheck (wget http://localhost:8090/api/health) can actually run - Fix saveIfAbsent calling itself instead of app.Save(c) — was an infinite recursion that would stack-overflow on a fresh install Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 18:05:02 +05:00
Admin	812028e50d	ci: add pocketbase image build + automated prod deploy step Some checks failed Release / Test backend (push) Successful in 5m39s Details Release / Check ui (push) Successful in 2m1s Details Release / Docker (push) Successful in 7m46s Details Release / Deploy to prod (push) Failing after 1m53s Details Release / Gitea Release (push) Successful in 35s Details release.yaml: - Build and push kalekber/libnovel-pocketbase image on every release tag - Add deploy job (runs after docker): copies docker-compose.yml from the tagged commit to /opt/libnovel on prod, pulls new images, restarts changed services with --remove-orphans (cleans up removed pb-init) ci.yaml: - Validate cmd/pocketbase builds on every branch push Required new Gitea secrets: PROD_HOST, PROD_USER, PROD_SSH_KEY, PROD_SSH_KNOWN_HOSTS (see deploy job comments for instructions). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-15 11:06:27 +05:00