// ─────────────────────────────────────────────────────────────
// TradeHandlesSheet — the in-person handshake.
//
// Two users next to each other, no forests in common, no way to search
// because handles aren't memorable. The flow:
//
// 1. Your handle is shown big with a glyph (stand-in for QR/NFC) +
// Copy/Share button so they can pull it from your screen.
// 2. An input field lets you key in their handle (paste, scan, type).
// 3. On confirm, you exchange an acquaintance handshake — both sides
// get a Sunlight notification, no DM-spam to either party.
//
// This is the prototype's stand-in. Production would use camera+QR or
// proximity tokens, but the UI is the same shape.
// ─────────────────────────────────────────────────────────────
function TradeHandlesSheet({ isOpen, onBack, onClose, onConfirm }) {
const [theirHandle, setTheirHandle] = React.useState('');
const [copied, setCopied] = React.useState(false);
const [phase, setPhase] = React.useState('input'); // 'input' | 'matched' | 'done'
React.useEffect(() => {
if (isOpen) { setTheirHandle(''); setCopied(false); setPhase('input'); }
}, [isOpen]);
// Look up the typed handle against the known universes so we can show
// a live preview card before the user commits.
const cleaned = theirHandle.trim().replace(/^@/, '').toLowerCase();
const matchedUser = cleaned ? (
INITIAL_FOLK.find(f => f.handle.toLowerCase() === cleaned) ||
FOREST_FOLK.find(f => f.handle.toLowerCase() === cleaned) ||
ACROSS_CANOPY.find(f => f.handle.toLowerCase() === cleaned)
) : null;
const canConfirm = !!matchedUser;
function copyHandle() {
try { navigator.clipboard?.writeText('@' + YOU.handle); } catch {}
setCopied(true);
window.setTimeout(() => setCopied(false), 1400);
}
function commit() {
setPhase('done');
onConfirm?.({ user: matchedUser });
window.setTimeout(() => onBack(), 1600);
}
return (
{canConfirm ? `Add @${matchedUser.handle} as Acquaintance` : 'Enter their handle'}
}
>
{phase === 'done' ? (
) : (
{/* ── Your handle card ───────────────────────────────────────
The point of contact. Big mono handle so they can read it
across a table, glyph as a stand-in for QR/NFC. */}
{/* Decorative ring — leans into Threshold mark */}
You
@{YOU.handle}
{/* Handshake glyph — stand-in for a real QR code */}
Hold near another phone
Or read your handle aloud — they'll type it below on their side.
{/* ── Their handle input ──────────────────────────────────── */}
No one matches yet — handles are case-insensitive. Try again, or share yours and let them find you.
)}
{/* Fine-print on what happens next */}
Both sides have to confirm. We'll show their handle in your folk under Acquaintances as soon as they tap accept.
)}
);
}
// Stand-in for a QR code / proximity beacon. A small ring composition
// with a sunlight nucleus — visually reads as "broadcasting".
function ProximityGlyph() {
return (