@rapidmx/web-client 0.8.0 → 0.10.0

package/dist/apps/www/index.js

@@ -3,31 +3,41 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useCallback, useEffect, useRef, useState } from "react";
+import { routedPage } from "./_routedPage.js";
+import { useNavigate } from "../shared/navigation/AppRouter.js";
+import { whenIdle } from "../shared/navigation/idle.js";
+import { prefetchComposeWindow } from "../shared/components/mail/compose/ComposeContext.js";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { HiOutlineFlag, HiOutlineLockClosed, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { archiveMessage, bulkUpdateMessages, createFolder, getMessage, getMessageRawContent, listMessages, moveMessages, setMessagesFlagged, setMessagesRead, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { archiveMessage, bulkUpdateMessages, createFolder, getMessage, getMessageRawContent, listMessages, moveMessages, setMessagesFlagged, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { listConversationMessages, listConversations, } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
 import { parseSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
 import { normalizeServerScores } from "@rapidmx/react-shared/search/searchScoring.js";
-import { searchEncryptedCandidates } from "@rapidmx/react-shared/search/searchTier3.js";
 import { searchLocalIndex } from "../shared/search/searchTier2.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
-import { evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSecurity.js";
-import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
+import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import MailShell, { useMailShell, } from "../shared/components/mail/layout/MailShell.js";
-import MessageDetailPane from "../shared/components/mail/MessageDetailPane.js";
+import MailAddress from "../shared/components/mail/MailAddress.js";
+import { mergeFirstPage } from "../shared/mail/mergeFirstPage.js";
+import { listSnapshotKey, readListSnapshot, saveListScroll, writeListSnapshot } from "../shared/mail/listSnapshots.js";
+import { setReadStateMany } from "../shared/mail/messageReadState.js";
+import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
+import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
+import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
 import ConversationList from "../shared/components/mail/ConversationList.js";
-import ConversationThreadPane from "../shared/components/mail/ConversationThreadPane.js";
 import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
 import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
 import { CONVERSATION_SORT_NOTE, CONVERSATION_SORT_UNAVAILABLE, MAIL_LIST_CLASSIFICATION_FILTERS, getMailListPreferences, setMailListPreferences, sortConversations, } from "../shared/components/mail/listPreferences.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import { useUnlockPrompt } from "../shared/components/layout/UnlockPromptProvider.js";
+import { SHORTCUTS } from "../shared/keyboard/keymap.js";
+import { isActivatable } from "../shared/keyboard/targets.js";
+import { useShortcut } from "../shared/keyboard/useShortcut.js";
 const MESSAGE_PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
 const LIST_PREVIEW_MAX_LENGTH = 160;
@@ -68,6 +78,9 @@ async function decryptEncryptedRows(messages, unlocked) {
     const entries = await Promise.all(encrypted.map(async (message) => {
         try {
             const rawMime = await getMessageRawContent(message.uid);
+            // Loaded here, on first use: the S/MIME code (PKI.js, ASN.1, X.509) is over half a megabyte and an inbox with
+            // no encrypted mail in it never needs it.
+            const { evaluateMessageSecurity } = await import("@rapidmx/react-shared/crypto/messageSecurity.js");
             const security = await evaluateMessageSecurity(rawMime, unlocked);
             if (!security.subject && !security.html) {
                 return null;
@@ -220,6 +233,8 @@ function tier3Windows(parsed, coverage, searchAllMail) {
 /** Runs Tier 3 over each window and merges the candidates (a uid can't match in two disjoint windows, but a
  * message whose date sits exactly on a boundary may come back from both). */
 async function searchTier3Windows(windows, unlocked, mailboxUid) {
+    // Loaded on first use, with the S/MIME code it decrypts through (see `decryptEncryptedRows()`).
+    const { searchEncryptedCandidates } = await import("@rapidmx/react-shared/search/searchTier3.js");
     const pages = await Promise.all(windows.map((window) => searchEncryptedCandidates(window, unlocked, TIER3_CANDIDATE_LIMIT, { mailboxUid })));
     const merged = new Map();
     for (const result of pages.flat()) {
@@ -332,16 +347,28 @@ async function fetchAggregateMessages(mailboxFolders, type, filter) {
     }));
     return mergeInboxMessages(perMailbox);
 }
-export default function InboxPage(props) {
+function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
 function InboxContent({ userUid }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, live, trackMessageChange } = useMailShell();
     const isMobile = useIsMobile();
+    const navigate = useNavigate();
     const { requestUnlock } = useUnlockPrompt();
     const [messages, setMessages] = useState([]);
     const [conversations, setConversations] = useState([]);
     const [loading, setLoading] = useState(true);
+    // Once a list is on screen and the browser has nothing better to do, fetch the code a click on a message (the reading pane)
+    // or on Compose/Reply (the compose window, with its editor) would otherwise wait for.
+    useEffect(() => {
+        if (loading) {
+            return;
+        }
+        return whenIdle(() => {
+            prefetchReadingPane();
+            prefetchComposeWindow();
+        });
+    }, [loading]);
     const [loadingMore, setLoadingMore] = useState(false);
     const [hasMore, setHasMore] = useState(false);
     const [error, setError] = useState(null);
@@ -479,6 +506,10 @@ function InboxContent({ userUid }) {
     // removal steps this back too, or the next page would silently skip a message. See `loadMore()`.
     const listedOffsetRef = useRef(0);
     const scrollContainerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    // Where the message the keyboard just removed from the list (deleted, archived, moved) was: the next Down/Up continues from that spot, so
+    // clearing an inbox from the keyboard walks down it instead of jumping back to the top. Cleared by any selection.
+    const removedAnchorRef = useRef(null);
     // State (via a callback ref), not a plain ref: the sentinel mounts and unmounts as the list loads,
     // filters, and empties, and the observer effect below must re-attach to whichever node is current.
     const [sentinel, setSentinel] = useState(null);
@@ -650,6 +681,48 @@ function InboxContent({ userUid }) {
         const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
         return () => clearTimeout(handle);
     }, [searchInput]);
+    // Choosing another folder no longer loads a new page, so what was being searched for would follow the reader into it: the
+    // search box and its results are cleared instead, as the page load used to. (The first selection resolves after mount - the
+    // shell reads the URL and lists the folders in effects - and is not a change of folder.)
+    const selectionKey = `${mailboxUid ?? ""}|${folderUid ?? ""}|${aggregateFolderType ?? ""}`;
+    const shownSelectionRef = useRef(null);
+    useEffect(() => {
+        const shown = shownSelectionRef.current;
+        if (shown !== null && shown !== selectionKey) {
+            setSearchInput("");
+            setSearchQuery("");
+        }
+        if (folderUid || aggregateFolderType) {
+            shownSelectionRef.current = selectionKey;
+        }
+    }, [selectionKey]);
+    // Which listing this is, for the short-lived snapshot of each folder that makes going back to one instant (see
+    // `listSnapshots.ts`). A search, an aggregate view and a folder that hasn't resolved have no snapshot.
+    const listKey = listSnapshotKey({
+        mailboxUid: activeMailboxUid,
+        folderUid,
+        conversations: preferences.showAsConversations,
+        filter: effectiveFilter,
+        labels: labelFilterKey,
+        sort: serverSortKey,
+    });
+    const snapshotable = !!folderUid && !isSearching && !aggregateFolderType;
+    /** The key of the listing `messages`/`conversations` currently hold - not `listKey` while a new folder's rows are still coming. */
+    const shownListKeyRef = useRef(null);
+    /** A scroll position to put the list back at once its rows are on screen (a snapshot's). */
+    const pendingScrollRef = useRef(null);
+    useLayoutEffect(() => {
+        if (pendingScrollRef.current !== null && !loading && scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop = pendingScrollRef.current;
+            pendingScrollRef.current = null;
+        }
+    });
+    // Keeps the snapshot of the folder on screen current - rows added by "load more" or live updates, a read message, the selection.
+    useEffect(() => {
+        if (snapshotable && !loading && shownListKeyRef.current === listKey) {
+            writeListSnapshot(listKey, { messages, conversations, hasMore, selectedUid });
+        }
+    }, [snapshotable, loading, listKey, messages, conversations, hasMore, selectedUid]);
     // Loads whichever list the current folder, arrangement and search state call for, and resets every
     // piece of per-listing state (selection, paging, select mode) that a previous listing left behind.
     useEffect(() => {
@@ -676,6 +749,8 @@ function InboxContent({ userUid }) {
         const invalidate = () => {
             searchRunIdRef.current += 1;
         };
+        // A folder shown a moment ago is put on screen at once and revalidated behind the rows; one that was not shows a skeleton.
+        const snapshot = snapshotable ? readListSnapshot(listKey) : undefined;
         if (!folderUid && !aggregateFolderType) {
             // The shell hasn't resolved this mailbox's folders yet (the render below says so). Listing
             // anything now means a request whose answer is thrown away the moment the Inbox arrives - and
@@ -700,11 +775,30 @@ function InboxContent({ userUid }) {
             // (always set - `MailShell` only renders this component once at least one mailbox exists).
             // They're scoped to the selected folder (`folderUid`, absent only in aggregate mode), so the
             // conversation list matches the folder the sidebar has selected rather than the whole mailbox.
-            setLoading(true);
+            if (snapshot) {
+                setConversations(snapshot.conversations);
+                listedOffsetRef.current = snapshot.conversations.length;
+                setHasMore(snapshot.hasMore);
+                shownListKeyRef.current = listKey;
+                pendingScrollRef.current = snapshot.scrollTop;
+                setLoading(false);
+            }
+            else {
+                setLoading(true);
+            }
             setError(null);
             listConversations(activeMailboxUid, conversationParams(0))
                 .then((result) => {
                 if (isCurrentRun()) {
+                    shownListKeyRef.current = listKey;
+                    if (snapshot) {
+                        // Folded into what is already shown, as a live refresh does, so the reader's place is kept.
+                        const merged = mergeFirstPage(snapshot.conversations, result, conversationKey, MESSAGE_PAGE_SIZE);
+                        setConversations(merged.rows);
+                        listedOffsetRef.current = merged.complete ? result.length : snapshot.conversations.length + merged.added;
+                        setHasMore(!merged.complete);
+                        return;
+                    }
                     setConversations(result);
                     listedOffsetRef.current = result.length;
                     setHasMore(result.length === MESSAGE_PAGE_SIZE);
@@ -739,7 +833,7 @@ function InboxContent({ userUid }) {
             });
             return invalidate;
         }
-        setLoading(true);
+        setLoading(!snapshot);
         setError(null);
         if (isSearching) {
             setCoverage(undefined);
@@ -827,9 +921,28 @@ function InboxContent({ userUid }) {
         }
         // Set: the guard at the top of this effect returned for a view with neither a folder nor an
         // aggregate type, and the aggregate branch above returned for the one with an aggregate type.
+        if (snapshot) {
+            setMessages(snapshot.messages);
+            listedOffsetRef.current = snapshot.messages.length;
+            setHasMore(snapshot.hasMore);
+            // The selection the reader left the folder with, if that message is still there.
+            setSelectedUid(snapshot.messages.some((m) => m.uid === snapshot.selectedUid) ? snapshot.selectedUid : null);
+            shownListKeyRef.current = listKey;
+            pendingScrollRef.current = snapshot.scrollTop;
+        }
         listMessages(folderUid, listParams)
             .then((results) => {
             if (isCurrentRun()) {
+                shownListKeyRef.current = listKey;
+                if (snapshot) {
+                    // Folded into what is already shown, as a live refresh does: the reader's place, selection and paged-in
+                    // rows stay, and a row they changed since (a higher version) is not put back.
+                    const merged = mergeFirstPage(snapshot.messages, results, messageUid, MESSAGE_PAGE_SIZE, (current, next) => current.version >= next.version ? current : next);
+                    setMessages(merged.rows);
+                    listedOffsetRef.current = merged.complete ? results.length : snapshot.messages.length + merged.added;
+                    setHasMore(!merged.complete);
+                    return;
+                }
                 setMessages(results);
                 listedOffsetRef.current = results.length;
                 setHasMore(results.length === MESSAGE_PAGE_SIZE);
@@ -870,6 +983,67 @@ function InboxContent({ userUid }) {
         mailboxFolders,
         activeMailboxUid,
     ]);
+    // New mail without a reload. `live` is bumped by a push event, a reconnect, the safety-net poll or the tab coming back (see
+    // `useMailLiveUpdates()`); this then quietly refetches the first page of whatever is listed and folds it in - unlike the
+    // effect above it resets nothing: not the selection, the open thread, select mode, the scroll position or the rows
+    // already paged in, and nothing it fetches is marked read. It stands aside for a search (whose rows aren't a folder's),
+    // a listing still loading and a "load more" in flight, and for events about folders the list isn't showing - a
+    // conversation list, which can span folders, refreshes for any. Any failure is silent: the next tick tries again.
+    const liveRunRef = useRef(0);
+    useEffect(() => {
+        if (live.tick === 0 || isSearching || loading || loadMoreInFlightRef.current || (!folderUid && !aggregateFolderType)) {
+            return;
+        }
+        if (!preferences.showAsConversations && live.folderUids) {
+            const shown = new Set(aggregateFolderType
+                ? mailboxFolders.flatMap((entry) => entry.folders.filter((f) => f.type === aggregateFolderType).map((f) => f.uid))
+                : [folderUid]);
+            if (![...live.folderUids].some((uid) => shown.has(uid))) {
+                return;
+            }
+        }
+        // Superseded by a newer refresh, or by any reload of the list itself (which bumps the search run id).
+        const listRun = searchRunIdRef.current;
+        const myRun = ++liveRunRef.current;
+        const isCurrent = () => searchRunIdRef.current === listRun && liveRunRef.current === myRun;
+        void (async () => {
+            try {
+                if (preferences.showAsConversations) {
+                    const fresh = await listConversations(activeMailboxUid, conversationParams(0));
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    const merged = mergeFirstPage(conversationsRef.current, fresh, conversationKey, MESSAGE_PAGE_SIZE);
+                    setConversations(merged.rows);
+                    listedOffsetRef.current = merged.complete ? fresh.length : listedOffsetRef.current + merged.added;
+                    setHasMore(!merged.complete);
+                }
+                else if (aggregateFolderType) {
+                    // No paging here (see `fetchAggregateMessages()`): the fresh merged first pages are the list.
+                    const fresh = await fetchAggregateMessages(mailboxFolders, aggregateFolderType, effectiveFilter);
+                    if (isCurrent()) {
+                        setMessages(fresh);
+                    }
+                }
+                else {
+                    const fresh = await listMessages(folderUid, listParams);
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    // A row the reader has just changed (a higher version) is not put back by a fetch that began before.
+                    // Equal versions are the same server state, so the row on screen - which may carry an optimistic read/unread
+                    // flip the server has not answered yet - wins too.
+                    const merged = mergeFirstPage(messagesRef.current, fresh, messageUid, MESSAGE_PAGE_SIZE, (current, next) => current.version >= next.version ? current : next);
+                    setMessages(merged.rows);
+                    listedOffsetRef.current = merged.complete ? fresh.length : listedOffsetRef.current + merged.added;
+                    setHasMore(!merged.complete);
+                }
+            }
+            catch {
+                // Quiet by design - see above.
+            }
+        })();
+    }, [live.tick]);
     function handleSearchAllMail() {
         setSearchAllMailKey(searchAllMailScope);
     }
@@ -1043,22 +1217,27 @@ function InboxContent({ userUid }) {
      *
      * A conversation's *parent* row has no copy to replace: it is a summary of the whole thread, and its
      * "2 unread" chip and bold styling come from a count the server worked out when the list was fetched.
-     * So when the reading pane reports a message it has just read (`previous` unread, `updated` read), that
-     * count is decremented here - otherwise a conversation kept claiming unread mail the reader had just
-     * read, until the whole list was reloaded.
+     * So when a message changes read state (`previous` and `updated` differ in it - the optimistic copy of a message just
+     * read, or its revert), that count moves by one here - otherwise a conversation kept claiming unread mail the reader
+     * had just read, until the whole list was reloaded.
      */
     function patchListedMessage(updated, previous) {
         setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m)));
         // `ConversationList` fetched its own copy of this message when the thread was expanded; hand it the
         // newer one so the child row doesn't keep showing a stale read/flag state.
         setConversationPatches((prev) => ({ ...prev, [updated.uid]: updated }));
-        if (previous && !previous.flags.read && updated.flags.read) {
+        const unreadChange = previous ? Number(isUnread(updated)) - Number(isUnread(previous)) : 0;
+        if (unreadChange !== 0) {
             setConversations((prev) => prev.map((conversation) => conversation.messageUids.includes(updated.uid)
-                ? { ...conversation, unreadCount: Math.max(0, conversation.unreadCount - 1) }
+                ? { ...conversation, unreadCount: Math.max(0, conversation.unreadCount + unreadChange) }
                 : conversation));
         }
     }
     function removeListedMessages(uids) {
+        const selectedIndex = messagesRef.current.findIndex((m) => m.uid === selectedUid);
+        if (selectedUid && uids.has(selectedUid) && selectedIndex !== -1) {
+            removedAnchorRef.current = selectedIndex;
+        }
         setMessages((prev) => prev.filter((m) => !uids.has(m.uid)));
         listedOffsetRef.current = Math.max(0, listedOffsetRef.current - uids.size);
         setSelectedUid((prev) => (prev && uids.has(prev) ? null : prev));
@@ -1181,13 +1360,26 @@ function InboxContent({ userUid }) {
      * A bulk update is applied element by element server-side and stops at its first rejection, so a
      * failure leaves an unknown prefix of the selection already changed (see `bulkUpdateMessages()`) -
      * which is why a failure reloads the list rather than trying to reconcile it, and says so.
+     *
+     * `chosen` is the selection bar's ticked messages unless the caller (a keyboard shortcut acting on the one open message or conversation)
+     * names its own. Resolves whether it succeeded.
      */
-    async function runBulkAction(action, removesRows) {
-        const chosen = selectedMessages;
+    async function runBulkAction(action, removesRows, chosen = selectedMessages) {
         setBulkBusy(true);
         setBulkError(null);
         try {
             const updated = await action(chosen);
+            if (removesRows) {
+                // A move (Delete, Archive, Report junk, Move to): the source folders' badges go down, the target's up. Reading
+                // and unreading are tracked by `setReadStateMany()` itself, as they happen.
+                const movedByUid = new Map(updated.map((m) => [m.uid, m]));
+                for (const before of chosen) {
+                    const after = movedByUid.get(before.uid);
+                    if (after) {
+                        trackMessageChange(before, after).settle();
+                    }
+                }
+            }
             if (preferences.showAsConversations) {
                 // A conversation row is a summary of its messages - its count, unread count, participants
                 // and preview all move when a bulk action changes or empties part of it - so the list is
@@ -1204,6 +1396,7 @@ function InboxContent({ userUid }) {
                 setMessages((prev) => prev.map((m) => byUid.get(m.uid) ?? m));
             }
             setSelectedUids(new Set());
+            return true;
         }
         catch (err) {
             setBulkError(`${err instanceof ApiRequestError ? err.message : "Those messages couldn't all be updated."} Some of them may already have changed, so the list has been reloaded.`);
@@ -1211,6 +1404,7 @@ function InboxContent({ userUid }) {
             setSelectedConversationIds(new Set());
             setConversationMessagesById({});
             setRefreshKey((n) => n + 1);
+            return false;
         }
         finally {
             setBulkBusy(false);
@@ -1260,8 +1454,8 @@ function InboxContent({ userUid }) {
             return { uid: message.uid, version: message.version, labelUids: [...new Set([...labelUids, ...kept])] };
         })), false);
     }
-    function moveSelectionToType(type, name) {
-        void runBulkAction(async (chosen) => moveMessages(chosen, await resolveFolderOfType(type, name)), true);
+    function moveSelectionToType(type, name, chosen) {
+        return runBulkAction(async (moving) => moveMessages(moving, await resolveFolderOfType(type, name)), true, chosen);
     }
     const loadMoreStatus = loadingMore ? ("Loading more\u2026") : loadMoreError ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { role: "alert", className: "text-danger", children: loadMoreError }), _jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Retry" })] })) : loadMoreStalled ? (_jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Load more" })) : null;
     function handleSelect(message) {
@@ -1270,9 +1464,10 @@ function InboxContent({ userUid }) {
             return;
         }
         if (isMobile) {
-            window.location.href = `/messages/${encodeURIComponent(message.uid)}`;
+            navigate(`/messages/${encodeURIComponent(message.uid)}`);
             return;
         }
+        removedAnchorRef.current = null;
         setSelectedUid(message.uid);
     }
     /** Opens a conversation in the reading pane, positioned at one of its messages: the one a child row
@@ -1287,12 +1482,142 @@ function InboxContent({ userUid }) {
         if (isMobile) {
             // No dedicated mobile thread route yet - the existing single-message detail route already
             // handles any message uid regardless of conversation grouping.
-            window.location.href = `/messages/${encodeURIComponent(uid)}`;
+            navigate(`/messages/${encodeURIComponent(uid)}`);
             return;
         }
+        removedAnchorRef.current = null;
         setSelectedUid(uid);
         setOpenThread({ conversation, uid });
     }
+    // ---- Keyboard shortcuts (see `shared/keyboard`). Each is registered only while this view can do it, and calls what the toolbar and
+    // ---- the selection bar call: the same bulk-action path (`runBulkAction()` - so the same optimistic badge tracking, the same rollback,
+    // ---- the same lazily created Deleted Items folder), never a second implementation. Reply, Reply all, Forward, Archive and Move to are
+    // ---- registered by the reading pane itself (`MessageDetailPane`'s `shortcuts`), which owns those handlers.
+    const inConversations = preferences.showAsConversations;
+    /** The selection bar isn't offered in the aggregate view (its rows belong to several mailboxes), and neither are these. */
+    const keyboardActions = !aggregateFolderType;
+    /** What the keyboard acts on exists: the ticked rows in select mode, else the message (or conversation) open in the reading pane. */
+    const keyboardTargetExists = selectMode ? selectedMessages.length > 0 : inConversations ? openThread !== null : selected !== null;
+    const rowCount = inConversations ? listedConversations.length : messages.length;
+    const canMoveSelection = !selectMode && !isMobile && !loading && rowCount > 0;
+    function folderTypeOf(folderUidOfMessage) {
+        return currentFolders.find((f) => f.uid === folderUidOfMessage)?.type;
+    }
+    /** Moves the keyboard's focus to a row - and scrolls it into view - once the selection has moved to it. */
+    function focusRow(uid) {
+        // Only called from a key press, when the list is on screen.
+        const row = [...scrollContainerRef.current.querySelectorAll("[data-message-uid]")].find((element) => element.getAttribute("data-message-uid") === uid);
+        row?.scrollIntoView({ block: "nearest" });
+        row?.querySelector("[data-row-open]")?.focus({ preventScroll: true });
+    }
+    /** The index of the selected row: the open message's, or the open conversation's; -1 with nothing selected. */
+    function selectedRowIndex() {
+        if (inConversations) {
+            return openThread ? listedConversations.findIndex((c) => c.conversationId === openThread.conversation.conversationId) : -1;
+        }
+        return messages.findIndex((m) => m.uid === selectedUid);
+    }
+    function selectRow(index) {
+        if (inConversations) {
+            const conversation = listedConversations[index];
+            handleOpenConversation(conversation, conversation.latestMessageUid);
+            focusRow(conversation.latestMessageUid);
+        }
+        else {
+            const message = messages[index];
+            handleSelect(message);
+            focusRow(message.uid);
+        }
+    }
+    function selectNeighbour(step) {
+        const current = selectedRowIndex();
+        // After the selected message left the list (deleted, archived) the next row is the one that slid into its place.
+        const anchor = removedAnchorRef.current;
+        const target = current === -1 && anchor !== null ? (step === 1 ? anchor : anchor - 1) : current + step;
+        selectRow(Math.min(rowCount - 1, Math.max(0, target)));
+    }
+    function selectNextUnread(step) {
+        const isRowUnread = (index) => (inConversations ? listedConversations[index].unreadCount > 0 : isUnread(messages[index]));
+        for (let index = selectedRowIndex() + step; index >= 0 && index < rowCount; index += step) {
+            if (isRowUnread(index)) {
+                selectRow(index);
+                return;
+            }
+        }
+    }
+    /** The messages of the open conversation that are in the folder being listed - fetched (once) like a ticked conversation's. */
+    async function loadOpenConversation(conversation) {
+        const id = conversation.conversationId;
+        let all = conversationMessagesById[id];
+        if (!all) {
+            all = await listConversationMessages(activeMailboxUid, id);
+            const loaded = all;
+            setConversationMessagesById((prev) => ({ ...prev, [id]: loaded }));
+        }
+        return all.filter((m) => !folderUid || m.folderUid === folderUid);
+    }
+    /**
+     * Runs a bulk action on what the keyboard acts on - the ticked rows in select mode, else the open message or conversation - keeping only
+     * the messages `applies` accepts (Delete leaves out what is already in Deleted Items, Mark read what is already read: nothing to do
+     * then). Held while another bulk action is on the wire, like the bar's buttons. Closes the open thread after a move away from it.
+     */
+    async function runOnKeyboardTargets(action, removesRows, applies = () => true) {
+        if (bulkBusy || resolvingSelection > 0) {
+            return;
+        }
+        let chosen;
+        try {
+            chosen = selectMode ? selectedMessages : inConversations ? await loadOpenConversation(openThread.conversation) : [selected];
+        }
+        catch (err) {
+            setBulkError(err instanceof ApiRequestError ? err.message : "Could not load the messages in that conversation.");
+            return;
+        }
+        chosen = chosen.filter(applies);
+        if (chosen.length === 0) {
+            return;
+        }
+        const succeeded = await runBulkAction(action, removesRows, chosen);
+        if (succeeded && removesRows && inConversations && !selectMode) {
+            setOpenThread(null);
+            setSelectedUid(null);
+        }
+    }
+    useShortcut(SHORTCUTS.mail.next, () => selectNeighbour(1), { enabled: canMoveSelection });
+    useShortcut(SHORTCUTS.mail.previous, () => selectNeighbour(-1), { enabled: canMoveSelection });
+    useShortcut(SHORTCUTS.mail.nextUnread, () => selectNextUnread(1), { enabled: canMoveSelection });
+    useShortcut(SHORTCUTS.mail.previousUnread, () => selectNextUnread(-1), { enabled: canMoveSelection });
+    useShortcut(SHORTCUTS.mail.delete, () => void runOnKeyboardTargets(async (chosen) => moveMessages(chosen, await resolveFolderOfType("deleted_items", "Deleted Items")), true, (message) => folderTypeOf(message.folderUid) !== "deleted_items"), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.markRead, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, true, { patch: patchListedMessage, track: trackMessageChange }), false, isUnread), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.markUnread, () => void runOnKeyboardTargets((chosen) => setReadStateMany(chosen, false, { patch: patchListedMessage, track: trackMessageChange }), false, (message) => !isUnread(message)), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.flag, () => 
+    // Flags them all unless every one already is - what the bar's Flag and Unflag would do on this selection.
+    void runOnKeyboardTargets((chosen) => setMessagesFlagged(chosen, !chosen.every((m) => m.flags.flagged)), false), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.open, (event) => {
+        // Enter on a row that is not selected yet is the row button's own click (it selects). On the selected one - or with the focus
+        // elsewhere - it opens the message on its own page, as it does in Outlook.
+        const rowUid = event.target.closest("[data-message-uid]")?.getAttribute("data-message-uid");
+        if (rowUid ? rowUid !== selectedUid : isActivatable(event.target)) {
+            return false;
+        }
+        navigate(`/messages/${encodeURIComponent(selectedUid)}`);
+    }, { enabled: !selectMode && selectedUid !== null });
+    useShortcut(SHORTCUTS.mail.close, () => {
+        if (document.activeElement === searchInputRef.current && searchInput !== "") {
+            setSearchInput("");
+        }
+        else if (selectMode) {
+            leaveSelectMode();
+        }
+        else {
+            setSelectedUid(null);
+            setOpenThread(null);
+        }
+    }, { enabled: selectMode || selectedUid !== null || openThread !== null || searchInput !== "" });
+    useShortcut(SHORTCUTS.mail.search, () => {
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+    }, { enabled: !inConversations && !aggregateFolderType });
     if (!folderUid && !aggregateFolderType) {
         // `MailShell` never renders this component at all until a mailbox is resolved (see its own
         // full-screen `MailboxProvisioning` takeover otherwise) — this is purely the brief gap before
@@ -1301,11 +1626,18 @@ function InboxContent({ userUid }) {
         // indistinguishable to anything (a test, a user re-reading the screen) that catches this one.
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading your mailbox\u2026" });
     }
-    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [selectMode ? (_jsx(MailSelectionBar, { selected: selectedMessages, listed: messages, totals: preferences.showAsConversations
+    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, 
+                // Remembered as it moves (not when the list is left: by then React has already detached the element), so
+                // the folder - or Mail, after another app - comes back where it was.
+                onScroll: (event) => saveListScroll(listKey, event.currentTarget.scrollTop), className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [selectMode ? (_jsx(MailSelectionBar, { selected: selectedMessages, listed: messages, totals: preferences.showAsConversations
                             ? { selected: selectedConversationIds.size, listed: conversations.length, noun: "conversation" }
                             : undefined, onSelectAll: () => preferences.showAsConversations
                             ? selectAllConversations()
-                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => preferences.showAsConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: currentFolders, currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated, onApplyLabels: applyLabelsToSelection, onSetRead: (read) => void runBulkAction((chosen) => setMessagesRead(chosen, read), false), onSetFlagged: (flagged) => void runBulkAction((chosen) => setMessagesFlagged(chosen, flagged), false), onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: (targetFolderUid) => runBulkAction((chosen) => moveMessages(chosen, targetFolderUid), true), onReportJunk: () => moveSelectionToType("junk", "Junk Email"), onDelete: () => moveSelectionToType("deleted_items", "Deleted Items"), busy: bulkBusy || resolvingSelection > 0, error: bulkError })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
+                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => preferences.showAsConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: currentFolders, currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated, onApplyLabels: applyLabelsToSelection, onSetRead: (read) => void runBulkAction(
+                        // Optimistic: the rows and the folder badges change now, and change back if the server refuses.
+                        (chosen) => setReadStateMany(chosen, read, { patch: patchListedMessage, track: trackMessageChange }), false), onSetFlagged: (flagged) => void runBulkAction((chosen) => setMessagesFlagged(chosen, flagged), false), shortcuts: keyboardActions, onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: async (targetFolderUid) => {
+                            await runBulkAction((chosen) => moveMessages(chosen, targetFolderUid), true);
+                        }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void moveSelectionToType("deleted_items", "Deleted Items"), busy: bulkBusy || resolvingSelection > 0, error: bulkError })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
                         // A conversation row is a thread summary, so only some of the keys have anything to
                         // order by - the rest stay pickable and are applied to the rows already fetched.
                         unavailableSortKeys: preferences.showAsConversations ? CONVERSATION_SORT_UNAVAILABLE : undefined, sortKeysNote: isSearching
@@ -1318,7 +1650,7 @@ function InboxContent({ userUid }) {
                             ? "Open a mailbox's own folder to select messages"
                             : loading
                                 ? "Wait for this folder to finish loading"
-                                : "There is nothing here to select" })), !preferences.showAsConversations && (_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55" }) })), offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
+                                : "There is nothing here to select" })), !preferences.showAsConversations && (_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55" }) })), offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
                                 "flex-1 py-1.5 font-semibold",
                                 preferences.filter === value
                                     ? "text-primary-dark border-b-2 border-primary-dark"
@@ -1327,17 +1659,11 @@ function InboxContent({ userUid }) {
                                     ? `${messages.length} result${messages.length === 1 ? "" : "s"}`
                                     : `${messages.length} of ??` }), tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, className: "text-primary-dark hover:underline font-medium shrink-0", children: "Search all mail" }))] })), isSearching && coverage?.indexedFrom && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Local search covers messages back to ", new Date(coverage.indexedFrom).toLocaleDateString(), coverage.building ? " (still building)" : "", searchAllMail
                                 ? " - searching everything, not just recent mail."
-                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), !selectMode && bulkError && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: bulkError }) })), loading ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
                                     ? `No messages match "${searchQuery}".`
                                     : effectiveFilter === "all"
                                         ? "No messages in this folder."
-                                        : "No messages here." }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: messages.map((message) => (_jsxs("li", { className: "flex items-stretch border-b border-border", children: [selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), onChange: () => toggleSelected(message.uid), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
-                                                "flex-1 min-w-0 text-left px-4 py-3",
-                                                message.uid === selectedUid || selectedUids.has(message.uid)
-                                                    ? "bg-primary/10"
-                                                    : "hover:bg-surface-alt",
-                                                message.flags.read ? "" : "font-semibold",
-                                            ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm truncate", children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }))] })] }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(ConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
+                                        : "No messages here." }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: messages.map((message) => (_jsxs("li", { "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: isUnread(message) }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), onChange: () => toggleSelected(message.uid), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => handleSelect(message), className: ["flex-1 min-w-0 text-left px-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: isUnread(message) }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(isUnread(message)) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(isUnread(message))].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: ["text-sm truncate", subjectClass(isUnread(message))].join(" "), children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }))] })] }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(LazyMessageDetailPane, { shortcuts: !selectMode, message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
                         // Same reasoning as onArchived below - a move takes the message out of the folder
                         // being listed, so it leaves the list rather than being patched in place.
                         removeListedMessage(updated.uid);
@@ -1353,3 +1679,4 @@ function InboxContent({ userUid }) {
                         removeListedMessage(updated.uid);
                     }, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) })] }));
 }
+export default routedPage("/", InboxPage);