@remit/ui 0.0.129 → 0.0.131

package/package.json

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

package/src/components/mail-action-toolbar.tsx

@@ -24,9 +24,10 @@ export interface MailActionToolbarProps {
 	/** Whether a thread is open. Drives the no-op-explain behaviour, never `disabled`. */
 	hasThread: boolean;
 	/**
-	 * Fired when an action button is pressed with no thread open. The host
-	 * surfaces a one-line inline explanation — never a toast, never a disabled
-	 * button (`doc/rules/ux.md`: never disable a control).
+	 * Fired when an action button is pressed and there is nothing behind it —
+	 * no thread open, or no handler wired for that verb. The host surfaces a
+	 * one-line inline explanation — never a toast, never a disabled button
+	 * (`doc/rules/ux.md`: never disable a control).
 	 */
 	onUnavailable?: (action: MailAction) => void;
 	/** A one-line inline notice rendered under the toolbar (e.g. "Open a message first"). */
@@ -59,10 +60,12 @@ export interface MailActionToolbarProps {
 
 /**
  * The reading-pane action toolbar, shared between the remit-ui AppShell
- * reference and the live client. Buttons are always pressable: with no thread
- * open they no-op and call `onUnavailable(action)` so the host can explain why,
- * rather than greying out (the never-disable tenet — a `disabled` button gives
- * the user no path to learn what it does or what they must do first).
+ * reference and the live client. Buttons are always pressable: where a press
+ * cannot act — no thread open, or no handler wired for that verb — it calls
+ * `onUnavailable(action)` so the host can explain why, rather than greying out
+ * (the never-disable tenet — a `disabled` button gives the user no path to
+ * learn what it does or what they must do first). Every press is answered; the
+ * bar has no branch that ends in silence.
  */
 export function MailActionToolbar({
 	hasThread,
@@ -85,12 +88,16 @@ export function MailActionToolbar({
 	children,
 	className,
 }: MailActionToolbarProps) {
+	// A verb with no handler behind it is unavailable in exactly the way one with
+	// no thread is, and says so the same way. Dropping the press instead left the
+	// three reply verbs pressable and mute for as long as a host took to wire
+	// them (#803).
 	const act = (action: MailAction, handler?: () => void) => () => {
-		if (!hasThread) {
+		if (!hasThread || !handler) {
 			onUnavailable?.(action);
 			return;
 		}
-		handler?.();
+		handler();
 	};
 
 	return (
@@ -166,7 +173,7 @@ export function MailActionToolbar({
 				<div className="flex-1" />
 				{children}
 			</header>
-			{!hasThread && unavailableHint && (
+			{unavailableHint && (
 				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
 				<p
 					role="status"

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

@@ -46,6 +46,21 @@ describe("OutboxRow", () => {
 		assert.doesNotMatch(html, /disabled=""/);
 	});
 
+	it("offers only delete for an unfiled row and names the reason", () => {
+		const html = renderToString(
+			createElement(OutboxRow, {
+				...baseProps,
+				status: "unfiled",
+				error: "this account has no Sent folder",
+			}),
+		);
+		assert.match(html, /Sent, not filed/);
+		assert.match(html, /this account has no Sent folder/);
+		assert.match(html, /aria-label="Delete message"/);
+		assert.doesNotMatch(html, /aria-label="Retry sending"/);
+		assert.doesNotMatch(html, /aria-label="Edit as draft"/);
+	});
+
 	it("omits retry for a blocked row but keeps edit and delete", () => {
 		const html = renderToString(
 			createElement(OutboxRow, {

package/src/components/outbox-row.stories.tsx

@@ -24,6 +24,14 @@ export const Sending: Story = { args: { status: "sending" } };
 
 export const Sent: Story = { args: { status: "sent" } };
 
+export const Unfiled: Story = {
+	args: {
+		status: "unfiled",
+		error:
+			"Sent, but not filed: this account has no Sent folder. Create one named Sent and later messages will be filed there.",
+	},
+};
+
 export const Failed: Story = {
 	args: {
 		status: "failed",

package/src/components/outbox-row.tsx

@@ -11,7 +11,7 @@ export interface OutboxRowProps {
 	/** Pre-formatted timestamp shown at the row's trailing edge. */
 	time: string;
 	status: OutboxStatus;
-	/** Surfaced after the status label for failed/blocked rows. */
+	/** Surfaced after the status label for failed, blocked and unfiled rows. */
 	error?: string;
 	selected?: boolean;
 	onSelect: () => void;
@@ -26,7 +26,7 @@ export interface OutboxRowProps {
 const tintForStatus = (status: OutboxStatus, selected?: boolean): string => {
 	if (selected) return "bg-accent-2-soft";
 	if (status === "failed") return "bg-danger-soft";
-	if (status === "blocked") return "bg-warning/10";
+	if (status === "blocked" || status === "unfiled") return "bg-warning/10";
 	return "";
 };
 
@@ -49,7 +49,8 @@ export function OutboxRow({
 	onDelete,
 	deleting,
 }: OutboxRowProps) {
-	const showActions = status === "failed" || status === "blocked";
+	const showActions =
+		status === "failed" || status === "blocked" || status === "unfiled";
 
 	return (
 		<div
@@ -96,12 +97,16 @@ export function OutboxRow({
 										} as const,
 									]
 								: []),
-							{
-								label: "Edit as draft",
-								iconOnly: true,
-								icon: <Send className="size-3.5" />,
-								onClick: onEdit,
-							},
+							...(status === "unfiled"
+								? []
+								: [
+										{
+											label: "Edit as draft",
+											iconOnly: true,
+											icon: <Send className="size-3.5" />,
+											onClick: onEdit,
+										} as const,
+									]),
 						]}
 						destructive={{
 							label: "Delete message",

package/src/components/outbox-status-badge.tsx

@@ -8,7 +8,13 @@ import {
 import { cn } from "../lib/cn.js";
 
 /** The non-draft outbox lifecycle states (drafts live in a separate view). */
-export type OutboxStatus = "queued" | "sending" | "sent" | "failed" | "blocked";
+export type OutboxStatus =
+	| "queued"
+	| "sending"
+	| "sent"
+	| "unfiled"
+	| "failed"
+	| "blocked";
 
 interface StatusConfig {
 	icon: typeof Clock;
@@ -26,6 +32,11 @@ export const outboxStatusConfig: Record<OutboxStatus, StatusConfig> = {
 		spin: true,
 	},
 	sent: { icon: CheckCircle, label: "Sent", className: "text-positive" },
+	unfiled: {
+		icon: AlertTriangle,
+		label: "Sent, not filed",
+		className: "text-warning",
+	},
 	failed: { icon: AlertCircle, label: "Failed", className: "text-danger" },
 	blocked: { icon: AlertTriangle, label: "Blocked", className: "text-warning" },
 };

package/src/components/reading-pane.tsx

@@ -288,7 +288,16 @@ function MessageToolbar({
 	return (
 		<MailActionToolbar
 			hasThread={hasThread}
-			onUnavailable={() => setHint("Open a message first")}
+			// This shell documents the layout and has no mail behind its verbs, so
+			// with a thread open a press says that rather than borrowing the line
+			// about opening one.
+			onUnavailable={() =>
+				setHint(
+					hasThread
+						? "Not wired in the layout reference"
+						: "Open a message first",
+				)
+			}
 			unavailableHint={hint}
 		>
 			<IntelligenceToggle