@remit/web-client 0.0.75 → 0.0.77

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>
+	);
+}

package/src/components/settings/settings-filter.stories.tsx

@@ -1,5 +1,5 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { BottomSheet, type FolderOption } from "@remit/ui";
+import { BottomSheet, type FolderOption, type LabelOption } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
@@ -24,6 +24,11 @@ const FOLDERS: FolderOption[] = [
 	{ id: "mbx-travel", label: "Travel" },
 ];
 
+const LABELS: LabelOption[] = [
+	{ id: "lbl-receipts", name: "Receipts", color: "Blue" },
+	{ id: "lbl-travel", name: "Travel", color: "Green" },
+];
+
 const makeFilter = (
 	overrides: Partial<RemitImapFilterResponse> = {},
 ): RemitImapFilterResponse => ({
@@ -104,6 +109,7 @@ export const EditStandingRule: Story = {
 				accountId={ACCOUNT_ID}
 				filter={makeFilter()}
 				folders={FOLDERS}
+				labels={LABELS}
 				onClose={() => undefined}
 			/>
 		</SheetStage>
@@ -119,6 +125,7 @@ export const EditAnchoredRule: Story = {
 				accountId={ACCOUNT_ID}
 				filter={makeFilter({ hasAnchor: true, name: "GitHub" })}
 				folders={FOLDERS}
+				labels={LABELS}
 				onClose={() => undefined}
 			/>
 		</SheetStage>
@@ -138,6 +145,7 @@ export const EditUntilADate: Story = {
 					expiresAt: "2027-09-01T23:59:59+00:00",
 				})}
 				folders={FOLDERS}
+				labels={LABELS}
 				onClose={() => undefined}
 			/>
 		</SheetStage>
@@ -157,6 +165,7 @@ export const DegradedAnchor: Story = {
 				accountId={ACCOUNT_ID}
 				filter={makeFilter({ hasAnchor: true, name: "Newsletters" })}
 				folders={FOLDERS}
+				labels={LABELS}
 				semanticUnavailable
 				onClose={() => undefined}
 			/>

package/src/hooks/useApplyLabel.ts

@@ -0,0 +1,68 @@
+import { messageBulkOperationsUpdateMessageLabelsMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapLabelAction,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { formatErrorDetail } from "@/components/ui/error-banners";
+import { resolveMailboxesForMessages } from "@/hooks/useMarkAsRead";
+import {
+	invalidateThreadListQueries,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
+
+/**
+ * Apply or remove a label on a "just these" selection (issue #26, RFC 034
+ * recap). No optimistic patch: a label is metadata on the row, not something
+ * that removes it from the current view, so settling on the server response
+ * and invalidating is enough — unlike a move or delete, which the row leaves
+ * immediately.
+ */
+export const useApplyLabel = (options: {
+	mailboxId: string;
+	accountId?: string;
+	/** The threads the selection may span, for resolving which mailbox lists to invalidate. */
+	messages?: RemitImapThreadMessageResponse[];
+}) => {
+	const { mailboxId, messages } = options;
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	const { mutate, isPending } = useMutation({
+		...messageBulkOperationsUpdateMessageLabelsMutation(),
+		onError: (error, variables) => {
+			pushError({
+				title:
+					variables.body.action === "Remove"
+						? "Couldn't remove label"
+						: "Couldn't apply label",
+				detail: formatErrorDetail(error),
+				error,
+			});
+		},
+		onSettled: (_data, _error, variables) => {
+			invalidateThreadListQueries(
+				queryClient,
+				threadListCacheKeys(
+					resolveMailboxesForMessages(
+						variables.body.messageIds ?? [],
+						messages ?? [],
+						mailboxId,
+					),
+				),
+			);
+		},
+	});
+
+	const applyLabel = useCallback(
+		(messageIds: string[], labelId: string, action: RemitImapLabelAction) => {
+			if (messageIds.length === 0) return;
+			mutate({ body: { messageIds, labelId, action } });
+		},
+		[mutate],
+	);
+
+	return { applyLabel, isPending };
+};

package/src/hooks/useCreateMailbox.render.test.ts

@@ -1,9 +1,11 @@
 /**
- * useCreateMailbox.createFolder — the shared create seam the kit surfaces call.
- * It validates the typed name against the account's current folders with the
- * same IMAP-aware rules the settings form uses, and rejects with the
- * human-readable reason before any request. The mailbox list is seeded into the
- * query cache the hook reads, so validation runs against real paths.
+ * useCreateMailbox.createFolder — the shared create seam the kit surfaces call
+ * for a dependent write. It validates the typed name against the account's
+ * current folders with the same IMAP-aware rules the settings form uses, rejects
+ * with the human-readable reason before any request, then waits for the mail
+ * server to confirm the folder before resolving — so a filter or a move never
+ * binds to a still-pending row. The mailbox list is seeded into the query cache
+ * the hook reads, so validation runs against real paths.
  */
 
 import assert from "node:assert/strict";
@@ -13,8 +15,10 @@ import type {
 	MailboxOperationsListMailboxesResponse,
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import { MailboxSyncStatus } from "@remit/domain-enums";
 import type { FolderOption } from "@remit/ui";
 import { act, createElement } from "react";
+import { MAILBOX_SYNC_FAILED_MESSAGE } from "../lib/mailbox-sync-wait";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
 import { type HttpMock, mockFetch } from "../test-support/http";
 import { useCreateMailbox } from "./useCreateMailbox";
@@ -23,7 +27,9 @@ const ACCOUNT = "acc-1";
 
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
-let createFolder: ((name: string) => Promise<FolderOption>) | undefined;
+let createFolder:
+	| ((name: string, signal?: AbortSignal) => Promise<FolderOption>)
+	| undefined;
 
 afterEach(() => {
 	harness?.close();
@@ -49,13 +55,23 @@ function Probe() {
 	return null;
 }
 
-const mount = (items: RemitImapMailboxResponse[]) => {
+const mount = (
+	items: RemitImapMailboxResponse[],
+	createdSyncStatus: RemitImapMailboxResponse["syncStatus"] = MailboxSyncStatus.synced,
+) => {
+	const created: RemitImapMailboxResponse[] = [];
 	http = mockFetch((call) => {
 		if (call.method === "POST") {
 			const body = call.body as { fullPath: string };
+			created.push({
+				mailboxId: `mbx-${body.fullPath}`,
+				accountId: ACCOUNT,
+				fullPath: body.fullPath,
+				syncStatus: createdSyncStatus,
+			} as RemitImapMailboxResponse);
 			return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
 		}
-		return { items };
+		return { items: [...items, ...created] };
 	});
 	harness = createDomHarness();
 	harness.queryClient.setQueryData<MailboxOperationsListMailboxesResponse>(
@@ -114,7 +130,7 @@ describe("useCreateMailbox.createFolder validation", () => {
 		assert.equal(postCount(), 0);
 	});
 
-	it("passes a valid name through to the create request and maps the result", async () => {
+	it("passes a valid name through and resolves once the folder is confirmed synced", async () => {
 		mount([mailbox("INBOX", "/")]);
 		let result: FolderOption | undefined;
 		await act(async () => {
@@ -126,6 +142,90 @@ describe("useCreateMailbox.createFolder validation", () => {
 			fullPath: "Taxes",
 			namespaceType: "personal",
 		});
+		// It polled the list after the create to confirm the folder before resolving.
+		const gets = (http?.calls ?? []).filter((call) => call.method === "GET");
+		assert.ok(gets.length >= 1, "polls the mailbox list for confirmation");
 		assert.equal(result?.label, "Taxes");
 	});
+
+	it("rejects — no folder to bind a dependent write to — when the create is reported failed", async () => {
+		mount([mailbox("INBOX", "/")], MailboxSyncStatus.failed);
+		let caught: unknown;
+		await act(async () => {
+			caught = await createFolder?.("Taxes").then(
+				() => undefined,
+				(error: unknown) => error,
+			);
+		});
+		assert.ok(caught instanceof Error);
+		assert.equal(caught.message, MAILBOX_SYNC_FAILED_MESSAGE);
+	});
+
+	it("retry resumes the wait on the folder it already made — no second create, no 'already exists'", async () => {
+		// The created folder is reported failed on the first attempt, then synced.
+		let status: RemitImapMailboxResponse["syncStatus"] =
+			MailboxSyncStatus.failed;
+		const created: RemitImapMailboxResponse[] = [];
+		http = mockFetch((call) => {
+			if (call.method === "POST") {
+				const body = call.body as { fullPath: string };
+				created.push({
+					mailboxId: `mbx-${body.fullPath}`,
+					accountId: ACCOUNT,
+					fullPath: body.fullPath,
+				} as RemitImapMailboxResponse);
+				return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
+			}
+			return {
+				items: [
+					mailbox("INBOX", "/"),
+					...created.map((entry) => ({ ...entry, syncStatus: status })),
+				],
+			};
+		});
+		harness = createDomHarness();
+		harness.queryClient.setQueryData<MailboxOperationsListMailboxesResponse>(
+			mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT } }),
+			{ items: [mailbox("INBOX", "/")] },
+		);
+		harness.renderApp(createElement(Probe));
+
+		let first: unknown;
+		await act(async () => {
+			first = await createFolder?.("Taxes").then(
+				() => undefined,
+				(error: unknown) => error,
+			);
+		});
+		assert.ok(first instanceof Error);
+		assert.equal(first.message, MAILBOX_SYNC_FAILED_MESSAGE);
+
+		// The server confirms; the user presses "Create folder" again, same name.
+		status = MailboxSyncStatus.synced;
+		let result: FolderOption | undefined;
+		await act(async () => {
+			result = await createFolder?.("Taxes");
+		});
+		assert.equal(result?.label, "Taxes");
+
+		// Exactly one create across both attempts — the retry resumed, it did not
+		// re-validate (which would throw "already exists") or re-POST.
+		const posts = (http?.calls ?? []).filter((call) => call.method === "POST");
+		assert.equal(posts.length, 1);
+	});
+
+	it("abort stops the wait so a folder that confirms later never resolves", async () => {
+		mount([mailbox("INBOX", "/")], MailboxSyncStatus.pending);
+		const controller = new AbortController();
+		let caught: unknown;
+		await act(async () => {
+			const promise = createFolder?.("Taxes", controller.signal);
+			controller.abort();
+			caught = await promise?.then(
+				() => undefined,
+				(error: unknown) => error,
+			);
+		});
+		assert.equal((caught as { name?: string })?.name, "AbortError");
+	});
 });

package/src/hooks/useCreateMailbox.ts

@@ -5,21 +5,40 @@ import {
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { FolderOption } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { waitForMailboxSynced } from "@/lib/mailbox-sync-wait";
 import { composeFolderPath, validateNewFolderName } from "@/lib/new-folder";
 
 /**
  * Creates a mailbox for an account and refreshes the folder list on success.
  * The backend creates the row with a pending sync status and queues the IMAP
- * create, so the folder is usable as a move destination immediately.
+ * create.
  *
- * `createFolder` takes a leaf name, validates it against the account's current
- * folders with the same IMAP-aware rules the settings form uses (non-empty, no
- * hierarchy delimiter, no collision — INBOX case-insensitive), and rejects with
- * the human-readable reason before any request. The kit surfaces that pick the
- * result render that rejection inline. `mutation` is exposed for callers that
- * drive their own form state and error surface.
+ * `createFolder` is the seam for dependent writes: a folder created so a filter
+ * can move mail into it, or so a move can land mail there. It takes a leaf name,
+ * validates it against the account's current folders with the same IMAP-aware
+ * rules the settings form uses (non-empty, no hierarchy delimiter, no collision —
+ * INBOX case-insensitive), and rejects with the human-readable reason before any
+ * request. It then WAITS for the mail server to confirm the folder before
+ * resolving — a folder is not a valid target until it exists on the server, and
+ * binding a filter or a move to a still-pending row races the folder into
+ * existence and cannot report a create that fails. It resolves with the confirmed
+ * folder (carrying the path the server normalized to), rejects with a distinct
+ * message when the create fails or never confirms, and the kit surfaces that
+ * render either the "Creating folder…" wait or the failure inline.
+ *
+ * Retry is a resume, not a re-create: a create that timed out or failed leaves
+ * the row already made, so pressing "Create folder" again calls `createFolder`
+ * with the same name — which resumes the wait on the mailboxId it already made
+ * rather than re-validating (the pending row would collide as "already exists")
+ * and re-POSTing. The mailboxId is carried per-name until the folder confirms.
+ *
+ * `createFolder` takes an `AbortSignal` the surface aborts on unmount/cancel/
+ * close, so a folder that confirms after the surface is gone resolves nothing.
+ *
+ * `mutation` is exposed for callers that drive their own form state and want the
+ * optimistic, non-waiting create (the standalone settings create).
  */
 export function useCreateMailbox(accountId: string) {
 	const queryClient = useQueryClient();
@@ -39,26 +58,48 @@ export function useCreateMailbox(accountId: string) {
 		},
 	});
 
+	// fullPath -> mailboxId for a folder created but not yet confirmed, so a retry
+	// resumes the wait on it instead of re-creating. Cleared once it confirms.
+	const pendingByPath = useRef(new Map<string, string>());
+
 	const createFolder = useCallback(
-		async (name: string): Promise<FolderOption> => {
-			const items = data?.items ?? [];
-			const delimiter = items[0]?.hierarchyDelimiter ?? "/";
-			const problem = validateNewFolderName({
-				name,
-				delimiter,
-				existingPaths: items.map((item) => item.fullPath),
-			});
-			if (problem) throw new Error(problem);
-			const mailbox = await mutation.mutateAsync({
-				path: { accountId },
-				body: { fullPath: composeFolderPath(name), namespaceType: "personal" },
+		async (name: string, signal?: AbortSignal): Promise<FolderOption> => {
+			const fullPath = composeFolderPath(name);
+			let mailboxId = pendingByPath.current.get(fullPath);
+			if (!mailboxId) {
+				const items = data?.items ?? [];
+				const delimiter = items[0]?.hierarchyDelimiter ?? "/";
+				const problem = validateNewFolderName({
+					name,
+					delimiter,
+					existingPaths: items.map((item) => item.fullPath),
+				});
+				if (problem) throw new Error(problem);
+				const mailbox = await mutation.mutateAsync({
+					path: { accountId },
+					body: { fullPath, namespaceType: "personal" },
+				});
+				mailboxId = mailbox.mailboxId;
+				pendingByPath.current.set(fullPath, mailboxId);
+			}
+			const confirmed = await waitForMailboxSynced({
+				mailboxId,
+				signal,
+				fetchMailboxes: async () => {
+					const response = await queryClient.fetchQuery({
+						...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+						staleTime: 0,
+					});
+					return response.items ?? [];
+				},
 			});
+			pendingByPath.current.delete(fullPath);
 			return {
-				id: mailbox.mailboxId,
-				label: getMailboxDisplayName(mailbox.fullPath),
+				id: confirmed.mailboxId,
+				label: getMailboxDisplayName(confirmed.fullPath),
 			};
 		},
-		[mutation, accountId, data],
+		[mutation, accountId, data, queryClient],
 	);
 
 	return { createFolder, mutation };

package/src/hooks/useLabels.ts

@@ -0,0 +1,124 @@
+import {
+	labelDetailOperationsDeleteLabelMutation,
+	labelDetailOperationsUpdateLabelMutation,
+	labelOperationsCreateLabelMutation,
+	labelOperationsListLabelsOptions,
+	labelOperationsListLabelsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapLabelColor,
+	RemitImapUpdateLabelInput,
+} from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+/**
+ * The query key the label list reads and every mutation invalidates on
+ * success — the same contract `buildFilterListKey` pins for filters, so the
+ * settings list and the rule editor's label picker never go stale after a
+ * label is created, renamed, recolored, or deleted (issue #26).
+ */
+export const buildLabelListKey = (accountId: string) =>
+	labelOperationsListLabelsQueryKey({ path: { accountId } });
+
+/** List the account's labels. */
+export const useLabelList = (accountId: string | undefined) => {
+	const query = useQuery({
+		...labelOperationsListLabelsOptions({
+			path: { accountId: accountId ?? "" },
+		}),
+		enabled: !!accountId,
+	});
+
+	return {
+		labels: query.data?.items ?? [],
+		isPending: query.isPending,
+		isError: query.isError,
+		error: query.error,
+		refetch: query.refetch,
+	};
+};
+
+export const useCreateLabel = (accountId: string | undefined) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...labelOperationsCreateLabelMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({ queryKey: buildLabelListKey(accountId) });
+		},
+	});
+	const { mutateAsync } = mutation;
+
+	const createLabel = useCallback(
+		(name: string, color: RemitImapLabelColor = "Default") => {
+			if (!accountId) return Promise.reject(new Error("No account"));
+			return mutateAsync({ path: { accountId }, body: { name, color } });
+		},
+		[accountId, mutateAsync],
+	);
+
+	return {
+		createLabel,
+		isPending: mutation.isPending,
+		isError: mutation.isError,
+		error: mutation.error,
+		reset: mutation.reset,
+	};
+};
+
+export const useUpdateLabel = (accountId: string | undefined) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...labelDetailOperationsUpdateLabelMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({ queryKey: buildLabelListKey(accountId) });
+		},
+	});
+	const { mutate } = mutation;
+
+	const updateLabel = useCallback(
+		(labelId: string, input: RemitImapUpdateLabelInput) => {
+			if (!accountId) return;
+			mutate({ path: { accountId, labelId }, body: input });
+		},
+		[accountId, mutate],
+	);
+
+	return {
+		updateLabel,
+		isPending: mutation.isPending,
+		updatingLabelId: mutation.isPending
+			? mutation.variables?.path.labelId
+			: undefined,
+	};
+};
+
+export const useDeleteLabel = (accountId: string | undefined) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...labelDetailOperationsDeleteLabelMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({ queryKey: buildLabelListKey(accountId) });
+		},
+	});
+	const { mutate } = mutation;
+
+	const deleteLabel = useCallback(
+		(labelId: string) => {
+			if (!accountId) return;
+			mutate({ path: { accountId, labelId } });
+		},
+		[accountId, mutate],
+	);
+
+	return {
+		deleteLabel,
+		isPending: mutation.isPending,
+		deletingLabelId: mutation.isPending
+			? mutation.variables?.path.labelId
+			: undefined,
+	};
+};

package/src/hooks/useRuleEditorState.ts

@@ -28,6 +28,7 @@ export interface RuleEditorState {
 		onRemoveWiden: () => void;
 		onChangeMatchOperator: (matchOperator: MatchOperator) => void;
 		onChangeMove: (mailboxId: string) => void;
+		onChangeLabel: (labelId: string) => void;
 		onChangeScope: (scope: RuleScope) => void;
 		onChangeName: (name: string) => void;
 		onChangeUntil: (until: string) => void;
@@ -141,6 +142,12 @@ export const useRuleEditorState = ({
 			moveMailboxId: mailboxId || undefined,
 		}));
 
+	const changeLabel = (labelId: string) =>
+		setRuleState((current) => ({
+			...current,
+			labelId: labelId || undefined,
+		}));
+
 	const changeScope = (scope: RuleScope) =>
 		setRuleState((current) => ({ ...current, scope }));
 
@@ -166,6 +173,7 @@ export const useRuleEditorState = ({
 			onRemoveWiden: removeWiden,
 			onChangeMatchOperator: changeMatchOperator,
 			onChangeMove: changeMove,
+			onChangeLabel: changeLabel,
 			onChangeScope: changeScope,
 			onChangeName: changeName,
 			onChangeUntil: changeUntil,