← back to Wallco Ai

etsy-bucket: add Sort (newest/oldest/id↑↓/dpi) + persist; format the date chip via toLocaleString (was raw ISO) per standing rule [yolo tick6/N7, local-only]

a375967864cf95a6e2514927d63757be6b2036a3 · 2026-06-02 13:36:21 -0700 · Steve Abrams

Files touched

• M public/admin/etsy-bucket.html

Diff

commit a375967864cf95a6e2514927d63757be6b2036a3
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 2 13:36:21 2026 -0700

    etsy-bucket: add Sort (newest/oldest/id↑↓/dpi) + persist; format the date chip via toLocaleString (was raw ISO) per standing rule [yolo tick6/N7, local-only]
---
 public/admin/etsy-bucket.html | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/admin/etsy-bucket.html b/public/admin/etsy-bucket.html
index a8bcd22..e4b5739 100644
--- a/public/admin/etsy-bucket.html
+++ b/public/admin/etsy-bucket.html
@@ -36,6 +36,7 @@
   <h1><span class="ico">🛒</span> Etsy bucket</h1>
   <span class="pill" id="stat">loading…</span>
   <label class="ctl">State <select id="state"><option value="">all</option><option value="queued">queued</option><option value="exported">exported</option><option value="listed">listed</option><option value="sold">sold</option></select></label>
+  <label class="ctl">Sort <select id="sort"><option value="newest">Newest</option><option value="oldest">Oldest</option><option value="id_desc">ID ↓</option><option value="id">ID ↑</option><option value="dpi">DPI ↓</option></select></label>
   <label class="ctl">Density <input type="range" id="density" min="3" max="8" step="1" value="5"></label>
   <a href="javascript:void(0)" id="explink" style="margin-left:auto;color:var(--etsy);font-size:13px;text-decoration:none;border:1px solid #5a3f17;padding:5px 10px;border-radius:7px">📦 Run export script</a>
 </header>
@@ -59,6 +60,19 @@ const $=id=>document.getElementById(id);
 $('density').value=+(localStorage.getItem('etsy_density')||5); document.documentElement.style.setProperty('--cols',$('density').value);
 $('density').addEventListener('input',e=>{localStorage.setItem('etsy_density',e.target.value);document.documentElement.style.setProperty('--cols',e.target.value);});
 $('state').addEventListener('change',load);
+// Sort persists (Steve standing rule); client-side over the loaded bucket — no refetch.
+$('sort').value=localStorage.getItem('etsy_sort')||'newest';
+$('sort').addEventListener('change',e=>{localStorage.setItem('etsy_sort',e.target.value);render();});
+function fmtDate(s){ if(!s) return '—'; const d=new Date(s); return isNaN(d)?String(s):d.toLocaleString(undefined,{year:'numeric',month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}); }
+function sortItems(rows){
+  const r=rows.slice(), m=$('sort').value;
+  if(m==='newest')      r.sort((a,b)=>String(b.added_at||'').localeCompare(String(a.added_at||'')));
+  else if(m==='oldest') r.sort((a,b)=>String(a.added_at||'').localeCompare(String(b.added_at||'')));
+  else if(m==='id_desc')r.sort((a,b)=>b.design_id-a.design_id);
+  else if(m==='id')     r.sort((a,b)=>a.design_id-b.design_id);
+  else if(m==='dpi')    r.sort((a,b)=>(b.target_dpi||0)-(a.target_dpi||0)||(b.design_id-a.design_id));
+  return r;
+}
 $('explink').addEventListener('click',()=>{
   alert('From your terminal:\n\n  cd ~/Projects/wallco-ai\n  node scripts/export-etsy-digital.js --limit 0\n\nThis writes per-design assets + a listings.csv manifest to data/etsy-exports/<today>/. After upload, designs auto-progress from queued → exported.');
 });
@@ -71,7 +85,7 @@ async function rm(id){
 function render(){
   $('empty').style.display=ALL.length?'none':'block';
   $('stat').innerHTML=`<b>${ALL.length}</b> in bucket`;
-  $('grid').innerHTML=ALL.map(x=>`
+  $('grid').innerHTML=sortItems(ALL).map(x=>`
     <div class="card">
       <div class="thumb">
         <div class="badges"><span class="b ${({queued:'q',exported:'exp',listed:'list'})[x.state]||''}">${x.state}</span></div>
@@ -79,7 +93,7 @@ function render(){
         <button class="rm" onclick="rm(${x.design_id})">✕ remove</button>
       </div>
       <div class="meta"><span class="id">#${x.design_id}</span><span class="dpi">${x.target_dpi}dpi</span></div>
-      <div class="when" title="${x.added_at} added">🕓 ${x.added_at}</div>
+      <div class="when" title="${x.added_at} added">🕓 ${fmtDate(x.added_at)}</div>
     </div>`).join('');
 }
 async function load(){

← 26deee2 LA Toile: staged recipe-B winners gallery builder  ·  back to Wallco Ai  ·  elements: add Sort (newest/oldest/category/color-by-hue/id↑↓ 82cf88b →