@remit/ui 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "type": "module",
   "files": [
     "src"
@@ -26,6 +26,7 @@
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
+    "tldts": "^7.4.9",
     "@types/dompurify": "*"
   },
   "peerDependencies": {

package/src/components/app-shell-types.ts

@@ -199,7 +199,14 @@ export interface ThreadRowLabel {
 
 export interface ThreadRowData {
 	id: string;
-	accountId: string;
+	/**
+	 * Owning IMAP account — the `accountId` path parameter of the account API,
+	 * never the caller's `accountConfigId`. Optional because rows from
+	 * per-mailbox listings do not carry it; a required field forced producers to
+	 * substitute the always-present `accountConfigId`, which 404s every
+	 * `/accounts/{accountId}/…` call made with it.
+	 */
+	accountId?: string;
 	/** Owning mailbox — used by the `in:` search-token filter. */
 	mailboxId?: string;
 	fromName: string;

package/src/components/auto-moved-badge.stories.tsx

@@ -10,14 +10,9 @@ export default meta;
 
 type Story = StoryObj<typeof AutoMovedBadge>;
 
-export const ListRow: Story = {
-	args: { label: "Moved from Junk by Remit", size: "sm" },
-};
-
-export const ReadingViewWithUndo: Story = {
+export const WithUndo: Story = {
 	args: {
 		label: "Moved from Junk by Remit",
-		size: "md",
 		onUndo: () => alert("Undo"),
 	},
 };
@@ -25,45 +20,32 @@ export const ReadingViewWithUndo: Story = {
 export const MovedToJunk: Story = {
 	args: {
 		label: "Moved from Inbox by Remit",
-		size: "md",
 		onUndo: () => alert("Undo"),
 	},
 };
 
 export const WithoutUndoAction: Story = {
-	args: { label: "Moved from Junk by Remit", size: "md" },
+	args: { label: "Moved from Junk by Remit" },
 };
 
 export const FilterMoveWithManageLink: Story = {
 	args: {
 		label: "Moved from Inbox by Remit",
-		size: "md",
 		onUndo: () => alert("Undo"),
 		filtersHref: "/settings/filters",
 	},
 };
 
-export const FilterMoveListRow: Story = {
-	// The list row is icon + label only — the app gates the Manage link (and
-	// Undo) to the reading-view `md` size, so no `filtersHref` here.
-	args: {
-		label: "Moved from Inbox by Remit",
-		size: "sm",
-	},
-};
-
 export const SideBySide: Story = {
 	render: () => (
 		<div className="flex flex-col items-start gap-3">
-			<AutoMovedBadge label="Moved from Junk by Remit" size="sm" />
+			<AutoMovedBadge label="Moved from Junk by Remit" />
 			<AutoMovedBadge
 				label="Moved from Junk by Remit"
-				size="md"
 				onUndo={() => undefined}
 			/>
 			<AutoMovedBadge
 				label="Moved from Inbox by Remit"
-				size="md"
 				onUndo={() => undefined}
 				filtersHref="/settings/filters"
 			/>

package/src/components/auto-moved-badge.tsx

@@ -5,8 +5,6 @@ import { Badge } from "./badge.js";
 export interface AutoMovedBadgeProps {
 	/** Plain-language description, e.g. "Moved from Junk by Remit". */
 	label: string;
-	/** `md` adds an inline Undo action for the open-message header; `sm` (list row) is icon + label only. */
-	size?: "sm" | "md";
 	/**
 	 * Present only when undo is available for this message. Omit to render the
 	 * indicator without an action (e.g. the target folder can't be resolved).
@@ -24,16 +22,15 @@ export interface AutoMovedBadgeProps {
 }
 
 /**
- * Unobtrusive indicator that Remit auto-moved this message, with an optional
- * inline one-click undo and, for a standing-filter move, a link to the filter
- * in Settings. Purely presentational — the label text, whether the move is
- * still in effect (so the badge should render at all), and whether a filter
- * link applies are the caller's responsibility; this component has no notion of
- * placement/mailbox state.
+ * Indicator that Remit auto-moved this message, with an optional inline
+ * one-click undo and, for a standing-filter move, a link to the filter in
+ * Settings. Sized for a message header, not a list row. Purely presentational —
+ * the label text, whether the move is still in effect (so the badge should
+ * render at all), and whether a filter link applies are the caller's
+ * responsibility; this component has no notion of placement/mailbox state.
  */
 export function AutoMovedBadge({
 	label,
-	size = "sm",
 	onUndo,
 	undoLabel = "Undo",
 	filtersHref,
@@ -41,14 +38,8 @@ export function AutoMovedBadge({
 	className,
 }: AutoMovedBadgeProps) {
 	return (
-		<Badge
-			tone="accent"
-			className={cn(size === "md" && "py-1 text-xs", className)}
-		>
-			<Undo2
-				className={cn(size === "sm" ? "size-3" : "size-3.5", "shrink-0")}
-				aria-hidden
-			/>
+		<Badge tone="accent" className={cn("py-1 text-xs", className)}>
+			<Undo2 className="size-3.5 shrink-0" aria-hidden />
 			<span>{label}</span>
 			{onUndo && (
 				<button

package/src/components/brief-empty.stories.tsx

@@ -0,0 +1,51 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { BriefEmpty } from "./brief-empty.js";
+
+/** A list pane's width, so the copy wraps the way it does in the app. */
+const paneFrame: Decorator = (Story) => (
+	<div className="h-screen w-full bg-surface">
+		<div className="mx-auto h-full max-w-md border-x border-line">
+			<Story />
+		</div>
+	</div>
+);
+
+const meta: Meta<typeof BriefEmpty> = {
+	title: "Screens/Kit/BriefEmpty",
+	component: BriefEmpty,
+	parameters: { layout: "fullscreen" },
+	decorators: [paneFrame],
+};
+export default meta;
+
+type Story = StoryObj<typeof BriefEmpty>;
+
+/**
+ * Nothing needs attention, and the app has everything it is going to get.
+ * The only state allowed to make that claim.
+ */
+export const CaughtUp: Story = { args: {} };
+
+/**
+ * The first sync is still running (#452). The list is empty because the mail
+ * has not arrived yet, so the brief says that instead of congratulating the
+ * user on an inbox it has never seen.
+ */
+export const Syncing: Story = {
+	args: { sync: { synced: 812, total: 4210 } },
+};
+
+/**
+ * The first seconds of a sync: the server has not counted the mailbox yet, so
+ * there is no fraction to show. The state still reads as in-progress rather
+ * than falling back to "caught up".
+ */
+export const SyncingCountUnknown: Story = {
+	args: { sync: { synced: 0, total: 0 } },
+};
+
+/** Phone width (411 px) — the copy is the whole state, so it must not clip. */
+export const SyncingPhone: Story = {
+	globals: { viewport: { value: "mobile" } },
+	args: { sync: { synced: 1204, total: 18960 } },
+};

package/src/components/brief-empty.tsx

@@ -0,0 +1,60 @@
+import { Loader2, Sparkles } from "lucide-react";
+
+/**
+ * How far the mail sync has got, for the accounts feeding the brief. `total` is
+ * 0 while the server has not counted the mailbox yet, which is a real state
+ * during the first seconds of a sync — not a missing number.
+ */
+export interface BriefSyncProgress {
+	synced: number;
+	total: number;
+}
+
+export interface BriefEmptyProps {
+	/**
+	 * Present only while at least one account reports an in-progress sync phase.
+	 * Its presence is what separates "we have everything and there is nothing"
+	 * from "we do not have it yet" — an empty brief looks identical either way,
+	 * and saying "caught up" during the first sync is a false statement about
+	 * the user's mail (#452).
+	 */
+	sync?: BriefSyncProgress;
+}
+
+/**
+ * The brief with no sections. Two states, because an empty list has two
+ * causes and only one of them is good news.
+ */
+export function BriefEmpty({ sync }: BriefEmptyProps) {
+	if (sync) {
+		return (
+			<div
+				className="flex h-full flex-col items-center justify-center gap-2 py-12 text-center px-4"
+				role="status"
+				aria-live="polite"
+			>
+				<Loader2
+					className="size-8 animate-spin text-fg-subtle"
+					aria-hidden="true"
+				/>
+				<p className="text-sm font-medium text-fg">Still syncing your mail</p>
+				<p className="text-xs text-fg-subtle">{syncCopy(sync)}</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-full flex-col items-center justify-center gap-2 py-12 text-center px-4">
+			<Sparkles className="size-8 text-fg-subtle" aria-hidden="true" />
+			<p className="text-sm font-medium text-fg">You're caught up</p>
+			<p className="text-xs text-fg-subtle">Nothing needs attention.</p>
+		</div>
+	);
+}
+
+function syncCopy({ synced, total }: BriefSyncProgress): string {
+	if (total > 0) {
+		return `${synced.toLocaleString()} of ${total.toLocaleString()} messages downloaded. This list fills in as they arrive.`;
+	}
+	return "Downloading your messages. This list fills in as they arrive.";
+}

package/src/components/dialog.tsx

@@ -31,11 +31,16 @@ export function Dialog({
 
 	const handleKeyDown = useCallback(
 		(e: KeyboardEvent) => {
-			if (e.key === "Escape") {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-				onClose();
-			}
+			if (e.key !== "Escape") return;
+			// A control inside the dialog can own Escape while it has something of
+			// its own to close — an open suggestion list. Escape closes that first;
+			// the next Escape closes the dialog.
+			const focused = document.activeElement;
+			if (focused instanceof Element && focused.closest("[data-escape-owner]"))
+				return;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			onClose();
 		},
 		[onClose],
 	);

package/src/components/filter-clause-chip.tsx

@@ -1,5 +1,6 @@
 import { Plus, Sparkles, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { useSuggestList } from "../lib/use-suggest-list.js";
 import { Button } from "./button.js";
 import {
 	type ClauseField,
@@ -12,6 +13,7 @@ import {
 } from "./filter-rule.js";
 import { Input } from "./input.js";
 import { Select } from "./select.js";
+import { type Suggestion, SuggestList } from "./suggest-list.js";
 
 const chipShell =
 	"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs";
@@ -153,6 +155,13 @@ export interface ClauseEditorProps {
 	 * match, so the editor never offers a clause the backend cannot evaluate.
 	 */
 	fields?: ClauseField[];
+	/**
+	 * Values worth offering for the field being edited — known senders for a
+	 * `From` clause, their domains for a `FromDomain` one. A shortcut and never a
+	 * constraint: whatever is typed stands, matches or not, and a field with
+	 * nothing to offer is a plain text box.
+	 */
+	suggestions?: readonly Suggestion[];
 	onChangeField?: (field: ClauseField) => void;
 	onChangeValue?: (value: string) => void;
 	onSubmit?: () => void;
@@ -163,17 +172,26 @@ export interface ClauseEditorProps {
  * Inline form for adding or editing one clause — field picker plus a value
  * input, from the design-system primitives so it never drifts from the rest of
  * the editor. The chip it produces renders through {@link ClauseChip}.
+ *
+ * The suggestion list sits under the row in normal flow rather than floating
+ * over it, so on a phone a soft keyboard can never hide the field the list
+ * belongs to.
  */
 export function ClauseEditor({
 	draft,
 	mode,
 	fields = clauseFieldOrder,
+	suggestions = [],
 	onChangeField,
 	onChangeValue,
 	onSubmit,
 	onCancel,
 }: ClauseEditorProps) {
 	const hint = clauseFieldHint(draft.field);
+	const suggest = useSuggestList({
+		count: suggestions.length,
+		onAccept: (index) => onChangeValue?.(suggestions[index].value),
+	});
 	return (
 		<div className="space-y-1.5 rounded-lg border border-accent-2 bg-surface p-2">
 			<div className="flex flex-wrap items-center gap-2">
@@ -193,11 +211,17 @@ export function ClauseEditor({
 					aria-label="Clause value"
 					value={draft.value}
 					placeholder="value…"
-					onChange={(e) => onChangeValue?.(e.target.value)}
+					autoComplete="off"
+					onChange={(e) => {
+						suggest.reopen();
+						onChangeValue?.(e.target.value);
+					}}
 					onKeyDown={(e) => {
+						if (suggest.handleKeyDown(e)) return;
 						if (e.key === "Enter") onSubmit?.();
 					}}
 					className="h-8 min-w-40 flex-1"
+					{...suggest.comboboxProps}
 				/>
 				<Button
 					variant="primary"
@@ -217,6 +241,20 @@ export function ClauseEditor({
 					className="shrink-0 px-2"
 				/>
 			</div>
+			{suggest.open && (
+				<SuggestList
+					id={suggest.listId}
+					suggestions={suggestions}
+					activeIndex={suggest.activeIndex}
+					optionId={suggest.optionId}
+					onPick={(suggestion) => {
+						onChangeValue?.(suggestion.value);
+						suggest.dismiss();
+					}}
+					onHighlight={suggest.setActiveIndex}
+					label={`${clauseFieldLabel(draft.field)} suggestions`}
+				/>
+			)}
 			{hint && <p className="px-0.5 text-2xs text-fg-subtle">{hint}</p>}
 		</div>
 	);

package/src/components/filter-rule-editor.stories.tsx

@@ -5,16 +5,19 @@ import { FilterPreviewCount } from "./filter-preview-count.js";
 import {
 	type ClauseField,
 	clauseFieldLabel,
+	demoClauseSuggestions,
 	demoFolders,
 	demoLabels,
 	demoRule,
 	demoSenderFallbackRule,
+	demoSubjectPrefillRule,
 	demoVocabularyRule,
 	type FilterRule,
 	type FolderOption,
 	type LabelOption,
 	type PreviewCount,
 	type RuleClause,
+	type RuleMatchMode,
 } from "./filter-rule.js";
 import {
 	type ClauseEditState,
@@ -53,12 +56,22 @@ const READY = (count: number, stale?: boolean): PreviewCount => ({
 function LiveEditor({
 	initialRule,
 	semanticAvailable = true,
+	initialMatchMode,
+	propertyRule,
 	labels = demoLabels,
+	initialClauseEdit,
 	onCreateFolder,
 	onCreateLabel,
 }: {
 	initialRule: FilterRule;
 	semanticAvailable?: boolean;
+	/** Offers the match-mode control; omit to render the editor without one. */
+	initialMatchMode?: RuleMatchMode;
+	/** Opens on the clause form, for the stories about editing a clause. */
+	initialClauseEdit?: ClauseEditState;
+	/** What the properties mode prefills — the app derives this from the
+	 *  selection's senders and subjects. */
+	propertyRule?: FilterRule;
 	labels?: LabelOption[];
 	onCreateFolder?: (
 		name: string,
@@ -67,7 +80,10 @@ function LiveEditor({
 	onCreateLabel?: (name: string) => Promise<LabelOption>;
 }) {
 	const [rule, setRule] = useState<FilterRule>(initialRule);
-	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
+	const [matchMode, setMatchMode] = useState(initialMatchMode);
+	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>(
+		initialClauseEdit,
+	);
 
 	const preview = useMemo<PreviewCount>(
 		() => READY(rule.clauses.length * 23 + (rule.widen ? 40 : 0)),
@@ -130,6 +146,26 @@ function LiveEditor({
 		onChangeMatchOperator: (matchOperator) => {
 			setRule((r) => ({ ...r, matchOperator }));
 		},
+		onChangeMatchMode: (mode) => {
+			setMatchMode(mode);
+			// The app rebuilds only the matchers, keeping the action and scope; the
+			// story does the same with its two fixture rules.
+			setRule((r) =>
+				mode === "properties"
+					? {
+							...r,
+							clauses: (propertyRule ?? demoSenderFallbackRule).clauses,
+							matchOperator: "any",
+							widen: undefined,
+						}
+					: {
+							...r,
+							clauses: initialRule.clauses,
+							matchOperator: initialRule.matchOperator,
+							widen: initialRule.widen ?? { anchorCount: 2 },
+						},
+			);
+		},
 		onChangeMove: (moveMailboxId) =>
 			setRule((r) => ({ ...r, moveMailboxId: moveMailboxId || undefined })),
 		onChangeLabel: (labelId) =>
@@ -146,7 +182,16 @@ function LiveEditor({
 			labels={labels}
 			preview={preview}
 			semanticAvailable={semanticAvailable}
+			matchMode={matchMode}
 			clauseEdit={clauseEdit}
+			clauseSuggestions={
+				clauseEdit
+					? demoClauseSuggestions(
+							clauseEdit.draft.field,
+							clauseEdit.draft.value,
+						)
+					: undefined
+			}
 			onCreateFolder={onCreateFolder}
 			onCreateLabel={onCreateLabel}
 			onCommit={() => {}}
@@ -161,6 +206,123 @@ export const Interactive: Story = {
 	render: () => <LiveEditor initialRule={demoRule} />,
 };
 
+/**
+ * The Organize surface, where the rule can be matched either way. It opens on
+ * "Anything similar" — semantic is still the default — and switching to
+ * "Its properties" drops the widen for the clauses derived from the messages
+ * that were selected. Switch back and the widen returns.
+ */
+export const MatchModeSemanticDefault: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, clauses: [] }}
+			initialMatchMode="similar"
+			propertyRule={demoSenderFallbackRule}
+		/>
+	),
+};
+
+/**
+ * Properties matching with one sender behind the whole selection — a single
+ * `From` chip, no semantics involved. Editable like any other chip.
+ */
+export const MatchOnSenderProperty: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{
+				...demoSenderFallbackRule,
+				clauses: demoSenderFallbackRule.clauses.slice(0, 1),
+				scope: "once",
+				name: "",
+			}}
+			initialMatchMode="properties"
+			propertyRule={demoSenderFallbackRule}
+		/>
+	),
+};
+
+/**
+ * Properties matching when the senders differ: the prefill falls back to the
+ * part the selected subjects share, so the rule still starts somewhere useful.
+ */
+export const MatchOnSubjectProperty: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={demoSubjectPrefillRule}
+			initialMatchMode="properties"
+			propertyRule={demoSubjectPrefillRule}
+		/>
+	),
+};
+
+/**
+ * Adding a `From` clause, with the value field offering what it knows: the
+ * senders of the messages that were selected lead the list — marked "selected",
+ * and there before a key is pressed — followed by other known addresses. Typing
+ * narrows it; anything typed still stands, match or no match.
+ */
+export const ClauseValueSuggestions: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, widen: undefined }}
+			semanticAvailable={false}
+			initialClauseEdit={{ mode: "add", draft: { field: "From", value: "" } }}
+		/>
+	),
+};
+
+/**
+ * The same field on a `Domain` clause: the addresses collapse to registrable
+ * domains, so the value offered is exactly the string the matcher compares.
+ */
+export const DomainClauseSuggestions: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, widen: undefined }}
+			semanticAvailable={false}
+			initialClauseEdit={{
+				mode: "add",
+				draft: { field: "FromDomain", value: "" },
+			}}
+		/>
+	),
+};
+
+/**
+ * Typing something no known sender matches. The list simply goes away — no
+ * empty panel, no warning, no block on the value. A clause for an address that
+ * has not written yet is a legitimate rule.
+ */
+export const ClauseValueNoMatches: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, widen: undefined }}
+			semanticAvailable={false}
+			initialClauseEdit={{
+				mode: "add",
+				draft: { field: "From", value: "someone@nowhere.test" },
+			}}
+		/>
+	),
+};
+
+/**
+ * A free-text field is left alone: `Subject` has nothing to draw suggestions
+ * from, so it stays the plain box it was.
+ */
+export const SubjectClauseStaysFreeText: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, widen: undefined }}
+			semanticAvailable={false}
+			initialClauseEdit={{
+				mode: "add",
+				draft: { field: "Subject", value: "receipt" },
+			}}
+		/>
+	),
+};
+
 let newFolderSeq = 0;
 const mockCreateFolder = (name: string): Promise<FolderOption> =>
 	new Promise((resolve) => {