{/* Header */}

Orbit

{/* Main Content: Orbits Grid */}

Your active circles

{(appData?.orbits ?? []).map(orbit => { const orbitSignals = getSignals(orbit.id); const latestSignal = orbitSignals[0]; const color = getThemeColor(orbit.theme); return (

{ setActiveOrbitId(orbit.id); setView('orbit'); }} style={{ ...styles.glassCard, padding: 24, cursor: 'pointer', position: 'relative', overflow: 'hidden', transition: 'transform 0.2s', borderLeft: `6px solid ${color}` }} >

{orbit.name}

{orbit.description}

{orbit.emoji}

{/* Latest Signal Preview */} {latestSignal ? (

{!latestSignal._user?.profileImageUrl && latestSignal._user?.displayName?.[0]}

{latestSignal._user?.displayName} • {timeAgo(latestSignal._timestamp)}

{latestSignal.emoji} {latestSignal.text}

) : (

No signals yet. Tap to start.

)} {/* Ambient Particles Decor */}

); })} {/* Create Prompt */}

setView('create-orbit')} style={{ border: '2px dashed rgba(255,255,255,0.2)', borderRadius: 24, padding: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'rgba(255,255,255,0.5)', cursor: 'pointer', marginTop: 8 }} > ✨ Spin up a new Orbit

); } // VIEW: ORBIT DETAIL if (view === 'orbit') { const orbit = getOrbit(activeOrbitId); const signals = getSignals(activeOrbitId); const color = getThemeColor(orbit?.theme); return (

{/* Header */}

{orbit?.emoji} {orbit?.name}

{(signals || []).length} signals • {orbit?.description}

{/* Signals Feed */}

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

📡

No signals yet.
Be the first to tap in.

) : ( (signals || []).map((signal, idx) => (

{/* Avatar */}

openProfile(signal._user?.handle)} style={{ width: 40, height: 40, borderRadius: '50%', flexShrink: 0, background: signal._user?.profileImageUrl ? `url(${signal._user.profileImageUrl})` : color, backgroundSize: 'cover', border: `2px solid ${color}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 'bold', color: '#000', marginTop: 4, cursor: 'pointer' }} > {!signal._user?.profileImageUrl && signal._user?.displayName?.[0]}

{/* Content Bubble */}

{signal._user?.displayName} {timeAgo(signal._timestamp)}

setIsReactingTo(signal.id === isReactingTo ? null : signal.id)} style={{ background: 'rgba(255,255,255,0.1)', padding: '12px 16px', borderRadius: '4px 20px 20px 20px', border: '1px solid rgba(255,255,255,0.05)', fontSize: 16, lineHeight: 1.4, display: 'inline-block', maxWidth: '100%', cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }} > {signal.emoji} {signal.text}

{/* Reactions */}

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

{r.emoji}

))}

{/* Reaction Picker Popover */} {isReactingTo === signal.id && (

{['❤️', '🔥', '👏', '😂', '😮', '👀'].map(em => ( ))}

)}

)) )}

{/* Spacer for input */}

{/* Composer Input */}

setNewSignalText(e.target.value)} placeholder="What's the signal?" style={{ width: '100%', height: 48, borderRadius: 24, border: 'none', padding: '0 50px 0 20px', background: 'rgba(255,255,255,0.1)', color: '#fff', fontSize: 16, outline: 'none', backdropFilter: 'blur(5px)' }} onKeyDown={(e) => e.key === 'Enter' && handleSendSignal()} />

); } // VIEW: CREATE ORBIT if (view === 'create-orbit') { return (

Spin up an Orbit

Create a space for a project, a party, or just a vibe.

{newOrbitEmoji}

ORBIT NAME setNewOrbitName(e.target.value)} placeholder="e.g. Friday Night Lights" autoFocus style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: '2px solid rgba(255,255,255,0.2)', padding: '12px 0', fontSize: 24, color: '#fff', outline: 'none', borderRadius: 0 }} />

CHOOSE AN ICON

{['🪐', '🍻', '🧠', '🌊', '🎬', '🏀', '🍕', '🎤'].map(em => ( ))}

); } return null; }