@remit/ui 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell-slotted.render.test.ts

@@ -105,6 +105,37 @@ describe("AppShellSlotted slot rendering", () => {
 		);
 	});
 
+	it("renders the top bar above the panes, at every width", () => {
+		const topBarEl = createElement("div", { "data-testid": "topbar" }, "Bar");
+		for (const initialWidth of [800, 1100, 1400]) {
+			const html = render({ initialWidth, topBar: topBarEl });
+			assert.match(
+				html,
+				/data-testid="topbar"/,
+				`top bar at ${initialWidth}px`,
+			);
+			assert.ok(
+				html.indexOf('data-testid="topbar"') <
+					html.indexOf('data-testid="list"'),
+				`top bar precedes the pane group at ${initialWidth}px`,
+			);
+		}
+	});
+
+	it("omits the top bar when the caller passes none", () => {
+		const html = render({ initialWidth: 1100 });
+		assert.doesNotMatch(html, /data-testid="topbar"/);
+	});
+
+	it("hides the top bar with the rest of the layout while loading", () => {
+		const html = render({
+			isLoading: true,
+			skeleton: createElement("div", { "data-testid": "skeleton" }, "Loading"),
+			topBar: createElement("div", { "data-testid": "topbar" }, "Bar"),
+		});
+		assert.doesNotMatch(html, /data-testid="topbar"/);
+	});
+
 	it("renders the overlay regardless of width", () => {
 		const overlayEl = createElement("div", { "data-testid": "overlay" }, "FAB");
 		const narrowHtml = render({ initialWidth: 800, overlay: overlayEl });

package/src/components/app-shell-slotted.tsx

@@ -59,6 +59,13 @@ export interface AppShellSlottedProps {
 	 * The web-client injects the app-specific bar (hamburger / title / search).
 	 */
 	header?: ReactNode;
+	/**
+	 * Full-width row above every pane, including the nav. Unlike `header` it is
+	 * rendered at whatever width the caller mounts it, and it spans the whole
+	 * shell rather than sitting inside a pane — that width is what makes the
+	 * search field in it read as the app's search rather than the list's.
+	 */
+	topBar?: ReactNode;
 	/**
 	 * Content rendered outside the pane group (e.g., the compose FAB). Floats
 	 * over the layout regardless of width.
@@ -130,6 +137,7 @@ export function AppShellSlotted({
 	hasThread = true,
 	density = "comfortable",
 	header,
+	topBar,
 	overlay,
 	skeleton,
 	isLoading = false,
@@ -178,6 +186,8 @@ export function AppShellSlotted({
 					skeleton
 				) : (
 					<>
+						{topBar}
+
 						{/* Narrow top bar: rendered only when the nav is a slide-over
 						    (< 1024px). Desktop has no slim bar. */}
 						{!showNavPane && header && <div className="shrink-0">{header}</div>}

package/src/components/intelligence-panel.tsx

@@ -320,16 +320,22 @@ function QuickAction({
 	danger?: boolean;
 	onClick?: () => void;
 }) {
+	// No handler means the action cannot be serviced yet (the sender's address
+	// record has not resolved). Render it visibly unavailable rather than as a
+	// live button that swallows the click.
+	const disabled = onClick === undefined;
 	return (
 		<button
 			type="button"
 			onClick={onClick}
+			disabled={disabled}
 			className={cn(
 				"flex items-center gap-2 rounded-md border px-2 py-1 text-xs transition-colors",
 				active
 					? "border-accent-2 bg-accent-2-soft text-accent-2"
 					: "border-line text-fg-muted hover:border-line-strong hover:text-fg",
 				danger && !active && "text-danger hover:bg-danger-soft",
+				disabled && "cursor-not-allowed opacity-50 hover:border-line",
 			)}
 		>
 			{icon}
@@ -401,7 +407,12 @@ export function IntelligencePanel({
 					)}
 					<button
 						type="button"
-						className="ml-auto text-2xs text-accent hover:underline"
+						className={cn(
+							"ml-auto text-2xs text-accent hover:underline",
+							!actions?.onReclassify &&
+								"cursor-not-allowed opacity-50 hover:no-underline",
+						)}
+						disabled={!actions?.onReclassify}
 						onClick={actions?.onReclassify}
 					>
 						reclassify

package/src/components/mail-header.render.test.ts

@@ -2,7 +2,9 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { AppTopBar } from "./app-top-bar.js";
 import { MailHeader, type MailHeaderProps } from "./mail-header.js";
+import { SearchBar } from "./search-bar.js";
 
 function render(overrides: Partial<MailHeaderProps> = {}): string {
 	return renderToString(
@@ -67,3 +69,58 @@ describe("MailHeader", () => {
 		assert.match(html, /Daily brief/);
 	});
 });
+
+/**
+ * One search field per page (#49).
+ *
+ * Moving search into `AppTopBar` puts a second `SearchBar` on the same screen
+ * as the list header's own. Two mounted fields compete for the "/" shortcut and
+ * for focus, and phase 1's review already found a pair colliding on a shared
+ * DOM id. `showSearch` is what holds the count at one, so the count is what
+ * these assert.
+ */
+describe("MailHeader search ownership", () => {
+	const countSearchInputs = (html: string): number =>
+		html.match(/aria-label="Search mail"/g)?.length ?? 0;
+
+	const topBar = (): string =>
+		renderToString(
+			createElement(AppTopBar, {
+				search: createElement(SearchBar, {
+					value: "",
+					onChange: () => undefined,
+					onClear: () => undefined,
+					size: "lg",
+				}),
+			}),
+		);
+
+	it("mounts no search field, and no magnifier, when showSearch is false", () => {
+		const html = render({ isDesktop: true, showSearch: false });
+		assert.equal(countSearchInputs(html), 0);
+		assert.doesNotMatch(html, /aria-label="Search"/);
+	});
+
+	it("keeps the title and unread count when search lives elsewhere", () => {
+		const html = render({ isDesktop: true, showSearch: false });
+		assert.match(html, /Daily brief/);
+		assert.match(html, /15,338 unread/);
+	});
+
+	it("suppresses the field below desktop too, where the takeover owns search", () => {
+		assert.equal(
+			countSearchInputs(render({ isDesktop: false, showSearch: false })),
+			0,
+		);
+	});
+
+	it("leaves exactly one field on screen beside the app top bar", () => {
+		const combined = topBar() + render({ isDesktop: true, showSearch: false });
+		assert.equal(countSearchInputs(combined), 1);
+	});
+
+	it("would be two fields if the header kept its own — the premise being guarded", () => {
+		const combined = topBar() + render({ isDesktop: true });
+		assert.equal(countSearchInputs(combined), 2);
+	});
+});

package/src/components/mail-header.tsx

@@ -22,6 +22,12 @@ export interface MailHeaderProps {
 	/** Mobile only: whether the inline search is expanded over the title. */
 	searchOpen: boolean;
 	onSearchOpenChange: (open: boolean) => void;
+	/**
+	 * Whether this header owns a search surface at all. Defaults to true. Set
+	 * false where an enclosing `AppTopBar` already carries the search field, so
+	 * the page never mounts two search inputs competing for the same focus.
+	 */
+	showSearch?: boolean;
 }
 
 /**
@@ -44,6 +50,7 @@ export function MailHeader({
 	onSearchClear,
 	searchOpen,
 	onSearchOpenChange,
+	showSearch = true,
 }: MailHeaderProps) {
 	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
 	const clearSearch = onSearchClear ?? (() => onSearchChange(""));
@@ -75,7 +82,17 @@ export function MailHeader({
 	return (
 		<header className="flex shrink-0 flex-col bg-canvas">
 			<div className="flex h-12 items-center gap-2 px-row-inset">
-				{isDesktop ? (
+				{!showSearch ? (
+					<>
+						{menuButton}
+						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+							{title}
+						</h1>
+						<span className="shrink-0 text-2xs text-fg-subtle">
+							{unreadLabel}
+						</span>
+					</>
+				) : isDesktop ? (
 					<>
 						{menuButton}
 						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">

package/src/components/rescue-candidate-row.tsx

@@ -25,6 +25,12 @@ export interface RescueCandidateRowProps {
 	candidate: RescueCandidate;
 	selected: boolean;
 	onToggle: () => void;
+	/**
+	 * Drop the sender identity and trust chip from the row. Set when the row sits
+	 * under a sender group that already states both — repeating them per message
+	 * is the noise the grouping exists to remove.
+	 */
+	hideSender?: boolean;
 }
 
 /**
@@ -37,6 +43,7 @@ export function RescueCandidateRow({
 	candidate,
 	selected,
 	onToggle,
+	hideSender = false,
 }: RescueCandidateRowProps) {
 	const {
 		senderName,
@@ -53,6 +60,7 @@ export function RescueCandidateRow({
 		<label
 			className={cn(
 				"flex w-full cursor-pointer items-start gap-3 px-3 py-2.5 text-left transition-colors",
+				hideSender && "pl-11",
 				selected ? "bg-positive/10" : "bg-surface hover:bg-surface-sunken",
 			)}
 		>
@@ -60,34 +68,40 @@ export function RescueCandidateRow({
 				className="mt-0.5"
 				checked={selected}
 				onChange={onToggle}
-				aria-label={`${selected ? "Deselect" : "Select"} message from ${senderName}`}
+				aria-label={`${selected ? "Deselect" : "Select"} ${hideSender ? subject : `message from ${senderName}`}`}
 			/>
 
-			<Avatar name={senderName} email={senderAddress} size="sm" />
+			{!hideSender && (
+				<Avatar name={senderName} email={senderAddress} size="sm" />
+			)}
 
 			<span className="min-w-0 flex-1">
-				<span className="flex items-center gap-1.5">
-					<span className="truncate text-sm font-medium text-fg">
-						{senderName}
-					</span>
-					{senderTrust && (
-						<SenderTrustIndicator senderTrust={senderTrust} size="sm" />
-					)}
-					<span className="truncate text-2xs text-fg-subtle">
-						{senderAddress}
+				{!hideSender && (
+					<span className="flex items-center gap-1.5">
+						<span className="truncate text-sm font-medium text-fg">
+							{senderName}
+						</span>
+						{senderTrust && (
+							<SenderTrustIndicator senderTrust={senderTrust} size="sm" />
+						)}
+						<span className="truncate text-2xs text-fg-subtle">
+							{senderAddress}
+						</span>
 					</span>
-				</span>
+				)}
 				<span className="block truncate text-sm text-fg-muted">{subject}</span>
 				<span className="block line-clamp-1 text-xs text-fg-subtle">
 					{snippet}
 				</span>
-				<span className="mt-1.5 flex flex-wrap items-center gap-1.5">
-					<Badge tone="positive">
-						<ShieldCheck className="size-3" aria-hidden />
-						{trustReason}
-					</Badge>
-					<span className="text-2xs text-fg-subtle">{trustSubReason}</span>
-				</span>
+				{!hideSender && (
+					<span className="mt-1.5 flex flex-wrap items-center gap-1.5">
+						<Badge tone="positive">
+							<ShieldCheck className="size-3" aria-hidden />
+							{trustReason}
+						</Badge>
+						<span className="text-2xs text-fg-subtle">{trustSubReason}</span>
+					</span>
+				)}
 			</span>
 		</label>
 	);

package/src/components/rescue-from-spam-flow.tsx

@@ -1,5 +1,5 @@
 import { CheckCircle2, HelpCircle, ShieldCheck } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Banner } from "./banner.js";
 import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
@@ -7,10 +7,12 @@ import {
 	type MoveMailboxOption,
 	MoveMailboxPicker,
 } from "./move-mailbox-picker.js";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
-	type RescueCandidate,
-	RescueCandidateRow,
-} from "./rescue-candidate-row.js";
+	groupRescueCandidatesBySender,
+	type RescueSenderGroup,
+	RescueSenderGroupRow,
+} from "./rescue-sender-group.js";
 
 type Step = "review" | "destination" | "done";
 
@@ -60,6 +62,7 @@ function ReviewStep({
 	candidates,
 	selected,
 	onToggle,
+	onToggleGroup,
 	onSelectAll,
 	onSelectNone,
 	onContinue,
@@ -68,6 +71,7 @@ function ReviewStep({
 	candidates: RescueCandidate[];
 	selected: Set<string>;
 	onToggle: (id: string) => void;
+	onToggleGroup: (group: RescueSenderGroup, nextSelected: boolean) => void;
 	onSelectAll: () => void;
 	onSelectNone: () => void;
 	onContinue: () => void;
@@ -75,6 +79,10 @@ function ReviewStep({
 }) {
 	const [showWhy, setShowWhy] = useState(false);
 	const count = selected.size;
+	const groups = useMemo(
+		() => groupRescueCandidatesBySender(candidates),
+		[candidates],
+	);
 	return (
 		<div className="flex min-h-0 flex-col">
 			<div className="px-row-inset pb-2 pt-1">
@@ -94,8 +102,8 @@ function ReviewStep({
 					</Button>
 				</div>
 				<p className="mt-1 text-2xs text-fg-subtle">
-					These look safe — from senders we can verify. Uncheck anything that
-					belongs in Spam.
+					These look safe — from senders we can verify. Uncheck any sender that
+					belongs in Spam, or open a sender to pick individual messages.
 				</p>
 				{showWhy && (
 					<div className="mt-2">
@@ -106,7 +114,7 @@ function ReviewStep({
 
 			<div className="flex items-center justify-between px-row-inset pb-1.5">
 				<span className="text-2xs font-medium text-fg-muted">
-					{`${count} of ${candidates.length} selected`}
+					{`${count} of ${candidates.length} selected · ${groups.length} ${groups.length === 1 ? "sender" : "senders"}`}
 				</span>
 				<span className="flex gap-1">
 					<Button variant="ghost" size="sm" onClick={onSelectAll}>
@@ -119,12 +127,13 @@ function ReviewStep({
 			</div>
 
 			<div className="min-h-0 flex-1 divide-y divide-line overflow-y-auto border-y border-line">
-				{candidates.map((candidate) => (
-					<RescueCandidateRow
-						key={candidate.id}
-						candidate={candidate}
-						selected={selected.has(candidate.id)}
-						onToggle={() => onToggle(candidate.id)}
+				{groups.map((group) => (
+					<RescueSenderGroupRow
+						key={group.key}
+						group={group}
+						selected={selected}
+						onToggleGroup={onToggleGroup}
+						onToggleMessage={onToggle}
 					/>
 				))}
 			</div>
@@ -300,6 +309,17 @@ export function RescueFromSpamFlow({
 		});
 	};
 
+	const toggleGroup = (group: RescueSenderGroup, nextSelected: boolean) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			for (const message of group.messages) {
+				if (nextSelected) next.add(message.id);
+				else next.delete(message.id);
+			}
+			return next;
+		});
+	};
+
 	const move = () => {
 		const ids = Array.from(selected);
 		setMovedCount(ids.length);
@@ -314,6 +334,7 @@ export function RescueFromSpamFlow({
 					candidates={candidates}
 					selected={selected}
 					onToggle={toggle}
+					onToggleGroup={toggleGroup}
 					onSelectAll={() => setSelected(new Set(candidates.map((c) => c.id)))}
 					onSelectNone={() => setSelected(new Set())}
 					onContinue={() => setStep("destination")}

package/src/components/rescue-sender-group.render.test.ts

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import {
+	groupRescueCandidatesBySender,
+	RescueSenderGroupRow,
+} from "./rescue-sender-group.js";
+
+const noop = () => {};
+
+const candidate = (id: string, subject: string): RescueCandidate => ({
+	id,
+	senderName: "Shop News",
+	senderAddress: "news@shop.com",
+	subject,
+	snippet: "",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+});
+
+const [group] = groupRescueCandidatesBySender([
+	candidate("a", "Autumn sale"),
+	candidate("b", "Winter sale"),
+]);
+
+const render = (selected: Set<string>): string =>
+	renderToString(
+		createElement(RescueSenderGroupRow, {
+			group,
+			selected,
+			onToggleGroup: noop,
+			onToggleMessage: noop,
+		}),
+	);
+
+describe("RescueSenderGroupRow", () => {
+	it("states the sender once and the message count instead of repeating rows", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.match(html, /Shop News/);
+		assert.match(html, /2 messages/);
+		assert.equal(
+			html.split("news@shop.com").length - 1,
+			1,
+			"the address appears once per sender, not once per message",
+		);
+	});
+
+	it("keeps the individual messages collapsed until asked for", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.doesNotMatch(html, /Autumn sale/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("offers one checkbox covering every message from the sender", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.match(html, /Deselect all 2 messages from Shop News/);
+	});
+
+	it("shows a partial selection as indeterminate, not as unselected", () => {
+		const html = render(new Set(["a"]));
+		assert.doesNotMatch(html, /checked=""/);
+		assert.match(html, /Select all 2 messages from Shop News/);
+	});
+});

package/src/components/rescue-sender-group.test.ts

@@ -0,0 +1,91 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import {
+	groupRescueCandidatesBySender,
+	senderGroupSelectionState,
+} from "./rescue-sender-group.js";
+
+const candidate = (
+	id: string,
+	senderAddress: string,
+	senderName = senderAddress,
+): RescueCandidate => ({
+	id,
+	senderName,
+	senderAddress,
+	subject: `subject ${id}`,
+	snippet: "",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+});
+
+describe("groupRescueCandidatesBySender", () => {
+	it("collapses a queue into one entry per sender", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "news@shop.com"),
+			candidate("b", "mum@gmail.com"),
+			candidate("c", "news@shop.com"),
+			candidate("d", "news@shop.com"),
+		]);
+
+		assert.deepEqual(
+			groups.map((g) => [g.senderAddress, g.messages.length]),
+			[
+				["news@shop.com", 3],
+				["mum@gmail.com", 1],
+			],
+			"biggest sender first — that is where the review time goes",
+		);
+	});
+
+	it("treats a sender as one sender regardless of address casing", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "News@Shop.com"),
+			candidate("b", "news@shop.com"),
+		]);
+		assert.equal(groups.length, 1);
+		assert.equal(groups[0].messages.length, 2);
+	});
+
+	it("keeps arrival order between senders with the same message count", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "first@x.com"),
+			candidate("b", "second@x.com"),
+		]);
+		assert.deepEqual(
+			groups.map((g) => g.senderAddress),
+			["first@x.com", "second@x.com"],
+		);
+	});
+
+	it("falls back to the sender name when there is no address", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "", "Unknown sender"),
+			candidate("b", "", "Unknown sender"),
+		]);
+		assert.equal(groups.length, 1);
+	});
+
+	it("returns nothing for an empty queue", () => {
+		assert.deepEqual(groupRescueCandidatesBySender([]), []);
+	});
+});
+
+describe("senderGroupSelectionState", () => {
+	const [group] = groupRescueCandidatesBySender([
+		candidate("a", "news@shop.com"),
+		candidate("b", "news@shop.com"),
+	]);
+
+	it("reports all, some and none so the group checkbox can be tri-state", () => {
+		assert.equal(senderGroupSelectionState(group, new Set(["a", "b"])), "all");
+		assert.equal(senderGroupSelectionState(group, new Set(["a"])), "some");
+		assert.equal(senderGroupSelectionState(group, new Set()), "none");
+	});
+
+	it("ignores selections belonging to other senders", () => {
+		assert.equal(senderGroupSelectionState(group, new Set(["zz"])), "none");
+	});
+});

package/src/components/rescue-sender-group.tsx

@@ -0,0 +1,173 @@
+import { ChevronDown, ChevronRight, ShieldCheck } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Checkbox } from "./checkbox.js";
+import {
+	type RescueCandidate,
+	RescueCandidateRow,
+} from "./rescue-candidate-row.js";
+import { SenderTrustIndicator } from "./sender-trust-indicator.js";
+
+/** Every suspected-safe message from one sender, as one reviewable unit. */
+export interface RescueSenderGroup {
+	/**
+	 * Stable identity for the group: the lowercased sender address, falling back
+	 * to the lowercased sender name when a message carries no address. Treat it
+	 * as an opaque key — it is not guaranteed to be an email address.
+	 */
+	key: string;
+	senderName: string;
+	senderAddress: string;
+	trustReason: string;
+	trustSubReason: string;
+	senderTrust?: RescueCandidate["senderTrust"];
+	messages: RescueCandidate[];
+}
+
+/**
+ * Collapse the candidate list into one entry per sender.
+ *
+ * Trust is a property of the sender, not of the individual message, so a flat
+ * list makes the user answer the same question once per message — 342 messages
+ * from a few dozen senders is a few dozen real decisions padded out into
+ * hundreds of identical ones. Grouping restores the decision to its actual
+ * granularity.
+ *
+ * Groups are ordered by message count descending, so the senders that account
+ * for most of the queue are settled first; ties keep the order the messages
+ * arrived in.
+ */
+export const groupRescueCandidatesBySender = (
+	candidates: RescueCandidate[],
+): RescueSenderGroup[] => {
+	const groups = new Map<string, RescueSenderGroup>();
+	const order: string[] = [];
+
+	for (const candidate of candidates) {
+		const key = (candidate.senderAddress || candidate.senderName).toLowerCase();
+		const existing = groups.get(key);
+		if (existing) {
+			existing.messages.push(candidate);
+			continue;
+		}
+		groups.set(key, {
+			key,
+			senderName: candidate.senderName,
+			senderAddress: candidate.senderAddress,
+			trustReason: candidate.trustReason,
+			trustSubReason: candidate.trustSubReason,
+			senderTrust: candidate.senderTrust,
+			messages: [candidate],
+		});
+		order.push(key);
+	}
+
+	return order
+		.map((key) => groups.get(key) as RescueSenderGroup)
+		.sort((a, b) => b.messages.length - a.messages.length);
+};
+
+export type GroupSelectionState = "none" | "some" | "all";
+
+export const senderGroupSelectionState = (
+	group: RescueSenderGroup,
+	selected: Set<string>,
+): GroupSelectionState => {
+	const count = group.messages.filter((m) => selected.has(m.id)).length;
+	if (count === 0) return "none";
+	if (count === group.messages.length) return "all";
+	return "some";
+};
+
+export interface RescueSenderGroupRowProps {
+	group: RescueSenderGroup;
+	selected: Set<string>;
+	/** Select or deselect every message from this sender at once. */
+	onToggleGroup: (group: RescueSenderGroup, nextSelected: boolean) => void;
+	onToggleMessage: (id: string) => void;
+}
+
+const plural = (n: number): string => (n === 1 ? "message" : "messages");
+
+/**
+ * One sender in the Rescue-from-Spam review list: a single decision covering
+ * every message that sender has sitting in Spam. The individual messages stay
+ * available behind a disclosure for the cases where a sender is trusted but one
+ * particular message is not.
+ */
+export function RescueSenderGroupRow({
+	group,
+	selected,
+	onToggleGroup,
+	onToggleMessage,
+}: RescueSenderGroupRowProps) {
+	const [expanded, setExpanded] = useState(false);
+	const state = senderGroupSelectionState(group, selected);
+	const count = group.messages.length;
+	const Chevron = expanded ? ChevronDown : ChevronRight;
+
+	return (
+		<div className={cn(state !== "none" ? "bg-positive/10" : "bg-surface")}>
+			<div className="flex w-full items-start gap-3 px-3 py-2.5">
+				<Checkbox
+					className="mt-0.5"
+					checked={state === "all"}
+					indeterminate={state === "some"}
+					onChange={() => onToggleGroup(group, state !== "all")}
+					aria-label={`${state === "all" ? "Deselect" : "Select"} all ${count} ${plural(count)} from ${group.senderName}`}
+				/>
+
+				<Avatar name={group.senderName} email={group.senderAddress} size="sm" />
+
+				<div className="min-w-0 flex-1">
+					<div className="flex items-center gap-1.5">
+						<span className="truncate text-sm font-medium text-fg">
+							{group.senderName}
+						</span>
+						{group.senderTrust && (
+							<SenderTrustIndicator senderTrust={group.senderTrust} size="sm" />
+						)}
+						<span className="truncate text-2xs text-fg-subtle">
+							{group.senderAddress}
+						</span>
+					</div>
+					<div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+						<Badge tone="positive">
+							<ShieldCheck className="size-3" aria-hidden />
+							{group.trustReason}
+						</Badge>
+						<span className="text-2xs text-fg-subtle">
+							{group.trustSubReason}
+						</span>
+					</div>
+				</div>
+
+				<button
+					type="button"
+					onClick={() => setExpanded((v) => !v)}
+					aria-expanded={expanded}
+					className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-2xs text-fg-muted transition-colors hover:bg-surface-sunken hover:text-fg"
+				>
+					{`${count} ${plural(count)}`}
+					<Chevron className="size-3.5" aria-hidden />
+				</button>
+			</div>
+
+			{expanded && (
+				<div className="divide-y divide-line border-t border-line">
+					{group.messages.map((candidate) => (
+						<RescueCandidateRow
+							key={candidate.id}
+							candidate={candidate}
+							selected={selected.has(candidate.id)}
+							onToggle={() => onToggleMessage(candidate.id)}
+							hideSender
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/index.ts

@@ -259,6 +259,14 @@ export {
 	type RescueFromSpamFlowProps,
 	rescueMoveConsequence,
 } from "./components/rescue-from-spam-flow.js";
+export {
+	type GroupSelectionState,
+	groupRescueCandidatesBySender,
+	type RescueSenderGroup,
+	RescueSenderGroupRow,
+	type RescueSenderGroupRowProps,
+	senderGroupSelectionState,
+} from "./components/rescue-sender-group.js";
 export {
 	type PanelGroupProps,
 	type PanelProps,

package/src/tokens.css

@@ -51,6 +51,7 @@
 	/* status */
 	--color-positive: var(--positive);
 	--color-warning: var(--warning);
+	--color-warning-soft: var(--warning-soft);
 	--color-danger: var(--danger);
 	--color-danger-soft: var(--danger-soft);
 
@@ -141,6 +142,7 @@
 	--positive: oklch(0.55 0.12 155);
 	/* muted amber, used sparingly */
 	--warning: oklch(0.65 0.13 80);
+	--warning-soft: oklch(0.94 0.04 80);
 	/* muted coral — the only warm color in the UI */
 	--danger: oklch(0.56 0.16 25);
 	--danger-soft: oklch(0.93 0.04 25);
@@ -175,6 +177,7 @@
 
 	--positive: oklch(0.74 0.13 155);
 	--warning: oklch(0.75 0.12 80);
+	--warning-soft: oklch(0.32 0.06 80);
 	--danger: oklch(0.68 0.15 25);
 	--danger-soft: oklch(0.32 0.07 25);