@remit/ui 0.0.55 → 0.0.57

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

@@ -27,14 +27,18 @@ import {
 	type LabelOption,
 	type MatchOperator,
 	matchJoinWord,
+	matchModeHint,
+	matchModeLabel,
 	matchOperatorLabel,
 	type PreviewCount,
+	type RuleMatchMode,
 	type RuleScope,
 } from "./filter-rule.js";
 import { Input } from "./input.js";
 import { LabelChip } from "./label-chip.js";
 import { SegmentedControl } from "./segmented-control.js";
 import { Select } from "./select.js";
+import type { Suggestion } from "./suggest-list.js";
 
 export interface ClauseEditState {
 	mode: "add" | "edit";
@@ -61,6 +65,14 @@ export interface FilterRuleEditorProps {
 	 * widen still renders, marked inactive.
 	 */
 	semanticAvailable?: boolean;
+	/**
+	 * What the rule matches on, when the surface lets the user choose (RFC 038
+	 * D2/D3). Present only where both modes are reachable — the Organize flow on
+	 * a deployment that can serve the widen. Absent leaves the mode control off
+	 * entirely, which is every other entry point onto this editor.
+	 */
+	matchMode?: RuleMatchMode;
+	onChangeMatchMode?: (mode: RuleMatchMode) => void;
 	/**
 	 * The clause fields the add/edit picker offers, in menu order. Defaults to the
 	 * whole vocabulary; a consumer narrows it to the fields its deployment can
@@ -82,6 +94,13 @@ export interface FilterRuleEditorProps {
 	 * filter, which is dropped from the scope toggle.
 	 */
 	anchorLocked?: boolean;
+	/**
+	 * Values worth offering for the clause being edited — the consumer derives
+	 * them from the field and what has been typed so far (known senders for
+	 * `From`, their domains for `FromDomain`). Absent leaves the value a plain
+	 * text box, which is what a surface with nothing to suggest should be.
+	 */
+	clauseSuggestions?: readonly Suggestion[];
 	/** The inline clause form, when adding or editing a clause. */
 	clauseEdit?: ClauseEditState;
 	onStartAddClause?: () => void;
@@ -125,6 +144,11 @@ const matchOptions: { value: MatchOperator; label: string }[] = [
 	{ value: "any", label: matchOperatorLabel("any") },
 ];
 
+const matchModeOptions: { value: RuleMatchMode; label: string }[] = [
+	{ value: "similar", label: matchModeLabel("similar") },
+	{ value: "properties", label: matchModeLabel("properties") },
+];
+
 const scopeOptions: { value: RuleScope; label: string }[] = [
 	{ value: "once", label: "Just once" },
 	{ value: "standing", label: "Keep doing this" },
@@ -450,8 +474,11 @@ export function FilterRuleEditor({
 	preview,
 	notice,
 	semanticAvailable = false,
+	matchMode,
+	onChangeMatchMode,
 	clauseFields,
 	anchorLocked = false,
+	clauseSuggestions,
 	clauseEdit,
 	onStartAddClause,
 	onStartEditClause,
@@ -497,6 +524,24 @@ export function FilterRuleEditor({
 
 			<div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-4">
 				{notice}
+
+				{matchMode && (
+					<section className="space-y-1.5">
+						<p className="text-xs font-medium text-fg-muted">Match on</p>
+						<SegmentedControl
+							name="rule-match-mode"
+							size="sm"
+							aria-label="What the rule matches on"
+							options={matchModeOptions}
+							value={matchMode}
+							onChange={(value) => onChangeMatchMode?.(value)}
+						/>
+						<p className="text-2xs text-fg-subtle">
+							{matchModeHint(matchMode)}
+						</p>
+					</section>
+				)}
+
 				<section className="space-y-3">
 					<div className="flex flex-wrap items-center gap-1.5">
 						{rule.clauses.map((clause, index) => (
@@ -534,6 +579,7 @@ export function FilterRuleEditor({
 						{!rule.widen &&
 							!anchorLocked &&
 							semanticAvailable &&
+							matchMode !== "properties" &&
 							!clauseEdit && (
 								<AddChipButton label="…and similar" onClick={onAddWiden} />
 							)}
@@ -544,6 +590,7 @@ export function FilterRuleEditor({
 							draft={clauseEdit.draft}
 							mode={clauseEdit.mode}
 							fields={clauseFields}
+							suggestions={clauseSuggestions}
 							onChangeField={onChangeDraftField}
 							onChangeValue={onChangeDraftValue}
 							onSubmit={onSubmitClause}

package/src/components/filter-rule.render.test.ts

@@ -369,6 +369,39 @@ describe("ClauseEditor", () => {
 		assert.doesNotMatch(html, /registrable domain/i);
 		assert.doesNotMatch(html, /List-Id/);
 	});
+
+	it("is a plain text box when there is nothing to suggest", () => {
+		const html = render(
+			createElement(ClauseEditor, {
+				draft: { field: "From", value: "" },
+				mode: "add",
+			}),
+		);
+		assert.doesNotMatch(html, /role="listbox"/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("offers the suggestions under the row, named for the field being edited", () => {
+		const html = render(
+			createElement(ClauseEditor, {
+				draft: { field: "From", value: "" },
+				mode: "add",
+				suggestions: [
+					{
+						value: "receipts@stripe.com",
+						label: "Stripe",
+						hint: "receipts@stripe.com",
+						source: "selected",
+					},
+					{ value: "rides@lyft.com" },
+				],
+			}),
+		);
+		assert.match(html, /role="listbox"/);
+		assert.match(html, /aria-label="From suggestions"/);
+		assert.match(html, /aria-expanded="true"/);
+		assert.match(html, /receipts@stripe\.com/);
+	});
 });
 
 describe("clauseFieldHint", () => {

package/src/components/filter-rule.ts

@@ -7,6 +7,8 @@
  * Naming tracks the RFC: rule, clause, widen, scope.
  */
 
+import type { Suggestion } from "./suggest-list.js";
+
 /**
  * The clause fields (RFC 038 D2). `From`, `Subject`, `HasWords` ship now;
  * `ListId` and `FromDomain` arrive with the vocabulary ticket. Every variant
@@ -34,6 +36,35 @@ export interface RuleClause {
 /** How the clauses combine. Maps to the API's `And` / `Or`. */
 export type MatchOperator = "all" | "any";
 
+/**
+ * What the rule matches on (RFC 038 D2/D3). `similar` rides the semantic widen
+ * off the messages the rule was started from; `properties` uses literal clauses
+ * only — sender, subject, list — and needs no vector pipeline at all. A surface
+ * that offers both opens on `similar` wherever the deployment can serve it.
+ */
+export type RuleMatchMode = "similar" | "properties";
+
+const matchModeLabels: Record<RuleMatchMode, string> = {
+	similar: "Anything similar",
+	properties: "Its properties",
+};
+
+export function matchModeLabel(mode: RuleMatchMode): string {
+	return matchModeLabels[mode];
+}
+
+const matchModeHints: Record<RuleMatchMode, string> = {
+	similar: "Reads the messages you picked and finds more that read like them.",
+	properties:
+		"Matches on what the messages say about themselves — sender, subject, list. No reading involved.",
+};
+
+/** One line saying what a match mode actually does, so the choice is never a
+ *  guess (ux.md). */
+export function matchModeHint(mode: RuleMatchMode): string {
+	return matchModeHints[mode];
+}
+
 /**
  * When the rule stops (RFC 038 D1). `once` is a one-time action, `standing`
  * persists, `until` expires on a picked date.
@@ -124,6 +155,36 @@ export function clauseFieldHint(field: ClauseField): string | undefined {
 	return clauseFieldHints[field];
 }
 
+/**
+ * Whether a clause field matches on message body text, which only the live
+ * index-time filter and the semantic widen can read.
+ *
+ * The vector-free matcher serves `From`/`Subject` from the core thread rows and
+ * carries no faithful body, so it rejects a body-text clause outright rather
+ * than narrowing the match silently (`assertNoBodyContentClause`,
+ * backend/service/organize.ts). A rule with no active widen therefore cannot be
+ * counted or applied one-time with such a clause in it — it can only be a
+ * standing rule, where the index-time matcher reads the whole body.
+ */
+export function matchesBodyText(field: ClauseField): boolean {
+	return field === "HasWords";
+}
+
+/** Whether the rule's semantic widen is present and evaluable. */
+export function hasActiveWiden(rule: FilterRule): boolean {
+	return rule.widen !== undefined && !rule.widen.inactive;
+}
+
+/**
+ * The rule's body-text clauses that nothing on its current match path can read
+ * — a `HasWords` chip with no active widen behind it. Empty for every rule the
+ * literal matcher can evaluate.
+ */
+export function unreadableBodyClauses(rule: FilterRule): RuleClause[] {
+	if (hasActiveWiden(rule)) return [];
+	return rule.clauses.filter((clause) => matchesBodyText(clause.field));
+}
+
 /** The fields a new clause can be added as, in menu order. */
 export const clauseFieldOrder: ClauseField[] = [
 	"From",
@@ -198,6 +259,11 @@ export function commitBlockedReason(
 		rule.clauses.length > 0 ||
 		(rule.widen !== undefined && !rule.widen.inactive);
 	if (!hasMatch) return "Add a clause so the rule has something to match.";
+	// A one-time apply runs the vector-free matcher, which cannot read message
+	// bodies. Saved as a rule the same clause works, so say that rather than
+	// refusing the clause outright.
+	if (rule.scope === "once" && unreadableBodyClauses(rule).length > 0)
+		return "Applying once can't read message bodies. Save this as a rule instead, or drop the “has the words” clause.";
 	if (!rule.moveMailboxId && !rule.labelId)
 		return "Pick a folder to move into, or a label to apply.";
 	if (
@@ -252,6 +318,20 @@ export const demoVocabularyRule: FilterRule = {
 	name: "Python lists",
 };
 
+/**
+ * The properties mode's opening rule when the selection's senders differ: the
+ * part their subjects share, prefilled as an ordinary editable `Subject` chip.
+ */
+export const demoSubjectPrefillRule: FilterRule = {
+	clauses: [
+		{ id: "c1", field: "Subject", value: "Your receipt from", derived: true },
+	],
+	matchOperator: "any",
+	moveMailboxId: "mbx-receipts",
+	scope: "once",
+	name: "",
+};
+
 export const demoSenderFallbackRule: FilterRule = {
 	clauses: [
 		{ id: "c1", field: "From", value: "receipts@stripe.com", derived: true },
@@ -262,3 +342,64 @@ export const demoSenderFallbackRule: FilterRule = {
 	scope: "standing",
 	name: "Receipts",
 };
+
+/**
+ * Stand-in for what the app offers in a clause value field: the addresses of the
+ * messages that were selected, then addresses a lookup knows about. The app
+ * derives the same shape from its selection and the address search — the story
+ * only needs the shape, not the source.
+ */
+const demoAddressPool: Suggestion[] = [
+	{
+		value: "receipts@stripe.com",
+		label: "Stripe",
+		hint: "receipts@stripe.com",
+		source: "selected",
+	},
+	{
+		value: "receipts@lyft.com",
+		label: "Lyft",
+		hint: "receipts@lyft.com",
+		source: "selected",
+	},
+	{
+		value: "no-reply@booking.com",
+		label: "Booking.com",
+		hint: "no-reply@booking.com",
+	},
+	{
+		value: "invoice@digitalocean.com",
+		label: "DigitalOcean",
+		hint: "invoice@digitalocean.com",
+	},
+	{ value: "billing@github.com", label: "GitHub", hint: "billing@github.com" },
+];
+
+const demoDomainPool: Suggestion[] = [
+	{ value: "stripe.com", source: "selected" },
+	{ value: "lyft.com", source: "selected" },
+	{ value: "booking.com" },
+	{ value: "digitalocean.com" },
+	{ value: "github.com" },
+];
+
+/**
+ * The suggestions a story's clause value field offers, matching the app's rule:
+ * address fields draw on known senders, every other field is free text, and what
+ * is typed narrows the list without ever constraining it.
+ */
+export function demoClauseSuggestions(
+	field: ClauseField,
+	value: string,
+): Suggestion[] {
+	if (field !== "From" && field !== "FromDomain") return [];
+	const pool = field === "From" ? demoAddressPool : demoDomainPool;
+	const needle = value.trim().toLowerCase();
+	return pool.filter(
+		(suggestion) =>
+			suggestion.value.toLowerCase() !== needle &&
+			(needle === "" ||
+				suggestion.value.toLowerCase().includes(needle) ||
+				(suggestion.label ?? "").toLowerCase().includes(needle)),
+	);
+}

package/src/components/input.tsx

@@ -12,6 +12,11 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 	 * rows where the surrounding container owns the chrome.
 	 */
 	variant?: InputVariant;
+	/**
+	 * Optional trailing control rendered inside the field, after the input —
+	 * it takes its own space in the row, so it never covers the typed value.
+	 */
+	trailing?: ReactNode;
 	/** Forwarded to the underlying `<input>`. */
 	ref?: Ref<HTMLInputElement>;
 }
@@ -28,6 +33,7 @@ export function Input({
 	icon,
 	className,
 	variant = "default",
+	trailing,
 	ref,
 	...props
 }: InputProps) {
@@ -39,6 +45,7 @@ export function Input({
 				className="min-w-0 flex-1 bg-transparent text-fg placeholder:text-fg-subtle outline-none"
 				{...props}
 			/>
+			{trailing}
 		</div>
 	);
 }

package/src/components/mail-header.tsx

@@ -1,6 +1,7 @@
 import { Menu, Search, X } from "lucide-react";
 import { Button } from "./button.js";
 import { SearchBar } from "./search-bar.js";
+import type { SearchFieldSuggest } from "./search-chip-input.js";
 
 export interface MailHeaderProps {
 	/** Top-row title — the view name, e.g. "Daily brief" or "Inbox". */
@@ -28,6 +29,13 @@ export interface MailHeaderProps {
 	 * the page never mounts two search inputs competing for the same focus.
 	 */
 	showSearch?: boolean;
+	/**
+	 * Completions for what is being typed; see `SearchChipInput`. The list is
+	 * not rendered here — the header is a fixed-height row, so the consumer
+	 * renders it in the pane directly below, where it takes its own space
+	 * instead of covering the field.
+	 */
+	searchSuggest?: SearchFieldSuggest;
 }
 
 /**
@@ -51,6 +59,7 @@ export function MailHeader({
 	searchOpen,
 	onSearchOpenChange,
 	showSearch = true,
+	searchSuggest,
 }: MailHeaderProps) {
 	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
 	const clearSearch = onSearchClear ?? (() => onSearchChange(""));
@@ -66,6 +75,7 @@ export function MailHeader({
 			onClear={clearSearch}
 			globalFocusKey={false}
 			showClearButton={showClearButton}
+			suggest={searchSuggest}
 		/>
 	);
 

package/src/components/message-row.tsx

@@ -101,6 +101,34 @@ export function CompactRowBody({ thread }: { thread: ThreadRowData }) {
 	);
 }
 
+/**
+ * Bold the literal (case-insensitive) occurrences of `query` in `text`. Used by
+ * the search rows so a match is visible in the subject and snippet it was found
+ * in; an absent or blank query leaves the text alone.
+ */
+function highlightMatches(text: string, query?: string): ReactNode {
+	const term = query?.trim();
+	if (!term) return text;
+	const lower = text.toLowerCase();
+	const needle = term.toLowerCase();
+	const parts: ReactNode[] = [];
+	let cursor = 0;
+	let match = lower.indexOf(needle, cursor);
+	let key = 0;
+	while (match !== -1) {
+		if (match > cursor) parts.push(text.slice(cursor, match));
+		parts.push(
+			<mark key={key++} className="bg-transparent font-semibold text-fg">
+				{text.slice(match, match + needle.length)}
+			</mark>,
+		);
+		cursor = match + needle.length;
+		match = lower.indexOf(needle, cursor);
+	}
+	if (cursor < text.length) parts.push(text.slice(cursor));
+	return parts;
+}
+
 /**
  * Text/glyph content block of a comfortable row (everything after the leading
  * avatar/slot). Consumers provide their own leading element (Avatar, checkbox,
@@ -110,10 +138,13 @@ export function CompactRowBody({ thread }: { thread: ThreadRowData }) {
 export function ComfortableRowTextContent({
 	thread,
 	badge,
+	highlightQuery,
 }: {
 	thread: ThreadRowData;
 	/** Extra chip rendered after the category badge (e.g. an auto-moved indicator). */
 	badge?: ReactNode;
+	/** Bold this term where it occurs literally in the subject and snippet. */
+	highlightQuery?: string;
 }) {
 	const unread = !thread.isRead;
 	return (
@@ -146,7 +177,7 @@ export function ComfortableRowTextContent({
 						unread ? "text-fg" : "text-fg-muted",
 					)}
 				>
-					{thread.subject}
+					{highlightMatches(thread.subject, highlightQuery)}
 				</span>
 				{thread.suspicious && (
 					<ShieldAlert className="size-3.5 shrink-0 text-danger" />
@@ -160,7 +191,7 @@ export function ComfortableRowTextContent({
 			</span>
 			<span className="flex items-center gap-1.5">
 				<span className="line-clamp-1 min-w-0 flex-1 text-xs text-fg-subtle">
-					{thread.snippet}
+					{highlightMatches(thread.snippet, highlightQuery)}
 				</span>
 				{thread.category && thread.category !== "personal" && (
 					<Badge tone={categoryTone[thread.category]} className="shrink-0">
@@ -264,10 +295,13 @@ export function ComfortableRowBody({
 	thread,
 	selection,
 	badge,
+	highlightQuery,
 }: {
 	thread: ThreadRowData;
 	selection?: RowSelection;
 	badge?: ReactNode;
+	/** Bold this term where it occurs literally in the subject and snippet. */
+	highlightQuery?: string;
 }) {
 	const unread = !thread.isRead;
 	return (
@@ -276,7 +310,11 @@ export function ComfortableRowBody({
 				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
 			)}
 			<ComfortableRowLeading thread={thread} selection={selection} />
-			<ComfortableRowTextContent thread={thread} badge={badge} />
+			<ComfortableRowTextContent
+				thread={thread}
+				badge={badge}
+				highlightQuery={highlightQuery}
+			/>
 		</>
 	);
 }

package/src/components/mobile-search-view.render.test.ts

@@ -37,6 +37,37 @@ const base = {
 	sections,
 };
 
+const filter = {
+	categories: [{ id: "all", label: "All" }],
+	filters: [{ id: "unread", label: "Unread" }],
+	selectedCategory: "all",
+	activeFilters: new Set<string>(),
+	onSelectCategory: noop,
+	onToggleFilter: noop,
+	onClear: noop,
+};
+
+describe("MobileSearchView filter chrome", () => {
+	it("gives the filter row up to the search once a query is typed", () => {
+		const html = renderToString(
+			createElement(MobileSearchView, { ...base, filter }),
+		);
+		assert.doesNotMatch(html, /Expand filters/);
+	});
+
+	it("keeps the filter row while the field is empty", () => {
+		const html = renderToString(
+			createElement(MobileSearchView, {
+				...base,
+				value: "",
+				sections: [],
+				filter,
+			}),
+		);
+		assert.match(html, /Expand filters/);
+	});
+});
+
 describe("MobileSearchView search scope", () => {
 	it("offers held-out spam on the phone tier too", () => {
 		const html = renderToString(