Where should autocomplete suggestions appear?

As you type in the GIF search box, where do completion suggestions show up?

A

Inline list below the search input

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.

GIF Dialog — Inline Suggestions
🔍 hap|
🔍 happy birthday
🔍 happy
🔍 happy easter
🔍 happy dance
B

Horizontal chips below the search input

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).

GIF Dialog — Chip Suggestions
🔍 hap|
happy birthday
happy
happy easter
happy dance
C

Sift popover dropdown (like Composer autocomplete)

Uses the @bsky.app/sift 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.

GIF Dialog — Sift Popover
🔍 hap|
🔍 happy birthday
🔍 happy
🔍 happy easter
🔍 happy dance

My recommendation: Option A (inline list)

Why A

  • No Portal/z-index issues inside the bottom sheet (native) or modal (web)
  • Naturally fits the reserved slot in GifPickerHeader ("future: tabs render here")
  • Clear visual hierarchy — suggestions push the grid down, making them prominent
  • Simple to implement — just a conditional list render

Tradeoffs

  • Takes more vertical space than chips (B) when visible
  • Doesn't reuse Sift (C), but that's OK — Sift solves cursor-anchored popovers which we don't need here