sandbox-port-inlisted

# Bring a screen into the sandbox ## Worked example: the Needs you heading and its row boundary | Rust baseline | React destination | |---|---| | `inbox/needs_you.rs`: `NeedsYouPane::render`, heading `.flex().flex_row().items_baseline().gap(px(8.0)).pt(px(24.0)).pb(px(12.0))` | `screens/NeedsYou.tsx`: `NeedsYouPane`, `<div className="flex flex-row items-baseline gap-2 pt-6 pb-3">` | | `inbox/needs_you/rows.rs`: `render_collapsed_row` | `screens/needs_you/rows.tsx`: `renderRow`, called below the heading | Wrong: [NeedsYou.tsx](../../../sandbox/examples/port-in/wrong/NeedsYou.tsx), excerpt. ```tsx export function NeedsYouPane({ rows, onOpenChat }: NeedsYouProps) { return ( <section aria-labelledby="needs-you-heading" className="size-full overflow-y-scroll flex flex-col items-center px-12 pb-8"> <div className="w-full max-w-184 min-w-0 flex flex-col"> <div className="flex flex-row items-baseline gap-2 pt-6 pb-3"> <h1 id="needs-you-heading" className="text-ui-20 font-semibold text-text">Needs you</h1> {rows.length > 0 && <span className="text-ui-13 text-text-faint">{rows.length} waiting</span>} </div> {rows.length === 0 ? ( <div className="flex flex-col items-center justify-center py-10 text-ui-13 text-text-faint">Nothing needs you.</div> ) : rows.map(row => ( <button key={row.id} type="button" data-row={row.id} onClick={() => onOpenChat(row.chatId)} className="flex items-center ga