@remit/ui 0.0.131 → 0.0.132

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.131",
+  "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/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 {