@remit/web-client 0.0.86 → 0.0.88

package/src/components/mail/organize/SearchFilterDialog.tsx

@@ -1,12 +1,9 @@
-import { Button, Dialog } from "@remit/ui";
+import { Button, buildSearchRule, Dialog } from "@remit/ui";
 import { Loader2 } from "lucide-react";
 import { useMemo } from "react";
 import { useSearchFilterSeed } from "@/hooks/useSearchFilterSeed";
 import { rulePredicate } from "@/lib/organize/rule-model";
-import {
-	buildSearchRule,
-	convertSearchToRule,
-} from "@/lib/organize/search-to-rule";
+import { convertSearchToRule } from "@/lib/organize/search-to-rule";
 import type { ParsedSearchQuery } from "@/lib/search-tokens";
 import { SearchFilterEditor } from "./SearchFilterEditor";
 
@@ -51,6 +48,8 @@ export function SearchFilterDialog({
 		open ? accountId : undefined,
 		literalPredicate,
 	);
+	// A search kept as a `HasWords` clause has no seed count and never will; the
+	// editor opens on the uncountable reason rather than a dead end.
 
 	if (!open) return null;
 
@@ -71,7 +70,7 @@ export function SearchFilterDialog({
 						</Button>
 					</div>
 				</div>
-			) : isPending || seedCount === undefined ? (
+			) : isPending ? (
 				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
 					<Loader2 className="size-8 animate-spin text-accent-2" />
 					<p className="text-sm font-medium text-fg">

package/src/components/mail/organize/SearchFilterEditor.render.test.ts

@@ -120,10 +120,21 @@ describe("SearchFilterEditor — pre-filled conversion", () => {
 	});
 
 	it("seeds the live count from the converted predicate", () => {
-		const dom = mount("receipts");
+		const dom = mount("from:receipts@stripe.com");
 		assert.match(dom.text(), /12 messages match/);
 	});
 
+	it("never asks the matcher to count a body-text rule it cannot evaluate", async () => {
+		// A free-text search converts to a `HasWords` clause and carries no anchor,
+		// so the vector-free matcher rejects it outright (organize.ts
+		// `assertNoBodyContentClause`). The count is unavailable and says so; the
+		// request is never sent.
+		const dom = mount("receipts");
+		await settlePreview(dom);
+		assert.match(dom.text(), /can't count matches/i);
+		assert.equal((http?.to("/organize/preview") ?? []).length, 0);
+	});
+
 	it("does not offer the semantic widen on a search-derived rule", () => {
 		const dom = mount("receipts");
 		assert.doesNotMatch(dom.text(), /and similar/i);
@@ -186,7 +197,7 @@ describe("SearchFilterEditor — commit gate", () => {
 	it("stales the count on an edit and holds the save until it settles", async () => {
 		// The seed count (12) is passed directly; the first network preview is the
 		// re-count after the edit, so it returns 40.
-		const dom = mount("receipts", previewCounts([40]));
+		const dom = mount("from:receipts@stripe.com", previewCounts([40]));
 		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
 		await dom.flush();
 		dom.type(dom.byLabel("Rule name"), "Receipts");
@@ -208,7 +219,7 @@ describe("SearchFilterEditor — commit gate", () => {
 	});
 
 	it("runs a one-time apply as a back-apply job when the scope is 'just once'", async () => {
-		const dom = mount("receipts");
+		const dom = mount("from:receipts@stripe.com");
 		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
 		await dom.flush();
 		const radio = dom.query('input[name="rule-scope"][value="once"]');
@@ -223,4 +234,27 @@ describe("SearchFilterEditor — commit gate", () => {
 		);
 		assert.equal(jobs.length, 1);
 	});
+
+	it("holds the one-time apply for a body-text rule, offering the saved rule instead", async () => {
+		// The one-time apply runs the same vector-free matcher the count does. A
+		// `HasWords` clause has no reader there, so the apply is held with the
+		// reason stated — saved as a standing rule the same clause works, because
+		// the index-time matcher reads the whole body.
+		const dom = mount("receipts");
+		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
+		await dom.flush();
+		const radio = dom.query('input[name="rule-scope"][value="once"]');
+		if (!radio) throw new Error("no once scope option");
+		dom.click(radio);
+		await dom.flush();
+
+		assert.equal(primaryButton(dom, "Apply now").disabled, true);
+		assert.match(dom.text(), /can't read message bodies/i);
+		assert.equal(
+			(http?.calls ?? []).filter(
+				(call) => call.path.endsWith("/organize") && call.method === "POST",
+			).length,
+			0,
+		);
+	});
 });

package/src/components/mail/organize/SearchFilterEditor.tsx

@@ -1,8 +1,10 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import {
+	buildSearchRule,
 	type FilterRule,
 	FilterRuleEditor,
 	type FolderOption,
+	type SearchConversion,
 	SearchConversionNoticeView,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
@@ -18,10 +20,6 @@ import {
 	ruleToDraft,
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
-import {
-	buildSearchRule,
-	type SearchConversion,
-} from "@/lib/organize/search-to-rule";
 import {
 	CommitError,
 	FilterSaved,
@@ -34,8 +32,14 @@ interface SearchFilterEditorProps {
 	accountId: string;
 	/** The converted search — its clauses seed the rule, its drops seed the notice. */
 	conversion: SearchConversion;
-	/** The converted literal predicate's live count, seeding the editor without a re-fetch. */
-	seedCount: number;
+	/**
+	 * The converted literal predicate's live count, seeding the editor without a
+	 * re-fetch. Absent when the predicate is one the vector-free matcher refuses —
+	 * a `HasWords` clause from the search's free text — in which case the count
+	 * region says so and the one-time apply is held; saving it as a standing rule
+	 * still works, since the index-time matcher does read message bodies.
+	 */
+	seedCount?: number;
 	onClose: () => void;
 }
 

package/src/components/mail/organize/smart-organize.stories.tsx

@@ -1,4 +1,7 @@
-import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	mailboxOperationsListMailboxesQueryKey,
+	threadOperationsListThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
 import { BottomSheet } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -57,9 +60,14 @@ const FOLDER_OPTIONS: FolderOption[] = [
 
 /**
  * A QueryClient pre-seeded with the account's mailboxes, so the editor's folder
- * picker renders its real options without a network round-trip.
+ * picker renders its real options without a network round-trip, and optionally
+ * with the thread rows the properties prefill reads its subjects off — the same
+ * rows the mailbox list renders behind the sheet.
  */
-function seededClient(): QueryClient {
+function seededClient(
+	subjects?: Record<string, string>,
+	senderEmail = "receipts@example.com",
+): QueryClient {
 	const client = new QueryClient({
 		defaultOptions: { queries: { retry: false } },
 	});
@@ -67,13 +75,32 @@ function seededClient(): QueryClient {
 		mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT_ID } }),
 		{ items: MAILBOXES },
 	);
+	if (subjects) {
+		client.setQueryData(
+			threadOperationsListThreadsQueryKey({ path: { mailboxId: "mbx-inbox" } }),
+			{
+				items: Object.entries(subjects).map(([messageId, subject]) => ({
+					messageId,
+					threadId: messageId,
+					subject,
+					fromEmail: senderEmail,
+				})),
+			},
+		);
+	}
 	return client;
 }
 
 /** Phone frame + a bottom sheet holding the editor, mirroring the mobile home. */
-function SheetStage({ children }: { children: ReactNode }) {
+function SheetStage({
+	children,
+	subjects,
+}: {
+	children: ReactNode;
+	subjects?: Record<string, string>;
+}) {
 	return (
-		<QueryClientProvider client={seededClient()}>
+		<QueryClientProvider client={seededClient(subjects)}>
 			<ErrorBannerProvider>
 				<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[760px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
 					<div className="divide-y divide-line opacity-50">
@@ -247,6 +274,60 @@ export const SenderFallbackStanding: Story = {
 	),
 };
 
+/**
+ * Matching on properties instead of similarity — the third way to build a rule,
+ * with no semantics in it at all. Every selected message came from one sender,
+ * so the rule opens on a single editable `From` chip. The mode control stays on
+ * screen: "Anything similar" is one tap away and is still where the flow opens.
+ */
+export const MatchOnPropertiesSender: Story = {
+	name: "Match on Properties (sender)",
+	render: () => (
+		<SheetStage>
+			<OrganizeRuleEditor
+				accountId={ACCOUNT_ID}
+				selectedMessageIds={["msg-1", "msg-2", "msg-3"]}
+				seedCount={47}
+				seedMatchMode="properties"
+				senders={["receipts@example.com"]}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/**
+ * The same mode where the selection's senders differ: there is no one sender to
+ * name, so the prefill drops to the part the subjects share — "Your receipt
+ * from" out of three differently-numbered receipts — as an ordinary `Subject`
+ * chip the user can widen or narrow.
+ */
+export const MatchOnPropertiesSubject: Story = {
+	name: "Match on Properties (subject)",
+	render: () => (
+		<SheetStage
+			subjects={{
+				"msg-1": "Your receipt from Blue Bottle #4821",
+				"msg-2": "Re: Your receipt from Ritual Coffee #119",
+				"msg-3": "Your receipt from Sightglass #77",
+			}}
+		>
+			<OrganizeRuleEditor
+				accountId={ACCOUNT_ID}
+				selectedMessageIds={["msg-1", "msg-2", "msg-3"]}
+				seedCount={62}
+				seedMatchMode="properties"
+				senders={[
+					"receipts@bluebottle.example",
+					"hello@ritual.example",
+					"no-reply@sightglass.example",
+				]}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
 /** The "Something else" fallback: shortcuts derived from folders + an input. */
 export const SomethingElse: Story = {
 	render: () => (

package/src/components/mail/useModifierSelect.render.test.ts

@@ -0,0 +1,247 @@
+/**
+ * Modifier-click selection on a message row.
+ *
+ * The rule under test is that a modifier is an input signal, not a layout one:
+ * shift, cmd and ctrl select a row at every window width, because they can only
+ * come from a real keyboard. Gating them on the desktop media query is what left
+ * a half-screen browser or a tablet opening the message instead of selecting it.
+ *
+ * A row is an `<a href>`, so what "selection took the press" means concretely is
+ * that the browser's own gesture — new window, new tab, context menu — is
+ * prevented, and the click the same gesture delivers is claimed rather than
+ * opening the row on top of the selection.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement, type MouseEvent } from "react";
+import type { SelectionModifiers } from "@/hooks/useSelection";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { isModified, useModifierSelect } from "./useModifierSelect";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+interface Log {
+	/** Every (messageId, modifiers) selection was offered. */
+	offers: SelectionModifiers[];
+	/** Clicks that reached the row's open handler. */
+	opens: number;
+}
+
+interface ProbeProps {
+	log: Log;
+	/** Whether selection takes the press it is offered. */
+	takes: boolean;
+	/** A row with no selection at all — the reading pane's, for instance. */
+	unselectable?: boolean;
+}
+
+const ROW = "[data-row]";
+
+function Probe({ log, takes, unselectable }: ProbeProps) {
+	const select = useModifierSelect(
+		"m1",
+		unselectable
+			? undefined
+			: (_messageId, modifiers) => {
+					log.offers.push(modifiers);
+					return takes;
+				},
+	);
+	return createElement(
+		"a",
+		{
+			// A fragment rather than a route: still an `<a href>`, which is what
+			// makes a modified click a browser gesture, without jsdom trying to
+			// navigate on the clicks the test deliberately leaves unclaimed.
+			href: "#m1",
+			"data-row": "",
+			onMouseDown: select.onMouseDown,
+			onContextMenu: select.onContextMenu,
+			onClick: (e: MouseEvent) => {
+				if (select.claimClick(e)) return;
+				log.opens += 1;
+			},
+		},
+		"Quarterly numbers are in",
+	);
+}
+
+const mount = (props: ProbeProps, viewportWidth: number): DomHarness => {
+	harness = createDomHarness({ viewportWidth });
+	harness.render(createElement(Probe, props));
+	return harness;
+};
+
+const emptyLog = (): Log => ({ offers: [], opens: 0 });
+
+/** Dispatches a real mouse event and answers whether the default was taken. */
+const press = (
+	dom: DomHarness,
+	type: "mousedown" | "click" | "contextmenu",
+	init: MouseEventInit = {},
+): boolean => {
+	const event = new dom.window.MouseEvent(type, {
+		bubbles: true,
+		cancelable: true,
+		button: 0,
+		...init,
+	});
+	dom.dispatch(dom.query(ROW) as Element, event);
+	return event.defaultPrevented;
+};
+
+/** The full gesture a browser delivers: the press, then the click after it. */
+const gesture = (
+	dom: DomHarness,
+	init: MouseEventInit,
+): { pressTaken: boolean; clickTaken: boolean } => ({
+	pressTaken: press(dom, "mousedown", init),
+	clickTaken: press(dom, "click", init),
+});
+
+// Both single-pane tiers and the multi-pane one. The narrow widths are the
+// regression: they used to fall through to the touch branch, which reads no
+// modifiers at all.
+const WIDTHS = [390, 800, 1280];
+
+describe("useModifierSelect", () => {
+	for (const width of WIDTHS) {
+		it(`takes a shift-press for selection at ${width}px`, () => {
+			const log = emptyLog();
+			const dom = mount({ log, takes: true }, width);
+
+			const { pressTaken, clickTaken } = gesture(dom, { shiftKey: true });
+
+			assert.deepEqual(log.offers, [
+				{ shiftKey: true, metaKey: false, ctrlKey: false },
+			]);
+			assert.equal(pressTaken, true, "the browser's new-window gesture is off");
+			assert.equal(clickTaken, true, "the click the gesture delivers is spent");
+			assert.equal(
+				log.opens,
+				0,
+				"the row does not open on top of the selection",
+			);
+		});
+
+		it(`takes a cmd-press for selection at ${width}px`, () => {
+			const log = emptyLog();
+			const dom = mount({ log, takes: true }, width);
+
+			const { pressTaken } = gesture(dom, { metaKey: true });
+
+			assert.deepEqual(log.offers, [
+				{ shiftKey: false, metaKey: true, ctrlKey: false },
+			]);
+			assert.equal(pressTaken, true);
+			assert.equal(log.opens, 0);
+		});
+
+		it(`leaves a plain click alone at ${width}px`, () => {
+			const log = emptyLog();
+			const dom = mount({ log, takes: true }, width);
+
+			const { pressTaken, clickTaken } = gesture(dom, {});
+
+			assert.deepEqual(log.offers, [], "a tap carries no modifier to read");
+			assert.equal(pressTaken, false);
+			assert.equal(clickTaken, false);
+			assert.equal(log.opens, 1, "the row opens, as it always did");
+		});
+	}
+
+	it("claims a modified click on its own, for engines that deliver no usable press", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true }, 390);
+
+		const clickTaken = press(dom, "click", { metaKey: true });
+
+		assert.equal(clickTaken, true);
+		assert.equal(log.opens, 0);
+		assert.deepEqual(log.offers, [
+			{ shiftKey: false, metaKey: true, ctrlKey: false },
+		]);
+	});
+
+	it("leaves the browser's gesture standing when selection declines the press", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: false }, 1280);
+
+		const { pressTaken, clickTaken } = gesture(dom, { metaKey: true });
+
+		assert.equal(pressTaken, false, "cmd-click still opens a new tab");
+		assert.equal(clickTaken, false);
+	});
+
+	it("reads no modifier on a row that cannot be selected", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true, unselectable: true }, 1280);
+
+		const { pressTaken, clickTaken } = gesture(dom, { shiftKey: true });
+
+		assert.equal(pressTaken, false);
+		assert.equal(clickTaken, false);
+		assert.deepEqual(log.offers, []);
+	});
+
+	it("ignores a press from any button but the primary one", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true }, 1280);
+
+		const pressTaken = press(dom, "mousedown", { button: 2, ctrlKey: true });
+
+		assert.equal(pressTaken, false, "a right-click keeps its context menu");
+		assert.deepEqual(log.offers, []);
+	});
+
+	it("suppresses the context menu a ctrl-press already spent on selection", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true }, 1280);
+
+		assert.equal(press(dom, "contextmenu", { ctrlKey: true }), true);
+	});
+
+	it("leaves a plain right-click its context menu", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true }, 1280);
+
+		assert.equal(press(dom, "contextmenu", {}), false);
+	});
+
+	it("leaves the context menu alone on a row that cannot be selected", () => {
+		const log = emptyLog();
+		const dom = mount({ log, takes: true, unselectable: true }, 1280);
+
+		assert.equal(press(dom, "contextmenu", { ctrlKey: true }), false);
+	});
+});
+
+describe("isModified", () => {
+	it("is true for any of the three keys a keyboard can add", () => {
+		assert.equal(
+			isModified({ shiftKey: true, metaKey: false, ctrlKey: false }),
+			true,
+		);
+		assert.equal(
+			isModified({ shiftKey: false, metaKey: true, ctrlKey: false }),
+			true,
+		);
+		assert.equal(
+			isModified({ shiftKey: false, metaKey: false, ctrlKey: true }),
+			true,
+		);
+	});
+
+	it("is false for the bare press a tap delivers", () => {
+		assert.equal(
+			isModified({ shiftKey: false, metaKey: false, ctrlKey: false }),
+			false,
+		);
+	});
+});

package/src/components/mail/useModifierSelect.ts

@@ -0,0 +1,109 @@
+/**
+ * Modifier-click selection for a message row, shared by every row shape.
+ *
+ * Selection on modifiers is not gated on the layout tier. `isDesktop` is a media
+ * query at 1024px: it says how the app is laid out, not what is driving it.
+ * While the modifiers were read only on the desktop tier, every narrower window
+ * — a half-screen browser, a tablet — fell through to the touch branch, which
+ * never looks at them, and shift, cmd and ctrl click all just opened the
+ * message. A modifier can only come from a real keyboard, so a row honours it at
+ * every width; a tap carries none and is unaffected.
+ *
+ * The press, not the click, is where a modified click is taken. A mailbox row is
+ * an `<a href>`, and a modified click on an anchor is a browser gesture: shift
+ * opens a new window, cmd a new tab, ctrl raises the context menu. WebKit
+ * commits to that gesture from the press, so a `click` handler calling
+ * `preventDefault` is already too late there. `claimClick` still handles the
+ * click for engines that deliver it that way.
+ */
+import { type MouseEvent, useCallback, useRef } from "react";
+import type { SelectionModifiers } from "@/hooks/useSelection";
+
+export const modifiersOf = (e: MouseEvent): SelectionModifiers => ({
+	shiftKey: e.shiftKey,
+	metaKey: e.metaKey,
+	ctrlKey: e.ctrlKey,
+});
+
+export const isModified = (m: SelectionModifiers): boolean =>
+	m.shiftKey || m.metaKey || m.ctrlKey;
+
+export interface ModifierSelect {
+	/** Takes a modified press for selection before the browser acts on it. */
+	onMouseDown: (e: MouseEvent<HTMLElement>) => void;
+	/**
+	 * Suppresses the context menu macOS raises from a ctrl-click the press
+	 * already spent on selection. A plain right-click keeps its menu.
+	 */
+	onContextMenu: (e: MouseEvent) => void;
+	/**
+	 * True when the click belongs to a modified gesture selection has taken, in
+	 * which case it is already consumed and the row must not open.
+	 */
+	claimClick: (e: MouseEvent) => boolean;
+}
+
+const consume = (e: MouseEvent): void => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+
+export const useModifierSelect = (
+	messageId: string,
+	onRowSelect?: (messageId: string, modifiers: SelectionModifiers) => boolean,
+): ModifierSelect => {
+	// Set while a modified press has already been handed to selection, so the
+	// click the same gesture still delivers cannot open the row on top of it.
+	const claimedRef = useRef(false);
+
+	const onMouseDown = useCallback(
+		(e: MouseEvent<HTMLElement>) => {
+			claimedRef.current = false;
+			// Only the primary button; a right-click keeps its context menu.
+			if (e.button !== 0) return;
+			const modifiers = modifiersOf(e);
+			if (!isModified(modifiers)) return;
+			// The browser's own default is only worth taking once selection has
+			// actually taken the press. On a row without selection, cmd-click still
+			// opens a new tab.
+			if (!onRowSelect?.(messageId, modifiers)) return;
+			consume(e);
+			claimedRef.current = true;
+			// Preventing the press also drops the focus it would have moved, so put
+			// it back: the roving cursor follows the row the user clicked, and it is
+			// the origin a later shift-click ranges from.
+			e.currentTarget.focus();
+			// Shift-click otherwise drags a native text selection across the rows it
+			// spans — the row highlight is the selection the user asked for.
+			if (modifiers.shiftKey) window.getSelection()?.removeAllRanges();
+		},
+		[onRowSelect, messageId],
+	);
+
+	const onContextMenu = useCallback(
+		(e: MouseEvent) => {
+			if (!e.ctrlKey || !onRowSelect) return;
+			e.preventDefault();
+		},
+		[onRowSelect],
+	);
+
+	const claimClick = useCallback(
+		(e: MouseEvent): boolean => {
+			if (claimedRef.current) {
+				claimedRef.current = false;
+				consume(e);
+				return true;
+			}
+			const modifiers = modifiersOf(e);
+			if (!isModified(modifiers)) return false;
+			if (!onRowSelect?.(messageId, modifiers)) return false;
+			consume(e);
+			if (modifiers.shiftKey) window.getSelection()?.removeAllRanges();
+			return true;
+		},
+		[onRowSelect, messageId],
+	);
+
+	return { onMouseDown, onContextMenu, claimClick };
+};