@remit/web-client 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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

@@ -137,7 +137,7 @@ export function FlaggedList({
 
 	return (
 		<MailViewChrome
-			title="Flagged"
+			title="Starred"
 			unreadCount={unreadCount}
 			preset={preset}
 			selectedCategory={selectedCategory}
@@ -150,7 +150,7 @@ export function FlaggedList({
 			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
 		>
 			<MessageListPane
-				listTitle="Flagged"
+				listTitle="Starred"
 				sections={[{ id: "flagged", threads: rows }]}
 				flatList
 				hideHeader

package/src/components/mail/MailboxPane.tsx

@@ -110,8 +110,10 @@ import { useTelemetry } from "@/lib/telemetry-context";
 import { MailViewChrome } from "./MailViewChrome";
 
 /* ------------------------------------------------------------------ */
-/* Inbox filter predicates — the inbox preset offers Unread / Flagged /
-   Has attachment (never accounts; an inbox is one account already).    */
+/* Inbox filter predicates — the inbox preset offers Unread / Starred /
+   Has attachment (never accounts; an inbox is one account already).
+   The `flagged` id is the wire name for IMAP \Flagged; the label is
+   "Starred".                                                           */
 /* ------------------------------------------------------------------ */
 
 const INBOX_FILTER_PREDICATES: Record<
@@ -119,7 +121,7 @@ const INBOX_FILTER_PREDICATES: Record<
 	(t: RemitImapThreadMessageResponse) => boolean
 > = {
 	unread: (t) => !t.isRead,
-	flagged: (t) => t.star != null && t.star !== "none" && t.hasStars === true,
+	flagged: (t) => t.hasStars === true,
 	attachment: (t) => Boolean(t.hasAttachment),
 };
 

package/src/components/mail/MessageListItem.tsx

@@ -80,8 +80,7 @@ const toThreadRowData = (
 		timeLabel: formatEmailDate(thread.sentDate),
 		isRead: thread.isRead,
 		hasAttachment: thread.hasAttachment,
-		starred:
-			thread.star != null && thread.star !== "none" && thread.hasStars === true,
+		starred: thread.hasStars === true,
 		trust: thread.senderTrust as SenderTrustLevel,
 		category: toDisplayCategory(thread.category),
 		messageCount,

package/src/components/mail/MessageToolbar.render.test.ts

@@ -50,7 +50,7 @@ describe("MailActionToolbar never disables its action buttons (#799)", () => {
 	it("keeps the action buttons present (reply/flag) so they stay pressable", () => {
 		const html = render({ hasThread: false });
 		assert.match(html, /aria-label="Reply"/);
-		assert.match(html, /aria-label="Flag"/);
+		assert.match(html, /aria-label="Star"/);
 		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
 		assert.doesNotMatch(html, /aria-label="Archive"/);
 	});

package/src/components/mail/MessageToolbar.tsx

@@ -102,7 +102,7 @@ export const MessageToolbar = ({
 			replyAllTitle={`Reply all ${tooltipForAction("replyAll")}`}
 			forwardTitle={`Forward ${tooltipForAction("forward")}`}
 			deleteTitle={`Move to Trash ${tooltipForAction("delete")}`}
-			flagTitle={`Flag ${tooltipForAction("toggleStar")}`}
+			flagTitle={`Star ${tooltipForAction("toggleStar")}`}
 			onReply={onReply}
 			onReplyAll={onReplyAll}
 			onForward={onForward}

package/src/hooks/useToggleStar.test.ts

@@ -0,0 +1,57 @@
+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";
+
+const make = (
+	messageId: string,
+	hasStars: boolean,
+): RemitImapThreadMessageResponse => ({
+	senderTrust: "unknown",
+	threadId: "t1",
+	threadMessageId: `tm-${messageId}`,
+	messageId,
+	accountConfigId: "cfg_1",
+	mailboxId: "mb1",
+	subject: "s",
+	fromName: "n",
+	fromEmail: "e",
+	sentDate: 1767225600,
+	snippet: "",
+	isRead: false,
+	isDeleted: false,
+	hasAttachment: false,
+	star: "none",
+	hasStars,
+	createdAt: 0,
+	updatedAt: 0,
+});
+
+describe("toggleStarsInItems", () => {
+	test("stars only the target message", () => {
+		const items = [make("m1", false), make("m2", false)];
+		const got = toggleStarsInItems(items, "m1", true);
+		assert.deepStrictEqual(
+			got.map((i) => [i.messageId, i.hasStars]),
+			[
+				["m1", true],
+				["m2", false],
+			],
+		);
+	});
+
+	test("unstars the target message", () => {
+		const items = [make("m1", true)];
+		const got = toggleStarsInItems(items, "m1", false);
+		assert.strictEqual(got[0]?.hasStars, false);
+	});
+
+	test("leaves the list untouched when the message is absent", () => {
+		const items = [make("m1", false)];
+		const got = toggleStarsInItems(items, "missing", true);
+		assert.deepStrictEqual(
+			got.map((i) => i.hasStars),
+			[false],
+		);
+	});
+});

package/src/hooks/useToggleStar.ts

@@ -3,6 +3,7 @@ import {
 	threadDetailOperationsListThreadMessagesQueryKey,
 	threadOperationsListThreadsQueryKey,
 	threadOperationsSearchThreadsQueryKey,
+	unifiedThreadOperationsListAllThreadsQueryKey,
 } 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";
@@ -38,11 +39,13 @@ interface ToggleStarContext {
 	threadMessagesPrefix: readonly unknown[];
 	threadsListPrefix: readonly unknown[];
 	threadsSearchPrefix: readonly unknown[];
+	unifiedThreadsPrefix: readonly unknown[];
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
 	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+	previousUnifiedThreads: SnapshotEntry<ThreadMessagesData>[];
 }
 
-const toggleStarsInItems = (
+export const toggleStarsInItems = (
 	items: RemitImapThreadMessageResponse[],
 	messageId: string,
 	nextStarred: boolean,
@@ -78,11 +81,18 @@ export const useToggleStar = ({
 			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
 				path: { mailboxId },
 			});
+			// The unified cross-account listing backs the daily brief and the
+			// Starred mailbox, so a star toggled from an inbox has to land there
+			// too — without this the starred view keeps serving a stale page for
+			// its whole staleTime and the message never appears.
+			const unifiedThreadsPrefix =
+				unifiedThreadOperationsListAllThreadsQueryKey();
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
 				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
 				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				queryClient.cancelQueries({ queryKey: unifiedThreadsPrefix }),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -106,15 +116,29 @@ export const useToggleStar = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
+			const previousUnifiedThreads = queryClient
+				.getQueriesData<ThreadMessagesData>({ queryKey: unifiedThreadsPrefix })
+				.filter(
+					(entry): entry is [readonly unknown[], ThreadMessagesData] =>
+						entry[1] !== undefined,
+				)
+				.map(([queryKey, data]) => ({ queryKey, data }));
+
+			const patchItemsData = (old: ThreadMessagesData | undefined) => {
+				if (!old) return old;
+				return {
+					...old,
+					items: toggleStarsInItems(old.items, messageId, nextStarred),
+				};
+			};
+
 			queryClient.setQueriesData<ThreadMessagesData>(
 				{ queryKey: threadMessagesPrefix },
-				(old) => {
-					if (!old) return old;
-					return {
-						...old,
-						items: toggleStarsInItems(old.items, messageId, nextStarred),
-					};
-				},
+				patchItemsData,
+			);
+			queryClient.setQueriesData<ThreadMessagesData>(
+				{ queryKey: unifiedThreadsPrefix },
+				patchItemsData,
 			);
 
 			const patchListData = (old: ThreadsListData | undefined) => {
@@ -141,8 +165,10 @@ export const useToggleStar = ({
 				threadMessagesPrefix,
 				threadsListPrefix,
 				threadsSearchPrefix,
+				unifiedThreadsPrefix,
 				previousThreadMessages,
 				previousThreadsList,
+				previousUnifiedThreads,
 			};
 		},
 		onError: (err, vars, context) => {
@@ -153,6 +179,9 @@ export const useToggleStar = ({
 				for (const entry of context.previousThreadsList) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
+				for (const entry of context.previousUnifiedThreads) {
+					queryClient.setQueryData(entry.queryKey, entry.data);
+				}
 			}
 			const nextStarred = vars.body.isStarred ?? false;
 			pushError({
@@ -167,6 +196,7 @@ export const useToggleStar = ({
 			queryClient.invalidateQueries({ queryKey: context.threadMessagesPrefix });
 			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
 			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			queryClient.invalidateQueries({ queryKey: context.unifiedThreadsPrefix });
 		},
 	});
 

package/src/lib/brief.test.ts

@@ -1,13 +1,41 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import type { ThreadRowData } from "@remit/ui";
 import {
 	groupBriefSections,
 	matchesBriefSearch,
 	matchesSearchTokens,
+	toThreadRowData,
 } from "./brief.js";
 import type { SearchToken } from "./search-tokens.js";
 
+function threadResponse(
+	overrides: Partial<RemitImapThreadMessageResponse> = {},
+): RemitImapThreadMessageResponse {
+	return {
+		threadId: "t1",
+		threadMessageId: "tm1",
+		messageId: "m1",
+		accountConfigId: "cfg_1",
+		mailboxId: "mb1",
+		fromName: "Sender",
+		fromEmail: "sender@example.com",
+		subject: "Subject",
+		snippet: "Snippet",
+		sentDate: 1767225600,
+		isRead: false,
+		isDeleted: false,
+		hasAttachment: false,
+		hasStars: false,
+		star: "none",
+		senderTrust: "unknown",
+		createdAt: 0,
+		updatedAt: 0,
+		...overrides,
+	};
+}
+
 function row(
 	overrides: Partial<ThreadRowData> & Pick<ThreadRowData, "id">,
 ): ThreadRowData {
@@ -25,6 +53,32 @@ function row(
 	};
 }
 
+describe("toThreadRowData", () => {
+	// `star` is a colour, and it defaults to the "none" sentinel — starring a
+	// message only flips `hasStars`. Reading the colour to decide starredness
+	// made every row unstarred and left the Starred mailbox permanently empty.
+	test("a message with hasStars and the default star colour is starred", () => {
+		const row = toThreadRowData(
+			threadResponse({ hasStars: true, star: "none" }),
+		);
+		assert.strictEqual(row.starred, true);
+	});
+
+	test("a message with a star colour is starred", () => {
+		const row = toThreadRowData(
+			threadResponse({ hasStars: true, star: "yellow" }),
+		);
+		assert.strictEqual(row.starred, true);
+	});
+
+	test("a message without hasStars is not starred", () => {
+		const row = toThreadRowData(
+			threadResponse({ hasStars: false, star: "yellow" }),
+		);
+		assert.strictEqual(row.starred, false);
+	});
+});
+
 describe("groupBriefSections", () => {
 	test("returns empty array when no rows", () => {
 		const sections = groupBriefSections([]);

package/src/lib/brief.ts

@@ -57,8 +57,7 @@ export function toThreadRowData(
 		sentDate: thread.sentDate,
 		isRead: thread.isRead,
 		hasAttachment: thread.hasAttachment,
-		starred:
-			thread.star != null && thread.star !== "none" && thread.hasStars === true,
+		starred: thread.hasStars === true,
 		trust: thread.senderTrust as SenderTrustLevel,
 		category: toDisplayCategory(thread.category),
 		suspicious,

package/src/lib/keymap.ts

@@ -130,7 +130,7 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 			{ action: "goBrief", keys: ["g", "b"], description: "Daily brief" },
 			{ action: "goInbox", keys: ["g", "i"], description: "Inbox" },
 			{ action: "goSent", keys: ["g", "s"], description: "Sent" },
-			{ action: "goFlagged", keys: ["g", "f"], description: "Flagged" },
+			{ action: "goFlagged", keys: ["g", "f"], description: "Starred" },
 			{ action: "goSettings", keys: ["g", ","], description: "Settings" },
 		],
 	},

package/src/routes/mail/flagged.tsx

@@ -15,7 +15,7 @@ import { ErrorState } from "@/components/ui/ErrorState";
 const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
 		<ErrorState
-			title="Couldn't load your flagged mail"
+			title="Couldn't load your starred mail"
 			error={error}
 			onRetry={reset}
 		/>