GridList

let model = new SelectionModel({ keys: THREADS.map((thread) => thread.id) });

// ref() fires on insert, so the subscription is set up in the browser and torn
// down with the node — the server renders the list without one.
let followSelection = ref((_node, signal) => {
	model.addEventListener("change", () => void handle.update(), { signal });
});

<div mix={[followSelection]}>
	<div mix={[hstack({ gap: 2, align: "center" })]}>
		<Button variant="outline" color="neutral" size="sm" disabled={model.isEmpty}>
			<ArchiveIcon />
			Archive
		</Button>
		<Button variant="outline" color="danger" size="sm" disabled={model.isEmpty}>
			<Trash2Icon />
			Delete
		</Button>
		<Badge color="neutral">{model.size} selected</Badge>
	</div>

	<GridList aria-label="Inbox" mix={[gridListKeys(model)]}>
		{SECTIONS.map((section) => (
			<GridList.Section key={section} aria-labelledby={`inbox-${section}`}>
				<GridList.Header id={`inbox-${section}`}>{section}</GridList.Header>
				{THREADS.filter((thread) => thread.section === section).map((thread) => (
					<GridList.Item key={thread.id} id={thread.id}>
						<MailIcon aria-hidden="true" />
						<span mix={[is("7rem"), shrink(), truncate()]}>{thread.from}</span>
						<span mix={[basis(0), grow(), truncate()]}>{thread.subject}</span>
						<span mix={[basis(0), grow(), truncate()]}>{thread.preview}</span>
					</GridList.Item>
				))}
			</GridList.Section>
		))}
	</GridList>
</div>