feat: per-card deep-link hover actions

42f74e85a53a387a7a73a57ff8e344f5cdb86354 · 2026-05-14 09:31:44 -0700 · Steve

- shopify cards: 'S' = open in Shopify Admin (designer-laboratory-sandbox), '↗' = open on designerwallcoverings.com storefront
- wallco cards: '↗' = open on wallco.ai/design/:id
- buttons appear on hover above the meta strip, stopPropagation so click doesn't toggle selection
- tooltip on .lbl for truncated titles

Files touched

M index.html

Diff

commit 42f74e85a53a387a7a73a57ff8e344f5cdb86354
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu May 14 09:31:44 2026 -0700

    feat: per-card deep-link hover actions
    
    - shopify cards: 'S' = open in Shopify Admin (designer-laboratory-sandbox), '↗' = open on designerwallcoverings.com storefront
    - wallco cards: '↗' = open on wallco.ai/design/:id
    - buttons appear on hover above the meta strip, stopPropagation so click doesn't toggle selection
    - tooltip on .lbl for truncated titles
---
 index.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4d833d2..80ee06f 100644
--- a/index.html
+++ b/index.html
@@ -96,6 +96,15 @@
   .cb { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:4px; background:rgba(15,14,12,.85); border:1.5px solid #555; display:flex; align-items:center; justify-content:center; font:700 14px/1 -apple-system; color:transparent }
   .card.selected .cb { background:var(--gold); border-color:var(--gold); color:#0f0e0c }
   .card.readonly .cb { display:none }
+  .card .actions { position:absolute; bottom:32%; right:6px; display:none; gap:4px; z-index:2 }
+  .card:hover .actions { display:flex }
+  .card .actions a, .card .actions button {
+    width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center;
+    background:rgba(15,14,12,.92); border:1px solid var(--line); color:var(--ink); border-radius:4px;
+    text-decoration:none; font:600 11px/1 -apple-system; cursor:pointer;
+  }
+  .card .actions a:hover, .card .actions button:hover { border-color:var(--gold); color:var(--gold); background:#1a1816 }
+  .card.readonly { cursor:default }
 
   /* ── matrix mode (fliepaper-bugs) ───────────────────────────────── */
   .matrix table { border-collapse:separate; border-spacing:6px; width:100% }
@@ -329,6 +338,18 @@ function renderMatrix(wrap) {
   attachCardHandlers();
 }
 
+const SHOPIFY_STORE_SLUG = 'designer-laboratory-sandbox';  // for admin deep links
+function deepLinks(r, isShopify) {
+  if (isShopify) {
+    const links = [];
+    if (r.shopify_id) links.push(`<a target="_blank" rel="noopener" href="https://admin.shopify.com/store/${SHOPIFY_STORE_SLUG}/products/${r.shopify_id}" title="Open in Shopify Admin">S</a>`);
+    if (r.handle) links.push(`<a target="_blank" rel="noopener" href="https://designerwallcoverings.com/products/${r.handle}" title="Open on DW storefront">↗</a>`);
+    return links.join('');
+  }
+  // wallco
+  return `<a target="_blank" rel="noopener" href="https://wallco.ai/design/${r.id}" title="Open on wallco.ai">↗</a>`;
+}
+
 function cardHtml(r, opts={}) {
   const ro = CURRENT.readonly ? 'readonly' : '';
   const sel = selected.has(r.id) ? 'selected' : '';
@@ -348,10 +369,11 @@ function cardHtml(r, opts={}) {
     <div class="card ${sel} ${ro}" data-id="${r.id}">
       ${badge}
       <span class="cb">✓</span>
+      <div class="actions" onclick="event.stopPropagation()">${deepLinks(r, isShopify)}</div>
       <img loading="lazy" src="${imgSrc}" alt="">
       <div class="meta">
         <div class="dig">${esc(dig)}</div>
-        <div class="lbl">${title ? esc(title) : ''}</div>
+        <div class="lbl" title="${esc(title)}">${title ? esc(title) : ''}</div>
         ${sub ? `<div class="lbl" style="color:#888;font-size:10px">${sub}</div>` : ''}
       </div>
     </div>`;

← a147034 feat: search box + load-more pagination · back to 4square Admin · feat: card-detail modal with full metadata 48decb7 →