{/* Main App Window */}

{/* Title Bar */}

💾 AuraFlow_v1.0.exe

□

{/* Toolbar */}

{!isConnected ? ( 🔗 {isConnecting ? 'Connecting...' : 'Connect Canvas'} ) : (

✅ CANVAS CONNECTED

)} share && share()}> 🌐 Share

{/* Network Area / Multiplayer Info */} {isMultiplayer && (

Network: {(memberList || []).map((m, i) => (

m.handle && openProfile && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: '4px', background: colors.light, padding: '2px 6px', border: `1px solid ${colors.dark}`, cursor: m.handle ? 'pointer' : 'default' }} > {m.avatarUrl ? '👤' : '🧑‍💻'} {m.displayName}

))}

)} {/* Filter Tabs */}

{['all', 'assignments', 'announcements', 'spotlights'].map(tab => (

setFilter(tab)} style={{ padding: '4px 8px', background: filter === tab ? colors.bg : '#D0D0D0', borderTop: `2px solid ${filter === tab ? colors.light : colors.light}`, borderLeft: `2px solid ${filter === tab ? colors.light : colors.light}`, borderRight: `2px solid ${colors.dark}`, borderBottom: filter === tab ? 'none' : `2px solid ${colors.dark}`, borderBottomWidth: filter === tab ? 0 : 2, marginTop: filter === tab ? 0 : 2, zIndex: filter === tab ? 2 : 1, position: 'relative', cursor: 'pointer', textTransform: 'capitalize', fontSize: 14 }} > {tab === 'spotlights' && ⭐} {tab}

))}

{/* Main Content Area */}

{/* Connecting Modal Overlay */} {isConnecting && (

Connecting...

🖨️

Dialing Canvas Server...

)} {/* Success Message Overlay */} {showSuccess && (

{blink ? 'DATA SYNCED!' : ' '}

Live timeline established.

)} {/* Timeline List */}

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

No items found in this view.

) : ( {(filteredItems || []).map(item => { const isSpotlighted = !!spotlights[item.id]; const isExpanded = expandedId === item.id; return ( setExpandedId(isExpanded ? null : item.id)} style={{ cursor: 'pointer', borderBottom: `1px solid #E0E0E0`, background: isSpotlighted ? (blink ? '#FFFFCC' : '#FFEE99') : (isExpanded ? '#E8E8FF' : 'transparent'), color: isExpanded ? colors.highlight : colors.text }} > {/* Expanded Details Row */} {isExpanded && ( )} ); })}

★	Type	Course	Item	Date
toggleSpotlight(item, e)}> ⭐	{item.type === 'assignment' ? '📝' : '📢'}	{item.course}	{item.isDemo && DEMO} {item.title}	{formatDate(item.date)}
Details: {item.details} {isSpotlighted && spotlights[item.id] && ( ℹ️ Spotlighted by: {spotlights[item.id]._user?.displayName \|\| 'Unknown'} )}

)}

{/* Status Bar */}

{(filteredItems || []).length} objects found Mode: {isMultiplayer ? 'Network' : 'Local'}

); }

{blink ? 'DATA SYNCED!' : ' '}

Details: