// screens-home.jsx — discovery / home feed (+ hero variants) function HomeScreen({ app }) { const [chip, setChip] = React.useState('All'); const [search, setSearch] = React.useState(''); const [loading, setLoading] = React.useState(true); const [feedRevealed, setFeedRevealed] = React.useState(false); const deferredFeedRef = React.useRef(null); const heroVariant = app.tweaks.heroVariant || 'classic'; // Delivery details (address + time) drawer const [deliveryOpen, setDeliveryOpen] = React.useState(false); const [addrId, setAddrId] = React.useState((ADDRESSES.find(a => a.default) || ADDRESSES[0]).id); const [whenId, setWhenId] = React.useState('asap'); const selectedAddr = ADDRESSES.find(a => a.id === addrId) || ADDRESSES[0]; const selectedWhen = WHEN_OPTIONS.find(w => w.id === whenId) || WHEN_OPTIONS[0]; // Search + filter drawers const [searchOpen, setSearchOpen] = React.useState(false); const [filterOpen, setFilterOpen] = React.useState(false); const [filters, setFilters] = React.useState({ sort: 'recommended', maxFee: 'any', openNow: false, featured: false }); const activeFilterCount = (filters.sort !== 'recommended' ? 1 : 0) + (filters.maxFee !== 'any' ? 1 : 0) + (filters.openNow ? 1 : 0) + (filters.featured ? 1 : 0); React.useEffect(() => { const t = setTimeout(() => setLoading(false), 700); return () => clearTimeout(t); }, []); // Filter const cuisines = ['All', 'BBQ', 'Burgers', 'Tacos', 'Coffee', 'Sweets', 'Healthy', 'Asian']; const restHasFavDish = (rid) => { const m = MENUS[rid] || GENERIC_MENU; return m.some(sec => sec.items.some(it => app.favourites.has(it.id))); }; const filtered = sortRestaurants(RESTAURANTS.filter(r => { if (chip === 'Faves') { if (!(app.favStores.has(r.id) || restHasFavDish(r.id))) return false; } else if (chip !== 'All') { const c = r.cuisine.toLowerCase(); const want = chip.toLowerCase(); if (!c.includes(want) && !(want === 'sweets' && c.includes('sweet')) && !(want === 'burgers' && (c.includes('burger') || c.includes('smash')))) return false; } if (search) { const s = search.toLowerCase(); const dishHit = (MENUS[r.id] || []).some(sec => sec.items.some(it => it.name.toLowerCase().includes(s) || (it.desc || '').toLowerCase().includes(s))); if (!r.name.toLowerCase().includes(s) && !r.cuisine.toLowerCase().includes(s) && !dishHit) return false; } // Filter-drawer constraints if (filters.openNow && !['live', 'cooking', 'open'].includes(r.status)) return false; if (filters.maxFee === '2' && !(r.deliveryFee < 2)) return false; if (filters.maxFee === '1' && !(r.deliveryFee < 1)) return false; if (filters.featured && !r.featured) return false; return true; }), filters.sort); const featured = filtered.filter(r => r.featured); const filterActive = chip !== 'All' || !!search.trim(); const [activeOffer, setActiveOffer] = React.useState(null); React.useEffect(() => { if (loading || filterActive || feedRevealed) return undefined; const deferredFeed = deferredFeedRef.current; if (!deferredFeed) return undefined; if (!('IntersectionObserver' in window)) { setFeedRevealed(true); return undefined; } const observer = new IntersectionObserver((entries) => { if (entries.some(entry => entry.isIntersecting)) { setFeedRevealed(true); } }, { rootMargin: '0px 0px -96px 0px', threshold: 0.01, }); observer.observe(deferredFeed); return () => observer.disconnect(); }, [feedRevealed, filterActive, loading]); // Curated discovery rails (independent of category filter) const hasTag = (r, t) => (r.tags || []).includes(t); const railFeatured = RESTAURANTS.filter(r => r.featured); const railTop10 = [...RESTAURANTS].sort((a, b) => b.rating - a.rating).slice(0, 10); const railNearby = [...RESTAURANTS].sort((a, b) => railDist(a) - railDist(b)).slice(0, 8); const railFree = RESTAURANTS.filter(r => hasTag(r, 'free')); const railValue = [...RESTAURANTS] .sort((a, b) => (a.deliveryFee - b.deliveryFee) || (a.minOrder - b.minOrder)); // cheapest delivery — "big value, small spend" const railPickup = RESTAURANTS.filter(r => hasTag(r, 'pickup')); const railVegan = RESTAURANTS.filter(r => hasTag(r, 'vegan') || hasTag(r, 'eco')); return ( {/* Sticky top bar — LASSO + bell/account stay pinned together */}
app.nav('notifications')} onProfile={() => app.nav('profile')} initials={PROFILE.initials} />
{/* Address row — stays under the header */}
setDeliveryOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '2px 20px 34px', cursor: 'pointer', }}>
Deliver to · {selectedWhen.short}
{selectedAddr.label} · {selectedAddr.line1}
{/* Search — floating pill tucked under the sticky bar (no gap) */}
setSearchOpen(true)} onFilter={() => setFilterOpen(true)} filterCount={activeFilterCount} />
{/* Category slider — image + name, scrolls right */} setChip(c => c === val ? 'All' : val)} favCount={app.favourites.size + app.favStores.size}/> {filterActive ? ( <> {/* ── Filter results — right under the search, no scrolling to the bottom ── */}
{search.trim() ? `“${search.trim()}”` : chip === 'Faves' ? 'Your favourites' : chip}
{filtered.length} {filtered.length === 1 ? 'spot' : 'spots'} on the trail
{chip === 'Faves' && !search.trim() && } {filtered.length === 0 ? (chip === 'Faves' ? { setChip('All'); setSearch(''); }} icon={} /> : { setChip('All'); setSearch(''); }} />) : filtered.map(r => app.openRestaurant(r.id)}/>)}
{/* Keep browsing — related categories so the trail never dead-ends */} { setSearch(''); setChip(c => c === val ? 'All' : val); }}/>
) : ( <> {/* Offers — horizontal scroll of promo cards */} {/* Discovery rails */} {loading ? ( <>
{[0,1].map(i => )}
{[0,1,2].map(i => )}
) : ( <>
{feedRevealed && ( <>
{filtered.length === 0 ? { setChip('All'); setSearch(''); }} /> : filtered.map(r => app.openRestaurant(r.id)}/>) }
)}
)} )}