@rapidmx/web-client 0.28.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);
@@ -840,6 +854,7 @@ function InboxContent({ userUid }) {
         setSelectedUids(new Set());
         setSelectedConversationIds(new Set());
         setConversationMessagesById({});
+        selectionAnchorRef.current = null;
         listedOffsetRef.current = 0;
         compositeCursorRef.current = undefined;
         setHasMore(false);
@@ -1225,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 () => {
@@ -1285,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);
@@ -1535,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]));
@@ -1663,6 +1735,46 @@ function InboxContent({ userUid }) {
         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
      * drops them (a move takes them out of the folder being listed).
@@ -1676,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);
@@ -1692,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)));
@@ -1799,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;
@@ -1806,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)));
@@ -1878,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));
@@ -1886,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;
@@ -1924,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.
@@ -1950,7 +2092,14 @@ function InboxContent({ userUid }) {
     /** 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;
@@ -2164,51 +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: 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))) })), 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);

package/dist/lib/calendar/eventSearch.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The calendar's search: which events match what was typed, and the chronological list of their occurrences to step through. The calendar page
+ * already holds every event of the checked calendars (`listCalendarEvents()` fetches whole folders - there is no server-side text or range query
+ * to lean on), so this is entirely client-side and covers all time, not just the visible range. A series contributes the occurrences inside a window
+ * of `SEARCH_WINDOW_YEARS` either side of today, at most `SEARCH_MAX_OCCURRENCES_PER_SERIES` of them (the ones nearest today).
+ */
+import { CalendarEvent } from "./calendarApi.js";
+import { CalendarOccurrence } from "./recurrence.js";
+/** How far either side of today a recurring event's occurrences are searched. */
+export declare const SEARCH_WINDOW_YEARS = 5;
+/** The most occurrences one recurring event contributes (the ones nearest today), so a daily series cannot flood the results. */
+export declare const SEARCH_MAX_OCCURRENCES_PER_SERIES = 500;
+/** The words of `query`, folded; an event must match every one of them. Empty for a blank query. */
+export declare function searchTerms(query: string): string[];
+/**
+ * Whether `event` has every one of `terms` (from `searchTerms()`) somewhere in its readable text. A busy block (`redacted`: a private event on a
+ * shared calendar) never matches - its title is a placeholder, not what the event says.
+ */
+export declare function eventMatchesTerms(event: CalendarEvent, terms: string[]): boolean;
+/**
+ * The occurrences of the events of `events` that match `query`, in chronological order. A single event is one occurrence wherever it falls; a
+ * recurring one contributes those within `SEARCH_WINDOW_YEARS` of `now`, the `SEARCH_MAX_OCCURRENCES_PER_SERIES` nearest to it at most.
+ */
+export declare function searchOccurrences(events: CalendarEvent[], query: string, now?: Date): CalendarOccurrence[];
+/** Every occurrence of every event, in chronological order, bounded the same way a search is - the calendar's List view shows these. */
+export declare function allOccurrences(events: CalendarEvent[], now?: Date): CalendarOccurrence[];
+/** The `occurrences` that overlap `[rangeStart, rangeEnd]` - what `expandOccurrences()` keeps, so a view shows exactly these. */
+export declare function occurrencesInRange(occurrences: CalendarOccurrence[], rangeStart: Date, rangeEnd: Date): CalendarOccurrence[];
+/**
+ * Which of the chronological `matches` to show first for a search: the first one inside the view (`[rangeStart, rangeEnd]`) when there is one,
+ * else the first that ends after `from` (the day being viewed), else the last (the nearest before). `-1` when there are no matches.
+ */
+export declare function initialMatchIndex(matches: CalendarOccurrence[], rangeStart: Date, rangeEnd: Date, from: Date): number;
+/**
+ * The index of the occurrence one step from the current one in `sequence` (chronological), or `-1` for none. The current occurrence is found by
+ * `currentKey`; when it is not in the sequence (it was deleted or changed under an open card) the step is from where it started
+ * (`currentStart`): the first after it or the last before it, and from the first or last when that is not known either. Past either end it
+ * wraps round when `wrap`, else there is nothing there (`-1`).
+ */
+export declare function stepSequenceIndex(sequence: CalendarOccurrence[], currentKey: string | null, currentStart: Date | undefined, direction: 1 | -1, wrap: boolean): number;
+/** The index one step from `index` (`-1`: none is current) in `direction` through `count` matches, wrapping round at either end. `-1` with none. */
+export declare function stepMatchIndex(index: number, count: number, direction: 1 | -1): number;