@remit/web-client 0.0.12 → 0.0.14

package/src/lib/sender-address.test.ts

@@ -0,0 +1,60 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	pickSenderAddress,
+	SENDER_ADDRESS_SEARCH_LIMIT,
+	senderAddressSearchQuery,
+} from "./sender-address";
+
+const address = (
+	addressId: string,
+	normalizedEmail: string,
+): RemitImapAddressResponse =>
+	({ addressId, normalizedEmail }) as RemitImapAddressResponse;
+
+describe("senderAddressSearchQuery", () => {
+	it("lowercases the address and asks for a window, not one row", () => {
+		assert.deepEqual(senderAddressSearchQuery("Support@NPMJS.com"), {
+			q: "support@npmjs.com",
+			limit: SENDER_ADDRESS_SEARCH_LIMIT,
+		});
+		assert.ok(SENDER_ADDRESS_SEARCH_LIMIT > 1);
+	});
+
+	it("is stable for a missing sender, so the cache key stays valid", () => {
+		assert.deepEqual(senderAddressSearchQuery(undefined), {
+			q: "",
+			limit: SENDER_ADDRESS_SEARCH_LIMIT,
+		});
+	});
+});
+
+describe("pickSenderAddress", () => {
+	it("picks the exact address, not the first prefix match", () => {
+		const items = [
+			address("other", "sup@npmjs.com"),
+			address("wanted", "support@npmjs.com"),
+		];
+		assert.equal(
+			pickSenderAddress(items, "support@npmjs.com")?.addressId,
+			"wanted",
+		);
+	});
+
+	it("matches case-insensitively", () => {
+		const items = [address("wanted", "support@npmjs.com")];
+		assert.equal(
+			pickSenderAddress(items, "Support@NPMJS.com")?.addressId,
+			"wanted",
+		);
+	});
+
+	it("resolves to undefined rather than the wrong sender", () => {
+		const items = [address("other", "sup@npmjs.com")];
+		assert.equal(pickSenderAddress(items, "support@npmjs.com"), undefined);
+		assert.equal(pickSenderAddress([], "support@npmjs.com"), undefined);
+		assert.equal(pickSenderAddress(undefined, "support@npmjs.com"), undefined);
+		assert.equal(pickSenderAddress(items, undefined), undefined);
+	});
+});

package/src/lib/sender-address.ts

@@ -0,0 +1,37 @@
+import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
+
+/**
+ * `GET /addresses/search` is a prefix search over both the display-name
+ * compound and the normalized email, so a query for one sender's address can
+ * legitimately return several rows (`sup@x.com` also prefixes `support@x.com`,
+ * and any display name starting with the same characters matches too).
+ *
+ * Asking for a single row and taking `items[0]` is therefore wrong twice over:
+ * the row it returns may belong to a different sender, and the row we actually
+ * want may be past the cut. Fetch a small window instead and pick the exact
+ * address out of it.
+ */
+export const SENDER_ADDRESS_SEARCH_LIMIT = 10;
+
+/** Query params for the sender-address lookup. One shape, used by every caller. */
+export const senderAddressSearchQuery = (
+	senderEmail: string | undefined,
+): { q: string; limit: number } => ({
+	q: senderEmail?.toLowerCase() ?? "",
+	limit: SENDER_ADDRESS_SEARCH_LIMIT,
+});
+
+/**
+ * Select the address row for exactly this sender. A prefix match on another
+ * sender is not this sender, so it resolves to `undefined` rather than the
+ * wrong address — silently flagging the wrong sender is worse than not
+ * resolving.
+ */
+export const pickSenderAddress = (
+	items: RemitImapAddressResponse[] | undefined,
+	senderEmail: string | undefined,
+): RemitImapAddressResponse | undefined => {
+	if (!senderEmail) return undefined;
+	const normalized = senderEmail.toLowerCase();
+	return items?.find((item) => item.normalizedEmail === normalized);
+};

package/src/lib/thread-cache.test.ts

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	isInfiniteThreadData,
+	patchThreadListCache,
+	type ThreadListCache,
+} from "./thread-cache";
+
+const message = (messageId: string): RemitImapThreadMessageResponse =>
+	({ messageId }) as RemitImapThreadMessageResponse;
+
+const drop = (id: string) => (items: RemitImapThreadMessageResponse[]) =>
+	items.filter((item) => item.messageId !== id);
+
+describe("isInfiniteThreadData", () => {
+	it("recognises only the paged shape", () => {
+		assert.equal(isInfiniteThreadData({ pages: [], pageParams: [] }), true);
+		assert.equal(isInfiniteThreadData({ items: [] }), false);
+		assert.equal(isInfiniteThreadData(undefined), false);
+		assert.equal(isInfiniteThreadData(null), false);
+	});
+});
+
+describe("patchThreadListCache", () => {
+	it("patches every page of an infinite query", () => {
+		const cache: ThreadListCache = {
+			pages: [
+				{ items: [message("a"), message("b")] },
+				{ items: [message("c")] },
+			],
+			pageParams: [undefined, "next"],
+		};
+
+		const patched = patchThreadListCache(cache, drop("b"));
+
+		assert.deepEqual(patched, {
+			pages: [{ items: [message("a")] }, { items: [message("c")] }],
+			pageParams: [undefined, "next"],
+		});
+	});
+
+	it("patches a single-shot page, which shares the query-key prefix", () => {
+		// The rescue-candidate search caches this shape under the same prefix the
+		// mailbox list uses. An updater that assumed `pages` threw here, failing
+		// the whole mutation before it ever reached the server (issues #51, #55).
+		const cache: ThreadListCache = {
+			items: [message("a"), message("b")],
+			continuationToken: "t",
+		};
+
+		const patched = patchThreadListCache(cache, drop("a"));
+
+		assert.deepEqual(patched, {
+			items: [message("b")],
+			continuationToken: "t",
+		});
+	});
+
+	it("leaves an unrecognised entry alone instead of throwing", () => {
+		const cache = { total: 3 } as unknown as ThreadListCache;
+		assert.equal(patchThreadListCache(cache, drop("a")), cache);
+		assert.equal(patchThreadListCache(undefined, drop("a")), undefined);
+	});
+});

package/src/lib/thread-cache.ts

@@ -0,0 +1,76 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+
+/**
+ * Optimistic patching of the thread caches.
+ *
+ * `queryClient.setQueriesData({ queryKey: prefix }, …)` matches by key *prefix*,
+ * so an updater written for the mailbox list also runs against every other
+ * cached query sharing that prefix. Those do not all have the same shape: the
+ * mailbox list is an infinite query (`{ pages: [{ items }] }`) while
+ * single-shot readers of the same endpoint — the rescue-candidate search, for
+ * one — cache a plain page (`{ items }`). An updater that assumed the infinite
+ * shape threw `pages is undefined` inside `onMutate`, which React Query reports
+ * as a failed mutation: the move never fired and the user got an error toast
+ * for an action that was never attempted (issues #51, #55).
+ *
+ * `patchThreadListCache` handles both shapes and leaves anything else it does
+ * not recognise untouched.
+ */
+
+export interface ThreadItemsPage {
+	items: RemitImapThreadMessageResponse[];
+	[key: string]: unknown;
+}
+
+export interface InfiniteThreadData {
+	pages: ThreadItemsPage[];
+	pageParams: Array<string | undefined>;
+}
+
+/** Either cached shape served by the thread list/search endpoints. */
+export type ThreadListCache = InfiniteThreadData | ThreadItemsPage;
+
+export const isInfiniteThreadData = (
+	data: unknown,
+): data is InfiniteThreadData =>
+	typeof data === "object" &&
+	data !== null &&
+	Array.isArray((data as { pages?: unknown }).pages);
+
+const isThreadItemsPage = (data: unknown): data is ThreadItemsPage =>
+	typeof data === "object" &&
+	data !== null &&
+	Array.isArray((data as { items?: unknown }).items);
+
+/**
+ * Apply `patchItems` to every list of thread messages inside a cache entry,
+ * whichever shape it holds.
+ *
+ * `old` is `unknown` because that is the truth: a prefix match hands this
+ * whatever happens to be cached under that prefix, and the two shapes below are
+ * the ones we know about today, not the ones we are guaranteed. Declaring a
+ * narrower parameter type is what produced the original bug — the type asserted
+ * a shape the runtime never promised, and the first entry that disagreed threw.
+ * Anything unrecognised is returned untouched.
+ */
+export const patchThreadListCache = (
+	old: unknown,
+	patchItems: (
+		items: RemitImapThreadMessageResponse[],
+	) => RemitImapThreadMessageResponse[],
+): unknown => {
+	if (old === undefined) return old;
+	if (isInfiniteThreadData(old)) {
+		return {
+			...old,
+			pages: old.pages.map((page) => ({
+				...page,
+				items: patchItems(page.items),
+			})),
+		};
+	}
+	if (isThreadItemsPage(old)) {
+		return { ...old, items: patchItems(old.items) };
+	}
+	return old;
+};

package/src/routes/mail/outbox.tsx

@@ -3,8 +3,13 @@ import { z } from "zod";
 
 // Search schema: `selectedOutboxMessageId` is read by `OutboxPane` in the
 // parent `/mail` shell via `useSearch({ strict: false })`.
+//
+// `q` is inherited from the parent /mail route; re-declared here so it survives
+// this route's own search validation and isn't dropped when navigating with a
+// functional search updater.
 const outboxSearchSchema = z.object({
 	selectedOutboxMessageId: z.string().optional(),
+	q: z.string().optional(),
 });
 
 export const Route = createFileRoute("/mail/outbox")({

package/src/routes/mail.tsx

@@ -15,6 +15,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
 import { ComposeFab } from "@/components/layout/ComposeFab";
+import { MailTopBar } from "@/components/layout/MailTopBar";
 import { BriefPane } from "@/components/mail/BriefPane";
 import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { MailboxPane } from "@/components/mail/MailboxPane";
@@ -268,7 +269,16 @@ function MailLayout() {
 	const navContent = (
 		<MailNav accounts={accounts} onMailboxSelect={handleMailboxSelect} />
 	);
-	const overlayContent = <ComposeFab />;
+	// Single-pane only, where the FAB is the compose entry point. Above it the
+	// top bar owns compose, and mounting the FAB there would resolve the same
+	// compose target twice for a button CSS keeps hidden.
+	const overlayContent = isSinglePane ? (
+		<ComposeFab accounts={accounts} />
+	) : undefined;
+	// Desktop only. Below 1024px the single pane keeps its own header search and
+	// the phone takeover; there is no room for a bar spanning panes that do not
+	// exist side by side.
+	const topBar = isSinglePane ? undefined : <MailTopBar accounts={accounts} />;
 	const navSlideOver = {
 		navOpen: drawerOpen,
 		onOpenNav: () => setDrawerOpen(true),
@@ -303,6 +313,7 @@ function MailLayout() {
 					) : (
 						<AppShellSlotted
 							nav={navContent}
+							topBar={topBar}
 							list={<BriefPane.List />}
 							reading={<BriefPane.Reading />}
 							intelligenceOpen={intelligenceOpen}
@@ -330,6 +341,7 @@ function MailLayout() {
 					) : (
 						<AppShellSlotted
 							nav={navContent}
+							topBar={topBar}
 							list={<FlaggedPane.List />}
 							reading={<FlaggedPane.Reading />}
 							intelligenceOpen={intelligenceOpen}
@@ -359,6 +371,7 @@ function MailLayout() {
 					) : (
 						<AppShellSlotted
 							nav={navContent}
+							topBar={topBar}
 							list={<MailboxPane.List />}
 							reading={<MailboxPane.Reading />}
 							intelligence={<MailboxPane.Intelligence />}
@@ -386,6 +399,7 @@ function MailLayout() {
 					) : (
 						<AppShellSlotted
 							nav={navContent}
+							topBar={topBar}
 							list={<OutboxPane.List />}
 							reading={<OutboxPane.Reading />}
 							intelligenceOpen={false}