@remit/web-client 0.0.161 → 0.0.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.161",
+  "version": "0.0.163",
   "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/BriefPane.tsx

@@ -41,7 +41,11 @@ import {
 } from "@/hooks/useTriageLayer";
 import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
-import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
+import {
+	type OpenThreadPath,
+	type OpenThreadTarget,
+	retainOpenPanels,
+} from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
@@ -148,13 +152,18 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
+				hash: retainOpenPanels,
 			});
 		},
 		[navigate, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
-		navigate({ to: "/mail/brief", search: (prev) => prev });
+		navigate({
+			to: "/mail/brief",
+			search: (prev) => prev,
+			hash: retainOpenPanels,
+		});
 	}, [navigate]);
 
 	const handleDeselectIfRemoved = useCallback(

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/DraftsView.tsx

@@ -41,6 +41,7 @@ import { FileText, Inbox, Trash2 } from "lucide-react";
 import { useMemo } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
 import { groupDraftSections } from "@/lib/drafts";
+import { retainOpenPanels } from "@/routing";
 import { NavMenuButton } from "./NavMenuButton";
 
 // ---------------------------------------------------------------------------
@@ -197,6 +198,7 @@ export function DraftsView({
 			to: "/mail/$mailboxId/$threadId/$messageId",
 			params: { mailboxId, threadId, messageId },
 			search: (prev) => prev,
+			hash: retainOpenPanels,
 		});
 	};
 

package/src/components/mail/FlaggedPane.tsx

@@ -52,7 +52,11 @@ import {
 } from "@/hooks/useTriageLayer";
 import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
-import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
+import {
+	type OpenThreadPath,
+	type OpenThreadTarget,
+	retainOpenPanels,
+} from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
@@ -154,13 +158,18 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
+				hash: retainOpenPanels,
 			});
 		},
 		[navigate, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
-		navigate({ to: "/mail/flagged", search: (prev) => prev });
+		navigate({
+			to: "/mail/flagged",
+			search: (prev) => prev,
+			hash: retainOpenPanels,
+		});
 	}, [navigate]);
 
 	const handleDeselectIfRemoved = useCallback(

package/src/components/mail/MailboxPane.tsx

@@ -108,7 +108,6 @@ import {
 	inboxFilterParams,
 	sameInboxFilter,
 } from "@/lib/inbox-filters";
-import { readIntelligencePref } from "@/lib/intelligence-pref";
 import { junkDestination } from "@/lib/junk-destination";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
@@ -125,7 +124,11 @@ import {
 	applyResidualTokens,
 	threadSearchTokens,
 } from "@/lib/thread-search-tokens";
-import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
+import {
+	type OpenThreadPath,
+	type OpenThreadTarget,
+	retainOpenPanels,
+} from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 
 /* ------------------------------------------------------------------ */
@@ -263,16 +266,9 @@ function MailboxPaneProvider({
 	const navigate = useNavigate();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
-	const tier = useLayoutTier();
-	const isDesktop = tier === "desktop";
 	const telemetry = useTelemetry();
-	const {
-		accounts,
-		searchQuery,
-		intelligenceOpen,
-		onToggleIntelligence,
-		onSetIntelligenceOpen,
-	} = useMailContext();
+	const { accounts, searchQuery, intelligenceOpen, onToggleIntelligence } =
+		useMailContext();
 	const tokenContext = useSearchTokenContext();
 
 	const normalizedSearchQuery = normalizeSearchQuery(searchQuery);
@@ -471,6 +467,7 @@ function MailboxPaneProvider({
 			to: "/mail/$mailboxId",
 			params: { mailboxId },
 			search: (prev) => prev,
+			hash: retainOpenPanels,
 		});
 	}, [mailboxId, navigate]);
 
@@ -480,6 +477,7 @@ function MailboxPaneProvider({
 				to: "/mail/$mailboxId/$threadId/$messageId",
 				params: { mailboxId, ...target },
 				search: (prev) => prev,
+				hash: retainOpenPanels,
 			});
 		},
 		[mailboxId, navigate],
@@ -535,23 +533,6 @@ function MailboxPaneProvider({
 		onToggleIntelligence,
 	]);
 
-	// Desktop default-open (#782)
-	const appliedDefaultRef = useRef(false);
-	useEffect(() => {
-		if (appliedDefaultRef.current) return;
-		if (!isDesktop) return;
-		if (!selectedThread?.messageId) return;
-		appliedDefaultRef.current = true;
-		if (readIntelligencePref() && !intelligenceOpen) {
-			onSetIntelligenceOpen(true);
-		}
-	}, [
-		isDesktop,
-		selectedThread?.messageId,
-		intelligenceOpen,
-		onSetIntelligenceOpen,
-	]);
-
 	// The mailbox's own unseen total. A count over the loaded pages undercounts
 	// every mailbox larger than one page and creeps upward as the user scrolls,
 	// so there is no fallback: until the mailbox resolves there is no number.
@@ -1048,6 +1029,7 @@ function MailboxList() {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
+				hash: retainOpenPanels,
 			});
 		},
 		[mailboxId, navigate, searchInput, threads],

package/src/components/mail/MessageActionMenu.tsx

@@ -35,7 +35,7 @@ import {
 	type ThreadListSnapshotEntry,
 	threadListCacheKeys,
 } from "@/lib/thread-list-cache";
-import { useOpenThreadPath } from "@/routing";
+import { retainOpenPanels, useOpenThreadPath } from "@/routing";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -193,6 +193,7 @@ export const MessageActionMenu = ({
 				to: "/mail/$mailboxId",
 				params: { mailboxId },
 				search: (prev) => prev,
+				hash: retainOpenPanels,
 			});
 		},
 		[selectedMessageId, mailboxId, navigate],

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/MessageList.tsx

@@ -53,6 +53,7 @@ import { listVerbRequest } from "@/lib/list-verb-request";
 import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
 import { cn } from "@/lib/utils";
 import { useSelectionWizard, useWizardStepValue } from "@/lib/wizard-history";
+import { retainOpenPanels } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import {
 	type EscalatedSelection,
@@ -634,6 +635,7 @@ export const MessageList = ({
 				to: "/mail/$mailboxId/$threadId/$messageId",
 				params: { mailboxId, threadId, messageId },
 				search: (prev) => prev,
+				hash: retainOpenPanels,
 				replace: options?.replace,
 			});
 		},

package/src/components/mail/OutboxPane.tsx

@@ -63,6 +63,7 @@ import { isOutboxListRow, isUnsendableStatus } from "@/lib/outbox-status";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { cn } from "@/lib/utils";
+import { retainOpenPanels } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Helpers (shared between List, Reading, Phone sub-views)             */
@@ -218,13 +219,18 @@ function OutboxPaneProvider({
 				to: "/mail/outbox/draft/$outboxMessageId",
 				params: { outboxMessageId },
 				search: (prev) => prev,
+				hash: retainOpenPanels,
 			});
 		},
 		[navigate],
 	);
 
 	const handleCloseMessage = useCallback(() => {
-		navigate({ to: "/mail/outbox", search: (prev) => prev });
+		navigate({
+			to: "/mail/outbox",
+			search: (prev) => prev,
+			hash: retainOpenPanels,
+		});
 	}, [navigate]);
 
 	const ctx: OutboxPaneContextValue = {

package/src/components/mail/SwipeableMessageRow.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
+import { retainOpenPanels } from "@/routing";
 import { MessageListItem } from "./MessageListItem";
 import { useModifierSelect } from "./useModifierSelect";
 
@@ -105,6 +106,7 @@ export const SwipeableMessageRow = ({
 				messageId: thread.messageId,
 			},
 			search: (prev) => prev,
+			hash: retainOpenPanels,
 		});
 	}, [navigate, mailboxId, thread.threadId, thread.messageId]);