// ───────────────────────────────────────────────────────────── // ConnectSheet — preview-first. // // Shape: // • Slides up from the bottom over a 0.72 backdrop // • Header: avatar + handle + stage + mutual-forest summary // • Action toolbar: [Message] [+] [🌲] (Message is dominant) // • Body: recent trees, mutual forests // • Quiet "Propose closer" tile at the bottom (hidden at Close) // // Propose flow (the brief's missing piece): // • Tapping the Propose tile cross-fades the body to a confirm prompt // • Confirm cross-fades to a success beat with a Sunlight pulse // • After ~1.6s the sheet dismisses; back in Ladder/Rings, the user // gets a "Proposed" chip until they accept on their side. // ───────────────────────────────────────────────────────────── function ConnectSheet({ user, isOpen, onClose, onPropose, alreadyProposed, onOpenAddToGroup, onOpenInvite }) { // 'preview' → 'confirm' → 'sent' const [phase, setPhase] = React.useState('preview'); // DEBUG: expose setter for screenshot capture React.useEffect(() => { window.__SET_PHASE = setPhase; }, []); // Reset internal phase whenever the sheet opens for a new user. React.useEffect(() => { if (isOpen) setPhase('preview'); }, [isOpen, user?.handle]); if (!user) return null; const targetStage = nextStageUp(user.stage); // null at 'close' const canPropose = !!targetStage && !alreadyProposed; const isClose = user.stage === 'close'; const recents = RECENT_TREES_BY_USER[user.handle] || []; const mutuals = MUTUAL_FORESTS[user.handle] || []; function commitPropose() { setPhase('sent'); onPropose(user.handle, targetStage); // Auto-dismiss after the success beat completes window.setTimeout(() => onClose(), 1700); } return ( <> {/* Backdrop */}
{/* Sheet */}
{/* Drag handle */}
{/* Header — same regardless of phase */} {/* Body — three phases. Cross-fade between them. */}
{/* Preview phase */} setPhase('confirm')}/> {/* Confirm + Sent phases — only mount when a target stage exists, otherwise STAGE_META lookups blow up on Close-stage users. */} {targetStage && ( <> setPhase('preview')} onPropose={commitPropose}/> )}
); } // ─── Building blocks ─────────────────────────────────────── function PhasePane({ visible, children }) { return (
{children}
); } function SheetHeader({ user, mutuals, onClose }) { return (
@{user.handle}
{mutuals.length > 0 ? `${mutuals.length} mutual ${mutuals.length === 1 ? 'forest' : 'forests'} · joined ${user.joined}` : `joined ${user.joined}`}
); } function ActionToolbar({ user, onMessage, onAddToGroup, onInvite }) { return (
); } function Body({ recents, mutuals }) { return (
{/* Recent trees */}
Recent trees
{recents.length === 0 && (
Quiet lately.
)} {recents.map((n, i) => (
{n.forest} · {n.t} {n.private && ( private )}

{n.c}

))}
{/* Mutual forests */} {mutuals.length > 0 && ( <>
Mutual forests
{mutuals.map(f => ( {f} ))}
)}
); } // ─── Propose tile — the calm, low-prominence entry to the propose flow. function ProposeTile({ user, isClose, alreadyProposed, canPropose, targetStage, onTap }) { // Three states: hidden (Close), already-proposed (waiting), available (button) if (isClose) { return (
Already in your inner ring — nothing closer to propose.
); } if (alreadyProposed) { return (
Proposed as {STAGE_META[alreadyProposed].label}
Waiting for {user.handle} to accept on their side.
); } if (!canPropose) return null; return ( ); } // ─── Confirm pane — the missing flow ───────────────────────────── function ConfirmProposePane({ user, targetStage, onCancel, onPropose }) { const meta = STAGE_META[targetStage]; return (
Propose closer
@{user.handle} → {meta.label}
{/* Visual: a tiny ladder showing the proposed step */}
now
→
proposed
{/* The substance — what does this stage actually unlock? */}
What changes at {meta.label}
We'll send a quiet nudge — no notification storm. If they accept, you'll see them rise on the ladder.
); } function whatChangesAt(stage) { return { acquaintance: [ 'Your handle stays public; nothing changes for them yet.', 'Mutual forests show your bond on the member list.', 'You can invite each other to invite-only forests.', ], friend: [ 'Real names exchanged.', 'They can see your profile’s city.', 'You appear in each other’s “Friends” section.', ], close: [ 'Approximate location + new-tree alerts (you choose which).', 'Private forests highlight Close folk first.', 'You become each other’s default DM recipient.', ], }[stage] || []; } // ─── Sent pane — the success beat ──────────────────────────────── function SentPane({ user, targetStage }) { return (
{/* The sunlight pulse — concentric rings expanding outward */}
Sent.
@{user.handle} will see your proposal in their Sunlight. They'll rise to {STAGE_META[targetStage].label} when they accept.
); } window.ConnectSheet = ConnectSheet;