@remit/ui 0.0.157 → 0.0.158

package/package.json

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

package/src/components/event-detail.render.test.ts

@@ -124,3 +124,34 @@ describe("EventDetail", () => {
 		assert.match(html, /Recent mail · Priya Natarajan/);
 	});
 });
+
+/**
+ * A host that cannot write yet — the calendar before its API lands — passes
+ * neither action. A button that leads nowhere is worse than no button, so the
+ * header has to come back without them rather than with two that do nothing.
+ */
+describe("EventDetail with nowhere to write", () => {
+	const readOnly = renderToString(
+		createElement(EventDetail, {
+			event,
+			calendar,
+			whenText: "Wednesday 10 June · 10:00 – 11:30",
+			onClose: () => undefined,
+		}),
+	);
+
+	it("offers neither Edit nor Delete", () => {
+		assert.doesNotMatch(readOnly, />Edit</);
+		assert.doesNotMatch(readOnly, />Delete</);
+	});
+
+	it("still names the event, its calendar and when it is", () => {
+		assert.match(readOnly, /Q3 roadmap review/);
+		assert.match(readOnly, /Northwind/);
+		assert.match(readOnly, /10:00 – 11:30/);
+	});
+
+	it("keeps the way out of the pane", () => {
+		assert.match(readOnly, /aria-label="Close event"/);
+	});
+});

package/src/components/event-detail.stories.tsx

@@ -176,3 +176,20 @@ export const AmbiguousZone: Story = {
 		/>
 	),
 };
+
+/**
+ * The state the app itself renders while the calendar has no API to write
+ * through: the facts, the way back to the thread, and no control that would
+ * lead nowhere.
+ */
+export const NoActions: Story = {
+	render: () => (
+		<EventDetail
+			event={base}
+			calendar={calendar}
+			whenText="Wednesday 10 June · 10:00 – 11:30"
+			onClose={() => {}}
+			onOpenThread={() => {}}
+		/>
+	),
+};

package/src/components/event-detail.tsx

@@ -23,8 +23,13 @@ export interface EventDetailProps {
 	calendar: CalendarDescriptor;
 	/** Already formatted by the caller — the component owns no clock. */
 	whenText: string;
-	onEdit: () => void;
-	onDelete: () => void;
+	/**
+	 * Absent where the surface cannot write yet. A control that leads nowhere is
+	 * worse than no control, so the header renders each one only when it has
+	 * somewhere to go.
+	 */
+	onEdit?: () => void;
+	onDelete?: () => void;
 	/** Absent when the event was never born from a mail. */
 	onOpenThread?: () => void;
 	/** Puts the pane back to whatever it shows with nothing selected. */
@@ -171,23 +176,27 @@ export function EventDetail({
 				<span className="min-w-0 flex-1 truncate text-xs text-fg-muted">
 					{calendar.name} · {calendar.accountLabel}
 				</span>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Pencil className="size-3.5" />}
-					onClick={onEdit}
-				>
-					Edit
-				</Button>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Trash2 className="size-3.5" />}
-					onClick={onDelete}
-					className="text-danger"
-				>
-					Delete
-				</Button>
+				{onEdit && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Pencil className="size-3.5" />}
+						onClick={onEdit}
+					>
+						Edit
+					</Button>
+				)}
+				{onDelete && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Trash2 className="size-3.5" />}
+						onClick={onDelete}
+						className="text-danger"
+					>
+						Delete
+					</Button>
+				)}
 				{onClose && (
 					<button
 						type="button"

package/src/components/nav-sidebar.tsx

@@ -560,9 +560,9 @@ export interface NavSidebarProps
 	 */
 	linkComponent?: NavLinkComponent;
 	/**
-	 * Whether the calendar destination sits under the daily brief. It is
-	 * "hidden" until the app has a route behind it — the prototype turns it on,
-	 * the shipping nav does not offer an entry that leads nowhere.
+	 * Whether the calendar destination sits under the daily brief. Hidden by
+	 * default so a host with no calendar route behind it does not offer an entry
+	 * that leads nowhere.
 	 */
 	calendarNav?: "hidden" | "shown";
 	/** Every saved query, most recently saved first. See `SavedSearchesGroup`. */