@remit/ui 0.0.9 → 0.0.10

package/package.json

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

package/src/components/app-shell.tsx

@@ -269,9 +269,7 @@ function AppShellReading({
 			thread={thread}
 			intelligenceOpen={showIntelligence}
 			onToggleIntelligence={onToggleIntelligence}
-			showIntelligenceToggle={
-				isWide && Boolean(intelligence) && Boolean(thread)
-			}
+			canToggleIntelligence={isWide && Boolean(intelligence) && Boolean(thread)}
 		/>
 	);
 }

package/src/components/intelligence-toggle.render.test.ts

@@ -0,0 +1,37 @@
+/**
+ * Render invariants for the (i) intelligence toggle (#52): the control holds
+ * its slot in the toolbar on every view and in every selection state, and
+ * reports "cannot act" by being disabled rather than by disappearing.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { IntelligenceToggle } from "./intelligence-toggle.js";
+
+const render = (props: Parameters<typeof IntelligenceToggle>[0]): string =>
+	renderToString(createElement(IntelligenceToggle, props));
+
+describe("IntelligenceToggle", () => {
+	it("renders the button when it cannot act", () => {
+		const html = render({ enabled: false });
+		assert.match(html, /aria-label="Show intelligence sidebar"/);
+	});
+
+	it("disables rather than hides the button when it cannot act", () => {
+		const html = render({ enabled: false });
+		assert.match(html, /\sdisabled(=""|\s|>)/);
+	});
+
+	it("is pressable when a thread is open and a rail exists", () => {
+		const html = render({ enabled: true });
+		assert.equal(/\sdisabled(=""|\s|>)/.test(html), false);
+	});
+
+	it("stays rendered while the rail is open so it can close it again", () => {
+		const html = render({ enabled: true, open: true });
+		assert.match(html, /aria-label="Hide intelligence sidebar"/);
+		assert.match(html, /aria-pressed="true"/);
+	});
+});

package/src/components/intelligence-toggle.tsx

@@ -0,0 +1,53 @@
+import { Info } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export interface IntelligenceToggleProps {
+	/** Whether the intelligence rail is currently open. */
+	open?: boolean;
+	/**
+	 * Whether the toggle can act right now — a rail exists for this view, the
+	 * width allows it, and a thread is open. When false the button still renders,
+	 * greyed out (#52).
+	 */
+	enabled?: boolean;
+	onToggle?: () => void;
+	className?: string;
+}
+
+/**
+ * The (i) intelligence-rail toggle in the reading-pane toolbar.
+ *
+ * The toolbar's control set is fixed: the toggle occupies the same slot on
+ * every view and in every selection state, and reports that it cannot act by
+ * being disabled rather than by vanishing (#52). A control that appears and
+ * disappears moves its neighbours and leaves the user with nothing to learn
+ * from; a greyed-out one stays where they last saw it.
+ *
+ * The title names the control rather than the reason it is off. There are three
+ * reasons (nothing selected, a window too narrow for the rail, a view with no
+ * rail), a disabled `Button` is `pointer-events-none` so no tooltip surfaces
+ * anyway, and a reason string that covers one case is wrong in the other two.
+ */
+export function IntelligenceToggle({
+	open = false,
+	enabled = true,
+	onToggle,
+	className,
+}: IntelligenceToggleProps) {
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Info className="size-4" />}
+			title="Intelligence"
+			aria-label={
+				open ? "Hide intelligence sidebar" : "Show intelligence sidebar"
+			}
+			aria-pressed={open}
+			disabled={!enabled}
+			onClick={onToggle}
+			className={cn(open && "bg-accent-2-soft text-accent-2", className)}
+		/>
+	);
+}

package/src/components/reading-pane.stories.tsx

@@ -88,7 +88,7 @@ export const Newsletter: Story = { args: { thread: newsletterThread } };
 export const Empty: Story = { args: { thread: undefined } };
 
 export const WithIntelligenceToggle: Story = {
-	args: { thread, showIntelligenceToggle: true, intelligenceOpen: false },
+	args: { thread, canToggleIntelligence: true, intelligenceOpen: false },
 };
 
 /* ------------------------------------------------------------------ */

package/src/components/reading-pane.tsx

@@ -1,7 +1,6 @@
 import {
 	ChevronDown,
 	ChevronRight,
-	Info,
 	Search,
 	ShieldAlert,
 	SquarePen,
@@ -13,6 +12,7 @@ import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { IntelligenceToggle } from "./intelligence-toggle.js";
 import { MailActionToolbar } from "./mail-action-toolbar.js";
 import { MessageBodyView } from "./message-body-view.js";
 import { ReadingPaneEmpty } from "./reading-pane-empty.js";
@@ -248,19 +248,21 @@ export function ExpandedMessage({
  * Message action toolbar on the pane-header datum: the reading pane's
  * verbs (reply/reply-all/forward, delete/move/flag) plus search and
  * compose, Apple Mail-style above the message area. Built on the shared
- * `MailActionToolbar` so the buttons stay pressable with no thread open and
- * explain inline rather than greying out (the never-disable tenet).
+ * `MailActionToolbar` so the mail verbs stay pressable with no
+ * thread open and explain inline rather than greying out (the never-disable
+ * tenet). The intelligence toggle is the exception: it holds its slot and greys
+ * out when there is no rail to open (#52).
  */
 function MessageToolbar({
 	hasThread,
 	intelligenceOpen,
 	onToggleIntelligence,
-	showIntelligenceToggle,
+	canToggleIntelligence = false,
 }: {
 	hasThread: boolean;
 	intelligenceOpen?: boolean;
 	onToggleIntelligence?: () => void;
-	showIntelligenceToggle?: boolean;
+	canToggleIntelligence?: boolean;
 }) {
 	const [hint, setHint] = useState<string | null>(null);
 	return (
@@ -284,15 +286,11 @@ function MessageToolbar({
 				title="Compose (⌘N)"
 				aria-label="Compose"
 			/>
-			{showIntelligenceToggle && !intelligenceOpen && (
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Info className="size-4" />}
-					onClick={onToggleIntelligence}
-					aria-label="Show intelligence sidebar"
-				/>
-			)}
+			<IntelligenceToggle
+				open={intelligenceOpen}
+				enabled={canToggleIntelligence}
+				onToggle={onToggleIntelligence}
+			/>
 		</MailActionToolbar>
 	);
 }
@@ -301,12 +299,12 @@ export function ReadingPane({
 	thread,
 	intelligenceOpen,
 	onToggleIntelligence,
-	showIntelligenceToggle,
+	canToggleIntelligence,
 }: {
 	thread?: ThreadData;
 	intelligenceOpen?: boolean;
 	onToggleIntelligence?: () => void;
-	showIntelligenceToggle?: boolean;
+	canToggleIntelligence?: boolean;
 }) {
 	return (
 		<article className="flex h-full w-full min-w-0 flex-col bg-canvas">
@@ -314,7 +312,7 @@ export function ReadingPane({
 				hasThread={Boolean(thread)}
 				intelligenceOpen={intelligenceOpen}
 				onToggleIntelligence={onToggleIntelligence}
-				showIntelligenceToggle={showIntelligenceToggle}
+				canToggleIntelligence={canToggleIntelligence}
 			/>
 
 			{!thread ? (

package/src/index.ts

@@ -144,6 +144,10 @@ export {
 	type SimilarMessageLinkProps,
 	type SimilarState,
 } from "./components/intelligence-panel.js";
+export {
+	IntelligenceToggle,
+	type IntelligenceToggleProps,
+} from "./components/intelligence-toggle.js";
 export {
 	IsolatedEmailFrame,
 	type IsolatedEmailFrameProps,