viewer: add List view toggle (compact horizontal rows, persisted) alongside the card grid

186111ccef1824697030892e0190f6334b1f88c7 · 2026-06-09 17:38:44 -0700 · SteveStudio2

Files touched

M data/launch-queue.jsonl
M public/index.html

Diff

commit 186111ccef1824697030892e0190f6334b1f88c7
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue Jun 9 17:38:44 2026 -0700

    viewer: add List view toggle (compact horizontal rows, persisted) alongside the card grid
---
 data/launch-queue.jsonl |  1 -
 public/index.html       | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/data/launch-queue.jsonl b/data/launch-queue.jsonl
index 3eb7e7d..e69de29 100644
--- a/data/launch-queue.jsonl
+++ b/data/launch-queue.jsonl
@@ -1 +0,0 @@
-{"batchId":"launch-1-1879119","mode":"draft","count":1,"skus":1}
diff --git a/public/index.html b/public/index.html
index dba39e2..d2d9191 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,6 +42,19 @@ a.open:hover{background:var(--panel)}
 #selbar .n{font-weight:700;color:var(--acc)}
 #launch{background:var(--acc);color:#04201a;font-weight:700;border:0;border-radius:8px;padding:8px 18px;cursor:pointer}
 #launch:disabled{opacity:.4;cursor:default}
+/* ── List view ── compact horizontal rows instead of cards */
+.grid.list{grid-template-columns:1fr;gap:4px;padding:12px 16px}
+.grid.list .card{flex-direction:row;align-items:center;border-radius:8px}
+.grid.list .imgwrap{width:52px;min-width:52px;height:52px;aspect-ratio:auto;border-radius:6px;overflow:hidden;margin:6px 0 6px 6px}
+.grid.list .imgwrap.noimg::after{font-size:9px}
+.grid.list .pick{position:static;background:none;padding:0 6px 0 8px;flex:0 0 auto}
+.grid.list .b{flex:1;flex-direction:row;align-items:center;gap:14px;padding:6px 14px;flex-wrap:nowrap;overflow:hidden}
+.grid.list .vend{order:1;flex:0 0 150px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.grid.list .ttl{order:2;flex:1 1 200px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.grid.list .row{order:3;flex:0 0 auto;justify-content:flex-end}
+.grid.list .row:nth-of-type(2){flex:0 0 170px}
+.grid.list .sku{white-space:nowrap}
+.grid.list .when{order:4;flex:0 0 200px;margin:0;justify-content:flex-end;white-space:nowrap;overflow:hidden}
 </style></head>
 <body>
 <header>
@@ -63,6 +76,7 @@ a.open:hover{background:var(--panel)}
     </select></div>
   <div class="ctl"><label class="muted">Density</label>
     <input type="range" id="density" min="3" max="10" step="1"></div>
+  <button class="btn" id="view">▤ List view</button>
   <button class="btn" id="selall">☑ Select all shown</button>
 </header>
 <div class="grid" id="grid"></div>
@@ -129,6 +143,9 @@ $('#sort').onchange=()=>{localStorage.setItem('nip.sort',$('#sort').value);load(
 let t; $('#q').oninput=()=>{clearTimeout(t);t=setTimeout(()=>load(true),300);};
 $('#density').oninput=()=>{document.documentElement.style.setProperty('--cols',$('#density').value);localStorage.setItem('nip.density',$('#density').value);};
 $('#more').onclick=()=>load(false);
+function applyView(){const list=localStorage.getItem('nip.view')==='list';grid.classList.toggle('list',list);$('#view').textContent=list?'▦ Grid view':'▤ List view';}
+$('#view').onclick=()=>{localStorage.setItem('nip.view',localStorage.getItem('nip.view')==='list'?'grid':'list');applyView();};
+applyView();
 $('#selall').onclick=()=>{grid.querySelectorAll('.card').forEach(c=>{const id=+c.dataset.id;if(!id)return;sel.add(id);c.classList.add('sel');const cb=c.querySelector('.pick input');if(cb)cb.checked=true;});syncSel();};
 $('#clearsel').onclick=()=>{sel.clear();grid.querySelectorAll('.card.sel').forEach(c=>{c.classList.remove('sel');const cb=c.querySelector('.pick input');if(cb)cb.checked=false;});syncSel();};
 $('#launch').onclick=async()=>{

← 039ba4a viewer: select-and-launch — per-product checkboxes, select-a · back to New Import Viewer · snapshot before shopify-status + collapsed-chips rebuild af2b077 →