fix: show source URL in search input on ranking autocomplete selection

- selectItem() now sets the visible input to source_url (not the title), so the user can see and copy the link before scraping
- Keyboard navigation (ArrowUp/Down) also previews the URL in the input
- Added URL hint line inside each dropdown item showing the full source_url
- Genres included in search haystack (was missing before)
- Deduplicated filter logic into filterRanking() helper
- Raised max results from 8 to 10

scraper/internal/server/ui.go

@@ -321,6 +321,14 @@ const homeTmpl = `
       activeIdx = -1;
     }
 
+    // Select an item: put the URL in the visible input so the user can see/copy it.
+    function selectItem(item) {
+      var url = item.source_url || '';
+      searchInput.value = url;
+      urlInput.value    = url;
+      closeDrop();
+    }
+
     function buildItem(item, q) {
       var li = document.createElement('li');
       li.className = 'flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-zinc-800 transition-colors';
@@ -355,6 +363,14 @@ const homeTmpl = `
         txt.appendChild(author);
       }
 
+      // Show the URL so the user knows what will land in the field.
+      if (item.source_url) {
+        var urlHint = document.createElement('p');
+        urlHint.className = 'text-xs text-zinc-500 truncate mt-0.5';
+        urlHint.textContent = item.source_url;
+        txt.appendChild(urlHint);
+      }
+
       var meta = document.createElement('div');
       meta.className = 'flex gap-1.5 mt-1 flex-wrap';
       if (item.status) {
@@ -383,8 +399,10 @@ const homeTmpl = `
       });
       activeIdx = idx;
       if (idx >= 0 && idx < items.length) {
-        searchInput.value = items[idx].title || '';
-        urlInput.value    = items[idx].source_url || '';
+        // Preview the URL in the input while navigating with keyboard.
+        var url = items[idx].source_url || '';
+        searchInput.value = url;
+        urlInput.value    = url;
       }
     }
 
@@ -396,49 +414,43 @@ const homeTmpl = `
         var li = buildItem(item, q);
         li.addEventListener('mousedown', function (e) {
           e.preventDefault(); // keep focus on input
-          searchInput.value = item.title || item.source_url || '';
-          urlInput.value    = item.source_url || '';
-          closeDrop();
+          selectItem(item);
         });
         dropdown.appendChild(li);
       });
       dropdown.classList.remove('hidden');
     }
 
+    function filterRanking(q) {
+      return RANKING.filter(function (item) {
+        var genres = (item.genres || []).join(' ');
+        var haystack = ((item.title || '') + ' ' + (item.author || '') + ' ' + (item.status || '') + ' ' + genres).toLowerCase();
+        return haystack.indexOf(q) !== -1;
+      }).slice(0, 10);
+    }
+
     searchInput.addEventListener('input', function () {
       var q = searchInput.value.trim().toLowerCase();
       syncURLField(searchInput.value);
       if (!q) { closeDrop(); return; }
       // If it looks like a URL, no autocomplete needed.
       if (/^https?:\/\//i.test(q)) { closeDrop(); return; }
-      var results = RANKING.filter(function (item) {
-        var haystack = ((item.title || '') + ' ' + (item.author || '') + ' ' + (item.status || '')).toLowerCase();
-        return haystack.indexOf(q) !== -1;
-      }).slice(0, 8);
-      showDrop(results, q);
+      showDrop(filterRanking(q), q);
     });
 
     searchInput.addEventListener('keydown', function (e) {
-      var lis = dropdown.querySelectorAll('li');
-      var items = RANKING.filter(function (item) {
       var q = searchInput.value.trim().toLowerCase();
-        var haystack = ((item.title || '') + ' ' + (item.author || '') + ' ' + (item.status || '')).toLowerCase();
-        return haystack.indexOf(q) !== -1;
-      }).slice(0, 8);
+      var items = /^https?:\/\//i.test(q) ? [] : filterRanking(q);
 
       if (e.key === 'ArrowDown') {
         e.preventDefault();
-        setActive(Math.min(activeIdx + 1, lis.length - 1), items);
+        setActive(Math.min(activeIdx + 1, items.length - 1), items);
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
         setActive(Math.max(activeIdx - 1, 0), items);
       } else if (e.key === 'Enter' && activeIdx >= 0) {
         e.preventDefault();
-        if (items[activeIdx]) {
-          searchInput.value = items[activeIdx].title || items[activeIdx].source_url || '';
-          urlInput.value    = items[activeIdx].source_url || '';
-        }
-        closeDrop();
+        if (items[activeIdx]) selectItem(items[activeIdx]);
       } else if (e.key === 'Escape') {
         closeDrop();
       }