GearBox/.superpowers/brainstorm/1268660-1775403447/content/fab-flow.html

<h2>Add Item Flow — From FAB to Search to Results</h2>
<p class="subtitle">The journey from clicking + to finding gear</p>

<div class="section">
  <h3>Step 1: FAB Menu</h3>
  <p class="subtitle">Click + → two options appear above the button</p>
  <div class="mockup">
    <div class="mockup-header">Collection View</div>
    <div class="mockup-body" style="padding:20px; min-height:280px; position:relative; background:#f9fafb;">
      <!-- Fake collection content -->
      <div style="opacity:0.4;">
        <div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:8px; background:white;">
          <div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
          <div style="font-size:12px; color:#6b7280;">128g · Bags</div>
        </div>
        <div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:8px; background:white;">
          <div style="font-weight:600; font-size:14px;">MSR Hubba NX</div>
          <div style="font-size:12px; color:#6b7280;">1,540g · Shelter</div>
        </div>
      </div>

      <!-- FAB with popup menu -->
      <div style="position:absolute; bottom:20px; right:20px; text-align:right;">
        <div style="background:white; border:1px solid #e5e7eb; border-radius:12px; padding:6px; margin-bottom:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:inline-block;">
          <div style="padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; color:#374151;">
            <span style="font-size:16px;">📦</span> Add to Collection
          </div>
          <div style="height:1px; background:#e5e7eb; margin:2px 0;"></div>
          <div style="padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; color:#374151;">
            <span style="font-size:16px;">🔍</span> Start New Thread
          </div>
        </div>
        <div style="width:56px; height:56px; background:#374151; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; box-shadow:0 2px 8px rgba(0,0,0,0.2); margin-left:auto;">+</div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Step 2: Search Overlay</h3>
  <p class="subtitle">After choosing an action, a search overlay appears</p>
  <div class="options">
    <div class="option" data-choice="a" onclick="toggleSelect(this)">
      <div class="letter">A</div>
      <div class="content">
        <h3>Floating Search Bar</h3>
        <p style="margin-bottom:12px;">Compact overlay centered on screen. Feels quick and light.</p>
        <div class="mockup">
          <div class="mockup-header">Search Overlay — Floating</div>
          <div class="mockup-body" style="padding:20px; min-height:220px; position:relative; background:#f9fafb;">
            <!-- Dimmed background -->
            <div style="position:absolute; inset:0; background:rgba(0,0,0,0.3); border-radius:0 0 8px 8px;"></div>
            <!-- Floating search -->
            <div style="position:relative; max-width:480px; margin:40px auto 0; background:white; border-radius:16px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,0.15);">
              <div style="font-size:13px; font-weight:600; color:#6b7280; margin-bottom:10px;">Adding to Collection</div>
              <div style="display:flex; gap:8px;">
                <input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
                <button class="mock-button" style="padding:10px 20px;">Search</button>
              </div>
              <div style="margin-top:12px; font-size:12px; color:#9ca3af;">Search the catalog or press Enter to see results</div>
              <div style="margin-top:10px; display:flex; gap:6px; flex-wrap:wrap;">
                <span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Bags</span>
                <span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Shelter</span>
                <span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Lights</span>
                <span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Cooking</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="option" data-choice="b" onclick="toggleSelect(this)">
      <div class="letter">B</div>
      <div class="content">
        <h3>Full-Screen Search</h3>
        <p style="margin-bottom:12px;">Takes over the screen. More room for instant suggestions and recent searches.</p>
        <div class="mockup">
          <div class="mockup-header">Search Overlay — Full Screen</div>
          <div class="mockup-body" style="padding:0; min-height:280px; background:white;">
            <div style="padding:16px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:12px;">
              <span style="color:#9ca3af; cursor:pointer; font-size:18px;">←</span>
              <input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:16px; padding:10px 14px; border:none; background:#f9fafb;">
            </div>
            <div style="padding:16px 20px;">
              <div style="font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;">Quick Tags</div>
              <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;">
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bags</span>
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Shelter</span>
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Lights</span>
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Cooking</span>
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bike Parts</span>
                <span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Waterproof</span>
              </div>
              <div style="font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;">Adding to Collection</div>
              <div style="font-size:13px; color:#6b7280;">Type to search the gear catalog, or <span style="color:#3b82f6; cursor:pointer;">add manually</span> if your item isn't listed.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Step 3: Results (always full screen)</h3>
  <p class="subtitle">After hitting Enter/Search, full results page with actions</p>
  <div class="mockup">
    <div class="mockup-header">Search Results — "handlebar bag"</div>
    <div class="mockup-body" style="padding:0; background:white;">
      <div style="padding:12px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:12px;">
        <span style="color:#9ca3af; cursor:pointer; font-size:18px;">←</span>
        <div style="flex:1; background:#f3f4f6; border-radius:8px; padding:8px 14px; font-size:14px; color:#374151;">handlebar bag</div>
      </div>
      <div style="padding:12px 20px;">
        <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;">
          <span style="padding:4px 12px; border-radius:99px; background:#dbeafe; font-size:12px; color:#2563eb;">handlebar</span>
          <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">+ waterproof</span>
          <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">+ ultralight</span>
        </div>
        <div style="font-size:12px; color:#9ca3af; margin-bottom:12px;">12 results</div>

        <!-- Result cards -->
        <div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
          <div style="flex:1;">
            <div style="display:flex; align-items:center; gap:8px;">
              <div style="font-weight:600; font-size:14px;">Revelate Designs Pika</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:4px; font-size:12px; color:#6b7280;">
              <span>128g</span><span>$85</span><span>24 owners</span>
            </div>
          </div>
          <button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
        </div>

        <div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
          <div style="flex:1;">
            <div style="display:flex; align-items:center; gap:8px;">
              <div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</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:4px; font-size:12px; color:#6b7280;">
              <span>105g</span><span>$72</span><span>18 owners</span>
            </div>
          </div>
          <button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
        </div>

        <div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
          <div style="flex:1;">
            <div style="display:flex; align-items:center; gap:8px;">
              <div style="font-weight:600; font-size:14px;">Ortlieb Handlebar-Pack QR</div>
              <div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.2</div>
            </div>
            <div style="display:flex; gap:16px; margin-top:4px; font-size:12px; color:#6b7280;">
              <span>340g</span><span>$95</span><span>31 owners</span>
            </div>
          </div>
          <button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
        </div>

        <!-- Not found option -->
        <div style="border:2px dashed #d1d5db; border-radius:12px; padding:16px; margin-top:16px; text-align:center;">
          <div style="font-size:14px; font-weight:500; color:#6b7280;">Can't find what you're looking for?</div>
          <div style="font-size:13px; color:#9ca3af; margin-top:4px;">Add it manually and submit it to the catalog for review</div>
          <button class="mock-button" style="margin-top:10px; padding:8px 20px; font-size:13px;">Add Manually</button>
        </div>
      </div>
    </div>
  </div>
</div>