@remit/web-client 0.0.16 → 0.0.17

package/package.json

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

@@ -1,28 +1,28 @@
 /**
  * FlaggedList — a FLAT, cross-account inbox of starred mail.
  *
- * Reads GET /threads with `starred=true`, which is served by the `byStarred`
- * index and returns every starred thread in the config across all non-muted
- * mailboxes, paged. Starredness is decided server-side from `hasStars`; the
- * client neither re-filters nor caps the set, so a starred thread outside the
- * newest inbox page still appears. Rendered as one continuous list (no category
+ * Reads the starred listing through `useStarredThreads` — GET /threads with
+ * `starred=true`, served by the `byStarred` index — which returns every starred
+ * thread in the config across all non-muted mailboxes, paged. `FlaggedPane`
+ * resolves the open thread from that same hook, so every row rendered here can
+ * be opened. Starredness is decided server-side from `hasStars`; the client
+ * neither re-filters nor caps the set, so a starred thread outside the newest
+ * inbox page still appears. Rendered as one continuous list (no category
  * sections). The shared `MailViewChrome` owns the `MailHeader` + filter
  * expando; the kit `MessageListPane` (flat, no `briefFilters`) owns the loading
  * / empty / error chrome and keyboard hints, with a consumer-supplied
  * `listBody` so the real rows render at every width.
  */
-import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
 import {
 	ComfortableRow,
 	flaggedFilterConfig,
 	MessageListPane,
 	type ThreadRowData,
 } from "@remit/ui";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
+import { useStarredThreads } from "@/hooks/useStarredThreads";
 import {
 	matchesBriefSearch,
 	matchesSearchTokens,
@@ -72,7 +72,7 @@ export function FlaggedList({
 	}, []);
 
 	const {
-		data: threadsData,
+		threads,
 		isLoading,
 		isError,
 		error,
@@ -80,25 +80,7 @@ export function FlaggedList({
 		fetchNextPage,
 		hasNextPage,
 		isFetchingNextPage,
-	} = useInfiniteQuery({
-		queryKey: unifiedThreadOperationsListAllThreadsQueryKey({
-			query: { starred: true, order: "desc" },
-		}),
-		queryFn: async ({ pageParam }) => {
-			const { data } = await unifiedThreadOperationsListAllThreads({
-				query: {
-					starred: true,
-					order: "desc",
-					continuationToken: pageParam,
-				},
-				throwOnError: true,
-			});
-			return data;
-		},
-		initialPageParam: undefined as string | undefined,
-		getNextPageParam: (lastPage) => lastPage.continuationToken,
-		staleTime: 60_000,
-	});
+	} = useStarredThreads();
 
 	const { freeText: sq, tokens: queryTokens } = parseSearchTokens(
 		searchQuery.trim().toLowerCase(),
@@ -109,9 +91,7 @@ export function FlaggedList({
 		const predicates = Array.from(activeFilters)
 			.map((id) => FILTER_PREDICATES[id])
 			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
-		return dedupeByThread(
-			(threadsData?.pages ?? []).flatMap((page) => page.items ?? []),
-		)
+		return dedupeByThread(threads)
 			.map(toThreadRowData)
 			.filter(
 				(t) =>
@@ -120,7 +100,7 @@ export function FlaggedList({
 					(!sq || matchesBriefSearch(t, sq)) &&
 					matchesSearchTokens(t, queryTokens),
 			);
-	}, [threadsData, selectedCategory, activeFilters, sq, queryTokens]);
+	}, [threads, selectedCategory, activeFilters, sq, queryTokens]);
 
 	const preset = useMemo(() => flaggedFilterConfig(), []);
 

package/src/components/mail/FlaggedPane.tsx

@@ -2,9 +2,14 @@
  * FlaggedPane — compound component for the Flagged virtual mailbox
  * (/mail/flagged route).
  *
- * Mirrors BriefPane: it reads the unified cross-account thread list to resolve
- * the open thread and owns the list / reading / phone slots. The list itself is
- * a FLAT inbox of starred mail (see `FlaggedList`), not the sectioned brief.
+ * Mirrors BriefPane in shape: it resolves the open thread and owns the list /
+ * reading / phone slots. The list itself is a FLAT inbox of starred mail (see
+ * `FlaggedList`), not the sectioned brief.
+ *
+ * The selection resolves from the starred listing, the same query that produced
+ * the rows. The unified listing is INBOX-scoped, so resolving against it left
+ * every starred thread filed elsewhere — Sent, an archive folder, anything past
+ * the inbox window — visible in the list but impossible to open (issue #70).
  *
  *   <FlaggedPane selectedMessageId={...}>
  *     <AppShellSlotted
@@ -15,10 +20,8 @@
  *
  * On phone, use `<FlaggedPane.Phone />` instead.
  */
-import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
@@ -32,6 +35,7 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { useMailContext } from "@/lib/mail-context";
 
 /* ------------------------------------------------------------------ */
@@ -68,15 +72,12 @@ function FlaggedPaneProvider({
 }: FlaggedPaneProps) {
 	const navigate = useNavigate();
 
-	const { data: threadsData } = useQuery({
-		...unifiedThreadOperationsListAllThreadsOptions(),
-		staleTime: 60_000,
-	});
+	const { threads } = useStarredThreads();
 
 	const selectedThread = useMemo(() => {
 		if (!selectedMessageId) return undefined;
-		return threadsData?.items.find((t) => t.messageId === selectedMessageId);
-	}, [threadsData, selectedMessageId]);
+		return threads.find((t) => t.messageId === selectedMessageId);
+	}, [threads, selectedMessageId]);
 
 	const handleSelectMessage = useCallback(
 		(id: string) => {

package/src/hooks/useStarredThreads.test.ts

@@ -0,0 +1,143 @@
+/**
+ * useStarredThreads — regression cover for issue #70.
+ *
+ * The Starred pane rendered its rows from `GET /threads?starred=true` but
+ * resolved the open thread from the unfiltered (INBOX-scoped) listing. Rows for
+ * starred mail filed outside INBOX therefore had nothing to resolve to and
+ * opened no reading pane.
+ *
+ * Strategy follows useRescueCandidates.test.ts: pre-seed a QueryClient under the
+ * key the hook generates and render it synchronously, so the queryFn never
+ * fires. The last two cases are the ones that fail if the wrong listing comes
+ * back — the unfiltered key is seeded alongside and must not be read.
+ */
+
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	starredThreadsQueryKey,
+	useStarredThreads,
+} from "./useStarredThreads.js";
+
+interface Page {
+	items: RemitImapThreadMessageResponse[];
+	continuationToken?: string;
+}
+
+function makeThread(
+	messageId: string,
+	overrides: Partial<RemitImapThreadMessageResponse> = {},
+): RemitImapThreadMessageResponse {
+	return {
+		messageId,
+		threadMessageId: `tm-${messageId}`,
+		threadId: `t-${messageId}`,
+		accountConfigId: "acc",
+		mailboxId: "mb-inbox",
+		sentDate: 1_000_000,
+		isRead: false,
+		hasAttachment: false,
+		hasStars: true,
+		isDeleted: false,
+		createdAt: 1_000_000,
+		updatedAt: 1_000_000,
+		fromName: "Anna de Vries",
+		fromEmail: "anna@example.nl",
+		subject: `subject ${messageId}`,
+		snippet: "…",
+		senderTrust: "vip",
+		...overrides,
+	} as RemitImapThreadMessageResponse;
+}
+
+/**
+ * Renders the hook against a cache holding `starredPages` under the starred key
+ * and `unfilteredItems` under the unfiltered one, so a hook reading the wrong
+ * listing returns the wrong threads instead of returning nothing.
+ */
+function renderHook(
+	starredPages: Page[],
+	unfilteredItems: RemitImapThreadMessageResponse[] = [],
+): RemitImapThreadMessageResponse[] {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	client.setQueryData(starredThreadsQueryKey(), {
+		pages: starredPages,
+		pageParams: starredPages.map((_, index) =>
+			index === 0 ? undefined : `page-${index}`,
+		),
+	});
+	client.setQueryData(unifiedThreadOperationsListAllThreadsQueryKey(), {
+		items: unfilteredItems,
+	});
+
+	let captured: RemitImapThreadMessageResponse[] = [];
+
+	function Capture() {
+		captured = useStarredThreads().threads;
+		return null;
+	}
+
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client },
+			createElement(Capture),
+		) as never,
+	);
+
+	return captured;
+}
+
+describe("starredThreadsQueryKey", () => {
+	test("asks for the starred listing, newest first", () => {
+		const [params] = starredThreadsQueryKey() as [
+			{ query?: { starred?: boolean; order?: string } },
+		];
+		assert.equal(params.query?.starred, true);
+		assert.equal(params.query?.order, "desc");
+	});
+});
+
+describe("useStarredThreads", () => {
+	test("returns no threads when the listing is empty", () => {
+		assert.deepEqual(renderHook([{ items: [] }]), []);
+	});
+
+	test("flattens every loaded page, in page order", () => {
+		const threads = renderHook([
+			{ items: [makeThread("m1"), makeThread("m2")], continuationToken: "p2" },
+			{ items: [makeThread("m3")] },
+		]);
+		assert.deepEqual(
+			threads.map((thread) => thread.messageId),
+			["m1", "m2", "m3"],
+		);
+	});
+
+	test("returns a starred thread that lives outside INBOX", () => {
+		// The case issue #70 could not open: starred, filed in Sent, and absent
+		// from the unfiltered listing the pane used to resolve against.
+		const sent = makeThread("m-sent", { mailboxId: "mb-sent" });
+		const threads = renderHook([{ items: [sent] }], [makeThread("m-inbox")]);
+		assert.deepEqual(
+			threads.map((thread) => thread.messageId),
+			["m-sent"],
+		);
+		assert.equal(
+			threads.find((thread) => thread.messageId === "m-sent")?.mailboxId,
+			"mb-sent",
+		);
+	});
+
+	test("does not read the unfiltered INBOX listing", () => {
+		const threads = renderHook([{ items: [] }], [makeThread("m-inbox")]);
+		assert.deepEqual(threads, []);
+	});
+});

package/src/hooks/useStarredThreads.ts

@@ -0,0 +1,78 @@
+/**
+ * The starred listing — `GET /threads?starred=true`, served by the `byStarred`
+ * index — as one hook, so the Starred pane's list and its selection resolve
+ * from the same query.
+ *
+ * The two are the same cache entry, not two requests: they share a query key,
+ * so `threads` here is exactly the set of rows the list rendered. Resolving a
+ * selection from any other listing reintroduces issue #70 — the INBOX-scoped
+ * unified listing cannot see a starred thread filed elsewhere, so its row is
+ * clickable but resolves to nothing and no reading pane opens.
+ */
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const starredThreadsQueryKey = () =>
+	unifiedThreadOperationsListAllThreadsQueryKey({
+		query: { starred: true, order: "desc" },
+	});
+
+interface StarredThreads {
+	/** Every starred thread across the pages loaded so far, newest first. */
+	threads: RemitImapThreadMessageResponse[];
+	isLoading: boolean;
+	isError: boolean;
+	error: unknown;
+	refetch: () => void;
+	fetchNextPage: () => void;
+	hasNextPage: boolean;
+	isFetchingNextPage: boolean;
+}
+
+export function useStarredThreads(): StarredThreads {
+	const {
+		data,
+		isLoading,
+		isError,
+		error,
+		refetch,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	} = useInfiniteQuery({
+		queryKey: starredThreadsQueryKey(),
+		queryFn: async ({ pageParam }) => {
+			const { data: page } = await unifiedThreadOperationsListAllThreads({
+				query: {
+					starred: true,
+					order: "desc",
+					continuationToken: pageParam,
+				},
+				throwOnError: true,
+			});
+			return page;
+		},
+		initialPageParam: undefined as string | undefined,
+		getNextPageParam: (lastPage) => lastPage.continuationToken,
+		staleTime: 60_000,
+	});
+
+	const threads = useMemo(
+		() => (data?.pages ?? []).flatMap((page) => page.items ?? []),
+		[data],
+	);
+
+	return {
+		threads,
+		isLoading,
+		isError,
+		error,
+		refetch,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	};
+}