fix: add server-side pagination to ranking page (?page=N)

Previously all cached ranking items were dumped into one page and the
page buttons only triggered refetches from novelfire — not navigation.

- handleRanking now reads ?page=N query param (default 1)
- Items sliced server-side at 20 per page (rankingPageSize constant)
- Template receives DisplayNums/CurrentPage/TotalPages for browse nav
- Display pagination bar renders GET /ranking?page=N HTMX links with
  the active page highlighted in amber; hidden when only 1 page
- Fetch section collapsed into a <details> to reduce visual noise
- FetchNums replaces old PageNums field name in template data

scraper/internal/server/ui.go

@@ -557,33 +557,66 @@ const rankingTmpl = `
     <p id="ranking-filter-count" class="text-xs text-zinc-500 whitespace-nowrap hidden"></p>
   </div>
 
-  <!-- Pagination: fetch pages from novelfire -->
+  <!-- Display pagination: browse cached items -->
-  <div class="mb-6">
+  {{if gt .TotalPages 1}}
-    <div class="flex items-center gap-1.5 mb-2 flex-wrap">
+  <div class="mb-4">
-      <span class="text-xs text-zinc-500 mr-1">Fetch up to page:</span>
+    <div class="flex items-center gap-1.5 flex-wrap">
-      {{range .PageNums}}
+      <span class="text-xs text-zinc-500 mr-1">Page:</span>
+      {{$cur := .CurrentPage}}
+      {{range .DisplayNums}}
       {{if eq .Num 0}}
       <span class="text-xs text-zinc-600 px-1 select-none">…</span>
+      {{else if eq .Num $cur}}
+      <span class="text-xs w-8 h-7 rounded-lg bg-amber-700 border border-amber-600 text-white flex items-center justify-center font-semibold">{{.Num}}</span>
       {{else}}
-      <form hx-post="/ranking/refresh"
+      <a href="/ranking?page={{.Num}}"
-            hx-target="#ranking-refresh-status"
+         hx-get="/ranking?page={{.Num}}"
-            hx-swap="innerHTML">
+         hx-target="#main-content"
-        <input type="hidden" name="pages" value="{{.Num}}">
+         hx-push-url="true"
-        <button type="submit"
+         hx-swap="innerHTML"
-          class="text-xs w-8 h-7 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors text-center">
+         class="text-xs w-8 h-7 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors flex items-center justify-center">
-          {{.Num}}
+        {{.Num}}
-        </button>
+      </a>
-      </form>
       {{end}}
       {{end}}
     </div>
-    <p class="text-xs text-zinc-600">
+    <p class="text-xs text-zinc-600 mt-1">Showing {{.TotalItems}} cached novels · page {{.CurrentPage}} of {{.TotalPages}}</p>
-      Each page = ~20 novels from
-      <a href="https://novelfire.net/genre-all/sort-popular/status-all/all-novel?page=1"
-         target="_blank" rel="noopener noreferrer"
-         class="text-zinc-500 hover:text-amber-400 underline underline-offset-2">novelfire.net popular</a>
-    </p>
   </div>
+  {{end}}
+
+  <!-- Fetch: pull more pages from novelfire -->
+  <details class="mb-6 group">
+    <summary class="text-xs text-zinc-500 cursor-pointer select-none hover:text-zinc-300 transition-colors list-none flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+      Fetch more from novelfire.net
+    </summary>
+    <div class="mt-2 pl-4 border-l border-zinc-800">
+      <div class="flex items-center gap-1.5 mb-1 flex-wrap">
+        <span class="text-xs text-zinc-500 mr-1">Fetch up to page:</span>
+        {{range .FetchNums}}
+        {{if eq .Num 0}}
+        <span class="text-xs text-zinc-600 px-1 select-none">…</span>
+        {{else}}
+        <form hx-post="/ranking/refresh"
+              hx-target="#ranking-refresh-status"
+              hx-swap="innerHTML">
+          <input type="hidden" name="pages" value="{{.Num}}">
+          <button type="submit"
+            class="text-xs w-8 h-7 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors text-center">
+            {{.Num}}
+          </button>
+        </form>
+        {{end}}
+        {{end}}
+      </div>
+      <p class="text-xs text-zinc-600">
+        Each page ≈ 20 novels from
+        <a href="https://novelfire.net/genre-all/sort-popular/status-all/all-novel?page=1"
+           target="_blank" rel="noopener noreferrer"
+           class="text-zinc-500 hover:text-amber-400 underline underline-offset-2">novelfire.net popular</a>
+      </p>
+    </div>
+  </details>
 
   <!-- Book grid -->
   <div id="ranking-grid" class="grid gap-3 sm:grid-cols-2 mt-2">
@@ -777,8 +810,11 @@ func rankingPageNums(total int) []pageNum {
 	return out
 }
 
-// handleRanking serves the ranking page from the cached ranking.md file.
+const rankingPageSize = 20
+
+// handleRanking serves the ranking page from the cached ranking.json file.
 // It does NOT trigger a live scrape; use POST /ranking/refresh for that.
+// Supports ?page=N for browsing through cached items (20 per page).
 func (s *Server) handleRanking(w http.ResponseWriter, r *http.Request) {
 	rankingItems, err := s.writer.ReadRankingItems()
 	if err != nil {
@@ -790,16 +826,52 @@ func (s *Server) handleRanking(w http.ResponseWriter, r *http.Request) {
 		cachedAt = info.ModTime().Format("Jan 2, 2006 at 15:04")
 	}
 
+	// Parse requested display page (1-indexed).
+	currentPage := 1
+	if p := r.URL.Query().Get("page"); p != "" {
+		if n, err2 := strconv.Atoi(p); err2 == nil && n > 0 {
+			currentPage = n
+		}
+	}
+
+	totalItems := len(rankingItems)
+	totalPages := 1
+	if totalItems > 0 {
+		totalPages = (totalItems + rankingPageSize - 1) / rankingPageSize
+	}
+	if currentPage > totalPages {
+		currentPage = totalPages
+	}
+
+	// Slice items for the current display page.
+	start := (currentPage - 1) * rankingPageSize
+	end := start + rankingPageSize
+	if end > totalItems {
+		end = totalItems
+	}
+	pageItems := rankingItems
+	if totalItems > 0 {
+		pageItems = rankingItems[start:end]
+	}
+
 	t := template.Must(template.New("ranking").Parse(rankingTmpl))
 	var buf bytes.Buffer
 	_ = t.Execute(&buf, struct {
-		Books    interface{}
+		Books       interface{}
-		CachedAt string
+		CachedAt    string
-		PageNums []pageNum
+		FetchNums   []pageNum
+		DisplayNums []pageNum
+		CurrentPage int
+		TotalPages  int
+		TotalItems  int
 	}{
-		Books:    toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
+		Books:       toRankingViewItems(pageItems, s.writer.LocalSlugs()),
-		CachedAt: cachedAt,
+		CachedAt:    cachedAt,
-		PageNums: rankingPageNums(100),
+		FetchNums:   rankingPageNums(100),
+		DisplayNums: rankingPageNums(totalPages),
+		CurrentPage: currentPage,
+		TotalPages:  totalPages,
+		TotalItems:  totalItems,
 	})
 	s.respond(w, r, "Rankings", buf.String())
 }