@remit/ui 0.0.50 → 0.0.52

package/src/components/message-list-state.tsx

@@ -1,4 +1,5 @@
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
 import { Button } from "./button.js";
 
 /** Non-ready states the flat mailbox list can be in. "ready" renders rows. */
@@ -34,25 +35,148 @@ export function MessageListLoading() {
 }
 
 /**
- * Empty mailbox / empty-search state. Copy mirrors the live MessageList
- * EmptyState: a plain "No messages…" line, switching to the search variant
- * when a query is active.
+ * How much of the collection the filter was applied to.
+ *
+ * `whole-folder` is a SQL `where` over the mailbox — an empty result means the
+ * folder holds no matching mail. `loaded-pages` is a criterion evaluated over
+ * the rows fetched so far, which D19-S3 keeps alive for the off-row criteria
+ * (`senderTrust`, `dkimMismatch`) that page with a continuation token: an empty
+ * result there means nothing matched yet, not that nothing matches.
+ *
+ * A value rather than a `complete` flag, so the day a third reach exists the
+ * copy is a case to add and not a boolean to reinterpret.
  */
-export function MessageListEmpty({ searchQuery }: { searchQuery?: string }) {
-	const isSearching = Boolean(searchQuery?.trim());
+export type FilterReach = "whole-folder" | "loaded-pages";
+
+/**
+ * The active category filter, the way out of it, and how far it reached. All
+ * three together: the label cannot arrive without its escape, and the reach
+ * cannot be left to a default, because it decides which completeness sentence
+ * is true.
+ */
+export interface MessageListFilter {
+	/** Display label of the active category, e.g. "Personal". */
+	label: string;
+	reach: FilterReach;
+	onClear: () => void;
+}
+
+export interface MessageListEmptyProps {
+	/** Absent when no category filter is active. */
+	filter?: MessageListFilter;
+	/**
+	 * Name of the collection being listed, e.g. "Inbox". Absent for a plain
+	 * mailbox, which keeps the generic copy. Cross-account collections that are
+	 * not mailboxes (Flagged) name themselves here rather than being called one.
+	 */
+	scopeLabel?: string;
+	searchQuery?: string;
+}
+
+/**
+ * Empty list state. Unfiltered copy mirrors the live MessageList EmptyState: a
+ * plain "No messages…" line, switching to the search variant when a query is
+ * active.
+ *
+ * Under a filter it says how much was read (design D19). An empty list looks
+ * identical whether it is correct or broken, which is how #315's bug survived
+ * a mailbox holding thousands of matching messages. The sentence comes from the
+ * filter's own reach, so a filtered empty state always carries one and never
+ * claims more than the query did.
+ */
+export function MessageListEmpty({
+	filter,
+	scopeLabel,
+	searchQuery,
+}: MessageListEmptyProps) {
+	const query = searchQuery?.trim();
+
+	if (!filter) {
+		return (
+			<EmptyFrame>
+				<p className="text-fg-muted">{unfilteredCopy(query, scopeLabel)}</p>
+			</EmptyFrame>
+		);
+	}
+
+	return (
+		<EmptyFrame>
+			<p className="font-medium text-fg">
+				{filteredHeadline(filter.label, scopeLabel, query)}
+			</p>
+			<p className="mt-1 text-sm text-fg-muted">
+				{COMPLETENESS_COPY[filter.reach]}
+			</p>
+			<Button
+				variant="secondary"
+				size="sm"
+				className="mt-4"
+				onClick={filter.onClear}
+			>
+				Clear filter
+			</Button>
+		</EmptyFrame>
+	);
+}
+
+/**
+ * The one sentence a filtered empty list always carries. `loaded-pages` states
+ * what is true of a bounded read and nothing more; the wording it should settle
+ * on belongs with whoever moves the off-row criteria on-row (D7).
+ */
+const COMPLETENESS_COPY: Record<FilterReach, string> = {
+	"whole-folder": "Every message in this folder was checked.",
+	"loaded-pages": "Only the messages loaded so far were checked.",
+};
+
+function unfilteredCopy(
+	query: string | undefined,
+	scopeLabel: string | undefined,
+): string {
+	if (query) return "No messages match your search";
+	if (scopeLabel) return `No messages in ${scopeLabel}`;
+	return "No messages in this mailbox";
+}
+
+/** One string, not JSX, so the copy stays a single text node and reads whole. */
+function filteredHeadline(
+	filterLabel: string,
+	scopeLabel: string | undefined,
+	query: string | undefined,
+): string {
+	if (query) return `No results for “${query}” in ${filterLabel}`;
+	if (scopeLabel) return `No ${filterLabel} mail in ${scopeLabel}`;
+	return `No ${filterLabel} mail`;
+}
+
+function EmptyFrame({ children }: { children: ReactNode }) {
 	return (
 		<div className="flex h-full flex-1 items-center justify-center">
-			<div className="flex flex-col items-center justify-center p-8 text-center">
-				<p className="text-fg-muted">
-					{isSearching
-						? "No messages match your search"
-						: "No messages in this mailbox"}
-				</p>
+			<div className="flex max-w-sm flex-col items-center justify-center p-8 text-center">
+				{children}
 			</div>
 		</div>
 	);
 }
 
+/**
+ * Another page in flight below rows already rendered. Says so in words: a bare
+ * spinner (`MessageList.tsx:1429-1433`) is one of the ways "not fetched yet"
+ * reads as "nothing there".
+ */
+export function MessageListLoadingMore() {
+	return (
+		<div
+			className="flex items-center justify-center gap-2 py-4 text-sm text-fg-muted"
+			role="status"
+			aria-live="polite"
+		>
+			<Loader2 className="size-4 animate-spin" aria-hidden="true" />
+			<span>Loading more&hellip;</span>
+		</div>
+	);
+}
+
 /**
  * Fail-hard list error (ux.md): a centered, blocking message that stops the
  * list — never a toast, never a control left looking healthy. States plainly

package/src/components/message-row.render.test.ts

@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import type { ThreadRowData } from "./app-shell-types.js";
+import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
 import { ComfortableRow, CompactRow } from "./message-row.js";
 
 const base: ThreadRowData = {
@@ -35,6 +35,72 @@ describe("ComfortableRow", () => {
 		assert.notEqual(unread, read);
 		assert.match(unread, /font-semibold/);
 	});
+
+	it("renders a chip for every label applied to the message (issue #26)", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, {
+				thread: {
+					...base,
+					isRead: true,
+					labels: [
+						{ labelId: "l1", name: "Receipts", color: "Blue" },
+						{ labelId: "l2", name: "Travel", color: "Green" },
+					],
+				},
+			}),
+		);
+		assert.match(html, /Receipts/);
+		assert.match(html, /Travel/);
+	});
+
+	it("renders no label chip when the message carries none", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.doesNotMatch(html, /Remove label/);
+	});
+});
+
+describe("ComfortableRow category presentation", () => {
+	const render = (category: ThreadRowData["category"]): string =>
+		renderToString(
+			createElement(ComfortableRow, {
+				thread: { ...base, isRead: true, category },
+			}),
+		);
+
+	/** The category Badge's own class signature, so no other span matches. */
+	const badgeClass = (html: string): string | undefined =>
+		html.match(
+			/class="([^"]*rounded-full px-2 py-0\.5 text-2xs font-medium[^"]*)"/,
+		)?.[1];
+
+	it("renders no category badge for personal", () => {
+		assert.equal(badgeClass(render("personal")), undefined);
+	});
+
+	it("renders uncategorized as neither personal nor nothing (#45)", () => {
+		const uncategorized = render("uncategorized");
+		assert.notEqual(uncategorized, render("personal"));
+		assert.ok(
+			badgeClass(uncategorized),
+			"a message the classifier has not reached carries its own badge",
+		);
+		assert.match(uncategorized, /uncategorized|unclassified/i);
+	});
+
+	it("keeps the uncategorized badge off personal's tone (#45)", () => {
+		assert.notEqual(
+			categoryTone.uncategorized,
+			categoryTone.personal,
+			"the tone table must not give unclassified mail personal's colour",
+		);
+		assert.doesNotMatch(
+			badgeClass(render("uncategorized")) ?? "",
+			/accent/,
+			"the row badge must not render personal's accent tone",
+		);
+	});
 });
 
 describe("ComfortableRow selection slot", () => {

package/src/components/message-row.tsx

@@ -5,6 +5,7 @@ import { LIST_ROW_ATTRIBUTE } from "../lib/roving-focus.js";
 import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { Badge } from "./badge.js";
+import { LabelChip } from "./label-chip.js";
 
 /** Visible keyboard-focus ring for a row reached by the list's arrow-key cursor. */
 const ROW_FOCUS_RING =
@@ -166,6 +167,9 @@ export function ComfortableRowTextContent({
 						{thread.category}
 					</Badge>
 				)}
+				{thread.labels?.map((label) => (
+					<LabelChip key={label.labelId} label={label} className="max-w-20" />
+				))}
 				{badge}
 			</span>
 		</span>

package/src/filter-presets.test.ts

@@ -5,6 +5,7 @@ import {
 	type FilterAccount,
 	flaggedFilterConfig,
 	inboxFilterConfig,
+	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 
 const accounts: FilterAccount[] = [
@@ -98,3 +99,27 @@ describe("flaggedFilterConfig", () => {
 		assert.equal(flaggedFilterConfig().sources, undefined);
 	});
 });
+
+describe("UNCLASSIFIED_CATEGORY", () => {
+	it("is held out of every shipped preset until the server filters it", () => {
+		for (const preset of [
+			briefFilterConfig(),
+			inboxFilterConfig(),
+			flaggedFilterConfig(),
+		]) {
+			assert.equal(
+				preset.categories.some((c) => c.id === UNCLASSIFIED_CATEGORY.id),
+				false,
+			);
+		}
+	});
+
+	it("carries its own label and tone, never personal's (#45)", () => {
+		const personal = briefFilterConfig().categories.find(
+			(c) => c.id === "personal",
+		);
+		assert.equal(UNCLASSIFIED_CATEGORY.label, "Unclassified");
+		assert.notEqual(UNCLASSIFIED_CATEGORY.label, personal?.label);
+		assert.notEqual(UNCLASSIFIED_CATEGORY.tone, personal?.tone);
+	});
+});

package/src/filter-presets.ts

@@ -27,10 +27,31 @@ export interface FilterPreset {
 	sources?: FilterSheetSource[];
 }
 
+/**
+ * The Unclassified chip D6 requires, built and storied but not offered yet.
+ *
+ * This module is a runtime dependency of three live surfaces that filter over
+ * the loaded window, so a chip in the list below is a chip a user can click
+ * today. Offering it before #306 makes the predicate a server-side `where`
+ * would add a fresh instance of the bug this epic exists to fix: a category
+ * whose mail sits below the newest page reads as a category with no mail.
+ *
+ * #306 splices this entry into `MESSAGE_CATEGORIES` after `Personal` — matching
+ * `briefCategories`' order — and deletes this constant.
+ */
+export const UNCLASSIFIED_CATEGORY: FilterSheetCategory = {
+	id: "uncategorized",
+	label: "Unclassified",
+	tone: "neutral",
+};
+
 /**
  * Content-type categories, mirroring the `MessageCategory` enum
  * (@remit/remit-imap) by value. The leading "all" clears the category. Per
  * message, not per mailbox — so they apply in the brief and an inbox alike.
+ *
+ * `uncategorized` is absent on purpose and is not folded into `personal`
+ * (issue #45) — see `UNCLASSIFIED_CATEGORY`.
  */
 const MESSAGE_CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },

package/src/index.ts

@@ -144,11 +144,13 @@ export {
 	commitBlockedReason,
 	commitLabel,
 	demoFolders,
+	demoLabels,
 	demoRule,
 	demoSenderFallbackRule,
 	demoVocabularyRule,
 	type FilterRule,
 	type FolderOption,
+	type LabelOption,
 	type MatchOperator,
 	matchJoinWord,
 	matchOperatorLabel,
@@ -221,6 +223,11 @@ export {
 	KeyboardHintBar,
 	type KeyboardHintBarProps,
 } from "./components/keyboard-hint-bar.js";
+export {
+	LabelChip,
+	type LabelChipData,
+	type LabelChipProps,
+} from "./components/label-chip.js";
 export { ListItem, type ListItemProps } from "./components/list-item.js";
 export {
 	type MailAction,
@@ -244,8 +251,11 @@ export { MessageListPane } from "./components/message-list-pane.js";
 export {
 	type ListState,
 	MessageListEmpty,
+	type MessageListEmptyProps,
 	MessageListError,
+	type MessageListFilter,
 	MessageListLoading,
+	MessageListLoadingMore,
 } from "./components/message-list-state.js";
 export {
 	type BriefRowComponent,
@@ -535,6 +545,7 @@ export {
 	type FilterPreset,
 	flaggedFilterConfig,
 	inboxFilterConfig,
+	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 export {
 	buildCidResolver,
@@ -555,6 +566,12 @@ export {
 	sanitizeInlineStyle,
 	sanitizeStyleElementCss,
 } from "./lib/email-sanitizer.js";
+export {
+	isLabelColorValue,
+	type LabelColorValue,
+	labelColorOptions,
+	labelDotClass,
+} from "./lib/label-color.js";
 export {
 	LIST_ROW_ATTRIBUTE,
 	LIST_ROW_SELECTOR,

package/src/lib/label-color.test.ts

@@ -0,0 +1,25 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	isLabelColorValue,
+	labelColorOptions,
+	labelDotClass,
+} from "./label-color.js";
+
+describe("label-color", () => {
+	it("every listed option resolves to a dot class", () => {
+		for (const color of labelColorOptions) {
+			assert.ok(labelDotClass[color]);
+		}
+	});
+
+	it("recognizes every named color value", () => {
+		for (const color of labelColorOptions) {
+			assert.ok(isLabelColorValue(color));
+		}
+	});
+
+	it("rejects a value outside the named set", () => {
+		assert.equal(isLabelColorValue("Chartreuse"), false);
+	});
+});

package/src/lib/label-color.ts

@@ -0,0 +1,46 @@
+/**
+ * A user-picked label color (RFC 030, issue #26). Unlike the app's status
+ * tones (positive/warning/danger/…), a label's color carries no meaning the
+ * design system assigns — the user picked it to tell their own labels apart —
+ * so it renders from the literal Tailwind palette rather than a semantic
+ * token.
+ */
+export type LabelColorValue =
+	| "Default"
+	| "Red"
+	| "Orange"
+	| "Yellow"
+	| "Green"
+	| "Teal"
+	| "Blue"
+	| "Purple"
+	| "Gray";
+
+/** Solid dot color for a label swatch or chip. */
+export const labelDotClass: Record<LabelColorValue, string> = {
+	Default: "bg-fg-subtle",
+	Red: "bg-red-500",
+	Orange: "bg-orange-500",
+	Yellow: "bg-yellow-500",
+	Green: "bg-green-500",
+	Teal: "bg-teal-500",
+	Blue: "bg-blue-500",
+	Purple: "bg-purple-500",
+	Gray: "bg-gray-500",
+};
+
+/** Every color a label can be assigned, in picker order. */
+export const labelColorOptions: LabelColorValue[] = [
+	"Default",
+	"Red",
+	"Orange",
+	"Yellow",
+	"Green",
+	"Teal",
+	"Blue",
+	"Purple",
+	"Gray",
+];
+
+export const isLabelColorValue = (value: string): value is LabelColorValue =>
+	Object.hasOwn(labelDotClass, value);

package/src/stories-viewport-globals.test.ts

@@ -51,3 +51,27 @@ describe("story files use the viewport globals pattern (#68)", () => {
 		assert.deepEqual(offenders, []);
 	});
 });
+
+/**
+ * Storybook composes decorators story → component → global, so a story-level
+ * `decorators: []` adds nothing. It reads as "this story opts out of the meta's
+ * frame" and silently does the opposite, which clipped a story down to half its
+ * content. A story that needs a different frame carries the frame itself.
+ */
+describe("story files never claim to shed a meta decorator", () => {
+	const roots = [
+		here,
+		resolve(here, "../../workbench/src"),
+		resolve(here, "../../web-client/src"),
+	];
+
+	it("never uses an empty story-level decorators array", () => {
+		const offenders = roots
+			.flatMap((root) => storyFiles(root))
+			.filter((file) =>
+				/decorators:\s*\[\s*\]/.test(readFileSync(file, "utf8")),
+			)
+			.map((file) => relative(here, file));
+		assert.deepEqual(offenders, []);
+	});
+});