makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Merge branch 'worktree-agent-adbc35a5' into Develop

Browse Source 
# Conflicts:
#	.planning/STATE.md
#	drizzle-pg/meta/0002_snapshot.json
#	drizzle-pg/meta/_journal.json
#	src/db/schema.ts
This commit is contained in:
Jean-Luc Makiola
2026-04-06 08:00:04 +02:00
parent 9481391bc6 256d81e43d
commit 62249b5b48
18 changed files with 866 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
.superpowers/brainstorm/1268660-1775403447/content/catalog-search-v2.html Normal file
View File

@@ -0,0 +1,145 @@
<h2>Catalog Browse & Search Experience</h2>
<p class="subtitle">How should users find gear in the global catalog?</p>
<div class="options">
<div class="option" data-choice="a" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>Search-First</h3>
<p style="margin-bottom:12px;">Big search bar dominates. Tags below as quick filters. Type naturally: "waterproof handlebar bag under 200g". Results appear as you type.</p>
<div class="mockup">
<div class="mockup-header">Global Catalog — Search-First</div>
<div class="mockup-body" style="padding: 20px;">
<div style="display:flex; gap:8px; margin-bottom:16px;">
<input class="mock-input" placeholder="Search gear... e.g. 'waterproof handlebar bag under 200g'" style="flex:1; font-size:15px; padding:10px 14px;">
</div>
<div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;">
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bikepacking</span>
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bags</span>
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Waterproof</span>
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Ultralight</span>
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Shelter</span>
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Cooking</span>
</div>
<div style="color:#9ca3af; font-size:13px; margin-bottom:16px;">Type to search or click tags to filter</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
<div style="display:flex; justify-content:space-between; align-items:start;">
<div>
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
</div>
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.6</div>
</div>
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
<span>128g</span>
<span>$85</span>
<span>24 owners</span>
</div>
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">waterproof</span>
</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
<div style="display:flex; justify-content:space-between; align-items:start;">
<div>
<div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</div>
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
</div>
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.4</div>
</div>
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
<span>105g</span>
<span>$72</span>
<span>18 owners</span>
</div>
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">ultralight</span>
</div>
</div>
</div>
</div>
</div>
<div class="pros-cons" style="margin-top:12px;">
<div class="pros"><h4>Pros</h4><ul><li>Natural language friendly</li><li>Fast for users who know what they want</li><li>Tags as quick filters below search</li></ul></div>
<div class="cons"><h4>Cons</h4><ul><li>Empty state before typing</li><li>Browsing requires typing first</li></ul></div>
</div>
</div>
</div>
<div class="option" data-choice="b" onclick="toggleSelect(this)">
<div class="letter">B</div>
<div class="content">
<h3>Browse-First with Search</h3>
<p style="margin-bottom:12px;">Category tiles for discovery with trending items. Search bar prominent but browsing is the default. Great for "I don't know exactly what I need yet."</p>
<div class="mockup">
<div class="mockup-header">Global Catalog — Browse-First</div>
<div class="mockup-body" style="padding: 20px;">
<div style="display:flex; gap:8px; margin-bottom:16px;">
<input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
</div>
<div style="margin-bottom:20px;">
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Popular Categories</div>
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;">
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">🎒</div>
<div style="font-size:13px; font-weight:500;">Bags</div>
<div style="font-size:11px; color:#9ca3af;">342 items</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">🏕️</div>
<div style="font-size:13px; font-weight:500;">Shelter</div>
<div style="font-size:11px; color:#9ca3af;">128 items</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">🍳</div>
<div style="font-size:13px; font-weight:500;">Cooking</div>
<div style="font-size:11px; color:#9ca3af;">94 items</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">🚲</div>
<div style="font-size:13px; font-weight:500;">Bike Parts</div>
<div style="font-size:11px; color:#9ca3af;">215 items</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">💡</div>
<div style="font-size:13px; font-weight:500;">Lights</div>
<div style="font-size:11px; color:#9ca3af;">67 items</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
<div style="font-size:20px; margin-bottom:4px;">🧭</div>
<div style="font-size:13px; font-weight:500;">Navigation</div>
<div style="font-size:11px; color:#9ca3af;">43 items</div>
</div>
</div>
</div>
<div>
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Trending</div>
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
<div>
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
<div style="font-size:12px; color:#6b7280;">128g · $85 · ★ 4.6</div>
</div>
<div style="font-size:12px; color:#6b7280;">24 owners</div>
</div>
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
<div>
<div style="font-weight:600; font-size:14px;">Ortlieb Fork-Pack</div>
<div style="font-size:12px; color:#6b7280;">310g · $55 · ★ 4.3</div>
</div>
<div style="font-size:12px; color:#6b7280;">19 owners</div>
</div>
</div>
</div>
</div>
<div class="pros-cons" style="margin-top:12px;">
<div class="pros"><h4>Pros</h4><ul><li>Great for discovery and browsing</li><li>Never an empty state</li><li>Shows what's popular in the community</li></ul></div>
<div class="cons"><h4>Cons</h4><ul><li>Categories need curation</li><li>Slower for targeted searches</li></ul></div>
</div>
</div>
</div>
</div>