@remit/ui 0.0.1

package/src/components/mail-action-toolbar.tsx

@@ -0,0 +1,180 @@
+import {
+	FolderInput,
+	Forward,
+	Reply,
+	ReplyAll,
+	Star,
+	Trash2,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+/** The verbs the reading-pane toolbar exposes. No archive: Remit is IMAP-backed
+ *  and has no archive verb — the IMAP-native equivalent is move-to-folder. */
+export type MailAction =
+	| "reply"
+	| "replyAll"
+	| "forward"
+	| "delete"
+	| "move"
+	| "flag";
+
+export interface MailActionToolbarProps {
+	/** Whether a thread is open. Drives the no-op-explain behaviour, never `disabled`. */
+	hasThread: boolean;
+	/**
+	 * Fired when an action button is pressed with no thread open. The host
+	 * surfaces a one-line inline explanation — never a toast, never a disabled
+	 * button (`doc/rules/ux.md`: never disable a control).
+	 */
+	onUnavailable?: (action: MailAction) => void;
+	/** A one-line inline notice rendered under the toolbar (e.g. "Open a message first"). */
+	unavailableHint?: ReactNode;
+	isStarred?: boolean;
+	/**
+	 * Whether to render the triage cluster (move-to-trash / move / flag).
+	 * Defaults to `true` for the desktop reading-pane toolbar. The mobile pane
+	 * sets it `false` because its management bar already owns triage — rendering
+	 * both would create duplicate accessible names.
+	 */
+	showTriage?: boolean;
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+	onDelete?: () => void;
+	onToggleStar?: () => void;
+	/** Replaces the move button with a host-supplied trigger (e.g. the picker popover). */
+	moveSlot?: ReactNode;
+	onMove?: () => void;
+	replyTitle?: string;
+	replyAllTitle?: string;
+	forwardTitle?: string;
+	deleteTitle?: string;
+	flagTitle?: string;
+	/** Trailing content (search, compose, intelligence toggle, account menu). */
+	children?: ReactNode;
+	className?: string;
+}
+
+/**
+ * The reading-pane action toolbar, shared between the remit-ui AppShell
+ * reference and the live client. Buttons are always pressable: with no thread
+ * open they no-op and call `onUnavailable(action)` so the host can explain why,
+ * rather than greying out (the never-disable tenet — a `disabled` button gives
+ * the user no path to learn what it does or what they must do first).
+ */
+export function MailActionToolbar({
+	hasThread,
+	onUnavailable,
+	unavailableHint,
+	isStarred,
+	showTriage = true,
+	onReply,
+	onReplyAll,
+	onForward,
+	onDelete,
+	onToggleStar,
+	moveSlot,
+	onMove,
+	replyTitle = "Reply (r)",
+	replyAllTitle = "Reply all (a)",
+	forwardTitle = "Forward (f)",
+	deleteTitle = "Move to Trash (#)",
+	flagTitle = "Flag (s)",
+	children,
+	className,
+}: MailActionToolbarProps) {
+	const act = (action: MailAction, handler?: () => void) => () => {
+		if (!hasThread) {
+			onUnavailable?.(action);
+			return;
+		}
+		handler?.();
+	};
+
+	return (
+		<div className="relative">
+			<header
+				className={cn(
+					"flex h-pane-header shrink-0 items-center gap-1 border-b border-line bg-surface px-3",
+					className,
+				)}
+			>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Reply className="size-4" />}
+					title={replyTitle}
+					aria-label="Reply"
+					onClick={act("reply", onReply)}
+				/>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<ReplyAll className="size-4" />}
+					title={replyAllTitle}
+					aria-label="Reply all"
+					onClick={act("replyAll", onReplyAll)}
+				/>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Forward className="size-4" />}
+					title={forwardTitle}
+					aria-label="Forward"
+					onClick={act("forward", onForward)}
+				/>
+				{showTriage && (
+					<>
+						<span className="mx-1 h-4 w-px bg-line" aria-hidden />
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<Trash2 className="size-4" />}
+							title={deleteTitle}
+							aria-label="Move to Trash"
+							onClick={act("delete", onDelete)}
+						/>
+						{moveSlot ?? (
+							<Button
+								variant="ghost"
+								size="sm"
+								icon={<FolderInput className="size-4" />}
+								title="Move to mailbox"
+								aria-label="Move to mailbox"
+								onClick={act("move", onMove)}
+							/>
+						)}
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={
+								<Star
+									className={cn(
+										"size-4",
+										isStarred && "fill-warning text-warning",
+									)}
+								/>
+							}
+							title={flagTitle}
+							aria-label="Flag"
+							onClick={act("flag", onToggleStar)}
+						/>
+					</>
+				)}
+				<div className="flex-1" />
+				{children}
+			</header>
+			{!hasThread && unavailableHint && (
+				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
+				<p
+					role="status"
+					className="border-b border-line bg-surface-sunken px-3 py-1 text-2xs text-fg-subtle"
+				>
+					{unavailableHint}
+				</p>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,69 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { MailHeader, type MailHeaderProps } from "./mail-header.js";
+
+function render(overrides: Partial<MailHeaderProps> = {}): string {
+	return renderToString(
+		createElement(MailHeader, {
+			title: "Daily brief",
+			unreadCount: 15338,
+			isDesktop: false,
+			searchValue: "",
+			onSearchChange: () => undefined,
+			searchOpen: false,
+			onSearchOpenChange: () => undefined,
+			...overrides,
+		}),
+	);
+}
+
+describe("MailHeader", () => {
+	it("renders the title and a formatted unread count", () => {
+		const html = render();
+		assert.match(html, /Daily brief/);
+		assert.match(html, /15,338 unread/);
+	});
+
+	it("renders the menu (hamburger) control", () => {
+		assert.match(render(), /aria-label="Menu"/);
+		assert.match(render({ isDesktop: true }), /aria-label="Menu"/);
+	});
+
+	it("does not render an account chip row (accounts live in the filter / nav)", () => {
+		assert.doesNotMatch(render(), /aria-label="Filters"/);
+	});
+
+	it("shows the search magnifier and hides the input when collapsed", () => {
+		const html = render({ searchOpen: false });
+		assert.match(html, /aria-label="Search"/);
+		assert.doesNotMatch(html, /aria-label="Search mail"/);
+	});
+
+	it("expands the search input and offers a close control when open", () => {
+		const html = render({ searchOpen: true });
+		assert.match(html, /aria-label="Search mail"/);
+		assert.match(html, /aria-label="Close search"/);
+	});
+
+	it("offers a single X when open with a query — close, not a separate inline clear", () => {
+		const html = render({ searchOpen: true, searchValue: "invoice" });
+		assert.match(html, /aria-label="Close search"/);
+		assert.doesNotMatch(html, /aria-label="Clear search"/);
+	});
+
+	it("expands the search bar when a query is active even if not explicitly opened", () => {
+		const html = render({ searchOpen: false, searchValue: "invoice" });
+		assert.match(html, /aria-label="Search mail"/);
+		assert.match(html, /aria-label="Close search"/);
+		assert.doesNotMatch(html, /aria-label="Search"/);
+	});
+
+	it("renders the search bar inline on desktop, keeping its own clear", () => {
+		const html = render({ isDesktop: true, searchValue: "invoice" });
+		assert.match(html, /aria-label="Search mail"/);
+		assert.match(html, /aria-label="Clear search"/);
+		assert.match(html, /Daily brief/);
+	});
+});

package/src/components/mail-header.stories.tsx

@@ -0,0 +1,233 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+	briefFilterConfig,
+	type FilterAccount,
+	type FilterPreset,
+	inboxFilterConfig,
+} from "../filter-presets.js";
+import { FilterSheet } from "./filter-sheet.js";
+import { MailHeader } from "./mail-header.js";
+
+const accounts: FilterAccount[] = [
+	{ id: "all", label: "All", active: true },
+	{ id: "personal", label: "Personal", count: 9 },
+	{ id: "work", label: "Work", count: 14 },
+];
+
+const phoneFrame: Decorator = (Story) => (
+	<div
+		className="overflow-hidden border border-line bg-canvas"
+		style={{ width: 390, height: 720 }}
+	>
+		<Story />
+	</div>
+);
+
+function MockList() {
+	const rows = [
+		["Priya Natarajan", "Q3 roadmap review — agenda + pre-read"],
+		["Mei Tan", "Sunday lunch?"],
+		["Linear", "Your receipt from Linear"],
+		["The Pragmatic Engineer", "Platform teams that scale"],
+		["Coolblue", "Tot 30% korting op monitoren"],
+		["GitHub", "[remit] PR #418: fix thread reconstruction"],
+		["Strava", "Jord gave you kudos on your morning ride"],
+		["Airbnb", "Your reservation in Lisbon is confirmed"],
+	];
+	return (
+		<ul className="divide-y divide-line">
+			{rows.map(([from, subject]) => (
+				<li key={subject} className="px-row-inset py-3">
+					<div className="text-sm font-medium text-fg">{from}</div>
+					<div className="truncate text-xs text-fg-muted">{subject}</div>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+/**
+ * The shared mail view: the MailHeader top row, then the FilterSheet bar (its
+ * caret opens the fuller filter over the list). The preset decides which groups
+ * the filter offers — brief vs inbox.
+ */
+function MailScreen({
+	title,
+	unreadCount,
+	preset,
+	initialExpanded = false,
+	initialSearchOpen = false,
+	initialSearchValue = "",
+}: {
+	title: string;
+	unreadCount: number;
+	preset: FilterPreset;
+	initialExpanded?: boolean;
+	initialSearchOpen?: boolean;
+	initialSearchValue?: string;
+}) {
+	const [searchValue, setSearchValue] = useState(initialSearchValue);
+	const [searchOpen, setSearchOpen] = useState(initialSearchOpen);
+	const [expanded, setExpanded] = useState(initialExpanded);
+	const [category, setCategory] = useState("all");
+	const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
+	const [source, setSource] = useState("all");
+
+	const sources = preset.sources?.map((s) => ({
+		...s,
+		active: s.id === source,
+	}));
+
+	return (
+		<div className="flex h-full flex-col">
+			<MailHeader
+				title={title}
+				unreadCount={unreadCount}
+				isDesktop={false}
+				onMenuClick={() => undefined}
+				searchValue={searchValue}
+				onSearchChange={setSearchValue}
+				searchOpen={searchOpen}
+				onSearchOpenChange={setSearchOpen}
+			/>
+			<div className="min-h-0 flex-1">
+				<FilterSheet
+					categories={preset.categories}
+					filters={preset.filters}
+					sources={sources}
+					selectedCategory={category}
+					activeFilters={activeFilters}
+					expanded={expanded}
+					onExpandedChange={setExpanded}
+					onSelectCategory={setCategory}
+					onSelectSource={setSource}
+					onToggleFilter={(id) =>
+						setActiveFilters((prev) => {
+							const next = new Set(prev);
+							if (next.has(id)) next.delete(id);
+							else next.add(id);
+							return next;
+						})
+					}
+					onClear={() => {
+						setCategory("all");
+						setActiveFilters(new Set());
+					}}
+				>
+					<MockList />
+				</FilterSheet>
+			</div>
+		</div>
+	);
+}
+
+const meta: Meta<typeof MailHeader> = {
+	title: "Screens/Kit/MailHeader",
+	component: MailHeader,
+	parameters: { layout: "centered" },
+	decorators: [phoneFrame],
+};
+export default meta;
+
+type Story = StoryObj<typeof MailHeader>;
+
+/** Brief, filter collapsed: header + the FilterSheet bar with its caret. */
+export const BriefFilterCollapsed: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+		/>
+	),
+};
+
+/**
+ * Brief, filter expanded — categories + Unread/Has attachment/From contacts/Today,
+ * plus the accounts group because more than one account feeds the aggregate brief.
+ */
+export const BriefFilterExpanded: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+			initialExpanded
+		/>
+	),
+};
+
+/**
+ * Single account: the brief filter drops the accounts group entirely (one
+ * account is meaningless to segment) — categories + the brief chip set only.
+ */
+export const BriefFilterSingleAccount: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={42}
+			preset={briefFilterConfig(accounts.slice(0, 1))}
+			initialExpanded
+		/>
+	),
+};
+
+/**
+ * Inbox, filter expanded — categories + Unread/Flagged/Has attachment. No
+ * accounts group: an inbox is already scoped to one account.
+ */
+export const InboxFilterExpanded: Story = {
+	render: () => (
+		<MailScreen
+			title="Inbox"
+			unreadCount={42}
+			preset={inboxFilterConfig()}
+			initialExpanded
+		/>
+	),
+};
+
+/** Mobile search collapsed to a magnifier in the header top row. */
+export const MobileSearchCollapsed: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+		/>
+	),
+};
+
+/**
+ * Mobile search expanded over the title. A single X owns the dismiss: it clears
+ * the query AND closes the search (the SearchBar's own inline clear is suppressed
+ * here, so there is exactly one X).
+ */
+export const MobileSearchExpanded: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+			initialSearchOpen
+			initialSearchValue="invoice"
+		/>
+	),
+};
+
+/**
+ * An active query expands the bar on its own — even when search was never
+ * explicitly opened (e.g. returning from a result via Back). The query is
+ * visible, not hidden behind the collapsed magnifier.
+ */
+export const MobileSearchActiveQueryNotOpened: Story = {
+	render: () => (
+		<MailScreen
+			title="Daily brief"
+			unreadCount={15338}
+			preset={briefFilterConfig(accounts)}
+			initialSearchValue="invoice"
+		/>
+	),
+};

package/src/components/mail-header.tsx

@@ -0,0 +1,123 @@
+import { Menu, Search, X } from "lucide-react";
+import { Button } from "./button.js";
+import { SearchBar } from "./search-bar.js";
+
+export interface MailHeaderProps {
+	/** Top-row title — the view name, e.g. "Daily brief" or "Inbox". */
+	title: string;
+	/** Unread count shown beside the title, e.g. 15338 → "15,338 unread". */
+	unreadCount: number;
+	/**
+	 * Container-derived ≥1024 desktop tier. Desktop renders the search bar
+	 * inline; below it search collapses to a magnifier that expands over the
+	 * title (mirrors the live mobile header).
+	 */
+	isDesktop: boolean;
+	/** Opens the app navigation drawer (hamburger). */
+	onMenuClick?: () => void;
+	searchValue: string;
+	onSearchChange: (value: string) => void;
+	/** Full clear (X). Falls back to clearing the value. */
+	onSearchClear?: () => void;
+	/** Mobile only: whether the inline search is expanded over the title. */
+	searchOpen: boolean;
+	onSearchOpenChange: (open: boolean) => void;
+}
+
+/**
+ * The shared mail header used across views — the daily brief and each inbox.
+ * Just the top row: hamburger + title + unread count + search. The view's
+ * filter (categories, attributes, and — for the aggregate brief — accounts)
+ * lives in the FilterSheet bar the consumer renders directly below this header;
+ * fast account switching is the nav sidebar, so there is no account chip row
+ * here. Search adapts to the tier — inline on desktop, a magnifier that expands
+ * the bar over the title on mobile. Open state is controlled so stories and the
+ * route can drive it.
+ */
+export function MailHeader({
+	title,
+	unreadCount,
+	isDesktop,
+	onMenuClick,
+	searchValue,
+	onSearchChange,
+	onSearchClear,
+	searchOpen,
+	onSearchOpenChange,
+}: MailHeaderProps) {
+	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
+	const clearSearch = onSearchClear ?? (() => onSearchChange(""));
+	const clearAndClose = () => {
+		clearSearch();
+		onSearchOpenChange(false);
+	};
+
+	const renderSearchBar = (showClearButton: boolean) => (
+		<SearchBar
+			value={searchValue}
+			onChange={onSearchChange}
+			onClear={clearSearch}
+			globalFocusKey={false}
+			showClearButton={showClearButton}
+		/>
+	);
+
+	const menuButton = (
+		<Button
+			variant="ghost"
+			icon={<Menu className="size-5" />}
+			onClick={onMenuClick}
+			aria-label="Menu"
+			className="min-h-11 min-w-11 shrink-0 px-0"
+		/>
+	);
+
+	return (
+		<header className="flex shrink-0 flex-col bg-canvas">
+			<div className="flex h-12 items-center gap-2 px-row-inset">
+				{isDesktop ? (
+					<>
+						{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>
+						<div className="w-64 max-w-[40%] shrink-0">
+							{renderSearchBar(true)}
+						</div>
+					</>
+				) : searchOpen || searchValue.trim().length > 0 ? (
+					<div className="flex flex-1 items-center gap-1">
+						<div className="flex-1">{renderSearchBar(false)}</div>
+						<Button
+							variant="ghost"
+							icon={<X className="size-5" />}
+							onClick={clearAndClose}
+							aria-label="Close search"
+							className="min-h-11 min-w-11 shrink-0 px-0"
+						/>
+					</div>
+				) : (
+					<>
+						{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>
+						<Button
+							variant="ghost"
+							icon={<Search className="size-5" />}
+							onClick={() => onSearchOpenChange(true)}
+							aria-label="Search"
+							className="min-h-11 min-w-11 shrink-0 px-0"
+						/>
+					</>
+				)}
+			</div>
+		</header>
+	);
+}

package/src/components/message-body-view.render.test.ts

@@ -0,0 +1,59 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { MessageBodyView } from "./message-body-view.js";
+
+/**
+ * `MessageBodyView` sanitizes via DOMPurify, which needs a DOM. Under SSR /
+ * plain-node (no DOM) the component cannot sanitize, so it never emits the email
+ * HTML — that guard is the security contract: unsanitizable mail is not
+ * rendered. These tests cover the DOM-free paths (empty + plain-text fallback +
+ * the no-DOM HTML guard); the sanitize/classify behavior is pinned by the
+ * sanitizer + render-treatment unit tests, and the live rendering by the
+ * Storybook stories.
+ */
+describe("MessageBodyView", () => {
+	it("renders the empty state when there is no html or text", () => {
+		const html = renderToString(createElement(MessageBodyView, {}));
+		assert.match(html, /This message has no body content\./);
+	});
+
+	it("renders plain text in a pre block (no sanitizer needed)", () => {
+		const html = renderToString(
+			createElement(MessageBodyView, { text: "Just a plain note." }),
+		);
+		assert.match(html, /Just a plain note\./);
+		assert.match(html, /email-text/);
+	});
+
+	it("does not emit raw email HTML without a DOM to sanitize it", () => {
+		// No DOM ⇒ cannot DOMPurify ⇒ the component must NOT paint the HTML.
+		const html = renderToString(
+			createElement(MessageBodyView, {
+				html: "<p>secret newsletter body</p>",
+				category: "newsletter",
+			}),
+		);
+		assert.doesNotMatch(html, /secret newsletter body/);
+	});
+
+	it("falls back to text when html cannot be sanitized (no DOM)", () => {
+		const html = renderToString(
+			createElement(MessageBodyView, {
+				html: "<p>html body</p>",
+				text: "plain fallback",
+			}),
+		);
+		assert.doesNotMatch(html, /html body/);
+		assert.match(html, /plain fallback/);
+	});
+
+	it("applies the message-body wrapper class", () => {
+		const html = renderToString(
+			createElement(MessageBodyView, { text: "x", className: "px-4" }),
+		);
+		assert.match(html, /message-body/);
+		assert.match(html, /px-4/);
+	});
+});