@remit/ui 0.0.111 → 0.0.113

package/package.json

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

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

@@ -435,3 +435,13 @@ export const categoryTone: Record<
 	transactional: "positive",
 	social: "warning",
 };
+
+/**
+ * Whether a string names one of the classifier's categories. A host reading a
+ * category off the API narrows it with this rather than asserting it: a value
+ * from a newer server that this build has no tone for is a value it cannot
+ * render, and it needs to know that rather than find out at lookup time.
+ */
+export function isThreadCategory(value: string): value is ThreadCategory {
+	return Object.hasOwn(categoryTone, value);
+}

package/src/components/intelligence-panel.render.test.ts

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { categoryTone, isThreadCategory } from "./app-shell-types.js";
+import type { IntelligenceData } from "./intelligence-panel.js";
+import { IntelligencePanel } from "./intelligence-panel.js";
+
+const vipWithFailingAuthenticity: IntelligenceData = {
+	sender: {
+		name: "Sabrina Basten",
+		email: "sabrina@sabrinabasten.example",
+		trust: "vip",
+		firstSeenLabel: "Mar 2023",
+		inboundCount: 214,
+		replyCount: 188,
+	},
+	authenticity: {
+		verdict: "mismatch",
+		fromDomain: "sabrinabasten.example",
+		dkimDomain: "custmx.one.example",
+		summary: "Signed by custmx.one.example instead.",
+	},
+	category: { value: "personal" },
+	flags: { vip: true },
+	similar: [],
+};
+
+/** The rendered chip in the Category section. */
+function categoryChip(data: IntelligenceData): string {
+	const html = renderToString(createElement(IntelligencePanel, { data }));
+	const marker = `>${data.category.value}</span>`;
+	const end = html.indexOf(marker);
+	assert.notEqual(end, -1, `expected a chip reading '${data.category.value}'`);
+	const start = html.lastIndexOf("<span", end);
+	return html.slice(start, end + marker.length);
+}
+
+describe("IntelligencePanel category chip", () => {
+	it("takes its colour from the category, not the authenticity verdict", () => {
+		const chip = categoryChip(vipWithFailingAuthenticity);
+		assert.doesNotMatch(chip, /danger/);
+		assert.match(chip, /text-accent-2/);
+	});
+
+	it("renders the same chip for a category whatever the verdict said", () => {
+		const failing = categoryChip(vipWithFailingAuthenticity);
+		const aligned = categoryChip({
+			...vipWithFailingAuthenticity,
+			authenticity: {
+				verdict: "aligned",
+				fromDomain: "sabrinabasten.example",
+				summary: "Nothing looks unusual about this sender.",
+			},
+		});
+		assert.equal(failing, aligned);
+	});
+
+	it("gives each category its own tone", () => {
+		const receipt = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "transactional" },
+		});
+		assert.match(receipt, /text-positive/);
+		const newsletter = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "newsletter" },
+		});
+		assert.match(newsletter, /text-fg-muted/);
+	});
+
+	it("renders a readable chip for a message the classifier placed nowhere", () => {
+		const chip = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "uncategorized" },
+		});
+		assert.match(chip, /text-fg-muted/);
+		assert.doesNotMatch(chip, /danger/);
+	});
+});
+
+describe("isThreadCategory", () => {
+	it("accepts every category the tone map covers", () => {
+		for (const category of Object.keys(categoryTone)) {
+			assert.equal(isThreadCategory(category), true, category);
+		}
+	});
+
+	it("rejects a category this build has no tone for", () => {
+		assert.equal(isThreadCategory("invoice"), false);
+		assert.equal(isThreadCategory("Personal"), false);
+		assert.equal(isThreadCategory("toString"), false);
+	});
+});

package/src/components/intelligence-panel.stories.tsx

@@ -15,7 +15,7 @@ const base: IntelligenceData = {
 		dkimDomain: "example.com",
 		summary: "This message was signed by example.com.",
 	},
-	category: { value: "Personal" },
+	category: { value: "personal" },
 	similar: [],
 };
 
@@ -62,7 +62,7 @@ export const SignedButUnrecognised: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Automated" },
+			category: { value: "automated" },
 			authenticity: {
 				verdict: "caution",
 				fromDomain: "serviceupdatebank.atlassian.net",
@@ -88,7 +88,7 @@ export const SignedButLookalikeName: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Transactional" },
+			category: { value: "transactional" },
 			authenticity: {
 				verdict: "caution",
 				fromDomain: "1nfomedics.nl",
@@ -111,7 +111,7 @@ export const Impersonation: Story = {
 				trust: "unknown",
 				firstSeenLabel: "today",
 			},
-			category: { value: "Phishing" },
+			category: { value: "automated" },
 			authenticity: {
 				verdict: "mismatch",
 				fromDomain: "your-bank.example",
@@ -136,7 +136,7 @@ export const UnreadableSender: Story = {
 				firstSeenLabel: "today",
 				addressUnverified: true,
 			},
-			category: { value: "Phishing" },
+			category: { value: "uncategorized" },
 			authenticity: {
 				verdict: "mismatch",
 				fromDomain: "",

package/src/components/intelligence-panel.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import type { ReactElement, ReactNode } from "react";
 import { cn } from "../lib/cn.js";
+import { categoryTone, type ThreadCategory } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
@@ -128,7 +129,7 @@ export interface SenderFlagsIntel {
 export interface IntelligenceData {
 	sender: SenderIntel;
 	authenticity: AuthenticityIntel;
-	category: { value: string; overridden?: boolean };
+	category: { value: ThreadCategory; overridden?: boolean };
 	flags?: SenderFlagsIntel;
 	similar: SimilarMessageIntel[];
 }
@@ -395,7 +396,6 @@ export function IntelligencePanel({
 	notSpamPending = false,
 }: IntelligencePanelProps) {
 	const { sender, authenticity, category, flags = {}, similar } = data;
-	const suspicious = authenticity.verdict === "mismatch";
 
 	return (
 		<aside
@@ -430,9 +430,7 @@ export function IntelligencePanel({
 
 			<Section label="Category">
 				<div className="flex items-center gap-2">
-					<Badge tone={suspicious ? "danger" : "neutral"}>
-						{category.value}
-					</Badge>
+					<Badge tone={categoryTone[category.value]}>{category.value}</Badge>
 					{category.overridden && (
 						<span className="text-2xs text-fg-subtle">your override</span>
 					)}

package/src/components/mobile-reading-pane.render.test.ts

@@ -52,7 +52,7 @@ const intelligence: IntelligenceData = {
 		fromDomain: "example.com",
 		summary: "Verified.",
 	},
-	category: { value: "Personal" },
+	category: { value: "personal" },
 	similar: [],
 };
 

package/src/components/reading-pane.stories.tsx

@@ -203,6 +203,27 @@ export const ExpandedRowComposed: StoryObj<typeof ExpandedMessage> = {
 	),
 };
 
+/** The chevron beside the sender is the disclosure control, not a picture of
+ *  one: press it to put the message away and press the row to bring it back.
+ *  Reclaiming the space a long message takes is what a reader aims at it for. */
+export const RowDisclosure: StoryObj<typeof ExpandedMessage> = {
+	render: function RowDisclosureRender() {
+		const [expanded, setExpanded] = useState(true);
+		return (
+			<div className="max-w-3xl border border-line">
+				{expanded ? (
+					<ExpandedMessage
+						message={row}
+						onHeaderClick={() => setExpanded(false)}
+					/>
+				) : (
+					<CollapsedMessage message={row} onClick={() => setExpanded(true)} />
+				)}
+			</div>
+		);
+	},
+};
+
 /** The app owns the fetch and hands the row its state back; so does this. */
 const ThreadAttachments = () => {
 	const [rows, setRows] = useState<AttachmentItem[]>([

package/src/components/reading-pane.tsx

@@ -184,7 +184,23 @@ export function ExpandedMessage({
 			)}
 		>
 			<div className="flex items-start gap-3">
-				<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				{/* The chevron is the disclosure control, not a picture of one: it is
+				    what a reader aims at to put a message away, so it carries the
+				    collapse itself rather than sitting beside the sender block that
+				    does. */}
+				{onHeaderClick ? (
+					<button
+						type="button"
+						onClick={onHeaderClick}
+						aria-expanded={true}
+						aria-label="Collapse message"
+						className="mt-1 shrink-0 text-fg-subtle transition-colors hover:text-fg"
+					>
+						<ChevronDown className="size-3.5" />
+					</button>
+				) : (
+					<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				)}
 				<Avatar name={message.fromName} email={message.fromEmail} size="md" />
 				<div className="min-w-0 flex-1">
 					{onHeaderClick ? (

package/src/index.ts

@@ -30,6 +30,7 @@ export {
 	type Density,
 	INTELLIGENCE_MIN_WIDTH,
 	isBriefCategory,
+	isThreadCategory,
 	type MessageListKeyboard,
 	type MessageListSelection,
 	type NarrowView,