Vibe Filter — UI Options

Option A — Current (Inline Pills)

9:41 ●●●

🔍 Search listings… 📍 Williamsburg

🔇 Quiet ☕ Coffee 👣 Walkable 🍷 Nightlife 🐕 Dog-friendly 👶 Family 🌳 Green 🍴 Foodie 🌊 Water 🏃 Runner-friendly 🎨 Artsy 💪 Fitness 🚆 Transit-rich ⚡ Buzzing

⚠ Vibe pills push listings way down

Photo

87% vibe match

$3,200/mo

245 Bedford Ave, #3B

2 bd · 1 ba · 820 sqft

↑ scroll up to see pills
↓ listings cut off

Option A — Current

Pros

All vibes visible at once

No extra tap to open

Cons

14 pills = ~110px tall

Listings almost invisible

Banner + pills + search = too much chrome

Feels like a settings screen, not a search screen

Option B — Summary Bar + Drawer

Collapsed (listings visible)

9:41 ●●●

🔍 Search listings… 📍 Williamsburg

3 vibes selected: Quiet, Coffee, Walkable

📷 Photo

91% vibe match

$3,200/mo

245 Bedford Ave, #3B

2 bd · 1 ba · 820 sqft

📷 Photo

84% vibe match

$2,850/mo

112 N 7th St, #2F

1 bd · 1 ba · 650 sqft

Drawer open

9:41 ●●●

🔍 Search listings… 📍 Williamsburg

📷 Photo

$3,200/mo

245 Bedford Ave, #3B

2 bd · 1 ba · 820 sqft

🔇 Quiet ☕ Coffee 👣 Walkable 🍷 Nightlife 🐕 Dog-friendly 👶 Family 🌳 Green 🍴 Foodie 🌊 Water 🏃 Runner-friendly 🎨 Artsy 💪 Fitness 🚆 Transit-rich ⚡ Buzzing

Option B — Summary Bar + Drawer

Pros

Listings are the hero — always visible

Matches FilterSheet pattern already in use

Summary bar shows active state at a glance

Drawer gives pills more breathing room

CTA with result count = satisfying UX

Cons

Requires one extra tap to edit vibes

More implementation work

Option C — Compact Selected + Add Drawer

No vibes selected yet

9:41 ●●●

🔍 Search listings… 📍 Williamsburg

＋ Add vibes

📷 Photo

$3,200/mo

245 Bedford Ave, #3B

2 bd · 1 ba · 820 sqft

📷 Photo

$2,850/mo

112 N 7th St, #2F

1 bd · 1 ba · 650 sqft

3 vibes selected (compact row)

9:41 ●●●

🔍 Search listings… 📍 Williamsburg

🔇 Quiet ☕ Coffee 👣 Walkable ＋ Add

📷 Photo

91% vibe match

$3,200/mo

245 Bedford Ave, #3B

2 bd · 1 ba · 820 sqft

📷 Photo

84% vibe match

$2,850/mo

112 N 7th St, #2F

1 bd · 1 ba · 650 sqft

Option C — Compact Selected + Add Drawer

Pros

Listings always the focus

Empty state is clean and inviting ("+ Add vibes")

Can tap a selected pill to remove it directly

Horizontal scroll keeps single-row height

Progressive — vibes are a bonus, not forced

Cons

Selected pills still need a drawer to add more

Two interaction modes: tap pill to remove, tap Add to open drawer

Slight discoverability issue — new users may miss the Add pill

Recommendation

Option B is the strongest pattern. It mirrors the existing FilterSheet (vaul drawer) that's already built, making it a low-effort implementation. The summary bar keeps active selections visible without eating vertical space, and the "Show N results" CTA inside the drawer creates a satisfying close loop — the same pattern Airbnb and Zillow use for their filter sheets. Listings stay the hero at all times.

Option C is a close second for users who like to see and remove individual selections without re-opening a drawer. It works best if the vibe feature is treated as optional/exploratory — the "+ Add vibes" pill is a gentle invitation rather than a required step.