@remit/web-client 0.0.79 → 0.0.81

package/package.json

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

@@ -41,6 +41,7 @@ import { useSemanticSearch } from "@/hooks/useSemanticSearch";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { sortAccountsByCreatedAt } from "@/lib/account-order";
 import {
+	excludeMutedSenders,
 	groupBriefSections,
 	matchesBriefSearch,
 	matchesSearchTokens,
@@ -275,12 +276,14 @@ export function DailyBrief({
 	// `BriefSections` filter row's job, so the full per-category sections are
 	// handed to it; it groups, narrows, and flattens.
 	const filteredRows = useMemo<ThreadRowData[]>(() => {
-		const briefRows = (threadsData?.items ?? []).map(toThreadRowData);
+		const briefRows = excludeMutedSenders(threadsData?.items ?? []).map(
+			toThreadRowData,
+		);
 		// No free text: the brief list as it comes, order untouched.
 		const rows = sq
 			? mergeSearchRows(
 					briefRows.filter((t) => matchesBriefSearch(t, sq)),
-					(searchData?.items ?? []).map(toThreadRowData),
+					excludeMutedSenders(searchData?.items ?? []).map(toThreadRowData),
 				)
 			: briefRows;
 		return rows.filter(

package/src/components/settings/LabelsList.stories.tsx

@@ -0,0 +1,134 @@
+import type { RemitImapLabelResponse } from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LabelsList } from "./LabelsList";
+
+const meta: Meta<typeof LabelsList> = {
+	title: "Flows/Settings Labels/LabelsList",
+	component: LabelsList,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="mx-auto max-w-md">
+				<Story />
+			</div>
+		),
+	],
+	args: {
+		onRename: () => undefined,
+		onRecolor: () => undefined,
+		onDelete: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof LabelsList>;
+
+const makeLabel = (
+	overrides: Partial<RemitImapLabelResponse>,
+): RemitImapLabelResponse => ({
+	labelId: "lbl-1",
+	accountConfigId: "acc-1",
+	name: "Receipts",
+	color: "Blue",
+	createdAt: 0,
+	updatedAt: 0,
+	filterCount: 0,
+	...overrides,
+});
+
+const fewLabels: RemitImapLabelResponse[] = [
+	makeLabel({
+		labelId: "lbl-1",
+		name: "Receipts",
+		color: "Blue",
+		filterCount: 0,
+	}),
+	makeLabel({
+		labelId: "lbl-2",
+		name: "Travel",
+		color: "Green",
+		filterCount: 1,
+	}),
+	makeLabel({ labelId: "lbl-3", name: "Urgent", color: "Red", filterCount: 3 }),
+];
+
+const manyLabels: RemitImapLabelResponse[] = [
+	...fewLabels,
+	makeLabel({
+		labelId: "lbl-4",
+		name: "Newsletters",
+		color: "Yellow",
+		filterCount: 2,
+	}),
+	makeLabel({
+		labelId: "lbl-5",
+		name: "Work",
+		color: "Purple",
+		filterCount: 0,
+	}),
+	makeLabel({
+		labelId: "lbl-6",
+		name: "Family",
+		color: "Teal",
+		filterCount: 0,
+	}),
+	makeLabel({
+		labelId: "lbl-7",
+		name: "Finance",
+		color: "Orange",
+		filterCount: 4,
+	}),
+	makeLabel({
+		labelId: "lbl-8",
+		name: "Recruiting",
+		color: "Gray",
+		filterCount: 1,
+	}),
+	makeLabel({
+		labelId: "lbl-9",
+		name: "Quarterly compliance filings that need a second look",
+		color: "Default",
+		filterCount: 1,
+	}),
+];
+
+/** No labels yet — the empty-state copy points at the create form below. */
+export const Empty: Story = {
+	args: { labels: [] },
+};
+
+/** A few labels, each showing its filter-usage line. */
+export const Few: Story = {
+	args: { labels: fewLabels },
+};
+
+/** The same few labels, on the dark theme. */
+export const FewDark: Story = {
+	name: "Few (dark)",
+	parameters: { theme: "dark" },
+	args: { labels: fewLabels },
+};
+
+/** Many labels, including one with a long name that truncates in its chip. */
+export const Many: Story = {
+	args: { labels: manyLabels },
+};
+
+/**
+ * Renaming inline: clicking a label's chip swaps it for a focused text input.
+ * Driven here rather than passed as a prop — `editingId` is internal state.
+ */
+export const Renaming: Story = {
+	args: { labels: fewLabels },
+	play: async ({ canvasElement }) => {
+		const renameButton = canvasElement.querySelector<HTMLButtonElement>(
+			'button[aria-label="Rename label Receipts"]',
+		);
+		renameButton?.click();
+	},
+};
+
+/** A delete in flight — the row's delete button disables. */
+export const Deleting: Story = {
+	args: { labels: fewLabels, deletingLabelId: "lbl-2" },
+};

package/src/components/settings/label-delete-confirm.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+import { deleteLabelConfirmCopy } from "@/lib/organize/label-delete-copy";
+
+/**
+ * The cascade-aware label delete confirmation (issue #26, #335) — the generic
+ * `ConfirmDialog` driven by `deleteLabelConfirmCopy`'s computed title and
+ * description, exactly as `AccountLabels` in the labels settings route wires
+ * it. No dedicated component exists for this; reusing `ConfirmDialog` is the
+ * approved surface, not a placeholder for one.
+ */
+const meta: Meta<typeof ConfirmDialog> = {
+	title: "Flows/Settings Labels/Delete Confirmation",
+	component: ConfirmDialog,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+/** Nothing references the label — no blast-radius line under the title. */
+export const Unused: Story = {
+	args: {
+		isOpen: true,
+		...deleteLabelConfirmCopy("Receipts", 0),
+		confirmLabel: "Delete label",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+
+/** Exactly one filter applies the label — singular wording. */
+export const OneFilter: Story = {
+	args: {
+		isOpen: true,
+		...deleteLabelConfirmCopy("Receipts", 1),
+		confirmLabel: "Delete label",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+
+/** Several filters apply the label — the cascade warning names the count. */
+export const SeveralFilters: Story = {
+	args: {
+		isOpen: true,
+		...deleteLabelConfirmCopy("Receipts", 5),
+		confirmLabel: "Delete label",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+
+/** Several filters, on the dark theme. */
+export const SeveralFiltersDark: Story = {
+	name: "Several Filters (dark)",
+	parameters: { theme: "dark" },
+	args: {
+		isOpen: true,
+		...deleteLabelConfirmCopy("Receipts", 5),
+		confirmLabel: "Delete label",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+
+/** The delete is in flight — confirm disables rather than allowing a second
+ *  concurrent delete. */
+export const Busy: Story = {
+	args: {
+		isOpen: true,
+		...deleteLabelConfirmCopy("Receipts", 5),
+		confirmLabel: "Delete label",
+		destructive: true,
+		isBusy: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};

package/src/hooks/useToggleStar.test.ts

@@ -28,6 +28,7 @@ const make = (
 	hasAttachment: false,
 	star: "none",
 	hasStars,
+	muted: false,
 	createdAt: 0,
 	updatedAt: 0,
 });

package/src/lib/brief.test.ts

@@ -3,6 +3,7 @@ import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import type { ThreadRowData } from "@remit/ui";
 import {
+	excludeMutedSenders,
 	groupBriefSections,
 	matchesBriefSearch,
 	matchesSearchTokens,
@@ -32,6 +33,7 @@ function threadResponse(
 		hasStars: false,
 		star: "none",
 		senderTrust: "unknown",
+		muted: false,
 		createdAt: 0,
 		updatedAt: 0,
 		...overrides,
@@ -265,6 +267,81 @@ describe("groupBriefSections", () => {
 	});
 });
 
+// issue #301: `Address.flags.muted` is denormalized onto each row as
+// `muted`; the brief excludes those rows before grouping into sections.
+describe("excludeMutedSenders", () => {
+	test("drops a row whose sender is muted", () => {
+		const kept = threadResponse({ threadMessageId: "keep" });
+		const muted = threadResponse({ threadMessageId: "mute-me", muted: true });
+		const result = excludeMutedSenders([kept, muted]);
+		assert.deepStrictEqual(
+			result.map((t) => t.threadMessageId),
+			["keep"],
+		);
+	});
+
+	test("keeps rows whose sender is not muted", () => {
+		const rows = [
+			threadResponse({ threadMessageId: "a", muted: false }),
+			threadResponse({ threadMessageId: "b" }),
+		];
+		assert.strictEqual(excludeMutedSenders(rows).length, 2);
+	});
+
+	test("returns an empty array when every sender is muted", () => {
+		const rows = [
+			threadResponse({ threadMessageId: "a", muted: true }),
+			threadResponse({ threadMessageId: "b", muted: true }),
+		];
+		assert.deepStrictEqual(excludeMutedSenders(rows), []);
+	});
+
+	test("a muted sender's message is excluded from every section, not folded into uncategorized", () => {
+		const rows = [
+			threadResponse({
+				threadMessageId: "muted-personal",
+				messageId: "muted-personal",
+				category: "personal",
+				muted: true,
+			}),
+			threadResponse({
+				threadMessageId: "kept-personal",
+				messageId: "kept-personal",
+				category: "personal",
+			}),
+		];
+		const sections = groupBriefSections(
+			excludeMutedSenders(rows).map(toThreadRowData),
+		);
+		const allIds = sections.flatMap((s) => s.threads.map((t) => t.id));
+		assert.deepStrictEqual(allIds, ["kept-personal"]);
+		for (const section of sections) {
+			assert.ok(!section.threads.some((t) => t.id === "muted-personal"));
+		}
+	});
+
+	test("muting every candidate row leaves no sections (brief empty state)", () => {
+		const rows = [
+			threadResponse({
+				threadMessageId: "a",
+				messageId: "a",
+				category: "personal",
+				muted: true,
+			}),
+			threadResponse({
+				threadMessageId: "b",
+				messageId: "b",
+				category: "newsletter",
+				muted: true,
+			}),
+		];
+		const sections = groupBriefSections(
+			excludeMutedSenders(rows).map(toThreadRowData),
+		);
+		assert.deepStrictEqual(sections, []);
+	});
+});
+
 describe("matchesBriefSearch", () => {
 	const r = row({
 		id: "1",

package/src/lib/brief.ts

@@ -24,7 +24,11 @@
  * a high-volume mailbox read≠handled and unread≠important; unread is a
  * user-selectable filter chip instead.
  *
- * Muted senders (filtered by the caller) and empty sections are excluded.
+ * Muted senders and empty sections are excluded. Mute filtering happens in
+ * `excludeMutedSenders`, applied by the caller to the raw thread rows before
+ * `toThreadRowData`/grouping — the server denormalizes `muted` onto each row
+ * from the From address's flags (RFC 039 Decision 3, issue #301), so no
+ * client-side Address lookup is needed.
  */
 
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
@@ -67,6 +71,19 @@ export function toThreadRowData(
 	};
 }
 
+/**
+ * Excludes rows whose From address is muted (`thread.muted === true`,
+ * denormalized server-side from `Address.flags.muted`). Muting hides a
+ * sender from the brief only — it never deletes, marks read, or moves their
+ * mail, so callers outside the brief (mailbox listings, search) must not
+ * apply this filter.
+ */
+export function excludeMutedSenders(
+	threads: RemitImapThreadMessageResponse[],
+): RemitImapThreadMessageResponse[] {
+	return threads.filter((t) => t.muted !== true);
+}
+
 /**
  * Union of the brief's own rows with the rows the server's cross-folder search
  * returned, newest first.

package/src/lib/dedupe-thread-messages.test.ts

@@ -24,6 +24,7 @@ function threadMessage(
 		hasStars: false,
 		star: "none",
 		senderTrust: "unknown",
+		muted: false,
 		createdAt: 0,
 		updatedAt: 0,
 		...overrides,

package/src/test-support/fixtures.ts

@@ -78,6 +78,7 @@ export const makeThreadMessage = (
 	hasStars: false,
 	isDeleted: false,
 	senderTrust: "unknown",
+	muted: false,
 	createdAt: 0,
 	updatedAt: 0,
 	...overrides,