@remit/ui 0.0.1

package/src/components/mobile-search-view.tsx

@@ -0,0 +1,100 @@
+import { X } from "lucide-react";
+import { Button } from "./button.js";
+import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import { SearchBar } from "./search-bar.js";
+import type { SearchResult } from "./search-result-row.js";
+import { type SearchResultSection, SearchResults } from "./search-results.js";
+
+export interface MobileSearchViewProps {
+	value: string;
+	onChange: (value: string) => void;
+	/** Query-only clear (Esc key). The visible X uses {@link onCancel}. */
+	onClear: () => void;
+	/**
+	 * The single dismiss control (X): clears the query AND closes the takeover so
+	 * the view returns to the plain list with no stranded query/URL state.
+	 */
+	onCancel: () => void;
+	/**
+	 * The shared FilterSheet config (categories + Unread/Flagged/attachment, plus
+	 * the brief-only account source row). Feed it `briefFilterConfig(accounts)` or
+	 * `inboxFilterConfig()` from `filter-presets`. Omit to drop the filter chrome.
+	 */
+	filter?: Omit<FilterSheetProps, "children">;
+	/** Recent searches shown when the query is empty. */
+	recentSearches?: string[];
+	onPickRecent?: (query: string) => void;
+	/** Grouped result sections (e.g. "Top matches", "Related"). */
+	sections?: SearchResultSection[];
+	loading?: boolean;
+	onSelectResult?: (result: SearchResult) => void;
+	/** Active filter-token chips parsed from the query; see `SearchResultsProps`. */
+	tokens?: { label: string; onRemove: () => void }[];
+}
+
+/**
+ * The full-screen mobile search takeover. Mirrors `MobileReadingPane` chrome: a
+ * fixed top bar with the shared `SearchBar` and a single X that both clears the
+ * query and dismisses the takeover (the bar's own inline clear is suppressed so
+ * there is exactly one X). Below the bar the shared `SearchResults` body rides
+ * inside the shared `FilterSheet` (the
+ * same categories, Unread/Flagged/attachment toggles, and brief-only account row
+ * the inboxes use) so search carries identical filters; pass no `filter` to drop
+ * the chrome. Desktop reuses the same `SearchResults` body in the list pane.
+ * Presentational and prop-driven.
+ */
+export function MobileSearchView({
+	value,
+	onChange,
+	onClear,
+	onCancel,
+	filter,
+	recentSearches,
+	onPickRecent,
+	sections,
+	loading,
+	onSelectResult,
+	tokens,
+}: MobileSearchViewProps) {
+	const body = (
+		<SearchResults
+			value={value}
+			recentSearches={recentSearches}
+			onPickRecent={onPickRecent}
+			sections={sections}
+			loading={loading}
+			onSelectResult={onSelectResult}
+			tokens={tokens}
+		/>
+	);
+
+	return (
+		<article className="flex h-full w-full min-w-0 flex-col bg-canvas">
+			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line bg-surface px-row-inset">
+				<div className="min-w-0 flex-1">
+					<SearchBar
+						value={value}
+						onChange={onChange}
+						onClear={onClear}
+						globalFocusKey={false}
+						showClearButton={false}
+					/>
+				</div>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<X className="size-4" />}
+					onClick={onCancel}
+					aria-label="Clear and close search"
+					className="-mr-1 shrink-0"
+				/>
+			</header>
+
+			{filter ? (
+				<FilterSheet {...filter}>{body}</FilterSheet>
+			) : (
+				<div className="flex-1 overflow-y-auto">{body}</div>
+			)}
+		</article>
+	);
+}

package/src/components/move-mailbox-picker.render.test.ts

@@ -0,0 +1,113 @@
+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,
+	MoveMailboxPicker,
+	moveMailboxPickerInternals,
+} from "./move-mailbox-picker.js";
+
+const {
+	findFirstSelectable,
+	findLastSelectable,
+	findNextSelectable,
+	matchesQuery,
+} = moveMailboxPickerInternals;
+
+const options: MoveMailboxOption[] = [
+	{ id: "inbox", label: "Inbox", isCurrent: true },
+	{ id: "archive", label: "Archive" },
+	{ id: "trash", label: "Trash" },
+];
+
+describe("roving-focus selection", () => {
+	it("skips the current folder when finding the first selectable", () => {
+		assert.equal(findFirstSelectable(options), 1);
+	});
+
+	it("finds the last selectable", () => {
+		assert.equal(findLastSelectable(options), 2);
+	});
+
+	it("wraps forward over the non-selectable current folder", () => {
+		assert.equal(findNextSelectable(options, 2, 1), 1);
+	});
+
+	it("wraps backward over the non-selectable current folder", () => {
+		assert.equal(findNextSelectable(options, 1, -1), 2);
+	});
+
+	it("returns -1 when every option is the current folder", () => {
+		const allCurrent: MoveMailboxOption[] = [
+			{ id: "a", label: "A", isCurrent: true },
+		];
+		assert.equal(findFirstSelectable(allCurrent), -1);
+		assert.equal(findNextSelectable(allCurrent, 0, 1), -1);
+	});
+});
+
+describe("query matching", () => {
+	it("matches on the display label, case-insensitively", () => {
+		assert.equal(matchesQuery({ id: "a", label: "Archive" }, "arch"), true);
+	});
+
+	it("matches on the hidden searchValue (nested path)", () => {
+		assert.equal(
+			matchesQuery(
+				{ id: "r", label: "Receipts", searchValue: "finance/receipts" },
+				"finance/",
+			),
+			true,
+		);
+	});
+
+	it("does not match unrelated text", () => {
+		assert.equal(matchesQuery({ id: "a", label: "Archive" }, "spam"), false);
+	});
+});
+
+describe("MoveMailboxPicker render", () => {
+	it("renders each mailbox as a listbox option", () => {
+		const html = renderToString(
+			createElement(MoveMailboxPicker, {
+				mailboxes: options,
+				onSelect: () => {},
+			}),
+		);
+		assert.match(html, /role="listbox"/);
+		const optionCount = html.match(/role="option"/g)?.length ?? 0;
+		assert.equal(optionCount, 3);
+	});
+
+	it("marks the current folder as a non-interactive marker, never a disabled button", () => {
+		const html = renderToString(
+			createElement(MoveMailboxPicker, {
+				mailboxes: options,
+				onSelect: () => {},
+			}),
+		);
+		assert.match(html, /aria-label="Inbox \(current folder\)"/);
+		assert.match(html, /aria-current="true"/);
+		assert.match(html, /aria-label="Move to Archive"/);
+		assert.doesNotMatch(html, /disabled/);
+	});
+
+	it("renders the empty state when there are no mailboxes", () => {
+		const html = renderToString(
+			createElement(MoveMailboxPicker, { mailboxes: [], onSelect: () => {} }),
+		);
+		assert.match(html, /No folders match/);
+	});
+
+	it("applies caller-supplied labels", () => {
+		const html = renderToString(
+			createElement(MoveMailboxPicker, {
+				mailboxes: options,
+				onSelect: () => {},
+				labels: { optionLabel: (label) => `Verplaats naar ${label}` },
+			}),
+		);
+		assert.match(html, /aria-label="Verplaats naar Archive"/);
+	});
+});

package/src/components/move-mailbox-picker.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+	type MoveMailboxOption,
+	MoveMailboxPicker,
+} from "./move-mailbox-picker.js";
+
+const mailboxes: MoveMailboxOption[] = [
+	{ id: "inbox", label: "Inbox", isCurrent: true },
+	{ id: "archive", label: "Archive" },
+	{ id: "trash", label: "Trash" },
+	{ id: "spam", label: "Spam" },
+	{ id: "receipts", label: "Receipts", searchValue: "finance/receipts" },
+	{ id: "travel", label: "Travel", searchValue: "finance/travel" },
+	{ id: "newsletters", label: "Newsletters" },
+];
+
+const manyMailboxes: MoveMailboxOption[] = [
+	{ id: "inbox", label: "Inbox", isCurrent: true },
+	...Array.from({ length: 24 }, (_, i) => ({
+		id: `folder-${i}`,
+		label: `Project ${String(i + 1).padStart(2, "0")}`,
+	})),
+];
+
+const meta: Meta<typeof MoveMailboxPicker> = {
+	title: "Mail/MoveMailboxPicker",
+	component: MoveMailboxPicker,
+	parameters: { layout: "centered" },
+	decorators: [
+		(Story) => (
+			<div className="w-72 max-h-96 overflow-hidden rounded-md border border-line bg-surface shadow-lg">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof MoveMailboxPicker>;
+
+const Picker = ({ options }: { options: MoveMailboxOption[] }) => {
+	const [moved, setMoved] = useState<string | null>(null);
+	return (
+		<div className="flex flex-col">
+			<MoveMailboxPicker mailboxes={options} onSelect={setMoved} />
+			{moved && (
+				<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
+					Moved to {moved}
+				</p>
+			)}
+		</div>
+	);
+};
+
+export const Default: Story = {
+	name: "Default (current folder marked)",
+	render: () => <Picker options={mailboxes} />,
+};
+
+export const ManyMailboxes: Story = {
+	name: "Many mailboxes (scrolls)",
+	render: () => <Picker options={manyMailboxes} />,
+};
+
+export const Empty: Story = {
+	name: "Empty list",
+	render: () => <Picker options={[]} />,
+};
+
+export const Autofocus: Story = {
+	name: "Autofocus search (mobile sheet)",
+	render: () => (
+		<MoveMailboxPicker mailboxes={mailboxes} onSelect={() => {}} autoFocus />
+	),
+};

package/src/components/move-mailbox-picker.tsx

@@ -0,0 +1,324 @@
+import { Search } from "lucide-react";
+import {
+	type KeyboardEvent as ReactKeyboardEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { cn } from "../lib/cn.js";
+import { Input } from "./input.js";
+
+export interface MoveMailboxOption {
+	/** Stable identity passed back to `onSelect`. */
+	id: string;
+	/** Display label shown in the row and matched against the search query. */
+	label: string;
+	/**
+	 * The message's current folder. Rendered as a non-selectable row so the
+	 * user sees where the message lives but can't move it onto itself.
+	 */
+	isCurrent?: boolean;
+	/**
+	 * Optional secondary string matched alongside `label` (e.g. the full
+	 * folder path so "gmail/" narrows nested folders). Never displayed.
+	 */
+	searchValue?: string;
+}
+
+export interface MoveMailboxPickerLabels {
+	/** Search input placeholder. */
+	searchPlaceholder?: string;
+	/** Accessible label for the search input. */
+	searchAriaLabel?: string;
+	/** Accessible label for the listbox. */
+	listAriaLabel?: string;
+	/** Suffix announced for the current folder, e.g. `(current folder)`. */
+	currentSuffix?: string;
+	/** Inline tag shown on the current folder row. */
+	currentTag?: string;
+	/** Builds the empty-state message for a query that matches nothing. */
+	emptyMessage?: (query: string) => string;
+	/** Builds the accessible label for a selectable row, e.g. `Move to X`. */
+	optionLabel?: (label: string) => string;
+}
+
+export interface MoveMailboxPickerProps {
+	/**
+	 * Destinations to show, already filtered, ordered and labeled by the app.
+	 * The kit owns only search, focus and keyboard — never data shaping.
+	 */
+	mailboxes: readonly MoveMailboxOption[];
+	onSelect: (mailboxId: string) => void;
+	/**
+	 * Called when the user dismisses the picker via Escape. Trigger consumers
+	 * use this to close their popover/drawer; the picker never owns
+	 * presentation, so it cannot close itself without help.
+	 */
+	onCancel?: () => void;
+	/**
+	 * Mobile callers (bottom-sheet) pass `autoFocus` to focus the search input
+	 * as soon as the sheet opens — keyboard accessory + immediate filter typing
+	 * without an extra tap. Desktop dropdowns leave focus on the trigger so
+	 * click-outside dismissal stays predictable.
+	 */
+	autoFocus?: boolean;
+	labels?: MoveMailboxPickerLabels;
+}
+
+const ROW_BASE =
+	"w-full text-left px-3 py-2.5 min-h-11 flex items-center gap-2 transition-colors text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+
+const defaultLabels: Required<MoveMailboxPickerLabels> = {
+	searchPlaceholder: "Move to…",
+	searchAriaLabel: "Filter folders",
+	listAriaLabel: "Destination folders",
+	currentSuffix: "(current folder)",
+	currentTag: "current",
+	emptyMessage: (query) => `No folders match "${query}"`,
+	optionLabel: (label) => `Move to ${label}`,
+};
+
+const findFirstSelectable = (options: readonly MoveMailboxOption[]): number => {
+	for (let i = 0; i < options.length; i += 1) {
+		if (!options[i]?.isCurrent) return i;
+	}
+	return -1;
+};
+
+const findLastSelectable = (options: readonly MoveMailboxOption[]): number => {
+	for (let i = options.length - 1; i >= 0; i -= 1) {
+		if (!options[i]?.isCurrent) return i;
+	}
+	return -1;
+};
+
+const findNextSelectable = (
+	options: readonly MoveMailboxOption[],
+	from: number,
+	step: 1 | -1,
+): number => {
+	const count = options.length;
+	if (count <= 0) return -1;
+	const start = from < 0 ? (step === 1 ? -1 : count) : from;
+	for (let offset = 1; offset <= count; offset += 1) {
+		const candidate = (((start + step * offset) % count) + count) % count;
+		if (!options[candidate]?.isCurrent) return candidate;
+	}
+	return -1;
+};
+
+const matchesQuery = (option: MoveMailboxOption, query: string): boolean => {
+	if (option.label.toLowerCase().includes(query)) return true;
+	return option.searchValue?.toLowerCase().includes(query) ?? false;
+};
+
+/**
+ * Move-to-folder destination picker: an always-on search input over a
+ * roving-focus listbox. Data-agnostic — the app supplies pre-shaped,
+ * pre-ordered options and performs the move in `onSelect`; the kit owns search
+ * filtering, keyboard navigation and ARIA structure.
+ */
+export const MoveMailboxPicker = ({
+	mailboxes,
+	onSelect,
+	onCancel,
+	autoFocus = false,
+	labels,
+}: MoveMailboxPickerProps) => {
+	const text = { ...defaultLabels, ...labels };
+	const [query, setQuery] = useState("");
+	const [focusedIndex, setFocusedIndex] = useState<number>(() =>
+		findFirstSelectable(mailboxes),
+	);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+	useEffect(() => {
+		if (autoFocus) inputRef.current?.focus();
+	}, [autoFocus]);
+
+	const trimmedQuery = query.trim().toLowerCase();
+	const filtered = useMemo(() => {
+		if (!trimmedQuery) return [...mailboxes];
+		return mailboxes.filter((mailbox) => matchesQuery(mailbox, trimmedQuery));
+	}, [mailboxes, trimmedQuery]);
+
+	useEffect(() => {
+		setFocusedIndex((current) => {
+			if (
+				current >= 0 &&
+				current < filtered.length &&
+				!filtered[current]?.isCurrent
+			) {
+				return current;
+			}
+			return findFirstSelectable(filtered);
+		});
+	}, [filtered]);
+
+	useEffect(() => {
+		if (focusedIndex < 0) return;
+		const node = optionRefs.current[focusedIndex];
+		if (!node) return;
+		// Only steal focus if the user is already navigating the list — moving
+		// focus while they type in the filter input would trap them. The search
+		// input keeps focus until the first ArrowDown.
+		if (document.activeElement === inputRef.current) return;
+		node.focus();
+	}, [focusedIndex]);
+
+	const handleConfirm = useCallback(() => {
+		if (focusedIndex < 0) return;
+		const target = filtered[focusedIndex];
+		if (!target || target.isCurrent) return;
+		onSelect(target.id);
+	}, [focusedIndex, filtered, onSelect]);
+
+	const handleListKeyDown = useCallback(
+		(event: ReactKeyboardEvent<HTMLElement>) => {
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					setFocusedIndex((current) =>
+						findNextSelectable(filtered, current, 1),
+					);
+					return;
+				case "ArrowUp":
+					event.preventDefault();
+					setFocusedIndex((current) =>
+						findNextSelectable(filtered, current, -1),
+					);
+					return;
+				case "Home":
+					event.preventDefault();
+					setFocusedIndex(findFirstSelectable(filtered));
+					return;
+				case "End":
+					event.preventDefault();
+					setFocusedIndex(findLastSelectable(filtered));
+					return;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					handleConfirm();
+					return;
+				case "Escape":
+					event.preventDefault();
+					onCancel?.();
+					return;
+				default:
+					return;
+			}
+		},
+		[filtered, handleConfirm, onCancel],
+	);
+
+	const handleInputKeyDown = useCallback(
+		(event: ReactKeyboardEvent<HTMLInputElement>) => {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				if (filtered.length === 0) return;
+				const target = optionRefs.current[focusedIndex >= 0 ? focusedIndex : 0];
+				target?.focus();
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onCancel?.();
+			}
+		},
+		[filtered.length, focusedIndex, onCancel],
+	);
+
+	return (
+		<div className="flex flex-col">
+			<Input
+				variant="inline"
+				className="border-b border-line px-3 py-2"
+				icon={<Search className="size-4" aria-hidden="true" />}
+				ref={inputRef}
+				type="search"
+				value={query}
+				onChange={(event) => setQuery(event.target.value)}
+				onKeyDown={handleInputKeyDown}
+				placeholder={text.searchPlaceholder}
+				aria-label={text.searchAriaLabel}
+			/>
+			<div
+				className="flex-1 overflow-y-auto py-1"
+				role="listbox"
+				aria-label={text.listAriaLabel}
+				onKeyDown={handleListKeyDown}
+			>
+				{filtered.length === 0 ? (
+					<div className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
+						{text.emptyMessage(query)}
+					</div>
+				) : (
+					filtered.map((mailbox, idx) => {
+						const isCurrent = mailbox.isCurrent ?? false;
+						const isFocused = idx === focusedIndex;
+						// The current folder is a "you are here" marker, not a target —
+						// rendered as a static option (never a disabled control) so the
+						// user can see where the message lives without a dead button.
+						// Selectable folders are real <button> options. Each interactive
+						// element IS the listbox option: a role="option" <div> wrapping a
+						// separately-interactive <button> is invalid ARIA.
+						if (isCurrent) {
+							return (
+								<div key={mailbox.id}>
+									{/* biome-ignore lint/a11y/useFocusableInteractive: focus managed by the parent listbox component */}
+									<div
+										role="option"
+										aria-selected={false}
+										aria-current="true"
+										aria-label={`${mailbox.label} ${text.currentSuffix}`}
+										className={cn(ROW_BASE, "opacity-60 bg-surface-sunken/40")}
+									>
+										<span className="truncate flex-1">{mailbox.label}</span>
+										<span className="text-xs text-fg-muted shrink-0">
+											{text.currentTag}
+										</span>
+									</div>
+								</div>
+							);
+						}
+						return (
+							<div key={mailbox.id}>
+								<button
+									ref={(node) => {
+										optionRefs.current[idx] = node;
+									}}
+									type="button"
+									role="option"
+									aria-selected={false}
+									tabIndex={isFocused ? 0 : -1}
+									onClick={() => onSelect(mailbox.id)}
+									onFocus={() => setFocusedIndex(idx)}
+									aria-label={text.optionLabel(mailbox.label)}
+									className={cn(ROW_BASE, "hover:bg-surface-raised")}
+								>
+									<span className="truncate flex-1">{mailbox.label}</span>
+								</button>
+							</div>
+						);
+					})
+				)}
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Pure selection/filter helpers exposed for unit testing the roving-focus and
+ * search logic without a DOM. Component consumers should use
+ * {@link MoveMailboxPicker} instead.
+ */
+export const moveMailboxPickerInternals = {
+	findFirstSelectable,
+	findLastSelectable,
+	findNextSelectable,
+	matchesQuery,
+};