@remit/web-client 0.0.325 → 0.0.327

package/src/components/mail/FlaggedPane.tsx

@@ -1,473 +0,0 @@
-/**
- * FlaggedPane — compound component for the Flagged virtual mailbox
- * (/mail/flagged route).
- *
- * Mirrors BriefPane in shape: it resolves the open thread and owns the list /
- * reading / phone slots. The list itself is a FLAT inbox of starred mail (see
- * `FlaggedList`), not the sectioned brief.
- *
- * The row prefers the starred listing, the same query that produced the rows,
- * and falls back to resolving the thread on its own when the address names
- * one the listing doesn't hold. The unified listing is INBOX-scoped, so
- * resolving against it left every starred thread filed elsewhere — Sent, an
- * archive folder, anything past the inbox window — visible in the list but
- * impossible to open (issue #70).
- *
- * Usage in the list layout route:
- *
- *   <FlaggedPane thread={useOpenThreadPath()}>
- *     <MailShell
- *       list={<FlaggedPane.List />}
- *       reading={<Outlet />}
- *     />
- *   </FlaggedPane>
- *
- * On phone, use `<FlaggedPane.Phone />` instead.
- */
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty } from "@remit/ui";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useMemo,
-} from "react";
-import { useReplyWithText } from "@/components/compose/reply-with-times";
-import { ConversationView } from "@/components/mail/ConversationView";
-import { FlaggedList } from "@/components/mail/FlaggedList";
-import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
-import { IntelligencePane } from "@/components/mail/IntelligencePane";
-import { MessageToolbar } from "@/components/mail/MessageToolbar";
-import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction";
-import { useDeleteMessages } from "@/hooks/useDeleteMessages";
-import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
-import { useIntelligenceSurface } from "@/hooks/useIntelligenceSurface";
-import { useToggleReadFor } from "@/hooks/useMarkAsRead";
-import { useStarredThreads } from "@/hooks/useStarredThreads";
-import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
-import { useThreadRow } from "@/hooks/useThreadRow";
-import {
-	type TriageContext,
-	useTriageContext,
-	useTriageLayer,
-} from "@/hooks/useTriageLayer";
-import type { ConversationTarget } from "@/lib/conversation-target";
-import { useMailContext } from "@/lib/mail-context";
-import {
-	type OpenThreadPath,
-	type OpenThreadTarget,
-	type ReplyMode,
-	replyToThread,
-	useCloseThread,
-	useGoToSection,
-	useIsComposing,
-	useIsReplying,
-	useOpenReply,
-	useOpenThread,
-} from "@/routing";
-
-/* ------------------------------------------------------------------ */
-/* Context                                                              */
-/* ------------------------------------------------------------------ */
-
-interface FlaggedPaneContextValue {
-	/** The row the reader pointed at, which is the one the list highlights. */
-	selectedMessageId: string | undefined;
-	selectedThread: RemitImapThreadMessageResponse | undefined;
-	/** The conversation the pane shows, or none when the address names no thread. */
-	conversation: ConversationTarget | undefined;
-	onOpenThread: (
-		target: OpenThreadTarget,
-		options?: OpenMessageOptions,
-	) => void;
-	onCloseThread: () => void;
-	/** The rows either side of the open one — the phone's swipe gestures. */
-	nextThread: OpenThreadTarget | undefined;
-	previousThread: OpenThreadTarget | undefined;
-	/**
-	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
-	 * account — Flagged spans accounts, so there is no route mailbox to key by.
-	 */
-	actions: ThreadActions;
-	/**
-	 * Answer the conversation the address has open. Absent when it names none,
-	 * which is what the toolbar turns into its own explanation.
-	 */
-	onReply: ((mode: ReplyMode) => void) | undefined;
-	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
-	triage: TriageContext;
-	onDeleteMessages: (messageIds: string[]) => void;
-	/**
-	 * Deselects the open message when it's the one a mutation just removed
-	 * from view — wired into every mutation that can take the open message out
-	 * of view (delete, report-spam/undo), so the reading pane and intelligence
-	 * panel never keep rendering a message that's left the list.
-	 */
-	handleDeselectIfRemoved: (removedIds: string[]) => void;
-}
-
-const FlaggedPaneCtx = createContext<FlaggedPaneContextValue | null>(null);
-
-function useFlaggedPane(): FlaggedPaneContextValue {
-	const ctx = useContext(FlaggedPaneCtx);
-	if (!ctx) throw new Error("FlaggedPane.* must be used inside <FlaggedPane>");
-	return ctx;
-}
-
-/* ------------------------------------------------------------------ */
-/* Provider                                                             */
-/* ------------------------------------------------------------------ */
-
-interface FlaggedPaneProps {
-	/** The open conversation, as the address states it. */
-	thread: OpenThreadPath | undefined;
-	children: ReactNode;
-}
-
-function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
-	const openThread = useOpenThread();
-	const closeThread = useCloseThread();
-	const goToSection = useGoToSection();
-	const { searchInput } = useMailContext();
-	const threadId = thread?.threadId;
-	const pointedAtMessageId = thread?.messageId;
-
-	const { threads } = useStarredThreads();
-
-	// The row the starred listing itself holds, preferred because a mutation
-	// patches it in place. A thread reached from a cold address is in no listing
-	// here and answers for itself — the folder it is filed in is the thread's own
-	// data, so Starred spanning folders costs the URL nothing.
-	const listedThread = useMemo(() => {
-		if (!threadId) return undefined;
-		return (
-			threads.find((t) => t.messageId === pointedAtMessageId) ??
-			threads.find((t) => t.threadId === threadId)
-		);
-	}, [threads, threadId, pointedAtMessageId]);
-	const ownRow = useThreadRow(threadId, pointedAtMessageId);
-	const selectedThread = listedThread ?? ownRow;
-
-	const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
-
-	const conversation = useMemo<ConversationTarget | undefined>(() => {
-		if (!threadId) return undefined;
-		return {
-			threadId,
-			mailboxId: selectedThread?.mailboxId ?? "",
-			subject: selectedThread?.subject,
-			messageId: selectedMessageId,
-			authenticity: selectedThread?.authenticity,
-		};
-	}, [threadId, selectedThread, selectedMessageId]);
-
-	const handleOpenThread = useCallback(
-		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
-			openThread(target, { replace: options?.replace, query: searchInput });
-		},
-		[openThread, searchInput],
-	);
-
-	const handleDeselectIfRemoved = useCallback(
-		(removedIds: string[]) => {
-			if (!selectedMessageId) return;
-			if (!removedIds.includes(selectedMessageId)) return;
-			closeThread();
-		},
-		[selectedMessageId, closeThread],
-	);
-
-	const actions = useThreadActions({
-		thread: selectedThread,
-		isOpen: true,
-		onAfterOptimisticRemove: handleDeselectIfRemoved,
-	});
-
-	const triage = useTriageContext();
-
-	// A Flagged selection spans accounts and mailboxes, so the listings these
-	// patch are resolved from each message's own mailbox — the open thread's is
-	// only the fallback.
-	const { deleteMessages } = useDeleteMessages({
-		mailboxId: selectedThread?.mailboxId ?? "",
-		messages: threads,
-		onAfterOptimisticRemove: handleDeselectIfRemoved,
-	});
-	const { toggleReadFor } = useToggleReadFor({
-		mailboxId: selectedThread?.mailboxId ?? "",
-		messages: threads,
-	});
-
-	const focusedThreadId = triage.focusedMessageId;
-	const focusedThread = useMemo(
-		() => threads.find((t) => t.messageId === focusedThreadId),
-		[threads, focusedThreadId],
-	);
-	const triageTarget = focusedThread ?? selectedThread;
-	const triageActions = useThreadActions({
-		thread: triageTarget,
-		isOpen: triageTarget?.messageId === selectedMessageId,
-	});
-
-	// The toolbar answers the conversation on screen; the keyboard answers the
-	// row the cursor is on, which may be one the address has not opened yet.
-	// Both are one navigation, because the mode and the message it answers are
-	// segments of the same address — there is no open-it-first step for the
-	// answering half to be dropped from.
-	const isComposing = useIsComposing();
-	const isReplying = useIsReplying();
-	const openReply = useOpenReply();
-	const replyToOpenThread = useMemo(
-		() => replyToThread(openReply, threadId, selectedMessageId),
-		[openReply, threadId, selectedMessageId],
-	);
-
-	const replyToFocusedThread = useMemo(() => {
-		if (!triageTarget) return undefined;
-		return (mode: ReplyMode) =>
-			openReply({
-				threadId: triageTarget.threadId,
-				messageId: triageTarget.messageId,
-				mode,
-			});
-	}, [openReply, triageTarget]);
-
-	const { nextMessageId, previousMessageId } = useTriageLayer({
-		context: triage,
-		orderedIds: triage.orderedIds,
-		selectedMessageId,
-		// The list stays mounted under both writing surfaces, so the triage keys
-		// would otherwise fire at the message behind whatever is being typed — or
-		// answer a row the cursor moved to while a reply was open.
-		enabled: !isComposing && !isReplying,
-		hasOpenThread: threadId !== undefined,
-		onClose: closeThread,
-		handlers: {
-			reply: () => replyToFocusedThread?.("reply"),
-			replyAll: () => replyToFocusedThread?.("reply-all"),
-			forward: () => replyToFocusedThread?.("forward"),
-			// The list takes any verb aimed at its selection and opens the wizard
-			// on it, so a shortcut can never reach a bulk action the bar would have
-			// reviewed. What comes back here is a verb aimed at the bare cursor.
-			delete: () => {
-				if (triage.listCommandsRef.current?.requestVerb("delete")) return;
-				triageActions.deleteThread();
-			},
-			toggleStar: triageActions.toggleStar,
-			toggleRead: () => {
-				if (triage.listCommandsRef.current?.requestVerb("markRead")) return;
-				if (!triageTarget) return;
-				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
-			},
-			goBrief: () => goToSection("brief"),
-			goSettings: () => goToSection("settings"),
-		},
-	});
-
-	// The swipe gestures open a whole conversation, so the adjacent row has to
-	// name its thread. The starred listing is where that is looked up, so a row
-	// it does not hold offers no gesture rather than a tap that goes nowhere.
-	const adjacentThread = useCallback(
-		(messageId: string | undefined): OpenThreadTarget | undefined => {
-			if (!messageId) return undefined;
-			const row = threads.find((t) => t.messageId === messageId);
-			return row ? { threadId: row.threadId, messageId } : undefined;
-		},
-		[threads],
-	);
-
-	const ctx: FlaggedPaneContextValue = {
-		selectedMessageId,
-		selectedThread,
-		conversation,
-		onOpenThread: handleOpenThread,
-		onCloseThread: closeThread,
-		nextThread: adjacentThread(nextMessageId),
-		previousThread: adjacentThread(previousMessageId),
-		actions,
-		onReply: replyToOpenThread,
-		triage,
-		onDeleteMessages: deleteMessages,
-		handleDeselectIfRemoved,
-	};
-
-	return (
-		<FlaggedPaneCtx.Provider value={ctx}>{children}</FlaggedPaneCtx.Provider>
-	);
-}
-
-/* ------------------------------------------------------------------ */
-/* Sub-views                                                            */
-/* ------------------------------------------------------------------ */
-
-/** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
-function FlaggedListSlot() {
-	const { selectedMessageId, onOpenThread, triage, onDeleteMessages } =
-		useFlaggedPane();
-	return (
-		<FlaggedList
-			selectedMessageId={selectedMessageId}
-			onOpenThread={onOpenThread}
-			commandsRef={triage.listCommandsRef}
-			onTriageContextChange={triage.onTriageContextChange}
-			onDeleteMessages={onDeleteMessages}
-		/>
-	);
-}
-
-/**
- * Reading pane: toolbar + ConversationView.
- * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
- */
-function FlaggedReading() {
-	const replyWithText = useReplyWithText();
-	const {
-		conversation,
-		selectedThread,
-		actions,
-		onReply,
-		handleDeselectIfRemoved,
-		onOpenThread,
-	} = useFlaggedPane();
-	const hasThread = Boolean(conversation);
-	const intelligence = useIntelligenceSurface(conversation?.threadId);
-
-	return (
-		<>
-			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
-				<MessageToolbar
-					hasThread={hasThread}
-					intelligenceOpen={intelligence.isShowing}
-					canToggleIntelligence={intelligence.canToggle}
-					onToggleIntelligence={intelligence.toggle}
-					onReply={onReply ? () => onReply("reply") : undefined}
-					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
-					onForward={onReply ? () => onReply("forward") : undefined}
-					onDelete={hasThread ? actions.deleteThread : undefined}
-					onToggleStar={hasThread ? actions.toggleStar : undefined}
-					isStarred={actions.isStarred}
-					moveContext={
-						hasThread && actions.accountId && actions.mailboxId
-							? {
-									accountId: actions.accountId,
-									currentMailboxId: actions.mailboxId,
-									onMove: actions.moveThread,
-								}
-							: undefined
-					}
-				/>
-				<div className="min-h-0 flex-1 overflow-hidden">
-					{conversation ? (
-						<ConversationView
-							threadId={conversation.threadId}
-							mailboxId={conversation.mailboxId}
-							subject={conversation.subject}
-							selectedMessageId={conversation.messageId}
-							authenticity={conversation.authenticity}
-							onOpenIntelligence={intelligence.open}
-							listOnScreen
-						/>
-					) : (
-						<ReadingPaneEmpty />
-					)}
-				</div>
-			</section>
-			<IntelligenceDrawer
-				isOpen={intelligence.drawerOpen}
-				onClose={intelligence.closeDrawer}
-				thread={selectedThread}
-				accountId={selectedThread?.accountId}
-				onAfterOptimisticRemove={handleDeselectIfRemoved}
-				onReplyWithText={replyWithText}
-				onOpenThread={onOpenThread}
-			/>
-		</>
-	);
-}
-
-/**
- * Intelligence pane: IntelligencePane for the open thread.
- * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
- */
-function FlaggedIntelligence() {
-	const replyWithText = useReplyWithText();
-	const { selectedThread, handleDeselectIfRemoved, onOpenThread } =
-		useFlaggedPane();
-	const { onToggleIntelligence } = useMailContext();
-
-	return (
-		<IntelligencePane
-			onClose={onToggleIntelligence}
-			thread={selectedThread}
-			accountId={selectedThread?.accountId}
-			onAfterOptimisticRemove={handleDeselectIfRemoved}
-			onReplyWithText={replyWithText}
-			onOpenThread={onOpenThread}
-		/>
-	);
-}
-
-/** Phone view: ConversationView when a thread is open, else the flat list. */
-function FlaggedPhone() {
-	const replyWithText = useReplyWithText();
-	const {
-		selectedThread,
-		conversation,
-		onCloseThread,
-		onOpenThread,
-		nextThread,
-		previousThread,
-		handleDeselectIfRemoved,
-	} = useFlaggedPane();
-	const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
-
-	if (conversation) {
-		return (
-			<>
-				<ConversationView
-					threadId={conversation.threadId}
-					mailboxId={conversation.mailboxId}
-					subject={conversation.subject}
-					selectedMessageId={conversation.messageId}
-					authenticity={conversation.authenticity}
-					onBack={onCloseThread}
-					onOpenIntelligence={drawer.toggle}
-					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
-					onSwipePrevious={
-						previousThread ? () => onOpenThread(previousThread) : undefined
-					}
-					mobileIntelligenceOpen={drawer.isOpen}
-				/>
-				<IntelligenceDrawer
-					isOpen={drawer.isOpen}
-					onClose={drawer.close}
-					thread={selectedThread}
-					accountId={selectedThread?.accountId}
-					onAfterOptimisticRemove={handleDeselectIfRemoved}
-					onReplyWithText={replyWithText}
-					onOpenThread={onOpenThread}
-				/>
-			</>
-		);
-	}
-
-	return (
-		<div className="h-full">
-			<FlaggedListSlot />
-		</div>
-	);
-}
-
-/* ------------------------------------------------------------------ */
-/* Compound component assembly                                          */
-/* ------------------------------------------------------------------ */
-
-const FlaggedPane = Object.assign(FlaggedPaneProvider, {
-	List: FlaggedListSlot,
-	Reading: FlaggedReading,
-	Intelligence: FlaggedIntelligence,
-	Phone: FlaggedPhone,
-});
-
-export { FlaggedPane };

package/src/components/mail/IntelligenceDrawer.tsx

@@ -1,52 +0,0 @@
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import type { ReplyWithText } from "@/components/compose/reply-with-times";
-import { Drawer } from "@/components/layout/Drawer";
-import { IntelligencePane } from "@/components/mail/IntelligencePane";
-import type { OpenThreadTarget } from "@/routing";
-
-/**
- * The intelligence pane as a modal drawer — the surface every list pane uses
- * wherever the rail has no room, which is the phone and the two-pane desktop
- * band between 1024 and 1280px. Its open state is the caller's
- * (`useIntelligenceSurface`); what is inside it is the same panel the rail
- * mounts, minus its own close, because the drawer's header already carries one.
- */
-export function IntelligenceDrawer({
-	isOpen,
-	onClose,
-	thread,
-	accountId,
-	onAfterOptimisticRemove,
-	onReplyWithText,
-	onOpenThread,
-}: {
-	isOpen: boolean;
-	onClose: () => void;
-	thread?: RemitImapThreadMessageResponse;
-	accountId?: string;
-	onAfterOptimisticRemove?: (messageIds: string[]) => void;
-	onReplyWithText?: ReplyWithText;
-	onOpenThread?: (target: OpenThreadTarget) => void;
-}) {
-	return (
-		<Drawer
-			isOpen={isOpen}
-			onClose={onClose}
-			ariaLabel="Message details"
-			side="right"
-			// The key that raised it takes it away again (#840); every other verb
-			// stays with the list behind the scrim, which is not the subject here.
-			answers={{ toggleIntelligence: onClose }}
-		>
-			<IntelligencePane
-				onClose={onClose}
-				thread={thread}
-				accountId={accountId}
-				hideCloseButton
-				onAfterOptimisticRemove={onAfterOptimisticRemove}
-				onReplyWithText={onReplyWithText}
-				onOpenThread={onOpenThread}
-			/>
-		</Drawer>
-	);
-}

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

@@ -1,116 +0,0 @@
-/**
- * The spam quick action stayed clickable throughout its own request (issue
- * #648 review): the server dedupes message ids only within a single call, so
- * two clicks fired two separate HTTP requests. For the undo direction this
- * produced a wrong message — concurrent `notSpam` #2 reads
- * `originalMailboxId` before #1 clears it, waits on #1's restore move, and
- * can throw `MoveNotSettledError` on an undo that already succeeded. Wires
- * the real `useReportSpam` hook to the real `IntelligencePanel` (the shape
- * `IntelligencePane.tsx`'s `WiredPanel` uses) and clicks the real button
- * twice to prove the fix: disabled while pending blocks the second request
- * at the DOM level, not just in the hook.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { IntelligenceData } from "@remit/ui";
-import { IntelligencePanel } from "@remit/ui";
-import { createElement } from "react";
-import { useReportSpam } from "@/hooks/useReportSpam";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import { type HttpMock, mockFetch } from "@/test-support/http";
-
-const baseData: IntelligenceData = {
-	sender: {
-		name: "Alex Rivera",
-		email: "alex@example.com",
-		trust: "wellknown",
-		firstSeenLabel: "Jan 2025",
-	},
-	authenticity: {
-		verdict: "aligned",
-		fromDomain: "example.com",
-		dkimDomain: "example.com",
-		summary: "This message was signed by example.com.",
-	},
-	category: { value: "personal" },
-};
-
-const ReportHarness = () => {
-	const { reportSpam, isReporting } = useReportSpam({ mailboxId: "mbx-inbox" });
-	return createElement(IntelligencePanel, {
-		data: baseData,
-		actions: { onReportSpam: () => reportSpam(["msg-1"]) },
-		reportSpamPending: isReporting,
-	});
-};
-
-const UndoHarness = () => {
-	const { notSpam, isRestoring } = useReportSpam({ mailboxId: "mbx-junk" });
-	return createElement(IntelligencePanel, {
-		data: baseData,
-		actions: { onNotSpam: () => notSpam(["msg-1"]) },
-		notSpamPending: isRestoring,
-	});
-};
-
-let harness: DomHarness | undefined;
-let http: HttpMock;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http.restore();
-});
-
-describe("the spam quick action disables itself for the duration of its own request (#648 review)", () => {
-	it("report direction: a second click while the report is in flight sends only one request", async () => {
-		let resolveRequest: (() => void) | undefined;
-		http = mockFetch(
-			() =>
-				new Promise((resolve) => {
-					resolveRequest = () => resolve({ successCount: 1, failureCount: 0 });
-				}),
-		);
-		harness = createDomHarness();
-		harness.renderApp(createElement(ReportHarness));
-
-		const button = harness.byText("button", "Report spam") as HTMLButtonElement;
-		harness.click(button);
-		await harness.waitFor(() => button.textContent === "Reporting…");
-
-		assert.equal(button.disabled, true, "a control mid-request must disable");
-		harness.click(button);
-
-		assert.ok(resolveRequest, "the request never reached the mock");
-		resolveRequest?.();
-		await harness.waitFor(() => button.textContent === "Report spam");
-
-		assert.equal(http.to("/messages/report-spam").length, 1);
-	});
-
-	it("undo direction: a second click while the undo is in flight sends only one request", async () => {
-		let resolveRequest: (() => void) | undefined;
-		http = mockFetch(
-			() =>
-				new Promise((resolve) => {
-					resolveRequest = () => resolve({ successCount: 1, failureCount: 0 });
-				}),
-		);
-		harness = createDomHarness();
-		harness.renderApp(createElement(UndoHarness));
-
-		const button = harness.byText("button", "Not spam") as HTMLButtonElement;
-		harness.click(button);
-		await harness.waitFor(() => button.textContent === "Undoing…");
-
-		assert.equal(button.disabled, true, "a control mid-request must disable");
-		harness.click(button);
-
-		assert.ok(resolveRequest, "the request never reached the mock");
-		resolveRequest?.();
-		await harness.waitFor(() => button.textContent === "Not spam");
-
-		assert.equal(http.to("/messages/not-spam").length, 1);
-	});
-});

package/src/components/mail/IntelligencePane.test.ts

@@ -1,16 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, test } from "node:test";
-import { resolveSpamAction } from "./IntelligencePane";
-
-describe("resolveSpamAction (#648)", () => {
-	test("offers Report spam when the message carries no spam report", () => {
-		assert.equal(resolveSpamAction({}), "reportSpam");
-	});
-
-	test("offers Not spam once the message carries a spam report", () => {
-		assert.equal(
-			resolveSpamAction({ spamReport: { reportedAt: Date.now() } }),
-			"notSpam",
-		);
-	});
-});