@remit/web-client 0.0.76 → 0.0.77

package/package.json

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

@@ -0,0 +1,61 @@
+import {
+	isLabelColorValue,
+	labelDotClass,
+	PopoverMenu,
+	type PopoverMenuItem,
+} from "@remit/ui";
+import { Tag } from "lucide-react";
+import { useMemo } from "react";
+import { useApplyLabel } from "@/hooks/useApplyLabel";
+import { useLabelList } from "@/hooks/useLabels";
+
+interface LabelApplyTriggerProps {
+	accountId: string;
+	mailboxId: string;
+	messageIds: string[];
+}
+
+/**
+ * "Apply label" for a selection — the manual "just these" scope (issue #26,
+ * RFC 034 recap). A kebab-style menu of the account's labels; picking one
+ * applies it to every selected message. Renders nothing when the account has
+ * no labels yet — an empty menu offering only "create one in Settings" is
+ * dead weight in the toolbar; Settings › Labels is where creation lives.
+ */
+export function LabelApplyTrigger({
+	accountId,
+	mailboxId,
+	messageIds,
+}: LabelApplyTriggerProps) {
+	const { labels } = useLabelList(accountId);
+	const { applyLabel } = useApplyLabel({ accountId, mailboxId });
+
+	const items = useMemo<PopoverMenuItem[]>(
+		() =>
+			labels.map((label) => ({
+				key: label.labelId,
+				label: label.name,
+				icon: (
+					<span
+						className={`size-2.5 rounded-full ${
+							isLabelColorValue(label.color)
+								? labelDotClass[label.color]
+								: labelDotClass.Default
+						}`}
+					/>
+				),
+				onSelect: () => applyLabel(messageIds, label.labelId, "Apply"),
+			})),
+		[labels, messageIds, applyLabel],
+	);
+
+	if (items.length === 0) return null;
+
+	return (
+		<PopoverMenu
+			triggerLabel="Apply label to selected messages"
+			triggerIcon={<Tag className="size-4" />}
+			items={items}
+		/>
+	);
+}

package/src/components/mail/MessageList.tsx

@@ -1332,6 +1332,7 @@ export const MessageList = ({
 				isMoving={isMoving}
 				accountId={accountId}
 				currentMailboxId={mailboxId}
+				selectedMessageIds={Array.from(selectedIds)}
 				moveDisabledHint={moveDisabledHint}
 				selectAll={escalationEnabled ? selectionSelectAll : undefined}
 				statusLabel={selectionStatusLabel}

package/src/components/mail/MessageListItem.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { threadToRowData } from "./MessageListItem";
+
+const baseThread = (
+	overrides: Partial<RemitImapThreadMessageResponse> = {},
+): RemitImapThreadMessageResponse =>
+	({
+		threadMessageId: "tm-1",
+		threadId: "th-1",
+		messageId: "msg-1",
+		accountConfigId: "acc-1",
+		mailboxId: "mbx-1",
+		sentDate: 0,
+		isRead: true,
+		hasAttachment: false,
+		hasStars: false,
+		star: "None",
+		isDeleted: false,
+		senderTrust: "unknown",
+		createdAt: 0,
+		updatedAt: 0,
+		...overrides,
+	}) as RemitImapThreadMessageResponse;
+
+describe("threadToRowData — labels", () => {
+	it("carries the message's applied labels through to the row (issue #26)", () => {
+		const row = threadToRowData(
+			baseThread({
+				labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }],
+			}),
+		);
+		assert.deepEqual(row.labels, [
+			{ labelId: "l1", name: "Receipts", color: "Blue" },
+		]);
+	});
+
+	it("carries no labels when the message has none", () => {
+		const row = threadToRowData(baseThread());
+		assert.equal(row.labels, undefined);
+	});
+});

package/src/components/mail/MessageListItem.tsx

@@ -60,6 +60,7 @@ export const threadToRowData = (
 	// for the multi-signature / alignment semantics a single string compare
 	// misses.
 	suspicious: thread.authenticity?.dkimMismatch === true,
+	labels: thread.labels,
 });
 
 const MessageListItemComponent = ({

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

@@ -7,6 +7,7 @@
 
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
+import { labelOperationsListLabelsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { createElement } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { SelectionToolbar } from "./SelectionToolbar";
@@ -20,8 +21,19 @@ afterEach(() => {
 
 type ToolbarProps = Parameters<typeof SelectionToolbar>[0];
 
-const mount = (props: Partial<ToolbarProps> = {}): DomHarness => {
+const mount = (
+	props: Partial<ToolbarProps> = {},
+	options: { labels?: { labelId: string; name: string; color: string }[] } = {},
+): DomHarness => {
 	harness = createDomHarness();
+	if (props.accountId) {
+		harness.queryClient.setQueryData(
+			labelOperationsListLabelsQueryKey({
+				path: { accountId: props.accountId },
+			}),
+			{ items: options.labels ?? [] },
+		);
+	}
 	harness.renderApp(
 		createElement(SelectionToolbar, {
 			selectedCount: 2,
@@ -62,6 +74,44 @@ describe("SelectionToolbar", () => {
 		assert.ok(dom.query('[aria-label="Organize similar messages"]'));
 	});
 
+	it("hides the label trigger without a materialized selection (issue #26)", () => {
+		const dom = mount({
+			accountId: "acc-1",
+			currentMailboxId: "mbx-inbox",
+		});
+		assert.equal(
+			dom.query('[aria-label="Apply label to selected messages"]'),
+			null,
+		);
+	});
+
+	it("hides the label trigger when the account has no labels yet", () => {
+		const dom = mount(
+			{
+				accountId: "acc-1",
+				currentMailboxId: "mbx-inbox",
+				selectedMessageIds: ["m1", "m2"],
+			},
+			{ labels: [] },
+		);
+		assert.equal(
+			dom.query('[aria-label="Apply label to selected messages"]'),
+			null,
+		);
+	});
+
+	it("offers the label trigger once a selection, account, and mailbox are all known", () => {
+		const dom = mount(
+			{
+				accountId: "acc-1",
+				currentMailboxId: "mbx-inbox",
+				selectedMessageIds: ["m1", "m2"],
+			},
+			{ labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }] },
+		);
+		assert.ok(dom.query('[aria-label="Apply label to selected messages"]'));
+	});
+
 	it("withdraws Organize and explains why when the selection spans accounts", () => {
 		const dom = mount({
 			onMove: () => undefined,

package/src/components/mail/SelectionToolbar.stories.tsx

@@ -15,6 +15,11 @@ import { SelectionToolbar } from "./SelectionToolbar";
  * its visual is covered by the kit `SelectionTopBar` stories' move slot. The
  * escalated stories below still assert verb parity through the mark-read and
  * delete verbs remaining available over the predicate.
+ *
+ * The apply-label verb (issue #26) needs the same account-scoped query
+ * (`LabelApplyTrigger` lists the account's labels), so it is withheld here for
+ * the identical reason and omitted from `args` — none of these stories pass
+ * `selectedMessageIds`, which keeps the trigger from rendering.
  */
 const meta: Meta<typeof SelectionToolbar> = {
 	title: "Screens/WebClient/SelectionToolbar",

package/src/components/mail/SelectionToolbar.tsx

@@ -1,6 +1,7 @@
 import { Banner, type BannerTone, Checkbox, ProgressBar } from "@remit/ui";
 import { Loader2, MailOpen, Sparkles, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 export interface SelectionToolbarNotice {
@@ -34,6 +35,12 @@ interface SelectionToolbarProps {
 	 */
 	accountId?: string;
 	currentMailboxId?: string;
+	/**
+	 * The materialized selection, for the apply-label action (issue #26). Only
+	 * `Apply` is offered from here — "just these" — never `appliedByFilterId`.
+	 * Absent (or accountId/currentMailboxId absent) hides the label trigger.
+	 */
+	selectedMessageIds?: string[];
 	/**
 	 * When the user's selection spans multiple accounts the toolbar
 	 * disables Move and surfaces this hint inline next to the button.
@@ -89,6 +96,7 @@ export const SelectionToolbar = ({
 	isMoving = false,
 	accountId,
 	currentMailboxId,
+	selectedMessageIds,
 	moveDisabledHint,
 	selectAll,
 	statusLabel,
@@ -107,6 +115,8 @@ export const SelectionToolbar = ({
 	const showVerbs = !isRunning && !isCounting;
 
 	const canShowMove = !!onMove && !!accountId && !!currentMailboxId;
+	const canShowLabel =
+		!!accountId && !!currentMailboxId && !!selectedMessageIds?.length;
 	// Organize has no escalated-predicate path — it acts on the materialized
 	// selection — so it's withdrawn the moment the selection escalates or a run
 	// takes over (any state that names itself through `statusLabel`).
@@ -194,6 +204,17 @@ export const SelectionToolbar = ({
 								label="Move selected messages"
 							/>
 						)}
+					{showVerbs &&
+						canShowLabel &&
+						accountId &&
+						currentMailboxId &&
+						selectedMessageIds && (
+							<LabelApplyTrigger
+								accountId={accountId}
+								mailboxId={currentMailboxId}
+								messageIds={selectedMessageIds}
+							/>
+						)}
 					{showVerbs && (
 						<button
 							type="button"

package/src/components/mail/organize/OrganizeRuleEditor.tsx

@@ -3,12 +3,14 @@ import {
 	type FilterRule,
 	FilterRuleEditor,
 	type FolderOption,
+	type LabelOption,
 	type RuleScope,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useCreateFilter } from "@/hooks/useFilters";
+import { useCreateLabel, useLabelList } from "@/hooks/useLabels";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
 import { useRuleEditorState } from "@/hooks/useRuleEditorState";
 import { useRulePreview } from "@/hooks/useRulePreview";
@@ -104,6 +106,22 @@ export function OrganizeRuleEditor({
 		[mailboxesData?.items],
 	);
 
+	const { labels: labelItems } = useLabelList(accountId);
+	const labels: LabelOption[] = useMemo(
+		() =>
+			labelItems.map((label) => ({
+				id: label.labelId,
+				name: label.name,
+				color: label.color,
+			})),
+		[labelItems],
+	);
+	const { createLabel } = useCreateLabel(accountId);
+	const onCreateLabel = async (name: string): Promise<LabelOption> => {
+		const label = await createLabel(name);
+		return { id: label.labelId, name: label.name, color: label.color };
+	};
+
 	const preview = useRulePreview(
 		accountId,
 		rulePredicate(rule, anchorMessageId),
@@ -198,11 +216,13 @@ export function OrganizeRuleEditor({
 		<FilterRuleEditor
 			rule={rule}
 			folders={folders}
+			labels={labels}
 			preview={preview}
 			semanticAvailable={!semanticUnavailable}
 			clauseFields={SUPPORTED_CLAUSE_FIELDS}
 			{...handlers}
 			onCreateFolder={createFolder}
+			onCreateLabel={onCreateLabel}
 			onCommit={commit}
 			onCancel={onClose}
 		/>

package/src/components/settings/FilterEditor.render.test.ts

@@ -125,6 +125,7 @@ const mount = (
 			accountId: ACCOUNT_ID,
 			filter,
 			folders: FOLDERS,
+			labels: [],
 			semanticUnavailable,
 			onClose: () => undefined,
 		}),

package/src/components/settings/FilterEditor.tsx

@@ -6,6 +6,7 @@ import {
 	type FilterRule,
 	FilterRuleEditor,
 	type FolderOption,
+	type LabelOption,
 	type MatchOperator,
 	previewCountSummary,
 	type RuleScope,
@@ -13,6 +14,7 @@ import {
 import { CheckCircle2, Loader2 } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { useCreateLabel } from "@/hooks/useLabels";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
 import { useRulePreview } from "@/hooks/useRulePreview";
 import { useUpdateFilter } from "@/hooks/useUpdateFilter";
@@ -33,6 +35,7 @@ interface FilterEditorProps {
 	accountId: string;
 	filter: RemitImapFilterResponse;
 	folders: FolderOption[];
+	labels: LabelOption[];
 	/**
 	 * This deployment ships no vector pipeline, so a semantic anchor cannot be
 	 * evaluated (RFC 038 D4). The filter's widen chip lists inactive and the rule
@@ -58,6 +61,7 @@ export function FilterEditor({
 	accountId,
 	filter,
 	folders,
+	labels,
 	semanticUnavailable = false,
 	onClose,
 }: FilterEditorProps) {
@@ -74,6 +78,11 @@ export function FilterEditor({
 	const update = useUpdateFilter(accountId, filter.filterId);
 	const organizeJob = useOrganizeJob(accountId);
 	const { createFolder } = useCreateMailbox(accountId);
+	const { createLabel } = useCreateLabel(accountId);
+	const onCreateLabel = async (name: string): Promise<LabelOption> => {
+		const label = await createLabel(name);
+		return { id: label.labelId, name: label.name, color: label.color };
+	};
 
 	const startAddClause = () =>
 		setClauseEdit({
@@ -144,6 +153,12 @@ export function FilterEditor({
 			moveMailboxId: mailboxId || undefined,
 		}));
 
+	const changeLabel = (labelId: string) =>
+		setRule((current) => ({
+			...current,
+			labelId: labelId || undefined,
+		}));
+
 	const changeName = (name: string) =>
 		setRule((current) => ({ ...current, name }));
 
@@ -204,6 +219,7 @@ export function FilterEditor({
 		<FilterRuleEditor
 			rule={rule}
 			folders={folders}
+			labels={labels}
 			preview={preview}
 			// The update endpoint carries no anchor field at all (reader #266), so a
 			// widen can be neither added nor removed here: the "…and similar" add is
@@ -225,6 +241,8 @@ export function FilterEditor({
 			onChangeMatchOperator={changeMatchOperator}
 			onChangeMove={changeMove}
 			onCreateFolder={createFolder}
+			onChangeLabel={changeLabel}
+			onCreateLabel={onCreateLabel}
 			onChangeName={changeName}
 			onChangeScope={changeScope}
 			onChangeUntil={changeUntil}

package/src/components/settings/FilterEditorSurface.tsx

@@ -1,5 +1,10 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { BottomSheet, Dialog, type FolderOption } from "@remit/ui";
+import {
+	BottomSheet,
+	Dialog,
+	type FolderOption,
+	type LabelOption,
+} from "@remit/ui";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { FilterEditor } from "./FilterEditor";
 
@@ -7,6 +12,7 @@ interface FilterEditorSurfaceProps {
 	accountId: string;
 	filter: RemitImapFilterResponse;
 	folders: FolderOption[];
+	labels: LabelOption[];
 	semanticUnavailable?: boolean;
 	onClose: () => void;
 }
@@ -21,6 +27,7 @@ export function FilterEditorSurface({
 	accountId,
 	filter,
 	folders,
+	labels,
 	semanticUnavailable,
 	onClose,
 }: FilterEditorSurfaceProps) {
@@ -31,6 +38,7 @@ export function FilterEditorSurface({
 			accountId={accountId}
 			filter={filter}
 			folders={folders}
+			labels={labels}
 			semanticUnavailable={semanticUnavailable}
 			onClose={onClose}
 		/>

package/src/components/settings/FiltersList.render.test.ts

@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import type { LabelOption } from "@remit/ui";
 import React, { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import { FiltersList } from "./FiltersList";
@@ -34,11 +35,13 @@ const filter = (
 const render = (
 	filters: RemitImapFilterResponse[],
 	semanticUnavailable = false,
+	labelById: Map<string, LabelOption> = new Map(),
 ) =>
 	renderToString(
 		createElement(FiltersList, {
 			filters,
 			mailboxName: (id: string) => (id === "mbx-travel" ? "Travel" : undefined),
+			labelById,
 			onEdit: () => undefined,
 			onDelete: () => undefined,
 			semanticUnavailable,
@@ -80,6 +83,19 @@ describe("FiltersList", () => {
 		assert.doesNotMatch(html, /similar/i);
 	});
 
+	it("shows the applied label's chip when the filter has a label action (issue #26)", () => {
+		const labelById = new Map<string, LabelOption>([
+			["lbl-1", { id: "lbl-1", name: "Receipts", color: "Blue" }],
+		]);
+		const html = render([filter({ actionLabelId: "lbl-1" })], false, labelById);
+		assert.match(html, /Receipts/);
+	});
+
+	it("shows no label chip when the filter has no label action", () => {
+		const html = render([filter({ actionLabelId: "None" })]);
+		assert.doesNotMatch(html, /bg-blue-500|bg-red-500|bg-green-500/);
+	});
+
 	it("keeps an expired temporary filter visible and marks it Expired (RFC 034 Decision 1.2)", () => {
 		const html = render([
 			filter({

package/src/components/settings/FiltersList.tsx

@@ -1,5 +1,11 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { Badge, Button, WidenChip } from "@remit/ui";
+import {
+	Badge,
+	Button,
+	LabelChip,
+	type LabelOption,
+	WidenChip,
+} from "@remit/ui";
 import { Trash2 } from "lucide-react";
 import {
 	filterDisplayStatus,
@@ -11,6 +17,8 @@ interface FiltersListProps {
 	filters: RemitImapFilterResponse[];
 	/** Resolve a destination mailbox id to a folder name for display. */
 	mailboxName: (mailboxId: string) => string | undefined;
+	/** Resolve a label id to its name/color for the applied-label chip (issue #26). */
+	labelById: Map<string, LabelOption>;
 	/** Open the row's rule in the editor (RFC 038 D6). */
 	onEdit: (filterId: string) => void;
 	onDelete: (filterId: string) => void;
@@ -35,6 +43,7 @@ interface FiltersListProps {
 export function FiltersList({
 	filters,
 	mailboxName,
+	labelById,
 	onEdit,
 	onDelete,
 	deletingFilterId,
@@ -59,6 +68,10 @@ export function FiltersList({
 					filter.actionMailboxId !== NO_ACTION
 						? mailboxName(filter.actionMailboxId)
 						: undefined;
+				const label =
+					filter.actionLabelId !== NO_ACTION
+						? labelById.get(filter.actionLabelId)
+						: undefined;
 				const expiresLabel = formatExpiresAt(filter.expiresAt);
 
 				return (
@@ -94,14 +107,25 @@ export function FiltersList({
 										? " · always"
 										: ""}
 							</p>
-							{filter.hasAnchor && (
+							{(filter.hasAnchor || label) && (
 								<div className="mt-1.5 flex flex-wrap gap-1.5">
-									<WidenChip
-										widen={{
-											anchorCount: 1,
-											...(semanticUnavailable ? { inactive: true } : {}),
-										}}
-									/>
+									{filter.hasAnchor && (
+										<WidenChip
+											widen={{
+												anchorCount: 1,
+												...(semanticUnavailable ? { inactive: true } : {}),
+											}}
+										/>
+									)}
+									{label && (
+										<LabelChip
+											label={{
+												labelId: label.id,
+												name: label.name,
+												color: label.color,
+											}}
+										/>
+									)}
 								</div>
 							)}
 						</button>

package/src/components/settings/LabelsList.tsx

@@ -0,0 +1,112 @@
+import type { RemitImapLabelResponse } from "@remit/api-http-client/types.gen.ts";
+import { Button, Input, LabelChip, labelColorOptions, Select } from "@remit/ui";
+import { Trash2 } from "lucide-react";
+import { useState } from "react";
+
+interface LabelsListProps {
+	labels: RemitImapLabelResponse[];
+	onRename: (labelId: string, name: string) => void;
+	onRecolor: (labelId: string, color: string) => void;
+	onDelete: (label: RemitImapLabelResponse) => void;
+	deletingLabelId?: string;
+}
+
+/**
+ * The account's labels, each renamable and recolorable inline and deletable
+ * with the cascade-confirming dialog the caller opens (issue #26). Mirrors
+ * `FiltersList`'s row shape: a name, a color chip, and a destructive action.
+ */
+export function LabelsList({
+	labels,
+	onRename,
+	onRecolor,
+	onDelete,
+	deletingLabelId,
+}: LabelsListProps) {
+	const [editingId, setEditingId] = useState<string>();
+	const [draftName, setDraftName] = useState("");
+
+	if (labels.length === 0) {
+		return (
+			<p className="py-6 text-sm text-fg-muted">
+				No labels yet. Create one below, then use it in a filter or apply it to
+				mail directly.
+			</p>
+		);
+	}
+
+	const commitRename = (labelId: string) => {
+		const trimmed = draftName.trim();
+		if (trimmed !== "") onRename(labelId, trimmed);
+		setEditingId(undefined);
+	};
+
+	return (
+		<ul className="divide-y divide-line rounded-md border border-line">
+			{labels.map((label) => (
+				<li key={label.labelId} className="flex items-center gap-3 px-3 py-2.5">
+					<div className="min-w-0 flex-1">
+						{editingId === label.labelId ? (
+							<Input
+								autoFocus
+								value={draftName}
+								onChange={(event) => setDraftName(event.target.value)}
+								onBlur={() => commitRename(label.labelId)}
+								onKeyDown={(event) => {
+									if (event.key === "Enter") {
+										event.preventDefault();
+										commitRename(label.labelId);
+									}
+									if (event.key === "Escape") {
+										event.preventDefault();
+										setEditingId(undefined);
+									}
+								}}
+								aria-label={`Rename label ${label.name}`}
+							/>
+						) : (
+							<button
+								type="button"
+								onClick={() => {
+									setEditingId(label.labelId);
+									setDraftName(label.name);
+								}}
+								aria-label={`Rename label ${label.name}`}
+								className="flex items-center gap-2 rounded-sm text-left hover:opacity-80"
+							>
+								<LabelChip label={label} />
+							</button>
+						)}
+						<p className="mt-0.5 text-xs text-fg-subtle">
+							{label.filterCount === 0
+								? "Not used in any filter"
+								: `Used in ${label.filterCount} ${
+										label.filterCount === 1 ? "filter" : "filters"
+									}`}
+						</p>
+					</div>
+					<Select
+						aria-label={`Color for ${label.name}`}
+						value={label.color}
+						onChange={(event) => onRecolor(label.labelId, event.target.value)}
+						className="w-28 shrink-0"
+					>
+						{labelColorOptions.map((color) => (
+							<option key={color} value={color}>
+								{color}
+							</option>
+						))}
+					</Select>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Trash2 className="size-4 text-danger" />}
+						onClick={() => onDelete(label)}
+						disabled={deletingLabelId === label.labelId}
+						aria-label={`Delete label ${label.name}`}
+					/>
+				</li>
+			))}
+		</ul>
+	);
+}