wallco.ai · empty /compare now renders a 'More designs to explore' rail (12 random designs via /api/designs/random) with a ↻ Shuffle button — turns the empty-state from instructions-only into a real discovery surface · auto-redirect to /compare?ids= still fires first if localStorage has prior selections (so returning users skip the rail) · graceful 'Loading…' / 'Couldn't load' states · cards link to PDP where '+ Compare' button lives · empty page +3KB, /compare?ids= unchanged

fe60c05c3d85adb1f96af6145e9126e1b77504dd · 2026-05-12 08:25:25 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit fe60c05c3d85adb1f96af6145e9126e1b77504dd
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 08:25:25 2026 -0700

    wallco.ai · empty /compare now renders a 'More designs to explore' rail (12 random designs via /api/designs/random) with a ↻ Shuffle button — turns the empty-state from instructions-only into a real discovery surface · auto-redirect to /compare?ids= still fires first if localStorage has prior selections (so returning users skip the rail) · graceful 'Loading…' / 'Couldn't load' states · cards link to PDP where '+ Compare' button lives · empty page +3KB, /compare?ids= unchanged
---
 server.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/server.js b/server.js
index 36dd5dc..16220cc 100644
--- a/server.js
+++ b/server.js
@@ -4386,6 +4386,16 @@ ${htmlHeader('/compare')}
       <p>Visit <a href="/designs" style="color:var(--ink,#111)">/designs</a>, click <strong>+ Compare</strong> on the designs you want to evaluate side-by-side, then return here.</p>
       <p style="font:12px var(--sans,system-ui);margin-top:14px">Or share a link directly: <code>/compare?ids=72,161</code></p>
     </div>
+
+    <!-- Discovery rail: random designs to start a compare -->
+    <div style="margin-top:32px">
+      <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px">
+        <h2 style="font:300 22px/1.2 var(--serif,Georgia,serif);margin:0">More designs to explore</h2>
+        <button type="button" id="rail-refresh" style="font:11px var(--sans,system-ui);background:transparent;border:1px solid var(--line,#ddd);color:var(--ink-soft,#555);padding:5px 12px;border-radius:999px;cursor:pointer">↻ Shuffle</button>
+      </div>
+      <div id="compare-rail" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px"></div>
+      <p style="font:12px var(--sans,system-ui);color:var(--ink-faint,#999);margin-top:12px;text-align:center">Click any design to open it, then hit <strong>+ Compare</strong> on the PDP.</p>
+    </div>
     <script>
       // If localStorage has stored ids, auto-redirect to the URL form so the share-link works.
       try {
@@ -4394,6 +4404,24 @@ ${htmlHeader('/compare')}
           window.location.href = '/compare?ids=' + stored.slice(0,4).join(',');
         }
       } catch(e) {}
+      (function(){
+        var rail = document.getElementById('compare-rail');
+        var btn = document.getElementById('rail-refresh');
+        if (!rail) return;
+        var esc = function(s){ return String(s||'').replace(/[<>&"]/g, function(c){ return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c]; }); };
+        function load(){
+          rail.innerHTML = '<div style="grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">Loading…</div>';
+          fetch('/api/designs/random?n=12').then(function(r){ return r.json(); }).then(function(j){
+            if (!j.results || !j.results.length) { rail.innerHTML = '<div style="grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">No designs available yet.</div>'; return; }
+            rail.innerHTML = j.results.map(function(r){
+              var dot = r.dominant_hex ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:'+esc(r.dominant_hex)+';border:1px solid rgba(0,0,0,.12);vertical-align:middle;margin-right:4px"></span>' : '';
+              return '<a href="'+esc(r.url)+'" style="display:block;text-decoration:none;color:inherit"><div style="aspect-ratio:1/1.15;background:#f4f1ea url('+JSON.stringify(r.image_url).slice(1,-1)+') center/cover;border-radius:6px;border:1px solid var(--line,#e6e2d8);margin-bottom:6px"></div><div style="font:13px var(--sans,system-ui);color:var(--ink,#111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'+esc(r.title || ('Design #'+r.id))+'</div><div style="font:11px var(--sans,system-ui);color:var(--ink-faint,#999);margin-top:2px">'+dot+esc(r.category||'mixed')+'</div></a>';
+            }).join('');
+          }).catch(function(){ rail.innerHTML = '<div style="grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">Couldn\\'t load — try again.</div>'; });
+        }
+        load();
+        if (btn) btn.addEventListener('click', load);
+      })();
     </script>
   ` : `
     <table style="width:100%;border-collapse:collapse;table-layout:fixed">

← 817e136 wallco.ai · /api/designs/random?n=12&category=&seed= — rando · back to Wallco Ai · studio: show rendered image + 3 room settings (bedroom/livin 0b4eba7 →