@remit/web-client 0.0.9 → 0.0.11

package/package.json

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

@@ -163,7 +163,7 @@ export const ConversationView = ({
 	} = useQuery({
 		...threadDetailOperationsListThreadMessagesOptions({
 			path: { threadId },
-			query: { order: "desc", mailboxId },
+			query: { order: "desc" },
 		}),
 	});
 
@@ -266,6 +266,7 @@ export const ConversationView = ({
 	} = useToggleStar({
 		threadId,
 		mailboxId,
+		messages,
 	});
 
 	// Compose state for inline reply/forward.

package/src/components/settings/AccountFormPanel.tsx

@@ -6,7 +6,7 @@ import {
 	configOperationsGetConfigQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { Button, Input, Select, securityToApi } from "@remit/ui";
+import { Button, Input, Select, SlidePanel, securityToApi } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -19,7 +19,6 @@ import {
 	type ProviderPreset,
 } from "../../lib/provider-presets.js";
 import { cn } from "../../lib/utils";
-import { SlidePanel } from "../ui/SlidePanel";
 import {
 	appendAppPasswordHint,
 	computeSmtpAutoFill,

package/src/hooks/useMarkAsRead.test.ts

@@ -1,7 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { selectMessagesToMarkRead } from "./useMarkAsRead.js";
+import {
+	resolveMailboxesForMessages,
+	selectMessagesToMarkRead,
+} from "./useMarkAsRead.js";
 
 const make = (
 	overrides: Partial<RemitImapThreadMessageResponse> & {
@@ -163,3 +166,52 @@ describe("selectMessagesToMarkRead", () => {
 		assert.deepStrictEqual(got, ["m-older"]);
 	});
 });
+
+describe("resolveMailboxesForMessages", () => {
+	const messages = [
+		make({
+			messageId: "m-received",
+			threadMessageId: "tm1",
+			isRead: false,
+			mailboxId: "mb-inbox",
+		}),
+		make({
+			messageId: "m-sent",
+			threadMessageId: "tm2",
+			isRead: false,
+			mailboxId: "mb-sent",
+		}),
+	];
+
+	test("names every mailbox the batch touches, not the browsed one", () => {
+		const got = resolveMailboxesForMessages(
+			["m-received", "m-sent"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual([...got].sort(), ["mb-inbox", "mb-sent"]);
+	});
+
+	test("marking only the sent reply leaves the browsed mailbox alone", () => {
+		const got = resolveMailboxesForMessages(["m-sent"], messages, "mb-inbox");
+		assert.deepStrictEqual(got, ["mb-sent"]);
+	});
+
+	test("names each mailbox once however many messages it holds", () => {
+		const got = resolveMailboxesForMessages(
+			["m-received", "m-received"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual(got, ["mb-inbox"]);
+	});
+
+	test("falls back to the browsed mailbox for an unknown message", () => {
+		const got = resolveMailboxesForMessages(
+			["m-elsewhere"],
+			messages,
+			"mb-inbox",
+		);
+		assert.deepStrictEqual(got, ["mb-inbox"]);
+	});
+});

package/src/hooks/useMarkAsRead.ts

@@ -41,12 +41,35 @@ interface SnapshotEntry<T> {
 
 interface MarkAsReadContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
+	threadsListPrefixes: ReadonlyArray<readonly unknown[]>;
+	threadsSearchPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
 	previousThreadsList: SnapshotEntry<ThreadsListData>[];
 }
 
+/**
+ * The mailboxes whose cached listings a batch of message mutations affects.
+ *
+ * A conversation spans mailboxes (#46), so marking a thread read can touch a
+ * received message in INBOX and the user's own reply in Sent at once, and each
+ * one's lists live under its own mailbox key. Falls back to the browsed mailbox
+ * for ids the thread's messages do not cover.
+ */
+export const resolveMailboxesForMessages = (
+	messageIds: Iterable<string>,
+	messages: RemitImapThreadMessageResponse[],
+	fallbackMailboxId: string,
+): string[] => {
+	const byMessageId = new Map(
+		messages.map((message) => [message.messageId, message.mailboxId]),
+	);
+	const mailboxIds = new Set<string>();
+	for (const messageId of messageIds) {
+		mailboxIds.add(byMessageId.get(messageId) ?? fallbackMailboxId);
+	}
+	return [...mailboxIds];
+};
+
 const setReadOnItems = (
 	items: RemitImapThreadMessageResponse[],
 	messageIds: Set<string>,
@@ -101,17 +124,26 @@ export const useMarkAsRead = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
-			});
+			const affectedMailboxIds = resolveMailboxesForMessages(
+				messageIds,
+				messages,
+				mailboxId,
+			);
+			const threadsListPrefixes = affectedMailboxIds.map((id) =>
+				threadOperationsListThreadsQueryKey({ path: { mailboxId: id } }),
+			);
+			const threadsSearchPrefixes = affectedMailboxIds.map((id) =>
+				threadOperationsSearchThreadsQueryKey({ path: { mailboxId: id } }),
+			);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				...threadsListPrefixes.map((queryKey) =>
+					queryClient.cancelQueries({ queryKey }),
+				),
+				...threadsSearchPrefixes.map((queryKey) =>
+					queryClient.cancelQueries({ queryKey }),
+				),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -122,12 +154,12 @@ export const useMarkAsRead = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
+			const previousThreadsList = [
+				...threadsListPrefixes,
+				...threadsSearchPrefixes,
+			]
+				.flatMap((queryKey) =>
+					queryClient.getQueriesData<ThreadsListData>({ queryKey }),
 				)
 				.filter(
 					(entry): entry is [readonly unknown[], ThreadsListData] =>
@@ -157,19 +189,20 @@ export const useMarkAsRead = ({
 				};
 			};
 
-			queryClient.setQueriesData<ThreadsListData>(
-				{ queryKey: threadsListPrefix },
-				patchListData,
-			);
-			queryClient.setQueriesData<ThreadsListData>(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
-			);
+			for (const queryKey of [
+				...threadsListPrefixes,
+				...threadsSearchPrefixes,
+			]) {
+				queryClient.setQueriesData<ThreadsListData>(
+					{ queryKey },
+					patchListData,
+				);
+			}
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
+				threadsListPrefixes,
+				threadsSearchPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -203,8 +236,12 @@ export const useMarkAsRead = ({
 		onSettled: (_data, _err, _vars, context) => {
 			if (!context) return;
 			queryClient.invalidateQueries({ queryKey: context.threadMessagesPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			for (const queryKey of [
+				...context.threadsListPrefixes,
+				...context.threadsSearchPrefixes,
+			]) {
+				queryClient.invalidateQueries({ queryKey });
+			}
 			// Refresh the sidebar mailbox list so the unread badge picks up the
 			// next backend `unseenCount` (which is owned by IMAP sync).
 			if (accountId) {

package/src/hooks/useToggleStar.test.ts

@@ -1,7 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { toggleStarsInItems } from "./useToggleStar.js";
+import {
+	resolveMailboxForMessage,
+	toggleStarsInItems,
+} from "./useToggleStar.js";
 
 const make = (
 	messageId: string,
@@ -55,3 +58,38 @@ describe("toggleStarsInItems", () => {
 		);
 	});
 });
+
+describe("resolveMailboxForMessage", () => {
+	const messages = [
+		{ ...make("m-received", false), mailboxId: "mb-inbox" },
+		{ ...make("m-sent", false), mailboxId: "mb-sent" },
+	];
+
+	test("starring a sent reply patches the sent mailbox, not the browsed one", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-sent", messages, "mb-inbox"),
+			"mb-sent",
+		);
+	});
+
+	test("starring a message in the browsed mailbox is unchanged", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-received", messages, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+
+	test("falls back to the browsed mailbox when the thread is unknown", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-sent", undefined, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+
+	test("falls back to the browsed mailbox for a message not in the thread", () => {
+		assert.strictEqual(
+			resolveMailboxForMessage("m-elsewhere", messages, "mb-inbox"),
+			"mb-inbox",
+		);
+	});
+});

package/src/hooks/useToggleStar.ts

@@ -12,9 +12,35 @@ import { formatErrorDetail } from "@/components/ui/error-banners";
 
 interface UseToggleStarOptions {
 	threadId: string;
+	/**
+	 * The mailbox whose lists to patch when the starred message is not in
+	 * `messages` — the browsed mailbox, which is where a list row lives.
+	 */
 	mailboxId: string;
+	/**
+	 * The thread's messages, when the caller has them. A conversation spans
+	 * mailboxes (#46), so the lists to patch are the ones for the mailbox the
+	 * starred message is actually in, not the one being browsed.
+	 */
+	messages?: RemitImapThreadMessageResponse[];
 }
 
+/**
+ * The mailbox whose cached listings a mutation on `messageId` affects.
+ *
+ * The message's own mailbox, falling back to the browsed one when the thread's
+ * messages are unknown or do not contain it. Starring a reply in Sent from a
+ * conversation opened in INBOX has to patch Sent's lists; INBOX's do not hold
+ * that message and patching them changes nothing.
+ */
+export const resolveMailboxForMessage = (
+	messageId: string,
+	messages: RemitImapThreadMessageResponse[] | undefined,
+	fallbackMailboxId: string,
+): string =>
+	messages?.find((message) => message.messageId === messageId)?.mailboxId ??
+	fallbackMailboxId;
+
 interface ThreadMessagesData {
 	items: RemitImapThreadMessageResponse[];
 	[key: string]: unknown;
@@ -57,6 +83,7 @@ export const toggleStarsInItems = (
 export const useToggleStar = ({
 	threadId,
 	mailboxId,
+	messages,
 }: UseToggleStarOptions) => {
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
@@ -75,11 +102,16 @@ export const useToggleStar = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
+			const affectedMailboxId = resolveMailboxForMessage(
+				messageId,
+				messages,
+				mailboxId,
+			);
 			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
+				path: { mailboxId: affectedMailboxId },
 			});
 			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
+				path: { mailboxId: affectedMailboxId },
 			});
 			// The unified cross-account listing backs the daily brief and the
 			// Starred mailbox, so a star toggled from an inbox has to land there

package/src/index.css

@@ -4,9 +4,18 @@
    the .dark ancestor scope used everywhere in this app. */
 @import "@remit/ui/tokens.css";
 
-/* Tailwind v4 content scanning: point at the source Tailwind must inspect
-   for utility class usage (auto-detection misses linked workspace packages). */
+/* Tailwind v4 content scanning: name every source Tailwind must inspect for
+   utility class usage. Automatic detection is rooted at the Vite root, which
+   for the distributor harness build is a throwaway directory holding only the
+   entry — so nothing here may rely on it. Both this package's own components
+   and the linked workspace UI package are declared explicitly.
+
+   Tests are excluded: they assert on class strings, and a scanned assertion
+   emits the utility it names into the shipped stylesheet. */
+@source "./**/*.{ts,tsx}";
 @source "../../ui/src/**/*.{ts,tsx}";
+@source not "./**/*.test.{ts,tsx}";
+@source not "../../ui/src/**/*.test.{ts,tsx}";
 
 /* Hide scrollbars while maintaining scroll functionality */
 .overflow-y-auto {

package/src/index.css.test.ts

@@ -0,0 +1,97 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, relative, resolve, sep } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Tailwind v4 roots automatic source detection at the bundler's root. The
+ * distributor harness builds from a throwaway root holding only the entry, so
+ * nothing this app renders is discovered automatically: every directory whose
+ * components carry utility classes has to be named by an `@source` rule. When
+ * one is missing the build still succeeds — it just ships a stylesheet with
+ * those utilities absent, and the screens using them lay out as unstyled boxes
+ * (#57: the settings slide-over covered the whole viewport).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const cssPath = resolve(here, "index.css");
+const css = readFileSync(cssPath, "utf8");
+
+/** Globs Tailwind scans, and globs it is told to skip. */
+const globs = (kind: "include" | "exclude"): string[] =>
+	[...css.matchAll(/@source\s+(not\s+)?"([^"]+)"/g)]
+		.filter(([, negated]) => (kind === "exclude") === Boolean(negated))
+		.map(([, , glob]) => glob);
+
+/** The directory an `@source` glob starts scanning from. */
+const sourceRoots = (): string[] =>
+	globs("include").map((glob) => {
+		const literal = glob.split("*")[0] ?? glob;
+		return resolve(dirname(cssPath), literal);
+	});
+
+/** Every directory below `root` that holds a component file. */
+const componentDirs = (root: string): string[] => {
+	const found: string[] = [];
+	const walk = (dir: string): void => {
+		const entries = readdirSync(dir, { withFileTypes: true });
+		if (entries.some((e) => e.isFile() && e.name.endsWith(".tsx"))) {
+			found.push(dir);
+		}
+		for (const entry of entries) {
+			if (entry.isDirectory() && entry.name !== "node_modules") {
+				walk(resolve(dir, entry.name));
+			}
+		}
+	};
+	walk(root);
+	return found;
+};
+
+const isCovered = (dir: string, roots: string[]): boolean =>
+	roots.some((root) => {
+		const rel = relative(root, dir);
+		return rel === "" || (!rel.startsWith("..") && !rel.startsWith(sep));
+	});
+
+describe("tailwind source coverage (#57)", () => {
+	const roots = sourceRoots();
+
+	it("declares at least one source", () => {
+		assert.ok(roots.length > 0);
+	});
+
+	it("covers every directory in this package that renders components", () => {
+		const uncovered = componentDirs(here).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(here, d)),
+			[],
+		);
+	});
+
+	it("covers the linked design system package", () => {
+		const ui = resolve(here, "../../ui/src");
+		const uncovered = componentDirs(ui).filter((d) => !isCovered(d, roots));
+		assert.deepEqual(
+			uncovered.map((d) => relative(ui, d)),
+			[],
+		);
+	});
+
+	/**
+	 * A test asserting on a class string is a class string in a scanned file, so
+	 * without this every utility a test names is emitted into the shipped CSS.
+	 */
+	it("excludes test files from every source it scans", () => {
+		const uncovered = globs("include").filter(
+			(glob) =>
+				!globs("exclude").some(
+					(excluded) =>
+						excluded ===
+						glob.replace(/\/\*\*\/\*\.\{ts,tsx\}$/, "/**/*.test.{ts,tsx}"),
+				),
+		);
+		assert.deepEqual(uncovered, []);
+	});
+});

package/src/components/ui/SlidePanel.tsx

@@ -1,72 +0,0 @@
-import { X } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/utils";
-
-interface SlidePanelProps {
-	isOpen: boolean;
-	onClose: () => void;
-	title: string;
-	children: ReactNode;
-	footer?: ReactNode;
-}
-
-export const SlidePanel = ({
-	isOpen,
-	onClose,
-	title,
-	children,
-	footer,
-}: SlidePanelProps) => (
-	<>
-		{/* Backdrop overlay */}
-		{/* biome-ignore lint/a11y/useSemanticElements: full-screen backdrop overlay; <button> default styles would break fixed inset positioning */}
-		<div
-			className={cn(
-				"fixed inset-0 bg-black/30 z-40 transition-opacity",
-				isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
-			)}
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-			role="button"
-			tabIndex={0}
-			aria-label="Close panel"
-		/>
-
-		{/* Slide-in panel */}
-		<div
-			className={cn(
-				"fixed top-0 right-0 h-full w-full sm:w-[400px] sm:max-w-[90vw] bg-canvas border-l border-line shadow-xl z-50",
-				"transform transition-transform duration-200 ease-out",
-				isOpen ? "translate-x-0" : "translate-x-full",
-			)}
-			role="dialog"
-			aria-modal="true"
-			aria-labelledby="slide-panel-title"
-		>
-			{/* Panel header */}
-			<div className="flex items-center justify-between px-4 h-14 border-b border-line">
-				<h2 id="slide-panel-title" className="font-semibold">
-					{title}
-				</h2>
-				<button
-					type="button"
-					onClick={onClose}
-					className="p-1.5 rounded-md hover:bg-surface-raised transition-colors"
-					aria-label="Close"
-				>
-					<X className="size-5" />
-				</button>
-			</div>
-
-			{/* Panel content */}
-			<div className="h-[calc(100%-3.5rem)] flex flex-col">
-				<div className="flex-1 overflow-auto p-4">{children}</div>
-				{footer && (
-					<div className="flex justify-end gap-3 p-4 border-t border-line bg-canvas">
-						{footer}
-					</div>
-				)}
-			</div>
-		</div>
-	</>
-);