persist projects-grid sort to localStorage + hydrate before first load

8931bdf852fd795ae4b4eae0bcd761ac2d3aa104 · 2026-05-19 17:21:24 -0700 · SteveStudio2

Density already persisted; sort did not. Added abrams.sort key, validate
option exists before applying, and moved hydration above the change
listener so the saved value is in place before loadProjects() fires.

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

Files touched

M public/index.html

Diff

commit 8931bdf852fd795ae4b4eae0bcd761ac2d3aa104
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 17:21:24 2026 -0700

    persist projects-grid sort to localStorage + hydrate before first load
    
    Density already persisted; sort did not. Added abrams.sort key, validate
    option exists before applying, and moved hydration above the change
    listener so the saved value is in place before loadProjects() fires.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index beb1d4f0..39d1907c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -250,11 +250,18 @@ async function submitLead(e){
 function openProject(slug){ window.location.href = '/#project-' + slug; /* future: project detail modal */ }
 function openIdea(slug){ window.location.href = '/ideas#' + slug; }
 
-document.getElementById('sort').addEventListener('change', loadProjects);
-document.getElementById('density').addEventListener('input', e => { document.documentElement.style.setProperty('--cols', e.target.value); localStorage.setItem('abrams.density', e.target.value); });
+// hydrate sort + density from localStorage BEFORE first grid load (Steve standing rule)
+const savedSort = localStorage.getItem('abrams.sort');
+if (savedSort) {
+  const sortEl = document.getElementById('sort');
+  if ([...sortEl.options].some(o => o.value === savedSort)) sortEl.value = savedSort;
+}
 const savedDensity = localStorage.getItem('abrams.density');
 if (savedDensity) { document.getElementById('density').value = savedDensity; document.documentElement.style.setProperty('--cols', savedDensity); }
 
+document.getElementById('sort').addEventListener('change', e => { localStorage.setItem('abrams.sort', e.target.value); loadProjects(); });
+document.getElementById('density').addEventListener('input', e => { document.documentElement.style.setProperty('--cols', e.target.value); localStorage.setItem('abrams.density', e.target.value); });
+
 async function loadLeaderboard() {
   const r = await fetch('/api/gamify/leaderboard').then(x=>x.json()).catch(()=>({leaderboard:[]}));
   const board = r.leaderboard || [];

← 84cf3cdd snapshot — gitify backup 2026-05-19 · back to Abrams · persist ideas-page sort/filter/density + apply density on hy 7a3c2c97 →