// ─────────────────────────────────────────────────────────────
// SecondarySheet — chrome used by both Add-to-Group and Invite-to-Forest.
//
// Slides up over the primary ConnectSheet (which stays mounted in the
// background, so on dismiss we return there). Adds a back arrow that
// returns to the preview without closing the whole stack.
// ─────────────────────────────────────────────────────────────
function SecondarySheet({ title, subtitle, onBack, onClose, isOpen, children, footer }) {
return (
<>
{/* Dimmer above the primary sheet */}
{/* Drag handle */}
{/* Header */}
{title}
{subtitle && (
{subtitle}
)}
{/* Body — scrolls */}
{children}
{/* Footer — sticky action */}
{footer && (
{footer}
)}
);
}
// ─────────────────────────────────────────────────────────────
// Add to a group — pick an existing group or start a new one.
// ─────────────────────────────────────────────────────────────
function AddToGroupSheet({ user, isOpen, onBack, onClose, onConfirm }) {
const [selectedId, setSelectedId] = React.useState(null);
const [phase, setPhase] = React.useState('list'); // 'list' | 'done'
const [createdId, setCreatedId] = React.useState(null);
React.useEffect(() => {
if (isOpen) { setSelectedId(null); setPhase('list'); setCreatedId(null); }
}, [isOpen, user?.handle]);
if (!user) return null;
// Groups that DON'T already contain this user
const eligible = YOUR_GROUPS.filter(g => !g.members.includes(user.handle));
const alreadyIn = YOUR_GROUPS.filter(g => g.members.includes(user.handle));
function commit() {
setPhase('done');
onConfirm({ groupId: selectedId, user });
window.setTimeout(() => onBack(), 1400);
}
function createNew() {
const id = `new-${Date.now()}`;
setCreatedId(id);
setSelectedId(id);
}
return (
Add to group
}
>
{phase === 'done' ? (
) : (
{/* Already in */}
{alreadyIn.length > 0 && (
<>
Already in
{alreadyIn.map(g => )}
)}
{/* Pick */}
{eligible.length > 0 ? 'Your groups' : 'No other groups yet'}
{eligible.map(g => (
setSelectedId(g.id)}/>
))}
{/* Create new tile */}
Adding someone to a group makes the group's previous messages visible to them only from this point forward.
)}
);
}
function GroupRow({ group, selected, disabled = false, label, onTap }) {
const others = group.members.slice(0, 3);
return (
);
}
// ─────────────────────────────────────────────────────────────
// Invite to a forest — list your forests, mark which ones the
// target is already in / which ones you can invite them to.
// Invite-only forests gate the invite button behind the user's
// referral allowance.
// ─────────────────────────────────────────────────────────────
function InviteToForestSheet({ user, isOpen, onBack, onClose, onConfirm }) {
const [selectedIds, setSelectedIds] = React.useState(new Set());
const [phase, setPhase] = React.useState('list');
React.useEffect(() => {
if (isOpen) { setSelectedIds(new Set()); setPhase('list'); }
}, [isOpen, user?.handle]);
if (!user) return null;
const already = USER_IN_FORESTS[user.handle] || [];
function toggle(id) {
setSelectedIds(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
}
function commit() {
setPhase('done');
onConfirm({ forestIds: [...selectedIds], user });
window.setTimeout(() => onBack(), 1400);
}
return (
0 ? '#4F8E51' : '#1A2812',
color: selectedIds.size > 0 ? '#F2EDE4' : '#586552',
border: 'none', padding: '13px', borderRadius: 12,
font: '500 14px var(--font-sans)',
cursor: selectedIds.size > 0 ? 'pointer' : 'default',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
}}>
0 ? '#F2EDE4' : '#586552'}/>
{selectedIds.size <= 1 ? 'Send invitation' : `Send ${selectedIds.size} invitations`}
}
>
{phase === 'done' ? (
) : (