{/* Close */} {/* Image */}

{event.image &&

}

{/* Category pill */}

{event.category}

{/* Content */}

{event.tag} · {event.date} · {event.time}

{event.title}

{event.venue}

); } /* ───── Map View (Leaflet, uses glass tokens) ───── */ function MapView({ events, darkMode, height = 480, radius }) { const ref = React.useRef(null); const mapRef = React.useRef(null); const layerRef = React.useRef(null); const tileRef = React.useRef(null); const [selectedEvent, setSelectedEvent] = React.useState(null); const [cardPos, setCardPos] = React.useState(null); React.useEffect(() => { if (!ref.current || !window.L) return; if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } const m = window.L.map(ref.current, { center: [37.76, -122.20], zoom: 10, scrollWheelZoom: window.innerWidth > 768, attributionControl: false, }); const tileUrl = darkMode ? 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png' : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png'; tileRef.current = window.L.tileLayer(tileUrl, { maxZoom: 19 }).addTo(m); mapRef.current = m; m.on('click', () => { setSelectedEvent(null); setCardPos(null); }); return () => { m.remove(); mapRef.current = null; }; }, [darkMode]); React.useEffect(() => { const m = mapRef.current; if (!m || !window.L) return; if (layerRef.current) { m.removeLayer(layerRef.current); } const group = window.L.markerClusterGroup({ maxClusterRadius: 45, spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true, animate: true, }); events.forEach(ev => { if (ev.lat == null || ev.lng == null) return; const catColors = { 'MUSIC': '#FF4F00', 'CARDS': '#7A99AC', 'ART': '#5A7A68', 'FOOD': '#D57800', 'NIGHTLIFE': '#5B7A8D', 'COMMUNITY': '#395542', }; const rawColor = catColors[ev.category] || TAG_COLORS[ev.tag] || '#FF4F00'; const color = /^#[0-9A-Fa-f]{3,6}$/.test(rawColor) ? rawColor : '#FF4F00'; const icon = window.L.divIcon({ className: 'onsumn-pin', html: ``, iconSize: [18, 18], iconAnchor: [9, 9], }); const marker = window.L.marker([ev.lat, ev.lng], { icon }); marker.on('click', (e) => { window.L.DomEvent.stopPropagation(e); const pt = m.latLngToContainerPoint(e.latlng); const container = ref.current; setCardPos({ x: pt.x, y: pt.y, containerW: container ? container.clientWidth : 600 }); setSelectedEvent(ev); }); group.addLayer(marker); }); group.addTo(m); layerRef.current = group; /* Fit map to show all event pins */ const validEvents = events.filter(e => e.lat != null && e.lng != null); if (validEvents.length > 1) { const bounds = window.L.latLngBounds(validEvents.map(e => [e.lat, e.lng])); m.fitBounds(bounds, { padding: [40, 40], maxZoom: 12 }); } }, [events]); return (

{/* Event count badge */} {!selectedEvent &&

{events.length} EVENTS · THE BAY, RIGHT NOW

} {/* Selected event card */} { setSelectedEvent(null); setCardPos(null); }} />

); } /* ───── Time-of-day filter helper ───── */ function matchesTimeFilter(event, times) { if (!times || times.length === 0) return true; const t = event.time || ''; const match = t.match(/(\d+)\s*(AM|PM)/i); if (!match) return true; let hour = parseInt(match[1]); const period = match[2].toUpperCase(); if (period === 'PM' && hour !== 12) hour += 12; if (period === 'AM' && hour === 12) hour = 0; return times.some(slot => { if (slot === 'Morning') return hour >= 6 && hour < 12; if (slot === 'Afternoon') return hour >= 12 && hour < 17; if (slot === 'Evening') return hour >= 17 && hour < 21; if (slot === 'Late Night') return hour >= 21 || hour < 6; return true; }); } /* ───── Date filter helper ───── */ function matchesDateFilter(event, filter) { if (filter === 'ALL') return true; const now = new Date(); const eventDateStr = event.date || ''; // Parse "Mon DD" format (e.g., "Apr 25") const match = eventDateStr.match(/^(\w+)\s+(\d+)$/); if (!match) return true; // Can't parse, show it const months = { Jan:0, Feb:1, Mar:2, Apr:3, May:4, Jun:5, Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11 }; const monthIdx = months[match[1]]; if (monthIdx === undefined) return true; const day = parseInt(match[2]); const eventDate = new Date(now.getFullYear(), monthIdx, day); // If event month is far behind current month, it's probably next year if (monthIdx < now.getMonth() - 1) eventDate.setFullYear(now.getFullYear() + 1); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); const eventDay = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()); if (filter === 'TODAY') return eventDay.getTime() === today.getTime(); if (filter === 'TOMORROW') return eventDay.getTime() === tomorrow.getTime(); if (filter === 'WEEKEND') { const sat = new Date(today); sat.setDate(today.getDate() + (6 - today.getDay())); const sun = new Date(sat); sun.setDate(sat.getDate() + 1); return eventDay.getTime() === sat.getTime() || eventDay.getTime() === sun.getTime(); } return true; } /* ───── Events + Map Section (merges glass grid + Leaflet map) ───── */ function EventsMapSection({ darkMode, activeCity, radius, taste }) { const { events: allEvents, loading } = useEvents(); const [view, setView] = React.useState('split'); const [switching, setSwitching] = React.useState(false); const [filterOpen, setFilterOpen] = React.useState(false); const [dateFilter, setDateFilter] = React.useState('ALL'); const [activeFilters, setActiveFilters] = React.useState({ categories: [], cities: [], times: [], sounds: [] }); const [page, setPage] = React.useState(0); const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768); const carouselRef = React.useRef(null); const EVENTS_PER_PAGE = 12; /* Draggable section order — persisted to localStorage */ const DEFAULT_ORDER = ['MUSIC', 'ART', 'FOOD', 'NIGHTLIFE', 'COMMUNITY', 'CARDS']; const [sectionOrder, setSectionOrder] = React.useState(() => { try { const saved = localStorage.getItem('onsumn-section-order'); if (saved) { const parsed = JSON.parse(saved); const missing = DEFAULT_ORDER.filter(c => !parsed.includes(c)); return [...parsed.filter(c => DEFAULT_ORDER.includes(c)), ...missing]; } } catch {} return DEFAULT_ORDER; }); const [liftedCat, setLiftedCat] = React.useState(null); const rowRefs = React.useRef({}); const dragState = React.useRef(null); const scrollAnimRef = React.useRef(null); /* Batch-fetch interest counts for visible events */ React.useEffect(() => { if (!allEvents.length) return; const slugs = allEvents.filter(e => e.slug).map(e => e.slug).slice(0, 50); fetchInterestCounts(slugs); }, [allEvents]); /* Pointer-based drag: smooth, no HTML5 DnD ghost */ const handlePointerDown = React.useCallback((e, cat) => { e.preventDefault(); const rowEl = rowRefs.current[cat]; if (!rowEl) return; const rect = rowEl.getBoundingClientRect(); const startY = e.clientY; const startScroll = window.scrollY; /* Lift the row */ setLiftedCat(cat); rowEl.style.transition = 'transform 0.08s ease-out, box-shadow 0.2s ease'; rowEl.style.zIndex = '50'; rowEl.style.transform = 'scale(1.015)'; rowEl.style.boxShadow = '0 12px 40px rgba(0,0,0,0.35)'; rowEl.style.borderRadius = '16px'; rowEl.style.pointerEvents = 'none'; document.body.style.cursor = 'grabbing'; document.body.style.userSelect = 'none'; let currentY = startY; /* Auto-scroll near edges */ const scrollLoop = () => { const edgeZone = 100; const speed = 6; if (currentY > 0 && currentY < edgeZone) { const intensity = 1 - (currentY / edgeZone); window.scrollBy(0, -speed * intensity); } else if (currentY > window.innerHeight - edgeZone) { const intensity = 1 - ((window.innerHeight - currentY) / edgeZone); window.scrollBy(0, speed * intensity); } scrollAnimRef.current = requestAnimationFrame(scrollLoop); }; scrollAnimRef.current = requestAnimationFrame(scrollLoop); const onPointerMove = (ev) => { currentY = ev.clientY; const scrollDelta = window.scrollY - startScroll; const dy = ev.clientY - startY + scrollDelta; rowEl.style.transform = `translateY(${dy}px) scale(1.015)`; /* Hit-test other rows for swap */ const liftedMid = rect.top + rect.height / 2 + dy; setSectionOrder(prev => { const curIdx = prev.indexOf(cat); let swapIdx = -1; for (let i = 0; i < prev.length; i++) { if (prev[i] === cat) continue; const otherEl = rowRefs.current[prev[i]]; if (!otherEl) continue; const otherRect = otherEl.getBoundingClientRect(); const otherMid = otherRect.top + otherRect.height / 2; if (curIdx < i && liftedMid > otherMid) swapIdx = i; if (curIdx > i && liftedMid < otherMid) swapIdx = i; } if (swapIdx !== -1 && swapIdx !== curIdx) { const next = [...prev]; next.splice(curIdx, 1); next.splice(swapIdx, 0, cat); localStorage.setItem('onsumn-section-order', JSON.stringify(next)); return next; } return prev; }); }; const onPointerUp = () => { /* Settle the row back into place */ rowEl.style.transition = 'transform 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s ease, border-radius 0.35s ease'; rowEl.style.transform = ''; rowEl.style.boxShadow = ''; rowEl.style.borderRadius = ''; rowEl.style.zIndex = ''; rowEl.style.pointerEvents = ''; document.body.style.cursor = ''; document.body.style.userSelect = ''; setLiftedCat(null); if (scrollAnimRef.current) cancelAnimationFrame(scrollAnimRef.current); document.removeEventListener('pointermove', onPointerMove); document.removeEventListener('pointerup', onPointerUp); }; document.addEventListener('pointermove', onPointerMove); document.addEventListener('pointerup', onPointerUp); }, []); React.useEffect(() => { const onResize = () => setIsMobile(window.innerWidth <= 768); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const handleViewChange = (v) => { if (v === view) return; setSwitching(true); setTimeout(() => { setView(v); setSwitching(false); }, 250); }; const totalFilters = activeFilters.categories.length + activeFilters.cities.length + activeFilters.times.length + activeFilters.sounds.length; /* City mapping for filter chips (display name → data value) */ const cityNameMap = { 'Oakland': 'OAKLAND', 'SF': 'SF', 'San Jose': 'SAN JOSE', 'Vallejo': 'VALLEJO', 'Richmond': 'RICHMOND', 'Daly City': 'DALY CITY', }; const filtered = allEvents.filter(e => { /* Header city nav still works */ const headerCityMatch = activeCity === 'ALL' || e.city === activeCity; /* Popup category filter */ const catMatch = activeFilters.categories.length === 0 || activeFilters.categories.some(c => c.toUpperCase() === e.category); /* Popup city filter */ const popupCityMatch = activeFilters.cities.length === 0 || activeFilters.cities.some(c => cityNameMap[c] === e.city); /* Popup time filter */ const timeMatch = matchesTimeFilter(e, activeFilters.times); /* Sub-genre filter (only when Concerts + sounds selected) */ const soundMatch = activeFilters.sounds.length === 0 || !e.subgenres || e.subgenres.length === 0 || activeFilters.sounds.some(s => e.subgenres.includes(s)); /* Date quick-pick filter */ const dateMatch = matchesDateFilter(e, dateFilter); /* Popup date filter (from filter popup "When" section) */ const popupDateMatch = !activeFilters.dates || activeFilters.dates.length === 0 || activeFilters.dates.some(d => { const key = d.toUpperCase().replace('THIS ', ''); return matchesDateFilter(e, key); }); return headerCityMatch && catMatch && popupCityMatch && timeMatch && soundMatch && dateMatch && popupDateMatch; }); /* Apply taste-based sorting — matching events float up, nothing gets hidden */ const sorted = taste && !taste.skipped ? [...filtered].sort((a, b) => { return tasteBoost(b, taste) - tasteBoost(a, taste); }) : filtered; const totalPages = Math.ceil(sorted.length / EVENTS_PER_PAGE); const currentPage = Math.min(page, Math.max(totalPages - 1, 0)); const visible = sorted.slice(currentPage * EVENTS_PER_PAGE, (currentPage + 1) * EVENTS_PER_PAGE); /* Reset page when filters change */ React.useEffect(() => { setPage(0); }, [activeCity, activeFilters, dateFilter]); /* Carousel scroll navigation */ const scrollCarousel = (dir) => { const c = carouselRef.current; if (!c) return; const amount = c.clientWidth * 0.85; c.scrollBy({ left: dir === 'left' ? -amount : amount, behavior: 'smooth' }); }; return (

{/* Filter Popup */} { setActiveFilters(filters); setPage(0); }} onClose={() => setFilterOpen(false)} visible={filterOpen} /> {/* Header */}

What's Good This Weekend

Fresh every day. The whole Bay.

{/* Glass view toggle */}

{[['map', 'Map'], ['split', 'Split'], ['grid', 'Grid']].map(([v, label]) => ( ))}

{/* Temporal quick-pick pills */}

{['TODAY', 'TOMORROW', 'WEEKEND', 'ALL'].map(label => ( ))} {/* MORE filter button */}

{/* Map */} {view !== 'grid' && (

)} {/* Loading skeleton */} {loading && view !== 'map' ? (

{[1,2,3,4].map(i => )}

) : view === 'map' ? null : sorted.length === 0 ? ( ) : ( /* ── Category-Sectioned Carousels ── */

{/* YOUR WAVE row — taste-matched events surfaced first */} {taste && !taste.skipped && (() => { const forYouEvents = sorted.filter(e => tasteBoost(e, taste) > 0).slice(0, 15); return forYouEvents.length > 0 ? ( ) : null; })()} {/* Category rows — user-reorderable */} {sectionOrder.map(cat => { const catEvents = sorted.filter(e => e.category === cat); return ( { if (el) rowRefs.current[cat] = el; }} isLifted={liftedCat === cat} onHandlePointerDown={handlePointerDown} /> ); })}

)}

); } window.MapEventCard = MapEventCard; window.MapView = MapView; window.EventsMapSection = EventsMapSection; window.matchesTimeFilter = matchesTimeFilter; window.matchesDateFilter = matchesDateFilter;