feat(/designs): proper empty-state when filter combo returns 0 — magnifier glyph + 'No designs match' + Clear-filters + Surprise-me CTAs; was a bare 'No designs found.' <p>

508fcbe74c20132c0b2c5e40c270a36aae72177c · 2026-05-14 11:34:54 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 508fcbe74c20132c0b2c5e40c270a36aae72177c
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 11:34:54 2026 -0700

    feat(/designs): proper empty-state when filter combo returns 0 — magnifier glyph + 'No designs match' + Clear-filters + Surprise-me CTAs; was a bare 'No designs found.' <p>
---
 server.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 7b1fd81..5d204f4 100644
--- a/server.js
+++ b/server.js
@@ -3868,7 +3868,15 @@ ${cat === 'mural-scenic' ? `
   </div>
 
   <div class="design-grid catalog-grid" id="catalog-grid" data-current-page="${page}" data-total-pages="${pages}" data-total="${total}">
-    ${cards || '<p class="empty-state">No designs found.</p>'}
+    ${cards || `<div class="empty-state" style="grid-column:1/-1;padding:80px 24px;text-align:center;color:var(--ink-soft,#555);font:14px/1.6 var(--sans,system-ui)">
+      <div style="font-size:42px;line-height:1;margin-bottom:14px;opacity:.55" aria-hidden="true">⌕</div>
+      <p style="margin:0 0 6px;font:300 22px/1.3 var(--serif,'Cormorant Garamond',serif);color:var(--ink,#111)">No designs match these filters</p>
+      <p style="margin:0 0 22px;color:var(--ink-faint,#999);max-width:380px;margin-left:auto;margin-right:auto">Try removing one filter, or browse the full catalog of ${DESIGNS.length.toLocaleString()} designs.</p>
+      <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap">
+        <a href="/designs" style="padding:9px 18px;font:13px var(--sans);background:var(--ink,#111);color:var(--bg,#fff);text-decoration:none;border-radius:6px">Clear filters</a>
+        <a href="/designs?sort=random" style="padding:9px 18px;font:13px var(--sans);background:transparent;color:var(--ink,#111);text-decoration:none;border:1px solid var(--line,#d8d0c0);border-radius:6px">✦ Surprise me</a>
+      </div>
+    </div>`}
   </div>
 
   ${pages > 1 ? `

← 9a35a77 feat(/design/:id): breadcrumb back-link inherits the filtere · back to Wallco Ai · feat(/designs): prefetch /design/:id on card hover with 80ms 6601949 →