@rapidmx/web-client 0.27.0 → 0.29.0

package/dist/apps/www/index.js

@@ -26,6 +26,8 @@ import MailShell, { useMailShell, } from "../shared/components/mail/layout/MailS
 import MailAddress from "../shared/components/mail/MailAddress.js";
 import OutboxRowStatus from "../shared/components/mail/OutboxRowStatus.js";
 import { mergeFirstPage } from "../shared/mail/mergeFirstPage.js";
+import { isToggleClick, rangeBetween, resolveAnchor } from "../shared/mail/rangeSelection.js";
+import { ROW_EXIT_MS, canAnimateRowExit, collapseRow } from "../shared/mail/rowExit.js";
 import { isOwnMailbox, orderMailboxes, primaryMailboxUid } from "../shared/mail/primaryMailbox.js";
 import { listSnapshotKey, readListSnapshot, saveListScroll, writeListSnapshot } from "../shared/mail/listSnapshots.js";
 import { setReadStateMany } from "../shared/mail/messageReadState.js";
@@ -586,6 +588,18 @@ function InboxContent({ userUid }) {
     // 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);
+    // The row a Shift+click range starts from: the row last clicked or opened (a `message.uid`, or a `conversationRowKey()` in the conversation list).
+    // A Shift+click selects from here to the clicked row but leaves it where it is, so the next Shift+click re-spans from the same row, as in Explorer and
+    // Outlook; a plain click or a Ctrl+click moves it to the row clicked. Forgotten when the listing is replaced. See `resolveAnchor()`.
+    const selectionAnchorRef = useRef(null);
+    // Rows on their way out of the list (moved, deleted, archived): `message.uid`s, or `conversationRowKey()`s in the conversation list. They stay in the
+    // data while they collapse (`collapseRow()`, `ROW_EXIT_MS`), so the rows below slide up into the gap, and are dropped by `animateRowsOut()` after.
+    const [exitingKeys, setExitingKeys] = useState(new Set());
+    const exitTimersRef = useRef(new Set());
+    useEffect(() => {
+        const timers = exitTimersRef.current;
+        return () => timers.forEach(clearTimeout);
+    }, []);
     // 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);
@@ -804,12 +818,6 @@ function InboxContent({ userUid }) {
             setSearchAllMailboxes(false);
         }
     }, [searchQuery]);
-    // Rows can be ticked in the results of a search over every mailbox, but not in the listing they came out of: clearing the search leaves select mode.
-    useEffect(() => {
-        if (aggregateFolderType && !isSearching) {
-            setSelectMode(false);
-        }
-    }, [aggregateFolderType, isSearching]);
     // 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({
@@ -846,6 +854,7 @@ function InboxContent({ userUid }) {
         setSelectedUids(new Set());
         setSelectedConversationIds(new Set());
         setConversationMessagesById({});
+        selectionAnchorRef.current = null;
         listedOffsetRef.current = 0;
         compositeCursorRef.current = undefined;
         setHasMore(false);
@@ -1231,20 +1240,16 @@ function InboxContent({ userUid }) {
     // 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)) {
+    /**
+     * Quietly refetches the first page of whatever is listed and folds it in (see above) - the same refresh a push event makes, which a bulk action or
+     * a move also makes once its rows have left, so the list is brought up to date (counts, previews) without the skeleton or losing the reader's place.
+     * `listRun` is the listing the caller means: a refresh that finds another listing on screen by the time it lands is thrown away.
+     */
+    function refreshListQuietly(listRun = searchRunIdRef.current) {
+        if (isSearching || loading || loadMoreInFlightRef.current || (!folderUid && !aggregateFolderType)) {
             return;
         }
-        if (!asConversations && 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 () => {
@@ -1291,6 +1296,20 @@ function InboxContent({ userUid }) {
                 // Quiet by design - see above.
             }
         })();
+    }
+    useEffect(() => {
+        if (live.tick === 0) {
+            return;
+        }
+        if (!asConversations && 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;
+            }
+        }
+        refreshListQuietly();
     }, [live.tick]);
     function handleSearchAllMail() {
         setSearchAllMailKey(searchAllMailScope);
@@ -1541,14 +1560,61 @@ function InboxContent({ userUid }) {
                 : conversation));
         }
     }
+    /**
+     * Takes rows out of the list without a jolt: they collapse over `ROW_EXIT_MS` (the rows below slide up into the gap - see `collapseRow()`), then
+     * `commit()` drops them from the data. `keys` are the rows' `exitingKeys`. With nothing to animate - none of them is listed, the browser can't
+     * animate, or the reader prefers reduced motion - `commit()` runs at once.
+     */
+    function animateRowsOut(keys, commit) {
+        if (keys.length === 0 || !canAnimateRowExit()) {
+            commit();
+            return;
+        }
+        setExitingKeys((prev) => new Set([...prev, ...keys]));
+        const timer = setTimeout(() => {
+            exitTimersRef.current.delete(timer);
+            commit();
+            setExitingKeys((prev) => {
+                const next = new Set(prev);
+                keys.forEach((key) => next.delete(key));
+                return next;
+            });
+        }, ROW_EXIT_MS);
+        exitTimersRef.current.add(timer);
+    }
+    /**
+     * Takes the conversations whose every message is in `uids` out of the conversation list (animated), then quietly refreshes the list: a conversation
+     * that keeps messages elsewhere stays, with its count and preview brought up to date by the refresh rather than by reloading the whole list.
+     * `listRun` is the listing the caller acted on; if another is on screen by now there is nothing left to do.
+     */
+    function removeListedConversations(uids, listRun = searchRunIdRef.current) {
+        if (searchRunIdRef.current !== listRun) {
+            return;
+        }
+        const leaving = new Set(conversationsRef.current.filter((c) => c.messageUids.every((uid) => uids.has(uid))).map(conversationKey));
+        animateRowsOut([...leaving], () => {
+            if (searchRunIdRef.current !== listRun) {
+                return;
+            }
+            setConversations((prev) => prev.filter((c) => !leaving.has(conversationKey(c))));
+            // The refresh below merges into the ref, which only catches up with the state on the next render.
+            conversationsRef.current = conversationsRef.current.filter((c) => !leaving.has(conversationKey(c)));
+            listedOffsetRef.current = Math.max(0, listedOffsetRef.current - leaving.size);
+            refreshListQuietly(listRun);
+        });
+    }
     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));
+        if (asConversations) {
+            removeListedConversations(uids);
+            return;
+        }
+        listedOffsetRef.current = Math.max(0, listedOffsetRef.current - uids.size);
+        animateRowsOut(messagesRef.current.filter((m) => uids.has(m.uid)).map((m) => m.uid), () => setMessages((prev) => prev.filter((m) => !uids.has(m.uid))));
     }
     function removeListedMessage(uid) {
         removeListedMessages(new Set([uid]));
@@ -1582,7 +1648,7 @@ function InboxContent({ userUid }) {
      * that is in the folder being listed. A conversation spans folders (an Inbox message and the Sent
      * Items copy of its reply), and the list only ever showed this folder's half of it, so a bulk action
      * from here must not reach into the other folders' copies either. */
-    const selectedConversationMessages = [...selectedConversationIds].flatMap((id) => (conversationMessagesById[id] ?? []).filter((m) => !folderUid || m.folderUid === folderUid));
+    const selectedConversationMessages = [...selectedConversationIds].flatMap((id) => (conversationMessagesById[id] ?? []).filter((m) => (aggregateFolderType ? folderTypeOf(m.folderUid) === aggregateFolderType : !folderUid || m.folderUid === folderUid)));
     const selectedMessages = asConversations
         ? selectedConversationMessages
         : messages.filter((m) => selectedUids.has(m.uid));
@@ -1622,22 +1688,24 @@ function InboxContent({ userUid }) {
     /** Loads (once) the messages behind each of `ids`, so a ticked conversation resolves to the messages
      * every bulk action below acts on. If any of them fails to load, none of that batch stays ticked and
      * a pop-up says why - better than acting on the part of a selection that happened to arrive. */
-    async function resolveConversations(ids) {
-        const missing = ids.filter((id) => !conversationMessagesById[id]);
+    async function resolveConversations(rows) {
+        const missing = rows.filter((row) => !conversationMessagesById[conversationKey(row)]);
         if (missing.length === 0) {
             return;
         }
         setResolvingSelection((n) => n + 1);
         try {
-            const loaded = await Promise.all(missing.map(async (id) => [id, await listConversationMessages(activeMailboxUid, id, {}, client)]));
+            const loaded = await Promise.all(
+            // A row of the "All mailboxes" view names its own mailbox; any other list is the open mailbox's.
+            missing.map(async (row) => [conversationKey(row), await listConversationMessages(row.mailboxUid ?? activeMailboxUid, row.conversationId, {}, client)]));
             setConversationMessagesById((prev) => ({ ...prev, ...Object.fromEntries(loaded) }));
         }
         catch (err) {
             notifyApiError(err, "Couldn't load the messages in one of those conversations");
             setSelectedConversationIds((prev) => {
                 const next = new Set(prev);
-                for (const id of missing) {
-                    next.delete(id);
+                for (const row of missing) {
+                    next.delete(conversationKey(row));
                 }
                 return next;
             });
@@ -1647,7 +1715,7 @@ function InboxContent({ userUid }) {
         }
     }
     function toggleConversationSelected(conversation) {
-        const id = conversation.conversationId;
+        const id = conversationKey(conversation);
         const ticking = !selectedConversationIds.has(id);
         setSelectedConversationIds((prev) => {
             const next = new Set(prev);
@@ -1660,13 +1728,52 @@ function InboxContent({ userUid }) {
             return next;
         });
         if (ticking) {
-            void resolveConversations([id]);
+            void resolveConversations([conversation]);
         }
     }
     function selectAllConversations() {
-        const ids = conversations.map(conversationKey);
-        setSelectedConversationIds(new Set(ids));
-        void resolveConversations(ids);
+        setSelectedConversationIds(new Set(conversations.map(conversationKey)));
+        void resolveConversations(conversations);
+    }
+    /**
+     * Shift+click: the keys from the anchor to `target` in `keys` (the list in the order it is displayed), entering select mode. The anchor is the
+     * row last clicked or opened (`selectionAnchorRef`), else the row open in the reading pane (`openKey`), else the clicked row itself - and it is
+     * pinned where it was, not moved to `target`, so a second Shift+click elsewhere re-spans from the same row.
+     */
+    function selectRange(keys, target, openKey) {
+        const anchor = resolveAnchor(keys, selectionAnchorRef.current, openKey);
+        selectionAnchorRef.current = anchor ?? target;
+        setSelectMode(true);
+        return rangeBetween(keys, anchor, target);
+    }
+    /** Shift+click on a message row. Plain Shift makes the range the whole selection; Ctrl+Shift (`extend`) adds it to what is ticked already. */
+    function selectMessageRange(message, extend) {
+        const range = selectRange(displayedMessages.map((m) => m.uid), message.uid, selectedUid);
+        setSelectedUids((prev) => new Set(extend ? [...prev, ...range] : range));
+    }
+    /** Shift+click on a conversation row: as `selectMessageRange()`, over the rows in the order they are displayed, each resolved to its messages like a ticked one. */
+    function selectConversationRange(conversation, extend) {
+        const keys = listedConversations.map(conversationKey);
+        const openIndex = selectedRowIndex();
+        const range = selectRange(keys, conversationKey(conversation), openIndex === -1 ? null : keys[openIndex]);
+        setSelectedConversationIds((prev) => new Set(extend ? [...prev, ...range] : range));
+        const inRange = new Set(range);
+        void resolveConversations(listedConversations.filter((c) => inRange.has(conversationKey(c))));
+    }
+    /** A plain click on a conversation's checkbox: ticks (or unticks) it and makes it the anchor of the next Shift+click. */
+    function tickConversation(conversation) {
+        selectionAnchorRef.current = conversationKey(conversation);
+        toggleConversationSelected(conversation);
+    }
+    /** A Shift, Ctrl or Cmd click on a conversation row or its checkbox (the list hands those over rather than opening or ticking the row). */
+    function handleConversationModifierClick(conversation, modifiers) {
+        if (modifiers.shiftKey) {
+            selectConversationRange(conversation, isToggleClick(modifiers));
+            return;
+        }
+        // Ctrl (Cmd): just this row, and select mode if the reader was not in it.
+        setSelectMode(true);
+        tickConversation(conversation);
     }
     /**
      * Runs one bulk action over the current selection, then either patches the affected rows in place or
@@ -1681,6 +1788,8 @@ function InboxContent({ userUid }) {
      * names its own. Resolves whether it succeeded.
      */
     async function runBulkAction(action, removesRows, chosen = selectedMessages) {
+        // The listing this acts on: the action takes a while, and the reader may have opened another folder by the time it is done.
+        const listRun = searchRunIdRef.current;
         setBulkBusy(true);
         try {
             const updated = await action(chosen);
@@ -1697,11 +1806,17 @@ function InboxContent({ userUid }) {
             }
             if (asConversations) {
                 // 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
-                // reloaded rather than patched row by row.
+                // and preview all move when a bulk action changes or empties part of it - so the rows that
+                // went collapse away and the list is then refetched quietly (no skeleton, nothing forgotten)
+                // rather than patched row by row.
                 setSelectedConversationIds(new Set());
                 setConversationMessagesById({});
-                setRefreshKey((n) => n + 1);
+                if (removesRows) {
+                    removeListedConversations(new Set(chosen.map((m) => m.uid)), listRun);
+                }
+                else {
+                    refreshListQuietly(listRun);
+                }
             }
             else if (removesRows) {
                 removeListedMessages(new Set(chosen.map((m) => m.uid)));
@@ -1804,6 +1919,7 @@ function InboxContent({ userUid }) {
      * (those stay listed, and the reload shows what is really there). Resolves whether anything was deleted.
      */
     async function purgeChosen(chosen) {
+        const listRun = searchRunIdRef.current;
         const outcome = await permanent.requestPermanentDelete(chosen);
         if (!outcome) {
             return false;
@@ -1811,7 +1927,7 @@ function InboxContent({ userUid }) {
         if (asConversations) {
             setSelectedConversationIds(new Set());
             setConversationMessagesById({});
-            setRefreshKey((n) => n + 1);
+            removeListedConversations(new Set(outcome.deleted.map((m) => m.uid)), listRun);
         }
         else {
             removeListedMessages(new Set(outcome.deleted.map((m) => m.uid)));
@@ -1883,7 +1999,10 @@ function InboxContent({ userUid }) {
     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;
     /** One message's row of the flat list - and, in search results grouped by conversation, of a group. */
     function renderMessageRow(message) {
-        return (_jsxs(SwipeRow, { as: "li", enabled: swipeEnabled, onArchive: () => swipeArchive([message]), onMove: () => setMoveDialog({ messages: [message] }), "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("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => handleSelect(message), className: ["w-full 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() })] }), crossMailbox && (_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] ||
+        const exiting = exitingKeys.has(message.uid);
+        return (_jsxs(SwipeRow, { as: "li", enabled: swipeEnabled, onArchive: () => swipeArchive([message]), onMove: () => setMoveDialog({ messages: [message] }), "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, "data-exiting": exiting ? "true" : undefined, "aria-hidden": exiting ? "true" : undefined, inert: exiting, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, exiting ? "flex items-stretch pointer-events-none" : "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), 
+                        // The change of a checkbox is caused by a click (or the Space key, which makes one): its modifiers are that event's.
+                        onChange: (event) => handleSelect(message, event.nativeEvent), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: (event) => handleSelect(message, event), className: ["w-full 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() })] }), crossMailbox && (_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.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] }), isOutbox && _jsx(OutboxRowStatus, { message: message })] }))] }), _jsx(InviteRowChip, { message: message, onResponded: (updated) => patchListedMessage(updated) })] })] }, message.uid));
@@ -1891,9 +2010,26 @@ function InboxContent({ userUid }) {
     /** Search results arranged by conversation: the messages that matched, grouped under the conversation each belongs to, in the order of the
      * first match of each - the order the results are ranked in. `null` when the list is not showing grouped results. */
     const resultGroups = groupedResults ? groupByConversation(messages) : null;
+    /** The messages in the order the list shows them - grouped results are listed group by group - which is the order a Shift+click range runs in. */
+    const displayedMessages = resultGroups ? resultGroups.flatMap((group) => group.messages) : messages;
     /** The search box: in the list on a desktop (flat lists only), in the shell's header beside the folders button on a phone. */
     const searchField = (_jsx("input", { ref: searchInputRef, type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: "Search all mail\u2026", "aria-label": "Search all mail", className: ["w-full text-sm px-3 rounded-md border border-border bg-surface", isMobile ? "py-2" : "py-1.5"].join(" ") }));
-    function handleSelect(message) {
+    /**
+     * A click on a message row (or its checkbox), or the keyboard moving the selection to it (no `modifiers`). Shift+click selects the range from the
+     * anchor; Ctrl/Cmd+click toggles just this row, entering select mode if needed (Ctrl+Shift adds the range to the selection instead of replacing it);
+     * a plain click ticks the row in select mode and opens it otherwise.
+     */
+    function handleSelect(message, modifiers) {
+        if (modifiers?.shiftKey) {
+            selectMessageRange(message, isToggleClick(modifiers));
+            return;
+        }
+        selectionAnchorRef.current = message.uid;
+        if (isToggleClick(modifiers)) {
+            setSelectMode(true);
+            toggleSelected(message.uid);
+            return;
+        }
         if (selectMode) {
             toggleSelected(message.uid);
             return;
@@ -1929,6 +2065,7 @@ function InboxContent({ userUid }) {
     /** Opens a conversation in the reading pane, positioned at one of its messages: the one a child row
      * stands for, or the latest for a parent row. The thread pane loads the thread itself. */
     function handleOpenConversation(conversation, uid) {
+        selectionAnchorRef.current = conversationKey(conversation);
         if (selectMode) {
             // Same rule as `handleSelect()` for a message row: while selecting, a row's own button ticks
             // the row rather than opening it.
@@ -1951,11 +2088,18 @@ function InboxContent({ userUid }) {
     const inConversations = asConversations;
     /** The selection bar isn't offered in the aggregate listing (its rows belong to several mailboxes), and neither are these - but the results of a
      * search over them are, each hit acted on in its own mailbox (see `inEachMailbox()`). */
-    const keyboardActions = !aggregateFolderType || isSearching;
+    const keyboardActions = true;
     /** 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 : threadPane ? openThread !== null : selected !== null;
     const rowCount = inConversations ? listedConversations.length : messages.length;
-    const canMoveSelection = !selectMode && !isMobile && !loading && rowCount > 0;
+    // Not while rows are collapsing out of the list: their indexes are about to shift.
+    const canMoveSelection = !selectMode && !isMobile && !loading && rowCount > 0 && exitingKeys.size === 0;
+    // Starts the collapse of the rows that have just been marked as leaving (see `animateRowsOut()`).
+    useLayoutEffect(() => {
+        if (exitingKeys.size > 0) {
+            scrollContainerRef.current.querySelectorAll("[data-exiting]").forEach((row) => collapseRow(row));
+        }
+    }, [exitingKeys]);
     /** The type of a message's folder - looked for in every mailbox's, as a search over several has messages from each. */
     function folderTypeOf(folderUidOfMessage) {
         return mailboxFolders.flatMap((mf) => mf.folders).find((f) => f.uid === folderUidOfMessage)?.type;
@@ -2132,13 +2276,31 @@ function InboxContent({ userUid }) {
         : undefined;
     // Delete is the permanent one for what is in Deleted Items: for the selection when there is one (search results can come from any folder),
     // else for the folder being viewed, so the button says so before anything is ticked.
-    const deletesPermanently = selectedMessages.length > 0 ? selectedMessages.every(inDeletedItems) : currentFolders.find((f) => f.uid === folderUid)?.type === "deleted_items";
-    // Empty folder is offered at the top of the list of a mailbox's own Deleted Items or Junk Email - not for search results, nor for the "All
-    // mailboxes" views, which have no one folder to empty.
-    const emptiableFolder = !isSearching && !aggregateFolderType ? currentFolders.find((f) => f.uid === folderUid && EMPTIABLE_FOLDER_TYPES.includes(f.type)) : undefined;
+    const deletesPermanently = selectedMessages.length > 0
+        ? selectedMessages.every(inDeletedItems)
+        : aggregateFolderType
+            ? aggregateFolderType === "deleted_items"
+            : currentFolders.find((f) => f.uid === folderUid)?.type === "deleted_items";
+    // Empty folder is offered at the top of the list of a mailbox's own Deleted Items or Junk Email, and of the "All mailboxes" view of either, which
+    // empties each mailbox's own (a share the reader may not delete in refuses, and says so) - not for search results.
+    const emptiableFolders = isSearching
+        ? []
+        : aggregateFolderType
+            ? EMPTIABLE_FOLDER_TYPES.includes(aggregateFolderType)
+                ? mailboxFolders.flatMap((entry) => entry.folders.filter((f) => f.type === aggregateFolderType))
+                : []
+            : currentFolders.filter((f) => f.uid === folderUid && EMPTIABLE_FOLDER_TYPES.includes(f.type));
+    const emptiableFolder = emptiableFolders.length === 0
+        ? undefined
+        : {
+            uid: emptiableFolders[0].uid,
+            name: aggregateFolderType ? (emptiableFolders[0].type === "junk" ? "Junk Email" : "Deleted Items") : emptiableFolders[0].name,
+            uids: aggregateFolderType ? emptiableFolders.map((f) => f.uid) : undefined,
+        };
     // How many it holds as the sidebar's counts have it (kept right as messages leave), unless that says none while the list shows some.
-    const emptiableCount = emptiableFolder && folderCountOf(emptiableFolder).total > 0 ? folderCountOf(emptiableFolder).total : undefined;
-    const emptyDisabledReason = !mailboxWritable
+    const emptiableTotal = emptiableFolders.reduce((sum, f) => sum + folderCountOf(f).total, 0);
+    const emptiableCount = emptiableFolder && emptiableTotal > 0 ? emptiableTotal : undefined;
+    const emptyDisabledReason = !(aggregateFolderType ? emptiableFolders.length > 0 : mailboxWritable)
         ? "This mailbox is shared with you view-only"
         : listedRowCount === 0 && emptiableCount === undefined
             ? "This folder is already empty"
@@ -2151,55 +2313,57 @@ 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, 
-                // 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: asConversations
-                            ? { selected: selectedConversationIds.size, listed: conversations.length, noun: "conversation" }
-                            : undefined, onSelectAll: () => asConversations
-                            ? selectAllConversations()
-                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => asConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: foldersOf(selectionMailboxUid), currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: selectionMailboxUid, moveDisabledReason: moveDisabledReason, labelsDisabledReason: labelsDisabledReason, 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, client), false), shortcuts: keyboardActions, onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: async (targetFolderUid) => {
-                            await runBulkAction((chosen) => moveMessages(chosen, targetFolderUid, client), true);
-                        }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void (deletesPermanently
-                            ? purgeChosen(selectedMessages)
-                            : // A mix (search results from several folders) moves only what is not in Deleted Items yet.
-                                moveSelectionToType("deleted_items", "Deleted Items", selectedMessages.filter((m) => !inDeletedItems(m)))), deletesPermanently: deletesPermanently, busy: bulkBusy || resolvingSelection > 0 || permanent.busy })) : (_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: asConversations ? CONVERSATION_SORT_UNAVAILABLE : undefined, sortKeysNote: isSearching
-                            ? "Search results are ranked by relevance rather than sorted."
-                            : aggregateFolderType
-                                ? "This view merges the newest mail from every mailbox and is always listed by date."
-                                : asConversations
-                                    ? CONVERSATION_SORT_NOTE
-                                    : undefined, selectDisabled: (!!aggregateFolderType && !isSearching) || loading || listedRowCount === 0, selectDisabledReason: aggregateFolderType && !isSearching
-                            ? "Open a mailbox's own folder to select messages"
-                            : loading
-                                ? "Wait for this folder to finish loading"
-                                : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), emptiableFolder && !selectMode && (_jsx(EmptyFolderBar, { folderName: emptiableFolder.name, count: emptiableCount, disabled: !!emptyDisabledReason || permanent.busy || bulkBusy, disabledReason: emptyDisabledReason, onEmpty: () => void emptyListedFolder(emptiableFolder, emptiableCount) })), permanent.dialog, 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"
-                                    : "text-text-muted",
-                            ].join(" "), children: label }, value))) })), isSearching && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex flex-col", children: [_jsx("span", { children: tier1Done && tier2Done && tier3Done
-                                            ? `${messages.length} result${messages.length === 1 ? "" : "s"}`
-                                            : `${messages.length} of ??` }), crossMailbox && _jsx("span", { "data-testid": "search-scope", children: "All mailboxes" })] }), _jsxs("span", { className: "flex flex-col items-end gap-0.5", children: [tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, title: crossMailbox
-                                            ? "Also search encrypted mail from before each mailbox's local index begins"
-                                            : undefined, className: "text-primary-dark hover:underline font-medium shrink-0", children: crossMailbox ? "Search older encrypted mail" : "Search all mail" })), widenable && (_jsx("button", { type: "button", onClick: () => setSearchAllMailboxes(!searchAllMailboxes), className: "text-primary-dark hover:underline font-medium shrink-0", children: searchAllMailboxes ? "Search this mailbox only" : "Search all mailboxes" }))] })] })), crossMailbox && isSearching && searchableMailboxes.length > searchedMailboxes.length && (_jsxs("div", { role: "status", className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Searched ", searchedMailboxes.length, " of ", searchableMailboxes.length, " mailboxes - the most that are searched at once."] })), crossMailbox && isSearching && searchFailures.length > 0 && (_jsxs("div", { role: "status", className: "px-4 py-1.5 text-xs text-text-muted border-b border-border bg-surface-alt", children: ["Some results may be missing: ", describeFailures(searchFailures)] })), isSearching && !crossMailbox && 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 && crossMailbox && tier2Done && serverOnlyMailboxes.length > 0 && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["There is no local index on this device for ", serverOnlyMailboxes.map((mb) => mb.displayName).join(", "), ": its encrypted mail is searched through the server instead, which is slower and looks at a limited number of messages."] })), isSearching && crossMailbox && lockedSearchMailboxes.length > 0 && (_jsxs("div", { className: "px-4 py-2 border-b border-border bg-surface-alt flex flex-col gap-1", children: [unlockableSearchMailboxes.length > 0 && (_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 from ", unlockableSearchMailboxes.map((mb) => mb.displayName).join(", ")] })), sharedLockedSearchMailboxes.length > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Encrypted messages in ", sharedLockedSearchMailboxes.map((mb) => mb.displayName).join(", "), " are not included: only the mailbox\u2019s owner can unlock them."] }))] })), isSearching && !crossMailbox && !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 && !asConversations && 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 ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : asConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onMeetingResponded: patchListedMessage, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected, swipe: {
-                                    enabled: swipeEnabled,
-                                    onArchive: swipeArchive,
-                                    onMove: (conversation) => setMoveDialog({ conversation }),
-                                } }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " conversations \u2014 refine your search or filters to see more."] }))] })) : 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", { className: swipeEnabled ? "overflow-x-clip" : undefined, children: resultGroups
-                                    ? resultGroups.map((group) => (_jsxs("li", { "data-search-group": group.id, children: [_jsxs("div", { className: "px-4 py-1.5 bg-surface-alt border-b border-border text-xs text-text-muted flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: rowSubject(group.messages[0]) }), _jsxs("span", { className: "shrink-0", children: [group.messages.length, " matching message", group.messages.length === 1 ? "" : "s"] })] }), _jsx("ul", { children: group.messages.map(renderMessageRow) })] }, `${group.mailboxUid}\u0000${group.id}`)))
-                                    : messages.map(renderMessageRow) }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " messages \u2014 refine your search or filters to see more."] })), aggregateFolderType && !isSearching && (_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: threadPane ? (_jsx(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: labelsMailboxUid, folders: foldersOf(labelsMailboxUid), labels: labels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : 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) => {
+    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { "data-testid": "mail-list-column", className: "w-full md:w-96 shrink-0 md:border-r border-border flex flex-col min-h-0", children: [_jsxs("div", { "data-testid": "mail-list-header", className: "shrink-0", children: [selectMode ? (_jsx(MailSelectionBar, { selected: selectedMessages, listed: messages, totals: asConversations
+                                    ? { selected: selectedConversationIds.size, listed: conversations.length, noun: "conversation" }
+                                    : undefined, onSelectAll: () => asConversations
+                                    ? selectAllConversations()
+                                    : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => asConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: foldersOf(selectionMailboxUid), currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: selectionMailboxUid, moveDisabledReason: moveDisabledReason, labelsDisabledReason: labelsDisabledReason, 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, client), false), shortcuts: keyboardActions, onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: async (targetFolderUid) => {
+                                    await runBulkAction((chosen) => moveMessages(chosen, targetFolderUid, client), true);
+                                }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void (deletesPermanently
+                                    ? purgeChosen(selectedMessages)
+                                    : // A mix (search results from several folders) moves only what is not in Deleted Items yet.
+                                        moveSelectionToType("deleted_items", "Deleted Items", selectedMessages.filter((m) => !inDeletedItems(m)))), deletesPermanently: deletesPermanently, busy: bulkBusy || resolvingSelection > 0 || permanent.busy })) : (_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: asConversations ? CONVERSATION_SORT_UNAVAILABLE : undefined, sortKeysNote: isSearching
+                                    ? "Search results are ranked by relevance rather than sorted."
+                                    : aggregateFolderType
+                                        ? "This view merges the newest mail from every mailbox and is always listed by date."
+                                        : asConversations
+                                            ? CONVERSATION_SORT_NOTE
+                                            : undefined, selectDisabled: loading || listedRowCount === 0, selectDisabledReason: loading ? "Wait for this folder to finish loading" : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), emptiableFolder && !selectMode && (_jsx(EmptyFolderBar, { folderName: emptiableFolder.name, count: emptiableCount, disabled: !!emptyDisabledReason || permanent.busy || bulkBusy, disabledReason: emptyDisabledReason, onEmpty: () => void emptyListedFolder(emptiableFolder, emptiableCount) })), permanent.dialog, 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"
+                                            : "text-text-muted",
+                                    ].join(" "), children: label }, value))) }))] }), _jsxs("div", { ref: scrollContainerRef, "data-testid": "mail-list-scroll", 
+                        // 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), 
+                        // A Shift+click selects a range: without this the browser would also select the text between the two rows.
+                        onMouseDown: (event) => {
+                            if (event.shiftKey) {
+                                event.preventDefault();
+                            }
+                        }, className: "flex-1 min-h-0 overflow-y-auto", children: [isSearching && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex flex-col", children: [_jsx("span", { children: tier1Done && tier2Done && tier3Done
+                                                    ? `${messages.length} result${messages.length === 1 ? "" : "s"}`
+                                                    : `${messages.length} of ??` }), crossMailbox && _jsx("span", { "data-testid": "search-scope", children: "All mailboxes" })] }), _jsxs("span", { className: "flex flex-col items-end gap-0.5", children: [tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, title: crossMailbox
+                                                    ? "Also search encrypted mail from before each mailbox's local index begins"
+                                                    : undefined, className: "text-primary-dark hover:underline font-medium shrink-0", children: crossMailbox ? "Search older encrypted mail" : "Search all mail" })), widenable && (_jsx("button", { type: "button", onClick: () => setSearchAllMailboxes(!searchAllMailboxes), className: "text-primary-dark hover:underline font-medium shrink-0", children: searchAllMailboxes ? "Search this mailbox only" : "Search all mailboxes" }))] })] })), crossMailbox && isSearching && searchableMailboxes.length > searchedMailboxes.length && (_jsxs("div", { role: "status", className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Searched ", searchedMailboxes.length, " of ", searchableMailboxes.length, " mailboxes - the most that are searched at once."] })), crossMailbox && isSearching && searchFailures.length > 0 && (_jsxs("div", { role: "status", className: "px-4 py-1.5 text-xs text-text-muted border-b border-border bg-surface-alt", children: ["Some results may be missing: ", describeFailures(searchFailures)] })), isSearching && !crossMailbox && 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 && crossMailbox && tier2Done && serverOnlyMailboxes.length > 0 && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["There is no local index on this device for ", serverOnlyMailboxes.map((mb) => mb.displayName).join(", "), ": its encrypted mail is searched through the server instead, which is slower and looks at a limited number of messages."] })), isSearching && crossMailbox && lockedSearchMailboxes.length > 0 && (_jsxs("div", { className: "px-4 py-2 border-b border-border bg-surface-alt flex flex-col gap-1", children: [unlockableSearchMailboxes.length > 0 && (_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 from ", unlockableSearchMailboxes.map((mb) => mb.displayName).join(", ")] })), sharedLockedSearchMailboxes.length > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Encrypted messages in ", sharedLockedSearchMailboxes.map((mb) => mb.displayName).join(", "), " are not included: only the mailbox\u2019s owner can unlock them."] }))] })), isSearching && !crossMailbox && !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 && !asConversations && 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 ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : asConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onMeetingResponded: patchListedMessage, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: tickConversation, onSelectWithModifier: handleConversationModifierClick, exitingKeys: exitingKeys, swipe: {
+                                            enabled: swipeEnabled,
+                                            onArchive: swipeArchive,
+                                            onMove: (conversation) => setMoveDialog({ conversation }),
+                                        } }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " conversations \u2014 refine your search or filters to see more."] }))] })) : 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", { className: swipeEnabled ? "overflow-x-clip" : undefined, children: resultGroups
+                                            ? resultGroups.map((group) => (_jsxs("li", { "data-search-group": group.id, children: [_jsxs("div", { className: "px-4 py-1.5 bg-surface-alt border-b border-border text-xs text-text-muted flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: rowSubject(group.messages[0]) }), _jsxs("span", { className: "shrink-0", children: [group.messages.length, " matching message", group.messages.length === 1 ? "" : "s"] })] }), _jsx("ul", { children: group.messages.map(renderMessageRow) })] }, `${group.mailboxUid}\u0000${group.id}`)))
+                                            : messages.map(renderMessageRow) }), hasMore && !rowCapReached && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), rowCapReached && (_jsxs("p", { className: "p-4 text-center text-xs text-text-muted", children: ["Showing the most recent ", rowCap, " messages \u2014 refine your search or filters to see more."] })), aggregateFolderType && !isSearching && (_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: threadPane ? (_jsx(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: labelsMailboxUid, folders: foldersOf(labelsMailboxUid), labels: labels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : 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);