function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation }) { const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback(function(patch) { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData(Object.assign({}, data || {}, patch)); } }, [isMultiplayer, patchSharedData, setData, data]); var confessions = Array.isArray(appData?.confessions) ? appData.confessions : []; var moderationLog = appData?.moderationLog || {}; var [view, setView] = useState('today'); var [selectedDate, setSelectedDate] = useState(null); var [showCompose, setShowCompose] = useState(false); var [confessionText, setConfessionText] = useState(''); var [wantAnonymous, setWantAnonymous] = useState(true); var [justSubmitted, setJustSubmitted] = useState(false); var [calendarMonth, setCalendarMonth] = useState(new Date()); var [hoveredDate, setHoveredDate] = useState(null); var [animatingIds, setAnimatingIds] = useState([]); var inputRef = useRef(null); var todayStr = new Date().toISOString().slice(0, 10); var DEMO_CONFESSIONS = [ { id: 'demo-1', text: 'To that asian girl sitting in front of me in MIS301, you are just so beautiful. maybe one day I\'ll muster up the courage to say hi.', date: todayStr, timestamp: Date.now() - 3600000, anonymous: true, isDemo: true }, { id: 'demo-2', text: 'To the brown boy that walked me back to my apt last night, I thought you were really cute but couldn\'t say it. Pls see this', date: todayStr, timestamp: Date.now() - 7200000, anonymous: true, isDemo: true }, { id: 'demo-3', text: 'To the girl with the sunflower tattoo at Cactus Cafe last Thursday\u2014you smiled at me and I\'ve been thinking about it ever since. I wish I had said something.', date: todayStr, timestamp: Date.now() - 10800000, anonymous: true, isDemo: true }, { id: 'demo-4', text: 'To my lab partner in CHE302\u2014I look forward to every Tuesday and Thursday because of you. You probably don\'t even notice but you make my whole week better.', date: todayStr, timestamp: Date.now() - 14400000, anonymous: false, authorName: 'a quiet admirer', isDemo: true }, { id: 'demo-5', text: 'To the guy who held the door at PCL and said \"you look like you need a hug\"\u2014I did. Thank you. I wish I could find you again.', date: todayStr, timestamp: Date.now() - 18000000, anonymous: true, isDemo: true } ]; var allConfessions = (confessions || []).length > 0 ? confessions : DEMO_CONFESSIONS; var todayConfessions = useMemo(function() { return (allConfessions || []).filter(function(c) { return c.date === todayStr; }).sort(function(a, b) { return b.timestamp - a.timestamp; }); }, [allConfessions, todayStr]); var getConfessionsForDate = useCallback(function(dateStr) { return (allConfessions || []).filter(function(c) { return c.date === dateStr; }).sort(function(a, b) { return b.timestamp - a.timestamp; }); }, [allConfessions]); var getCountForDate = useCallback(function(dateStr) { return (allConfessions || []).filter(function(c) { return c.date === dateStr; }).length; }, [allConfessions]); var todaySubmissions = useMemo(function() { return (confessions || []).filter(function(c) { return c.date === todayStr && c.authorId === user?.id && !c.isDemo; }).length; }, [confessions, todayStr, user]); var remainingToday = 3 - todaySubmissions; var handleSubmit = function() { if (!confessionText.trim() || remainingToday <= 0) return; var newConfession = { id: 'c-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7), text: confessionText.trim(), date: todayStr, timestamp: Date.now(), anonymous: wantAnonymous, authorName: wantAnonymous ? null : (user?.name || 'Anonymous'), authorId: user?.id || 'unknown', isDemo: false, _user: { id: user?.id, displayName: user?.displayName || user?.name, handle: user?.handle, profileImageUrl: user?.profileImageUrl || user?.avatarUrl }, _timestamp: Date.now() }; var withoutDemo = (confessions || []).filter(function(c) { return !c.isDemo; }); var updated = [newConfession].concat(withoutDemo); writePatch({ confessions: updated }); setAnimatingIds(function(prev) { return (prev || []).concat([newConfession.id]); }); setJustSubmitted(true); setConfessionText(''); setTimeout(function() { setJustSubmitted(false); setShowCompose(false); setAnimatingIds(function(prev) { return (prev || []).filter(function(x) { return x !== newConfession.id; }); }); }, 2000); if (inputRef.current) inputRef.current.blur(); runModeration(updated); }; var runModeration = function(entries) { if (typeof ai !== 'function') return; var todayEntries = (entries || []).filter(function(c) { return c.date === todayStr && !c.isDemo; }); if ((todayEntries || []).length === 0) return; var texts = (todayEntries || []).map(function(c, i) { return (i + 1) + '. ' + c.text; }).join('\n'); ai({ intent: 'json', systemPrompt: 'You moderate a missed connections board for UT Austin. Review each submission and flag any that are NOT obviously a missed connection (e.g., spam, harassment, threats, ads). Return JSON: { "flagged": [array of 1-based indices that should be reviewed] }', messages: [{ role: 'user', content: 'Review these submissions:\n' + texts }], responseSchema: { type: 'object', properties: { flagged: { type: 'array', items: { type: 'number' } } }, required: ['flagged'] } }).then(function(result) { if (result?.json?.flagged?.length > 0) { var newLog = Object.assign({}, moderationLog); newLog[todayStr] = result.json.flagged; writePatch({ moderationLog: newLog }); } }).catch(function() {}); }; var calendarDays = useMemo(function() { var year = calendarMonth.getFullYear(); var month = calendarMonth.getMonth(); var firstDay = new Date(year, month, 1).getDay(); var daysInMonth = new Date(year, month + 1, 0).getDate(); var days = []; for (var i = 0; i < firstDay; i++) { days.push(null); } for (var d = 1; d <= daysInMonth; d++) { days.push(d); } return days; }, [calendarMonth]); var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; var dayLabels = ['Su','Mo','Tu','We','Th','Fr','Sa']; var formatTime = function(ts) { var d = new Date(ts); var h = d.getHours(); var m = d.getMinutes(); var ampm = h >= 12 ? 'PM' : 'AM'; h = h % 12 || 12; return h + ':' + (m < 10 ? '0' : '') + m + ' ' + ampm; }; var formatDateDisplay = function(dateStr) { if (!dateStr) return ''; var parts = dateStr.split('-'); var d = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2])); return monthNames[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear(); }; var colors = { burnt: '#BF5700', dark: '#333F48', cream: '#FFF8F0', warmWhite: '#FFFDFB', sage: '#9CAF88', softSage: '#D4DFC8', blush: '#F2D4C4', lightBlush: '#FBE8DD', parchment: '#F5F0E8', border: '#E8DCC4', muted: '#8B7E6A' }; var font = "'Georgia', 'Lora', serif"; var sansFont = "'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif"; var renderConfessionCard = function(c, index) { var isNew = (animatingIds || []).indexOf(c.id) !== -1; return React.createElement('div', { key: c.id, style: { background: colors.warmWhite, borderRadius: 16, padding: 20, marginBottom: 14, border: '1px solid ' + colors.border, boxShadow: '0 2px 12px rgba(191,87,0,0.06)', opacity: isNew ? 0 : 1, transform: isNew ? 'scale(0.9) translateY(20px)' : 'scale(1) translateY(0)', transition: 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)', animationName: isNew ? '' : (index < 5 ? 'fadeInUp' : 'none'), position: 'relative' } }, c.isDemo ? React.createElement('span', { style: { position: 'absolute', top: 10, right: 12, fontSize: 10, color: colors.muted, background: colors.parchment, padding: '2px 8px', borderRadius: 8, fontFamily: sansFont } }, 'Demo') : null, React.createElement('p', { style: { fontFamily: font, fontSize: 16, lineHeight: 1.7, color: colors.dark, margin: 0, fontStyle: 'italic' } }, '\u201C' + c.text + '\u201D'), React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 } }, React.createElement('span', { style: { fontFamily: sansFont, fontSize: 12, color: colors.muted } }, formatTime(c.timestamp)), c.anonymous ? React.createElement('span', { style: { fontFamily: sansFont, fontSize: 12, color: colors.sage, fontWeight: 500 } }, '\uD83C\uDF3F anonymous') : React.createElement('button', { onClick: function(e) { e.stopPropagation(); var handle = c._user?.handle; if (handle && typeof openProfile === 'function') { openProfile(handle); } }, style: { background: 'none', border: 'none', padding: 0, margin: 0, cursor: c._user?.handle ? 'pointer' : 'default', fontFamily: sansFont, fontSize: 12, color: colors.burnt, fontWeight: 500, textDecoration: c._user?.handle ? 'underline' : 'none', textDecorationStyle: 'dotted', display: 'flex', alignItems: 'center', gap: 4 } }, c._user?.profileImageUrl ? React.createElement('img', { src: c._user.profileImageUrl, alt: '', style: { width: 16, height: 16, borderRadius: 8, objectFit: 'cover' } }) : null, '\uD83C\uDF38 ' + (c._user?.displayName || c.authorName || 'someone brave') ) ) ); }; var selectedConfessions = selectedDate ? getConfessionsForDate(selectedDate) : []; var mainContainer = { minHeight: '100dvh', display: 'flex', flexDirection: 'column', paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)', maxWidth: 480, margin: '0 auto', width: '100%', boxSizing: 'border-box', background: 'linear-gradient(180deg, ' + colors.cream + ' 0%, ' + colors.warmWhite + ' 100%)', fontFamily: sansFont }; var headerSection = React.createElement('header', { style: { paddingTop: 8, paddingBottom: 16, flexShrink: 0 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 } }, React.createElement('img', { src: 'https://a1zap-ugc-prod.s3.us-east-1.amazonaws.com/zap-images/1761139543597-UTLogo_CourtesyofUTAustin.png', alt: 'UT Austin', style: { width: 32, height: 32, objectFit: 'contain' }, onError: function(e) { e.currentTarget.style.display = 'none'; } }), React.createElement('div', null, React.createElement('h1', { style: { fontSize: 22, fontWeight: 700, margin: 0, fontFamily: font, color: colors.dark } }, 'Missed Confessions'), React.createElement('p', { style: { fontSize: 12, color: colors.muted, margin: 0, fontFamily: sansFont } }, 'UT Austin \u2022 anonymous whispers of the heart') ) ), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 14 } }, React.createElement('button', { onClick: function() { setView('today'); setSelectedDate(null); }, style: { flex: 1, minHeight: 40, borderRadius: 20, border: view === 'today' ? '2px solid ' + colors.burnt : '1.5px solid ' + colors.border, background: view === 'today' ? colors.lightBlush : 'transparent', color: view === 'today' ? colors.burnt : colors.muted, fontFamily: sansFont, fontSize: 14, fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s' } }, "\uD83C\uDF3B Today's Whispers"), React.createElement('button', { onClick: function() { setView('archive'); }, style: { flex: 1, minHeight: 40, borderRadius: 20, border: view === 'archive' ? '2px solid ' + colors.burnt : '1.5px solid ' + colors.border, background: view === 'archive' ? colors.lightBlush : 'transparent', color: view === 'archive' ? colors.burnt : colors.muted, fontFamily: sansFont, fontSize: 14, fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s' } }, '\uD83D\uDCC5 Archive'), React.createElement('button', { onClick: function() { if (typeof share === 'function') share(); }, style: { minHeight: 40, minWidth: 40, borderRadius: 20, border: '1.5px solid ' + colors.border, background: 'transparent', color: colors.muted, fontSize: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '\uD83D\uDD17') ) ); var todayFeed = React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 80 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 } }, React.createElement('h2', { style: { fontSize: 16, fontWeight: 600, color: colors.dark, margin: 0, fontFamily: font } }, formatDateDisplay(todayStr)), React.createElement('span', { style: { fontSize: 13, color: colors.sage, fontFamily: sansFont } }, (todayConfessions || []).length + ' whisper' + ((todayConfessions || []).length !== 1 ? 's' : '')) ), (todayConfessions || []).length === 0 ? React.createElement('div', { style: { textAlign: 'center', padding: 60, color: colors.muted } }, React.createElement('div', { style: { fontSize: 48, marginBottom: 12 } }, '\uD83C\uDF3F'), React.createElement('p', { style: { fontFamily: font, fontStyle: 'italic', fontSize: 16 } }, 'No whispers yet today...'), React.createElement('p', { style: { fontSize: 13 } }, 'Be the first to share') ) : (todayConfessions || []).map(function(c, i) { return renderConfessionCard(c, i); }) ); var archiveView = React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 80 } }, selectedDate ? React.createElement('div', null, React.createElement('button', { onClick: function() { setSelectedDate(null); }, style: { background: 'none', border: 'none', color: colors.burnt, fontFamily: sansFont, fontSize: 14, fontWeight: 600, cursor: 'pointer', marginBottom: 12, padding: 0 } }, '\u2190 Back to calendar'), React.createElement('h2', { style: { fontSize: 16, fontWeight: 600, color: colors.dark, margin: '0 0 14px 0', fontFamily: font } }, formatDateDisplay(selectedDate) + ' \u2022 ' + (selectedConfessions || []).length + ' whisper' + ((selectedConfessions || []).length !== 1 ? 's' : '')), (selectedConfessions || []).length === 0 ? React.createElement('div', { style: { textAlign: 'center', padding: 40, color: colors.muted } }, React.createElement('div', { style: { fontSize: 40 } }, '\uD83C\uDF42'), React.createElement('p', { style: { fontFamily: font, fontStyle: 'italic' } }, 'No whispers on this day') ) : (selectedConfessions || []).map(function(c, i) { return renderConfessionCard(c, i); }) ) : React.createElement('div', null, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } }, React.createElement('button', { onClick: function() { setCalendarMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() - 1, 1)); }, style: { background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', color: colors.dark, minWidth: 44, minHeight: 44, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '\u2039'), React.createElement('h3', { style: { fontFamily: font, fontSize: 18, fontWeight: 600, color: colors.dark, margin: 0 } }, monthNames[calendarMonth.getMonth()] + ' ' + calendarMonth.getFullYear()), React.createElement('button', { onClick: function() { setCalendarMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1)); }, style: { background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', color: colors.dark, minWidth: 44, minHeight: 44, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '\u203A') ), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 8 } }, (dayLabels || []).map(function(d) { return React.createElement('div', { key: d, style: { textAlign: 'center', fontSize: 12, color: colors.muted, fontWeight: 600, padding: 6 } }, d); }) ), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 } }, (calendarDays || []).map(function(day, idx) { if (day === null) return React.createElement('div', { key: 'empty-' + idx }); var yr = calendarMonth.getFullYear(); var mo = calendarMonth.getMonth(); var dateStr = yr + '-' + String(mo + 1).padStart(2, '0') + '-' + String(day).padStart(2, '0'); var count = getCountForDate(dateStr); var isToday = dateStr === todayStr; var isHovered = hoveredDate === dateStr; var hasEntries = count > 0; return React.createElement('button', { key: dateStr, onClick: function() { setSelectedDate(dateStr); }, onPointerEnter: function() { setHoveredDate(dateStr); }, onPointerLeave: function() { setHoveredDate(null); }, style: { minHeight: 48, borderRadius: 12, border: isToday ? '2px solid ' + colors.burnt : '1px solid ' + (hasEntries ? colors.blush : 'transparent'), background: isHovered && hasEntries ? colors.lightBlush : (hasEntries ? colors.cream : 'transparent'), cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, transition: 'all 0.25s ease', transform: isHovered ? 'scale(1.08)' : 'scale(1)' } }, React.createElement('span', { style: { fontSize: 14, fontWeight: isToday ? 700 : 500, color: isHovered && hasEntries ? colors.burnt : colors.dark } }, day), hasEntries ? React.createElement('span', { style: { fontSize: 9, color: colors.burnt, fontWeight: 600, opacity: isHovered ? 1 : 0.7, transition: 'opacity 0.2s' } }, count + ' \uD83C\uDF3F') : null ); }) ) ) ); var composeOverlay = showCompose ? React.createElement('div', { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(51,63,72,0.4)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }, onClick: function(e) { if (e.target === e.currentTarget) setShowCompose(false); } }, React.createElement('div', { style: { background: colors.warmWhite, borderTopLeftRadius: 24, borderTopRightRadius: 24, width: '100%', maxWidth: 480, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', paddingLeft: 20, paddingRight: 20, boxShadow: '0 -8px 40px rgba(191,87,0,0.12)', transform: 'translateY(0)', transition: 'transform 0.3s ease-out' } }, React.createElement('div', { style: { width: 40, height: 5, background: colors.border, borderRadius: 3, margin: '0 auto 20px' } }), justSubmitted ? React.createElement('div', { style: { textAlign: 'center', padding: 40 } }, React.createElement('div', { style: { fontSize: 56, marginBottom: 16 } }, '\uD83C\uDF43\u2728'), React.createElement('h3', { style: { fontFamily: font, fontSize: 20, color: colors.burnt, marginBottom: 8 } }, 'Whispered into the wind'), React.createElement('p', { style: { fontFamily: sansFont, fontSize: 14, color: colors.muted } }, 'Your confession has been shared anonymously with campus') ) : React.createElement('div', null, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } }, React.createElement('h3', { style: { fontFamily: font, fontSize: 20, fontWeight: 600, color: colors.dark, margin: 0 } }, 'Your Confession'), React.createElement('span', { style: { fontFamily: sansFont, fontSize: 13, color: remainingToday > 0 ? colors.sage : '#d44', fontWeight: 600 } }, remainingToday + '/3 left today') ), React.createElement('textarea', { ref: inputRef, value: confessionText, onChange: function(e) { setConfessionText((e.target.value || []).slice(0, 500)); }, placeholder: 'To the person who...\n\nShare your missed connection, your unspoken words, your quiet confession...', style: { width: '100%', minHeight: 140, fontSize: 16, fontFamily: font, fontStyle: 'italic', padding: 16, borderRadius: 14, border: '1.5px solid ' + colors.border, background: colors.parchment, color: colors.dark, resize: 'vertical', lineHeight: 1.7, boxSizing: 'border-box', outline: 'none' } }), React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, marginBottom: 16 } }, React.createElement('span', { style: { fontSize: 12, color: colors.muted } }, (confessionText || []).length + '/500'), React.createElement('button', { onClick: function() { setWantAnonymous(!wantAnonymous); }, style: { background: wantAnonymous ? colors.softSage : colors.lightBlush, border: '1.5px solid ' + (wantAnonymous ? colors.sage : colors.burnt), borderRadius: 20, padding: '6px 14px', fontSize: 13, fontFamily: sansFont, fontWeight: 600, color: wantAnonymous ? '#5a7a4a' : colors.burnt, cursor: 'pointer', transition: 'all 0.2s' } }, wantAnonymous ? '\uD83C\uDF3F Anonymous' : '\uD83C\uDF38 Signed as ' + (user?.name || 'you')) ), React.createElement('button', { onClick: handleSubmit, disabled: !confessionText.trim() || remainingToday <= 0, style: { width: '100%', minHeight: 52, borderRadius: 16, border: 'none', fontSize: 17, fontWeight: 700, fontFamily: sansFont, background: (!confessionText.trim() || remainingToday <= 0) ? colors.border : 'linear-gradient(135deg, ' + colors.burnt + ', #D4722A)', color: (!confessionText.trim() || remainingToday <= 0) ? colors.muted : '#fff', cursor: (!confessionText.trim() || remainingToday <= 0) ? 'not-allowed' : 'pointer', boxShadow: (!confessionText.trim() || remainingToday <= 0) ? 'none' : '0 4px 16px rgba(191,87,0,0.3)', transition: 'all 0.2s' } }, '\uD83C\uDF43 Whisper into the Wind') ) ) ) : null; var fabButton = !showCompose ? React.createElement('button', { onClick: function() { setShowCompose(true); }, style: { position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', right: 'max(env(safe-area-inset-right, 0px), 20px)', width: 60, height: 60, borderRadius: 30, border: 'none', background: 'linear-gradient(135deg, ' + colors.burnt + ', #D4722A)', color: '#fff', fontSize: 28, cursor: 'pointer', boxShadow: '0 6px 24px rgba(191,87,0,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'transform 0.2s', zIndex: 50 }, onPointerDown: function(e) { e.currentTarget.style.transform = 'scale(0.92)'; }, onPointerUp: function(e) { e.currentTarget.style.transform = 'scale(1)'; }, onPointerLeave: function(e) { e.currentTarget.style.transform = 'scale(1)'; } }, '\u270F\uFE0F') : null; var memberList = isMultiplayer && members?.length > 0 ? members : [{ id: user?.id, displayName: user?.displayName || user?.name, handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; var recentAuthors = useMemo(function() { var seen = {}; var authors = []; var sorted = (allConfessions || []).slice().sort(function(a, b) { return (b._timestamp || b.timestamp || 0) - (a._timestamp || a.timestamp || 0); }); for (var i = 0; i < (sorted || []).length; i++) { var c = sorted[i]; if (c.anonymous || !c._user?.id || seen[c._user.id]) continue; seen[c._user.id] = true; authors.push(c._user); if ((authors || []).length >= 8) break; } return authors; }, [allConfessions]); var communityBar = React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '10px 0', marginBottom: 6, borderBottom: '1px solid ' + colors.border, flexShrink: 0, overflowX: 'auto', WebkitOverflowScrolling: 'touch' } }, React.createElement('span', { style: { fontFamily: sansFont, fontSize: 12, color: colors.muted, whiteSpace: 'nowrap', marginRight: 4 } }, '\uD83C\uDF3B Community'), (memberList || []).slice(0, 12).map(function(m) { var isActive = memberActivity?.[m.id]?.lastActiveAt && (Date.now() - memberActivity[m.id].lastActiveAt < 300000); return React.createElement('button', { key: m.id, onClick: function() { if (m.handle && typeof openProfile === 'function') openProfile(m.handle); }, title: m.displayName || m.name || 'Member', style: { background: 'none', border: 'none', padding: 0, cursor: m.handle ? 'pointer' : 'default', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, m.avatarUrl ? React.createElement('img', { src: m.avatarUrl, alt: '', style: { width: 30, height: 30, borderRadius: 15, objectFit: 'cover', border: '2px solid ' + (isActive ? colors.sage : colors.border) } }) : React.createElement('div', { style: { width: 30, height: 30, borderRadius: 15, background: colors.softSage, border: '2px solid ' + (isActive ? colors.sage : colors.border), display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: colors.dark, fontFamily: sansFont, fontWeight: 600 } }, (m.displayName || m.name || '?').charAt(0).toUpperCase()), isActive ? React.createElement('div', { style: { position: 'absolute', bottom: -1, right: -1, width: 8, height: 8, borderRadius: 4, background: '#6abf57', border: '1.5px solid ' + colors.warmWhite } }) : null ); }), (recentAuthors || []).length > 0 && (recentAuthors || []).filter(function(a) { return !(memberList || []).some(function(m) { return m.id === a.id; }); }).length > 0 ? React.createElement('div', { style: { width: 1, height: 20, background: colors.border, flexShrink: 0, margin: '0 2px' } }) : null, (recentAuthors || []).filter(function(a) { return !(memberList || []).some(function(m) { return m.id === a.id; }); }).slice(0, 6).map(function(a) { return React.createElement('button', { key: 'author-' + a.id, onClick: function() { if (a.handle && typeof openProfile === 'function') openProfile(a.handle); }, title: a.displayName || 'Contributor', style: { background: 'none', border: 'none', padding: 0, cursor: a.handle ? 'pointer' : 'default', flexShrink: 0 } }, a.profileImageUrl ? React.createElement('img', { src: a.profileImageUrl, alt: '', style: { width: 28, height: 28, borderRadius: 14, objectFit: 'cover', border: '2px solid ' + colors.blush } }) : React.createElement('div', { style: { width: 28, height: 28, borderRadius: 14, background: colors.lightBlush, border: '2px solid ' + colors.blush, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: colors.burnt, fontFamily: sansFont, fontWeight: 600 } }, (a.displayName || '?').charAt(0).toUpperCase()) ); }) ); return React.createElement('div', { style: mainContainer }, headerSection, communityBar, view === 'today' ? todayFeed : archiveView, fabButton, composeOverlay ); }