@remit/ui 0.0.1

package/src/components/filter-sheet.tsx

@@ -0,0 +1,316 @@
+import { useCallback, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { isSelfRowActivation } from "../lib/row-keyboard.js";
+import { Badge } from "./badge.js";
+
+export type CategoryTone =
+	| "neutral"
+	| "accent"
+	| "positive"
+	| "warning"
+	| "danger";
+
+export interface FilterSheetCategory {
+	id: string;
+	label: string;
+	tone?: CategoryTone;
+}
+
+export interface FilterSheetFilter {
+	id: string;
+	label: string;
+}
+
+export interface FilterSheetSource {
+	id: string;
+	label: string;
+	count?: number;
+	active?: boolean;
+}
+
+export interface FilterSheetProps {
+	/** Available category options. The first one is treated as "all" (clears category). */
+	categories: FilterSheetCategory[];
+	/** Available attribute filters for multi-toggle. */
+	filters: FilterSheetFilter[];
+	/**
+	 * Source/account pills. Single-select scoping the brief to one account.
+	 * Omitted (or a single entry) hides the source row.
+	 */
+	sources?: FilterSheetSource[];
+	/** Note rendered alongside the source pills (e.g. "+2 muted"). */
+	sourcesNote?: string;
+	/** Currently selected category id. */
+	selectedCategory: string;
+	/** Currently active filter ids. */
+	activeFilters: ReadonlySet<string>;
+	/**
+	 * Whether the filter panel is expanded.
+	 * When omitted the component manages this state internally (collapsed by default).
+	 */
+	expanded?: boolean;
+	/** Called when the user selects a category. */
+	onSelectCategory: (id: string) => void;
+	/** Called when the user selects a source/account pill. */
+	onSelectSource?: (id: string) => void;
+	/** Called when the user toggles a filter on or off. */
+	onToggleFilter: (id: string) => void;
+	/** Called when the user clears all selections back to defaults. */
+	onClear: () => void;
+	/**
+	 * Called when the expanded state changes.
+	 * Required when `expanded` is a controlled prop.
+	 */
+	onExpandedChange?: (expanded: boolean) => void;
+	/**
+	 * The list rendered below the filter. The expanded panel is inline: it pushes
+	 * this content down (the list reflows), it does not overlay it.
+	 */
+	children?: React.ReactNode;
+}
+
+function ChevronDown({ className }: { className?: string }) {
+	return (
+		<svg
+			viewBox="0 0 12 12"
+			className={className}
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={1.5}
+			aria-hidden="true"
+		>
+			<path d="M2 4l4 4 4-4" />
+		</svg>
+	);
+}
+
+function Close({ className }: { className?: string }) {
+	return (
+		<svg
+			viewBox="0 0 12 12"
+			className={className}
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={1.5}
+			aria-hidden="true"
+		>
+			<path d="M3 3l6 6M9 3l-6 6" />
+		</svg>
+	);
+}
+
+export function FilterSheet({
+	categories,
+	filters,
+	sources,
+	sourcesNote,
+	selectedCategory,
+	activeFilters,
+	expanded: expandedProp,
+	onSelectCategory,
+	onSelectSource,
+	onToggleFilter,
+	onClear,
+	onExpandedChange,
+	children,
+}: FilterSheetProps) {
+	const isControlled = expandedProp !== undefined;
+	const [internalOpen, setInternalOpen] = useState(false);
+
+	const open = isControlled ? expandedProp : internalOpen;
+
+	const setOpen = useCallback(
+		(next: boolean) => {
+			if (!isControlled) setInternalOpen(next);
+			onExpandedChange?.(next);
+		},
+		[isControlled, onExpandedChange],
+	);
+
+	const defaultCategory = categories[0];
+	const isDefault =
+		defaultCategory !== undefined && selectedCategory === defaultCategory.id;
+
+	const defaultSource = sources?.[0];
+	const activeSource = sources?.find((s) => s.active);
+	const isDefaultSource =
+		defaultSource === undefined || activeSource?.id === defaultSource.id;
+
+	const hasActive =
+		!isDefault ||
+		activeFilters.size > 0 ||
+		(!isDefaultSource && !!activeSource);
+
+	const clearSource = useCallback(() => {
+		if (defaultSource) onSelectSource?.(defaultSource.id);
+	}, [defaultSource, onSelectSource]);
+
+	const clearAll = useCallback(() => {
+		onClear();
+		clearSource();
+	}, [onClear, clearSource]);
+
+	const activeCategory = categories.find((c) => c.id === selectedCategory);
+
+	const summaryChips = hasActive ? (
+		<>
+			{!isDefaultSource && activeSource && (
+				<span className="inline-flex items-center rounded-full border border-accent-2 bg-accent-2-soft px-2 py-0.5 text-2xs font-medium text-accent-2">
+					{activeSource.label}
+				</span>
+			)}
+			{!isDefault && activeCategory && (
+				<Badge tone={activeCategory.tone ?? "neutral"}>
+					{activeCategory.label}
+				</Badge>
+			)}
+			{filters
+				.filter((f) => activeFilters.has(f.id))
+				.map((f) => (
+					<span
+						key={f.id}
+						className="inline-flex items-center rounded-full border border-accent-2 bg-accent-2-soft px-2 py-0.5 text-2xs font-medium text-accent-2"
+					>
+						{f.label}
+					</span>
+				))}
+		</>
+	) : (
+		<span className="text-2xs text-fg-subtle">Filters</span>
+	);
+
+	const sourceRow = sources && sources.length > 1 && (
+		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-2">
+			{sources.map((source) => (
+				<button
+					key={source.id}
+					type="button"
+					onClick={() => onSelectSource?.(source.id)}
+					className={cn(
+						"flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-2xs transition-colors",
+						source.active
+							? "border-accent-2 bg-accent-2-soft font-medium text-accent-2"
+							: "border-line text-fg-muted hover:border-line-strong",
+					)}
+				>
+					{source.label}
+					{source.count != null && source.count > 0 && (
+						<span className="tabular-nums opacity-70">{source.count}</span>
+					)}
+				</button>
+			))}
+			{sourcesNote && (
+				<span className="ml-auto shrink-0 text-2xs text-fg-subtle">
+					{sourcesNote}
+				</span>
+			)}
+		</div>
+	);
+
+	const categoryRow = (
+		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-1.5 pt-1.5">
+			{categories.map((cat) => {
+				const selected = selectedCategory === cat.id;
+				return (
+					<button
+						key={cat.id}
+						type="button"
+						onClick={() => onSelectCategory(cat.id)}
+						className={cn(
+							"shrink-0 rounded-full transition-opacity",
+							selected
+								? "opacity-100 ring-1 ring-accent-2"
+								: "opacity-60 hover:opacity-100",
+						)}
+					>
+						<Badge tone={cat.tone ?? "neutral"}>{cat.label}</Badge>
+					</button>
+				);
+			})}
+		</div>
+	);
+
+	const filterRow = (
+		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-1.5">
+			{filters.map((f) => {
+				const on = activeFilters.has(f.id);
+				return (
+					<button
+						key={f.id}
+						type="button"
+						onClick={() => onToggleFilter(f.id)}
+						className={cn(
+							"shrink-0 rounded-full border px-2.5 py-0.5 text-2xs transition-colors",
+							on
+								? "border-accent-2 bg-accent-2-soft font-medium text-accent-2"
+								: "border-line text-fg-muted hover:border-line-strong",
+						)}
+					>
+						{f.label}
+					</button>
+				);
+			})}
+			{hasActive && (
+				<button
+					type="button"
+					onClick={clearAll}
+					className="ml-auto flex items-center gap-1 px-1 text-2xs text-fg-subtle hover:text-fg-muted"
+				>
+					<Close className="size-3" />
+					Clear
+				</button>
+			)}
+		</div>
+	);
+
+	return (
+		<div className="flex h-full w-full flex-col overflow-hidden">
+			{/* The toggle is a div-button (not a real <button>) so the Clear
+			    control can be a real nested <button> without invalid
+			    button-in-button nesting. */}
+			{/* biome-ignore lint/a11y/useSemanticElements: nested <button> inside would be invalid button-in-button */}
+			<div
+				role="button"
+				tabIndex={0}
+				aria-expanded={open}
+				aria-label={open ? "Collapse filters" : "Expand filters"}
+				onClick={() => setOpen(!open)}
+				onKeyDown={(e) => {
+					if (!isSelfRowActivation(e)) return;
+					e.preventDefault();
+					setOpen(!open);
+				}}
+				className="flex h-section-row w-full shrink-0 cursor-pointer items-center gap-1.5 overflow-x-hidden border-b border-line bg-surface-sunken px-row-inset text-left hover:bg-surface"
+			>
+				{summaryChips}
+				{hasActive && (
+					<button
+						type="button"
+						aria-label="Clear filters"
+						onClick={(e) => {
+							e.stopPropagation();
+							clearAll();
+						}}
+						className="flex size-6 items-center justify-center text-fg-subtle hover:text-fg-muted"
+					>
+						<Close className="size-3" />
+					</button>
+				)}
+				<ChevronDown
+					className={cn(
+						"ml-auto size-3 shrink-0 text-fg-subtle transition-transform duration-200",
+						open ? "rotate-180" : "rotate-0",
+					)}
+				/>
+			</div>
+			{open && (
+				<div className="shrink-0">
+					{sourceRow}
+					{categoryRow}
+					{filterRow}
+				</div>
+			)}
+			<div className="flex-1 overflow-y-auto">{children}</div>
+		</div>
+	);
+}

package/src/components/folder-role.tsx

@@ -0,0 +1,66 @@
+import {
+	Archive,
+	FileText,
+	Inbox,
+	Mails,
+	OctagonAlert,
+	Send,
+	Star,
+	Trash2,
+} from "lucide-react";
+import type { ReactNode } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Folder role vocabulary (RFC 032 exclusive-folder-appointment,       */
+/* issue #976). The canonical roles are a fixed anchor set the user     */
+/* appoints an existing folder to — see RoleAppointmentList. A folder   */
+/* the account exposes but nobody appointed has no role at all; there   */
+/* is no "custom" role member here (unlike the per-folder role picker   */
+/* this replaced) because a plain folder simply carries no role.        */
+/* ------------------------------------------------------------------ */
+
+export type FolderRole =
+	| "inbox"
+	| "drafts"
+	| "sent"
+	| "archive"
+	| "junk"
+	| "trash"
+	| "flagged"
+	| "all";
+
+/* Canonical English labels, matching the `sidebar.${role}` i18n keys
+   (mail.json). At the app boundary these get localized; the kit ships the
+   English defaults so stories read true. */
+const ROLE_LABEL: Record<FolderRole, string> = {
+	inbox: "Inbox",
+	drafts: "Drafts",
+	sent: "Sent",
+	archive: "Archive",
+	junk: "Spam",
+	trash: "Trash",
+	flagged: "Starred",
+	all: "All Mail",
+};
+
+/** Canonical label for a role. */
+export function canonicalRoleLabel(role: FolderRole): string {
+	return ROLE_LABEL[role];
+}
+
+/** Leaf segment of a provider path (`INBOX/Spam` → `Spam`). */
+export function providerLeaf(providerPath: string): string {
+	const parts = providerPath.split("/");
+	return parts[parts.length - 1] || providerPath;
+}
+
+export function roleIcon(role: FolderRole): ReactNode {
+	if (role === "inbox") return <Inbox className="size-4" />;
+	if (role === "drafts") return <FileText className="size-4" />;
+	if (role === "sent") return <Send className="size-4" />;
+	if (role === "archive") return <Archive className="size-4" />;
+	if (role === "junk") return <OctagonAlert className="size-4" />;
+	if (role === "trash") return <Trash2 className="size-4" />;
+	if (role === "flagged") return <Star className="size-4" />;
+	return <Mails className="size-4" />;
+}

package/src/components/input.tsx

@@ -0,0 +1,44 @@
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { cn } from "../lib/cn.js";
+
+export type InputVariant = "default" | "inline";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+	/** Optional leading icon (lucide-react element). */
+	icon?: ReactNode;
+	/**
+	 * `default` renders the boxed field (border, sunken surface, focus ring).
+	 * `inline` is a borderless, transparent field for inline filter/search
+	 * rows where the surrounding container owns the chrome.
+	 */
+	variant?: InputVariant;
+	/** Forwarded to the underlying `<input>`. */
+	ref?: Ref<HTMLInputElement>;
+}
+
+const wrapperVariants: Record<InputVariant, string> = {
+	default: cn(
+		"flex h-9 items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 text-sm",
+		"focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30 transition-colors",
+	),
+	inline: "flex items-center gap-2 bg-transparent text-sm",
+};
+
+export function Input({
+	icon,
+	className,
+	variant = "default",
+	ref,
+	...props
+}: InputProps) {
+	return (
+		<div className={cn(wrapperVariants[variant], className)}>
+			{icon && <span className="text-fg-subtle shrink-0">{icon}</span>}
+			<input
+				ref={ref}
+				className="min-w-0 flex-1 bg-transparent text-fg placeholder:text-fg-subtle outline-none"
+				{...props}
+			/>
+		</div>
+	);
+}

package/src/components/intelligence-panel.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { IntelligenceData } from "./intelligence-panel.js";
+import { IntelligencePanel } from "./intelligence-panel.js";
+
+const base: IntelligenceData = {
+	sender: {
+		name: "Alex Rivera",
+		email: "alex@example.com",
+		trust: "wellknown",
+		firstSeenLabel: "Jan 2025",
+	},
+	authenticity: {
+		verdict: "aligned",
+		fromDomain: "example.com",
+		dkimDomain: "example.com",
+		summary: "We verified this message was really sent by example.com.",
+	},
+	category: { value: "Personal" },
+	similar: [],
+};
+
+const meta: Meta<typeof IntelligencePanel> = {
+	title: "Screens/Kit/IntelligencePanel",
+	component: IntelligencePanel,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof IntelligencePanel>;
+
+export const Aligned: Story = {
+	args: { data: base },
+};
+
+export const CautionNoSignal: Story = {
+	args: {
+		data: {
+			...base,
+			sender: {
+				name: "Notifications",
+				email: "no-reply@unknown-source.example",
+				trust: "unknown",
+				firstSeenLabel: "today",
+			},
+			authenticity: {
+				verdict: "caution",
+				fromDomain: "unknown-source.example",
+				summary:
+					"We can't verify the sender of this email, which could mean it's from an insecure source.",
+			},
+		},
+	},
+};
+
+export const Impersonation: Story = {
+	args: {
+		data: {
+			...base,
+			sender: {
+				name: "Your Bank",
+				email: "security@your-bank.example",
+				trust: "unknown",
+				firstSeenLabel: "today",
+			},
+			category: { value: "Phishing" },
+			authenticity: {
+				verdict: "mismatch",
+				fromDomain: "your-bank.example",
+				dkimDomain: "mailer.suspicious.example",
+				claimedBrand: "Your Bank",
+				summary:
+					'The display name claims "Your Bank", but this message was actually sent from mailer.suspicious.example — not your-bank.example. Real senders use their own address.',
+				similarCount: 4,
+			},
+		},
+	},
+};
+
+export const UnreadableSender: Story = {
+	args: {
+		data: {
+			...base,
+			sender: {
+				name: "Mailbox Admin",
+				email: "missing_mailbox@missing_domain",
+				trust: "unknown",
+				firstSeenLabel: "today",
+				addressUnverified: true,
+			},
+			category: { value: "Phishing" },
+			authenticity: {
+				verdict: "mismatch",
+				fromDomain: "",
+				addressUnreadable: true,
+				summary:
+					"We couldn't read this sender's address, so we can't confirm who really sent this message.",
+			},
+		},
+	},
+};
+
+export const WithSimilarMessages: Story = {
+	args: {
+		similarLinkComponent: ({
+			mailboxId,
+			messageId,
+			className,
+			ariaLabel,
+			children,
+		}) => (
+			<a
+				href={`/mail/${mailboxId}?selectedMessageId=${messageId}`}
+				className={className}
+				aria-label={ariaLabel}
+			>
+				{children}
+			</a>
+		),
+		data: {
+			...base,
+			similar: [
+				{
+					id: "msg-1",
+					mailboxId: "mbx-1",
+					fromName: "Alex Rivera",
+					subject: "Re: Q3 planning notes",
+					timeLabel: "Jan 17",
+					matched: "subject",
+				},
+				{
+					id: "msg-2",
+					mailboxId: "mbx-1",
+					fromName: "Billing",
+					subject: "Your invoice is ready",
+					timeLabel: "Yesterday",
+					matched: "body",
+				},
+				{
+					id: "msg-3",
+					mailboxId: "mbx-2",
+					fromName: "",
+					subject: "(No subject)",
+					timeLabel: "Dec 4, 2024",
+					matched: "sender",
+				},
+			],
+		},
+	},
+};