@remit/web-client 0.0.1

package/src/hooks/useDeleteMessages.ts

@@ -0,0 +1,226 @@
+import {
+	mailboxOperationsListMailboxesQueryKey,
+	messageBulkOperationsDeleteMessagesMutation,
+	threadDetailOperationsListThreadMessagesQueryKey,
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { formatErrorDetail } from "@/components/ui/error-banners";
+
+interface UseDeleteMessagesOptions {
+	mailboxId: string;
+	threadId?: string;
+	accountId?: string;
+	/**
+	 * Called once the optimistic removal has been applied. Use this to
+	 * navigate away from a now-empty thread (e.g. clear `selectedMessageId`)
+	 * before the server response arrives.
+	 */
+	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+}
+
+interface ThreadMessagesData {
+	items: RemitImapThreadMessageResponse[];
+	[key: string]: unknown;
+}
+
+interface ThreadsListPage {
+	items: RemitImapThreadMessageResponse[];
+	[key: string]: unknown;
+}
+
+interface ThreadsListData {
+	pages: ThreadsListPage[];
+	pageParams: Array<string | undefined>;
+}
+
+interface SnapshotEntry<T> {
+	queryKey: readonly unknown[];
+	data: T;
+}
+
+interface DeleteContext {
+	threadMessagesPrefix: readonly unknown[];
+	threadsListPrefix: readonly unknown[];
+	threadsSearchPrefix: readonly unknown[];
+	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
+	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+}
+
+/**
+ * Pure helper: drop the messages in `messageIds` from a single page's items.
+ *
+ * Exported so the optimistic-removal math can be exercised without rendering
+ * React. Other identity is preserved — only items whose `messageId` is in
+ * the set are removed.
+ */
+export const removeMessagesFromItems = (
+	items: RemitImapThreadMessageResponse[],
+	messageIds: Set<string>,
+): RemitImapThreadMessageResponse[] =>
+	items.filter((item) => !messageIds.has(item.messageId));
+
+/**
+ * Pure helper: drop soft-deleted rows from a flattened thread list.
+ *
+ * Belt-and-braces guard against #212. The backend already excludes
+ * `isDeleted: true` rows from the inbox listing, but if a regression slips
+ * back in (or an eventual-consistency window briefly returns a soft-deleted
+ * row) the UI must not show it.
+ */
+export const dropDeletedThreads = (
+	items: RemitImapThreadMessageResponse[],
+): RemitImapThreadMessageResponse[] =>
+	items.filter((item) => item.isDeleted !== true);
+
+export const useDeleteMessages = ({
+	mailboxId,
+	threadId,
+	accountId,
+	onAfterOptimisticRemove,
+}: UseDeleteMessagesOptions) => {
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	const { mutate, isPending } = useMutation({
+		...messageBulkOperationsDeleteMessagesMutation(),
+		onMutate: async (variables): Promise<DeleteContext> => {
+			const messageIds = new Set(variables.body.messageIds ?? []);
+
+			const threadMessagesPrefix = threadId
+				? threadDetailOperationsListThreadMessagesQueryKey({
+						path: { threadId },
+					})
+				: [];
+			const threadsListPrefix = threadOperationsListThreadsQueryKey({
+				path: { mailboxId },
+			});
+			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
+				path: { mailboxId },
+			});
+
+			await Promise.all([
+				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
+				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
+				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+			]);
+
+			const previousThreadMessages = threadId
+				? queryClient
+						.getQueriesData<ThreadMessagesData>({
+							queryKey: threadMessagesPrefix,
+						})
+						.filter(
+							(entry): entry is [readonly unknown[], ThreadMessagesData] =>
+								entry[1] !== undefined,
+						)
+						.map(([queryKey, data]) => ({ queryKey, data }))
+				: [];
+
+			const previousThreadsList = queryClient
+				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
+				.concat(
+					queryClient.getQueriesData<ThreadsListData>({
+						queryKey: threadsSearchPrefix,
+					}),
+				)
+				.filter(
+					(entry): entry is [readonly unknown[], ThreadsListData] =>
+						entry[1] !== undefined,
+				)
+				.map(([queryKey, data]) => ({ queryKey, data }));
+
+			if (threadId) {
+				queryClient.setQueriesData<ThreadMessagesData>(
+					{ queryKey: threadMessagesPrefix },
+					(old) => {
+						if (!old) return old;
+						return {
+							...old,
+							items: removeMessagesFromItems(old.items, messageIds),
+						};
+					},
+				);
+			}
+
+			const patchListData = (old: ThreadsListData | undefined) => {
+				if (!old) return old;
+				return {
+					...old,
+					pages: old.pages.map((page) => ({
+						...page,
+						items: removeMessagesFromItems(page.items, messageIds),
+					})),
+				};
+			};
+
+			queryClient.setQueriesData<ThreadsListData>(
+				{ queryKey: threadsListPrefix },
+				patchListData,
+			);
+			queryClient.setQueriesData<ThreadsListData>(
+				{ queryKey: threadsSearchPrefix },
+				patchListData,
+			);
+
+			onAfterOptimisticRemove?.(Array.from(messageIds));
+
+			return {
+				threadMessagesPrefix,
+				threadsListPrefix,
+				threadsSearchPrefix,
+				previousThreadMessages,
+				previousThreadsList,
+			};
+		},
+		onError: (err, vars, context) => {
+			if (context) {
+				for (const entry of context.previousThreadMessages) {
+					queryClient.setQueryData(entry.queryKey, entry.data);
+				}
+				for (const entry of context.previousThreadsList) {
+					queryClient.setQueryData(entry.queryKey, entry.data);
+				}
+			}
+			const count = vars.body.messageIds?.length ?? 0;
+			pushError({
+				title:
+					count > 1
+						? `Couldn't delete ${count} messages`
+						: "Couldn't delete this message",
+				detail: formatErrorDetail(err),
+			});
+		},
+		onSettled: (_data, _err, _vars, context) => {
+			if (!context) return;
+			if (threadId) {
+				queryClient.invalidateQueries({
+					queryKey: context.threadMessagesPrefix,
+				});
+			}
+			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
+			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			if (accountId) {
+				queryClient.invalidateQueries({
+					queryKey: mailboxOperationsListMailboxesQueryKey({
+						path: { accountId },
+					}),
+				});
+			}
+		},
+	});
+
+	const deleteMessages = useCallback(
+		(messageIds: string[]) => {
+			if (messageIds.length === 0) return;
+			mutate({ body: { messageIds } });
+		},
+		[mutate],
+	);
+
+	return { deleteMessages, isPending };
+};

package/src/hooks/useFilters.ts

@@ -0,0 +1,112 @@
+import {
+	filterDetailOperationsDeleteFilterMutation,
+	filterOperationsCreateFilterMutation,
+	filterOperationsListFiltersOptions,
+	filterOperationsListFiltersQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import {
+	buildCreateFilterInput,
+	type OrganizeDraft,
+	type OrganizeScope,
+} from "@/lib/organize/organize-model";
+
+/**
+ * List the account's standing filters (Standing + Temporary). Expired
+ * Temporary filters stay in the list — they are shown distinctly, never hidden
+ * (RFC 034 Decision 1.2).
+ */
+export const useFilterList = (accountId: string | undefined) => {
+	const query = useQuery({
+		...filterOperationsListFiltersOptions({
+			path: { accountId: accountId ?? "" },
+		}),
+		enabled: !!accountId,
+	});
+
+	return {
+		filters: query.data?.items ?? [],
+		isPending: query.isPending,
+		isError: query.isError,
+		error: query.error,
+		refetch: query.refetch,
+	};
+};
+
+/**
+ * Create the standing (`"these and new mail like this"`) or temporary
+ * (`"until <date>"`) filter for an organize draft. The two one-time scopes
+ * never create a filter (RFC 034 recap) and are not handled here.
+ */
+export const useCreateFilter = (accountId: string | undefined) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...filterOperationsCreateFilterMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({
+				queryKey: filterOperationsListFiltersQueryKey({
+					path: { accountId },
+				}),
+			});
+		},
+	});
+	const { mutate } = mutation;
+
+	const createFilter = useCallback(
+		(
+			draft: OrganizeDraft,
+			scope: Extract<OrganizeScope, "standing" | "temporary">,
+			name: string,
+		) => {
+			if (!accountId) return;
+			mutate({
+				path: { accountId },
+				body: buildCreateFilterInput(draft, scope, name),
+			});
+		},
+		[accountId, mutate],
+	);
+
+	return {
+		createFilter,
+		isPending: mutation.isPending,
+		isSuccess: mutation.isSuccess,
+		isError: mutation.isError,
+		error: mutation.error,
+		reset: mutation.reset,
+	};
+};
+
+export const useDeleteFilter = (accountId: string | undefined) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...filterDetailOperationsDeleteFilterMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({
+				queryKey: filterOperationsListFiltersQueryKey({
+					path: { accountId },
+				}),
+			});
+		},
+	});
+	const { mutate } = mutation;
+
+	const deleteFilter = useCallback(
+		(filterId: string) => {
+			if (!accountId) return;
+			mutate({ path: { accountId, filterId } });
+		},
+		[accountId, mutate],
+	);
+
+	return {
+		deleteFilter,
+		isPending: mutation.isPending,
+		deletingFilterId: mutation.isPending
+			? mutation.variables?.path.filterId
+			: undefined,
+	};
+};

package/src/hooks/useIntelligenceData.test.ts

@@ -0,0 +1,269 @@
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import type {
+	RemitImapAddressResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	buildAuthenticityIntel,
+	buildSenderIntel,
+} from "./useIntelligenceData.js";
+
+// Jan 2025 timestamp — far enough in the past to not be "today"
+const JAN_2025_MS = new Date("2025-01-15T12:00:00Z").getTime();
+
+function makeThread(
+	overrides: Partial<RemitImapThreadMessageResponse> = {},
+): RemitImapThreadMessageResponse {
+	return {
+		threadMessageId: "tm-1",
+		threadId: "t-1",
+		messageId: "m-1",
+		accountConfigId: "ac-1",
+		mailboxId: "mb-1",
+		fromEmail: "alice@example.com",
+		fromName: "Alice",
+		subject: "Hello",
+		senderTrust: "unknown",
+		isRead: false,
+		hasAttachment: false,
+		hasStars: false,
+		sentDate: "2025-01-15T12:00:00Z",
+		snippet: "",
+		...overrides,
+	} as RemitImapThreadMessageResponse;
+}
+
+function makeAddress(
+	overrides: Partial<RemitImapAddressResponse> = {},
+): RemitImapAddressResponse {
+	return {
+		addressId: "addr-1",
+		accountConfigId: "ac-1",
+		localPart: "alice",
+		domain: "example.com",
+		normalizedEmail: "alice@example.com",
+		createdAt: JAN_2025_MS,
+		updatedAt: JAN_2025_MS,
+		...overrides,
+	} as RemitImapAddressResponse;
+}
+
+describe("buildSenderIntel", () => {
+	describe("counter wiring — counters present", () => {
+		test("surfaces inboundCount from address", () => {
+			const thread = makeThread();
+			const address = makeAddress({ inboundCount: 34 });
+			const result = buildSenderIntel(thread, address);
+			assert.equal(result.inboundCount, 34);
+		});
+
+		test("surfaces replyCount from address", () => {
+			const thread = makeThread();
+			const address = makeAddress({ inboundCount: 34, replyCount: 12 });
+			const result = buildSenderIntel(thread, address);
+			assert.equal(result.replyCount, 12);
+		});
+
+		test("surfaces both counters together", () => {
+			const thread = makeThread();
+			const address = makeAddress({ inboundCount: 34, replyCount: 12 });
+			const result = buildSenderIntel(thread, address);
+			assert.equal(result.inboundCount, 34);
+			assert.equal(result.replyCount, 12);
+		});
+	});
+
+	describe("suppression — counters absent", () => {
+		test("inboundCount is undefined when address has no inboundCount", () => {
+			const thread = makeThread();
+			const address = makeAddress(); // no inboundCount
+			const result = buildSenderIntel(thread, address);
+			// Must be undefined, not 0 — so SenderCard suppresses the engagement clause
+			assert.equal(result.inboundCount, undefined);
+		});
+
+		test("replyCount is undefined when address has no replyCount", () => {
+			const thread = makeThread();
+			const address = makeAddress({ inboundCount: 5 }); // no replyCount
+			const result = buildSenderIntel(thread, address);
+			assert.equal(result.replyCount, undefined);
+		});
+
+		test("both counters are undefined when address is undefined", () => {
+			const thread = makeThread();
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.inboundCount, undefined);
+			assert.equal(result.replyCount, undefined);
+		});
+
+		test("does not coerce absent inboundCount to 0", () => {
+			// Regression guard: the old code left counters as undefined so
+			// SenderCard could suppress "0 received · you've never replied".
+			// Ensure undefined stays undefined, never becomes 0.
+			const thread = makeThread();
+			const address = makeAddress(); // inboundCount absent
+			const result = buildSenderIntel(thread, address);
+			assert.notEqual(result.inboundCount, 0);
+		});
+	});
+
+	describe("basic sender fields", () => {
+		test("uses fromName when present", () => {
+			const thread = makeThread({
+				fromName: "Alice Smith",
+				fromEmail: "alice@example.com",
+			});
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.name, "Alice Smith");
+		});
+
+		test("falls back to fromEmail when fromName is absent", () => {
+			const thread = makeThread({
+				fromName: undefined,
+				fromEmail: "alice@example.com",
+			});
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.name, "alice@example.com");
+		});
+
+		test("falls back to 'Unknown' when both name and email are absent", () => {
+			const thread = makeThread({ fromName: undefined, fromEmail: undefined });
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.name, "Unknown");
+		});
+
+		test("passes senderTrust through", () => {
+			const thread = makeThread({ senderTrust: "vip" });
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.trust, "vip");
+		});
+
+		test("firstSeenLabel is 'unknown' when no address", () => {
+			const thread = makeThread();
+			const result = buildSenderIntel(thread, undefined);
+			assert.equal(result.firstSeenLabel, "unknown");
+		});
+
+		test("firstSeenLabel is formatted when address is present", () => {
+			const thread = makeThread();
+			const address = makeAddress({ createdAt: JAN_2025_MS });
+			const result = buildSenderIntel(thread, address);
+			// Should be something like "Jan 2025", not "unknown" or "today"
+			assert.notEqual(result.firstSeenLabel, "unknown");
+			assert.ok(result.firstSeenLabel.length > 0);
+		});
+	});
+
+	describe("addressUnverified flag", () => {
+		test("false for a normal address", () => {
+			const result = buildSenderIntel(
+				makeThread({ fromEmail: "alice@example.com" }),
+				undefined,
+			);
+			assert.equal(result.addressUnverified, false);
+		});
+
+		test("true when the domain has no dot (placeholder junk)", () => {
+			const result = buildSenderIntel(
+				makeThread({ fromEmail: "missing_mailbox@missing_domain" }),
+				undefined,
+			);
+			assert.equal(result.addressUnverified, true);
+		});
+
+		test("true when the address is missing", () => {
+			const result = buildSenderIntel(
+				makeThread({ fromEmail: undefined }),
+				undefined,
+			);
+			assert.equal(result.addressUnverified, true);
+		});
+	});
+});
+
+describe("buildAuthenticityIntel", () => {
+	test("caution when there is no authenticity signal", () => {
+		const thread = makeThread({ fromEmail: "alice@example.com" });
+		const result = buildAuthenticityIntel(thread, 0);
+		assert.equal(result.verdict, "caution");
+		assert.match(result.summary, /can't verify the sender/);
+	});
+
+	test("aligned when a signal is present and does not mismatch", () => {
+		const thread = makeThread({
+			fromEmail: "alice@example.com",
+			authenticity: {
+				fromDomain: "example.com",
+				dkimDomain: "example.com",
+				dkimMismatch: false,
+			},
+		} as Partial<RemitImapThreadMessageResponse>);
+		const result = buildAuthenticityIntel(thread, 0);
+		assert.equal(result.verdict, "aligned");
+	});
+
+	test("mismatch when the signing domain does not align", () => {
+		const thread = makeThread({
+			fromEmail: "security@your-bank.example",
+			fromName: "Your Bank",
+			authenticity: {
+				fromDomain: "your-bank.example",
+				dkimDomain: "mailer.evil.example",
+				dkimMismatch: true,
+			},
+		} as Partial<RemitImapThreadMessageResponse>);
+		const result = buildAuthenticityIntel(thread, 3);
+		assert.equal(result.verdict, "mismatch");
+		assert.equal(result.addressUnreadable, undefined);
+		assert.equal(result.similarCount, 3);
+	});
+
+	test("no user-facing copy names the verification mechanism", () => {
+		const verdicts = [
+			buildAuthenticityIntel(makeThread(), 0),
+			buildAuthenticityIntel(
+				makeThread({ fromEmail: "x@no-signal.example" }),
+				0,
+			),
+			buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "a@bank.example",
+					authenticity: {
+						fromDomain: "bank.example",
+						dkimDomain: "evil.example",
+						dkimMismatch: true,
+					},
+				} as Partial<RemitImapThreadMessageResponse>),
+				0,
+			),
+		];
+		for (const v of verdicts) {
+			assert.doesNotMatch(v.summary, /DKIM|SPF|DMARC/i);
+		}
+	});
+
+	describe("unparseable sender drives the red tier", () => {
+		test("mismatch + addressUnreadable when the domain has no dot", () => {
+			const thread = makeThread({
+				fromEmail: "missing_mailbox@missing_domain",
+			});
+			const result = buildAuthenticityIntel(thread, 0);
+			assert.equal(result.verdict, "mismatch");
+			assert.equal(result.addressUnreadable, true);
+		});
+
+		test("red tier even when a clean DKIM signal is present", () => {
+			const thread = makeThread({
+				fromEmail: "missing_mailbox@missing_domain",
+				authenticity: {
+					fromDomain: "missing_domain",
+					dkimMismatch: false,
+				},
+			} as Partial<RemitImapThreadMessageResponse>);
+			const result = buildAuthenticityIntel(thread, 0);
+			assert.equal(result.verdict, "mismatch");
+			assert.equal(result.addressUnreadable, true);
+		});
+	});
+});