{(confettiPieces || []).length > 0 && (

{(confettiPieces || []).map(p => (

6 ? '50%' : '2px', animation: 'confettiFall 2s ease-out forwards', animationDelay: p.delay + 's', transform: 'translateX(' + p.drift + 'px)' }} /> ))}

)}

Listing Details

{isOwner(listing) && !isEditing && (

)}

{listing?.photoUrl && (

{ e.currentTarget.style.display = 'none'; }} />

)}

{isEditing ? (

setEditData({ ...editData, food: e.target.value })} style={{ fontSize: 16, padding: '12px 14px', borderRadius: 12, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none' }} placeholder="Food name" /> setEditData({ ...editData, location: e.target.value })} style={{ fontSize: 16, padding: '12px 14px', borderRadius: 12, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none' }} placeholder="Location" /> setEditData({ ...editData, time: e.target.value })} style={{ fontSize: 16, padding: '12px 14px', borderRadius: 12, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none' }} placeholder="Available until" />

) : (

{listing?.type === 'free' ? '🆓 FREE' : '💰 DEAL'} {listing?.isDemo && Demo} {listing?.claimed && Claimed}

{listing?.food}

📍{listing?.location}

🕐{listing?.time}

listing?._user?.handle && openProfile(listing._user.handle)}>

{!listing?._user?.profileImageUrl && '👤'}

{listing?._user?.displayName ?? 'Anonymous'}

{timeAgo(listing?._timestamp)}

{listing?.claimed && listing?.claimedBy && (

Claimed by

{!listing.claimedBy.avatarUrl && '👤'}

{listing.claimedBy.displayName}

)}

{!listing?.claimed && !isEditing && ( )}

Comments ({(listing?.comments ?? []).length})

{(listing?.comments ?? []).length === 0 && (

No comments yet. Be the first! 💬

)} {(listing?.comments ?? []).map(c => (

c?._user?.handle && openProfile(c._user.handle)}>{!c?._user?.profileImageUrl && '👤'}

c?._user?.handle && openProfile(c._user.handle)}>{c?._user?.displayName ?? 'Anonymous'} {timeAgo(c?._timestamp)}

{c?.text}

))}

setCommentText(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { handleAddComment(listing.id); } }} placeholder="Add a comment..." style={{ flex: 1, height: 48, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none' }} />

); } return (

Nosh Spot

Campus food finds

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

m?.handle && openProfile(m.handle)} style={{ width: 34, height: 34, borderRadius: '50%', background: m?.avatarUrl ? 'url(' + m.avatarUrl + ')' : 'linear-gradient(135deg, #E8E5E0, #D4D0C8)', backgroundSize: 'cover', border: '2px solid ' + colors.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, cursor: 'pointer', marginLeft: i > 0 ? -8 : 0 }}>{!m?.avatarUrl && '👤'}

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

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

} {(memberList || []).length === 1 &&

Invite friends to share finds

}

{(sortedListings || []).length === 0 ? (

🍕

No food finds yet

Tap + to share a campus food discovery!

) : ( (sortedListings || []).map(listing => (

setSelectedListing(listing?.id)} style={{ background: listing?.claimed ? colors.claimed : colors.card, borderRadius: 16, padding: 16, marginBottom: 10, border: '1px solid ' + colors.border, cursor: 'pointer', transition: 'transform 0.15s, box-shadow 0.15s', animation: dropAnimId === listing?.id ? 'dropIn 0.5s ease-out' : 'none', opacity: listing?.claimed ? 0.65 : 1 }}>

{listing?.photoUrl ? (

🍽️

{ e.currentTarget.style.display = 'none'; }} />

) : (

{listing?.type === 'free' ? '🆓' : '💰'}

)}

{listing?.type === 'free' ? 'FREE' : 'DEAL'} {listing?.isDemo && Demo} {listing?.claimed && Claimed}

{listing?.food}

📍{listing?.location}

🕐{listing?.time}

{(listing?.comments ?? []).length > 0 && 💬 {(listing?.comments ?? []).length}} {timeAgo(listing?._timestamp)}

)) )}

{showAddForm && (

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

Share a food find

setFormData({ ...formData, food: e.target.value })} placeholder="What food? (e.g. Free pizza slices)" style={{ fontSize: 16, padding: '14px 16px', borderRadius: 14, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none', color: colors.text }} /> setFormData({ ...formData, location: e.target.value })} placeholder="Where? (e.g. Student Union, Rm 201)" style={{ fontSize: 16, padding: '14px 16px', borderRadius: 14, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none', color: colors.text }} /> setFormData({ ...formData, time: e.target.value })} placeholder="When? (e.g. Until 3 PM)" style={{ fontSize: 16, padding: '14px 16px', borderRadius: 14, border: '1px solid ' + colors.border, background: colors.inputBg, fontFamily: font, outline: 'none', color: colors.text }} />

)}

); }