@remit/ui 0.0.50 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell-types.ts

@@ -191,6 +191,12 @@ export const briefCategories: ReadonlyArray<{
 	{ id: "social", label: "Social" },
 ];
 
+export interface ThreadRowLabel {
+	labelId: string;
+	name: string;
+	color: string;
+}
+
 export interface ThreadRowData {
 	id: string;
 	accountId: string;
@@ -212,6 +218,8 @@ export interface ThreadRowData {
 	messageCount?: number;
 	/** Authenticity heuristics flagged this row (DKIM/From mismatch). */
 	suspicious?: boolean;
+	/** Labels applied to this message (issue #26) — filter-, organize-, and manually-applied alike. */
+	labels?: ThreadRowLabel[];
 }
 
 export interface ThreadSection {

package/src/components/filter-rule-editor.stories.tsx

@@ -6,11 +6,13 @@ import {
 	type ClauseField,
 	clauseFieldLabel,
 	demoFolders,
+	demoLabels,
 	demoRule,
 	demoSenderFallbackRule,
 	demoVocabularyRule,
 	type FilterRule,
 	type FolderOption,
+	type LabelOption,
 	type PreviewCount,
 	type RuleClause,
 } from "./filter-rule.js";
@@ -51,14 +53,18 @@ const READY = (count: number, stale?: boolean): PreviewCount => ({
 function LiveEditor({
 	initialRule,
 	semanticAvailable = true,
+	labels = demoLabels,
 	onCreateFolder,
+	onCreateLabel,
 }: {
 	initialRule: FilterRule;
 	semanticAvailable?: boolean;
+	labels?: LabelOption[];
 	onCreateFolder?: (
 		name: string,
 		signal?: AbortSignal,
 	) => Promise<FolderOption>;
+	onCreateLabel?: (name: string) => Promise<LabelOption>;
 }) {
 	const [rule, setRule] = useState<FilterRule>(initialRule);
 	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
@@ -126,6 +132,8 @@ function LiveEditor({
 		},
 		onChangeMove: (moveMailboxId) =>
 			setRule((r) => ({ ...r, moveMailboxId: moveMailboxId || undefined })),
+		onChangeLabel: (labelId) =>
+			setRule((r) => ({ ...r, labelId: labelId || undefined })),
 		onChangeScope: (scope) => setRule((r) => ({ ...r, scope })),
 		onChangeName: (name) => setRule((r) => ({ ...r, name })),
 		onChangeUntil: (until) => setRule((r) => ({ ...r, until })),
@@ -135,10 +143,12 @@ function LiveEditor({
 		<FilterRuleEditor
 			rule={rule}
 			folders={demoFolders}
+			labels={labels}
 			preview={preview}
 			semanticAvailable={semanticAvailable}
 			clauseEdit={clauseEdit}
 			onCreateFolder={onCreateFolder}
+			onCreateLabel={onCreateLabel}
 			onCommit={() => {}}
 			onCancel={() => {}}
 			{...handlers}
@@ -349,6 +359,83 @@ export const NewFolderCreateCancelledMidWait: Story = {
 	},
 };
 
+/** No labels exist yet in the account — the select offers only "No label". */
+export const NoLabels: Story = {
+	render: () => <LiveEditor initialRule={demoRule} labels={[]} />,
+};
+
+/** A rule that already applies a label — the chip renders next to the select. */
+export const WithLabelSelected: Story = {
+	render: () => (
+		<LiveEditor initialRule={{ ...demoRule, labelId: "lbl-receipts" }} />
+	),
+};
+
+/** Many labels in the account — the select scrolls rather than the layout growing. */
+export const ManyLabels: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			labels={Array.from({ length: 20 }, (_, i) => ({
+				id: `lbl-${i}`,
+				name: `Label ${i + 1}`,
+				color: demoLabels[i % demoLabels.length].color,
+			}))}
+		/>
+	),
+};
+
+/** A long label name truncates in the chip rather than overflowing the row. */
+export const LongLabelNames: Story = {
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, labelId: "lbl-long" }}
+			labels={[
+				{
+					id: "lbl-long",
+					name: "Quarterly compliance filings that need a second look",
+					color: "Purple",
+				},
+				...demoLabels,
+			]}
+		/>
+	),
+};
+
+let newLabelSeq = 0;
+const mockCreateLabel = (name: string): Promise<LabelOption> =>
+	new Promise((resolve) => {
+		newLabelSeq += 1;
+		setTimeout(
+			() => resolve({ id: `lbl-new-${newLabelSeq}`, name, color: "Default" }),
+			400,
+		);
+	});
+
+/**
+ * The label select offers a "＋ New label…" option because `onCreateLabel` is
+ * wired (issue #26). Choosing it reveals a name field; on resolve the label is
+ * added to the select and picked as the action. Without the prop the option
+ * never shows — the editor stays data-agnostic.
+ */
+export const WithNewLabelOption: Story = {
+	render: () => (
+		<LiveEditor initialRule={demoRule} onCreateLabel={mockCreateLabel} />
+	),
+};
+
+const mockCreateLabelFailure = (): Promise<LabelOption> =>
+	new Promise((_resolve, reject) => {
+		setTimeout(() => reject(new Error("That name is already taken.")), 400);
+	});
+
+/** Creating a label from the picker can fail — the field stays open with the reason. */
+export const LabelCreateError: Story = {
+	render: () => (
+		<LiveEditor initialRule={demoRule} onCreateLabel={mockCreateLabelFailure} />
+	),
+};
+
 /** Literal clauses joined with "or", including the ticket-B ListId and FromDomain fields. */
 export const AnyOfTheseClauses: Story = {
 	render: () => <LiveEditor initialRule={demoVocabularyRule} />,

package/src/components/filter-rule-editor.tsx

@@ -24,6 +24,7 @@ import {
 	commitLabel,
 	type FilterRule,
 	type FolderOption,
+	type LabelOption,
 	type MatchOperator,
 	matchJoinWord,
 	matchOperatorLabel,
@@ -31,6 +32,7 @@ import {
 	type RuleScope,
 } from "./filter-rule.js";
 import { Input } from "./input.js";
+import { LabelChip } from "./label-chip.js";
 import { SegmentedControl } from "./segmented-control.js";
 import { Select } from "./select.js";
 
@@ -44,6 +46,8 @@ export interface ClauseEditState {
 export interface FilterRuleEditorProps {
 	rule: FilterRule;
 	folders: FolderOption[];
+	/** The account's labels the apply-label action can target (issue #26). */
+	labels?: LabelOption[];
 	preview: PreviewCount;
 	/**
 	 * Content rendered above the clause chips — the filter-from-search conversion
@@ -102,6 +106,13 @@ export interface FilterRuleEditorProps {
 		name: string,
 		signal?: AbortSignal,
 	) => Promise<FolderOption>;
+	onChangeLabel?: (labelId: string) => void;
+	/**
+	 * Create a new label from within the editor (issue #26). Given a label
+	 * name, resolves to the created label once the backend has saved it. When
+	 * absent, the "New label…" option is not offered.
+	 */
+	onCreateLabel?: (name: string) => Promise<LabelOption>;
 	onChangeScope?: (scope: RuleScope) => void;
 	onChangeName?: (name: string) => void;
 	onChangeUntil?: (date: string) => void;
@@ -121,6 +132,7 @@ const scopeOptions: { value: RuleScope; label: string }[] = [
 ];
 
 const CREATE_FOLDER_VALUE = "__filter_create_folder__";
+const CREATE_LABEL_VALUE = "__filter_create_label__";
 
 /**
  * The move-to destination select, plus an inline "New folder…" affordance when
@@ -284,9 +296,157 @@ function MoveDestinationField({
 	);
 }
 
+/**
+ * The apply-label select, plus an inline "New label…" affordance when the
+ * consumer wires `onCreateLabel` (issue #26). Mirrors `MoveDestinationField`:
+ * selecting the create option reveals a name field, and the created label is
+ * added to the local option set and picked immediately, before the caller's
+ * label list refetches.
+ */
+function LabelDestinationField({
+	labels,
+	value,
+	onChangeLabel,
+	onCreateLabel,
+}: {
+	labels: LabelOption[];
+	value: string;
+	onChangeLabel?: (labelId: string) => void;
+	onCreateLabel?: (name: string) => Promise<LabelOption>;
+}) {
+	const [creating, setCreating] = useState(false);
+	const [name, setName] = useState("");
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState<string>();
+	const [createdLabels, setCreatedLabels] = useState<LabelOption[]>([]);
+
+	const options = useMemo(() => {
+		const known = new Set(labels.map((label) => label.id));
+		return [
+			...labels,
+			...createdLabels.filter((label) => !known.has(label.id)),
+		];
+	}, [labels, createdLabels]);
+
+	const selected = options.find((label) => label.id === value);
+
+	const handleSelectChange = (next: string) => {
+		if (next === CREATE_LABEL_VALUE) {
+			setError(undefined);
+			setCreating(true);
+			return;
+		}
+		onChangeLabel?.(next);
+	};
+
+	const submit = () => {
+		if (!onCreateLabel) return;
+		const trimmed = name.trim();
+		if (trimmed === "") return;
+		setPending(true);
+		setError(undefined);
+		onCreateLabel(trimmed)
+			.then((label) => {
+				setCreatedLabels((prev) =>
+					prev.some((entry) => entry.id === label.id) ? prev : [...prev, label],
+				);
+				onChangeLabel?.(label.id);
+				setCreating(false);
+				setName("");
+				setPending(false);
+			})
+			.catch((error: unknown) => {
+				setError(
+					error instanceof Error
+						? error.message
+						: "Couldn't create that label. Please try again.",
+				);
+				setPending(false);
+			});
+	};
+
+	const cancel = () => {
+		setCreating(false);
+		setName("");
+		setError(undefined);
+	};
+
+	return (
+		<div className="space-y-2">
+			<div className="flex items-center gap-2">
+				<Select
+					aria-label="Label to apply"
+					value={value}
+					onChange={(event) => handleSelectChange(event.target.value)}
+					className="flex-1"
+				>
+					<option value="">No label</option>
+					{options.map((label) => (
+						<option key={label.id} value={label.id}>
+							{label.name}
+						</option>
+					))}
+					{onCreateLabel && (
+						<option value={CREATE_LABEL_VALUE}>＋ New label…</option>
+					)}
+				</Select>
+				{selected && (
+					<LabelChip label={{ ...selected, labelId: selected.id }} />
+				)}
+			</div>
+			{creating && (
+				<div className="space-y-2 rounded-md border border-line bg-surface-sunken p-2">
+					<Input
+						value={name}
+						onChange={(event) => setName(event.target.value)}
+						placeholder="Label name"
+						aria-label="New label name"
+						disabled={pending}
+						autoFocus
+						onKeyDown={(event) => {
+							if (event.key === "Enter") {
+								event.preventDefault();
+								submit();
+							}
+							if (event.key === "Escape") {
+								event.preventDefault();
+								cancel();
+							}
+						}}
+					/>
+					{error && (
+						<p className="text-2xs text-danger" role="alert">
+							{error}
+						</p>
+					)}
+					<div className="flex gap-2">
+						<Button
+							variant="primary"
+							size="sm"
+							onClick={submit}
+							disabled={pending || name.trim() === ""}
+						>
+							{pending ? "Creating…" : "Create label"}
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							onClick={cancel}
+							disabled={pending}
+						>
+							Cancel
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
 export function FilterRuleEditor({
 	rule,
 	folders,
+	labels = [],
 	preview,
 	notice,
 	semanticAvailable = false,
@@ -305,6 +465,8 @@ export function FilterRuleEditor({
 	onChangeMatchOperator,
 	onChangeMove,
 	onCreateFolder,
+	onChangeLabel,
+	onCreateLabel,
 	onChangeScope,
 	onChangeName,
 	onChangeUntil,
@@ -419,15 +581,16 @@ export function FilterRuleEditor({
 						onChangeMove={onChangeMove}
 						onCreateFolder={onCreateFolder}
 					/>
-					<div className="flex items-center gap-2 pt-0.5">
-						<span className="inline-flex items-center gap-1.5 rounded-full bg-surface-sunken px-2 py-0.5 text-2xs font-medium text-fg-muted">
-							label them…
-						</span>
-						<span className="text-2xs text-fg-subtle">
-							Labeling isn't available yet — arrives with mail-labeling (RFC
-							031).
-						</span>
-					</div>
+				</section>
+
+				<section className="space-y-2">
+					<p className="text-xs font-medium text-fg-muted">Apply a label</p>
+					<LabelDestinationField
+						labels={labels}
+						value={rule.labelId ?? ""}
+						onChangeLabel={onChangeLabel}
+						onCreateLabel={onCreateLabel}
+					/>
 				</section>
 
 				<section className="space-y-2">

package/src/components/filter-rule.render.test.ts

@@ -21,6 +21,7 @@ import {
 	demoVocabularyRule,
 	type FilterRule,
 	type FolderOption,
+	type LabelOption,
 	matchJoinWord,
 	matchOperatorLabel,
 	type PreviewCount,
@@ -45,6 +46,11 @@ const FOLDERS: FolderOption[] = [
 	{ id: "mbx-archive", label: "Archive" },
 ];
 
+const LABELS: LabelOption[] = [
+	{ id: "lbl-receipts", name: "Receipts", color: "Blue" },
+	{ id: "lbl-travel", name: "Travel", color: "Green" },
+];
+
 const READY: PreviewCount = { status: "ready", count: 47 };
 
 const editor = (overrides: Partial<FilterRuleEditorProps> = {}) =>
@@ -161,10 +167,20 @@ describe("commitBlockedReason", () => {
 		);
 	});
 
-	it("asks for a folder when none is chosen", () => {
+	it("asks for a folder or a label when neither action is chosen", () => {
 		assert.match(
 			commitBlockedReason({ ...base, moveMailboxId: undefined }, fresh) ?? "",
-			/Pick a folder/,
+			/Pick a folder to move into, or a label to apply/,
+		);
+	});
+
+	it("a label alone is a sufficient action, no folder needed", () => {
+		assert.equal(
+			commitBlockedReason(
+				{ ...base, moveMailboxId: undefined, labelId: "lbl-1" },
+				fresh,
+			),
+			undefined,
 		);
 	});
 
@@ -505,10 +521,33 @@ describe("FilterRuleEditor", () => {
 		assert.match(html, /from sender/);
 	});
 
-	it("reserves a disabled label slot next to the move action", () => {
-		const html = editor();
-		assert.match(html, /label them…/);
-		assert.match(html, /Labeling isn.+available yet/);
+	it("offers the account's labels as the apply-label action", () => {
+		const html = editor({ labels: LABELS });
+		assert.match(html, /aria-label="Label to apply"/);
+		assert.match(html, /Receipts/);
+		assert.match(html, /Travel/);
+	});
+
+	it("renders a chip for the selected label", () => {
+		const html = editor({
+			labels: LABELS,
+			rule: { ...demoRule, labelId: "lbl-receipts" },
+		});
+		assert.match(html, /Receipts/);
+	});
+
+	it("offers no create option without onCreateLabel", () => {
+		const html = editor({ labels: LABELS });
+		assert.doesNotMatch(html, /New label…/);
+	});
+
+	it("offers the create option when onCreateLabel is wired", () => {
+		const html = editor({
+			labels: LABELS,
+			onCreateLabel: () =>
+				Promise.resolve({ id: "lbl-new", name: "New", color: "Default" }),
+		});
+		assert.match(html, /New label…/);
 	});
 
 	it("shows the scope toggle and names a standing rule", () => {

package/src/components/filter-rule.ts

@@ -62,6 +62,11 @@ export interface FilterRule {
 	widen?: RuleWiden;
 	/** The move-to-folder action's destination. Absent leaves mail in place. */
 	moveMailboxId?: string;
+	/**
+	 * The apply-label action's target (issue #26) — additive, so it can be set
+	 * alongside `moveMailboxId`. Absent applies no label.
+	 */
+	labelId?: string;
 	scope: RuleScope;
 	/** ISO 8601 civil date (`YYYY-MM-DD`) for the `until` scope. */
 	until?: string;
@@ -74,6 +79,12 @@ export interface FolderOption {
 	label: string;
 }
 
+export interface LabelOption {
+	id: string;
+	name: string;
+	color: string;
+}
+
 /**
  * The live match count (RFC 038 D1). `stale` marks a count the editor already
  * moved past — a clause changed after it was counted, so the number on screen
@@ -171,13 +182,13 @@ export function commitLabel(scope: RuleScope): string {
 
 /**
  * Why the rule cannot be saved yet, or `undefined` when it is ready. A rule
- * needs at least one live way to match, a folder to move into (the only wired
- * action), and — for the two persisted scopes — a name and, for `until`, a
- * date. It also needs a settled preview: the rule is committable only when the
- * count on screen is the count that will be applied. That makes RFC 038's
- * previewed-set-equals-applied-set contract structural — a consumer cannot save
- * a rule whose match count is still moving. Never disable a control without
- * saying why (ux.md).
+ * needs at least one live way to match, at least one action — move and/or
+ * label, either satisfies this (issue #26) — and, for the two persisted
+ * scopes, a name and, for `until`, a date. It also needs a settled preview:
+ * the rule is committable only when the count on screen is the count that
+ * will be applied. That makes RFC 038's previewed-set-equals-applied-set
+ * contract structural — a consumer cannot save a rule whose match count is
+ * still moving. Never disable a control without saying why (ux.md).
  */
 export function commitBlockedReason(
 	rule: FilterRule,
@@ -187,8 +198,8 @@ export function commitBlockedReason(
 		rule.clauses.length > 0 ||
 		(rule.widen !== undefined && !rule.widen.inactive);
 	if (!hasMatch) return "Add a clause so the rule has something to match.";
-	if (!rule.moveMailboxId)
-		return "Pick a folder to move matches into — labeling isn't available yet.";
+	if (!rule.moveMailboxId && !rule.labelId)
+		return "Pick a folder to move into, or a label to apply.";
 	if (
 		(rule.scope === "standing" || rule.scope === "until") &&
 		(rule.name ?? "").trim() === ""
@@ -211,6 +222,12 @@ export const demoFolders: FolderOption[] = [
 	{ id: "mbx-junk", label: "Junk" },
 ];
 
+export const demoLabels: LabelOption[] = [
+	{ id: "lbl-receipts", name: "Receipts", color: "Blue" },
+	{ id: "lbl-travel", name: "Travel", color: "Green" },
+	{ id: "lbl-urgent", name: "Urgent", color: "Red" },
+];
+
 export const demoRule: FilterRule = {
 	clauses: [
 		{ id: "c1", field: "From", value: "notifications@github.com" },

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
+import { UNCLASSIFIED_CATEGORY } from "../filter-presets.js";
 import {
 	FilterSheet,
 	type FilterSheetCategory,
@@ -10,6 +11,7 @@ import {
 const CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },
 	{ id: "personal", label: "Personal", tone: "positive" },
+	UNCLASSIFIED_CATEGORY,
 	{ id: "newsletters", label: "Newsletters", tone: "accent" },
 	{ id: "marketing", label: "Marketing", tone: "warning" },
 	{ id: "automated", label: "Automated", tone: "neutral" },
@@ -127,6 +129,20 @@ export const CollapsedWithActiveFilters: Story = {
 	),
 };
 
+/**
+ * Unclassified selected. Mail the classifier has not reached is a filterable
+ * value of its own and never folds into Personal (issue #45), so the chip and
+ * its collapsed summary carry their own label and tone.
+ */
+export const CollapsedWithUnclassified: Story = {
+	render: () => (
+		<ControlledShell
+			initialExpanded={false}
+			initialCategory={UNCLASSIFIED_CATEGORY.id}
+		/>
+	),
+};
+
 export const CollapsedEmpty: Story = {
 	render: () => <ControlledShell initialExpanded={false} />,
 };

package/src/components/label-chip.render.test.ts

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { LabelChip } from "./label-chip.js";
+
+describe("LabelChip", () => {
+	it("renders the label's name and a dot in its color", () => {
+		const html = renderToString(
+			createElement(LabelChip, {
+				label: { labelId: "l1", name: "Receipts", color: "Blue" },
+			}),
+		);
+		assert.match(html, /Receipts/);
+		assert.match(html, /bg-blue-500/);
+	});
+
+	it("falls back to the neutral dot for an unrecognized color", () => {
+		const html = renderToString(
+			createElement(LabelChip, {
+				label: { labelId: "l1", name: "Mystery", color: "Chartreuse" },
+			}),
+		);
+		assert.match(html, /bg-fg-subtle/);
+	});
+
+	it("renders no remove affordance without onRemove", () => {
+		const html = renderToString(
+			createElement(LabelChip, {
+				label: { labelId: "l1", name: "Receipts", color: "Blue" },
+			}),
+		);
+		assert.doesNotMatch(html, /Remove label/);
+	});
+
+	it("renders a remove button naming the label when onRemove is wired", () => {
+		const html = renderToString(
+			createElement(LabelChip, {
+				label: { labelId: "l1", name: "Receipts", color: "Blue" },
+				onRemove: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-label="Remove label Receipts"/);
+	});
+});

package/src/components/label-chip.tsx

@@ -0,0 +1,49 @@
+import { cn } from "../lib/cn.js";
+import { isLabelColorValue, labelDotClass } from "../lib/label-color.js";
+
+export interface LabelChipData {
+	labelId: string;
+	name: string;
+	color: string;
+}
+
+export interface LabelChipProps {
+	label: LabelChipData;
+	/** Renders a remove affordance — the manual "just these" unlabel action. */
+	onRemove?: (labelId: string) => void;
+	className?: string;
+}
+
+/**
+ * A label applied to a message (issue #26) — a colored dot plus its name, the
+ * same shape a category badge or the widen chip takes. `color` renders from
+ * the literal palette (never a semantic tone): a label's color is a user
+ * choice, not a status the design system assigns meaning to.
+ */
+export function LabelChip({ label, onRemove, className }: LabelChipProps) {
+	const dotClass = isLabelColorValue(label.color)
+		? labelDotClass[label.color]
+		: labelDotClass.Default;
+
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1 rounded-full bg-surface-sunken px-2 py-0.5 text-2xs font-medium text-fg-muted shrink-0",
+				className,
+			)}
+		>
+			<span className={cn("size-1.5 shrink-0 rounded-full", dotClass)} />
+			<span className="truncate">{label.name}</span>
+			{onRemove && (
+				<button
+					type="button"
+					onClick={() => onRemove(label.labelId)}
+					aria-label={`Remove label ${label.name}`}
+					className="ml-0.5 rounded-full text-fg-subtle hover:text-fg"
+				>
+					×
+				</button>
+			)}
+		</span>
+	);
+}