Vibe Filter — UI Options

Three interaction patterns for showing / selecting lifestyle vibes

Option A — Current (Inline Pills)
9:41 ●●●
Nabe Williamsburg ▾
🔇 Quiet Coffee 👣 Walkable 🍷 Nightlife 🐕 Dog-friendly 👶 Family 🌳 Green 🍴 Foodie 🌊 Water 🏃 Runner-friendly 🎨 Artsy 💪 Fitness 🚆 Transit-rich Buzzing
Best for your vibes: Williamsburg North, East Village
⚠ 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 ●●●
Nabe 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 ●●●
Nabe Williamsburg ▾
📷 Photo
$3,200/mo
245 Bedford Ave, #3B
2 bd · 1 ba · 820 sqft
Choose Your Vibes
Select what matters to you — we'll match listings to your lifestyle
🔇 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 ●●●
Nabe 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 ●●●
Nabe 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.