Active Gathers_v2.0

{(gathers || []).map(gather => (

{ setActiveGather(gather); setView('detail'); }} style={{ background: THEME.cardBg, border: '1px solid rgba(255, 255, 255, 0.1)', borderLeft: `4px solid ${getVibeColor(gather.vibe)}`, padding: 16, position: 'relative', cursor: 'pointer', transition: 'transform 0.2s', clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)' }} >

{gather.type} :: {gather.vibe} {new Date(gather.date).toLocaleDateString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' })}

{gather.title}

📍 {gather.location}

{(gather.attendees || []).length > 0 ? (

{(gather.attendees || []).length} operatives present

) : (

Be the first to join

)}

+{gather.manaReward} MANA

))}

)} {view === 'detail' && activeGather && (

STATUS: ACTIVE

{activeGather.title}

📍 {activeGather.location} ⏰ {new Date(activeGather.date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}

{/* STYLIZED MAP PLACEHOLDER */}

UNSW_GRID_LOC_882

{(activeGather.attendees || []).includes(user.id) ? ( ) : ( )}

ATTENDEES_LIST [{(activeGather.attendees || []).length}]

{/* Show generic avatars for sample data attendees */} {(activeGather.attendees || []).map((attId, i) => (

{attId !== user.id && !attId.startsWith('u') ? '👤' : ''}

))} {(activeGather.attendees || []).length === 0 && No data signals detected yet.}

{/* REFLECTIONS SECTION */}

ARCHIVE_DATA // REFLECTIONS

{((reflections || []).filter(r => r.gatherId === activeGather.id) ?? []).length === 0 ? (

No entries in the archive. Be the first to reflect.

) : ( ((reflections || []).filter(r => r.gatherId === activeGather.id) ?? []).map(r => (

"{r.text}"

— {r.userName} • {new Date(r.timestamp).toLocaleDateString()}

)) )}

)} {view === 'create' && (

INITIATE_GATHER_PROTOCOL

OBJECTIVE TITLE setNewGather({...newGather, title: e.target.value})} placeholder="e.g. Midnight Coding Session" style={{ width: '100%', height: 48, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', padding: '0 12px', fontFamily: THEME.font, fontSize: 16, boxSizing: 'border-box' }} />

GRID LOCATION setNewGather({...newGather, location: e.target.value})} placeholder="e.g. Science Lawn" style={{ width: '100%', height: 48, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', padding: '0 12px', fontFamily: THEME.font, fontSize: 16, boxSizing: 'border-box' }} />

INTENTION

VIBE

)}

{/* ⚡ REFLECTION MODAL (Bottom Sheet) */} {showReflectModal && (

ARCHIVE_INPUT setShowReflectModal(false)} style={{ cursor: 'pointer' }}>✕

setReflectionText(e.target.value)}
              placeholder="What was the core insight?"
              autoFocus
              style={{ 
                width: '100%', height: 100, background: '#222', border: '1px solid #444', 
                color: '#fff', padding: 12, fontFamily: THEME.font, fontSize: 16, marginBottom: 16, resize: 'none'
              }}
             />
             <button 
              onClick={handleReflect}
              style={{ 
                width: '100%', height: 48, background: THEME.neonCyan, color: '#000', 
                border: 'none', fontWeight: 'bold', fontFamily: THEME.font
              }}
             >
               UPLOAD TO ARCHIVE
             </button>
          </div>
        </div>
      )}

{/* ⚡ GLOBAL STYLES FOR ANIMATIONS */}
      <style>{`
        @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; transform: translate(-50%, -20px); } 80% { opacity: 1; transform: translate(-50%, -40px); } 100% { opacity: 0; transform: translate(-50%, -60px); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
      `}</style>
    </div>
  );
}</article></body></html>