@remit/web-client 0.0.214 → 0.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.214",
+  "version": "0.0.216",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/BriefPane.tsx

@@ -234,6 +234,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		// 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"),
@@ -359,6 +360,7 @@ function BriefReading() {
 							selectedMessageId={conversation.messageId}
 							authenticity={conversation.authenticity}
 							onOpenIntelligence={intelligence.open}
+							listOnScreen
 						/>
 					) : (
 						<ReadingPaneEmpty />

package/src/components/mail/ConversationView.tsx

@@ -56,6 +56,14 @@ interface ConversationViewProps {
 	onSwipePrevious?: () => void;
 	/** Whether the intelligence drawer is currently open (drives the ⓘ button pressed state). */
 	mobileIntelligenceOpen?: boolean;
+	/**
+	 * The message list is on screen beside this conversation, so it — not this
+	 * pane — owns j/k, the arrows and Enter (`shortcut-tree`: those sit at
+	 * `detail` only where no list is visible). Both used to act on the same
+	 * press, moving two cursors at once (#723). Answering the conversation is
+	 * unaffected: r, R and f are the open thread's at every width.
+	 */
+	listOnScreen?: boolean;
 }
 
 const LoadingSkeleton = () => (
@@ -87,6 +95,7 @@ export const ConversationView = ({
 	onSwipeNext,
 	onSwipePrevious,
 	mobileIntelligenceOpen,
+	listOnScreen = false,
 }: ConversationViewProps) => {
 	const isDesktop = useIsDesktop();
 	const { handlers: swipeHandlers } = useSwipeNavigation({
@@ -277,12 +286,23 @@ export const ConversationView = ({
 	useKeyboardNavigation({
 		enabled: !isLoading && messages.length > 0 && reply === undefined,
 		bindings: [
-			{ key: "j", handler: focusNext, preventDefault: true },
-			{ key: "ArrowDown", handler: focusNext, preventDefault: true },
-			{ key: "k", handler: focusPrevious, preventDefault: true },
-			{ key: "ArrowUp", handler: focusPrevious, preventDefault: true },
-			{ key: "Enter", handler: toggleFocusedMessage, preventDefault: true },
-			{ key: "o", handler: toggleFocusedMessage, preventDefault: true },
+			// Left unbound rather than bound and guarded: an unbound key is never
+			// preventDefault-ed, so it reaches the list's own window listener
+			// instead of the two racing on one press.
+			...(listOnScreen
+				? []
+				: [
+						{ key: "j", handler: focusNext, preventDefault: true },
+						{ key: "ArrowDown", handler: focusNext, preventDefault: true },
+						{ key: "k", handler: focusPrevious, preventDefault: true },
+						{ key: "ArrowUp", handler: focusPrevious, preventDefault: true },
+						{
+							key: "Enter",
+							handler: toggleFocusedMessage,
+							preventDefault: true,
+						},
+						{ key: "o", handler: toggleFocusedMessage, preventDefault: true },
+					]),
 			{ key: "r", handler: handleReply, preventDefault: true },
 			{
 				key: "R",

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

@@ -144,7 +144,6 @@ const mount = (options: {
 	accountId?: string;
 	trashFolderLabel?: string;
 	staleFolderLabel?: string;
-	trashIsUnconfirmed?: boolean;
 	authProvider?: AuthProvider;
 	onConfirm?: (messageIds: string[]) => void;
 }) => {
@@ -174,7 +173,6 @@ const mount = (options: {
 								accountId: options.accountId,
 								trashFolderLabel: options.trashFolderLabel,
 								staleFolderLabel: options.staleFolderLabel,
-								trashIsUnconfirmed: options.trashIsUnconfirmed,
 								isDeleting: options.isDeleting,
 								onConfirm,
 								onCancel: () => undefined,
@@ -325,6 +323,40 @@ describe("DeleteConfirmDialog — a refusal answers itself", () => {
 		assert.match(view.text(), /The Trash folder you chose is gone/);
 	});
 
+	// #876: a row already inside the folder reader only matched by name refuses
+	// like Empty Trash's own "unconfirmed" — not a plain "Delete permanently"
+	// the server would 409 on.
+	it("asks to confirm the guessed folder before an expunge nobody confirmed", async () => {
+		const view = mount({
+			outcome: "unconfirmed",
+			count: 3,
+			accountId: ACCOUNT,
+			trashFolderLabel: "Deleted Messages",
+		});
+		const text = view.text();
+		assert.match(text, /Confirm this account's Trash folder/);
+		assert.match(text, /Deleted Messages/);
+		assert.doesNotMatch(text, /Permanently delete 3 messages\?/);
+		const confirm = view.button("Confirm the folder");
+		assert.ok(confirm, "the remedy the copy names is on screen");
+		act(() => confirm?.click());
+		// DeleteConfirmDialog's own "unconfirmed" copy shares its title with the
+		// appointment prompt's, so the title alone cannot tell the two dialogs
+		// apart — matching only that string would pass whether or not the
+		// prompt actually replaced the dialog. The picker prompt is the
+		// prompt's own wording and never appears in DeleteConfirmDialog's copy.
+		assert.match(
+			view.text(),
+			/Confirm Deleted Messages, or pick the folder this account really uses\./,
+		);
+		await settle();
+		act(() => view.byLabel("Set Prullenbak, 3 messages, as Trash")?.click());
+		assert.ok(
+			view.button("Set as Trash and delete 3 messages"),
+			"the folder picker and the delete-specific confirm label are the prompt's own, not the dialog's",
+		);
+	});
+
 	it("still acts when no single account owns the rows", () => {
 		const confirmed: string[][] = [];
 		const view = mount({
@@ -369,28 +401,12 @@ describe("DeleteConfirmDialog — a refusal answers itself", () => {
 	});
 });
 
-/**
- * D4a: an expunge inside a Trash reader only matched by name still goes
- * through — the user asked for these specific rows — but they are told which
- * folder that is, and that nobody chose it, before it happens.
- */
-describe("DeleteConfirmDialog — an expunge inside a Trash nobody confirmed", () => {
-	it("keeps today's words for a confirmed Trash", () => {
+describe("DeleteConfirmDialog — an expunge inside a confirmed Trash", () => {
+	it("asks for the expunge itself, with no folder to confirm first", () => {
 		const view = mount({ outcome: "permanent", count: 3 });
-		assert.doesNotMatch(view.text(), /nobody confirmed it/);
-	});
-
-	it("names the folder and says nobody chose it", () => {
-		const view = mount({
-			outcome: "permanent",
-			count: 3,
-			trashFolderLabel: "Deleted Messages",
-			trashIsUnconfirmed: true,
-		});
 		const text = view.text();
 		assert.match(text, /Permanently delete 3 messages\?/);
-		assert.match(text, /They are in Deleted Messages/);
-		assert.match(text, /nobody confirmed it/);
+		assert.doesNotMatch(text, /nobody confirmed it/);
 		assert.equal(view.button("Delete permanently")?.disabled, false);
 	});
 });

package/src/components/mail/DeleteConfirmDialog.tsx

@@ -5,14 +5,15 @@
  * and Flagged — so the wording and the refusal cannot drift apart again the way
  * they did between #845 and #855.
  *
- * Three of the outcomes are not confirmations at all. When the account has no
- * Trash, or the folder it appointed is gone, the server refuses the delete
- * outright; when its folder settings could not be read reader cannot say
- * whether a delete moves the mail or erases it. All three refuse and the
- * caller's `onConfirm` is never reached directly. The first two are answered
- * in place — the affirmative control opens the appointment prompt, whose own
- * confirm appoints the folder and then runs this delete. None of them may
- * render as "this folder is not Trash".
+ * Four of the outcomes are not confirmations at all. When the account has no
+ * Trash, the folder it appointed is gone, or the row would expunge inside a
+ * Trash nobody ever confirmed, the server refuses the delete outright; when
+ * its folder settings could not be read reader cannot say whether a delete
+ * moves the mail or erases it. All four refuse and the caller's `onConfirm` is
+ * never reached directly. The first three are answered in place — the
+ * affirmative control opens the appointment prompt, whose own confirm appoints
+ * the folder and then runs this delete. None of them may render as "this
+ * folder is not Trash".
  */
 import { ConfirmDialog } from "@remit/ui";
 import { useAuthProvider } from "@/auth/provider";
@@ -34,8 +35,8 @@ interface DeleteConfirmDialogProps {
 	trashFolderLabel?: string;
 	/** The folder the user appointed, now gone from the mail server. */
 	staleFolderLabel?: string;
-	/** That folder is a name match nobody ever confirmed. */
-	trashIsUnconfirmed?: boolean;
+	/** `unconfirmed`: that guessed folder by id, so the prompt opens on it. */
+	guessedMailboxId?: string;
 	/** A delete is already in flight, so the confirm cannot be pressed again. */
 	isDeleting?: boolean;
 	onConfirm: (messageIds: string[]) => void;
@@ -49,7 +50,7 @@ export const DeleteConfirmDialog = ({
 	accountId,
 	trashFolderLabel,
 	staleFolderLabel,
-	trashIsUnconfirmed = false,
+	guessedMailboxId,
 	isDeleting = false,
 	onConfirm,
 	onCancel,
@@ -61,10 +62,19 @@ export const DeleteConfirmDialog = ({
 	const copy = deleteConfirmationCopy(count, outcome, {
 		trashFolderLabel,
 		staleFolderLabel,
-		trashIsUnconfirmed,
 	});
 
-	if (outcome === "noTrash" || outcome === "staleTrash") {
+	if (
+		outcome === "noTrash" ||
+		outcome === "staleTrash" ||
+		outcome === "unconfirmed"
+	) {
+		const reason =
+			outcome === "noTrash"
+				? "none"
+				: outcome === "staleTrash"
+					? "stale"
+					: "unconfirmed";
 		return (
 			<ConfirmDialog
 				isOpen={isOpen}
@@ -79,9 +89,11 @@ export const DeleteConfirmDialog = ({
 					requestAppointment({
 						accountId,
 						role: "Trash",
-						reason: outcome === "noTrash" ? "none" : "stale",
+						reason,
 						action: { kind: "delete", count },
 						staleFolderLabel,
+						trashFolderLabel,
+						guessedMailboxId,
 						onAppointed: async () => onConfirm(replay),
 					});
 				}}

package/src/components/mail/FlaggedPane.tsx

@@ -240,6 +240,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		// 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"),
@@ -362,6 +363,7 @@ function FlaggedReading() {
 							selectedMessageId={conversation.messageId}
 							authenticity={conversation.authenticity}
 							onOpenIntelligence={intelligence.open}
+							listOnScreen
 						/>
 					) : (
 						<ReadingPaneEmpty />

package/src/components/mail/MailboxPane.tsx

@@ -726,6 +726,7 @@ function MailboxPaneProvider({
 		// 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: triageReply,
@@ -1123,6 +1124,7 @@ function MailboxReading() {
 			selectedMessageId={conversation.messageId}
 			authenticity={conversation.authenticity}
 			onOpenIntelligence={intelligence.open}
+			listOnScreen
 		/>
 	) : (
 		<ReadingPaneEmpty />

package/src/components/mail/MessageList.run-reporting.test.ts

@@ -5,6 +5,7 @@ import { describe, it } from "node:test";
 import { fileURLToPath } from "node:url";
 import { runEndingBanner } from "@/lib/bulk-action-copy";
 import type { BulkRunOutcome } from "@/lib/bulk-actions";
+import { type DeleteOutcome, deleteExpunges } from "@/lib/format";
 
 /**
  * A run states how it ended, to whoever is still there to read it (#521). The
@@ -28,6 +29,8 @@ import type { BulkRunOutcome } from "@/lib/bulk-actions";
 const here = dirname(fileURLToPath(import.meta.url));
 const source = readFileSync(resolve(here, "MessageList.tsx"), "utf8");
 
+const expunging: DeleteOutcome[] = ["permanent", "unconfirmed"];
+
 const ended = (over: Partial<BulkRunOutcome> = {}): BulkRunOutcome => ({
 	done: 100,
 	failedIds: [],
@@ -92,18 +95,24 @@ describe("reporting how a run ended", () => {
 		);
 	});
 
-	it("names an expunge as an expunge, however the run ended", () => {
-		assert.match(
-			runEndingBanner("delete", 100, ended(), "permanent")?.title ?? "",
-			/^100 permanently deleted\./,
-		);
-		assert.match(
-			runEndingBanner("delete", 3000, ended({ cancelled: true }), "permanent")
-				?.detail ?? "",
-			/100 of 3,000 permanently deleted\./,
-			"the half that ran is erased whether or not the rest did",
-		);
-	});
+	// Both outcomes a row already inside Trash produces, because both erase it.
+	// `unconfirmed` is only ever reached that way (#876), and a ternary that knew
+	// only `permanent` reported an expunge as "moved to Trash".
+	for (const outcome of expunging) {
+		it(`names a ${outcome} delete as an expunge, however the run ended`, () => {
+			assert.ok(deleteExpunges(outcome), "the copy reads this predicate");
+			assert.match(
+				runEndingBanner("delete", 100, ended(), outcome)?.title ?? "",
+				/^100 permanently deleted\./,
+			);
+			assert.match(
+				runEndingBanner("delete", 3000, ended({ cancelled: true }), outcome)
+					?.detail ?? "",
+				/100 of 3,000 permanently deleted\./,
+				"the half that ran is erased whether or not the rest did",
+			);
+		});
+	}
 });
 
 describe("the run the wizard leaves behind", () => {

package/src/components/mail/MessageList.tsx

@@ -326,8 +326,8 @@ export const MessageList = ({
 	);
 	const {
 		outcome: deleteOutcome,
-		trashIsUnconfirmed,
 		staleFolderLabel,
+		guessedMailboxId,
 	} = useDeleteOutcome(deleteScope);
 
 	// Selection state
@@ -1352,7 +1352,7 @@ export const MessageList = ({
 				// mailbox is the Trash the copy has to name.
 				trashFolderLabel={listTitle}
 				staleFolderLabel={staleFolderLabel}
-				trashIsUnconfirmed={trashIsUnconfirmed}
+				guessedMailboxId={guessedMailboxId}
 				isDeleting={isDeleting}
 				onConfirm={handleConfirmDelete}
 				onCancel={handleCancelDelete}

package/src/components/mail/RoleAppointmentPromptProvider.tsx

@@ -212,6 +212,7 @@ export const RoleAppointmentPromptProvider = ({
 					folders={folders}
 					delimiter={folderDelimiter(mailboxes)}
 					trashFolderLabel={trashFolderLabel}
+					guessedMailboxId={guessedMailboxId}
 					staleFolderLabel={
 						request.staleFolderLabel ?? trash?.staleAppointmentPath
 					}

package/src/components/mail/ThreadListInteraction.tsx

@@ -287,8 +287,8 @@ export function ThreadListInteraction({
 	);
 	const {
 		outcome: deleteOutcome,
-		trashIsUnconfirmed,
 		staleFolderLabel,
+		guessedMailboxId,
 	} = useDeleteOutcome(pendingDelete?.targets ?? NO_TARGETS);
 
 	// A verb, routed the same way the bar routes its own (#477 1.4, #508). Over a
@@ -482,7 +482,7 @@ export function ThreadListInteraction({
 				outcome={deleteOutcome}
 				accountId={pendingDelete?.targets[0]?.accountId}
 				staleFolderLabel={staleFolderLabel}
-				trashIsUnconfirmed={trashIsUnconfirmed}
+				guessedMailboxId={guessedMailboxId}
 				isDeleting={isDeleting}
 				onConfirm={confirmDelete}
 				onCancel={cancelDelete}