AuraFlow

{filterMode === 'focus' ? '✨ Flow State Active' : '🔮 Neural Planner'}

{/* Members Aura */}

{(activeMembers || []).slice(0, 4).map((m, i) => (

openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid rgba(255,255,255,0.2)', background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : '#333', marginLeft: -10, boxShadow: `0 0 10px ${i % 2 ? '#FF00FF' : '#00FFFF'}`, position: 'relative', zIndex: 4 - i }} > {!m.avatarUrl &&

👤

}

))} {isMultiplayer && ( )}

{/* Focus Toggle */}

{/* The Canvas (List) */}

{(filteredTasks || []).map((task) => { const style = STYLES[task.style] || STYLES.holo; const isExpanded = expandedId === task.id; const isCompleting = completingId === task.id; const isDone = task.status === 'completed'; return (

!isCompleting && toggleExpand(task.id)} style={{ marginBottom: 16, borderRadius: 24, padding: isExpanded ? 24 : 18, background: isDone ? 'rgba(255,255,255,0.03)' : style.background, border: `1px solid ${isDone ? 'rgba(255,255,255,0.1)' : style.border}`, backdropFilter: 'blur(12px)', boxShadow: isExpanded ? style.shadow : '0 4px 12px rgba(0,0,0,0.2)', transform: isExpanded ? 'scale(1.02)' : 'scale(1)', opacity: isDone && filterMode === 'focus' ? 0.3 : (isDone ? 0.6 : 1), transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', animation: isCompleting ? 'explode 0.6s forwards' : 'unfurl 0.3s ease-out', position: 'relative', overflow: 'hidden' }} > {/* Iridescent Sheen Overlay */} {!isDone && (

)}

{isDone ? '✨' : style.icon}

{task.title}

{/* Creator info for multiplayer */} {task.creatorName && isMultiplayer && (

via {task.creatorName}

)}

handleComplete(e, task.id)} style={{ width: 28, height: 28, borderRadius: '50%', border: `2px solid ${isDone ? 'rgba(255,255,255,0.3)' : style.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: isDone ? style.border : 'transparent', transition: 'all 0.2s' }} > {isDone && ✓}

{/* Expanded Details */} {isExpanded && !isDone && (

📅 Today • ⚡ High Priority

)}

); })}

{/* FAB: Add Task */} {/* Add Modal (Bottom Sheet) */} {isAdding && (

setIsAdding(false)} style={{ flex: 1 }} />

Manifest New Form

setNewTaskTitle(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAddTask()} style={{ width: '100%', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.2)', padding: 16, borderRadius: 16, color: '#fff', fontSize: 18, marginBottom: 20, outline: 'none' }} />

{Object.keys(STYLES || {}).map(styleKey => ( ))}

)}

); }