Discovery Verticals (Browse Views)
Relevant source files
The following files were used as context for generating this wiki page:
- src/components/browse/BrowseLayout.tsx
- src/components/cafes/cafe-browse-view.tsx
- src/components/nightlife/nightlife-browse-view.tsx
- src/components/cafe/cafe-detail-panel.tsx
- src/components/nightlife/nightlife-detail-panel.tsx
- src/components/home/home-footer.tsx
- src/components/cafes/tests/cafe-browse-card.test.tsx
Discovery Verticals represent the structured, non-chat entry points for exploring curated categories within Medellín, such as rentals, restaurants, cafés, nightlife, and events. These "Browse Views" provide a traditional grid-based exploration interface that complements the primary AI-first chat experience, allowing users to filter and view listings with standardized layouts.
The system is built around a unified BrowseLayout that provides a consistent header, navigation, and filtering structure across different domain verticals.
Sources: src/components/home/home-footer.tsx:6-14, src/components/browse/BrowseLayout.tsx:1-48
Core Architecture and Layout
The BrowseLayout component serves as the structural foundation for all discovery verticals. It implements a sticky header containing navigation back to the chat interface, category titles, and a slot for vertical-specific filter bars.
BrowseLayout Component Structure
| Property | Type | Description |
|---|---|---|
testId | string | Identifier for E2E testing. |
title | string | Main heading (e.g., "Cafés"). |
subtitle | string | Descriptive text about the vertical. |
filterBar | ReactNode | Slot for rendering category-specific filters. |
notice | ReactNode | Optional slot for alerts or safety notices. |
mapSlot | ReactNode | Optional map column (currently unwired in SAN-574). |
Sources: src/components/browse/BrowseLayout.tsx:7-48
Component Hierarchy
The following diagram illustrates how the BrowseLayout wraps vertical-specific content:
The BrowseLayout uses a max-width of 6xl and handles responsive padding for mobile and desktop views.
Sources: src/components/browse/BrowseLayout.tsx:28-48
Data Enrichment and Detail Panels
When a user selects a listing from a browse view (such as a Café or Nightlife venue), the system utilizes specific detail panels that merge search results with real-time data enrichment.
Detail Panel Logic
Detail panels like CafeDetailPanel and NightlifeDetailPanel use the usePlaceDetails hook to fetch live data from Google Places (via a proxy) to supplement the static search result. This includes:
- Status merging: Combining cached search results with fresh ratings, opening hours, and contact info.
- Media Gallery: Displaying hero photos and thumbnails via a photo proxy.
- Interactions: Providing CTAs for booking, directions, and "Show on map" functionality.
Sources: src/components/cafe/cafe-detail-panel.tsx:38-65, src/components/nightlife/nightlife-detail-panel.tsx:112-140
Enrichment Flow
Specialized Vertical Features
Each vertical implements unique UI components tailored to the nature of the discovery.
Nightlife Vertical
The Nightlife vertical includes a specific NightlifeSafetyNotice component. This component displays safety advice for Medellín (e.g., using licensed taxis, sharing location) and uses sessionStorage to ensure it is only shown once per session.
Sources: src/components/nightlife/nightlife-detail-panel.tsx:25-50
Café Vertical
The Café vertical utilizes "Ask Prompts" via the buildCafeAskPrompts utility. This encourages users to transition from the browse view back into the AI chat by providing suggested queries like "Is there fast WiFi?" or "Are there power outlets?".
Sources: src/components/cafe/cafe-detail-panel.tsx:115-139
Shared UI Components
- Sibling Rail: A horizontal scrollable list of other results from the same search, allowing users to quickly switch between venues without returning to the main grid.
- Booking Status Chip: A
VenueBookingStatusChipthat displays the current availability or booking requirements for a specific venue.
Sources: src/components/cafe/cafe-detail-panel.tsx:77-113, src/components/nightlife/nightlife-detail-panel.tsx:160-162
Design Compositions
Browse views support different visual compositions for cards in the discovery grid:
| Composition | Media Layout | Description |
|---|---|---|
nova | cover | Modern layout with an 16/10 aspect ratio hero image at the top. |
legacy | inline | Original layout with integrated media. |
Sources: src/components/cafes/tests/cafe-browse-card.test.tsx:18-43, src/components/nightlife/tests/nightlife-browse-card.test.tsx:17-42
Summary
Discovery Verticals provide a structured alternative to the chat-first interface of mdeai. By leveraging a common BrowseLayout and specialized detail panels, the system ensures that exploring cafés, nightlife, and other venues remains consistent while still providing domain-specific features like safety notices for nightlife or WiFi-specific AI prompts for cafés. The integration of live Google Places data ensures that browse views remain accurate beyond the initial search result.
Sources: src/components/browse/BrowseLayout.tsx, src/components/cafe/cafe-detail-panel.tsx, src/components/nightlife/nightlife-detail-panel.tsx