GIF Category Pills — Full Design

Horizontal scrollable pill row on the idle GIF picker screen

Interaction Flow

1. Idle — "Trending" active
🔍 Search GIFs
🔥 Trending
❤️ Love
😄 Happy
...
Featured GIFs
2. "Happy" tapped
🔍 Search GIFs
🔥 Trending
❤️ Love
😄 Happy
...
Search results for "happy"
3. Typing — pills hidden
🔍 sponge|
Search results

Architecture

Component & Data Flow
Component Tree
GifPickerBody
├─ GifPickerHeader
│ └─ TextField.Input
├─ GifCategoryPills ← NEW
│ (hidden when typing)
├─ GifPickerPlaceholder
└─ GifPickerGrid
Data Flow
1. Idle → "Trending" active → featured endpoint
2. Tap pill → set search to pill's searchterm
3. useGifPickerData sees search → fires GIF search
4. User types → pills hide, search takes over
5. User clears input → pills reappear, "Trending" resets

File Changes

+ src/features/gifPicker/components/GifCategoryPills.tsx — pill row component
~ src/features/gifPicker/GifPickerDialog.tsx — add category state, render pills in header, connect to search

Curated Categories

🔥 Trending
❤️ Love
😄 Happy
😢 Sad
🎉 Party
👍 Yes
😂 LOL
🤩 Excited

Key Design Decisions

No new API endpoint needed — tapping a category pill just sets the search query to the category's searchterm and uses the existing search flow
"Trending" = featured endpoint — the default active pill uses the existing featured GIFs, no search query
Pills hide while typing — simple visibility toggle based on whether rawSearch has content
Clearing input resets to Trending — pills reappear with "Trending" active again
Hardcoded category list — curated for quality, no extra API call needed

Scope

In Scope

  • GifCategoryPills component (horizontal scroll, active state)
  • 8 curated category pills with emoji + label
  • Tap pill → search GIFs for that category
  • Pills hide when typing, reappear when cleared
  • Active pill highlight styling

Out of Scope

  • Recent / Favorited (needs client-side persistence)
  • Dynamic categories from API
  • Category GIF thumbnails on the pills