@remit/ui 0.0.1

package/src/components/role-appointment-list.tsx

@@ -0,0 +1,227 @@
+import { Check, Folder } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./button.js";
+import {
+	canonicalRoleLabel,
+	type FolderRole,
+	providerLeaf,
+	roleIcon,
+} from "./folder-role.js";
+import { Input } from "./input.js";
+import { Select } from "./select.js";
+
+/* ------------------------------------------------------------------ */
+/* Role-centric folder settings (RFC 032, issue #976).                 */
+/*                                                                      */
+/* Inverts the per-folder model: the canonical roles are the fixed     */
+/* anchor, and each row appoints WHICH existing folder fills it. A role */
+/* points to at most one folder, so two-"Drafts" is unrepresentable.   */
+/* Replaces folder-name-row / folder-name-list.                         */
+/* ------------------------------------------------------------------ */
+
+/** The canonical roles a user appoints, in display order. */
+export const APPOINTABLE_ROLES: readonly FolderRole[] = [
+	"inbox",
+	"drafts",
+	"sent",
+	"archive",
+	"junk",
+	"trash",
+];
+
+export interface CandidateFolder {
+	/** Stable id (the mailbox id). */
+	mailboxId: string;
+	/** Server truth — the IMAP path. Read-only. */
+	providerPath: string;
+	/** Live message count, so the user can pick the folder that holds mail. */
+	messageCount: number;
+}
+
+/** Empty <option> value standing for "no folder appointed". */
+const NONE = "";
+
+/** Picker option text: `Concepten · 340 msgs`. */
+function folderOptionLabel(folder: CandidateFolder): string {
+	const noun = folder.messageCount === 1 ? "msg" : "msgs";
+	return `${providerLeaf(folder.providerPath)} · ${folder.messageCount} ${noun}`;
+}
+
+interface RoleAppointmentRowProps {
+	role: FolderRole;
+	folders: readonly CandidateFolder[];
+	/** The mailbox appointed to this role, or null when the role is unfilled. */
+	appointedId: string | null;
+	/** Committed display-name override for the appointed folder. */
+	displayName: string;
+	onAppoint: (role: FolderRole, mailboxId: string | null) => void;
+	onRename: (mailboxId: string, name: string) => void;
+}
+
+/**
+ * One role row: the canonical role on the left, a picker choosing which
+ * existing folder fills it (options carry message counts so the user picks the
+ * folder that actually holds mail), and — once a folder is appointed — a rename
+ * field for its sidebar label. Selecting a folder here clears it from any other
+ * role on write; the picker can never produce a duplicate.
+ */
+function RoleAppointmentRow({
+	role,
+	folders,
+	appointedId,
+	displayName,
+	onAppoint,
+	onRename,
+}: RoleAppointmentRowProps) {
+	const [draftName, setDraftName] = useState(displayName);
+	const appointed = folders.find((f) => f.mailboxId === appointedId) ?? null;
+	const label = canonicalRoleLabel(role);
+	const renameDirty =
+		appointed != null && draftName.trim() !== displayName.trim();
+
+	return (
+		<div className="flex flex-col gap-1 border-b border-line px-row-inset py-2.5 last:border-b-0">
+			<div className="flex items-center gap-2">
+				<span className="flex w-28 shrink-0 items-center gap-2 text-sm font-medium text-fg">
+					{roleIcon(role)}
+					{label}
+				</span>
+				<Select
+					className="w-56 shrink-0"
+					value={appointedId ?? NONE}
+					aria-label={`Folder for ${label}`}
+					onChange={(event) =>
+						onAppoint(
+							role,
+							event.target.value === NONE ? null : event.target.value,
+						)
+					}
+				>
+					<option value={NONE}>None</option>
+					{folders.map((folder) => (
+						<option key={folder.mailboxId} value={folder.mailboxId}>
+							{folderOptionLabel(folder)}
+						</option>
+					))}
+				</Select>
+				{appointed && (
+					<>
+						<Input
+							className="flex-1"
+							value={draftName}
+							placeholder={label}
+							aria-label={`Display name for ${label}`}
+							onChange={(event) => setDraftName(event.target.value)}
+						/>
+						{renameDirty && (
+							<Button
+								variant="ghost"
+								size="sm"
+								className="shrink-0"
+								icon={<Check className="size-4" />}
+								aria-label="Save display name"
+								onClick={() => onRename(appointed.mailboxId, draftName)}
+							/>
+						)}
+					</>
+				)}
+			</div>
+			{appointed && (
+				<span
+					className="truncate pl-[7.5rem] text-2xs text-fg-subtle"
+					title={appointed.providerPath}
+				>
+					{appointed.providerPath} · {appointed.messageCount}{" "}
+					{appointed.messageCount === 1 ? "message" : "messages"}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export interface RoleAppointmentListProps {
+	accountEmail: string;
+	/** Every folder the account exposes (candidates for any role). */
+	folders: readonly CandidateFolder[];
+	/** role → appointed mailboxId. A missing role means "None". */
+	appointments: Readonly<Record<string, string | null>>;
+	/** mailboxId → committed display-name override. */
+	displayNames?: Readonly<Record<string, string>>;
+	onAppoint: (role: FolderRole, mailboxId: string | null) => void;
+	onRename: (mailboxId: string, name: string) => void;
+}
+
+/**
+ * The per-account folder-roles settings section. Lists the canonical roles,
+ * each appointing one existing folder, then the leftover unappointed folders as
+ * plain folders. Controlled — the caller owns the appointment map and routes
+ * each change back. Pure kit primitives (Select/Input/Button); no disabled
+ * controls (a picker always offers "None").
+ */
+export function RoleAppointmentList({
+	accountEmail,
+	folders,
+	appointments,
+	displayNames = {},
+	onAppoint,
+	onRename,
+}: RoleAppointmentListProps) {
+	const appointedIds = new Set(
+		Object.values(appointments).filter((id): id is string => id != null),
+	);
+	const leftovers = folders.filter((f) => !appointedIds.has(f.mailboxId));
+
+	return (
+		<section className="space-y-3">
+			<header className="space-y-1">
+				<h2 className="text-sm font-semibold text-fg">
+					Folder roles — {accountEmail}
+				</h2>
+				<p className="text-xs text-fg-muted">
+					Each role points to one folder. Pick the folder that holds the mail —
+					the counts help you tell real folders from empty look-alikes.
+					Appointing a folder here removes it from any other role.
+				</p>
+			</header>
+			<div className="rounded-sm border border-line bg-surface">
+				{APPOINTABLE_ROLES.map((role) => {
+					const appointedId = appointments[role] ?? null;
+					return (
+						<RoleAppointmentRow
+							key={role}
+							role={role}
+							folders={folders}
+							appointedId={appointedId}
+							displayName={appointedId ? (displayNames[appointedId] ?? "") : ""}
+							onAppoint={onAppoint}
+							onRename={onRename}
+						/>
+					);
+				})}
+			</div>
+
+			{leftovers.length > 0 && (
+				<div className="space-y-1.5">
+					<h3 className="text-xs font-medium text-fg-muted">Other folders</h3>
+					<ul className="rounded-sm border border-line bg-surface">
+						{leftovers.map((folder) => (
+							<li
+								key={folder.mailboxId}
+								className="flex items-center gap-2 border-b border-line px-row-inset py-2 text-sm text-fg last:border-b-0"
+							>
+								<Folder className="size-4 shrink-0 text-fg-subtle" />
+								<span className="truncate">
+									{providerLeaf(folder.providerPath)}
+								</span>
+								<span className="ml-auto shrink-0 text-2xs text-fg-subtle">
+									{folder.messageCount}{" "}
+									{folder.messageCount === 1 ? "message" : "messages"}
+								</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</section>
+	);
+}

package/src/components/row-actions.render.test.ts

@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { RowActions } from "./row-actions.js";
+
+describe("RowActions", () => {
+	it("renders secondary actions as buttons, never disabled", () => {
+		const html = renderToString(
+			createElement(RowActions, {
+				actions: [
+					{ label: "Manage", onClick: () => undefined },
+					{
+						label: "Reconnect",
+						variant: "secondary",
+						onClick: () => undefined,
+					},
+				],
+			}),
+		);
+		assert.match(html, /Manage/);
+		assert.match(html, /Reconnect/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("renders the destructive action as a real button with no disabled attribute", () => {
+		const html = renderToString(
+			createElement(RowActions, {
+				destructive: {
+					label: "Delete",
+					iconOnly: true,
+					onClick: () => undefined,
+					confirm: { prompt: "Delete this account?" },
+				},
+			}),
+		);
+		assert.match(html, /<button/);
+		assert.match(html, /aria-label="Delete"/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("uses aria-busy, not disabled, while an action is busy", () => {
+		const html = renderToString(
+			createElement(RowActions, {
+				actions: [
+					{
+						label: "Reconnect",
+						variant: "secondary",
+						busy: true,
+						busyLabel: "Redirecting…",
+						onClick: () => undefined,
+					},
+				],
+			}),
+		);
+		assert.match(html, /aria-busy="true"/);
+		assert.match(html, /Redirecting/);
+		assert.match(html, /animate-spin/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("renders an icon-only destructive action with an accessible label", () => {
+		const html = renderToString(
+			createElement(RowActions, {
+				actions: [
+					{
+						label: "Retry sending",
+						iconOnly: true,
+						onClick: () => undefined,
+					},
+				],
+				destructive: {
+					label: "Delete message",
+					iconOnly: true,
+					onClick: () => undefined,
+				},
+			}),
+		);
+		assert.match(html, /aria-label="Retry sending"/);
+		assert.match(html, /aria-label="Delete message"/);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+});

package/src/components/row-actions.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RotateCcw, Send, Trash2 } from "lucide-react";
+import { RowActions } from "./row-actions.js";
+
+const meta: Meta<typeof RowActions> = {
+	title: "Primitives/RowActions",
+	component: RowActions,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof RowActions>;
+
+export const SecondaryWithDestructiveConfirm: Story = {
+	name: "Secondary + destructive confirm",
+	args: {
+		actions: [{ label: "Manage", onClick: () => undefined }],
+		destructive: {
+			label: "Delete",
+			icon: <Trash2 className="size-3.5" />,
+			iconOnly: true,
+			onClick: () => undefined,
+			confirm: {
+				prompt: "Delete this account?",
+				confirmLabel: "Delete account",
+			},
+		},
+	},
+};
+
+export const Reconnect: Story = {
+	args: {
+		actions: [
+			{ label: "Reconnect", variant: "secondary", onClick: () => undefined },
+		],
+		destructive: {
+			label: "Delete",
+			icon: <Trash2 className="size-3.5" />,
+			iconOnly: true,
+			onClick: () => undefined,
+			confirm: {
+				prompt: "Delete this account?",
+				confirmLabel: "Delete account",
+			},
+		},
+	},
+};
+
+export const Reconnecting: Story = {
+	args: {
+		actions: [
+			{
+				label: "Reconnect",
+				variant: "secondary",
+				busy: true,
+				busyLabel: "Redirecting…",
+				onClick: () => undefined,
+			},
+		],
+	},
+};
+
+export const OutboxFailedRow: Story = {
+	name: "Outbox — failed row",
+	args: {
+		actions: [
+			{
+				label: "Retry sending",
+				icon: <RotateCcw className="size-3.5" />,
+				iconOnly: true,
+				onClick: () => undefined,
+			},
+			{
+				label: "Edit as draft",
+				icon: <Send className="size-3.5" />,
+				iconOnly: true,
+				onClick: () => undefined,
+			},
+		],
+		destructive: {
+			label: "Delete message",
+			icon: <Trash2 className="size-3.5" />,
+			iconOnly: true,
+			onClick: () => undefined,
+		},
+	},
+};

package/src/components/row-actions.tsx

@@ -0,0 +1,139 @@
+import { Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+const spinner = (): ReactNode => <Loader2 className="size-3.5 animate-spin" />;
+
+export interface RowAction {
+	label: string;
+	onClick: () => void;
+	icon?: ReactNode;
+	variant?: "secondary" | "ghost";
+	busy?: boolean;
+	/** Replaces the label while busy (e.g. "Redirecting…"). */
+	busyLabel?: string;
+	/** Render the label visually hidden, leaving an icon-only button. */
+	iconOnly?: boolean;
+}
+
+export interface RowDestructiveAction {
+	label: string;
+	onClick: () => void;
+	icon?: ReactNode;
+	busy?: boolean;
+	busyLabel?: string;
+	iconOnly?: boolean;
+	/**
+	 * When set, the destructive action reflects an inline confirm step
+	 * (cancel / confirm) instead of firing immediately. Surfaces that own a
+	 * separate confirm dialog omit this and handle confirmation themselves.
+	 */
+	confirm?: {
+		/** Plain consequence shown before the confirm button. */
+		prompt: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+	};
+}
+
+export interface RowActionsProps {
+	/** Secondary actions, rendered before the destructive one. */
+	actions?: RowAction[];
+	/** The single destructive action (delete / remove). */
+	destructive?: RowDestructiveAction;
+	className?: string;
+}
+
+const actionLabel = (label: string, iconOnly?: boolean): ReactNode =>
+	iconOnly ? <span className="sr-only">{label}</span> : label;
+
+/**
+ * One shared per-row action cluster. Secondary actions plus an optional
+ * destructive action that either reflects an inline confirm step or defers
+ * to a surface-owned dialog. Never a naked destructive icon, never a
+ * disabled control — busy state uses `aria-busy`.
+ */
+export function RowActions({
+	actions = [],
+	destructive,
+	className,
+}: RowActionsProps) {
+	const [confirming, setConfirming] = useState(false);
+
+	if (confirming && destructive?.confirm) {
+		return (
+			<div className={cn("flex items-center gap-2", className)}>
+				<span className="text-xs text-fg-muted">
+					{destructive.confirm.prompt}
+				</span>
+				<Button
+					variant="secondary"
+					size="sm"
+					onClick={() => setConfirming(false)}
+				>
+					{destructive.confirm.cancelLabel ?? "Cancel"}
+				</Button>
+				<Button
+					variant="danger"
+					size="sm"
+					aria-busy={destructive.busy}
+					icon={destructive.busy ? spinner() : undefined}
+					onClick={() => {
+						if (destructive.busy) return;
+						destructive.onClick();
+					}}
+				>
+					{destructive.busy
+						? (destructive.busyLabel ?? "Working…")
+						: (destructive.confirm.confirmLabel ?? destructive.label)}
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className={cn("flex items-center gap-2", className)}>
+			{actions.map((action) => (
+				<Button
+					key={action.label}
+					variant={action.variant ?? "ghost"}
+					size="sm"
+					aria-busy={action.busy}
+					aria-label={action.iconOnly ? action.label : undefined}
+					icon={action.busy ? spinner() : action.icon}
+					onClick={() => {
+						if (action.busy) return;
+						action.onClick();
+					}}
+				>
+					{action.busy && action.busyLabel
+						? action.busyLabel
+						: actionLabel(action.label, action.iconOnly)}
+				</Button>
+			))}
+			{destructive && (
+				<Button
+					variant="ghost"
+					size="sm"
+					aria-busy={destructive.busy}
+					aria-label={destructive.iconOnly ? destructive.label : undefined}
+					icon={destructive.busy ? spinner() : destructive.icon}
+					onClick={() => {
+						if (destructive.busy) return;
+						if (destructive.confirm) {
+							setConfirming(true);
+							return;
+						}
+						destructive.onClick();
+					}}
+				>
+					{destructive.busy && destructive.busyLabel
+						? destructive.busyLabel
+						: actionLabel(destructive.label, destructive.iconOnly)}
+				</Button>
+			)}
+		</div>
+	);
+}

package/src/components/search-bar.render.test.ts

@@ -0,0 +1,55 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SearchBar } from "./search-bar.js";
+
+const noop = () => {};
+
+describe("SearchBar", () => {
+	it("renders the search input with an accessible label and placeholder", () => {
+		const html = renderToString(
+			createElement(SearchBar, {
+				value: "",
+				onChange: noop,
+				onClear: noop,
+				placeholder: "Search mail",
+			}),
+		);
+		assert.match(html, /aria-label="Search mail"/);
+		assert.match(html, /placeholder="Search mail"/);
+		assert.match(html, /value=""/);
+	});
+
+	it("omits the clear button while the query is empty", () => {
+		const html = renderToString(
+			createElement(SearchBar, { value: "", onChange: noop, onClear: noop }),
+		);
+		assert.doesNotMatch(html, /aria-label="Clear search"/);
+	});
+
+	it("shows the clear button once a query is present", () => {
+		const html = renderToString(
+			createElement(SearchBar, {
+				value: "receipt",
+				onChange: noop,
+				onClear: noop,
+			}),
+		);
+		assert.match(html, /aria-label="Clear search"/);
+		assert.match(html, /value="receipt"/);
+	});
+
+	it("omits the inline clear button when showClearButton is false", () => {
+		const html = renderToString(
+			createElement(SearchBar, {
+				value: "receipt",
+				onChange: noop,
+				onClear: noop,
+				showClearButton: false,
+			}),
+		);
+		assert.doesNotMatch(html, /aria-label="Clear search"/);
+		assert.match(html, /value="receipt"/);
+	});
+});

package/src/components/search-bar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { SearchBar } from "./search-bar.js";
+
+const meta: Meta<typeof SearchBar> = {
+	title: "Mail/SearchBar",
+	component: SearchBar,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof SearchBar>;
+
+const Interactive = ({ initial = "" }: { initial?: string }) => {
+	const [value, setValue] = useState(initial);
+	return (
+		<div className="w-80">
+			<SearchBar
+				value={value}
+				onChange={setValue}
+				onClear={() => setValue("")}
+				onClearQuery={() => setValue("")}
+				globalFocusKey={false}
+			/>
+		</div>
+	);
+};
+
+export const Empty: Story = {
+	render: () => <Interactive />,
+};
+
+export const Typing: Story = {
+	render: () => <Interactive initial="invoi" />,
+};
+
+export const WithQuery: Story = {
+	render: () => <Interactive initial="from:acme receipt" />,
+};
+
+export const Focused: Story = {
+	render: () => <Interactive />,
+	play: async ({ canvasElement }) => {
+		canvasElement.querySelector<HTMLInputElement>("#mail-search")?.focus();
+	},
+};