feat(/designs): kbd '/' hint inside search input — discoverability for the shortcut shipped in 7bbdf26; hidden on touch (hover:none); fades out on focus

53149e4dc9568251ae87d1cbf9cc144b04f392cc · 2026-05-14 10:08:52 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 53149e4dc9568251ae87d1cbf9cc144b04f392cc
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 10:08:52 2026 -0700

    feat(/designs): kbd '/' hint inside search input — discoverability for the shortcut shipped in 7bbdf26; hidden on touch (hover:none); fades out on focus
---
 server.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 67c1246..07b787a 100644
--- a/server.js
+++ b/server.js
@@ -3453,9 +3453,14 @@ ${cat === 'mural-scenic' ? `
       <input type="hidden" name="sort" id="sort-hidden" value="${sort}">
       <div class="toolbar-row">
         <div class="search-wrap" style="position:relative;flex:1;min-width:200px">
-          <input type="search" name="q" value="${q}" placeholder="Search designs…" class="search-input" id="catalog-search-input" autocomplete="off" aria-autocomplete="list" aria-controls="catalog-search-suggest" aria-expanded="false" role="combobox" style="width:100%">
+          <input type="search" name="q" value="${q}" placeholder="Search designs…" class="search-input" id="catalog-search-input" autocomplete="off" aria-autocomplete="list" aria-controls="catalog-search-suggest" aria-expanded="false" role="combobox" style="width:100%;padding-right:36px">
+          <kbd id="catalog-search-kbd" aria-hidden="true" title="Press / to focus search" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:2px 7px;font:600 11px/1 ui-monospace,Menlo,monospace;color:var(--ink-faint,#999);background:var(--card-bg,#faf8f3);border:1px solid var(--line,#e0d9cd);border-radius:4px;pointer-events:none;transition:opacity .12s ease">/</kbd>
           <div id="catalog-search-suggest" role="listbox" aria-label="Search suggestions" style="display:none;position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--bg,#fff);border:1px solid var(--line,#ddd);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50;max-height:60vh;overflow-y:auto"></div>
         </div>
+        <style>
+          @media (hover: none) { #catalog-search-kbd { display:none } }
+          .search-input:focus ~ #catalog-search-kbd { opacity:0 }
+        </style>
         <select name="cat" class="filter-select" onchange="this.form.submit()">
           <option value="">All Categories</option>
           ${cats.map(c => `<option value="${c}" ${c===cat?'selected':''}>${c.charAt(0).toUpperCase()+c.slice(1)}</option>`).join('')}

← 628c81f db: add 003_schema_parity migration to bring prod in line wi · back to Wallco Ai · feat(/designs): browser tab title reflects active filter — ' eee4f56 →