@remit/ui 0.0.1

package/src/components/rescue-banner.render.test.ts

@@ -0,0 +1,32 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { RescueBanner } from "./rescue-banner.js";
+
+const noop = () => {};
+
+describe("RescueBanner", () => {
+	it("states the count in plain language and offers the action", () => {
+		const html = renderToString(
+			createElement(RescueBanner, { count: 5, onReview: noop }),
+		);
+		assert.match(html, /5 messages here/);
+		assert.match(html, /senders we can verify/);
+		assert.match(html, /Review & rescue/);
+	});
+
+	it("uses the singular form for one message", () => {
+		const html = renderToString(
+			createElement(RescueBanner, { count: 1, onReview: noop }),
+		);
+		assert.match(html, /1 message here/);
+	});
+
+	it("never leaks authentication jargon", () => {
+		const html = renderToString(
+			createElement(RescueBanner, { count: 3, onReview: noop }),
+		);
+		assert.doesNotMatch(html, /DKIM|SPF|DMARC|spam score/i);
+	});
+});

package/src/components/rescue-banner.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RescueBanner } from "./rescue-banner.js";
+
+const meta: Meta<typeof RescueBanner> = {
+	title: "Components/RescueBanner",
+	component: RescueBanner,
+	parameters: { layout: "padded" },
+	args: { onReview: () => {} },
+	decorators: [
+		(Story) => (
+			<div className="mx-auto max-w-md">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof RescueBanner>;
+
+export const Several: Story = {
+	args: { count: 5 },
+};
+
+export const One: Story = {
+	args: { count: 1 },
+};
+
+export const Dismissable: Story = {
+	args: { count: 3, onDismiss: () => {} },
+};

package/src/components/rescue-banner.tsx

@@ -0,0 +1,50 @@
+import { ShieldCheck } from "lucide-react";
+import { Banner } from "./banner.js";
+import { Button } from "./button.js";
+
+export interface RescueBannerProps {
+	/** How many messages in this folder look safe to rescue. */
+	count: number;
+	onReview: () => void;
+	onDismiss?: () => void;
+	/** Override the call-to-action label. */
+	actionLabel?: string;
+}
+
+const plural = (n: number): string => (n === 1 ? "message" : "messages");
+
+/**
+ * Entry call-to-action shown atop a Spam folder when some messages look safe.
+ * Plain language only — no talk of authentication, scores or rules.
+ */
+export function RescueBanner({
+	count,
+	onReview,
+	onDismiss,
+	actionLabel = "Review & rescue",
+}: RescueBannerProps) {
+	return (
+		<Banner tone="info" variant="soft" onDismiss={onDismiss}>
+			<div className="flex flex-col gap-2">
+				<p className="flex items-start gap-2 text-sm text-fg">
+					<ShieldCheck
+						className="mt-0.5 size-4 shrink-0 text-positive"
+						aria-hidden
+					/>
+					<span>
+						<span className="font-semibold text-fg">{`${count} ${plural(count)} here`}</span>{" "}
+						may not be spam — they're from senders we can verify.
+					</span>
+				</p>
+				<Button
+					variant="primary"
+					size="sm"
+					onClick={onReview}
+					className="self-start"
+				>
+					{actionLabel}
+				</Button>
+			</div>
+		</Banner>
+	);
+}

package/src/components/rescue-candidate-row.render.test.ts

@@ -0,0 +1,68 @@
+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,
+	RescueCandidateRow,
+} from "./rescue-candidate-row.js";
+
+const candidate: RescueCandidate = {
+	id: "1",
+	senderName: "Anna de Vries",
+	senderAddress: "anna@studio-noord.nl",
+	subject: "Re: invoice",
+	snippet: "final files attached",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+};
+
+const noop = () => {};
+
+describe("RescueCandidateRow", () => {
+	it("renders sender, subject and the plain-language trust reason", () => {
+		const html = renderToString(
+			createElement(RescueCandidateRow, {
+				candidate,
+				selected: true,
+				onToggle: noop,
+			}),
+		);
+		assert.match(html, /Anna de Vries/);
+		assert.match(html, /We can verify this sender/);
+		assert.match(html, /emailed them before/);
+	});
+
+	it("never leaks authentication jargon to the user", () => {
+		const html = renderToString(
+			createElement(RescueCandidateRow, {
+				candidate,
+				selected: false,
+				onToggle: noop,
+			}),
+		);
+		assert.doesNotMatch(html, /DKIM|SPF|DMARC/i);
+	});
+
+	it("uses a real checkbox that reflects selection", () => {
+		const selectedHtml = renderToString(
+			createElement(RescueCandidateRow, {
+				candidate,
+				selected: true,
+				onToggle: noop,
+			}),
+		);
+		assert.match(selectedHtml, /type="checkbox"/);
+		assert.match(selectedHtml, /checked=""/);
+
+		const unselectedHtml = renderToString(
+			createElement(RescueCandidateRow, {
+				candidate,
+				selected: false,
+				onToggle: noop,
+			}),
+		);
+		assert.doesNotMatch(unselectedHtml, /checked=""/);
+	});
+});

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+	RescueCandidateRow,
+	type RescueCandidateRowProps,
+} from "./rescue-candidate-row.js";
+
+const meta: Meta<typeof RescueCandidateRow> = {
+	title: "Components/RescueCandidateRow",
+	component: RescueCandidateRow,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="mx-auto max-w-md divide-y divide-line rounded-xl border border-line bg-surface">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof RescueCandidateRow>;
+
+const base: RescueCandidateRowProps["candidate"] = {
+	id: "1",
+	senderName: "Anna de Vries",
+	senderAddress: "anna@studio-noord.nl",
+	subject: "Re: invoice for the September shoot",
+	snippet: "Thanks for the quick turnaround — final files attached as agreed.",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+};
+
+function Interactive(props: {
+	candidate: RescueCandidateRowProps["candidate"];
+}) {
+	const [selected, setSelected] = useState(true);
+	return (
+		<RescueCandidateRow
+			candidate={props.candidate}
+			selected={selected}
+			onToggle={() => setSelected((v) => !v)}
+		/>
+	);
+}
+
+export const Selected: Story = {
+	render: () => <Interactive candidate={base} />,
+};
+
+export const KnownContact: Story = {
+	render: () => <Interactive candidate={base} />,
+};
+
+export const PassedAuthentication: Story = {
+	render: () => (
+		<Interactive
+			candidate={{
+				...base,
+				id: "2",
+				senderName: "GitHub",
+				senderAddress: "noreply@github.com",
+				subject: "[remit] CI passed on rescue-from-spam",
+				snippet: "All checks have passed on your pull request.",
+				trustReason: "We can verify this sender",
+				trustSubReason: "Passed authentication",
+				senderTrust: undefined,
+			}}
+		/>
+	),
+};
+
+export const KnownMailingList: Story = {
+	render: () => (
+		<Interactive
+			candidate={{
+				...base,
+				id: "3",
+				senderName: "Stripe Weekly",
+				senderAddress: "weekly@stripe.com",
+				subject: "Your payouts this week",
+				snippet: "Here is a summary of the payouts settled to your account.",
+				trustReason: "We can verify this sender",
+				trustSubReason: "Known mailing list you read",
+				senderTrust: undefined,
+			}}
+		/>
+	),
+};
+
+export const Vip: Story = {
+	render: () => (
+		<Interactive
+			candidate={{
+				...base,
+				id: "4",
+				senderName: "Mum",
+				senderAddress: "mum@gmail.com",
+				subject: "dinner sunday?",
+				snippet: "Let me know if you and the kids are coming over.",
+				trustReason: "We can verify this sender",
+				trustSubReason: "Someone you email often",
+				senderTrust: "vip",
+			}}
+		/>
+	),
+};

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

@@ -0,0 +1,94 @@
+import { ShieldCheck } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Checkbox } from "./checkbox.js";
+import {
+	type SenderTrust,
+	SenderTrustIndicator,
+} from "./sender-trust-indicator.js";
+
+export interface RescueCandidate {
+	id: string;
+	senderName: string;
+	senderAddress: string;
+	subject: string;
+	snippet: string;
+	/** Plain-language headline chip, e.g. "We can verify this sender". */
+	trustReason: string;
+	/** Why we trust it, e.g. "You've emailed them before". Never DKIM/SPF jargon. */
+	trustSubReason: string;
+	senderTrust?: SenderTrust;
+}
+
+export interface RescueCandidateRowProps {
+	candidate: RescueCandidate;
+	selected: boolean;
+	onToggle: () => void;
+}
+
+/**
+ * A single suspected-safe message in the Rescue-from-Spam review list. The whole
+ * row is a label around a real checkbox: tapping anywhere toggles selection for
+ * the bulk move. The green trust chip explains, in plain language, why we
+ * believe it isn't spam.
+ */
+export function RescueCandidateRow({
+	candidate,
+	selected,
+	onToggle,
+}: RescueCandidateRowProps) {
+	const {
+		senderName,
+		senderAddress,
+		subject,
+		snippet,
+		trustReason,
+		trustSubReason,
+		senderTrust,
+	} = candidate;
+
+	return (
+		// biome-ignore lint/a11y/noLabelWithoutControl: label wraps a custom Checkbox component that handles focus
+		<label
+			className={cn(
+				"flex w-full cursor-pointer items-start gap-3 px-3 py-2.5 text-left transition-colors",
+				selected ? "bg-positive/10" : "bg-surface hover:bg-surface-sunken",
+			)}
+		>
+			<Checkbox
+				className="mt-0.5"
+				checked={selected}
+				onChange={onToggle}
+				aria-label={`${selected ? "Deselect" : "Select"} message from ${senderName}`}
+			/>
+
+			<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}
+					</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>
+			</span>
+		</label>
+	);
+}

package/src/components/rescue-from-spam-flow.render.test.ts

@@ -0,0 +1,100 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import {
+	RescueFromSpamFlow,
+	rescueMoveConsequence,
+} from "./rescue-from-spam-flow.js";
+
+const noop = () => {};
+
+const candidates: RescueCandidate[] = [
+	{
+		id: "c1",
+		senderName: "Anna de Vries",
+		senderAddress: "anna@studio-noord.nl",
+		subject: "Re: invoice for the September shoot",
+		snippet: "Final files attached as agreed.",
+		trustReason: "We can verify this sender",
+		trustSubReason: "You've emailed them before",
+		senderTrust: "wellknown",
+	},
+	{
+		id: "c2",
+		senderName: "Mum",
+		senderAddress: "mum@gmail.com",
+		subject: "dinner sunday?",
+		snippet: "Are you coming over?",
+		trustReason: "We can verify this sender",
+		trustSubReason: "A sender you know",
+		senderTrust: "vip",
+	},
+];
+
+const folders: MoveMailboxOption[] = [
+	{ id: "inbox", label: "Inbox" },
+	{ id: "spam", label: "Spam", isCurrent: true },
+];
+
+const renderFlow = (open: boolean): string =>
+	renderToString(
+		createElement(RescueFromSpamFlow, {
+			open,
+			candidates,
+			defaultDestinationId: "inbox",
+			availableFolders: folders,
+			onConfirmMove: noop,
+			onCancel: noop,
+		}),
+	);
+
+describe("RescueFromSpamFlow", () => {
+	it("opens on the review step listing every candidate", () => {
+		const html = renderFlow(true);
+		assert.match(html, /Rescue from Spam/);
+		assert.match(html, /Anna de Vries/);
+		assert.match(html, /Mum/);
+	});
+
+	it("pre-selects all candidates and shows the live count", () => {
+		const html = renderFlow(true);
+		assert.match(html, /2 of 2 selected/);
+		assert.match(html, /Continue with 2 messages/);
+	});
+
+	it("offers select-all / none and a way back", () => {
+		const html = renderFlow(true);
+		assert.match(html, /Select all/);
+		assert.match(html, /Select none/);
+		assert.match(html, /Cancel/);
+		assert.match(html, /Why these\?/);
+	});
+
+	it("never leaks authentication jargon", () => {
+		const html = renderFlow(true);
+		assert.doesNotMatch(html, /DKIM|SPF|DMARC|spam score|predicate/i);
+	});
+});
+
+describe("rescueMoveConsequence", () => {
+	it("states a one-off move with destination and count", () => {
+		assert.equal(
+			rescueMoveConsequence(3, "Inbox"),
+			"Moves these 3 messages out of Spam to Inbox now. Nothing later.",
+		);
+	});
+
+	it("uses the singular form for one message", () => {
+		assert.equal(
+			rescueMoveConsequence(1, "Family"),
+			"Moves this message out of Spam to Family now. Nothing later.",
+		);
+	});
+
+	it("always promises nothing ongoing", () => {
+		assert.match(rescueMoveConsequence(9, "Inbox"), /Nothing later\.$/);
+	});
+});

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Button } from "./button.js";
+import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import { RescueFromSpamFlow } from "./rescue-from-spam-flow.js";
+
+const meta: Meta<typeof RescueFromSpamFlow> = {
+	title: "Flows/RescueFromSpamFlow",
+	component: RescueFromSpamFlow,
+	parameters: { layout: "fullscreen" },
+	decorators: [
+		(Story) => (
+			<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[680px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof RescueFromSpamFlow>;
+
+const CANDIDATES: RescueCandidate[] = [
+	{
+		id: "c1",
+		senderName: "Anna de Vries",
+		senderAddress: "anna@studio-noord.nl",
+		subject: "Re: invoice for the September shoot",
+		snippet: "Thanks for the quick turnaround — final files attached.",
+		trustReason: "We can verify this sender",
+		trustSubReason: "You've emailed them before",
+		senderTrust: "wellknown",
+	},
+	{
+		id: "c2",
+		senderName: "Mum",
+		senderAddress: "mum@gmail.com",
+		subject: "dinner sunday?",
+		snippet: "Let me know if you and the kids are coming over this weekend.",
+		trustReason: "We can verify this sender",
+		trustSubReason: "A sender you know",
+		senderTrust: "vip",
+	},
+	{
+		id: "c3",
+		senderName: "Huisarts Centrum Oost",
+		senderAddress: "no-reply@hcoost.nl",
+		subject: "Afspraakbevestiging — 3 juli 09:20",
+		snippet: "This confirms your appointment. Reply STOP to cancel.",
+		trustReason: "We can verify this sender",
+		trustSubReason: "You've emailed them before",
+		senderTrust: "wellknown",
+	},
+];
+
+const FOLDERS: MoveMailboxOption[] = [
+	{ id: "inbox", label: "Inbox" },
+	{ id: "spam", label: "Spam", isCurrent: true },
+	{ id: "receipts", label: "Receipts" },
+	{ id: "family", label: "Family" },
+	{ id: "work", label: "Work", searchValue: "work clients projects" },
+];
+
+function Demo() {
+	const [open, setOpen] = useState(true);
+	return (
+		<div className="relative h-full overflow-hidden bg-surface">
+			{!open && (
+				<Button
+					variant="primary"
+					onClick={() => setOpen(true)}
+					className="absolute inset-x-0 bottom-0 m-3 h-11 font-semibold"
+				>
+					Open rescue
+				</Button>
+			)}
+			<RescueFromSpamFlow
+				open={open}
+				candidates={CANDIDATES}
+				defaultDestinationId="inbox"
+				availableFolders={FOLDERS}
+				onConfirmMove={() => {}}
+				onCancel={() => setOpen(false)}
+			/>
+		</div>
+	);
+}
+
+export const Default: Story = {
+	render: () => <Demo />,
+};