← back to Abrams

persist ideas-page sort/filter/density + apply density on hydrate

7a3c2c97cbabbfb9b82b7a4ea78640b347c8f356 · 2026-05-19 17:22:00 -0700 · SteveStudio2

Sort + filter previously not persisted. Density was persisted but only
re-applied on input event, so the grid layout was stale after reload.
Hoisted apply-side into applyDensity() and called it after the initial
fetch + on every control change.

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

Files touched

• M public/ideas.html

Diff

commit 7a3c2c97cbabbfb9b82b7a4ea78640b347c8f356
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 17:22:00 2026 -0700

    persist ideas-page sort/filter/density + apply density on hydrate
    
    Sort + filter previously not persisted. Density was persisted but only
    re-applied on input event, so the grid layout was stale after reload.
    Hoisted apply-side into applyDensity() and called it after the initial
    fetch + on every control change.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/ideas.html | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/public/ideas.html b/public/ideas.html
index ac8e12cb..509529a4 100644
--- a/public/ideas.html
+++ b/public/ideas.html
@@ -96,15 +96,29 @@ function renderIdeas() {
     </div>
   `).join('') || '<div style="color:var(--fg-3);padding:48px;text-align:center;font-family:var(--mono);">no SWOTs match filter</div>';
 }
-fetch('/api/ideas').then(r=>r.json()).then(j => { allIdeas = j.ideas || []; renderIdeas(); });
-document.getElementById('sort').addEventListener('change', renderIdeas);
-document.getElementById('filter').addEventListener('input', renderIdeas);
+function applyDensity(v) {
+  document.querySelectorAll('.idea-card .swot').forEach(el => el.style.gridTemplateColumns = v === '1' ? '1fr 1fr' : (v === '2' ? '1fr 1fr 1fr 1fr' : '1fr'));
+}
+
+// hydrate sort + filter + density from localStorage BEFORE first render (Steve standing rule)
+const savedSort = localStorage.getItem('abrams.ideas.sort');
+if (savedSort) {
+  const sortEl = document.getElementById('sort');
+  if ([...sortEl.options].some(o => o.value === savedSort)) sortEl.value = savedSort;
+}
+const savedFilter = localStorage.getItem('abrams.ideas.filter');
+if (savedFilter) document.getElementById('filter').value = savedFilter;
+const sd = localStorage.getItem('abrams.ideas.density');
+if (sd) { document.getElementById('density').value = sd; }
+
+fetch('/api/ideas').then(r=>r.json()).then(j => { allIdeas = j.ideas || []; renderIdeas(); applyDensity(document.getElementById('density').value); });
+document.getElementById('sort').addEventListener('change', e => { localStorage.setItem('abrams.ideas.sort', e.target.value); renderIdeas(); applyDensity(document.getElementById('density').value); });
+document.getElementById('filter').addEventListener('input', e => { localStorage.setItem('abrams.ideas.filter', e.target.value); renderIdeas(); applyDensity(document.getElementById('density').value); });
 document.getElementById('density').addEventListener('input', e => {
   const v = e.target.value;
-  document.querySelectorAll('.idea-card .swot').forEach(el => el.style.gridTemplateColumns = v === '1' ? '1fr 1fr' : (v === '2' ? '1fr 1fr 1fr 1fr' : '1fr'));
+  applyDensity(v);
   localStorage.setItem('abrams.ideas.density', v);
 });
-const sd = localStorage.getItem('abrams.ideas.density'); if (sd) { document.getElementById('density').value = sd; }
 </script>
 </body>
 </html>

← 8931bdf8 persist projects-grid sort to localStorage + hydrate before  ·  back to Abrams  ·  persist terminal market sort/group controls to localStorage d2d61bc0 →