{item.isDemo && (

Demo

)}

{ if (item._user) setViewingProfile(item._user); }} style={{ width: 56, height: 56, borderRadius: 20, background: '#334155', overflow: 'hidden', cursor: item._user ? 'pointer' : 'default', border: '2px solid #475569', flexShrink: 0 }} > {item._user?.profileImageUrl ? (

) : (

{activity.emoji}

)}

{ if (item._user) setViewingProfile(item._user); }} style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4, cursor: item._user ? 'pointer' : 'default', flexWrap: 'wrap' }} >

{isMe ? 'You' : item._user?.displayName || 'Unknown'}

{appData?.profiles?.[item._user?.id]?.major && ( {appData.profiles[item._user.id].major} )} {appData?.profiles?.[item._user?.id]?.currentStatus && ( • {appData.profiles[item._user.id].currentStatus === 'in_class' ? 'In Class' : 'Available'} )}

are down for {activity.emoji} {activity.label} {item.location && near {item.location}} {item.level && ( Lvl {item.level} )}

{item.notes && (

"{item.notes}"

)}

{formatTimeLeft(item.expiresAt)}

{(() => { const joiners = Array.isArray(item.joiners) ? item.joiners : []; const hasJoined = user && (joiners || []).some(j => j?.id === user.id); return (

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

Joined by

{(joiners || []).slice(0, 5).map((j, idx) => (

{ if (j) setViewingProfile(j); }} title={j.displayName} style={{ width: 28, height: 28, background: '#1E293B', borderRadius: 14, border: '2px solid #1E293B', marginLeft: idx === 0 ? 0 : -8, cursor: j ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#F8FAFC', fontWeight: 'bold', boxShadow: '0 2px 4px rgba(0,0,0,0.4)', overflow: 'hidden' }} > {j.profileImageUrl ? (

) : ( {(j.displayName || '?').charAt(0).toUpperCase()} )}

))}

)} {isMe ? (

) : (

)}

); })()}

); }; return (

{/* Header */}

BreakBuddy

See who's free right now

{/* Header View Toggle */}

{/* Content Area */}

{viewMode === 'list' ? ( (activeList || []).length === 0 ? (

🦗

It's quiet here...

Be the first to take a break!

) : (

{(activeList || []).map(renderBreakCard)}

) ) : (

{ setIsDraggingMap(true); setDragStart({ x: e.clientX - mapPan.x, y: e.clientY - mapPan.y }); e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={(e) => { if (!isDraggingMap) return; setMapPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y }); }} onPointerUp={(e) => { setIsDraggingMap(false); e.currentTarget.releasePointerCapture(e.pointerId); }} onPointerCancel={(e) => { setIsDraggingMap(false); e.currentTarget.releasePointerCapture(e.pointerId); }} >

{/* Pins Overlays */} {Object.entries((activeList || []).reduce((acc, b) => { if (!b.location) return acc; acc[b.location] = [...(acc[b.location] || []), b]; return acc; }, {})).map(([loc, list]) => { const coords = MAP_LOCATIONS[loc]; if (!coords) return null; return (

e.stopPropagation()} onClick={() => setSelectedMapLocation(loc)} style={{ position: 'absolute', left: `${coords.x}%`, top: `${coords.y}%`, transform: 'translate(-50%, -50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', animation: 'slideIn 0.3s ease-out', zIndex: 2 }} >

{(list || []).length} Here

); })}

{/* Recenter Button Overlay */} {(mapPan.x !== 0 || mapPan.y !== 0) && ( )}

)}

{/* Sticky Bottom Action */}

{/* Map Location Details Modal */}

e.stopPropagation()} style={{ background: '#1E293B', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 16, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 32px)', paddingLeft: 24, paddingRight: 24, transform: selectedMapLocation ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', maxHeight: '85vh', overflowY: 'auto' }} >

{selectedMapLocation}

{(activeList || []).filter(b => b.location === selectedMapLocation).map(renderBreakCard)}

{/* Bottom Sheet Modal - Post */}

e.stopPropagation()} style={{ background: '#1E293B', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 16, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)', paddingLeft: 24, paddingRight: 24, transform: isModalOpen ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2)', boxShadow: '0 -10px 40px rgba(0,0,0,0.5)', maxHeight: '90vh', overflowY: 'auto' }} >

What's the vibe?

1. Pick an activity

{(ACTIVITIES || []).map(act => ( ))}

2. Where? (Optional)

setSelectedLocation(e.target.value)} placeholder="e.g. Library 2nd Floor" style={{ width: '100%', padding: '16px', borderRadius: 16, border: '2px solid #334155', fontSize: 16, fontWeight: 600, boxSizing: 'border-box', fontFamily: 'inherit', background: '#0F172A', color: '#F8FAFC', marginBottom: 16 }} />

{(LOCATION_SUGGESTIONS || []).map(loc => ( ))}

3. Which level? (Optional)

{['G', '1', '2', '3', '4', '5', '6', '7'].map(lvl => ( ))}

setSelectedLevel(e.target.value)} placeholder="Or type custom (e.g. B1, Mezzanine)" style={{ width: '100%', padding: '14px', borderRadius: 16, border: '2px solid #334155', fontSize: 16, fontWeight: 600, boxSizing: 'border-box', fontFamily: 'inherit', background: '#0F172A', color: '#F8FAFC', marginBottom: 24 }} />

4. For how long?

{(DURATIONS || []).map(dur => ( ))}

5. Any notes? (Optional)

setSelectedNotes(e.target.value)} placeholder="e.g. Cramming for bio midterm!" style={{ width: '100%', padding: '16px', borderRadius: 16, border: '2px solid #334155', fontSize: 16, fontWeight: 600, boxSizing: 'border-box', fontFamily: 'inherit', background: '#0F172A', color: '#F8FAFC', marginBottom: 32 }} />

{/* Profile Modal */}

e.stopPropagation()} style={{ background: '#1E293B', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 16, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)', paddingLeft: 24, paddingRight: 24, transform: isProfileModalOpen ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', maxHeight: '85vh', overflowY: 'auto' }} >

Your Profile

Current Status

Major / Department setProfileForm({...profileForm, major: e.target.value})} placeholder="e.g. Computer Science" style={{ width: '100%', padding: '16px', borderRadius: 16, border: '2px solid #334155', fontSize: 16, fontWeight: 600, boxSizing: 'border-box', fontFamily: 'inherit', background: '#0F172A', color: '#F8FAFC' }} />

Short Bio setProfileForm({...profileForm, bio: e.target.value})} placeholder="Vibes only..." style={{ width: '100%', padding: '16px', borderRadius: 16, border: '2px solid #334155', fontSize: 16, fontWeight: 600, boxSizing: 'border-box', fontFamily: 'inherit', background: '#0F172A', color: '#F8FAFC' }} />

{/* View User Profile Modal */}

e.stopPropagation()} style={{ background: '#1E293B', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 16, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 32px)', paddingLeft: 24, paddingRight: 24, transform: viewingProfile ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', maxHeight: '85vh', overflowY: 'auto' }} >

Profile

{viewingProfile && (() => { const profileData = appData?.profiles?.[viewingProfile.id] || {}; return (

{viewingProfile.profileImageUrl ? (

) : '—'}

{viewingProfile.displayName}

{viewingProfile.handle &&

@{viewingProfile.handle}

}

{profileData.major && (

Major

{profileData.major}

)} {profileData.bio && (

Bio

{profileData.bio}

)}

{viewingProfile.handle && typeof openProfile === 'function' && ( )}

); })()}

{/* Confetti Overlay */} {(confetti || []).map(drop => (

{drop.emoji}

))}