/connectors: client-side search filter — single input filters tiles by name/category/meta on every keystroke; live count ('N / 67 match'); category sections hide when fully filtered

334b6e17e26a1f539f04ce2a1ba07c0882f792d3 · 2026-05-07 11:22:15 -0700 · Steve

Files touched

M server/server.js

Diff

commit 334b6e17e26a1f539f04ce2a1ba07c0882f792d3
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu May 7 11:22:15 2026 -0700

    /connectors: client-side search filter — single input filters tiles by name/category/meta on every keystroke; live count ('N / 67 match'); category sections hide when fully filtered
---
 server/server.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/server/server.js b/server/server.js
index fd4a31c..06248c0 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1066,8 +1066,35 @@ function _renderConnectorIndex() {
         <div class="eyebrow">All connectors · pre-wired</div>
         <h1>Every <em>tool</em>, ready to route.</h1>
         <p class="lede">VenturaClaw ships with ${CONNECTORS.length} SaaS connectors out of the box. Browse by category below, or just type what you want on the <a href="/" style="color:var(--gold)">homepage demo</a> and let the AI pick. Looking for a curated bundle? See the <a href="/services" style="color:var(--gold)">small-business services hub</a> — 18 ready-to-run orchestrations on top of these connectors.</p>
+        <div style="margin:0 0 36px;display:flex;align-items:center;gap:12px;flex-wrap:wrap">
+          <input type="search" id="connFilter" placeholder="Filter by name or category — try &quot;stripe&quot; or &quot;chat&quot;…"
+                 style="flex:1;min-width:240px;background:var(--bg-elevated);color:var(--ink);border:1px solid var(--rule);padding:11px 14px;font-family:var(--mono);font-size:13px;outline:none;border-radius:3px"
+                 oninput="filterConn(this.value)" />
+          <span id="connCount" style="font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-mute)">${CONNECTORS.length} connectors</span>
+        </div>
         ${sections}
-      </main>`
+      </main>
+      <script>
+        function filterConn(q) {
+          q = (q || '').trim().toLowerCase();
+          let shown = 0, total = 0;
+          document.querySelectorAll('.cat-section').forEach(sec => {
+            let any = false;
+            sec.querySelectorAll('.c-card').forEach(card => {
+              total++;
+              const name = (card.querySelector('.c-name')?.textContent || '').toLowerCase();
+              const meta = (card.querySelector('.c-meta')?.textContent || '').toLowerCase();
+              const cat  = (sec.querySelector('h2')?.textContent || '').toLowerCase();
+              const hit = !q || name.includes(q) || meta.includes(q) || cat.includes(q);
+              card.style.display = hit ? '' : 'none';
+              if (hit) { shown++; any = true; }
+            });
+            sec.style.display = any ? '' : 'none';
+          });
+          const c = document.getElementById('connCount');
+          if (c) c.textContent = q ? (shown + ' / ' + total + ' match') : (total + ' connectors');
+        }
+      </script>`
   });
 }
 function _renderConnectorPage(c) {

← 734a275 /services + /legal-notice + /how-it-works: <link rel='altern · back to Ventura Claw · BreadcrumbList JSON-LD ('Home › X') on /services + /legal-no a506956 →