bsky-social-app/.superpowers/brainstorm/86663-1776187526/content/suggestion-placement.html

<h2>Where should autocomplete suggestions appear?</h2>
<p class="subtitle">As you type in the GIF search box, where do completion suggestions show up?</p>

<div class="options">
  <div class="option" data-choice="a" onclick="toggleSelect(this)">
    <div class="letter">A</div>
    <div class="content">
      <h3>Inline list below the search input</h3>
      <p>Suggestions render as a vertical list between the search bar and the GIF grid. Tapping a suggestion fills the search field and triggers a GIF search. Simple, no z-index or portal concerns inside the dialog.</p>
      <div class="mockup" style="margin-top:12px">
        <div class="mockup-header">GIF Dialog — Inline Suggestions</div>
        <div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
            <div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
              <span style="opacity:0.5">&#128269;</span>
              <span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
            </div>
          </div>
          <div style="background:#22223a;border-radius:8px;margin-bottom:12px;overflow:hidden">
            <div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
              <span style="opacity:0.4">&#128269;</span> <span>happy birthday</span>
            </div>
            <div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
              <span style="opacity:0.4">&#128269;</span> <span>happy</span>
            </div>
            <div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
              <span style="opacity:0.4">&#128269;</span> <span>happy easter</span>
            </div>
            <div style="padding:10px 14px;display:flex;align-items:center;gap:8px;cursor:pointer">
              <span style="opacity:0.4">&#128269;</span> <span>happy dance</span>
            </div>
          </div>
          <div style="display:flex;gap:8px">
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:80px;opacity:0.3"></div>
              <div style="background:#333;border-radius:8px;height:60px;opacity:0.3"></div>
            </div>
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:60px;opacity:0.3"></div>
              <div style="background:#333;border-radius:8px;height:80px;opacity:0.3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="option" data-choice="b" onclick="toggleSelect(this)">
    <div class="letter">B</div>
    <div class="content">
      <h3>Horizontal chips below the search input</h3>
      <p>Suggestions render as a scrollable row of pill/chip buttons. Compact, leaves more vertical space for the GIF grid. Common in mobile search UIs (YouTube, Google Images).</p>
      <div class="mockup" style="margin-top:12px">
        <div class="mockup-header">GIF Dialog — Chip Suggestions</div>
        <div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
            <div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
              <span style="opacity:0.5">&#128269;</span>
              <span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
            </div>
          </div>
          <div style="display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px">
            <div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy birthday</div>
            <div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy</div>
            <div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy easter</div>
            <div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy dance</div>
          </div>
          <div style="display:flex;gap:8px">
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:90px;opacity:0.3"></div>
              <div style="background:#333;border-radius:8px;height:70px;opacity:0.3"></div>
            </div>
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:70px;opacity:0.3"></div>
              <div style="background:#333;border-radius:8px;height:90px;opacity:0.3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="option" data-choice="c" onclick="toggleSelect(this)">
    <div class="letter">C</div>
    <div class="content">
      <h3>Sift popover dropdown (like Composer autocomplete)</h3>
      <p>Uses the <code>@bsky.app/sift</code> library to show a positioned popover below the input, matching how @mentions work in the Composer. Keyboard navigable on web. Needs Portal/z-index verification inside the dialog.</p>
      <div class="mockup" style="margin-top:12px">
        <div class="mockup-header">GIF Dialog — Sift Popover</div>
        <div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
          <div style="position:relative">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
              <div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
                <span style="opacity:0.5">&#128269;</span>
                <span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
              </div>
            </div>
            <div style="position:absolute;top:40px;left:0;right:0;background:#22223a;border:1px solid #444;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:10;overflow:hidden">
              <div style="padding:8px 12px;background:#3a3a5a;display:flex;align-items:center;gap:8px">
                <span style="opacity:0.4">&#128269;</span> <span>happy birthday</span>
              </div>
              <div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
                <span style="opacity:0.4">&#128269;</span> <span>happy</span>
              </div>
              <div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
                <span style="opacity:0.4">&#128269;</span> <span>happy easter</span>
              </div>
              <div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
                <span style="opacity:0.4">&#128269;</span> <span>happy dance</span>
              </div>
            </div>
          </div>
          <div style="display:flex;gap:8px;margin-top:12px;filter:blur(1px);opacity:0.5">
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:90px"></div>
              <div style="background:#333;border-radius:8px;height:70px"></div>
            </div>
            <div style="flex:1;display:flex;flex-direction:column;gap:8px">
              <div style="background:#333;border-radius:8px;height:70px"></div>
              <div style="background:#333;border-radius:8px;height:90px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top:24px">
  <h3>My recommendation: Option A (inline list)</h3>
  <div class="pros-cons">
    <div class="pros">
      <h4>Why A</h4>
      <ul>
        <li>No Portal/z-index issues inside the bottom sheet (native) or modal (web)</li>
        <li>Naturally fits the reserved slot in GifPickerHeader ("future: tabs render here")</li>
        <li>Clear visual hierarchy — suggestions push the grid down, making them prominent</li>
        <li>Simple to implement — just a conditional list render</li>
      </ul>
    </div>
    <div class="cons">
      <h4>Tradeoffs</h4>
      <ul>
        <li>Takes more vertical space than chips (B) when visible</li>
        <li>Doesn't reuse Sift (C), but that's OK — Sift solves cursor-anchored popovers which we don't need here</li>
      </ul>
    </div>
  </div>
</div>