← back to Wallco Ai
ui: strip faded ·N count suffix from category/motif/room/favorites chips — opacity:.55 ghost text was visually noisy
2fed040e57c95a47f36e043aa675f3a9dbaa4724 · 2026-05-20 10:20:33 -0700 · Steve Abrams
Files touched
Diff
commit 2fed040e57c95a47f36e043aa675f3a9dbaa4724
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 20 10:20:33 2026 -0700
ui: strip faded ·N count suffix from category/motif/room/favorites chips — opacity:.55 ghost text was visually noisy
---
server.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/server.js b/server.js
index d40fe66..0b3b54b 100644
--- a/server.js
+++ b/server.js
@@ -3017,7 +3017,7 @@ ${butterflySection}
</div>
<div id="home-rail-cats" role="tablist" aria-label="Random rail category" style="display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;align-items:center">
<button type="button" role="tab" data-cat="" class="home-cat-chip is-on" style="font:11px var(--sans,system-ui);padding:5px 12px;border-radius:999px;border:1px solid var(--accent,#0d0d0d);background:var(--accent,#0d0d0d);color:var(--bg,#fff);cursor:pointer">All</button>
- ${homeCats.map(c => `<button type="button" role="tab" data-cat="${c.key}" class="home-cat-chip" style="font:11px var(--sans,system-ui);padding:5px 12px;border-radius:999px;border:1px solid var(--line,#ddd);background:transparent;color:var(--ink-soft,#555);cursor:pointer">${c.key.charAt(0).toUpperCase()+c.key.slice(1)} <span style="opacity:.55">·${c.count}</span></button>`).join('')}
+ ${homeCats.map(c => `<button type="button" role="tab" data-cat="${c.key}" class="home-cat-chip" style="font:11px var(--sans,system-ui);padding:5px 12px;border-radius:999px;border:1px solid var(--line,#ddd);background:transparent;color:var(--ink-soft,#555);cursor:pointer">${c.key.charAt(0).toUpperCase()+c.key.slice(1)}</button>`).join('')}
</div>
<div id="home-random-rail" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;min-height:240px"></div>
</section>
@@ -4014,7 +4014,7 @@ ${(req.query.source === 'all') ? `
const href = '/designs?' + qs.join('&');
return `<a href="${href}" class="hue-chip${on?' is-on':''}" title="Filter by ${k} (${hex.toUpperCase()})" style="display:inline-flex;align-items:center;gap:7px;font:11px var(--sans);padding:4px 12px 4px 5px;border:1px solid ${on?'var(--accent)':'var(--line)'};background:${on?'var(--accent)':'transparent'};color:${on?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none;min-height:32px">
<span aria-hidden="true" style="display:inline-block;width:20px;height:20px;border-radius:50%;background:${hex};border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.08)"></span>
- ${k} <span style="opacity:.55">·${hueCounts[k]||0}</span>
+ ${k}
</a>`;
}).join('')}
</div>
@@ -4023,7 +4023,7 @@ ${(req.query.source === 'all') ? `
<div class="motif-chips" style="display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px;align-items:center">
<span style="font:11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-right:6px">Motif</span>
<a href="/designs${cat ? '?cat='+encodeURIComponent(cat) : ''}" class="motif-chip${!motifQ?' is-on':''}" style="font:11px var(--sans);padding:5px 12px;border:1px solid ${!motifQ?'var(--accent)':'var(--line)'};background:${!motifQ?'var(--accent)':'transparent'};color:${!motifQ?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none">All</a>
- ${topMotifs.map(([m,n]) => `<a href="/designs?${cat?'cat='+encodeURIComponent(cat)+'&':''}motif=${encodeURIComponent(m)}" class="motif-chip${motifQ===m?' is-on':''}" style="font:11px var(--sans);padding:5px 12px;border:1px solid ${motifQ===m?'var(--accent)':'var(--line)'};background:${motifQ===m?'var(--accent)':'transparent'};color:${motifQ===m?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none">${m} <span style="opacity:.55">·${n}</span></a>`).join('')}
+ ${topMotifs.map(([m,n]) => `<a href="/designs?${cat?'cat='+encodeURIComponent(cat)+'&':''}motif=${encodeURIComponent(m)}" class="motif-chip${motifQ===m?' is-on':''}" style="font:11px var(--sans);padding:5px 12px;border:1px solid ${motifQ===m?'var(--accent)':'var(--line)'};background:${motifQ===m?'var(--accent)':'transparent'};color:${motifQ===m?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none">${m}</a>`).join('')}
</div>
<!-- Room-preview filter chip (toggles ?room=1 — shows only designs that have a residential mockup) -->
@@ -4040,11 +4040,11 @@ ${(req.query.source === 'all') ? `
<span style="font:11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-right:6px">Preview</span>
<a href="${href}" class="motif-chip${on?' is-on':''}" title="Show only designs with a room mockup preview"
style="font:11px var(--sans);padding:5px 12px;border:1px solid ${on?'var(--accent)':'var(--line)'};background:${on?'var(--accent)':'transparent'};color:${on?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none">
- In a room <span style="opacity:.55">·${roomCnt}</span>
+ In a room
</a>
<button type="button" id="fav-only-toggle" class="motif-chip" aria-pressed="false"
style="font:11px var(--sans);padding:5px 12px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px;cursor:pointer">
- ♡ Favorites <span id="fav-only-count" style="opacity:.55">·0</span>
+ ♡ Favorites
</button>
${(cat || motifQ || hueQ || roomQ || q) ? `<a href="/designs" class="motif-chip clear-all-chip" title="Clear every active filter"
style="font:11px var(--sans);padding:5px 12px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-left:6px">
← 826619a rename: replace every customer-facing 'AI' with 'Magic' acro
·
back to Wallco Ai
·
rename: Magic → Curated across all customer-facing copy on w b4ba6e1 →