wallco.ai · autocomplete dropdown now renders a 'Refine' motif chip row beneath results — pulls facets.motifs (top-6) from the same /api/designs/search response (no extra fetch), chips link to /designs?motif=X for one-click facet filter. Stays hidden if facets absent (graceful degradation). Reuses existing pill styling from the catalog filter chips.

340a3c95e69c04a5211b6535aa928b1d0839a6a7 · 2026-05-12 08:14:55 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 340a3c95e69c04a5211b6535aa928b1d0839a6a7
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 08:14:55 2026 -0700

    wallco.ai · autocomplete dropdown now renders a 'Refine' motif chip row beneath results — pulls facets.motifs (top-6) from the same /api/designs/search response (no extra fetch), chips link to /designs?motif=X for one-click facet filter. Stays hidden if facets absent (graceful degradation). Reuses existing pill styling from the catalog filter chips.
---
 server.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index d0a7486..898cc72 100644
--- a/server.js
+++ b/server.js
@@ -1462,7 +1462,15 @@ ${FOOTER}
       var more = results.length > 8
         ? '<a href="/designs?q='+encodeURIComponent(qStr)+'" style="display:block;padding:8px 12px;font:12px var(--sans,system-ui);color:var(--ink-soft,#555);text-align:center;background:var(--card-bg,#fafafa);text-decoration:none">See all '+results.length+' results →</a>'
         : '';
-      sBox.innerHTML = rows + more;
+      // Refine chips — top motifs from the matched designs (additive, harmless if absent)
+      var facetRow = '';
+      if (window._facets && window._facets.motifs && window._facets.motifs.length) {
+        var chips = window._facets.motifs.slice(0, 6).map(function(f){
+          return '<a href="/designs?motif='+encodeURIComponent(f.motif)+'" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font:11px var(--sans,system-ui);background:transparent;color:var(--ink-soft,#555);border:1px solid var(--line,#e6e2d8);border-radius:999px;text-decoration:none;white-space:nowrap">'+esc(f.motif)+' <span style="color:var(--ink-faint,#999);font-size:10px">·'+f.count+'</span></a>';
+        }).join('');
+        facetRow = '<div style="display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px;border-top:1px solid var(--line,#f0eee9);background:#fafaf7"><span style="font:10px var(--sans,system-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint,#999);align-self:center;margin-right:4px">Refine</span>'+chips+'</div>';
+      }
+      sBox.innerHTML = rows + facetRow + more;
       sBox.style.display='block'; sIn.setAttribute('aria-expanded','true');
       sItems = Array.prototype.slice.call(sBox.querySelectorAll('a[role=option]'));
       sIdx = -1;
@@ -1472,7 +1480,7 @@ ${FOOTER}
       sCtl = new AbortController();
       fetch('/api/designs/search?q='+encodeURIComponent(qStr)+'&limit=24', { signal: sCtl.signal })
         .then(function(r){ return r.json(); })
-        .then(function(j){ render(j.results||[], qStr); })
+        .then(function(j){ window._facets = j.facets || null; render(j.results||[], qStr); })
         .catch(function(){ /* aborted or network — ignore */ });
     };
     sIn.addEventListener('input', function(){

← d6bebc3 wallco.ai · professional/trade functions — 3 new designer-wo · back to Wallco Ai · wallco.ai · /api/designs/random?n=12&category=&seed= — rando 817e136 →