@remit/web-client 0.0.325 → 0.0.326

package/src/components/mail/MessageToolbar.tsx

@@ -1,215 +0,0 @@
-import {
-	IntelligenceToggle,
-	type MailAction,
-	MailActionToolbar,
-	tooltipForAction,
-} from "@remit/ui";
-import { useState } from "react";
-import { MoveToTrigger } from "./MoveToTrigger";
-
-/**
- * Message action toolbar on the pane-header datum (40px, the shared
- * `--spacing-pane-header`). Everything here acts on the open message: reply /
- * reply-all / forward, then delete / move / flag — Apple-Mail-style ghost icon
- * buttons — and the intelligence toggle (#422).
- *
- * Search, compose, bug report and the account menu are not message context;
- * they live in the app top bar above every pane (`MailTopBar`, #49).
- *
- * The control set is fixed: every button occupies the same slot on every view
- * and in every selection state (#52). The mail verbs stay pressable with no
- * thread open — a press is a no-op that surfaces a one-line inline explanation
- * (`doc/rules/ux.md`). The intelligence toggle greys out instead, because it
- * has nothing to explain: it opens a rail, and there is no rail to open.
- */
-export interface MessageToolbarProps {
-	hasThread: boolean;
-	/**
-	 * The message the verbs act on, as the address states it. The inline notice
-	 * a press leaves behind belongs to that message and to nothing after it, so
-	 * opening another one takes the sentence down (#818).
-	 */
-	messageId?: string;
-	intelligenceOpen: boolean;
-	/**
-	 * Whether pressing the intelligence toggle would open anything: the view has
-	 * an intelligence surface at this width — the rail, or the drawer where the
-	 * rail does not fit — and a thread is selected. The button renders either
-	 * way, disabled when false, never absent (#52).
-	 */
-	canToggleIntelligence: boolean;
-	onToggleIntelligence: () => void;
-
-	/* ---- wired action callbacks (omit to keep the no-op-explain behaviour) ---- */
-	onReply?: () => void;
-	onReplyAll?: () => void;
-	onForward?: () => void;
-	/** Delete all messages in the open thread. */
-	onDelete?: () => void;
-	/** Toggle the star on the most-recent message in the thread. */
-	onToggleStar?: () => void;
-	/** Whether the most-recent message is starred. */
-	isStarred?: boolean;
-	/**
-	 * Move-to-mailbox trigger context. When present the FolderInput button
-	 * is replaced by the full `MoveToTrigger` popover.
-	 */
-	moveContext?: {
-		accountId: string;
-		currentMailboxId: string;
-		onMove: (destinationMailboxId: string) => void;
-	};
-	/**
-	 * Whether the lookup behind `moveContext` is still in flight. Absent context
-	 * is either a read that has not landed or one that settled holding nothing,
-	 * and the two owe the reader different sentences (#818).
-	 */
-	moveContextLoading?: boolean;
-}
-
-const OPEN_FIRST = "Open a message first";
-
-/**
- * A thread is open and the verb still has nothing to act on — the conversation
- * has not said which turn answers for it yet. A press has to say so: the
- * shared toolbar only explains itself when there is no thread at all, so an
- * unwired handler under an open one would be swallowed in silence (#803).
- */
-const NOT_LOADED_YET = "This conversation hasn't loaded yet";
-
-/**
- * Move alone waits on a second read — the account owning this mailbox, found by
- * fanning out over every account's mailbox list. With the message on screen and
- * that fan-out still in flight, "open a message first" is simply false (#818).
- */
-const MAILBOXES_LOADING = "The mailbox list hasn't loaded yet";
-
-/** The same read, settled and holding no account for this mailbox: it errored,
- *  or no account lists the folder. Waiting will not fix either one. */
-const MAILBOXES_MISSING =
-	"Couldn't find this mailbox's account — reload to try again";
-
-/** The accessible name of each verb's button, for the sentence that invites a
- *  press to be repeated once what it waited for arrives. */
-const LABELS: Record<MailAction, string> = {
-	reply: "Reply",
-	replyAll: "Reply all",
-	forward: "Forward",
-	delete: "Move to Trash",
-	move: "Move to mailbox",
-	flag: "Star",
-};
-
-interface Press {
-	action: MailAction;
-	messageId: string | null;
-	/** Whether a thread was open when the press was made. A Move made over an
-	 *  open message is carried into the picker; one made over an empty pane
-	 *  asked for nothing that could still arrive. */
-	overThread: boolean;
-}
-
-export const MessageToolbar = ({
-	hasThread,
-	messageId,
-	intelligenceOpen,
-	canToggleIntelligence,
-	onToggleIntelligence,
-	onReply,
-	onReplyAll,
-	onForward,
-	onDelete,
-	onToggleStar,
-	isStarred,
-	moveContext,
-	moveContextLoading,
-}: MessageToolbarProps) => {
-	const [press, setPress] = useState<Press | null>(null);
-	const actingOn = messageId ?? null;
-
-	// The one place availability is decided. It agrees with `MailActionToolbar`
-	// by construction — a null reason implies both a thread and a handler, which
-	// is exactly what the shared bar requires before it calls one — so no press
-	// can fall between the two and end in silence.
-	const whyUnavailable = (action: MailAction): string | null => {
-		if (!hasThread) return OPEN_FIRST;
-		if (action === "move") {
-			if (moveContext) return null;
-			return moveContextLoading ? MAILBOXES_LOADING : MAILBOXES_MISSING;
-		}
-		const handler = {
-			reply: onReply,
-			replyAll: onReplyAll,
-			forward: onForward,
-			delete: onDelete,
-			flag: onToggleStar,
-		}[action];
-		return handler ? null : NOT_LOADED_YET;
-	};
-
-	// Derived rather than stored: the sentence is re-read from the press on every
-	// render, so it leaves the moment its reason does. What it leaves behind is
-	// an invitation, not nothing — the press was made and never acted on.
-	const pressed = press && press.messageId === actingOn ? press : null;
-	const reason = pressed ? whyUnavailable(pressed.action) : null;
-	// Move is the exception: its press is carried into the picker below, which
-	// mounts already open, so there is nothing left to ask for.
-	const carriedMove =
-		pressed?.action === "move" && pressed.overThread && Boolean(moveContext);
-	const hint =
-		reason ??
-		(pressed && !carriedMove
-			? `${LABELS[pressed.action]} is ready — press it again`
-			: null);
-
-	const record = (action: MailAction) =>
-		setPress({ action, messageId: actingOn, overThread: hasThread });
-	const explain = (action: MailAction) => () => record(action);
-	// Every verb the bar renders answers a press, wired or not — and a press
-	// that acts takes down whatever an earlier one left behind, so a stale
-	// complaint never reads as this verb's failure.
-	const wired = (action: MailAction, handler: (() => void) | undefined) =>
-		handler
-			? () => {
-					setPress(null);
-					handler();
-				}
-			: explain(action);
-
-	return (
-		<MailActionToolbar
-			hasThread={hasThread}
-			isStarred={isStarred}
-			onUnavailable={record}
-			unavailableHint={hint}
-			replyTitle={`Reply ${tooltipForAction("reply")}`}
-			replyAllTitle={`Reply all ${tooltipForAction("replyAll")}`}
-			forwardTitle={`Forward ${tooltipForAction("forward")}`}
-			deleteTitle={`Move to Trash ${tooltipForAction("delete")}`}
-			flagTitle={`Star ${tooltipForAction("toggleStar")}`}
-			onReply={wired("reply", onReply)}
-			onReplyAll={wired("replyAll", onReplyAll)}
-			onForward={wired("forward", onForward)}
-			onDelete={wired("delete", onDelete)}
-			onToggleStar={wired("flag", onToggleStar)}
-			onMove={explain("move")}
-			moveSlot={
-				moveContext ? (
-					<MoveToTrigger
-						accountId={moveContext.accountId}
-						currentMailboxId={moveContext.currentMailboxId}
-						onMove={moveContext.onMove}
-						label="Move to mailbox"
-						defaultOpen={carriedMove}
-					/>
-				) : undefined
-			}
-		>
-			<IntelligenceToggle
-				open={intelligenceOpen}
-				enabled={canToggleIntelligence}
-				onToggle={onToggleIntelligence}
-			/>
-		</MailActionToolbar>
-	);
-};

package/src/components/mail/MobileMessageBar.tsx

@@ -1,140 +0,0 @@
-import {
-	messageBulkOperationsUpdateFlagsMutation,
-	threadDetailOperationsListThreadMessagesQueryKey,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { MobileMessageActionBar, type PopoverMenuItem } from "@remit/ui";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { BadgeCheck, Check, Code } from "lucide-react";
-import { useCallback } from "react";
-import { useDeleteMessages } from "@/hooks/useDeleteMessages";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
-import { useToggleTrusted } from "@/hooks/useToggleTrusted";
-import {
-	invalidateThreadListQueries,
-	threadListCacheKeys,
-} from "@/lib/thread-list-cache";
-import { MoveToTrigger } from "./MoveToTrigger";
-
-interface MobileMessageBarProps {
-	messageId: string;
-	threadId: string;
-	mailboxId: string;
-	accountId?: string;
-	isRead: boolean;
-	isStarred: boolean;
-	onToggleStar: () => void;
-	/** From-address id; enables the "Trusted sender" overflow item. */
-	fromAddressId?: string;
-	isTrusted: boolean;
-	showRaw: boolean;
-	onToggleRaw?: () => void;
-	onReply?: () => void;
-	onReplyAll?: () => void;
-	onForward?: () => void;
-}
-
-/**
- * The live per-message action bar for the mobile single-pane reading view.
- * Wraps the kit `MobileMessageActionBar` and owns this message's mutations:
- * star (host), move-to-folder, delete, mark read/unread, plus the trusted /
- * raw toggles in the overflow. Reply verbs come from the conversation.
- */
-export const MobileMessageBar = ({
-	messageId,
-	threadId,
-	mailboxId,
-	accountId,
-	isRead,
-	isStarred,
-	onToggleStar,
-	fromAddressId,
-	isTrusted,
-	showRaw,
-	onToggleRaw,
-	onReply,
-	onReplyAll,
-	onForward,
-}: MobileMessageBarProps) => {
-	const queryClient = useQueryClient();
-
-	const { deleteMessages } = useDeleteMessages({ mailboxId, threadId });
-	const { moveMessages } = useMoveMessages({ mailboxId, threadId, accountId });
-	const { toggleTrusted } = useToggleTrusted({ messageId });
-
-	const { mutate: updateFlags } = useMutation({
-		...messageBulkOperationsUpdateFlagsMutation(),
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: threadDetailOperationsListThreadMessagesQueryKey({
-					path: { threadId },
-				}),
-			});
-			invalidateThreadListQueries(
-				queryClient,
-				threadListCacheKeys([mailboxId]),
-			);
-		},
-	});
-
-	const handleMove = useCallback(
-		(destinationMailboxId: string) => {
-			moveMessages([messageId], destinationMailboxId);
-		},
-		[moveMessages, messageId],
-	);
-
-	const handleDelete = useCallback(() => {
-		deleteMessages([messageId]);
-	}, [deleteMessages, messageId]);
-
-	const handleToggleRead = useCallback(() => {
-		updateFlags({ body: { messageIds: [messageId], isRead: !isRead } });
-	}, [updateFlags, messageId, isRead]);
-
-	const overflowItems: PopoverMenuItem[] = [];
-	if (fromAddressId) {
-		overflowItems.push({
-			key: "trusted",
-			label: isTrusted ? "Trusted sender" : "Mark sender trusted",
-			icon: isTrusted ? (
-				<BadgeCheck className="size-4 text-positive" />
-			) : (
-				<Check className="size-4" />
-			),
-			onSelect: () => toggleTrusted(fromAddressId, isTrusted),
-		});
-	}
-	if (onToggleRaw) {
-		overflowItems.push({
-			key: "raw",
-			label: showRaw ? "Show formatted" : "Show raw email",
-			icon: <Code className="size-4" />,
-			onSelect: onToggleRaw,
-		});
-	}
-
-	return (
-		<MobileMessageActionBar
-			hasThread
-			onReply={onReply}
-			onReplyAll={onReplyAll}
-			onForward={onForward}
-			isStarred={isStarred}
-			onToggleStar={onToggleStar}
-			onDelete={handleDelete}
-			isRead={isRead}
-			onToggleRead={handleToggleRead}
-			overflowItems={overflowItems}
-			moveSlot={
-				accountId ? (
-					<MoveToTrigger
-						accountId={accountId}
-						currentMailboxId={mailboxId}
-						onMove={handleMove}
-						label="Move this message"
-					/>
-				) : undefined
-			}
-		/>
-	);
-};

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

@@ -1,310 +0,0 @@
-/**
- * The move-to-folder picker. It only fetches folders once it is opened, it
- * opens on the account's top level with nested folders behind the one holding
- * them, it marks the folder the messages are already in rather than offering it
- * as a destination, and on desktop Escape or a click outside puts it away.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { makeMailbox } from "../../test-support/fixtures";
-import { MoveToTrigger } from "./MoveToTrigger";
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-const ACCOUNT_ID = "acc-1";
-
-const mount = (
-	options: {
-		mailboxes?: RemitImapMailboxResponse[];
-		currentMailboxId?: string;
-		disabledHint?: string;
-		onMove?: (destinationMailboxId: string) => void;
-		viewportWidth?: number;
-		orientation?: "portrait" | "landscape";
-		pointer?: "coarse" | "fine";
-	} = {},
-): DomHarness => {
-	harness = createDomHarness({
-		viewportWidth: options.viewportWidth,
-		orientation: options.orientation,
-		pointer: options.pointer,
-	});
-	if (options.mailboxes) {
-		harness.queryClient.setQueryData(
-			mailboxOperationsListMailboxesQueryKey({
-				path: { accountId: ACCOUNT_ID },
-			}),
-			{ items: options.mailboxes },
-		);
-	}
-	harness.renderApp(
-		createElement(MoveToTrigger, {
-			accountId: ACCOUNT_ID,
-			currentMailboxId: options.currentMailboxId ?? "mbx-inbox",
-			onMove: options.onMove ?? (() => undefined),
-			disabledHint: options.disabledHint,
-		}),
-	);
-	return harness;
-};
-
-const FOLDERS = [
-	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
-	makeMailbox({ mailboxId: "mbx-work", fullPath: "Work" }),
-	makeMailbox({ mailboxId: "mbx-clients", fullPath: "Work/Clients" }),
-	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "Receipts" }),
-];
-
-// The desktop picker renders through a portal into document.body, so its
-// content sits outside the render container these helpers normally scope to.
-const pickerRoot = (dom: DomHarness): ParentNode => {
-	const trigger = dom.byLabel("Move to folder");
-	return trigger.getAttribute("aria-haspopup") === "dialog"
-		? dom.container
-		: dom.document.body;
-};
-
-const rowText = (dom: DomHarness): string[] =>
-	[...pickerRoot(dom).querySelectorAll("[role=treeitem]")].map(
-		(row) => row.textContent ?? "",
-	);
-
-const pickerText = (dom: DomHarness): string =>
-	pickerRoot(dom).textContent ?? "";
-
-const pickerByLabel = (dom: DomHarness, label: string): HTMLElement => {
-	const found = pickerRoot(dom).querySelector(`[aria-label="${label}"]`);
-	if (!found) throw new Error(`no picker element labelled "${label}"`);
-	return found as HTMLElement;
-};
-
-const pickerByText = (
-	dom: DomHarness,
-	selector: string,
-	text: string,
-): HTMLElement => {
-	const found = [...pickerRoot(dom).querySelectorAll(selector)].find((node) =>
-		(node.textContent ?? "").includes(text),
-	);
-	if (!found) throw new Error(`no picker ${selector} containing "${text}"`);
-	return found as HTMLElement;
-};
-
-describe("MoveToTrigger", () => {
-	it("reports itself as collapsed until it is opened", () => {
-		const dom = mount({ mailboxes: FOLDERS });
-		const trigger = dom.byLabel("Move to folder");
-		assert.equal(trigger.getAttribute("aria-expanded"), "false");
-		assert.equal(trigger.getAttribute("aria-controls"), null);
-		assert.equal(dom.query('[role="tree"], input'), null);
-	});
-
-	it("opens the top level and marks the folder we are in", () => {
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-
-		assert.equal(
-			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
-			"true",
-		);
-		const labels = rowText(dom);
-		assert.ok(labels.some((label) => label.includes("Work")));
-		assert.ok(labels.some((label) => label.includes("Receipts")));
-
-		// The folder the messages are already in stays in the list, marked as
-		// where they are now rather than presented as somewhere to move them.
-		const current = labels.find((label) => label.includes("current"));
-		assert.ok(current, "the source folder is marked as the current one");
-	});
-
-	it("keeps a nested folder behind the folder that holds it", () => {
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-		assert.equal(
-			rowText(dom).some((label) => label.includes("Clients")),
-			false,
-		);
-
-		dom.click(pickerByLabel(dom, "Move to Work"));
-		assert.ok(rowText(dom).some((label) => label.includes("Clients")));
-	});
-
-	it("waits for the move to be confirmed, then closes itself", () => {
-		const moved: string[] = [];
-		const dom = mount({
-			mailboxes: FOLDERS,
-			onMove: (id) => moved.push(id),
-		});
-		dom.click(dom.byLabel("Move to folder"));
-
-		// Picking a folder also opens it, so the move is a separate press —
-		// otherwise the first tap would fire before anything nested was reachable.
-		dom.click(pickerByLabel(dom, "Move to Work"));
-		assert.deepEqual(moved, []);
-
-		dom.click(pickerByText(dom, "button", "Move to Work"));
-		assert.deepEqual(moved, ["mbx-work"]);
-		assert.equal(
-			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
-			"false",
-		);
-	});
-
-	it("names the destination on the button that runs the move", () => {
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-		dom.click(pickerByLabel(dom, "Move to Work"));
-		dom.click(pickerByLabel(dom, "Move to Clients"));
-
-		assert.match(pickerText(dom), /Move to Clients/);
-	});
-
-	it("closes on Escape and on a click outside it", () => {
-		const dom = mount({ mailboxes: FOLDERS });
-		const isOpen = () =>
-			dom.byLabel("Move to folder").getAttribute("aria-expanded") === "true";
-
-		// The window-level triage layer maps Escape to `back`, which closes the
-		// conversation behind the picker; one press must not do both (#732, #958).
-		const seen: string[] = [];
-		const listener = (event: Event) => seen.push((event as KeyboardEvent).key);
-		dom.window.addEventListener("keydown", listener);
-
-		dom.click(dom.byLabel("Move to folder"));
-		assert.equal(isOpen(), true);
-		dom.dispatch(
-			dom.window.document.body,
-			new dom.window.KeyboardEvent("keydown", {
-				key: "Escape",
-				bubbles: true,
-			}),
-		);
-		assert.equal(isOpen(), false);
-		assert.deepEqual(seen, [], "the layer behind the picker saw the press");
-		dom.window.removeEventListener("keydown", listener);
-
-		dom.click(dom.byLabel("Move to folder"));
-		assert.equal(isOpen(), true);
-		dom.dispatch(
-			dom.window.document.body,
-			new dom.window.MouseEvent("mousedown", { bubbles: true }),
-		);
-		assert.equal(isOpen(), false);
-	});
-
-	it("renders the desktop picker outside its own subtree (#601)", () => {
-		// Regression: an in-place absolute popover is clipped by the reading
-		// pane's overflow-hidden shell and painted underneath the thread list.
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-
-		const trigger = dom.byLabel("Move to folder");
-		const tree = pickerRoot(dom).querySelector("[role=tree]");
-		assert.ok(tree, "the picker is open");
-		assert.ok(
-			!trigger.parentElement?.contains(tree),
-			"the picker escapes the trigger's subtree via a portal",
-		);
-	});
-
-	it("stays open when the press lands inside the portalled panel (#601)", () => {
-		// The panel is not in the trigger's subtree any more, so the outside-press
-		// guard has to recognise it by its own ref — otherwise the first press on
-		// a folder closes the picker before it can be picked.
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-
-		dom.dispatch(
-			pickerByLabel(dom, "Move to Work"),
-			new dom.window.MouseEvent("mousedown", { bubbles: true }),
-		);
-
-		assert.equal(
-			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
-			"true",
-		);
-	});
-
-	it("takes the keyboard into the picker and hands it back on close", () => {
-		// Regression: with the panel on the body, Tab from the trigger walked on
-		// to the next toolbar button instead of entering the picker.
-		const dom = mount({ mailboxes: FOLDERS });
-		dom.click(dom.byLabel("Move to folder"));
-
-		const filter = pickerRoot(dom).querySelector('input[type="search"]');
-		assert.ok(filter, "the picker has a filter field");
-		assert.equal(dom.document.activeElement, filter);
-
-		dom.dispatch(
-			dom.window.document,
-			new dom.window.KeyboardEvent("keydown", { key: "Escape" }),
-		);
-		assert.equal(dom.document.activeElement, dom.byLabel("Move to folder"));
-	});
-
-	it("refuses to open, and says why, when the selection spans accounts", () => {
-		const hint = "Select messages from one account to move them";
-		const dom = mount({ mailboxes: FOLDERS, disabledHint: hint });
-		const trigger = dom.byLabel("Move to folder");
-		assert.equal(trigger.getAttribute("title"), hint);
-
-		dom.click(trigger);
-		assert.equal(trigger.getAttribute("aria-expanded"), "false");
-	});
-
-	it("opens a dialog rather than a popover on a phone", () => {
-		const dom = mount({ mailboxes: FOLDERS, viewportWidth: 390 });
-		assert.equal(
-			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
-			"dialog",
-		);
-	});
-
-	it("opens a dialog on a tablet held upright, which is 1024px wide", () => {
-		// Regression: the desktop gate was a bare width, and a large tablet in
-		// portrait is exactly 1024px — it got the desktop popover on a touch
-		// screen with no room for it.
-		const dom = mount({
-			mailboxes: FOLDERS,
-			viewportWidth: 1024,
-			orientation: "portrait",
-			pointer: "coarse",
-		});
-		assert.equal(
-			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
-			"dialog",
-		);
-	});
-
-	it("opens a popover on the same tablet turned sideways", () => {
-		const dom = mount({
-			mailboxes: FOLDERS,
-			viewportWidth: 1024,
-			orientation: "landscape",
-			pointer: "coarse",
-		});
-		assert.notEqual(
-			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
-			"dialog",
-		);
-	});
-
-	it("asks for the folder list only once the picker is opened", () => {
-		const dom = mount();
-		assert.equal(dom.queryAll("[role=treeitem]").length, 0);
-		dom.click(dom.byLabel("Move to folder"));
-		// No cached mailboxes and no network in the test harness: the picker
-		// shows its loading state rather than an empty list of destinations.
-		assert.match(pickerText(dom), /Loading folders/);
-	});
-});