@remit/web-client 0.0.160 → 0.0.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.160",
+  "version": "0.0.162",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -14,6 +14,7 @@ import {
 	ComposeFormShell,
 	ComposeHeader,
 	type ComposeSendState,
+	type ComposeShellLayout,
 	ComposeSubjectField,
 	composeHeaderSummary,
 	defaultComposeLanguages,
@@ -67,6 +68,12 @@ interface ComposeFormProps {
 	sourceMessage?: RemitImapDescribeMessageResponse;
 	onClose: () => void;
 	onAccountChange?: (account: RemitImapAccountResponse) => void;
+	/**
+	 * How the surface takes its height. A window in its own pane fills that
+	 * pane; one opened as a block of the conversation grows with what is written
+	 * in it and leaves the pane the only scroller.
+	 */
+	layout?: ComposeShellLayout;
 }
 
 const escapeHtml = (text: string): string =>
@@ -301,6 +308,7 @@ export const ComposeForm = ({
 	sourceMessage,
 	onClose,
 	onAccountChange,
+	layout = "fill",
 }: ComposeFormProps) => {
 	const { state, setOutboxMessageId, startSendPolling } = useCompose();
 	const { pushError } = useErrorBanners();
@@ -751,6 +759,7 @@ export const ComposeForm = ({
 
 	return (
 		<ComposeFormShell
+			layout={layout}
 			banner={
 				selectedAccount && selectedAccountMissingSmtp ? (
 					<ComposeSmtpMissingBanner

package/src/components/compose/InlineCompose.tsx

@@ -12,22 +12,22 @@ interface InlineComposeProps {
 	onClose: () => void;
 }
 
+/**
+ * The reply, as the top block of the conversation it answers. It takes no
+ * height of its own: it is as tall as what has been written in it and pushes
+ * the thread down as that grows, so the pane keeps the one scrollbar it had
+ * before the reply opened. A height here would give the pane a second one, with
+ * the caret in the inner track.
+ */
 export const InlineCompose = ({
 	mode,
 	account,
 	sourceMessage,
 	onClose,
 }: InlineComposeProps) => (
-	// Capped against the viewport as well as in pixels: on a short one — a phone
-	// in landscape, or one with the keyboard up — a flat 400px is taller than
-	// the pane, and the surface's own header scrolls off before its verbs do.
-	//
-	// A desktop pane has room a phone does not, so the surface takes a height
-	// there rather than a ceiling. Left to size itself, the recipient rows and
-	// the verbs come first and the writing area gets its 120px floor — a couple
-	// of lines to answer a message in.
-	<div className="border-t border-line bg-canvas max-h-[min(400px,60dvh)] flex flex-col lg:h-[min(560px,55dvh)] lg:max-h-none">
+	<div className="border-b border-line bg-canvas">
 		<ComposeForm
+			layout="flow"
 			mode={mode}
 			account={account}
 			sourceMessage={sourceMessage}

package/src/components/mail/ConversationView.tsx

@@ -122,8 +122,9 @@ export const ConversationView = ({
 		error,
 		refetch,
 	} = useQuery({
-		// The API reads a conversation oldest first (#81) and the pane renders it
-		// in that order, so no `order` is asked for and none is re-sorted here.
+		// The API reads a conversation oldest first (#81) and no `order` is asked
+		// for: which turn came first is the thread's own fact, and which end of it
+		// the pane puts at the top is the pane's.
 		...threadDetailOperationsListThreadMessagesOptions({
 			path: { threadId },
 		}),
@@ -134,6 +135,11 @@ export const ConversationView = ({
 		[messagesResponse?.items],
 	);
 	const latestMessage = messages[messages.length - 1];
+
+	// Newest first, under the reply that answers it. The turn a reader came for
+	// is the last one, and reading it should not cost a scroll past everything
+	// that led to it.
+	const orderedMessages = useMemo(() => [...messages].reverse(), [messages]);
 	const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
 	// Track which messages are expanded
@@ -158,7 +164,7 @@ export const ConversationView = ({
 				if (selected) initialExpanded.add(selected.threadMessageId);
 			}
 			setExpandedIds(initialExpanded);
-			setFocusedIndex(messages.length - 1);
+			setFocusedIndex(0);
 		}
 	}, [threadId, messages, currentThreadId, selectedMessageId]);
 
@@ -174,38 +180,39 @@ export const ConversationView = ({
 		});
 	}, []);
 
-	// Scroll focused message into view
+	// Scroll focused message into view. j and k walk the pane as it reads, so
+	// the index they move is over the displayed order, not the fetched one.
 	const scrollToMessage = useCallback(
 		(index: number) => {
-			const message = messages[index];
+			const message = orderedMessages[index];
 			if (!message) return;
 			const element = messageRefs.current.get(message.threadMessageId);
 			element?.scrollIntoView({ behavior: "smooth", block: "nearest" });
 		},
-		[messages],
+		[orderedMessages],
 	);
 
 	// Keyboard navigation handlers
 	const focusNext = useCallback(() => {
-		if (messages.length === 0) return;
-		const nextIndex = Math.min(focusedIndex + 1, messages.length - 1);
+		if (orderedMessages.length === 0) return;
+		const nextIndex = Math.min(focusedIndex + 1, orderedMessages.length - 1);
 		setFocusedIndex(nextIndex);
 		scrollToMessage(nextIndex);
-	}, [messages.length, focusedIndex, scrollToMessage]);
+	}, [orderedMessages.length, focusedIndex, scrollToMessage]);
 
 	const focusPrevious = useCallback(() => {
-		if (messages.length === 0) return;
+		if (orderedMessages.length === 0) return;
 		const prevIndex = Math.max(focusedIndex - 1, 0);
 		setFocusedIndex(prevIndex);
 		scrollToMessage(prevIndex);
-	}, [messages.length, focusedIndex, scrollToMessage]);
+	}, [orderedMessages.length, focusedIndex, scrollToMessage]);
 
 	const toggleFocusedMessage = useCallback(() => {
-		const message = messages[focusedIndex];
+		const message = orderedMessages[focusedIndex];
 		if (message) {
 			toggleExpanded(message.threadMessageId);
 		}
-	}, [messages, focusedIndex, toggleExpanded]);
+	}, [orderedMessages, focusedIndex, toggleExpanded]);
 
 	const { data: config } = useQuery({
 		...configOperationsGetConfigOptions(),
@@ -282,25 +289,18 @@ export const ConversationView = ({
 		onComposeClose?.();
 	}, [onComposeClose]);
 
-	// Compose opens below the message, which on a long one is several screens
-	// down: without this, replying to it looks like nothing happening.
-	//
-	// Aligned on its bottom edge, where the send and discard verbs are, and held
-	// there while it changes height. It mounts before the message it quotes has
-	// been fetched and grows when that lands, so a single scroll at open time
-	// puts whatever it grows past back below the fold.
+	// Compose opens at the head of the pane, which from halfway down a long
+	// thread is several screens up: without this, replying looks like nothing
+	// happening. Aligned on its top edge, where the recipients are, and left
+	// alone afterwards — it grows downward as it is written into, so following
+	// its height would pull the rows being typed into off the top.
 	const composeRef = useRef<HTMLDivElement>(null);
 	useEffect(() => {
 		if (composeMode === null || composeOpenings === 0) return;
-		const surface = composeRef.current;
-		if (!surface) return;
-		const reveal = () =>
-			surface.scrollIntoView({ behavior: "smooth", block: "end" });
-		reveal();
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(reveal);
-		observer.observe(surface);
-		return () => observer.disconnect();
+		composeRef.current?.scrollIntoView({
+			behavior: "smooth",
+			block: "start",
+		});
 	}, [composeOpenings, composeMode]);
 
 	// Register keyboard shortcuts
@@ -357,8 +357,8 @@ export const ConversationView = ({
 	// wired whatever the account's SMTP state: compose is where an account that
 	// cannot send says so.
 	const renderMessages = (mobile: boolean) => (
-		<div>
-			{messages.map((message, index) => (
+		<div data-testid="conversation-messages">
+			{orderedMessages.map((message, index) => (
 				<div
 					key={message.threadMessageId}
 					ref={(el) => {
@@ -385,6 +385,21 @@ export const ConversationView = ({
 		</div>
 	);
 
+	// The reply leads the pane, above the turn it answers: what is being written
+	// is what the reader came back for, and it is not something to go looking
+	// for under a thread. It scrolls with the conversation rather than floating
+	// over it, so the pane has one scrollbar whether or not a reply is open.
+	const compose = composeMode !== null && (
+		<div ref={composeRef}>
+			<InlineCompose
+				mode={composeMode}
+				account={activeAccount}
+				sourceMessage={latestMessageData}
+				onClose={handleCloseCompose}
+			/>
+		</div>
+	);
+
 	// Subject block: matches the AppShell ReadingPane reference exactly —
 	// px-5 pt-5 pb-3, text-lg leading-snug, 2xs count. Subject scrolls
 	// with the thread body; no subject in the toolbar chrome.
@@ -419,17 +434,8 @@ export const ConversationView = ({
 						onOpenIntelligence={onOpenIntelligence}
 					/>
 				)}
+				{compose}
 				{renderMessages(true)}
-				{composeMode !== null && (
-					<div ref={composeRef}>
-						<InlineCompose
-							mode={composeMode}
-							account={activeAccount}
-							sourceMessage={latestMessageData}
-							onClose={handleCloseCompose}
-						/>
-					</div>
-				)}
 			</MobileReadingPane>
 		);
 	}
@@ -443,22 +449,12 @@ export const ConversationView = ({
 					onOpenIntelligence={onOpenIntelligence}
 				/>
 			)}
-			{/* The reply is part of the conversation, so it scrolls with it. Held
-			    below the pane instead, it took whatever height the message left
-			    over — nothing on a long one — and no amount of scrolling could
-			    reach it. */}
+			{/* The one scroller in the pane. The reply and the thread are both in
+			    it, so neither has a scrollbar of its own and neither is squeezed
+			    by the height the other takes. */}
 			<div className="min-h-0 flex-1 overflow-auto">
+				{compose}
 				{renderMessages(false)}
-				{composeMode !== null && (
-					<div ref={composeRef}>
-						<InlineCompose
-							mode={composeMode}
-							account={activeAccount}
-							sourceMessage={latestMessageData}
-							onClose={handleCloseCompose}
-						/>
-					</div>
-				)}
 			</div>
 		</article>
 	);

package/src/components/mail/MessageBody.tsx

@@ -68,8 +68,8 @@ interface MessageBodyProps {
 	category?: EmailRenderCategory;
 	/**
 	 * Extra classes for the `.message-body` wrapper. `MessageCard` leaves this
-	 * unset: the kit's `ExpandedMessage` runs the body edge to edge on a phone
-	 * and supplies the desktop inset itself.
+	 * unset: the kit's `ExpandedMessage` owns the gutter, and runs the sandboxed
+	 * email frame out of it so mail renders on its own ground.
 	 */
 	className?: string;
 }

package/src/components/mail/MessageCard.tsx

@@ -324,14 +324,11 @@ const ExpandedCard = ({
 							isTrusted={isTrusted}
 							category={toDisplayCategory(threadMessage.category)}
 						/>
-						{/* The body slot runs edge to edge on a phone; the attachment
-						    list is app chrome, not part of the email, so it takes the
-						    gutter back. */}
 						<MessageAttachments
 							messageId={threadMessage.messageId}
 							bodyParts={messageData?.bodyParts}
 							hasAttachment={threadMessage.hasAttachment}
-							className="mt-4 px-2 lg:px-0"
+							className="mt-4"
 						/>
 					</div>
 				)

package/src/components/mail/SelectionWizardHost.tsx

@@ -449,9 +449,10 @@ function SelectionWizardSession({
 	// is how a footer comes to name a screen nobody is looking at.
 	const current = steps[stepIndex(steps, step)];
 
-	// A filter and a folder both belong to one account, so a selection spanning
-	// accounts reaches neither and is told so on the step that asks (#477 5.5).
-	// The one-off scope acts on the messages themselves and is unaffected.
+	// A filter, a folder, and the preview that counts a widened door all belong to
+	// one account, so a selection spanning accounts reaches none of them and is
+	// told so on the step that asks (#477 5.5, #523). The one-off scope and the
+	// ticked rows act on the messages themselves and are unaffected.
 	const accountScoped = !crossAccount && !!accountId;
 	const ruleRestriction = accountScoped ? undefined : crossAccountRuleReason;
 	const folderRestriction = accountScoped
@@ -939,6 +940,7 @@ function SelectionWizardSession({
 			match={{
 				selectedCount: selection.length,
 				mode,
+				accountId: accountScoped ? accountId : undefined,
 				onModeChange: changeMode,
 				semanticUnavailable,
 				semanticErrorDetail:

package/src/components/mail/conversation-reply-reach.render.test.ts

@@ -1,15 +1,13 @@
 /**
  * Reading a message and answering it, on a desktop pane.
  *
- * The inline reply was held below the conversation rather than inside it. It
- * took whatever height the message left over, which on a normal-length one is
- * nothing: the recipient rows and the verbs stayed, the writing area went down
- * to a couple of lines, and scrolling the message could not reach it because
- * the thing to reach was already on screen and squeezed.
+ * The reply leads the pane and the thread reads newest first under it, so what
+ * is being written and the turn it answers are the two things at the top. Both
+ * live in the pane's own scrolling region: the reply has no height of its own
+ * and no scroller of its own, which is what kept a second scrollbar — with the
+ * caret in the inner one — out of a single column.
  *
- * The reply belongs to the conversation and scrolls with it, and the chevron
- * beside the sender is the control that puts a message away — reclaiming the
- * space is what a reader reaches for it to do.
+ * The chevron beside the sender is the control that puts a message away.
  */
 
 import assert from "node:assert/strict";
@@ -41,6 +39,24 @@ const MESSAGE_ID = "msg-1";
 
 const account = makeAccount({ accountId: ACCOUNT_ID });
 
+const OPENING_SENT = 1_767_139_200_000;
+const LATEST_SENT = 1_767_225_600_000;
+
+// The turn that opened the conversation, and the one that answered it. The API
+// hands them over oldest first (#81), which is the order this mock serves them
+// in — the pane is what decides which end of that goes at the top.
+const openingMessage: RemitImapThreadMessageResponse = makeThreadMessage({
+	messageId: "msg-0",
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	accountId: ACCOUNT_ID,
+	subject: "Lunch Thursday?",
+	fromName: "Grace Hopper",
+	fromEmail: "grace@example.com",
+	sentDate: OPENING_SENT,
+	isRead: true,
+});
+
 const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
 	messageId: MESSAGE_ID,
 	threadId: THREAD_ID,
@@ -49,6 +65,7 @@ const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
 	subject: "Lunch Thursday?",
 	fromName: "Ada Lovelace",
 	fromEmail: "ada@example.com",
+	sentDate: LATEST_SENT,
 	// Already read: marking one read on open is a mutation this test has no
 	// business driving.
 	isRead: true,
@@ -141,7 +158,7 @@ const mount = async (): Promise<DomHarness> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/config")) return { accounts: [account] };
 		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
-			return { items: [threadMessage] };
+			return { items: [openingMessage, threadMessage] };
 		}
 		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
 		return { items: [] };
@@ -176,6 +193,35 @@ const pressReply = async (mounted: DomHarness): Promise<void> => {
 const paneRegionHolding = (pane: Element, node: Node): Element | null =>
 	[...pane.children].find((child) => child.contains(node)) ?? null;
 
+/**
+ * The utilities that make an element scroll vertically. A horizontal one — the
+ * formatting toolbar's strip of buttons — is a different thing and is not
+ * counted: it holds a row that would otherwise be cut off, not a column of
+ * content the reader moves through.
+ */
+const SCROLLS_VERTICALLY = /(^|\s)overflow-(auto|scroll|y-auto|y-scroll)(\s|$)/;
+
+/** The inset ring `MessageCard` draws on the row the keyboard is sitting on. */
+const FOCUS_RING = /ring-accent\//;
+
+/** The turn the keyboard has, read off the ring rather than off the index. */
+const focusedTurn = (mounted: DomHarness): string => {
+	const thread = mounted.query('[data-testid="conversation-messages"]');
+	assert.ok(thread, "the thread is on screen");
+	const focused = [...thread.children].filter((card) =>
+		[...card.querySelectorAll("*")].some((node) =>
+			FOCUS_RING.test(node.getAttribute("class") ?? ""),
+		),
+	);
+	assert.equal(focused.length, 1, "one turn carries the keyboard focus");
+	return focused[0]?.textContent ?? "";
+};
+
+const verticalScrollers = (root: Element): Element[] =>
+	[root, ...root.querySelectorAll("*")].filter((node) =>
+		SCROLLS_VERTICALLY.test(node.getAttribute("class") ?? ""),
+	);
+
 describe("answering the message that is open", () => {
 	it("puts the reply in the same scrolling region as the message", async () => {
 		const mounted = await mount();
@@ -199,6 +245,94 @@ describe("answering the message that is open", () => {
 		);
 	});
 
+	it("leads the pane with the reply, above the thread it answers", async () => {
+		const mounted = await mount();
+
+		await pressReply(mounted);
+
+		const compose = mounted.query('[data-testid="compose-body-area"]');
+		assert.ok(compose, "the reply opened");
+
+		const thread = mounted.query('[data-testid="conversation-messages"]');
+		assert.ok(thread, "the thread is on screen");
+
+		const following = mounted.window.Node.DOCUMENT_POSITION_FOLLOWING;
+		assert.ok(
+			(compose.compareDocumentPosition(thread) & following) === following,
+			"the reply comes before the messages, not after the last of them",
+		);
+	});
+
+	it("reads the thread newest first", async () => {
+		const mounted = await mount();
+
+		const thread = mounted.query('[data-testid="conversation-messages"]');
+		assert.ok(thread, "the thread is on screen");
+
+		const cards = [...thread.children].map((card) => card.textContent ?? "");
+		assert.equal(cards.length, 2, "both turns are on screen");
+		assert.ok(
+			cards[0]?.includes("Ada Lovelace"),
+			"the turn that answered the conversation is at the top",
+		);
+		assert.ok(
+			cards[1]?.includes("Grace Hopper"),
+			"the turn that opened it is below",
+		);
+	});
+
+	it("walks the thread with j and k in the order it is displayed in", async () => {
+		const mounted = await mount();
+
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"the keyboard starts on the turn at the top, which is the latest one",
+		);
+
+		const press = async (key: string): Promise<void> => {
+			mounted.dispatch(
+				mounted.window,
+				new mounted.window.KeyboardEvent("keydown", { key, bubbles: true }),
+			);
+			await mounted.flush();
+		};
+
+		// Down the pane is back in time now that the thread reads newest first.
+		// A reorder that left the handlers alone would invert this silently, and
+		// the help overlay describes the same direction this asserts.
+		await press("j");
+		assert.ok(
+			focusedTurn(mounted).includes("Grace Hopper"),
+			"j moves to the turn below, which is the older one",
+		);
+
+		await press("k");
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"k moves to the turn above, which is the newer one",
+		);
+	});
+
+	it("gives the pane one scrollbar, reply open or not", async () => {
+		const mounted = await mount();
+
+		const pane = mounted.query("article");
+		assert.ok(pane, "the conversation pane is mounted");
+		assert.equal(
+			verticalScrollers(pane).length,
+			1,
+			"reading a thread scrolls one thing",
+		);
+
+		await pressReply(mounted);
+
+		assert.equal(
+			verticalScrollers(pane).length,
+			1,
+			"the reply is a block of the pane, not a box with a scrollbar of its own next to the editor",
+		);
+	});
+
 	it("collapses the message from the chevron beside the sender", async () => {
 		const mounted = await mount();
 
@@ -215,9 +349,10 @@ describe("answering the message that is open", () => {
 			mounted.query('[aria-label="Collapse message"]') === null,
 			"the chevron collapsed the message it belongs to",
 		);
-		assert.ok(
-			mounted.query('[role="button"][aria-expanded="false"]'),
-			"the message is back to a collapsed row",
+		assert.equal(
+			mounted.queryAll('[role="button"][aria-expanded="false"]').length,
+			2,
+			"the message is back to a collapsed row, beside the one that was already collapsed",
 		);
 	});
 });