@remit/ui 0.0.130 → 0.0.132

package/package.json

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

package/src/components/compose-action-bar.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof ComposeActionBar> = {
 		onSend: fn(),
 		onBlocked: fn(),
 		onDiscard: fn(),
-		saveStatus: "idle",
+		save: { status: "idle" },
 	},
 };
 export default meta;
@@ -26,11 +26,35 @@ type Story = StoryObj<typeof ComposeActionBar>;
 
 export const Ready: Story = {};
 
-export const Saving: Story = { args: { saveStatus: "saving" } };
+export const Saving: Story = { args: { save: { status: "saving" } } };
 
-export const Saved: Story = { args: { saveStatus: "saved" } };
+export const Saved: Story = { args: { save: { status: "saved" } } };
 
-export const SaveFailed: Story = { args: { saveStatus: "error" } };
+export const SaveFailed: Story = { args: { save: { status: "error" } } };
+
+/**
+ * Nothing has been written to the server yet and nothing will be until the
+ * draft has a To address to be created against. Silence here was the worst of
+ * both: the text was not being kept, and the composer looked exactly like one
+ * that had nothing to keep. The sentence names To rather than "a recipient",
+ * which a message addressed only in Cc already has.
+ */
+export const NotSavedYet: Story = {
+	name: "Unsaved — the draft has no To address yet",
+	args: {
+		send: { status: "blocked", reason: "Add a To address before sending." },
+		save: {
+			status: "unsaved",
+			reason: "Not saved — add a To address to keep this draft.",
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("status")).toHaveTextContent(
+			"Not saved — add a To address to keep this draft.",
+		);
+	},
+};
 
 export const Sending: Story = {
 	name: "Sending — also while the pending draft is written",
@@ -45,7 +69,7 @@ export const Sending: Story = {
 export const NoRecipient: Story = {
 	name: "Blocked — nobody to send to",
 	args: {
-		send: { status: "blocked", reason: "Add at least one recipient." },
+		send: { status: "blocked", reason: "Add a To address before sending." },
 	},
 	render: (args) => {
 		const [reason, setReason] = useState<string>();
@@ -74,7 +98,7 @@ export const NoRecipient: Story = {
 		const canvas = within(canvasElement);
 		await userEvent.click(canvas.getByRole("button", { name: "Send" }));
 		await expect(canvas.getByTestId("compose-unavailable")).toHaveTextContent(
-			"Add at least one recipient.",
+			"Add a To address before sending.",
 		);
 		await expect(args.onSend).not.toHaveBeenCalled();
 	},

package/src/components/compose-action-bar.tsx

@@ -1,7 +1,20 @@
 import { Loader2, Send, Trash2 } from "lucide-react";
 import { Button } from "./button.js";
 
-export type ComposeSaveStatus = "idle" | "saving" | "saved" | "error";
+/**
+ * What the draft is doing, and — when it is not being saved — the sentence that
+ * says why. Built the same way as `ComposeSendState` and for the same reason:
+ * a composer holding text it is not persisting must never be able to say so
+ * without saying what is missing. The bare "idle" this replaces rendered
+ * nothing at all, so a message that could not be saved yet looked identical to
+ * one that had nothing to save.
+ */
+export type ComposeSaveState =
+	| { status: "idle" }
+	| { status: "saving" }
+	| { status: "saved" }
+	| { status: "error" }
+	| { status: "unsaved"; reason: string };
 
 /**
  * Whether Send can act, and when it cannot, the sentence that says why.
@@ -22,20 +35,25 @@ export interface ComposeActionBarProps {
 	/** Called with the reason when Send is pressed while it cannot act. */
 	onBlocked: (reason: string) => void;
 	onDiscard: () => void;
-	saveStatus?: ComposeSaveStatus;
+	save?: ComposeSaveState;
 }
 
-const SaveStatusIndicator = ({ status }: { status: ComposeSaveStatus }) => {
-	if (status === "saving") {
+const SaveStateIndicator = ({ save }: { save: ComposeSaveState }) => {
+	if (save.status === "saving") {
 		return (
-			<span className="animate-pulse text-xs text-fg-muted">Saving...</span>
+			<output className="animate-pulse text-xs text-fg-muted">Saving...</output>
 		);
 	}
-	if (status === "saved") {
-		return <span className="text-xs text-fg-muted">Draft saved</span>;
+	if (save.status === "saved") {
+		return <output className="text-xs text-fg-muted">Draft saved</output>;
+	}
+	if (save.status === "error") {
+		return <output className="text-xs text-danger">Save failed</output>;
 	}
-	if (status === "error") {
-		return <span className="text-xs text-danger">Save failed</span>;
+	if (save.status === "unsaved") {
+		return (
+			<output className="truncate text-xs text-warning">{save.reason}</output>
+		);
 	}
 	return null;
 };
@@ -51,7 +69,7 @@ export function ComposeActionBar({
 	onSend,
 	onBlocked,
 	onDiscard,
-	saveStatus = "idle",
+	save = { status: "idle" },
 }: ComposeActionBarProps) {
 	const sending = send.status === "sending";
 	const blockedReason = send.status === "blocked" ? send.reason : undefined;
@@ -84,7 +102,7 @@ export function ComposeActionBar({
 				>
 					Send
 				</Button>
-				<SaveStatusIndicator status={saveStatus} />
+				<SaveStateIndicator save={save} />
 			</div>
 			<Button
 				variant="ghost"

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/index.ts

@@ -166,7 +166,7 @@ export { Checkbox, type CheckboxProps } from "./components/checkbox.js";
 export {
 	ComposeActionBar,
 	type ComposeActionBarProps,
-	type ComposeSaveStatus,
+	type ComposeSaveState,
 	type ComposeSendState,
 } from "./components/compose-action-bar.js";
 export {