{/* HEADER */}

SYNC.GRID

AI Timetable Matrix

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

openProfile && openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', border: `2px solid ${getUserColor(m.id)}`, marginLeft: -12, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : UNSW_COLORS.charcoalSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', zIndex: 3 - i, boxShadow: '0 0 10px rgba(0,0,0,0.5)' }}> {!m.avatarUrl && 🤖}

))}

{/* MAIN CONTENT */}

{/* UPLOAD PROMPT */} {(

INITIALIZE MATRIX 📸

{hasMyRealEvents ? 'Want to change your timetable? Upload a new screenshot to replace your classes, or remove your timetable first.' : 'Upload a screenshot of your schedule. Our AI will digitize it instantly and reveal shared free time with your squad.'}

{uploadError &&

⚠️ {uploadError}

} {hasMyRealEvents && ( )}

)} {/* FRIENDS LIST */}

Friends List

setFriendNameInput(e.target.value)} placeholder="Friend name" style={{ background: UNSW_COLORS.black, border: '1px solid rgba(255,255,255,0.2)', color: UNSW_COLORS.white, borderRadius: 8, padding: '10px 12px', fontSize: 12 }} /> setFriendHandleInput(e.target.value)} placeholder="@handle (optional)" style={{ background: UNSW_COLORS.black, border: '1px solid rgba(255,255,255,0.2)', color: UNSW_COLORS.white, borderRadius: 8, padding: '10px 12px', fontSize: 12 }} />

Merge Timetables With

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

No live friends in this squad yet.

) : (

{(mergeCandidates || []).map((friend) => { const selected = (activeMergeFriendIds || []).includes(friend.id); return ( ); })}

)}

{(mergedFriends || []).length === 0 && (

No friends yet. Add names above.

)} {(mergedFriends || []).map((fr) => (

{fr.displayName} {!!fr.handle && @{fr.handle}}

{!!fr.handle && ( )} {String(fr.id || '').startsWith('friend-') && ( )}

))}

{/* VIEW MODE TOGGLE */}

{/* CALENDAR CONTROLS */}

{(visibleDays || []).map((day, i) => (

{day.label}

{day.date.getDate()}

))}

{/* CALENDAR GRID */}

{/* TIME LABELS */}

{Array.from({ length: TOTAL_HOURS }).map((_, i) => (

{START_HOUR + i}:00

))}

{/* DAY COLUMNS */} {(visibleDays || []).map((day, colIdx) => { const dayEvents = (displayedEvents || []).filter(ev => ev.dayOffset === day.offset); const freeBlocks = getFreeTimeBlocks(day.offset); return (

{/* SQUAD TIME BLOCKS */} {(mergedParticipantIds || []).length > 1 && (freeBlocks || []).map((block, bi) => (

⚡ SQUAD TIME ⚡

))} {/* EVENTS */} {(dayEvents || []).map(event => { const top = Math.max(0, (event.start - START_HOUR) * HOUR_HEIGHT); const height = (event.end - Math.max(event.start, START_HOUR)) * HOUR_HEIGHT; if (event.end <= START_HOUR || event.start >= END_HOUR) return null; const userColor = getUserColor(event.userId); return (

{event.title}

{height > 40 && (

{formatTime(event.start)} - {formatTime(event.end)}

)} {height > 60 && event.location && (

📍 {event.location}

)} {event.isDemo && (

DEMO

)}

); })}

{/* AI ANALYZING OVERLAY */} {analyzing && (

👁️

EXTRACTING

NEURAL NET ACTIVE...

)} {/* CONFETTI OVERLAY */} {showConfetti && (

{Array.from({ length: 30 }).map((_, i) => (

{['✨', '⚡', '🎉', '🔥', '💿'][Math.floor(Math.random() * 5)]}

))}

)}

); }