From 2882017876ab658e096faf9096ff7d235ec4cb50 Mon Sep 17 00:00:00 2001
From: "Brennan Wilkes (Text Groove)" <brennan@textgroove.com>
Date: Tue, 20 Jan 2026 14:08:21 -0800
Subject: [PATCH] feat: Better URL rendering

---
 viz/app/linker_page.js | 27 ++++++++++++++-------------
 viz/app/search_page.js | 31 +++++++++++++++++++++++--------
 viz/style.css          |  4 ++++
 3 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/viz/app/linker_page.js b/viz/app/linker_page.js
index 9e8d20d..c010007 100644
--- a/viz/app/linker_page.js
+++ b/viz/app/linker_page.js
@@ -1,3 +1,4 @@
+/* viz/app/linker_page.js */
 import { esc, renderThumbHtml } from "./dom.js";
 import {
   tokenizeQuery,
@@ -110,14 +111,6 @@ function buildMappedSkuSet(links) {
   return s;
 }
 
-function openLinkHtml(url) {
-  const u = String(url || "").trim();
-  if (!u) return "";
-  return `<a class="badge" href="${esc(
-    u
-  )}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">open</a>`;
-}
-
 function isBCStoreLabel(label) {
   const s = String(label || "").toLowerCase();
   return s.includes("bcl") || s.includes("strath");
@@ -381,7 +374,17 @@ export async function renderSkuLinker($app) {
     const plus = storeCount > 1 ? ` +${storeCount - 1}` : "";
     const price = it.cheapestPriceStr ? it.cheapestPriceStr : "(no price)";
     const store = it.cheapestStoreLabel || ([...it.stores][0] || "Store");
-    const open = openLinkHtml(it.sampleUrl || "");
+
+    // NEW: store badge is the link (use first store url)
+    const href = String(it.sampleUrl || "").trim();
+    const storeBadge = href
+      ? `<a class="badge" href="${esc(
+          href
+        )}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">${esc(
+          store
+        )}${esc(plus)}</a>`
+      : `<span class="badge">${esc(store)}${esc(plus)}</span>`;
+
     return `
       <div class="item ${pinned ? "pinnedItem" : ""}" data-sku="${esc(it.sku)}">
         <div class="itemRow">
@@ -393,10 +396,8 @@ export async function renderSkuLinker($app) {
             </div>
             <div class="meta">
               <span class="mono">${esc(price)}</span>
-              <span class="badge">${esc(store)}${esc(plus)}</span>
-              ${open}
+              ${storeBadge}
             </div>
-            <div class="meta"><span class="mono">${esc(it.sampleUrl || "")}</span></div>
             ${pinned ? `<div class="small">Pinned (click again to unpin)</div>` : ``}
           </div>
         </div>
@@ -639,7 +640,7 @@ export async function renderSkuLinker($app) {
       return;
     }
     if (isIgnoredPair(a, b)) {
-      $status.textContent = "This pair is already ignored.";
+      $status.textContent = "Not allowed: unknown SKUs cannot be ignored.";
       return;
     }
 
diff --git a/viz/app/search_page.js b/viz/app/search_page.js
index 98dca4e..2897163 100644
--- a/viz/app/search_page.js
+++ b/viz/app/search_page.js
@@ -1,3 +1,4 @@
+/* viz/app/search_page.js */
 import { esc, renderThumbHtml, prettyTs } from "./dom.js";
 import { tokenizeQuery, matchesAllTokens, displaySku } from "./sku.js";
 import { loadIndex, loadRecent, loadSavedQuery, saveQuery } from "./state.js";
@@ -45,6 +46,16 @@ export function renderSearch($app) {
         const price = it.cheapestPriceStr ? it.cheapestPriceStr : "(no price)";
         const store = it.cheapestStoreLabel || ([...it.stores][0] || "Store");
 
+        // NEW: store badge is the link (use first store url)
+        const href = String(it.sampleUrl || "").trim();
+        const storeBadge = href
+          ? `<a class="badge" href="${esc(
+              href
+            )}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">${esc(
+              store
+            )}${esc(plus)}</a>`
+          : `<span class="badge">${esc(store)}${esc(plus)}</span>`;
+
         return `
           <div class="item" data-sku="${esc(it.sku)}">
             <div class="itemRow">
@@ -58,10 +69,7 @@ export function renderSearch($app) {
                   </div>
                 <div class="meta">
                   <span class="mono">${esc(price)}</span>
-                  <span class="badge">${esc(store)}${esc(plus)}</span>
-                </div>
-                <div class="meta">
-                  <span class="mono">${esc(it.sampleUrl || "")}</span>
+                  ${storeBadge}
                 </div>
               </div>
             </div>
@@ -123,6 +131,16 @@ export function renderSearch($app) {
 
           const img = aggBySku.get(sku)?.img || "";
 
+          // NEW: store badge links to this row's url
+          const href = String(r.url || "").trim();
+          const storeBadge = href
+            ? `<a class="badge" href="${esc(
+                href
+              )}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">${esc(
+                r.storeLabel || ""
+              )}</a>`
+            : `<span class="badge">${esc(r.storeLabel || "")}</span>`;
+
           return `
             <div class="item" data-sku="${esc(sku)}">
               <div class="itemRow">
@@ -136,15 +154,12 @@ export function renderSearch($app) {
                     </div>
                   <div class="meta">
                     <span class="badge">${esc(kind)}</span>
-                    <span class="badge">${esc(r.storeLabel || "")}</span>
+                    ${storeBadge}
                     <span class="mono">${esc(priceLine)}</span>
                   </div>
                   <div class="meta">
                     <span class="mono">${esc(when)}</span>
                   </div>
-                  <div class="meta">
-                    <span class="mono">${esc(r.url || "")}</span>
-                  </div>
                 </div>
               </div>
             </div>
diff --git a/viz/style.css b/viz/style.css
index 16d6686..51017d6 100644
--- a/viz/style.css
+++ b/viz/style.css
@@ -1,3 +1,4 @@
+/* viz/style.css */
 :root {
   --bg: #0b0d10;
   --panel: #12161b;
@@ -18,6 +19,9 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* NEW: don't underline badge-links on hover */
+a.badge:hover { text-decoration: none; }
+
 .container {
   max-width: 980px;
   margin: 0 auto;