From 07fbfe55557d6a3df0535419c4499ad4cb49b081 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 1 Mar 2026 17:24:55 +0500
Subject: [PATCH] feat: show in-progress books under 'Continue reading' on home
 page

Reading progress lives in localStorage so sorting is done client-side.
On page load, JS reads the reading_progress map, moves any matching book
cards into a 'Continue reading' grid above the main grid, and reveals an
'Available' heading for the remainder. Books with no saved progress are
unaffected and no server changes are required.
---
 scraper/internal/server/ui.go | 89 +++++++++++++++++++++++++----------
 1 file changed, 64 insertions(+), 25 deletions(-)

diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index 403c7e7..e499774 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -146,34 +146,73 @@ const homeTmpl = `
     <div id="scrape-status" class="mt-3"></div>
   </div>
 
-  <!-- Book grid -->
-  <div class="grid gap-4 sm:grid-cols-2">
-    {{range .Books}}
-    <a href="/books/{{.Slug}}"
-       hx-get="/books/{{.Slug}}"
-       hx-target="#main-content"
-       hx-push-url="true"
-       hx-swap="innerHTML"
-       class="group block rounded-xl border border-zinc-800 bg-zinc-900 p-5 hover:border-amber-500 transition-colors cursor-pointer">
-      <div class="flex gap-4">
-        {{if .Cover}}
-        <img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
-        {{end}}
-        <div class="min-w-0">
-          <h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 truncate">{{.Title}}</h2>
-          {{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
-          <div class="flex gap-2 mt-2 flex-wrap">
-            {{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
-            {{if .TotalChapters}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.TotalChapters}} ch</span>{{end}}
+  <!-- Continue reading section (populated by JS) -->
+  <div id="continue-reading-section" class="hidden mb-10">
+    <h2 class="text-lg font-semibold text-zinc-200 mb-3">Continue reading</h2>
+    <div id="continue-reading-grid" class="grid gap-4 sm:grid-cols-2"></div>
+  </div>
+
+  <!-- All books grid -->
+  <div id="available-section">
+    <h2 id="available-heading" class="text-lg font-semibold text-zinc-200 mb-3 hidden">Available</h2>
+    <div id="books-grid" class="grid gap-4 sm:grid-cols-2">
+      {{range .Books}}
+      <a href="/books/{{.Slug}}"
+         hx-get="/books/{{.Slug}}"
+         hx-target="#main-content"
+         hx-push-url="true"
+         hx-swap="innerHTML"
+         data-slug="{{.Slug}}"
+         class="book-card group block rounded-xl border border-zinc-800 bg-zinc-900 p-5 hover:border-amber-500 transition-colors cursor-pointer">
+        <div class="flex gap-4">
+          {{if .Cover}}
+          <img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
+          {{end}}
+          <div class="min-w-0">
+            <h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 truncate">{{.Title}}</h2>
+            {{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
+            <div class="flex gap-2 mt-2 flex-wrap">
+              {{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
+              {{if .TotalChapters}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.TotalChapters}} ch</span>{{end}}
+            </div>
           </div>
         </div>
-      </div>
-    </a>
-    {{else}}
-    <p class="text-zinc-500 col-span-2">No books scraped yet.</p>
-    {{end}}
+      </a>
+      {{else}}
+      <p class="text-zinc-500 col-span-2">No books scraped yet.</p>
+      {{end}}
+    </div>
   </div>
-</div>`
+</div>
+
+<script>
+(function () {
+  var progress = {};
+  try { progress = JSON.parse(localStorage.getItem('reading_progress') || '{}'); } catch(_) {}
+
+  var inProgress = Object.keys(progress);
+  if (inProgress.length === 0) return;
+
+  var continueSection = document.getElementById('continue-reading-section');
+  var continueGrid    = document.getElementById('continue-reading-grid');
+  var availableHeading = document.getElementById('available-heading');
+  var moved = 0;
+
+  inProgress.forEach(function(slug) {
+    var card = document.querySelector('[data-slug="' + slug + '"]');
+    if (!card) return;
+    var clone = card.cloneNode(true);
+    continueGrid.appendChild(clone);
+    card.parentNode.removeChild(card);
+    moved++;
+  });
+
+  if (moved > 0) {
+    continueSection.classList.remove('hidden');
+    availableHeading.classList.remove('hidden');
+  }
+}());
+</script>`
 
 func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
 	if r.URL.Path != "/" {