@remit/web-client 0.0.76 → 0.0.78

package/src/lib/organize/label-delete-copy.ts

@@ -0,0 +1,22 @@
+/**
+ * The delete-confirmation copy for a label (issue #26). Deleting a label
+ * cascades in both directions server-side — every filter whose action applies
+ * it is deleted outright, never left dangling — so the confirmation names the
+ * filter count up front rather than surprising the user after the fact. The
+ * API itself never blocks the delete; the confirmation is the only gate.
+ */
+export const deleteLabelConfirmCopy = (
+	labelName: string,
+	filterCount: number,
+): { title: string; description?: string } => {
+	if (filterCount === 0) {
+		return { title: `Delete the "${labelName}" label?` };
+	}
+	const filterNoun = filterCount === 1 ? "filter" : "filters";
+	return {
+		title: `Delete the "${labelName}" label?`,
+		description: `This also deletes ${filterCount} ${filterNoun} that ${
+			filterCount === 1 ? "applies" : "apply"
+		} it — they can't be recovered.`,
+	};
+};

package/src/lib/organize/organize-model.test.ts

@@ -15,13 +15,15 @@ const baseDraft = (overrides: Partial<OrganizeDraft> = {}): OrganizeDraft => ({
 });
 
 describe("hasCommittableAction", () => {
-	it("is false when no move target is chosen — labeling has no backend yet, so a keep-in-place draft has nothing to commit", () => {
+	it("is false when neither a move nor a label is chosen — a keep-in-place draft has nothing to commit", () => {
 		assert.equal(hasCommittableAction(baseDraft()), false);
 	});
 
-	it("is false for the None sentinel", () => {
+	it("is false for the None sentinel on both actions", () => {
 		assert.equal(
-			hasCommittableAction(baseDraft({ moveMailboxId: NO_ACTION })),
+			hasCommittableAction(
+				baseDraft({ moveMailboxId: NO_ACTION, labelId: NO_ACTION }),
+			),
 			false,
 		);
 	});
@@ -32,10 +34,23 @@ describe("hasCommittableAction", () => {
 			true,
 		);
 	});
+
+	it("is true once a real label is chosen, with no move target (issue #26)", () => {
+		assert.equal(hasCommittableAction(baseDraft({ labelId: "lbl-1" })), true);
+	});
+
+	it("is true when both a move and a label are chosen", () => {
+		assert.equal(
+			hasCommittableAction(
+				baseDraft({ moveMailboxId: "mbx-1", labelId: "lbl-1" }),
+			),
+			true,
+		);
+	});
 });
 
 describe("buildOrganizeInput", () => {
-	it("carries the anchor and defaults the action to None when no move is set", () => {
+	it("carries the anchor and defaults both actions to None when neither is set", () => {
 		const input = buildOrganizeInput(baseDraft({ anchorMessageId: "msg-1" }));
 		assert.equal(input.anchorMessageId, "msg-1");
 		assert.equal(input.actionMailboxId, NO_ACTION);
@@ -53,12 +68,16 @@ describe("buildOrganizeInput", () => {
 		assert.equal("anchorMessageId" in input, false);
 	});
 
-	it("labels the label action None even when a move target is set — label writes have no endpoint", () => {
+	it("carries the move and label actions independently (issue #26)", () => {
 		const input = buildOrganizeInput(
-			baseDraft({ anchorMessageId: "msg-1", moveMailboxId: "mbx-9" }),
+			baseDraft({
+				anchorMessageId: "msg-1",
+				moveMailboxId: "mbx-9",
+				labelId: "lbl-9",
+			}),
 		);
 		assert.equal(input.actionMailboxId, "mbx-9");
-		assert.equal(input.actionLabelId, NO_ACTION);
+		assert.equal(input.actionLabelId, "lbl-9");
 	});
 });
 
@@ -101,4 +120,13 @@ describe("buildCreateFilterInput", () => {
 		);
 		assert.equal("ttl" in input, false);
 	});
+
+	it("carries a label action (issue #26)", () => {
+		const input = buildCreateFilterInput(
+			baseDraft({ labelId: "lbl-1" }),
+			"standing",
+			"Receipts",
+		);
+		assert.equal(input.actionLabelId, "lbl-1");
+	});
 });

package/src/lib/organize/organize-model.ts

@@ -27,9 +27,10 @@ export const NO_ACTION = "None";
 
 /**
  * The user's in-progress organize decision, independent of which scope they
- * land on. The anchor and predicate drive the match set; `moveMailboxId` is the
- * one committable action today (labeling has no backend yet — see
- * `labelPlaceholder`).
+ * land on. The anchor and predicate drive the match set; `moveMailboxId` and
+ * `labelId` are the two committable actions (issue #26) — independent of each
+ * other, since a move is exclusive and a label is additive (RFC 034 Decision
+ * 3.1).
  */
 export interface OrganizeDraft {
 	/** Semantic anchor — "mail like this one". The first selected message. */
@@ -43,6 +44,11 @@ export interface OrganizeDraft {
 	 * Decision 3.1). Absent means "keep where they are": no move action.
 	 */
 	moveMailboxId?: string;
+	/**
+	 * Label applied to the match set — the additive action (RFC 034 Decision
+	 * 3.1, issue #26). Absent applies no label.
+	 */
+	labelId?: string;
 	/**
 	 * ISO 8601 date-time with zone offset. Present only for the `temporary`
 	 * scope; a plain picked date (RFC 034 non-goal: no event-based expiry).
@@ -51,14 +57,13 @@ export interface OrganizeDraft {
 }
 
 /**
- * Whether the draft carries a committable action. Labeling is not wired yet
- * (no Label API — RFC 030's `Label`/`MessageLabel` entities exist in TypeSpec
- * but have no CRUD endpoint), so a move target is the only real action. A draft
- * with no move target has nothing to commit; the caller disables the CTA and
- * says why (ux.md).
+ * Whether the draft carries a committable action — a move destination and/or
+ * a label (issue #26), either satisfies this. A draft with neither has
+ * nothing to commit; the caller disables the CTA and says why (ux.md).
  */
 export const hasCommittableAction = (draft: OrganizeDraft): boolean =>
-	draft.moveMailboxId !== undefined && draft.moveMailboxId !== NO_ACTION;
+	(draft.moveMailboxId !== undefined && draft.moveMailboxId !== NO_ACTION) ||
+	(draft.labelId !== undefined && draft.labelId !== NO_ACTION);
 
 /**
  * Whether the draft's predicate can be back-applied over the existing corpus. A
@@ -75,7 +80,7 @@ export const canBackApplyDraft = (draft: OrganizeDraft): boolean =>
  * Build the read-only preview / back-apply matcher input. The action fields do
  * not affect which messages match — the preview returns exactly the set a job
  * with the same predicate would apply to — so a widen preview can pass this
- * before the user has chosen a folder.
+ * before the user has chosen a folder or a label.
  */
 export const buildOrganizeInput = (
 	draft: OrganizeDraft,
@@ -83,7 +88,7 @@ export const buildOrganizeInput = (
 	...(draft.anchorMessageId ? { anchorMessageId: draft.anchorMessageId } : {}),
 	matchOperator: draft.matchOperator,
 	literalClauses: draft.literalClauses,
-	actionLabelId: NO_ACTION,
+	actionLabelId: draft.labelId ?? NO_ACTION,
 	actionMailboxId: draft.moveMailboxId ?? NO_ACTION,
 });
 
@@ -107,7 +112,7 @@ export const buildCreateFilterInput = (
 			: {}),
 		matchOperator: draft.matchOperator,
 		literalClauses: draft.literalClauses,
-		actionLabelId: NO_ACTION,
+		actionLabelId: draft.labelId ?? NO_ACTION,
 		actionMailboxId: draft.moveMailboxId ?? NO_ACTION,
 		...(draft.anchorMessageId
 			? { anchorMessageId: draft.anchorMessageId }

package/src/lib/organize/rule-model.test.ts

@@ -247,6 +247,11 @@ describe("the previewed set equals the applied set", () => {
 			"mbx-archive",
 		);
 	});
+
+	it("carries the label target into the draft (issue #26)", () => {
+		const labeled = { ...semanticRule, labelId: "lbl-receipts" };
+		assert.equal(ruleToDraft(labeled, "msg-1").labelId, "lbl-receipts");
+	});
 });
 
 describe("derivePreview", () => {

package/src/lib/organize/rule-model.ts

@@ -164,6 +164,7 @@ export const ruleToDraft = (
 		matchOperator: predicate.matchOperator,
 		literalClauses: predicate.literalClauses,
 		moveMailboxId: rule.moveMailboxId,
+		labelId: rule.labelId,
 		expiresAt:
 			rule.scope === "until"
 				? pickedDateToExpiresAt(rule.until ?? "")

package/src/routeTree.gen.ts

@@ -23,6 +23,7 @@ import { Route as SettingsAdvancedRouteImport } from './routes/settings/advanced
 import { Route as SettingsAppearanceRouteImport } from './routes/settings/appearance'
 import { Route as SettingsFiltersRouteImport } from './routes/settings/filters'
 import { Route as SettingsFoldersRouteImport } from './routes/settings/folders'
+import { Route as SettingsLabelsRouteImport } from './routes/settings/labels'
 import { Route as SettingsSendersRouteImport } from './routes/settings/senders'
 import { Route as SettingsSuggestedVipsRouteImport } from './routes/settings/suggested-vips'
 
@@ -96,6 +97,11 @@ const SettingsFoldersRoute = SettingsFoldersRouteImport.update({
   path: '/folders',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsLabelsRoute = SettingsLabelsRouteImport.update({
+  id: '/labels',
+  path: '/labels',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsSendersRoute = SettingsSendersRouteImport.update({
   id: '/senders',
   path: '/senders',
@@ -120,6 +126,7 @@ export interface FileRoutesByFullPath {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
+  '/settings/labels': typeof SettingsLabelsRoute
   '/settings/senders': typeof SettingsSendersRoute
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
@@ -136,6 +143,7 @@ export interface FileRoutesByTo {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
+  '/settings/labels': typeof SettingsLabelsRoute
   '/settings/senders': typeof SettingsSendersRoute
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail': typeof MailIndexRoute
@@ -155,6 +163,7 @@ export interface FileRoutesById {
   '/settings/appearance': typeof SettingsAppearanceRoute
   '/settings/filters': typeof SettingsFiltersRoute
   '/settings/folders': typeof SettingsFoldersRoute
+  '/settings/labels': typeof SettingsLabelsRoute
   '/settings/senders': typeof SettingsSendersRoute
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
@@ -175,6 +184,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/filters'
     | '/settings/folders'
+    | '/settings/labels'
     | '/settings/senders'
     | '/settings/suggested-vips'
     | '/mail/'
@@ -191,6 +201,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/filters'
     | '/settings/folders'
+    | '/settings/labels'
     | '/settings/senders'
     | '/settings/suggested-vips'
     | '/mail'
@@ -209,6 +220,7 @@ export interface FileRouteTypes {
     | '/settings/appearance'
     | '/settings/filters'
     | '/settings/folders'
+    | '/settings/labels'
     | '/settings/senders'
     | '/settings/suggested-vips'
     | '/mail/'
@@ -322,6 +334,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsFoldersRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/settings/labels': {
+      id: '/settings/labels'
+      path: '/labels'
+      fullPath: '/settings/labels'
+      preLoaderRoute: typeof SettingsLabelsRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/settings/senders': {
       id: '/settings/senders'
       path: '/senders'
@@ -361,6 +380,7 @@ interface SettingsRouteChildren {
   SettingsAppearanceRoute: typeof SettingsAppearanceRoute
   SettingsFiltersRoute: typeof SettingsFiltersRoute
   SettingsFoldersRoute: typeof SettingsFoldersRoute
+  SettingsLabelsRoute: typeof SettingsLabelsRoute
   SettingsSendersRoute: typeof SettingsSendersRoute
   SettingsSuggestedVipsRoute: typeof SettingsSuggestedVipsRoute
   SettingsIndexRoute: typeof SettingsIndexRoute
@@ -372,6 +392,7 @@ const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsAppearanceRoute: SettingsAppearanceRoute,
   SettingsFiltersRoute: SettingsFiltersRoute,
   SettingsFoldersRoute: SettingsFoldersRoute,
+  SettingsLabelsRoute: SettingsLabelsRoute,
   SettingsSendersRoute: SettingsSendersRoute,
   SettingsSuggestedVipsRoute: SettingsSuggestedVipsRoute,
   SettingsIndexRoute: SettingsIndexRoute,

package/src/routes/settings/filters.tsx

@@ -3,7 +3,7 @@ import {
 	mailboxOperationsListMailboxesOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { SettingsShell } from "@remit/ui";
+import { type LabelOption, SettingsShell } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useCallback, useMemo, useState } from "react";
@@ -11,6 +11,7 @@ import { FilterEditorSurface } from "@/components/settings/FilterEditorSurface";
 import { FiltersList } from "@/components/settings/FiltersList";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useDeleteFilter, useFilterList } from "@/hooks/useFilters";
+import { useLabelList } from "@/hooks/useLabels";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { buildMoveTargets } from "@/lib/move-targets";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
@@ -64,6 +65,21 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 		[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 labelById = useMemo(
+		() => new Map(labels.map((label) => [label.id, label])),
+		[labels],
+	);
+
 	const editingFilter = filters.find(
 		(filter) => filter.filterId === editingFilterId,
 	);
@@ -76,6 +92,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 					accountId={accountId}
 					filter={editingFilter}
 					folders={folders}
+					labels={labels}
 					onClose={() => setEditingFilterId(undefined)}
 				/>
 			)}
@@ -99,6 +116,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 				<FiltersList
 					filters={filters}
 					mailboxName={mailboxName}
+					labelById={labelById}
 					onEdit={setEditingFilterId}
 					onDelete={deleteFilter}
 					deletingFilterId={deletingFilterId}

package/src/routes/settings/labels.tsx

@@ -0,0 +1,242 @@
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapAccountResponse,
+	RemitImapLabelColor,
+	RemitImapLabelResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	Banner,
+	Button,
+	Input,
+	labelColorOptions,
+	Select,
+	SettingsShell,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { LabelsList } from "@/components/settings/LabelsList";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+import { ErrorState } from "@/components/ui/ErrorState";
+import {
+	useCreateLabel,
+	useDeleteLabel,
+	useLabelList,
+	useUpdateLabel,
+} from "@/hooks/useLabels";
+import { deleteLabelConfirmCopy } from "@/lib/organize/label-delete-copy";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+
+export const Route = createFileRoute("/settings/labels")({
+	component: LabelsSettings,
+});
+
+const labelsHelp = (
+	<div className="space-y-3">
+		<p>
+			Labels mark mail without moving it — a message can carry any number of
+			them alongside whichever folder it lives in.
+		</p>
+		<p>
+			Use a label in a filter's action to have new (and existing) mail label
+			itself automatically, or apply one to a selection directly from the
+			mailbox.
+		</p>
+		<p>
+			Deleting a label removes it from every message, and deletes every filter
+			that applies it — the confirmation names how many.
+		</p>
+	</div>
+);
+
+/** Create a label for one account. A name, a color, and a create button. */
+function NewLabel({ accountId }: { accountId: string }) {
+	const { createLabel, isPending, isError } = useCreateLabel(accountId);
+	const [name, setName] = useState("");
+	const [color, setColor] = useState<RemitImapLabelColor>("Default");
+
+	const handleCreate = () => {
+		const trimmed = name.trim();
+		if (trimmed === "") return;
+		createLabel(trimmed, color).then(() => {
+			setName("");
+			setColor("Default");
+		});
+	};
+
+	return (
+		<div className="space-y-2 rounded-sm border border-line bg-surface p-3">
+			<p className="text-sm font-medium text-fg">New label</p>
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+				<div className="flex-1 space-y-1">
+					<span className="text-xs text-fg-muted">Name</span>
+					<Input
+						value={name}
+						onChange={(event) => setName(event.target.value)}
+						placeholder="e.g. Receipts"
+						aria-label="Label name"
+						onKeyDown={(event) => {
+							if (event.key === "Enter") {
+								event.preventDefault();
+								handleCreate();
+							}
+						}}
+					/>
+				</div>
+				<div className="space-y-1">
+					<span className="text-xs text-fg-muted">Color</span>
+					<Select
+						value={color}
+						onChange={(event) =>
+							setColor(event.target.value as RemitImapLabelColor)
+						}
+						aria-label="Label color"
+						className="w-28"
+					>
+						{labelColorOptions.map((option) => (
+							<option key={option} value={option}>
+								{option}
+							</option>
+						))}
+					</Select>
+				</div>
+				<Button
+					variant="primary"
+					onClick={handleCreate}
+					disabled={isPending || name.trim() === ""}
+				>
+					{isPending ? "Creating…" : "Create label"}
+				</Button>
+			</div>
+			{isError && (
+				<Banner tone="danger" variant="soft">
+					Couldn't create that label. Please try again.
+				</Banner>
+			)}
+		</div>
+	);
+}
+
+function AccountLabels({ account }: { account: RemitImapAccountResponse }) {
+	const accountId = account.accountId;
+	const { labels, isPending, isError, error, refetch } =
+		useLabelList(accountId);
+	const { updateLabel } = useUpdateLabel(accountId);
+	const { deleteLabel, deletingLabelId } = useDeleteLabel(accountId);
+	const [pendingDelete, setPendingDelete] = useState<RemitImapLabelResponse>();
+
+	return (
+		<section className="space-y-2">
+			<h2 className="text-sm font-semibold text-fg">{account.email}</h2>
+			{isPending ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+				<div
+					className="h-16 animate-pulse rounded-md border border-line bg-surface"
+					aria-busy="true"
+					aria-label={`Loading labels for ${account.email}`}
+				/>
+			) : isError ? (
+				<ErrorState
+					variant="inline"
+					title={`Couldn't load labels for ${account.email}`}
+					error={error}
+					onRetry={() => {
+						refetch();
+					}}
+				/>
+			) : (
+				<LabelsList
+					labels={labels}
+					onRename={(labelId, name) => updateLabel(labelId, { name })}
+					onRecolor={(labelId, color) =>
+						updateLabel(labelId, {
+							color: color as RemitImapLabelResponse["color"],
+						})
+					}
+					onDelete={setPendingDelete}
+					deletingLabelId={deletingLabelId}
+				/>
+			)}
+			<NewLabel accountId={accountId} />
+			{pendingDelete &&
+				(() => {
+					const copy = deleteLabelConfirmCopy(
+						pendingDelete.name,
+						pendingDelete.filterCount,
+					);
+					return (
+						<ConfirmDialog
+							isOpen
+							title={copy.title}
+							description={copy.description}
+							confirmLabel="Delete label"
+							destructive
+							isBusy={deletingLabelId === pendingDelete.labelId}
+							onConfirm={() => {
+								deleteLabel(pendingDelete.labelId);
+								setPendingDelete(undefined);
+							}}
+							onCancel={() => setPendingDelete(undefined)}
+						/>
+					);
+				})()}
+		</section>
+	);
+}
+
+function LabelsSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+
+	const {
+		data: config,
+		isPending,
+		isError,
+		error,
+		refetch,
+	} = useQuery(configOperationsGetConfigOptions());
+
+	const handleSelectNav = (id: string) => {
+		const path = SETTINGS_ID_TO_PATH[id];
+		if (path) void navigate({ to: path });
+	};
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="labels"
+			title="Labels"
+			description="Mark mail without moving it, per account."
+			help={labelsHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((v) => !v)}
+			onSelect={handleSelectNav}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			{isPending ? (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+				<div
+					className="h-24 animate-pulse rounded-sm border border-line bg-surface"
+					aria-busy="true"
+					aria-label="Loading accounts"
+				/>
+			) : isError ? (
+				<ErrorState
+					title="Couldn't load accounts"
+					error={error}
+					onRetry={() => {
+						refetch();
+					}}
+				/>
+			) : config.accounts.length === 0 ? (
+				<p className="py-12 text-sm text-fg-muted">No accounts configured.</p>
+			) : (
+				<div className="space-y-8">
+					{config.accounts.map((account) => (
+						<AccountLabels key={account.accountId} account={account} />
+					))}
+				</div>
+			)}
+		</SettingsShell>
+	);
+}

package/src/routes/settings.tsx

@@ -10,7 +10,7 @@
  */
 import type { SettingsNavItem } from "@remit/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
-import { Filter, FolderTree, Inbox, Palette, Users } from "lucide-react";
+import { Filter, FolderTree, Inbox, Palette, Tag, Users } from "lucide-react";
 import { AdvancedNavIcon } from "@/components/settings/AdvancedNavIcon";
 
 /* ------------------------------------------------------------------ */
@@ -34,6 +34,11 @@ export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
 		label: "Filters",
 		icon: <Filter className="size-4" />,
 	},
+	{
+		id: "labels",
+		label: "Labels",
+		icon: <Tag className="size-4" />,
+	},
 	{
 		id: "appearance",
 		label: "Appearance",
@@ -47,6 +52,7 @@ export const SETTINGS_ID_TO_PATH: Record<string, string> = {
 	senders: "/settings/senders",
 	folders: "/settings/folders",
 	filters: "/settings/filters",
+	labels: "/settings/labels",
 	appearance: "/settings/appearance",
 	advanced: "/settings/advanced",
 };