diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go index fda39b1..d16dc0e 100644 --- a/scraper/internal/server/ui.go +++ b/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 q = searchInput.value.trim().toLowerCase(); + 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(); }