@remit/ui 0.0.1

package/src/components/sender-trust-indicator.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SenderTrustIndicator } from "./sender-trust-indicator.js";
+
+const meta: Meta<typeof SenderTrustIndicator> = {
+	title: "Mail/SenderTrustIndicator",
+	component: SenderTrustIndicator,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof SenderTrustIndicator>;
+
+const Cell = ({
+	label,
+	children,
+}: {
+	label: string;
+	children: React.ReactNode;
+}) => (
+	<div className="flex items-center gap-2">
+		<span className="w-40 text-sm text-fg-muted">{label}</span>
+		{children}
+	</div>
+);
+
+export const HeaderSize: Story = {
+	name: "Header (md)",
+	render: () => (
+		<div className="space-y-2">
+			<Cell label="vip">
+				<SenderTrustIndicator senderTrust="vip" size="md" />
+			</Cell>
+			<Cell label="unknown — new sender">
+				<SenderTrustIndicator senderTrust="unknown" size="md" />
+			</Cell>
+			<Cell label="wellknown — silent">
+				<SenderTrustIndicator senderTrust="wellknown" size="md" />
+			</Cell>
+		</div>
+	),
+};
+
+export const RowSize: Story = {
+	name: "Inbox row (sm)",
+	render: () => (
+		<div className="space-y-2">
+			<Cell label="vip">
+				<SenderTrustIndicator senderTrust="vip" size="sm" />
+			</Cell>
+			<Cell label="unknown — silent on rows">
+				<SenderTrustIndicator senderTrust="unknown" size="sm" />
+			</Cell>
+			<Cell label="wellknown — silent">
+				<SenderTrustIndicator senderTrust="wellknown" size="sm" />
+			</Cell>
+		</div>
+	),
+};

package/src/components/sender-trust-indicator.tsx

@@ -0,0 +1,87 @@
+import { Sparkles } from "lucide-react";
+import { cn } from "../lib/cn.js";
+
+export type SenderTrust = "unknown" | "wellknown" | "vip";
+
+export interface SenderTrustIndicatorProps {
+	senderTrust: SenderTrust;
+	/** Larger size for the open-message header. */
+	size?: "sm" | "md";
+	className?: string;
+}
+
+export type SenderTrustVariant = "vip" | "unknown-pill" | "hidden";
+
+/**
+ * Decide which visual to render for a given trust level + size.
+ *
+ *  - `vip`          → sparkles icon (every size).
+ *  - `unknown-pill` → "new sender" pill, only at `size="md"` (open-message header).
+ *                     Hidden at `size="sm"` (inbox row): post-rollout, most
+ *                     senders start as `unknown`, so painting a "new" pill on
+ *                     every row would be noisy and defeat the purpose of the
+ *                     signal.
+ *  - `hidden`       → render nothing. Includes `wellknown` at every size and
+ *                     `unknown` at `size="sm"`.
+ *
+ * Pulled out of the React component so the decision is testable without a
+ * DOM renderer.
+ */
+export const selectSenderTrustVariant = (
+	senderTrust: SenderTrust,
+	size: "sm" | "md",
+): SenderTrustVariant => {
+	if (senderTrust === "vip") return "vip";
+	if (senderTrust === "unknown" && size === "md") return "unknown-pill";
+	return "hidden";
+};
+
+/**
+ * Inline indicator for the sender's trust gradient.
+ *
+ * Per EDD #232: trust is a UI hint, not a security boundary. Keep visuals
+ * subtle. The `trusted` flag (image rendering) stays orthogonal — handled
+ * separately by `AddressDisplay`.
+ */
+export const SenderTrustIndicator = ({
+	senderTrust,
+	size = "sm",
+	className,
+}: SenderTrustIndicatorProps) => {
+	const variant = selectSenderTrustVariant(senderTrust, size);
+
+	if (variant === "vip") {
+		return (
+			<Sparkles
+				className={cn(
+					"text-warning shrink-0",
+					size === "sm" && "size-3.5",
+					size === "md" && "size-4",
+					className,
+				)}
+				aria-label="VIP sender"
+				data-testid="sender-trust-vip"
+			/>
+		);
+	}
+
+	if (variant === "unknown-pill") {
+		return (
+			// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label provides useful context for assistive tech despite generic span role
+			<span
+				className={cn(
+					"inline-flex items-center rounded border border-dashed border-fg-subtle/40 font-medium uppercase tracking-wide text-fg-muted/80 shrink-0",
+					"px-2 py-0.5 text-xs",
+					className,
+				)}
+				title="First message from this sender"
+				aria-label="First message from this sender"
+				data-testid="sender-trust-unknown"
+			>
+				new
+			</span>
+		);
+	}
+
+	return null;
+};

package/src/components/settings-primitives.render.test.ts

@@ -0,0 +1,160 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { Button } from "./button.js";
+import { DangerZoneSection } from "./danger-zone-section.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { SenderGroupSwitch } from "./sender-group-switch.js";
+import { SettingsShell } from "./settings-screen.js";
+
+describe("SegmentedControl (#802)", () => {
+	it("is a radiogroup with one checked radio and thumb-sized targets", () => {
+		const html = renderToString(
+			createElement(SegmentedControl, {
+				name: "density",
+				value: "compact",
+				onChange: () => undefined,
+				options: [
+					{ value: "comfortable", label: "Comfortable" },
+					{ value: "compact", label: "Compact" },
+				],
+			}),
+		);
+		assert.match(html, /role="radiogroup"/);
+		assert.match(html, /min-h-11/);
+		assert.equal((html.match(/type="radio"/g) ?? []).length, 2);
+		assert.match(html, /checked[^>]*value="compact"/);
+	});
+
+	it("active thumb uses filled card shadow (#848)", () => {
+		const html = renderToString(
+			createElement(SegmentedControl, {
+				name: "theme",
+				value: "system",
+				onChange: () => undefined,
+				options: [
+					{ value: "system", label: "System" },
+					{ value: "light", label: "Light" },
+					{ value: "dark", label: "Dark" },
+				],
+			}),
+		);
+		// shadow (not shadow-sm) on the active thumb
+		assert.match(html, /bg-surface[^"]*\bshadow\b/);
+	});
+
+	it("renders dividers between inactive segments (#848)", () => {
+		// active = system (index 0): light→dark boundary gets a divider
+		const html = renderToString(
+			createElement(SegmentedControl, {
+				name: "theme",
+				value: "system",
+				onChange: () => undefined,
+				options: [
+					{ value: "system", label: "System" },
+					{ value: "light", label: "Light" },
+					{ value: "dark", label: "Dark" },
+				],
+			}),
+		);
+		assert.match(html, /after:bg-line/);
+	});
+});
+
+describe("SenderGroupSwitch (#790)", () => {
+	it("renders a tablist that is a strip on mobile and a rail (lg) on desktop", () => {
+		const html = renderToString(
+			createElement(SenderGroupSwitch, {
+				active: "vip",
+				onSelect: () => undefined,
+				options: [
+					{ id: "vip", label: "VIPs", count: 12 },
+					{ id: "muted", label: "Muted", count: null },
+					{ id: "blocked", label: "Blocked", count: null },
+				],
+			}),
+		);
+		assert.match(html, /role="tablist"/);
+		assert.match(html, /lg:w-44/);
+		assert.match(html, /lg:flex-col/);
+		assert.match(html, /aria-selected="true"/);
+		assert.match(html, /—/);
+	});
+});
+
+describe("DangerZoneSection (#791)", () => {
+	it("keeps the strong 'Delete your Remit account' label and renders its action", () => {
+		const html = renderToString(
+			createElement(DangerZoneSection, {
+				title: "Delete your Remit account",
+				description: "Disconnects every account.",
+				action: createElement(
+					Button,
+					{ variant: "danger", size: "sm" },
+					"Delete your Remit account",
+				),
+			}),
+		);
+		assert.equal(
+			(html.match(/Delete your Remit account/g) ?? []).length >= 2,
+			true,
+		);
+		assert.match(html, /Danger zone/);
+	});
+});
+
+describe("SettingsShell responsive (#789)", () => {
+	const shell = (flush?: boolean) =>
+		renderToString(
+			createElement(SettingsShell, {
+				items: [
+					{ id: "accounts", label: "Accounts" },
+					{ id: "senders", label: "Senders & Rules" },
+				],
+				activeId: "accounts",
+				title: "Accounts",
+				help: createElement("p", null, "tips"),
+				flush,
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "pane body"),
+			}),
+		);
+
+	const shellNoHelp = () =>
+		renderToString(
+			createElement(SettingsShell, {
+				items: [
+					{ id: "accounts", label: "Accounts" },
+					{ id: "senders", label: "Senders & Rules" },
+				],
+				activeId: "accounts",
+				title: "Accounts",
+				// biome-ignore lint/correctness/noChildrenProp: React 19 types require children in props object when using createElement
+				children: createElement("div", null, "pane body"),
+			}),
+		);
+
+	it("hides the nav rail below desktop and shows a menu button to reach it", () => {
+		const html = shell();
+		assert.match(html, /hidden w-60[^"]*lg:flex/);
+		assert.match(html, /aria-label="Open settings menu"/);
+	});
+
+	it("folds the tips rail to desktop-only with a mobile tips disclosure", () => {
+		const html = shell();
+		assert.match(html, /hidden w-64[^"]*lg:flex/);
+		assert.match(html, /aria-label="Tips"/);
+	});
+
+	it("renders the active pane content so it is reachable on every width", () => {
+		assert.match(shell(), /pane body/);
+		assert.match(shell(true), /pane body/);
+	});
+
+	it("omits the tips toggle when no help prop is passed (#872)", () => {
+		const html = shellNoHelp();
+		assert.doesNotMatch(html, /aria-label="Tips"/);
+		assert.doesNotMatch(html, /aria-label="Show tips"/);
+	});
+});

package/src/components/settings-primitives.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { DangerZoneSection } from "./danger-zone-section.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { SenderGroupSwitch } from "./sender-group-switch.js";
+
+const meta: Meta = {
+	title: "Settings/Primitives",
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const SegmentedControls: Story = {
+	render: () => {
+		const [density, setDensity] = useState("comfortable");
+		const [theme, setTheme] = useState("system");
+		return (
+			<div className="flex flex-col gap-6 p-8">
+				<SegmentedControl
+					name="density"
+					aria-label="Density"
+					value={density}
+					onChange={setDensity}
+					options={[
+						{ value: "comfortable", label: "Comfortable" },
+						{ value: "compact", label: "Compact" },
+					]}
+				/>
+				<SegmentedControl
+					name="theme"
+					aria-label="Theme"
+					value={theme}
+					onChange={setTheme}
+					options={[
+						{ value: "system", label: "System" },
+						{ value: "light", label: "Light" },
+						{ value: "dark", label: "Dark" },
+					]}
+				/>
+			</div>
+		);
+	},
+};
+
+export const SenderGroupSwitchRail: Story = {
+	render: () => {
+		const [active, setActive] = useState("vip");
+		return (
+			<div className="flex h-96 p-8">
+				<SenderGroupSwitch
+					active={active}
+					onSelect={setActive}
+					options={[
+						{ id: "vip", label: "VIPs", count: 12 },
+						{ id: "muted", label: "Muted", count: null },
+						{ id: "blocked", label: "Blocked", count: null },
+					]}
+				/>
+			</div>
+		);
+	},
+};
+
+export const DangerZone: Story = {
+	render: () => (
+		<div className="max-w-2xl p-8">
+			<DangerZoneSection
+				title="Delete your Remit account"
+				description="Disconnects every account and erases Remit's copy of your mail, insights and preferences. Your mail at the providers is untouched."
+				action={
+					<Button variant="danger" size="sm">
+						Delete your Remit account
+					</Button>
+				}
+			/>
+		</div>
+	),
+};