@rapidmx/web-client 0.14.0 → 0.15.1

package/dist/apps/www/index.js

@@ -8,6 +8,7 @@ import { useNavigate } from "../shared/navigation/AppRouter.js";
 import { whenIdle } from "../shared/navigation/idle.js";
 import { prefetchComposeWindow } from "../shared/components/mail/compose/ComposeContext.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { HiOutlineFlag, HiOutlineLockClosed, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { archiveMessage, bulkUpdateMessages, createFolder, getMessage, getMessageRawContent, listFolders, listMessages, moveMessages, setMessagesFlagged, } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -30,6 +31,9 @@ import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
 import ConversationList from "../shared/components/mail/ConversationList.js";
+import SwipeRow from "../shared/components/mail/SwipeRow.js";
+import InviteRowChip from "../shared/components/mail/invite/InviteRowChip.js";
+import MoveToFolderDialog from "../shared/components/mail/MoveToFolderDialog.js";
 import { EncryptedPreview } from "../shared/components/mail/reading/EncryptedPreview.js";
 import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
 import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
@@ -366,11 +370,26 @@ async function fetchAggregateMessages(mailboxFolders, type, filter) {
     }));
     return mergeInboxMessages(perMailbox);
 }
+/** Groups search results by the conversation each message belongs to, the groups in the order of their first result. */
+function groupByConversation(results) {
+    const groups = new Map();
+    for (const message of results) {
+        const id = message.conversationId ?? message.uid;
+        const group = groups.get(id);
+        if (group) {
+            group.messages.push(message);
+        }
+        else {
+            groups.set(id, { id, messages: [message] });
+        }
+    }
+    return [...groups.values()];
+}
 function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
 function InboxContent({ userUid }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, noteFolderUids, live, trackMessageChange } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot } = useMailShell();
     const isMobile = useIsMobile();
     const navigate = useNavigate();
     const { requestUnlock } = useUnlockPrompt();
@@ -480,7 +499,14 @@ function InboxContent({ userUid }) {
     // Search stays real-folder-only - Tier 1/2/3 are all deeply mailbox/folder-scoped, and extending them
     // to span an arbitrary number of mailboxes is out of scope for this pass (see the aggregate-fetch
     // branch below, which the search effect never reaches while `folderUid` is unset).
-    const isSearching = !preferences.showAsConversations && searchQuery.length > 0 && !aggregateFolderType;
+    // Search works whichever way the list is arranged. Its results are messages, so while a query is held the list is fetched as
+    // messages (`asConversations` is about the list's data and is false then), and when the reader arranges by conversation they are
+    // shown grouped under their conversation - only the messages that match - with the whole thread in the reading pane
+    // (`threadPane`, which follows the arrangement the reader chose and not the query).
+    const isSearching = searchQuery.length > 0 && !aggregateFolderType;
+    const asConversations = preferences.showAsConversations && !isSearching;
+    const threadPane = preferences.showAsConversations;
+    const groupedResults = isSearching && preferences.showAsConversations;
     // Focused/Other is an Inbox-only concept (`FocusedInboxUtils.classifyMessage()` short-circuits to
     // Focused for every other folder), and
     // search results are ranked across folders rather than listed from one, so neither tab is offered
@@ -513,7 +539,7 @@ function InboxContent({ userUid }) {
      * shown: `GET /mail/messages/conversations` takes no sort parameters at all, so those rows are ordered
      * in the browser (`sortConversations()`) and rearranging them must not refetch the identical page -
      * which would also collapse whichever conversations the reader had expanded. */
-    const serverSortKey = preferences.showAsConversations ? "" : `${preferences.sortBy}:${preferences.sortOrder}`;
+    const serverSortKey = asConversations ? "" : `${preferences.sortBy}:${preferences.sortOrder}`;
     /** The conversation list's own equivalent of `listParams` - a function because the page differs. */
     function conversationParams(page) {
         return { folderUid, filter: effectiveFilter, ...labelFilter, page, limit: MESSAGE_PAGE_SIZE };
@@ -653,7 +679,7 @@ function InboxContent({ userUid }) {
     // `activeMailboxUid`, and offering that mailbox's labels would let a label from the wrong mailbox be
     // applied. The conversation view stays scoped to `activeMailboxUid`, the mailbox its threads come from.
     const selectedMessageMailboxUid = messages.find((m) => m.uid === selectedUid)?.mailboxUid;
-    const labelsMailboxUid = preferences.showAsConversations ? activeMailboxUid : (selectedMessageMailboxUid ?? activeMailboxUid);
+    const labelsMailboxUid = threadPane ? activeMailboxUid : (selectedMessageMailboxUid ?? activeMailboxUid);
     // Almost always the open mailbox's own labels, already fetched below - so `labels` reuses that list
     // rather than asking for the identical one a second time (which is what this page did on every single
     // view). Only a selected message from *another* mailbox - a search hit or an aggregate-view row - needs
@@ -719,7 +745,7 @@ function InboxContent({ userUid }) {
     const listKey = listSnapshotKey({
         mailboxUid: activeMailboxUid,
         folderUid,
-        conversations: preferences.showAsConversations,
+        conversations: asConversations,
         filter: effectiveFilter,
         labels: labelFilterKey,
         sort: serverSortKey,
@@ -787,7 +813,7 @@ function InboxContent({ userUid }) {
             setLoading(true);
             return;
         }
-        if (preferences.showAsConversations) {
+        if (asConversations) {
             // Conversations stay single-mailbox (not aggregated across mailboxes in this pass) - in
             // aggregate mode this falls back to `activeMailboxUid`, the same mailbox unlock/labels use
             // (always set - `MailShell` only renders this component once at least one mailbox exists).
@@ -986,7 +1012,7 @@ function InboxContent({ userUid }) {
         // `refreshKey` is a dependency for the same reason: a failed bulk action bumps it to refetch,
         // since a bulk update applies until its first rejection rather than all-or-nothing.
     }, [
-        preferences.showAsConversations,
+        asConversations,
         serverSortKey,
         effectiveFilter,
         labelFilterKey,
@@ -1019,7 +1045,7 @@ function InboxContent({ userUid }) {
         if (live.tick === 0 || isSearching || loading || loadMoreInFlightRef.current || (!folderUid && !aggregateFolderType)) {
             return;
         }
-        if (!preferences.showAsConversations && live.folderUids) {
+        if (!asConversations && live.folderUids) {
             const shown = new Set(aggregateFolderType
                 ? mailboxFolders.flatMap((entry) => entry.folders.filter((f) => f.type === aggregateFolderType).map((f) => f.uid))
                 : [folderUid]);
@@ -1033,7 +1059,7 @@ function InboxContent({ userUid }) {
         const isCurrent = () => searchRunIdRef.current === listRun && liveRunRef.current === myRun;
         void (async () => {
             try {
-                if (preferences.showAsConversations) {
+                if (asConversations) {
                     const fresh = await listConversations(activeMailboxUid, conversationParams(0));
                     if (!isCurrent()) {
                         return;
@@ -1082,12 +1108,12 @@ function InboxContent({ userUid }) {
         // Reads the ref, not `conversations`/`messages` state, so this callback (and the observer effect
         // watching it) don't need to be recreated every time a page lands - the same reason every other
         // check below reads a ref rather than closing over state.
-        const atRowCap = (preferences.showAsConversations ? conversationsRef.current.length : messagesRef.current.length) >= MAX_LOADED_ROWS;
+        const atRowCap = (asConversations ? conversationsRef.current.length : messagesRef.current.length) >= MAX_LOADED_ROWS;
         if (loadMoreInFlightRef.current ||
             !hasMore ||
             loading ||
             atRowCap ||
-            (!preferences.showAsConversations && !folderUid) ||
+            (!asConversations && !folderUid) ||
             (isSearching && !searchCursor)) {
             return;
         }
@@ -1119,7 +1145,7 @@ function InboxContent({ userUid }) {
         const myRunId = searchRunIdRef.current;
         const isCurrentRun = () => searchRunIdRef.current === myRunId;
         try {
-            if (preferences.showAsConversations) {
+            if (asConversations) {
                 const page = Math.floor(listedOffsetRef.current / MESSAGE_PAGE_SIZE);
                 const more = await listConversations(activeMailboxUid, conversationParams(page));
                 if (!isCurrentRun()) {
@@ -1198,7 +1224,7 @@ function InboxContent({ userUid }) {
     }, [
         hasMore,
         loading,
-        preferences.showAsConversations,
+        asConversations,
         serverSortKey,
         effectiveFilter,
         labelFilterKey,
@@ -1277,7 +1303,7 @@ function InboxContent({ userUid }) {
     }
     // The conversation list opens a whole thread in `ConversationThreadPane`, which loads and marks read
     // its own messages; only the flat list feeds the single-message pane below.
-    const selected = preferences.showAsConversations ? null : (messages.find((m) => m.uid === selectedUid) ?? null);
+    const selected = threadPane ? null : (messages.find((m) => m.uid === selectedUid) ?? null);
     const attachments = useMessageAttachments(selected);
     useMarkMessageRead(selected, patchListedMessage);
     // Search results can span every folder in the mailbox, not just the one selected in the sidebar - a
@@ -1286,7 +1312,7 @@ function InboxContent({ userUid }) {
     // this falls back to the sidebar selection unchanged). Aggregate views span every *mailbox* too, so
     // the folder list consulted is the selected message's own mailbox's, not the shell's ambient one. A
     // conversation spans folders for the same reason (an Inbox message and the Sent Items copy of its reply).
-    const spansFolders = isSearching || !!aggregateFolderType || preferences.showAsConversations;
+    const spansFolders = isSearching || !!aggregateFolderType || threadPane;
     const selectedFolderUid = spansFolders ? (selected?.folderUid ?? folderUid) : folderUid;
     const selectedMailboxUid = spansFolders ? (selected?.mailboxUid ?? activeMailboxUid) : mailboxUid;
     const folders = mailboxFolders.find((mf) => mf.mailbox.uid === selectedMailboxUid)?.folders ?? [];
@@ -1305,12 +1331,12 @@ function InboxContent({ userUid }) {
      * 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 selectedMessages = preferences.showAsConversations
+    const selectedMessages = asConversations
         ? selectedConversationMessages
         : messages.filter((m) => selectedUids.has(m.uid));
     /** How many rows the list is actually showing - conversations or messages, whichever it lists. What the
      * Select toggle is enabled by: there is nothing to select in a list with no rows. */
-    const listedRowCount = preferences.showAsConversations ? conversations.length : messages.length;
+    const listedRowCount = asConversations ? conversations.length : messages.length;
     /** The conversation rows in the order the reader arranged them. The endpoint takes no sort parameters
      * of its own (it pages by latest activity), so the arrangement is applied here, to the rows fetched so
      * far - which the Sort menu says on screen. `conversations` itself stays in the order the pages
@@ -1323,7 +1349,7 @@ function InboxContent({ userUid }) {
      * mailbox/search whose true size lands at or near the cap can have its very last page be a partial one,
      * which correctly turns `hasMore` false - without checking it here, the banner would still claim rows
      * are being hidden even though every one of them is already on screen. */
-    const rowCapReached = hasMore && (preferences.showAsConversations ? conversations.length : messages.length) >= MAX_LOADED_ROWS;
+    const rowCapReached = hasMore && (asConversations ? conversations.length : messages.length) >= MAX_LOADED_ROWS;
     function leaveSelectMode() {
         setSelectMode(false);
         setSelectedUids(new Set());
@@ -1417,7 +1443,7 @@ function InboxContent({ userUid }) {
                     }
                 }
             }
-            if (preferences.showAsConversations) {
+            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.
@@ -1501,12 +1527,69 @@ function InboxContent({ userUid }) {
     function moveSelectionToType(type, name, chosen) {
         return runBulkAction(async (moving) => moveMessages(moving, await resolveFolderOfType(type, name)), true, chosen);
     }
+    // ---- Swiping a row on a phone (see `SwipeRow`): right to left archives, left to right asks for a folder. Both go through the same
+    // ---- bulk path as the selection bar's Archive and Move to, so the badges, the optimistic bookkeeping and the failure pop-up are one
+    // ---- implementation. Not offered where the actions aren't (an aggregate view spans mailboxes, search results are a mixed bag, the
+    // ---- Outbox is the server's send queue) or while rows are being ticked.
+    const listingOutbox = currentFolders.find((f) => f.uid === folderUid)?.type === "outbox";
+    const swipeEnabled = isMobile && !selectMode && !aggregateFolderType && !isSearching && !listingOutbox;
+    /** What a swipe's Move to is about, while its folder prompt is open: one message, or every message of a conversation in this folder. */
+    const [moveDialog, setMoveDialog] = useState(null);
+    /** The messages a swiped conversation stands for (the ones in the folder being listed), or `null` after saying why they couldn't be loaded. */
+    async function swipedConversationMessages(conversation) {
+        try {
+            return await loadOpenConversation(conversation);
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't load the messages in that conversation");
+            return null;
+        }
+    }
+    /** Archives what a swipe took away. Resolves whether it went through, so the row comes back when it didn't. */
+    async function swipeArchive(target) {
+        if (bulkBusy || resolvingSelection > 0) {
+            return false;
+        }
+        const chosen = Array.isArray(target) ? target : await swipedConversationMessages(target);
+        if (!chosen || chosen.length === 0) {
+            return false;
+        }
+        return runBulkAction(bulkArchive, true, chosen);
+    }
+    async function swipeMove(folderUidToMoveTo) {
+        // Only ever asked by the folder prompt, which is only open while `moveDialog` is set.
+        const target = moveDialog;
+        const chosen = "messages" in target ? target.messages : await swipedConversationMessages(target.conversation);
+        if (!chosen || chosen.length === 0) {
+            setMoveDialog(null);
+            return;
+        }
+        await runBulkAction((moving) => moveMessages(moving, folderUidToMoveTo), true, chosen);
+        setMoveDialog(null);
+    }
     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() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: ["text-sm truncate", subjectClass(isUnread(message))].join(" "), children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] ||
+                                                        decryptedRows[message.uid]?.preview ||
+                                                        message.bodyPreview ||
+                                                        (message.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));
+    }
+    /** 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 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: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: ["w-full text-sm px-3 rounded-md border border-border bg-surface disabled:opacity-55", isMobile ? "py-2" : "py-1.5"].join(" ") }));
     function handleSelect(message) {
         if (selectMode) {
             toggleSelected(message.uid);
             return;
         }
+        if (preferences.showAsConversations) {
+            // A search result of a list arranged by conversation: the reading pane is the whole thread, opened at this message.
+            openThreadOf(message);
+            return;
+        }
         if (isMobile) {
             navigate(`/messages/${encodeURIComponent(message.uid)}`);
             return;
@@ -1514,6 +1597,22 @@ function InboxContent({ userUid }) {
         removedAnchorRef.current = null;
         setSelectedUid(message.uid);
     }
+    /** A message of a conversation, as the thread pane names it: the conversation's id (a message with no thread is its own) and the
+     * subject to head it with while the thread loads. */
+    function threadHeadOf(message) {
+        return { conversationId: message.conversationId ?? message.uid, subject: message.subject ?? "", messageCount: 1 };
+    }
+    /** Opens the whole thread a message belongs to, positioned at it - the phone's message page, or the reading pane. */
+    function openThreadOf(message) {
+        const conversation = threadHeadOf(message);
+        if (isMobile) {
+            navigate(`/messages/${encodeURIComponent(message.uid)}?conversation=${encodeURIComponent(conversation.conversationId)}`);
+            return;
+        }
+        removedAnchorRef.current = null;
+        setSelectedUid(message.uid);
+        setOpenThread({ conversation, uid: message.uid });
+    }
     /** 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) {
@@ -1524,9 +1623,8 @@ function InboxContent({ userUid }) {
             return;
         }
         if (isMobile) {
-            // No dedicated mobile thread route yet - the existing single-message detail route already
-            // handles any message uid regardless of conversation grouping.
-            navigate(`/messages/${encodeURIComponent(uid)}`);
+            // The message page shows the whole conversation, positioned at this message, when it is given the conversation.
+            navigate(`/messages/${encodeURIComponent(uid)}?conversation=${encodeURIComponent(conversation.conversationId)}`);
             return;
         }
         removedAnchorRef.current = null;
@@ -1537,11 +1635,11 @@ function InboxContent({ userUid }) {
     // ---- the selection bar call: the same bulk-action path (`runBulkAction()` - so the same optimistic badge tracking, the same rollback,
     // ---- the same lazily created Deleted Items folder), never a second implementation. Reply, Reply all, Forward, Archive and Move to are
     // ---- registered by the reading pane itself (`MessageDetailPane`'s `shortcuts`), which owns those handlers.
-    const inConversations = preferences.showAsConversations;
+    const inConversations = asConversations;
     /** The selection bar isn't offered in the aggregate view (its rows belong to several mailboxes), and neither are these. */
     const keyboardActions = !aggregateFolderType;
     /** What the keyboard acts on exists: the ticked rows in select mode, else the message (or conversation) open in the reading pane. */
-    const keyboardTargetExists = selectMode ? selectedMessages.length > 0 : inConversations ? openThread !== null : selected !== null;
+    const keyboardTargetExists = selectMode ? selectedMessages.length > 0 : threadPane ? openThread !== null : selected !== null;
     const rowCount = inConversations ? listedConversations.length : messages.length;
     const canMoveSelection = !selectMode && !isMobile && !loading && rowCount > 0;
     function folderTypeOf(folderUidOfMessage) {
@@ -1611,7 +1709,7 @@ function InboxContent({ userUid }) {
         }
         let chosen;
         try {
-            chosen = selectMode ? selectedMessages : inConversations ? await loadOpenConversation(openThread.conversation) : [selected];
+            chosen = selectMode ? selectedMessages : threadPane ? await loadOpenConversation(openThread.conversation) : [selected];
         }
         catch (err) {
             notifyApiError(err, "Couldn't load the messages in that conversation");
@@ -1622,7 +1720,7 @@ function InboxContent({ userUid }) {
             return;
         }
         const succeeded = await runBulkAction(action, removesRows, chosen);
-        if (succeeded && removesRows && inConversations && !selectMode) {
+        if (succeeded && removesRows && threadPane && !selectMode) {
             setOpenThread(null);
             setSelectedUid(null);
         }
@@ -1661,7 +1759,7 @@ function InboxContent({ userUid }) {
     useShortcut(SHORTCUTS.mail.search, () => {
         searchInputRef.current?.focus();
         searchInputRef.current?.select();
-    }, { enabled: !inConversations && !aggregateFolderType });
+    }, { enabled: !aggregateFolderType });
     if (!folderUid && !aggregateFolderType) {
         // `MailShell` never renders this component at all until a mailbox is resolved (see its own
         // full-screen `MailboxProvisioning` takeover otherwise) — this is purely the brief gap before
@@ -1673,28 +1771,28 @@ function InboxContent({ userUid }) {
     return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, 
                 // Remembered as it moves (not when the list is left: by then React has already detached the element), so
                 // the folder - or Mail, after another app - comes back where it was.
-                onScroll: (event) => saveListScroll(listKey, event.currentTarget.scrollTop), className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [selectMode ? (_jsx(MailSelectionBar, { selected: selectedMessages, listed: messages, totals: preferences.showAsConversations
+                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: () => preferences.showAsConversations
+                            : undefined, onSelectAll: () => asConversations
                             ? selectAllConversations()
-                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => preferences.showAsConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: currentFolders, currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated, onApplyLabels: applyLabelsToSelection, onSetRead: (read) => void runBulkAction(
+                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => asConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: currentFolders, currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated, onApplyLabels: applyLabelsToSelection, onSetRead: (read) => void runBulkAction(
                         // Optimistic: the rows and the folder badges change now, and change back if the server refuses.
                         (chosen) => setReadStateMany(chosen, read, { patch: patchListedMessage, track: trackMessageChange }), false), onSetFlagged: (flagged) => void runBulkAction((chosen) => setMessagesFlagged(chosen, flagged), false), shortcuts: keyboardActions, onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: async (targetFolderUid) => {
                             await runBulkAction((chosen) => moveMessages(chosen, targetFolderUid), true);
                         }, onReportJunk: () => void moveSelectionToType("junk", "Junk Email"), onDelete: () => void moveSelectionToType("deleted_items", "Deleted Items"), busy: bulkBusy || resolvingSelection > 0 })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
                         // A conversation row is a thread summary, so only some of the keys have anything to
                         // order by - the rest stay pickable and are applied to the rows already fetched.
-                        unavailableSortKeys: preferences.showAsConversations ? CONVERSATION_SORT_UNAVAILABLE : undefined, sortKeysNote: isSearching
+                        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."
-                                : preferences.showAsConversations
+                                : asConversations
                                     ? CONVERSATION_SORT_NOTE
                                     : undefined, selectDisabled: !!aggregateFolderType || loading || listedRowCount === 0, selectDisabledReason: aggregateFolderType
                             ? "Open a mailbox's own folder to select messages"
                             : loading
                                 ? "Wait for this folder to finish loading"
-                                : "There is nothing here to select" })), !preferences.showAsConversations && (_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55" }) })), offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
+                                : "There is nothing here to select" })), !isMobile && _jsx("div", { className: "p-2 border-b border-border", children: searchField }), isMobile && mobileSearchSlot && createPortal(searchField, mobileSearchSlot), 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"
@@ -1703,14 +1801,17 @@ function InboxContent({ userUid }) {
                                     ? `${messages.length} result${messages.length === 1 ? "" : "s"}`
                                     : `${messages.length} of ??` }), tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, className: "text-primary-dark hover:underline font-medium shrink-0", children: "Search all mail" }))] })), isSearching && coverage?.indexedFrom && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Local search covers messages back to ", new Date(coverage.indexedFrom).toLocaleDateString(), coverage.building ? " (still building)" : "", searchAllMail
                                 ? " - searching everything, not just recent mail."
-                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "p-4", children: [_jsx("span", { className: "sr-only", children: "Loading\u2026" }), _jsx(SkeletonList, { count: 8 })] })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && !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 ", MAX_LOADED_ROWS, " 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
+                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !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 ", MAX_LOADED_ROWS, " 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", { children: messages.map((message) => (_jsxs("li", { "data-message-uid": message.uid, "data-unread": isUnread(message) ? "true" : undefined, className: rowClass({ unread: isUnread(message), selected: message.uid === selectedUid || selectedUids.has(message.uid) }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: isUnread(message) }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), onChange: () => toggleSelected(message.uid), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => handleSelect(message), className: ["flex-1 min-w-0 text-left px-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: isUnread(message) }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(isUnread(message)) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(isUnread(message))].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: ["text-sm truncate", subjectClass(isUnread(message))].join(" "), children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] ||
-                                                                        decryptedRows[message.uid]?.preview ||
-                                                                        message.bodyPreview ||
-                                                                        (message.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 })] }))] })] }, message.uid))) }), 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 ", MAX_LOADED_ROWS, " messages \u2014 refine your search or filters to see more."] })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(LazyMessageDetailPane, { shortcuts: !selectMode, message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
+                                        : "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.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 ", MAX_LOADED_ROWS, " messages \u2014 refine your search or filters to see more."] })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: threadPane ? (_jsx(LazyConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, shortcuts: !selectMode, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(LazyMessageDetailPane, { shortcuts: !selectMode, message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
                         // Same reasoning as onArchived below - a move takes the message out of the folder
                         // being listed, so it leaves the list rather than being patched in place.
                         removeListedMessage(updated.uid);
@@ -1724,6 +1825,6 @@ function InboxContent({ userUid }) {
                         // whichever folder is currently being viewed (into Archive), so it's removed
                         // from the list rather than patched in place.
                         removeListedMessage(updated.uid);
-                    }, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) })] }));
+                    }, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) }), _jsx(MoveToFolderDialog, { open: moveDialog !== null, onClose: () => setMoveDialog(null), mailboxUid: activeMailboxUid, folders: currentFolders, currentFolderUid: folderUid, count: moveDialog === null ? 1 : "messages" in moveDialog ? moveDialog.messages.length : moveDialog.conversation.messageCount, onMove: swipeMove, onFolderCreated: onFolderCreated })] }));
 }
 export default routedPage("/", InboxPage);

package/dist/apps/www/messages/[uid].js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -11,12 +11,15 @@ import { listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import { useMarkMessageRead } from "../../shared/mail/useMarkMessageRead.js";
 import MailShell, { useMailShell } from "../../shared/components/mail/layout/MailShell.js";
-import { LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
+import { LazyConversationThreadPane, LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
+import { useLocationSearch } from "../../shared/navigation/AppRouter.js";
 import { ReadingPaneSkeleton } from "../../shared/components/mail/reading/MessageCard.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/index.tsx` keeps its existing
- * inline reading pane and never navigates here; see that file's `handleSelect`.
+ * inline reading pane and never navigates here; see that file's `handleSelect`. A row of the conversation list
+ * comes with `?conversation=<id>` (`handleOpenConversation`), and then this page is the whole thread, opened at this
+ * message, as the desktop's reading pane is; without it (a flat list, a link to a message) it is that one message.
  */
 function MessageDetailPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(MessageDetailContent, { uid: props.params.uid }) }));
@@ -27,6 +30,7 @@ function MessageDetailContent({ uid }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [labels, setLabels] = useState([]);
+    const conversationId = new URLSearchParams(useLocationSearch()).get("conversation");
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -55,8 +59,9 @@ function MessageDetailContent({ uid }) {
             cancelled = true;
         };
     }, [messageMailboxUid]);
-    const attachments = useMessageAttachments(message);
-    useMarkMessageRead(message, setMessage);
+    // A thread loads, marks read and fetches the attachments of each message it opens itself.
+    const attachments = useMessageAttachments(conversationId ? null : message);
+    useMarkMessageRead(conversationId ? null : message, setMessage);
     if (loading) {
         // The pane's own frame - a header card and a message card - rather than a line of text: what is coming is known, only not yet its contents.
         return _jsx(ReadingPaneSkeleton, {});
@@ -72,6 +77,9 @@ function MessageDetailContent({ uid }) {
     const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
     const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
     const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
+    if (conversationId) {
+        return (_jsxs("div", { className: "flex flex-col h-full min-h-0", children: [_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" }), _jsx(LazyConversationThreadPane, { conversation: { conversationId, subject: message.subject, messageCount: 1 }, selectedUid: message.uid, mailboxUid: message.mailboxUid, folders: folders, labels: labels, shortcuts: true, onMessagePatched: () => undefined, onMessageRemoved: () => undefined, onLabelCreated: (label) => setLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })] }));
+    }
     return (_jsx(LazyMessageDetailPane, { shortcuts: true, message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: setMessage, onFolderCreated: onFolderCreated, onScheduledSendCanceled: setMessage, onArchived: setMessage, labels: labels, onLabelsChanged: setMessage, onLabelCreated: (label) => setLabels((prev) => [...prev, label]) }));
 }
 export default routedPage("/messages/:uid", MessageDetailPage);

package/dist/apps/www/settings/profile/index.d.ts

@@ -0,0 +1,4 @@
+import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
+export type SettingsProfilePageProps = Omit<SettingsShellProps, "active">;
+declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsProfilePageProps>;
+export default _default;