@remit/web-client 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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,12 @@ export const MessageList = ({
 	// leave this null, so the list never yanks focus out of the reading pane.
 	const pendingDomFocusRef = useRef<string | null>(null);
 
+	// 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
+	// nothing (#80).
+	const focusBeforeConfirmRef = useRef<string | null>(null);
+
 	// Whether the list can serve keyboard commands at all. It stays true while
 	// the delete confirmation is open — withdrawing the commands there would let
 	// the route fall through to its own unconfirmed delete on a second Delete
@@ -341,9 +347,10 @@ export const MessageList = ({
 	const requestDelete = useCallback(
 		(ids: string[]) => {
 			if (!onDeleteMessages || ids.length === 0) return;
+			focusBeforeConfirmRef.current = focusedMessageId ?? null;
 			setPendingDeleteIds(ids);
 		},
-		[onDeleteMessages],
+		[onDeleteMessages, focusedMessageId],
 	);
 
 	// Keyboard shift-arrow range extend: move focus one row in `direction` and
@@ -452,9 +459,14 @@ export const MessageList = ({
 
 		onDeleteMessages?.(pendingDeleteIds);
 		clearSelection();
+		focusBeforeConfirmRef.current = null;
 		setPendingDeleteIds(null);
 
 		if (nextFocus !== undefined) {
+			// Same hand-back as cancelling, aimed at the surviving neighbour
+			// instead: confirming also closes a dialog that held DOM focus.
+			pendingDomFocusRef.current = nextFocus;
+			setFocusedMessageId(nextFocus);
 			navigate({
 				to: "/mail/$mailboxId",
 				params: { mailboxId },
@@ -471,8 +483,17 @@ export const MessageList = ({
 		mailboxId,
 	]);
 
+	// Every way out of the confirmation that isn't the delete — Escape, Cancel,
+	// the backdrop — arrives here, so this is the one place the keyboard has to
+	// be handed back. Restoring the cursor also puts DOM focus back on that row,
+	// via the same pending-focus channel j/k use.
 	const handleCancelDelete = useCallback(() => {
+		const restoreTo = focusBeforeConfirmRef.current;
+		focusBeforeConfirmRef.current = null;
 		setPendingDeleteIds(null);
+		if (restoreTo === null) return;
+		pendingDomFocusRef.current = restoreTo;
+		setFocusedMessageId(restoreTo);
 	}, []);
 
 	// Handle mark as read