@remit/ui 0.0.55 → 0.0.57

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

@@ -5,10 +5,12 @@ import {
 	type FilterAccount,
 	inboxFilterConfig,
 } from "../filter-presets.js";
+import { useSuggestList } from "../lib/use-suggest-list.js";
 import { MobileSearchView } from "./mobile-search-view.js";
 import type { SearchChip } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
 import type { SearchResultSection, SearchScope } from "./search-results.js";
+import { type Suggestion, SuggestList } from "./suggest-list.js";
 
 const phoneFrame: Decorator = (Story) => (
 	<div
@@ -30,6 +32,7 @@ const topMatches: SearchResult[] = [
 	{
 		id: "r1",
 		sender: "Stripe",
+		senderEmail: "receipts@stripe.com",
 		subject: "Your invoice for March is ready",
 		snippet: "Invoice #4821 — €149.00 paid on Visa ending 4242.",
 		date: "9:42",
@@ -39,6 +42,7 @@ const topMatches: SearchResult[] = [
 	{
 		id: "r2",
 		sender: "Hetzner Online",
+		senderEmail: "billing@hetzner.com",
 		subject: "Invoice 2026-03 available in your account",
 		snippet: "Dear customer, your invoice for the period is attached.",
 		date: "Mar 3",
@@ -47,6 +51,7 @@ const topMatches: SearchResult[] = [
 	{
 		id: "r3",
 		sender: "Anna de Vries",
+		senderEmail: "anna@devries.nl",
 		subject: "Re: Q1 invoice approval",
 		snippet: "Approved — can you forward the PDF invoice to finance?",
 		date: "Mar 1",
@@ -55,6 +60,7 @@ const topMatches: SearchResult[] = [
 	{
 		id: "r4",
 		sender: "AWS Billing",
+		senderEmail: "no-reply@aws.amazon.com",
 		subject: "Your invoice is now available",
 		snippet: "Your total for February was $312.55 across 6 services.",
 		date: "Feb 28",
@@ -104,6 +110,7 @@ const crossFolderMatches: SearchResult[] = [
 	{
 		id: "x1",
 		sender: "Mollie",
+		senderEmail: "info@mollie.com",
 		subject: "Invoice 2026-02 — archived",
 		snippet: "Filed last month; payment already settled.",
 		date: "Feb 24",
@@ -112,6 +119,7 @@ const crossFolderMatches: SearchResult[] = [
 	{
 		id: "x2",
 		sender: "Accountant",
+		senderEmail: "jan@boekhouding.example",
 		subject: "Invoices for the quarter",
 		snippet: "The quarterly set, filed with the rest of the bookkeeping.",
 		date: "Jan 30",
@@ -124,6 +132,7 @@ const spamMatches: SearchResult[] = [
 	{
 		id: "s1",
 		sender: "billing@unknown-vendor.test",
+		senderEmail: "billing@unknown-vendor.test",
 		subject: "URGENT invoice attached",
 		snippet: "Wire the amount below within 24 hours to avoid suspension.",
 		date: "Feb 11",
@@ -132,6 +141,7 @@ const spamMatches: SearchResult[] = [
 	{
 		id: "s2",
 		sender: "invoices@pay-now.test",
+		senderEmail: "invoices@pay-now.test",
 		subject: "Outstanding invoice — final notice",
 		snippet: "Your account is overdue. Settle immediately.",
 		date: "Feb 4",
@@ -147,6 +157,26 @@ const acrossFoldersSections: SearchResultSection[] = [
 	},
 ];
 
+/** The folders `in:` can name, as the app's search vocabulary offers them. */
+const folderSuggestions: Suggestion[] = [
+	{ value: "in:Archive", label: "Archive", hint: "matthijs@ischen.nl" },
+	{ value: "in:Inbox", label: "Inbox", hint: "matthijs@ischen.nl" },
+	{ value: 'in:"Sent Items"', label: "Sent Items", hint: "work@acme.test" },
+	{ value: "in:Spam", label: "Spam", hint: "matthijs@ischen.nl" },
+];
+
+/**
+ * Replace the last term with the completion. The app does this over the caret
+ * and the parsed query (`lib/search-suggestions.ts`); the harness keeps the
+ * shape so a story shows what picking a row does.
+ */
+const completeTerm = (value: string, suggestion: Suggestion): string => {
+	const head = value.slice(0, value.search(/\S*$/));
+	return suggestion.value.endsWith(":")
+		? head + suggestion.value
+		: `${head + suggestion.value} `;
+};
+
 type Preset = "brief" | "inbox";
 
 function Harness({
@@ -156,6 +186,8 @@ function Harness({
 	sections,
 	preset,
 	scope,
+	makeFilterDisabledReason,
+	suggestions = [],
 }: {
 	initialValue?: string;
 	initialChips?: SearchChip[];
@@ -163,6 +195,10 @@ function Harness({
 	sections?: SearchResultSection[];
 	preset: Preset;
 	scope?: SearchScope;
+	/** Renders the conversion inert with a reason; it is offered either way. */
+	makeFilterDisabledReason?: string;
+	/** Completions for the term being typed. */
+	suggestions?: Suggestion[];
 }) {
 	const [value, setValue] = useState(initialValue);
 	const [chips, setChips] = useState<SearchChip[]>(initialChips);
@@ -172,6 +208,14 @@ function Harness({
 	const [expanded, setExpanded] = useState(false);
 	const [opened, setOpened] = useState<SearchResult | null>(null);
 
+	const suggest = useSuggestList({
+		count: suggestions.length,
+		onAccept: (index) => {
+			const suggestion = suggestions[index];
+			if (suggestion) setValue((current) => completeTerm(current, suggestion));
+		},
+	});
+
 	const base =
 		preset === "brief"
 			? briefFilterConfig(
@@ -236,6 +280,31 @@ function Harness({
 			loading={loading}
 			onSelectResult={setOpened}
 			scope={scope}
+			makeFilter={{
+				onClick: () => undefined,
+				disabledReason: makeFilterDisabledReason,
+			}}
+			suggest={{
+				comboboxProps: suggest.comboboxProps,
+				onKeyDown: suggest.handleKeyDown,
+				onCaretChange: () => undefined,
+			}}
+			suggestList={
+				suggest.open ? (
+					<SuggestList
+						id={suggest.listId}
+						suggestions={suggestions}
+						activeIndex={suggest.activeIndex}
+						optionId={suggest.optionId}
+						onPick={(suggestion) =>
+							setValue((current) => completeTerm(current, suggestion))
+						}
+						onHighlight={suggest.setActiveIndex}
+						label="Search suggestions"
+						className="mx-row-inset mt-1 shrink-0"
+					/>
+				) : null
+			}
 		/>
 	);
 }
@@ -251,9 +320,10 @@ export default meta;
 type Story = StoryObj<typeof MobileSearchView>;
 
 /**
- * Global search — the daily-brief preset, so the FilterSheet carries the account
- * source row (matthijs@ / work@acme) on top of the shared categories + filters.
- * The header carries a single X that clears the query AND dismisses the takeover.
+ * Global search — the daily-brief preset. The filter chrome is not up: a query
+ * supersedes it, and the row above the results belongs to the conversion the
+ * search itself offers. The header carries a single X that clears the query AND
+ * dismisses the takeover.
  */
 export const GlobalSearch: Story = {
 	render: () => (
@@ -262,8 +332,9 @@ export const GlobalSearch: Story = {
 };
 
 /**
- * Scoped search — a single inbox, so the inbox preset drops the account row
- * entirely (the view is already scoped); same categories and filters otherwise.
+ * Scoped search — a single inbox. It reads exactly like the global one above:
+ * search is scoped by where the user is and differs in nothing else, so the
+ * conversion is offered here too.
  */
 export const ScopedSearch: Story = {
 	render: () => (
@@ -271,7 +342,45 @@ export const ScopedSearch: Story = {
 	),
 };
 
-/** Empty query: recent searches under the brief filter chrome. */
+/**
+ * A query with nothing a filter could match on: the conversion is offered inert
+ * with the reason, rather than withheld and leaving the row to appear and vanish
+ * as the user types.
+ */
+export const NothingToConvert: Story = {
+	render: () => (
+		<Harness
+			initialValue="has:attachment"
+			sections={resultSections}
+			preset="inbox"
+			makeFilterDisabledReason="Add a sender or words to filter on"
+		/>
+	),
+};
+
+/**
+ * A committed token name: the folders `in:` can name, offered under the field.
+ *
+ * The list takes its own space between the field and the results rather than
+ * floating over them — a soft keyboard owns the lower half of this screen, and a
+ * list over the field would cover the query it is completing. Arrows move the
+ * highlight, Enter takes it, Escape closes the list and leaves the query.
+ */
+export const SuggestingFolders: Story = {
+	render: () => (
+		<Harness
+			initialValue="in:"
+			sections={resultSections}
+			preset="inbox"
+			suggestions={folderSuggestions}
+		/>
+	),
+};
+
+/**
+ * Empty query: recent searches under the brief filter chrome. Nothing is being
+ * searched, so the filter sheet has the row — typing hands it to the results.
+ */
 export const Idle: Story = {
 	render: () => <Harness preset="brief" />,
 };

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

@@ -1,10 +1,12 @@
 import { X } from "lucide-react";
+import type { ReactNode } from "react";
 import { Button } from "./button.js";
 import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
 import { SearchBar } from "./search-bar.js";
-import type { SearchChip } from "./search-chip-input.js";
+import type { SearchChip, SearchFieldSuggest } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
 import {
+	type MakeFilterActionProps,
 	type SearchResultSection,
 	SearchResults,
 	type SearchScope,
@@ -22,8 +24,10 @@ export interface MobileSearchViewProps {
 	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.
+	 * the brief-only account source row), shown over the recent searches while the
+	 * field is empty. Feed it `briefFilterConfig(accounts)` or `inboxFilterConfig()`
+	 * from `filter-presets`. Omit to drop the filter chrome. A query supersedes it —
+	 * see the component doc.
 	 */
 	filter?: Omit<FilterSheetProps, "children">;
 	/** Recent searches shown when the query is empty. */
@@ -47,7 +51,16 @@ export interface MobileSearchViewProps {
 	/** What the search covers; see `SearchResultsProps`. Defaults to global. */
 	scope?: SearchScope;
 	/** "Make this a filter" affordance; see `SearchResultsProps`. */
-	makeFilter?: { onClick: () => void; disabledReason?: string };
+	makeFilter?: MakeFilterActionProps;
+	/** Completions for what is being typed; see `SearchChipInput`. */
+	suggest?: SearchFieldSuggest;
+	/**
+	 * The suggestion list itself, rendered directly under the field and above
+	 * the results. In flow rather than over them: on a phone the soft keyboard
+	 * takes the lower half of the screen, and a list floating over the field
+	 * would hide the query it is completing.
+	 */
+	suggestList?: ReactNode;
 }
 
 /**
@@ -57,9 +70,17 @@ export interface MobileSearchViewProps {
  * 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.
+ * the inboxes use); pass no `filter` to drop the chrome. Desktop reuses the same
+ * `SearchResults` body in the list pane. Presentational and prop-driven.
+ *
+ * A query supersedes the filter row. The two narrow the same list by the same
+ * intent, and the row and the search's own "Make this a filter" affordance sit in
+ * the same place, so the filter chrome belongs to the empty field: it covers the
+ * recent searches, and the moment something is typed the results and their
+ * affordance take the space. Clearing the field brings it back.
+ *
+ * Completions for what is being typed sit between the field and the body, so
+ * the list takes its own space rather than covering either of them.
  *
  * Search scope passes straight through, so the phone tier holds spam out,
  * offers it and labels provenance on exactly the same terms as desktop.
@@ -80,6 +101,8 @@ export function MobileSearchView({
 	onRemoveChip,
 	scope,
 	makeFilter,
+	suggest,
+	suggestList,
 }: MobileSearchViewProps) {
 	const body = (
 		<SearchResults
@@ -107,6 +130,7 @@ export function MobileSearchView({
 						onRemoveChip={onRemoveChip}
 						globalFocusKey={false}
 						showClearButton={false}
+						suggest={suggest}
 					/>
 				</div>
 				<Button
@@ -119,7 +143,9 @@ export function MobileSearchView({
 				/>
 			</header>
 
-			{filter ? (
+			{suggestList}
+
+			{filter && value.trim().length === 0 ? (
 				<FilterSheet {...filter}>{body}</FilterSheet>
 			) : (
 				<div className="flex-1 overflow-y-auto">{body}</div>

package/src/components/password-input.render.test.ts

@@ -0,0 +1,149 @@
+/**
+ * The reveal toggle: it starts hidden, flips only the input's `type`, and
+ * renames itself for the state it will produce next. Mounted against jsdom
+ * since the toggle is internal state driven by a real click. React is imported
+ * after the jsdom globals are installed so the controlled-input value tracker
+ * binds to jsdom's prototypes.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import type {
+	act as reactAct,
+	createElement as reactCreateElement,
+} from "react";
+import type { Root, createRoot as reactCreateRoot } from "react-dom/client";
+import type { PasswordInput as PasswordInputType } from "./password-input.js";
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+let act: typeof reactAct;
+let createElement: typeof reactCreateElement;
+let createRoot: typeof reactCreateRoot;
+let PasswordInput: typeof PasswordInputType;
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.Event = dom.window.Event;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+
+	const react = await import("react");
+	act = react.act;
+	createElement = react.createElement;
+	({ createRoot } = await import("react-dom/client"));
+	({ PasswordInput } = await import("./password-input.js"));
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+function field(): HTMLInputElement {
+	return container.querySelector("input") as HTMLInputElement;
+}
+
+function toggle(): HTMLButtonElement {
+	return container.querySelector("button") as HTMLButtonElement;
+}
+
+function click(button: HTMLButtonElement) {
+	act(() => {
+		button.click();
+	});
+}
+
+describe("PasswordInput", () => {
+	it("hides the value and offers to show it", () => {
+		act(() => {
+			root.render(createElement(PasswordInput, { id: "pw" }));
+		});
+		assert.equal(field().getAttribute("type"), "password");
+		assert.equal(toggle().getAttribute("aria-label"), "Show password");
+		assert.equal(toggle().getAttribute("aria-pressed"), "false");
+	});
+
+	it("reveals the value and offers to hide it again", () => {
+		act(() => {
+			root.render(createElement(PasswordInput, { id: "pw" }));
+		});
+		click(toggle());
+		assert.equal(field().getAttribute("type"), "text");
+		assert.equal(toggle().getAttribute("aria-label"), "Hide password");
+		assert.equal(toggle().getAttribute("aria-pressed"), "true");
+
+		click(toggle());
+		assert.equal(field().getAttribute("type"), "password");
+		assert.equal(toggle().getAttribute("aria-label"), "Show password");
+		assert.equal(toggle().getAttribute("aria-pressed"), "false");
+	});
+
+	it("is a button that never submits its form", () => {
+		let submits = 0;
+		act(() => {
+			root.render(
+				createElement(
+					"form",
+					{ onSubmit: () => submits++ },
+					createElement(PasswordInput, { id: "pw" }),
+				),
+			);
+		});
+		assert.equal(toggle().getAttribute("type"), "button");
+		click(toggle());
+		assert.equal(submits, 0);
+	});
+
+	it("leaves the attributes password managers key off untouched", () => {
+		act(() => {
+			root.render(
+				createElement(PasswordInput, {
+					id: "pw",
+					name: "password",
+					autoComplete: "current-password",
+					required: true,
+				}),
+			);
+		});
+		click(toggle());
+		assert.equal(field().getAttribute("name"), "password");
+		assert.equal(field().getAttribute("autocomplete"), "current-password");
+		assert.equal(field().hasAttribute("required"), true);
+	});
+
+	it("does not take focus from the field", () => {
+		act(() => {
+			root.render(createElement(PasswordInput, { id: "pw" }));
+		});
+		assert.notEqual(dom.window.document.activeElement, toggle());
+		assert.equal(toggle().hasAttribute("autofocus"), false);
+	});
+});

package/src/components/password-input.tsx

@@ -0,0 +1,45 @@
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+import { Input, type InputProps } from "./input.js";
+
+/**
+ * Everything `Input` takes except the field chrome this component owns:
+ * `type` flips between "password" and "text", `trailing` holds the toggle, and
+ * the reveal button's inset assumes the boxed `default` variant.
+ */
+export type PasswordInputProps = Omit<
+	InputProps,
+	"type" | "trailing" | "variant"
+>;
+
+/**
+ * A password field with an in-field reveal toggle. Only `type` changes when
+ * revealed — `name`, `autoComplete` and the rest reach the input untouched, so
+ * password managers and autofill behave exactly as they do on a bare field.
+ */
+export function PasswordInput(props: PasswordInputProps) {
+	const [revealed, setRevealed] = useState(false);
+	const RevealIcon = revealed ? EyeOff : Eye;
+	const label = revealed ? "Hide password" : "Show password";
+
+	return (
+		<Input
+			{...props}
+			type={revealed ? "text" : "password"}
+			trailing={
+				// Negative margins grow the hit area to 44px square without
+				// changing the field's height.
+				<button
+					type="button"
+					aria-label={label}
+					aria-pressed={revealed}
+					title={label}
+					onClick={() => setRevealed((shown) => !shown)}
+					className="-my-1 -mr-2 flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-subtle transition-colors hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					<RevealIcon className="size-4" aria-hidden />
+				</button>
+			}
+		/>
+	);
+}

package/src/components/primitives.stories.tsx

@@ -7,6 +7,7 @@ import { Card, CardBody, CardHeader, CardTitle } from "./card.js";
 import { FieldLabel } from "./field-label.js";
 import { Input } from "./input.js";
 import { ListItem } from "./list-item.js";
+import { PasswordInput } from "./password-input.js";
 import { SecuritySelect } from "./security-select.js";
 import { Select } from "./select.js";
 
@@ -74,6 +75,33 @@ export const Inputs: Story = {
 	),
 };
 
+export const PasswordInputs: Story = {
+	render: () => (
+		<div className="max-w-sm space-y-3 p-8">
+			<div>
+				<FieldLabel htmlFor="pw-empty">Password</FieldLabel>
+				<PasswordInput
+					id="pw-empty"
+					autoComplete="current-password"
+					placeholder="Your password"
+				/>
+			</div>
+			<div>
+				<FieldLabel htmlFor="pw-filled">Password or app password</FieldLabel>
+				<PasswordInput
+					id="pw-filled"
+					autoComplete="current-password"
+					defaultValue="hunter2-app-password"
+				/>
+			</div>
+			<p className="text-xs text-fg-subtle">
+				The toggle starts hidden. Its hit area is 44px square and sits beside
+				the value, never over it.
+			</p>
+		</div>
+	),
+};
+
 export const InlineInputs: Story = {
 	render: () => (
 		<div className="max-w-sm space-y-3 p-8">

package/src/components/search-bar.tsx

@@ -2,6 +2,7 @@ import {
 	type SearchChip,
 	SearchChipInput,
 	type SearchChipInputProps,
+	type SearchFieldSuggest,
 } from "./search-chip-input.js";
 
 export type { SearchChip };
@@ -46,6 +47,12 @@ export interface SearchBarProps {
 	 * enclosing label.
 	 */
 	inputId?: string;
+	/**
+	 * Completions for what is being typed; see `SearchChipInput`. The host
+	 * renders the list under the field, so the field itself takes only the
+	 * caret, the keys and the ARIA.
+	 */
+	suggest?: SearchFieldSuggest;
 	className?: string;
 }
 
@@ -67,6 +74,7 @@ export const SearchBar = ({
 	showClearButton = true,
 	size,
 	inputId,
+	suggest,
 	className,
 }: SearchBarProps) => (
 	<SearchChipInput
@@ -81,6 +89,7 @@ export const SearchBar = ({
 		showClearButton={showClearButton}
 		size={size}
 		inputId={inputId}
+		suggest={suggest}
 		className={className}
 	/>
 );