@remit/web-client 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "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/mail/ConversationView.tsx

@@ -161,9 +161,10 @@ 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.
 		...threadDetailOperationsListThreadMessagesOptions({
 			path: { threadId },
-			query: { order: "desc" },
 		}),
 	});
 
@@ -171,21 +172,24 @@ export const ConversationView = ({
 		() => messagesResponse?.items ?? [],
 		[messagesResponse?.items],
 	);
+	const latestMessage = messages[messages.length - 1];
 	const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
 	// Track which messages are expanded
-	// By default, the first (newest) message is expanded
+	// By default, the latest message is expanded
 	const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
 	const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
 	const [focusedIndex, setFocusedIndex] = useState(0);
 
-	// Reset and expand first message when thread changes or messages load.
+	// Reset and expand the latest message when thread changes or messages load.
 	// Also expand the selected message (the row the user clicked in the list)
 	// so that an older unread message is visible and gets marked as read.
 	useEffect(() => {
 		if (messages.length > 0 && threadId !== currentThreadId) {
 			setCurrentThreadId(threadId);
-			const initialExpanded = new Set([messages[0].threadMessageId]);
+			const initialExpanded = new Set([
+				messages[messages.length - 1].threadMessageId,
+			]);
 			if (selectedMessageId) {
 				const selected = messages.find(
 					(m) => m.messageId === selectedMessageId,
@@ -193,7 +197,7 @@ export const ConversationView = ({
 				if (selected) initialExpanded.add(selected.threadMessageId);
 			}
 			setExpandedIds(initialExpanded);
-			setFocusedIndex(0);
+			setFocusedIndex(messages.length - 1);
 		}
 	}, [threadId, messages, currentThreadId, selectedMessageId]);
 
@@ -283,12 +287,13 @@ export const ConversationView = ({
 		}
 	}, [composeRequest, onComposeClose]);
 
-	const lastMessage = messages[0];
-	const { data: lastMessageData } = useQuery({
+	// Reply and forward act on the latest turn of the conversation, which is the
+	// last message now that the thread reads oldest first.
+	const { data: latestMessageData } = useQuery({
 		...messageOperationsDescribeMessageOptions({
-			path: { messageId: lastMessage?.messageId ?? "" },
+			path: { messageId: latestMessage?.messageId ?? "" },
 		}),
-		enabled: !!lastMessage && composeMode !== null,
+		enabled: !!latestMessage && composeMode !== null,
 	});
 
 	const handleReply = useCallback(() => {
@@ -432,7 +437,7 @@ export const ConversationView = ({
 					<InlineCompose
 						mode={composeMode}
 						account={activeAccount}
-						sourceMessage={lastMessageData}
+						sourceMessage={latestMessageData}
 						onClose={handleCloseCompose}
 					/>
 				)}
@@ -454,7 +459,7 @@ export const ConversationView = ({
 				<InlineCompose
 					mode={composeMode}
 					account={activeAccount}
-					sourceMessage={lastMessageData}
+					sourceMessage={latestMessageData}
 					onClose={handleCloseCompose}
 				/>
 			)}

package/src/components/mail/MessageList.tsx

@@ -232,6 +232,16 @@ export const MessageList = ({
 	// leave this null, so the list never yanks focus out of the reading pane.
 	const pendingDomFocusRef = useRef<string | null>(null);
 
+	// Whether the cursor's last move came from a row taking DOM focus — a click,
+	// or the browser restoring focus — rather than from a command this list ran.
+	// The list scrolls the cursor into view only for its own moves. Scrolling for
+	// a click moves the row out from under the pointer between mousedown and the
+	// click event, so the click lands on the empty space the row left behind and
+	// nothing opens (#85). Only rows below the fold could hit it: the pointer has
+	// to have scrolled to reach them, and the list then scrolled again on top of
+	// that. Every command below resets this to false before moving the cursor.
+	const cursorMovedByPointerRef = useRef(false);
+
 	// The row the cursor was on when the delete confirmation opened. The dialog
 	// takes DOM focus for as long as it is up, so dismissing it has to give that
 	// focus back or the list is left with no cursor and the next shortcut acts on
@@ -281,6 +291,7 @@ export const MessageList = ({
 				return;
 			}
 			pendingDomFocusRef.current = thread.messageId;
+			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(thread.messageId);
 		},
 		[threads, isMultiSelectMode, toggleCheck],
@@ -367,6 +378,7 @@ export const MessageList = ({
 			// the selection from the anchor — the keyboard equivalent of
 			// shift-click.
 			pendingDomFocusRef.current = target;
+			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(target);
 		},
 		[orderedIds, focusedMessageId, selectRange],
@@ -466,6 +478,7 @@ export const MessageList = ({
 			// Same hand-back as cancelling, aimed at the surviving neighbour
 			// instead: confirming also closes a dialog that held DOM focus.
 			pendingDomFocusRef.current = nextFocus;
+			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(nextFocus);
 			navigate({
 				to: "/mail/$mailboxId",
@@ -493,6 +506,7 @@ export const MessageList = ({
 		setPendingDeleteIds(null);
 		if (restoreTo === null) return;
 		pendingDomFocusRef.current = restoreTo;
+		cursorMovedByPointerRef.current = false;
 		setFocusedMessageId(restoreTo);
 	}, []);
 
@@ -572,6 +586,10 @@ export const MessageList = ({
 	// Scroll the roving focus cursor into view as it moves (j/k). Falls back to
 	// the open thread when nothing is focused yet.
 	useEffect(() => {
+		// A row that took focus from the pointer is already where the user aimed,
+		// and scrolling it now would move it out from under the click still in
+		// flight (#85).
+		if (cursorMovedByPointerRef.current) return;
 		// On single-pane tiers, opening a thread swaps this list out for the
 		// conversation. Scrolling the list as it unmounts is both pointless (it's
 		// no longer visible) and unsafe: @tanstack/react-virtual's scrollToIndex
@@ -590,6 +608,9 @@ export const MessageList = ({
 	// sync on open while remaining independent during scanning.
 	useEffect(() => {
 		if (selectedMessageId) {
+			// A thread going open is the list's own move, whatever opened it — a
+			// deep link arrives with the row far down and has to be scrolled to.
+			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(selectedMessageId);
 		}
 	}, [selectedMessageId]);
@@ -818,6 +839,7 @@ export const MessageList = ({
 	// A row focused by Tab or click becomes the cursor, so the keys act on what
 	// the browser says is focused.
 	const handleRowFocus = useCallback((messageId: string) => {
+		cursorMovedByPointerRef.current = true;
 		setFocusedMessageId(messageId);
 	}, []);