{/* HEADER */}

SydneySpotlight

University of Sydney

{/* TAG FILTER STRIP */} {activeTab === 'runway' && (allTags || []).length > 0 && (

{tagFilter && ( )} {(allTags || []).map(tag => ( ))}

)} {/* MAIN CONTENT */}

{activeTab === 'runway' ? (

{/* POST OF THE WEEK */} {lotwLook && lookOfTheWeekRecord && !tagFilter && (

Post of the Week

Wk {lookOfTheWeekRecord.weekKey ? lookOfTheWeekRecord.weekKey.split('-')[1] : ''} · {lookOfTheWeekRecord.pinCount} {lookOfTheWeekRecord.pinCount === 1 ? 'save' : 'saves'}

{lotwLook.type === 'video' && getLookVideoUrl(lotwLook) ? (

)} {/* TODAY'S PROMPT */} {!tagFilter && (

Today's Prompt

{DAY_NAMES[dayOfWeek]}

{todaysTheme}

{todaysBriefPostCount === 0 ? 'Be the first' : `${todaysBriefPostCount} ${todaysBriefPostCount === 1 ? 'post' : 'posts'} so far`}

)} {(filteredFeed || []).length === 0 && tagFilter && (

Nothing in {tagFilter}

Try another tag.

)} {(filteredFeed || []).length > 0 && (() => { const look = (filteredFeed || [])[currentLookIndex]; const lookVideoUrl = getLookVideoUrl(look); const isPinned = user?.id && Array.isArray(look.pinnedBy) && (look.pinnedBy || []).includes(user.id); const hasPrev = currentLookIndex > 0; const hasNext = currentLookIndex < ((filteredFeed || []).length - 1); if (!look) return null; return (

{currentLookIndex + 1} / {(filteredFeed || []).length}

{/* MEDIA */}

{ swipeStartXRef.current = e.touches && e.touches[0] ? e.touches[0].clientX : null; }} onTouchEnd={(e) => { const endX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : null; if (swipeStartXRef.current == null || endX == null) return; const deltaX = endX - swipeStartXRef.current; if (Math.abs(deltaX) < 45) { swipeStartXRef.current = null; return; } if (deltaX < 0) goToNextLook(); if (deltaX > 0) goToPrevLook(); swipeStartXRef.current = null; }} > {look.type === 'video' && lookVideoUrl ? (

{/* CONTENT */}

{look.desc}

{(look.tags || '').split(/\s+/).filter(Boolean).map((t, ti) => ( ))}

{/* SAVE BUTTON */}

{/* AI NOTE */} {look.aiNote && (

{look.aiNote}

)} {/* EMOJI REACTIONS */}

{(REACTION_EMOJIS || []).map(emoji => { const reactions = look.emojiReactions || {}; const users = reactions[emoji] || []; const count = (users || []).length; const iReacted = user?.id && (users || []).includes(user.id); return ( ); })}

{/* SAVED-BY AVATARS */} {(look.pinnedBy || []).length > 0 && (

{ e.stopPropagation(); setPinnersSheetLookId(look.id); }} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, cursor: 'pointer' }} >

{(look.pinnedBy || []).slice(-3).reverse().map((pinnerId, pi) => { const m = getMemberById(pinnerId); const initial = (m?.displayName || pinnerId || 'U').charAt(0).toUpperCase(); return (

0 ? -6 : 0, color: CARD, fontSize: 9, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box' }}> {!m?.avatarUrl && initial}

); })}

Saved by{' '} {(() => { const namedPinners = (look.pinnedBy || []).slice(-2).reverse().map(id => { const m = getMemberById(id); return m?.displayName || null; }).filter(Boolean); const total = (look.pinnedBy || []).length; if ((namedPinners || []).length === 0) { return {total} {total === 1 ? 'student' : 'students'}; } const extra = total - (namedPinners || []).length; return ( <> {(namedPinners || []).join(', ')} {extra > 0 && + {extra} more} ); })()}

)} {/* AUTHOR + TIMESTAMP */}

look._user?.handle && typeof openProfile === 'function' && openProfile(look._user.handle)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: look._user?.handle ? 'pointer' : 'default' }} >

{look._user?.displayName || 'Unknown'} {isCrownCarrier(look._user) && ★}

{formatTimeAgo(look._timestamp)}

{(filteredFeed || []).map((_, dotIndex) => (

))}

); })()}

) : ( /* SAVED TAB */

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

Nothing saved yet

Save posts from the feed to see them here.

) : (

{(myPins || []).map(look => (

{look.type === 'video' && getLookVideoUrl(look) ? (

))}

)}

{/* UPLOAD FAB */} {activeTab === 'runway' && !showUploadSheet && !showMediaPicker && ( )} {/* MEDIA PICKER SHEET */} {showMediaPicker && (

setShowMediaPicker(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }}>

e.stopPropagation()} style={{ background: CARD, color: DARK, width: '100%', padding: '24px 20px calc(24px + env(safe-area-inset-bottom, 20px))', animation: 'slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1)', maxWidth: 500, margin: '0 auto', borderRadius: '20px 20px 0 0' }}>

New Post

{typeof pickAndUploadVideo === 'function' && ( )}

or choose from gallery

{typeof pickAndUploadVideo === 'function' && ( )}

)} {/* UPLOAD DETAILS SHEET */}

Add details

{pendingMedia?.publicUrl && pendingMedia.type === 'photo' && (

)} {pendingMedia?.publicUrl && pendingMedia.type === 'video' && (

{/* VOICE COMMENTS SHEET */} {activeCommentsLookId && (

{ setActiveCommentsLookId(null); if (audioRef.current) audioRef.current.pause(); setPlayingAudioId(null); }} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }} >

e.stopPropagation()} style={{ background: CARD, color: DARK, width: '100%', height: '75dvh', display: 'flex', flexDirection: 'column', padding: '24px 20px calc(20px + env(safe-area-inset-bottom, 20px))', animation: 'slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1)', maxWidth: 500, margin: '0 auto', borderRadius: '20px 20px 0 0' }}>

Voice Notes

{(() => { const activeLook = (feed || []).find(l => l.id === activeCommentsLookId); const comments = activeLook?.comments || []; if ((comments || []).length === 0) { return

No voice notes yet. Be the first.

; } return (comments || []).map(comment => (

{comment.authorAvatar ? (

) : (

{(comment.authorName || 'A').charAt(0).toUpperCase()}

)}

{comment.authorName}

{new Date(comment.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}

)); })()}

{typeof pickAndUploadAudio !== 'function' && (

Voice notes unavailable on this surface.

)}

)} {/* SAVED-BY SHEET */} {pinnersSheetLookId && (() => { const look = (feed || []).find(l => l.id === pinnersSheetLookId); if (!look) return null; const pinners = look.pinnedBy || []; return (

setPinnersSheetLookId(null)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }} >

Saved by

{(pinners || []).length} {(pinners || []).length === 1 ? 'student' : 'students'}

{(pinners || []).slice().reverse().map((pinnerId, i) => { const m = getMemberById(pinnerId); const name = m?.displayName || 'Unknown'; const initial = name.charAt(0).toUpperCase(); return (

m?.handle && typeof openProfile === 'function' && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 10, background: BG, cursor: m?.handle ? 'pointer' : 'default' }} >

{!m?.avatarUrl && initial}

{name} {isCrownCarrier(m) && ★}

{m?.handle && (

@{m.handle}

)}

); })}

); })()} {/* POSTED OVERLAY */} {missionAccomplished && (

✓

Posted

Your post is live on the feed

)} {/* BOTTOM NAV */}

); }