Nosh Navigator

{isMultiplayer ? 'Picking together!' : 'Solo mode - share to invite!'}

{(memberList || []).slice(0, 3).map((m, i) => (

m.handle && openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid #F8FAFC', marginLeft: i > 0 ? -12 : 0, backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'linear-gradient(135deg, #E2E8F0, #CBD5E1)', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, cursor: m.handle ? 'pointer' : 'default', zIndex: 10 - i, boxShadow: '0 2px 4px rgba(0,0,0,0.1)', transition: 'transform 0.2s', ':hover': { transform: 'translateY(-2px)' } }} > {!m.avatarUrl && }

))} {(memberList || []).length > 3 && (

+{(memberList || []).length - 3}

)}

{/* Main Roulette Hero Area */}

{winnerSpot && !isSpinning ? winnerSpot.emoji : '🍽️'}

{isSpinning ? 'Deciding...' : winnerSpot ? `Let's go to ${winnerSpot.name}!` : 'Where to today?'}

{winnerSpot && !isSpinning ? (

🔄 Spin Again 🔗 Share

) : ( {isSpinning ? ( <>⏳ Spinning... ) : ( <>✨ Pick Our Lunch! )} )}

{/* Members Social Surface */} {(memberList || []).length > 0 && (

👥 Crew ({(memberList || []).length})

{(memberList || []).map((m, i) => { const isActive = isMultiplayer && memberActivity?.[m.id]?.lastActiveAt && (Date.now() - memberActivity[m.id].lastActiveAt < 60000); return (

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px 6px 6px', borderRadius: 40, background: '#F8FAFC', border: '1px solid #E2E8F0', cursor: m.handle ? 'pointer' : 'default', transition: 'transform 0.15s, box-shadow 0.15s' }} >

{!m.avatarUrl && 👤} {isActive &&

}

{m.displayName || m.name || 'Someone'}

); })}

)} {/* Bento Grid of Spots */}

The Shortlist {(spots || []).length} spots

{(spots || []).map(spot => { const isHighlighted = highlightedId === spot.id; const isWinner = activeWinnerId === spot.id && !isSpinning; return (

{spot.emoji}

{spot.name}

{ e.stopPropagation(); spot._user?.handle && openProfile(spot._user.handle); }} style={{ fontSize: 11, color: '#64748B', display: 'flex', alignItems: 'center', gap: 4, cursor: spot._user?.handle ? 'pointer' : 'default' }} > {spot.isDemo ? ( DEMO ) : ( <>by {spot._user?.displayName?.split(' ')[0] || 'Someone'} )}

{!spot.isDemo && !isSpinning && ( )}

); })}

{/* Add Spot Form (Sticky Bottom) */}

setNewName(e.target.value)} placeholder="Add a new spot..." style={{ width: '100%', height: 48, paddingLeft: 52, paddingRight: 16, borderRadius: 16, border: '2px solid #E2E8F0', fontSize: 16, outline: 'none', transition: 'border-color 0.2s', backgroundColor: '#fff' }} onFocus={e => e.target.style.borderColor = '#6366F1'} onBlur={e => e.target.style.borderColor = '#E2E8F0'} />

); }