Ascend

{progressPercent}% realized

{/* Member Pile */}

{(memberList || []).slice(0, 3).map((m, i) => (

openProfile(m.handle)} style={{ width: 28, height: 28, borderRadius: '50%', background: m.avatarUrl ? `url(${m.avatarUrl})` : '#E5E5E5', backgroundSize: 'cover', border: '2px solid #FAFAF9', marginLeft: i > 0 ? -10 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}> {!m.avatarUrl && (m.displayName?.[0] || 'U')}

))} {isMultiplayer && ( )}

{/* GOALS LIST */}

{(goals || []).map(goal => { const isExpanded = expandedId === goal.id; const total = goal.microGoals?.length || 0; const done = goal.microGoals?.filter(m => m.completed)?.length || 0; const isDone = total > 0 && total === done; const isCelebrating = celebratingId === goal.id; return (

{/* Celebration Ribbon */}

{/* Goal Header */}

setExpandedId(isExpanded ? null : goal.id)} style={{ cursor: 'pointer' }} >

{goal.title}

{isDone ? '🌿' : '🌱'}

{/* Progress Line */}

{done}/{total} steps {isExpanded ? 'Collapse' : 'View details'}

{/* Micro Goals (Expandable) */}

{(goal.microGoals || []).map(micro => (

{ e.stopPropagation(); toggleMicroGoal(goal.id, micro.id); }} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 12, borderRadius: 12, backgroundColor: micro.completed ? '#F7F9F6' : 'transparent', transition: 'background-color 0.3s', cursor: 'pointer' }} > {/* Custom Checkbox */}

{micro.completed && '✓'}

{micro.title}

{/* Completer Avatar */} {micro.completed && micro.completedBy && (

)}

))}

{/* Celebration Overlay for Card */} {isCelebrating && (

✨

)}

); })}

{/* FAB - Add Goal */} {/* ADD GOAL MODAL */} {isAdding && (

setIsAdding(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.2)', backdropFilter: 'blur(4px)' }} />

New Aspiration

setNewGoalTitle(e.target.value)} style={{ width: '100%', border: 'none', background: 'transparent', fontSize: 24, fontWeight: 300, marginBottom: 24, outline: 'none', color: '#3C3C3C' }} />

First steps (Micro-goals) {(newMicroGoals || []).map((mg, idx) => (

• { const updated = [...newMicroGoals]; updated[idx] = e.target.value; setNewMicroGoals(updated); }} placeholder={idx === 0 ? "e.g. Read 5 pages" : "Next step..."} style={{ flex: 1, padding: 12, borderRadius: 12, border: '1px solid #EAEAEA', fontSize: 16, outline: 'none', backgroundColor: '#FFF' }} />

))}

)}

); }