From f03ff393972660fad006c4f7d1f5059e319e995d Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 1 Mar 2026 22:28:47 +0500
Subject: [PATCH] Replace ranking Scrape button with two-click card interaction

- Remove Scrape form/button and Source text link from non-local ranking cards
- First click on a card highlights it amber and shows 'Click again to scrape' hint
- Second click POSTs to /ui/scrape/book and replaces card with polling status badge
- Pending state auto-cancels after 3 s or when clicking outside
- Source icon (external link SVG) retained but dimmed; stops click propagation
---
 scraper/internal/server/ui.go | 90 +++++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 14 deletions(-)

diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index 61b5b94..d6bd2af 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -716,14 +716,15 @@ const rankingTmpl = `
          data-status="{{.Status}}"
          data-genres="{{range .Genres}}{{.}}|{{end}}"
          data-local="0"
-         class="group flex gap-3 rounded-xl border border-zinc-800 bg-zinc-900 p-3 hover:border-amber-500 transition-colors min-w-0">
+         {{if .SourceURL}}data-scrape-url="{{.SourceURL}}"{{end}}
+         class="ranking-card group flex gap-3 rounded-xl border border-zinc-800 bg-zinc-900 p-3 transition-colors min-w-0{{if .SourceURL}} cursor-pointer hover:border-zinc-600{{end}}">
       {{if .Cover}}
       <img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
       {{end}}
       <div class="min-w-0 flex-1">
         <div class="flex items-start gap-1.5 flex-wrap">
           {{if .Rank}}<span class="text-xs font-bold text-amber-400 flex-shrink-0">#{{.Rank}}</span>{{end}}
-          <h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
+          <h2 class="font-semibold text-zinc-100 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
         </div>
         {{if .Author}}<p class="text-xs text-zinc-400 mt-0.5 truncate">{{.Author}}</p>{{end}}
         <div class="flex gap-1.5 mt-1.5 flex-wrap">
@@ -731,21 +732,14 @@ const rankingTmpl = `
           {{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400">{{.}}</span>{{end}}
         </div>
         {{if .SourceURL}}
-        <div class="mt-2 flex items-center gap-2 flex-wrap">
-          <form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
-            <input type="hidden" name="url" value="{{.SourceURL}}">
-            <button type="submit"
-              class="text-xs px-2 py-0.5 rounded text-amber-400 hover:text-amber-300 transition-colors border-0 bg-transparent cursor-pointer">
-              Scrape
-            </button>
-          </form>
-          <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
-             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded text-zinc-400 hover:text-zinc-200 transition-colors">
+        <div class="mt-2 flex items-center gap-2">
+          <span class="scrape-hint text-xs text-zinc-500 hidden">Click again to scrape</span>
+          <button onclick="event.stopPropagation();window.open('{{.SourceURL}}','_blank','noopener,noreferrer')"
+             class="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded text-zinc-600 hover:text-zinc-300 transition-colors cursor-pointer border-0 bg-transparent ml-auto">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
             </svg>
-            Source
-          </a>
+          </button>
         </div>
         {{end}}
       </div>
@@ -865,6 +859,74 @@ const rankingTmpl = `
       applyFilters();
     });
   }
+
+  /* ── two-click scrape on ranking cards ─────────────────────────────────── */
+  var pendingCard = null;
+  var pendingTimer = null;
+
+  function cancelPending() {
+    if (!pendingCard) return;
+    pendingCard.style.borderColor = '';
+    pendingCard.style.background = '';
+    var hint = pendingCard.querySelector('.scrape-hint');
+    if (hint) hint.classList.add('hidden');
+    pendingCard = null;
+    if (pendingTimer) { clearTimeout(pendingTimer); pendingTimer = null; }
+  }
+
+  function submitScrape(card) {
+    var url = card.dataset.scrapeUrl;
+    if (!url) return;
+    // Replace inner content with a running badge immediately.
+    var badge = document.createElement('div');
+    badge.className = 'flex items-center text-sm px-3 py-2 rounded-lg border text-amber-300 bg-amber-950 border-amber-800';
+    badge.innerHTML = '<span class="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse mr-2"></span>Scraping…';
+    badge.setAttribute('hx-get', '/ui/scrape/status');
+    badge.setAttribute('hx-trigger', 'every 3s');
+    badge.setAttribute('hx-target', 'this');
+    badge.setAttribute('hx-swap', 'outerHTML');
+    card.innerHTML = '';
+    card.appendChild(badge);
+    card.style.borderColor = '';
+    card.style.background = '';
+    card.style.cursor = 'default';
+    card.classList.remove('cursor-pointer');
+    htmx.process(badge);
+
+    var body = new URLSearchParams();
+    body.set('url', url);
+    fetch('/ui/scrape/book', { method: 'POST', body: body });
+  }
+
+  grid.addEventListener('click', function (e) {
+    var card = e.target.closest('.ranking-card[data-scrape-url]');
+    if (!card) return;
+    // Ignore clicks on the source button.
+    if (e.target.closest('button')) return;
+
+    if (pendingCard && pendingCard !== card) cancelPending();
+
+    if (card === pendingCard) {
+      // Second click — go.
+      cancelPending();
+      submitScrape(card);
+    } else {
+      // First click — enter pending state.
+      pendingCard = card;
+      card.style.borderColor = '#f59e0b';
+      card.style.background = 'rgba(245,158,11,0.04)';
+      var hint = card.querySelector('.scrape-hint');
+      if (hint) hint.classList.remove('hidden');
+      // Auto-cancel after 3 s if no second click.
+      pendingTimer = setTimeout(cancelPending, 3000);
+    }
+  });
+
+  // Clicking anywhere outside a card cancels pending state.
+  document.addEventListener('click', function (e) {
+    if (pendingCard && !e.target.closest('.ranking-card')) cancelPending();
+  });
+
 }());
 </script>`