0 ? -8 : 0, overflow: 'hidden', background: attendee.avatar ? 'transparent' : bgColor, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff', fontWeight: 700, transition: 'transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s', transform: isAnimating ? 'scale(1.3)' : 'scale(1)', opacity: isAnimating ? 0.9 : 1, boxShadow: '0 2px 6px rgba(61,46,31,0.15)', zIndex: 10 - idx, position: 'relative' }}> {attendee.avatar ? (

{ e.currentTarget.style.display = 'none'; }} /> ) : ( {(attendee.name || '?')[0].toUpperCase()} )}

); }; const renderPetals = (planId) => { if (petalAnim !== planId) return null; return (

{[0,1,2,3,4,5,6,7].map(i => ( {petalEmojis[i % (petalEmojis || []).length]} ))}

); }; const renderPlanCard = (plan, idx) => { const joined = isJoined(plan); const attendees = plan?.attendees ?? []; const isNew = justPosted === plan.id; const isJoinAnim = justJoined === plan.id; const texture = cardTextures[idx % (cardTextures || []).length]; return (

{renderPetals(plan.id)}

{plan.title}

{plan.time} {plan.location}

{(attendees || []).length} {(attendees || []).length === 1 ? 'buddy' : 'buddies'}

{plan.note ? (

"{plan.note}"

) : null}

{(attendees || []).slice(0, 5).map((a, i) => renderAvatar(a, i))} {(attendees || []).length > 5 ? ( +{(attendees || []).length - 5} ) : null}

Posted by {plan.createdByName}

); }; const renderForm = () => { if (!showForm) return null; return (

{ if (e.target === e.currentTarget) setShowForm(false); }}>

Share Your Lunch

What are you having? setFormData({ ...formData, title: e.target.value })} placeholder="e.g., Picnic on the quad" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid rgba(156,175,136,0.4)', background: 'rgba(255,255,255,0.8)', fontFamily: "'Lora', 'Georgia', serif", color: '#3d2e1f', boxSizing: 'border-box', outline: 'none' }} />

When? setFormData({ ...formData, time: e.target.value })} placeholder="12:00 PM" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid rgba(156,175,136,0.4)', background: 'rgba(255,255,255,0.8)', fontFamily: "'Lora', 'Georgia', serif", color: '#3d2e1f', boxSizing: 'border-box', outline: 'none' }} />

Where? setFormData({ ...formData, location: e.target.value })} placeholder="Library Cafe" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid rgba(156,175,136,0.4)', background: 'rgba(255,255,255,0.8)', fontFamily: "'Lora', 'Georgia', serif", color: '#3d2e1f', boxSizing: 'border-box', outline: 'none' }} />

Craving anything? (optional) setFormData({ ...formData, note: e.target.value })} placeholder="Craving a warm scone!" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1.5px solid rgba(156,175,136,0.4)', background: 'rgba(255,255,255,0.8)', fontFamily: "'Lora', 'Georgia', serif", color: '#3d2e1f', boxSizing: 'border-box', outline: 'none' }} />

); }; return (

Campus Picnic

Find your lunch buddies

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

openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid #f5ead6', background: m.avatarUrl ? 'transparent' : '#9CAF88', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff', fontWeight: 700, cursor: 'pointer', overflow: 'hidden', boxShadow: '0 1px 4px rgba(61,46,31,0.1)' }} > {m.avatarUrl ? ( {m.displayName}

{ e.currentTarget.style.display = 'none'; }} /> ) : ( {(m.displayName || '?')[0].toUpperCase()} )}

))} {(memberList || []).length > 6 ? ( +{(memberList || []).length - 6} ) : null} {(memberList || []).length <= 1 ? ( Invite friends to join the feast ) : null}

{(plans || []).length} {(plans || []).length === 1 ? 'gathering' : 'gatherings'} today

{(plans ?? []).map((plan, idx) => renderPlanCard(plan, idx))} {(plans || []).length === 0 ? (

No lunch plans yet today.

Be the first to gather friends!

) : null}

{renderForm()}

); }