@remit/ui 0.0.54 → 0.0.55

package/package.json

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

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

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { UNCLASSIFIED_CATEGORY } from "../filter-presets.js";
 import {
 	FilterSheet,
 	type FilterSheetCategory,
@@ -11,7 +10,7 @@ import {
 const CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },
 	{ id: "personal", label: "Personal", tone: "positive" },
-	UNCLASSIFIED_CATEGORY,
+	{ id: "uncategorized", label: "Unclassified", tone: "neutral" },
 	{ id: "newsletters", label: "Newsletters", tone: "accent" },
 	{ id: "marketing", label: "Marketing", tone: "warning" },
 	{ id: "automated", label: "Automated", tone: "neutral" },
@@ -136,10 +135,7 @@ export const CollapsedWithActiveFilters: Story = {
  */
 export const CollapsedWithUnclassified: Story = {
 	render: () => (
-		<ControlledShell
-			initialExpanded={false}
-			initialCategory={UNCLASSIFIED_CATEGORY.id}
-		/>
+		<ControlledShell initialExpanded={false} initialCategory="uncategorized" />
 	),
 };
 

package/src/components/message-list-pane.render.test.ts

@@ -121,6 +121,37 @@ describe("MessageListPane", () => {
 		assert.match(html, /Report a problem/);
 	});
 
+	it("forwards the filter to the empty state so a narrowed list says so (#306)", () => {
+		const html = renderToString(
+			createElement(MessageListPane, {
+				...baseProps,
+				isDesktop: true,
+				listState: "empty",
+				listFilter: {
+					label: "Personal",
+					reach: "whole-folder",
+					onClear: () => undefined,
+				},
+				listScopeLabel: "Inbox",
+			}),
+		);
+		assert.match(html, /No Personal mail in Inbox/);
+		assert.match(html, /Every message in this folder was checked\./);
+		assert.doesNotMatch(html, /No messages in this mailbox/);
+	});
+
+	it("keeps the plain empty copy when nothing narrows the list", () => {
+		const html = renderToString(
+			createElement(MessageListPane, {
+				...baseProps,
+				isDesktop: true,
+				listState: "empty",
+			}),
+		);
+		assert.match(html, /No messages in this mailbox/);
+		assert.doesNotMatch(html, /Every message in this folder was checked\./);
+	});
+
 	it("renders the selectionBar slot instead of the pane header when provided", () => {
 		const html = renderToString(
 			createElement(MessageListPane, {

package/src/components/message-list-pane.stories.tsx

@@ -258,6 +258,36 @@ export const NarrowExternalSelectionBar: Story = {
 	decorators: [narrowFrame],
 };
 
+/** An empty mailbox, unfiltered: one plain line and no completeness claim. */
+export const EmptyState: Story = {
+	args: {
+		isDesktop: true,
+		flatList: true,
+		listState: "empty",
+	},
+	decorators: [desktopFrame],
+};
+
+/**
+ * The same pane under a category filter — the composition the inbox ships
+ * (#306). The pane forwards the filter and the scope to the empty state, so a
+ * narrowed list states what was read instead of reading as an empty mailbox.
+ */
+export const FilteredEmptyState: Story = {
+	args: {
+		isDesktop: true,
+		flatList: true,
+		listState: "empty",
+		listFilter: {
+			label: "Personal",
+			reach: "whole-folder",
+			onClear: () => undefined,
+		},
+		listScopeLabel: "Inbox",
+	},
+	decorators: [desktopFrame],
+};
+
 /** Fail-loud error state — the specific failure detail is surfaced under the
  *  headline (not a bare "something went wrong"), with a way back (Retry) and a
  *  place for the failure to go (Report a problem). */

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

@@ -1,6 +1,6 @@
 import type { Decorator, Meta, StoryObj } from "@storybook/react";
 import type { ReactNode } from "react";
-import { inboxFilterConfig, UNCLASSIFIED_CATEGORY } from "../filter-presets.js";
+import { inboxFilterConfig } from "../filter-presets.js";
 import type { ThreadRowData } from "./app-shell-types.js";
 import { FilterSheet } from "./filter-sheet.js";
 import {
@@ -89,7 +89,7 @@ function FilteredShell({
 	return (
 		<div className="flex h-full flex-col">
 			<FilterSheet
-				categories={[...preset.categories, UNCLASSIFIED_CATEGORY]}
+				categories={preset.categories}
 				filters={preset.filters}
 				selectedCategory={category}
 				activeFilters={new Set<string>()}
@@ -220,7 +220,7 @@ export const FilteredEmptyUnclassified: Story = {
 		scopeLabel: "Inbox",
 	},
 	render: (args) => (
-		<FilteredShell category={UNCLASSIFIED_CATEGORY.id}>
+		<FilteredShell category="uncategorized">
 			<MessageListEmpty {...args} />
 		</FilteredShell>
 	),

package/src/filter-presets.test.ts

@@ -5,7 +5,6 @@ import {
 	type FilterAccount,
 	flaggedFilterConfig,
 	inboxFilterConfig,
-	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 
 const accounts: FilterAccount[] = [
@@ -23,6 +22,7 @@ describe("briefFilterConfig", () => {
 			[
 				"all",
 				"personal",
+				"uncategorized",
 				"transactional",
 				"newsletter",
 				"marketing",
@@ -100,26 +100,31 @@ describe("flaggedFilterConfig", () => {
 	});
 });
 
-describe("UNCLASSIFIED_CATEGORY", () => {
-	it("is held out of every shipped preset until the server filters it", () => {
+describe("the Unclassified category", () => {
+	it("is offered by every shipped preset", () => {
 		for (const preset of [
 			briefFilterConfig(),
 			inboxFilterConfig(),
 			flaggedFilterConfig(),
 		]) {
 			assert.equal(
-				preset.categories.some((c) => c.id === UNCLASSIFIED_CATEGORY.id),
-				false,
+				preset.categories.some((c) => c.id === "uncategorized"),
+				true,
 			);
 		}
 	});
 
+	it("follows Personal, the order the brief already uses", () => {
+		const ids = inboxFilterConfig().categories.map((c) => c.id);
+		assert.equal(ids.indexOf("uncategorized"), ids.indexOf("personal") + 1);
+	});
+
 	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);
+		const categories = briefFilterConfig().categories;
+		const unclassified = categories.find((c) => c.id === "uncategorized");
+		const personal = categories.find((c) => c.id === "personal");
+		assert.equal(unclassified?.label, "Unclassified");
+		assert.notEqual(unclassified?.label, personal?.label);
+		assert.notEqual(unclassified?.tone, personal?.tone);
 	});
 });

package/src/filter-presets.ts

@@ -27,35 +27,20 @@ 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`.
+ * `uncategorized` is a category of its own here, never folded into `personal`
+ * (issue #45): mail the classifier has not reached is a pending state with a
+ * name, and it carries its own label and tone so the two can never read alike.
+ * It sits after `Personal` to match `briefCategories`' order.
  */
 const MESSAGE_CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },
 	{ id: "personal", label: "Personal", tone: "accent" },
+	{ id: "uncategorized", label: "Unclassified", tone: "neutral" },
 	{ id: "transactional", label: "Transactional", tone: "positive" },
 	{ id: "newsletter", label: "Newsletter", tone: "neutral" },
 	{ id: "marketing", label: "Marketing", tone: "warning" },

package/src/index.ts

@@ -249,6 +249,7 @@ export {
 } from "./components/message-header.js";
 export { MessageListPane } from "./components/message-list-pane.js";
 export {
+	type FilterReach,
 	type ListState,
 	MessageListEmpty,
 	type MessageListEmptyProps,
@@ -545,7 +546,6 @@ export {
 	type FilterPreset,
 	flaggedFilterConfig,
 	inboxFilterConfig,
-	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 export {
 	buildCidResolver,