{/* Confetti Overlay */} {showConfetti && (

🥢 🥟 🍜 ✨ 🥂

)}

TableMates

Find your next meal crew 🍽️

{user?.avatarUrl ?

: '👤'}

{/* Feed Area */}

{/* Active Members Strip */} {(communityMembers || []).length > 0 && (

Global Community

{(communityMembers || []).map(m => (

openProfile && (m.handle) ? openProfile(m.handle) : null} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: m.handle ? 'pointer' : 'default', flexShrink: 0 }} >

{m.avatarUrl ?

: (m.displayName || m.name || '?').charAt(0)}

{(m.displayName || m.name || 'User').split(' ')[0]}

))}

)} {(plans || []).map((plan, idx) => { const isFull = (plan.members || []).length >= plan.maxSpots; const hasJoined = (plan.members || []).some(m => m.id === user?.id); const isAnimating = joinAnimId === plan.id; return (

setSelectedPlanId(plan.id)} style={{ ...commonStyles.card, animation: `popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) ${idx * 0.05}s backwards` }} >

{plan.restaurant}

{plan.creatorId === user?.id && ( )}

🕐 {plan.time}

{(plan.tags || []).map(tag => ( {tag} ))}

Spots: {(plan.members || []).length}/{plan.maxSpots}

Est: ~${plan.estimatedCost}/pp

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

{m.avatarUrl ?

: m.name.charAt(0)}

))}

{hasJoined && ( )}

); })}

{/* Sticky FAB */} {!isCreateOpen && !selectedPlanId && !chatPlanId && ( )} {/* Create Sheet Backdrop */}

setIsCreateOpen(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', zIndex: 40, opacity: isCreateOpen ? 1 : 0, visibility: isCreateOpen ? 'visible' : 'hidden', transition: 'opacity 0.3s, visibility 0.3s', pointerEvents: isCreateOpen ? 'auto' : 'none' }} /> {/* Create Sheet */}

Host a Meal

setNewPlan({...newPlan, restaurant: e.target.value})} />

setNewPlan({...newPlan, time: e.target.value})} /> setNewPlan({...newPlan, maxSpots: e.target.value})} />

setNewPlan({...newPlan, estimatedCost: e.target.value})} /> setNewPlan({...newPlan, tags: e.target.value})} />

{/* Details Sheet */}

{displayPlan && selectedPlanId && ( <>

Meal Details

{displayPlan.creatorId === user?.id && ( )}

{displayPlan.restaurant}

🕐 {displayPlan.time}

💰 ~${displayPlan.estimatedCost}/pp

{displayPlan.tags && (displayPlan.tags || []).length > 0 && (

{(displayPlan.tags || []).map(tag => ( {tag} ))}

)}

Table Members ({(displayPlan.members || []).length}/{displayPlan.maxSpots})

{(displayPlan.members || []).map(m => (

openProfile && m.handle ? openProfile(m.handle) : null} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, cursor: 'pointer' }}>

{m.avatarUrl ?

: m.name.charAt(0)}

{m.name.split(' ')[0]}

))} {Array.from({ length: Math.max(0, displayPlan.maxSpots - (displayPlan.members || []).length) }).map((_, i) => (

🪑

Open

))}

)}

{/* Chat Sheet */}

{displayPlan && chatPlanId && ( <>

{displayPlan.restaurant} Chat

{/* Spacer for alignment */}

Table Chat Started 💬

{(planMessages || []).map((msg, idx) => { const isMe = msg._user?.id === user?.id; if (msg.isSystem) { return (

{msg._user?.displayName || 'Someone'} {msg.text}

); } return (

{!isMe && (

openProfile && msg._user?.handle ? openProfile(msg._user.handle) : null} style={{ width: 28, height: 28, borderRadius: '50%', background: '#E3E8DE', flexShrink: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, overflow: 'hidden' }} > {msg._user?.profileImageUrl ?

: (msg._user?.displayName?.charAt(0) || '👤')}

)}

{msg.text}

); })}

{(displayPlan.members || []).some(m => m.id === user?.id) ? ( ) : (

Join the table to chat!

)}

); }