@remit/ui 0.0.130 → 0.0.131

package/package.json

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

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" },
 };