COMMON GROUND

📤

{/* CONTENT AREA */}

{/* ACTIVE MOMENT VIEW */} {activeMomentId ? (

{(moments || []).filter(m => m.id === activeMomentId).map(moment => (

{moment.title.split(' ').pop()}

{moment.title}

{moment.desc}

{(moment.contributions || []).map(c => (

{c.userAvatar ?

: c.userName[0]}

{c.userName}

{c.text}

{(c.reactions || []).map((r, i) => {r})}

))}

{/* INPUT AREA */}

setInputText(e.target.value)} placeholder="Add your thought..." style={{ flex: 1, height: 44, borderRadius: 22, border: '1px solid #444', background: '#1a1a1a', color: '#fff', padding: '0 16px', fontSize: 16 }} />

))}

) : activeTab === 'card' ? ( // LIVING CARD VIEW

{!user.avatarUrl && '👤'}

{user.name || 'Connector'}

@{user.handle || 'guest'} • UNSW

{(myCard.prompts || []).map(prompt => (

{ setEditingPromptId(prompt.id); setTempPromptValue(prompt.answer); }} style={{ cursor: 'pointer' }} >

{prompt.question} ✎

{prompt.answer || Tap to answer...}

))}

{myCard.glowActive && (

✨ Connector's Glow Active: You're bringing people together!

)}

"Depth over noise. Play over pressure."

) : ( // MOMENTS HUB VIEW

Happening Now

{(moments || []).map(moment => (

setActiveMomentId(moment.id)} style={{ ...styles.card, margin: 0, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderLeft: '4px solid #FFD700' }} >

{moment.title}

{moment.participants} Connectors active

→

))}

)}

{/* EDIT MODAL - BOTTOM SHEET */} {editingPromptId && (

Update your Living Card setEditingPromptId(null)} style={{ fontSize: 20, cursor: 'pointer' }}>✕

setTempPromptValue(e.target.value)}
              autoFocus
              style={{ 
                width: '100%', height: 100, background: '#111', border: '1px solid #333', 
                borderRadius: 12, color: '#fff', padding: 12, fontSize: 16, fontFamily: 'serif',
                marginBottom: 16, resize: 'none'
              }}
            />
            <button 
              onClick={savePrompt}
              style={{ 
                width: '100%', height: 50, borderRadius: 12, background: '#FFD700', 
                color: '#000', fontWeight: 'bold', border: 'none', fontSize: 16
              }}
            >
              Update Snapshot ✨
            </button>
          </div>
        </div>
      )}

{/* BOTTOM NAV */}
      {!activeMomentId && !editingPromptId && (
        <nav style={{ 
          display: 'flex', borderTop: '1px solid #222', background: '#000',
          paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 10px)',
          paddingTop: 10
        }}>
          <div 
            onClick={() => setActiveTab('card')} 
            style={{ flex: 1, textAlign: 'center', opacity: activeTab === 'card' ? 1 : 0.5, cursor: 'pointer' }}
          >
            <div style={{ fontSize: 24, marginBottom: 4 }}>📇</div>
            <div style={{ fontSize: 11, letterSpacing: 1 }}>YOU</div>
          </div>
          <div 
            onClick={() => setActiveTab('moments')} 
            style={{ flex: 1, textAlign: 'center', opacity: activeTab === 'moments' ? 1 : 0.5, cursor: 'pointer' }}
          >
            <div style={{ fontSize: 24, marginBottom: 4 }}>🎇</div>
            <div style={{ fontSize: 11, letterSpacing: 1 }}>SHARED</div>
          </div>
        </nav>
      )}
    </div>
  );
}</article></body></html>