rentv :9797 legend: fold the long tail of one-off color tints under a 'N more' toggle

06105fe92990eff6baf819b58a2ec33ae98277da · 2026-08-13 20:41:03 -0700 · Steve Abrams

Legend now shows the meaningful colors (count>=15 OR grounded name) up front and collapses
the ~20-30 low-count one-off tints (header/section shading) under a click-to-expand fold —
Sheet2 goes from 34 rows to 13 shown + 21 folded. Row template factored to a helper; all
rename/reset handlers still wired across primary+minor.

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

Files touched

M public_live/index.html

Diff

commit 06105fe92990eff6baf819b58a2ec33ae98277da
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 20:41:03 2026 -0700

    rentv :9797 legend: fold the long tail of one-off color tints under a 'N more' toggle
    
    Legend now shows the meaningful colors (count>=15 OR grounded name) up front and collapses
    the ~20-30 low-count one-off tints (header/section shading) under a click-to-expand fold —
    Sheet2 goes from 34 rows to 13 shown + 21 folded. Row template factored to a helper; all
    rename/reset handlers still wired across primary+minor.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public_live/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public_live/index.html b/public_live/index.html
index 80cb732..a0918d0 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -105,6 +105,8 @@
   .legendpanel .lgclose:hover{color:var(--ink)}
   .legendpanel .lgreset{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:12px;padding:0 3px;flex:0 0 auto}
   .legendpanel .lgreset:hover{color:var(--accent)}
+  .legendpanel .lgmore{cursor:pointer;color:var(--dim);padding:6px 4px 3px;font-size:11px;border-top:1px dashed var(--line);margin-top:4px}
+  .legendpanel .lgmore:hover{color:var(--accent)}
   .legendpanel .lghex{color:var(--dim);font-variant-numeric:tabular-nums;font-size:10.5px}
   .legendpanel .lgn{color:var(--dim);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
   td.enriched{box-shadow:inset 3px 0 0 #7bc043;background:rgba(123,192,67,.09)}
@@ -579,9 +581,13 @@ function renderLegend(){ let p=$('#legendpanel'); if(p&&document.activeElement&&
   const items=colorTally();
   const CLOSE='<button class="lgclose" title="Close (Esc)">✕</button>';
   if(!items.length){ p.innerHTML='<div class="lghead">'+CLOSE+'Color key — this tab</div><div class="lgempty">No color-coded cells on this tab.</div>'; p.querySelector('.lgclose').onclick=closeLegend; return; }
+  const row=([hx,n])=>{const sure=nameSure(hx);const ov=LS.get('cname.'+hx,null),hasOv=ov!=null&&ov!=='';const mid=hasOv?`<button class="lgreset" data-hx="${hx}" title="Reset to provisional name">↺</button>`:(sure?'':'<span class="lgq" title="unverified guess">?</span>');return `<div class="lgrow"><span class="lgsw" style="background:${hx}"></span><span class="lgname${sure?'':' lgguess'}" contenteditable="true" data-hx="${hx}" title="${sure?'Click to rename':'Heuristic guess — click to rename'}">${esc(provName(hx))}</span>${mid}<span class="lghex">${hx}</span><span class="lgn">${n.toLocaleString()}</span></div>`;};
+  const primary=items.filter(([hx,n])=>n>=15||nameSure(hx)), minor=items.filter(([hx,n])=>!(n>=15||nameSure(hx)));   // fold the long tail of one-off tints
   p.innerHTML='<div class="lghead">'+CLOSE+'Color key — this tab<span class="lgnote">Exact sheet colors + provisional meaning. Click a name to rename (saved locally); ↺ resets a rename. ❓ / grey “?” = unverified guess.</span></div>'
-    +items.map(([hx,n])=>{const sure=nameSure(hx);const ov=LS.get('cname.'+hx,null),hasOv=ov!=null&&ov!=='';const mid=hasOv?`<button class="lgreset" data-hx="${hx}" title="Reset to provisional name">↺</button>`:(sure?'':'<span class="lgq" title="unverified guess">?</span>');return `<div class="lgrow"><span class="lgsw" style="background:${hx}"></span><span class="lgname${sure?'':' lgguess'}" contenteditable="true" data-hx="${hx}" title="${sure?'Click to rename':'Heuristic guess — click to rename'}">${esc(provName(hx))}</span>${mid}<span class="lghex">${hx}</span><span class="lgn">${n.toLocaleString()}</span></div>`;}).join('');
+    +primary.map(row).join('')
+    +(minor.length?`<div class="lgmore" id="lgmore">▸ ${minor.length} more one-off colors</div><div class="lgminor" id="lgminor" style="display:none">${minor.map(row).join('')}</div>`:'');
   p.querySelector('.lgclose').onclick=closeLegend;
+  const mo=p.querySelector('#lgmore'); if(mo)mo.onclick=()=>{ const mn=p.querySelector('#lgminor'),open=mn.style.display!=='none'; mn.style.display=open?'none':'block'; mo.textContent=(open?'▸ ':'▾ ')+minor.length+' more one-off colors'; };
   p.querySelectorAll('.lgreset').forEach(b=>b.onclick=()=>{ localStorage.removeItem('rc2.cname.'+b.dataset.hx); renderLegend(); });
   p.querySelectorAll('.lgname').forEach(el=>{ el.onblur=()=>{ if(window._legEsc){window._legEsc=false;return;} const v=el.textContent.trim(); if(v)LS.set('cname.'+el.dataset.hx, v); };
     el.onkeydown=e=>{ if(e.key==='Enter'){e.preventDefault();el.blur();} }; });

← ddffc49 Add derived 🔥 Warmth score column to RENTV live console + t · back to Rentv Sheet Enrich · rentv :9797 legend: persist the 'more colors' fold state acr 4be38e7 →