@remit/ui 0.0.147 → 0.0.149

package/package.json

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

package/src/components/mail-action-toolbar.stories.tsx

@@ -0,0 +1,56 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { MailActionToolbar } from "./mail-action-toolbar.js";
+
+const meta: Meta<typeof MailActionToolbar> = {
+	title: "Kit/MailActionToolbar",
+	component: MailActionToolbar,
+	parameters: { layout: "centered" },
+	decorators: [
+		((Story) => (
+			<div
+				className="overflow-hidden rounded-lg border border-line"
+				style={{ width: 720 }}
+			>
+				<Story />
+			</div>
+		)) satisfies Decorator,
+	],
+	args: {
+		hasThread: true,
+		onReply: () => undefined,
+		onReplyAll: () => undefined,
+		onForward: () => undefined,
+		onDelete: () => undefined,
+		onMove: () => undefined,
+		onToggleStar: () => undefined,
+		onUnavailable: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof MailActionToolbar>;
+
+/** The conversation has answered and the open message is not starred. */
+export const Default: Story = { args: { isStarred: false } };
+
+/** The open message is starred: the star is lit and reads as pressed. It
+ *  follows the conversation, not the list row that opened it (#602). */
+export const Starred: Story = { args: { isStarred: true } };
+
+/** The conversation has not answered yet, so the star state is unknown. The
+ *  button omits `aria-pressed` rather than announcing "not pressed" for a
+ *  message that may well be starred. */
+export const StarUnknown: Story = { args: { isStarred: undefined } };
+
+/** The mobile pane's management bar already owns triage, so the toolbar drops
+ *  the cluster instead of offering a second set of the same accessible names. */
+export const WithoutTriage: Story = { args: { showTriage: false } };
+
+/** No message open: the verbs no-op and the bar surfaces a one-line reason
+ *  instead of disabling. */
+export const NoMessageOpen: Story = {
+	args: {
+		hasThread: false,
+		unavailableHint: "Open a message first",
+	},
+};

package/src/components/mail-action-toolbar.tsx

@@ -32,6 +32,11 @@ export interface MailActionToolbarProps {
 	onUnavailable?: (action: MailAction) => void;
 	/** A one-line inline notice rendered under the toolbar (e.g. "Open a message first"). */
 	unavailableHint?: ReactNode;
+	/**
+	 * Whether the open message is starred. Undefined until the conversation
+	 * says — the button then omits `aria-pressed` rather than announcing an
+	 * unstarred state it does not know yet.
+	 */
 	isStarred?: boolean;
 	/**
 	 * Whether to render the triage cluster (move-to-trash / move / flag).
@@ -166,6 +171,7 @@ export function MailActionToolbar({
 							}
 							title={flagTitle}
 							aria-label="Star"
+							aria-pressed={isStarred}
 							onClick={act("flag", onToggleStar)}
 						/>
 					</>

package/src/components/role-appointment-list.stories.tsx

@@ -100,23 +100,12 @@ function Harness({
 	const [displayNames, setDisplayNames] = useState<Record<string, string>>({});
 
 	const handleAppoint = (role: FolderRole, mailboxId: string | null) => {
-		setAppointments((prev) => {
-			const next: Record<string, RoleAppointment> = {
-				...prev,
-				[role]: mailboxId
-					? { mailboxId, source: "Appointed" }
-					: { mailboxId: null, source: "None" },
-			};
-			// Exclusivity: appointing a folder to one role clears it from any other.
-			if (mailboxId) {
-				for (const other of Object.keys(next)) {
-					if (other === role) continue;
-					if (next[other]?.mailboxId !== mailboxId) continue;
-					next[other] = { mailboxId: null, source: "None" };
-				}
-			}
-			return next;
-		});
+		setAppointments((prev) => ({
+			...prev,
+			[role]: mailboxId
+				? { mailboxId, source: "Appointed" }
+				: { mailboxId: null, source: "None" },
+		}));
 	};
 
 	const handleRename = (mailboxId: string, name: string) =>

package/src/components/role-appointment-list.tsx

@@ -300,10 +300,9 @@ export function RoleAppointmentList({
 				</h2>
 				<p className="text-xs text-fg-muted">
 					Each role points to one folder. Pick the folder that holds the mail —
-					the counts help you tell real folders from empty look-alikes.
-					Appointing a folder here removes it from any other role. Each row says
-					where its answer came from — your choice, the mail server's own flag,
-					or a name reader matched.
+					the counts help you tell real folders from empty look-alikes. Each row
+					says where its answer came from — your choice, the mail server's own
+					flag, or a name reader matched.
 				</p>
 			</header>
 			<div className="rounded-sm border border-line bg-surface">