wear: surface the Signature Edit — ✦ badge + 'Signature Edit first' sort

71f5347d02304f423b82ca233af67dcdbff0151d · 2026-09-09 20:14:03 -0700 · Steve

The 52 signers with a seated editorial 'worn' shot were buried among 2,955 in the
grid. Now a subtle ✦ star + green outline marks them, and a new sort option
brings them to the top so shoppers can find the premium lookbook content. Keyed
off the same exact worn-shot map (no false badges). 0 errors, verified.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/wear.html

Diff

commit 71f5347d02304f423b82ca233af67dcdbff0151d
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Sep 9 20:14:03 2026 -0700

    wear: surface the Signature Edit — ✦ badge + 'Signature Edit first' sort
    
    The 52 signers with a seated editorial 'worn' shot were buried among 2,955 in the
    grid. Now a subtle ✦ star + green outline marks them, and a new sort option
    brings them to the top so shoppers can find the premium lookbook content. Keyed
    off the same exact worn-shot map (no false badges). 0 errors, verified.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/wear.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/wear.html b/public/wear.html
index 67b1c06..dc2948c 100644
--- a/public/wear.html
+++ b/public/wear.html
@@ -49,6 +49,10 @@
   .grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:12px; }
   .card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; text-align:center; transition:transform .12s, box-shadow .12s; }
   .card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.07); }
+  .card { position:relative; }
+  /* ✦ marks signers who have a seated editorial "worn" shot (the Signature Edit). */
+  .card.has-edit { box-shadow:inset 0 0 0 1px var(--green); }
+  .edit-star { position:absolute; top:7px; right:9px; font-size:12px; line-height:1; color:var(--green); }
   .card img { max-width:100%; height:64px; object-fit:contain; mix-blend-mode:multiply; }
   /* Colored-ink signatures on clean white via the shared preview component. */
   .card .signature-preview { height:64px; }
@@ -151,6 +155,7 @@
     <label>Sort
       <select id="sort">
         <option value="name">Name A→Z</option>
+        <option value="featured">✦ Signature Edit first</option>
         <option value="cat">Category</option>
         <option value="shuffle">Shuffle</option>
       </select>
@@ -357,6 +362,7 @@ function render(){
   if (q) sigs = sigs.filter(s => (s.full_name||'').toLowerCase().includes(q) || (s.category||'').toLowerCase().includes(q));
   const sort = document.getElementById('sort').value;
   if (sort==='name') sigs.sort((a,b)=>a.full_name.localeCompare(b.full_name));
+  else if (sort==='featured') sigs.sort((a,b)=>(lifestyleSlug(b.full_name)?1:0)-(lifestyleSlug(a.full_name)?1:0) || a.full_name.localeCompare(b.full_name));
   else if (sort==='cat') sigs.sort((a,b)=>(a.category||'').localeCompare(b.category||'')||a.full_name.localeCompare(b.full_name));
   else if (sort==='shuffle') sigs.sort(()=>Math.random()-0.5);
   document.getElementById('count').textContent = sigs.length ? `${sigs.length.toLocaleString()} available` : '';
@@ -368,7 +374,7 @@ function render(){
     return;
   }
   grid.style.display='grid'; empty.style.display='none';
-  grid.innerHTML = sigs.map(s=>`<div class="card" data-qid="${s.qid}">
+  grid.innerHTML = sigs.map(s=>`<div class="card${lifestyleSlug(s.full_name)?' has-edit':''}" data-qid="${s.qid}">${lifestyleSlug(s.full_name)?'<span class="edit-star" title="Signature Edit — see them wearing it">✦</span>':''}
     <span class="signature-preview" data-signature-src="${escA(s.signature_image_url)}" data-signature-label="Signature of ${escA(s.full_name)}" data-signature-tint-key="${escA(s.qid||s.full_name)}"></span>
     <div class="nm">${s.full_name}</div><div class="cat">${s.category||''}</div></div>`).join('');
   grid.querySelectorAll('.card').forEach(c=>c.onclick=()=>openProduct(c.dataset.qid));

← cb3ba6f wear: map Michelangelo Buonarroti → campaign-michelangelo.jp · back to CelebritySignatures · wear: fix stale ink-color fallback in reconcile-wear-orders. 8322ca0 →