@remit/web-client 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "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/MessageList.tsx

@@ -423,7 +423,10 @@ export const MessageList = ({
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
 			if (modifiers.shiftKey) {
-				selectRange(orderedIds, messageId);
+				// The open/focused row is the fallback origin when the stored anchor
+				// has been filtered or searched out of the visible list, so the first
+				// shift-click still ranges from where the user is (#142, #144).
+				selectRange(orderedIds, messageId, focusedMessageId);
 				return true;
 			}
 			if (modifiers.metaKey || modifiers.ctrlKey) {
@@ -438,7 +441,14 @@ export const MessageList = ({
 			setAnchor(messageId);
 			return false;
 		},
-		[orderedIds, selectRange, toggleCheck, clearSelection, setAnchor],
+		[
+			orderedIds,
+			focusedMessageId,
+			selectRange,
+			toggleCheck,
+			clearSelection,
+			setAnchor,
+		],
 	);
 
 	// Open the delete confirmation for an explicit set of ids. All delete

package/src/hooks/useSelection.test.ts

@@ -4,10 +4,43 @@ import {
 	computeRange,
 	intersectSelectedIds,
 	nextFocusId,
+	resolveRangeAnchor,
 } from "./useSelection.js";
 
 const ids = ["a", "b", "c", "d", "e"];
 
+// Mirrors the hook's `selectRange` state transition (anchor + selection) using
+// the same pure helpers it runs, so the mouse/keyboard sequences below exercise
+// the real logic without an interactive DOM. Returns the next {selected, anchor}.
+const applyRange = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	orderedIds: string[],
+	targetId: string,
+	fallbackAnchor?: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const anchor = resolveRangeAnchor(
+		orderedIds,
+		state.anchor,
+		fallbackAnchor,
+		targetId,
+	);
+	const range = computeRange(orderedIds, anchor, targetId);
+	const selected = new Set(state.selected);
+	for (const id of range) selected.add(id);
+	return { selected, anchor };
+};
+
+// Mirrors a cmd/ctrl-click: toggle membership and re-anchor on the clicked row.
+const applyToggle = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	targetId: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const selected = new Set(state.selected);
+	if (selected.has(targetId)) selected.delete(targetId);
+	else selected.add(targetId);
+	return { selected, anchor: targetId };
+};
+
 describe("computeRange", () => {
 	test("forward range: anchor above target selects the inclusive slice", () => {
 		assert.deepStrictEqual(computeRange(ids, "b", "d"), ["b", "c", "d"]);
@@ -44,6 +77,81 @@ describe("computeRange", () => {
 	});
 });
 
+describe("resolveRangeAnchor", () => {
+	test("keeps a still-visible stored anchor so consecutive shift-clicks extend from it", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "b", undefined, "d"), "b");
+	});
+
+	test("a stored anchor no longer visible falls back to the open/focused row", () => {
+		// The stored anchor "z" was filtered/searched out of the visible list; the
+		// open row "b" is still visible, so the range anchors there.
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "b", "d"), "b");
+	});
+
+	test("with neither a visible stored anchor nor a visible fallback, the target anchors itself", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "y", "d"), "d");
+	});
+
+	test("no stored anchor and no fallback selects just the target", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, undefined, undefined, "c"), "c");
+	});
+
+	test("a stored anchor beats the fallback while it stays visible", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "a", "c", "e"), "a");
+	});
+});
+
+describe("shift-click range over a filtered/search-narrowed list (#142, #144)", () => {
+	test("shift-click range with an active filter builds the range within the visible rows", () => {
+		// Full inbox is a..h; the "Automated" filter leaves only these rows.
+		const filtered = ["b", "d", "f", "g"];
+		// The open row "d" is visible; nothing selected yet, no stored anchor.
+		let state = {
+			selected: new Set<string>(),
+			anchor: undefined as string | undefined,
+		};
+		// Shift-click "g": ranges from the open/focused row "d" to "g".
+		state = applyRange(state, filtered, "g", "d");
+		assert.deepStrictEqual([...state.selected], ["d", "f", "g"]);
+		assert.strictEqual(state.anchor, "d");
+	});
+
+	test("range where the anchor left the visible set re-anchors instead of no-oping", () => {
+		const filtered = ["b", "d", "f", "g"];
+		// Stored anchor "a" was selected before the filter narrowed the list and is
+		// no longer visible; there is no open/focused fallback row.
+		let state = {
+			selected: new Set<string>(),
+			anchor: "a" as string | undefined,
+		};
+		// First shift-click adopts the clicked row as the new visible anchor.
+		state = applyRange(state, filtered, "f");
+		assert.deepStrictEqual([...state.selected], ["f"]);
+		assert.strictEqual(state.anchor, "f");
+		// Second shift-click now builds a real range from that adopted anchor.
+		state = applyRange(state, filtered, "b");
+		assert.deepStrictEqual([...state.selected].sort(), ["b", "d", "f"]);
+		assert.strictEqual(state.anchor, "f");
+	});
+
+	test("multi-select across a search-results list: cmd-click then shift-click", () => {
+		// Search "npm" yields these results; the inbox anchor is gone from this set.
+		const results = ["m1", "m2", "m3", "m4", "m5"];
+		let state = {
+			selected: new Set<string>(),
+			anchor: "inbox-row" as string | undefined,
+		};
+		// Cmd-click "m2": toggles it in and re-anchors on it (a visible row).
+		state = applyToggle(state, "m2");
+		assert.deepStrictEqual([...state.selected], ["m2"]);
+		assert.strictEqual(state.anchor, "m2");
+		// Shift-click "m4": ranges from the cmd-clicked anchor across the results.
+		state = applyRange(state, results, "m4");
+		assert.deepStrictEqual([...state.selected].sort(), ["m2", "m3", "m4"]);
+		assert.strictEqual(state.anchor, "m2");
+	});
+});
+
 describe("nextFocusId", () => {
 	test("moves down one row", () => {
 		assert.strictEqual(nextFocusId(ids, "b", 1), "c");

package/src/hooks/useSelection.ts

@@ -37,11 +37,19 @@ interface UseSelectionReturn {
 	/** Toggle selection for all items */
 	toggleAll: (ids: string[]) => void;
 	/**
-	 * Add the contiguous range of ids from the current anchor to `targetId`
-	 * (inclusive) to the selection, using `orderedIds` for display order. If
-	 * no anchor exists, selects only `targetId` and makes it the anchor.
+	 * Add the contiguous range of ids from the anchor to `targetId` (inclusive)
+	 * to the selection, using `orderedIds` for display order. The anchor is the
+	 * stored one when it is still visible in `orderedIds`; otherwise
+	 * `fallbackAnchor` when that is visible (the open/focused row); otherwise
+	 * `targetId`. Whatever anchors the range becomes the new stored anchor, so a
+	 * filtered or search-narrowed list can still build a range within what's
+	 * visible (#142, #144).
 	 */
-	selectRange: (orderedIds: string[], targetId: string) => void;
+	selectRange: (
+		orderedIds: string[],
+		targetId: string,
+		fallbackAnchor?: string,
+	) => void;
 	/**
 	 * Set the range anchor without changing the selection set. Used by a plain
 	 * click that navigates but should seed the anchor for a later shift-click.
@@ -85,6 +93,34 @@ export const computeRange = (
 	return orderedIds.slice(start, end + 1);
 };
 
+/**
+ * Resolve which id a shift-range selection anchors from, given the stored
+ * anchor and the ids currently visible (`orderedIds`). Pure so the
+ * filtered/search anchor behavior can be unit-tested without a DOM.
+ *
+ * - The stored anchor wins while it is still visible — consecutive shift-clicks
+ *   keep extending from the same origin (Apple Mail / Gmail).
+ * - Once the stored anchor leaves the visible set (filtered out, or a search
+ *   changed the list), it can't anchor a range in that set, so fall back to
+ *   `fallbackAnchor` (the open/focused row) when it is visible.
+ * - With neither available, the target anchors itself: the clicked row is
+ *   selected alone and becomes the origin for the next shift-click.
+ */
+export const resolveRangeAnchor = (
+	orderedIds: string[],
+	storedAnchor: string | undefined,
+	fallbackAnchor: string | undefined,
+	targetId: string,
+): string => {
+	if (storedAnchor !== undefined && orderedIds.includes(storedAnchor)) {
+		return storedAnchor;
+	}
+	if (fallbackAnchor !== undefined && orderedIds.includes(fallbackAnchor)) {
+		return fallbackAnchor;
+	}
+	return targetId;
+};
+
 /**
  * The ids from `selectedIds` that are still present in `currentIds` — the
  * survivor set after a list refresh. Only ever narrows: an id absent from
@@ -211,9 +247,15 @@ export const useSelection = <T>(
 	}, []);
 
 	const selectRange = useCallback(
-		(orderedIds: string[], targetId: string) => {
+		(orderedIds: string[], targetId: string, fallbackAnchor?: string) => {
+			const effectiveAnchor = resolveRangeAnchor(
+				orderedIds,
+				anchorId,
+				fallbackAnchor,
+				targetId,
+			);
 			setSelectedIds((prev) => {
-				const range = computeRange(orderedIds, anchorId, targetId);
+				const range = computeRange(orderedIds, effectiveAnchor, targetId);
 				if (range.length === 0) return prev;
 				const next = new Set(prev);
 				for (const id of range) {
@@ -221,10 +263,12 @@ export const useSelection = <T>(
 				}
 				return next;
 			});
-			// Keep the original anchor so subsequent shift-clicks extend from the
-			// same origin (Apple Mail / Gmail behavior). Only seed the anchor when
-			// none exists yet.
-			setAnchorId((prev) => prev ?? targetId);
+			// Whatever anchored the range becomes the stored anchor. A still-visible
+			// stored anchor resolves to itself (unchanged), so consecutive
+			// shift-clicks keep extending from the same origin; a stored anchor that
+			// left the visible set is replaced by the row the range actually used, so
+			// a filtered/search-narrowed list can build a range within what's visible.
+			setAnchorId(effectiveAnchor);
 		},
 		[anchorId],
 	);

package/src/lib/bulk-delete.test.ts

@@ -4,7 +4,6 @@ import {
 	BULK_DELETE_CHUNK_SIZE,
 	chunkIds,
 	countMatches,
-	type DeleteBatchResult,
 	type FetchIdsPageResult,
 	honestProgress,
 	resolveSelectionAfterDelete,
@@ -90,36 +89,16 @@ describe("runChunkedDelete", () => {
 		assert.deepEqual(outcome.failedIds, []);
 	});
 
-	test("the count deleted matches exactly what the batches reported succeeded", async () => {
+	test("a returned batch counts every id in it as accepted", async () => {
 		const input = ids(5);
 		const outcome = await runChunkedDelete(
 			input,
-			async (chunk) => ({
-				successCount: chunk.length - 2,
-				failureCount: 2,
-				failedIds: chunk.slice(0, 2),
-			}),
-			noopProgress,
-			neverCancelled,
-		);
-		assert.equal(outcome.done, 3);
-		assert.deepEqual(outcome.failedIds, input.slice(0, 2));
-	});
-
-	test("partial failure: failed ids are reported, not rolled into done", async () => {
-		const input = ids(3);
-		const outcome = await runChunkedDelete(
-			input,
-			async (chunk) => ({
-				successCount: 2,
-				failureCount: 1,
-				failedIds: [chunk[1]],
-			}),
+			async (chunk) => ({ successCount: chunk.length, failureCount: 0 }),
 			noopProgress,
 			neverCancelled,
 		);
-		assert.equal(outcome.done, 2);
-		assert.deepEqual(outcome.failedIds, [input[1]]);
+		assert.equal(outcome.done, input.length);
+		assert.deepEqual(outcome.failedIds, []);
 	});
 
 	test("cancelling mid-run folds every unreached chunk into failedIds", async () => {
@@ -264,27 +243,6 @@ describe("runPredicateDelete", () => {
 		assert.equal(outcome.done, 4);
 	});
 
-	test("partial failure across pages accumulates failedIds without rolling into done", async () => {
-		const fetch = pagedFetcher([
-			{ ids: ["a", "b"], continuationToken: "t1" },
-			{ ids: ["c"] },
-		]);
-		const outcome = await runPredicateDelete(
-			fetch,
-			3,
-			async (chunk): Promise<DeleteBatchResult> => {
-				if (chunk.includes("b")) {
-					return { successCount: 1, failureCount: 1, failedIds: ["b"] };
-				}
-				return { successCount: chunk.length, failureCount: 0 };
-			},
-			noopProgress,
-			neverCancelled,
-		);
-		assert.equal(outcome.done, 2);
-		assert.deepEqual(outcome.failedIds, ["b"]);
-	});
-
 	test("cancelling mid-delete stops paging without inventing failedIds for unfetched pages", async () => {
 		let fetchCalls = 0;
 		let cancelled = false;
@@ -409,7 +367,7 @@ describe("resolveSelectionAfterDelete", () => {
 		);
 	});
 
-	test("explicit failures stay selected for a precise retry, even alongside a clean stop", () => {
+	test("unreached ids stay selected for a precise retry, even alongside a clean stop", () => {
 		assert.deepEqual(
 			resolveSelectionAfterDelete({
 				done: 3072,
@@ -431,7 +389,7 @@ describe("resolveSelectionAfterDelete", () => {
 		);
 	});
 
-	test("an infra failure with no explicit per-item failures still keeps selection mode open", () => {
+	test("an infra failure with nothing left unreached still keeps selection mode open", () => {
 		assert.deepEqual(
 			resolveSelectionAfterDelete({
 				done: 0,

package/src/lib/bulk-delete.ts

@@ -3,9 +3,16 @@
  *
  * The bulk endpoint caps a call at 100 ids (`BulkMessageInput.messageIds`,
  * `@maxItems(100)`); a delete over a search result can run to thousands. These
- * helpers sequence the calls and tally what actually happened rather than what
- * was requested, so a caller can always ask "what's still not deleted" instead
- * of trusting the request it sent.
+ * helpers sequence the calls and tally which ids the run actually reached, so a
+ * caller can always ask "what's still not deleted" instead of trusting the
+ * request it sent.
+ *
+ * The endpoint enqueues the IMAP delete and returns; it does not apply it. So a
+ * returned call means every id in it was accepted for deletion, not that the
+ * mail server removed it — there is no per-id success/failure in the response
+ * to read. The only failure this layer can observe is a thrown call: an
+ * infrastructure failure (auth, the write, or the enqueue) that takes out the
+ * whole batch and stops the run.
  *
  * Pure, framework-agnostic, and independently testable — no React, no fetch.
  * `useEscalatedDelete.ts` supplies the real `DeleteBatch`/`FetchIdsPage`
@@ -46,7 +53,6 @@ export const chunkIds = (
 export interface DeleteBatchResult {
 	successCount: number;
 	failureCount: number;
-	failedIds?: string[];
 }
 
 /** Sends one bulk-delete call for the given ids (≤100). */
@@ -64,9 +70,12 @@ export interface BulkDeleteOutcome {
 	/** Ids confirmed deleted (server-reported success, not merely "sent"). */
 	done: number;
 	/**
-	 * Ids not confirmed deleted: explicit per-batch failures. Does NOT include
-	 * ids from chunks the run never reached (cancelled or stopped by an
-	 * error) — see the per-function doc for how each source handles that.
+	 * Ids the run did not reach and are therefore not confirmed deleted: on
+	 * cancellation or a thrown error, the chunks the bounded run never attempted
+	 * (see `runChunkedDelete`). Empty in the predicate case, which re-resolves on
+	 * every run rather than handing back a remainder (see `runPredicateDelete`).
+	 * There is no per-id failure source: a returned batch call counts every id in
+	 * it as accepted (see the module header).
 	 */
 	failedIds: string[];
 	cancelled: boolean;
@@ -106,9 +115,7 @@ export const runChunkedDelete = async (
 			onProgress({ done, total });
 			return { done, failedIds, cancelled: false, error: attempted.error };
 		}
-		const failedInChunk = new Set(attempted.value.failedIds ?? []);
-		done += chunk.length - failedInChunk.size;
-		failedIds.push(...chunk.filter((id) => failedInChunk.has(id)));
+		done += chunk.length;
 		onProgress({ done, total });
 	}
 
@@ -165,9 +172,7 @@ export const runPredicateDelete = async (
 			if (!attempted.ok) {
 				return { done, failedIds, cancelled: false, error: attempted.error };
 			}
-			const failedInPage = new Set(attempted.value.failedIds ?? []);
-			done += page.ids.length - failedInPage.size;
-			failedIds.push(...page.ids.filter((id) => failedInPage.has(id)));
+			done += page.ids.length;
 			onProgress({ done, total });
 		}
 
@@ -250,11 +255,10 @@ export interface SelectionAfterDelete {
 
 /**
  * What a caller does with selection once a run ends, for any reason. Every id
- * not confirmed deleted — an explicit failure, or a chunk the run never
- * reached because it was stopped or errored — belongs in `retryIds`: it is
- * exactly what Retry should resend, and it is what stays selected so the
- * count on screen never claims more was deleted than actually was (#92
- * requirement 8).
+ * not confirmed deleted — a chunk the bounded run never reached because it was
+ * stopped or errored — belongs in `retryIds`: it is exactly what Retry should
+ * resend, and it is what stays selected so the count on screen never claims
+ * more was deleted than actually was (#92 requirement 8).
  */
 export const resolveSelectionAfterDelete = (
 	outcome: DeleteRunOutcome,