@rapidmx/web-client 0.6.0 → 0.8.0

package/dist/apps/www/index.js

@@ -4,11 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useCallback, useEffect, useRef, useState } from "react";
-import { HiOutlineLockClosed } from "react-icons/hi2";
+import { HiOutlineFlag, HiOutlineLockClosed, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getMessage, getMessageRawContent, listMessages } from "@rapidmx/react-shared/mail/mailApi.js";
+import { archiveMessage, bulkUpdateMessages, createFolder, getMessage, getMessageRawContent, listMessages, moveMessages, setMessagesFlagged, setMessagesRead, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
-import { listConversations } from "@rapidmx/react-shared/mail/conversationsApi.js";
+import { listConversationMessages, listConversations, } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
 import { parseSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
 import { normalizeServerScores } from "@rapidmx/react-shared/search/searchScoring.js";
@@ -22,6 +22,9 @@ import MailShell, { useMailShell, } from "../shared/components/mail/layout/MailS
 import MessageDetailPane from "../shared/components/mail/MessageDetailPane.js";
 import ConversationList from "../shared/components/mail/ConversationList.js";
 import ConversationThreadPane from "../shared/components/mail/ConversationThreadPane.js";
+import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
+import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
+import { CONVERSATION_SORT_NOTE, CONVERSATION_SORT_UNAVAILABLE, MAIL_LIST_CLASSIFICATION_FILTERS, getMailListPreferences, setMailListPreferences, sortConversations, } from "../shared/components/mail/listPreferences.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import { useUnlockPrompt } from "../shared/components/layout/UnlockPromptProvider.js";
@@ -263,10 +266,12 @@ const LOAD_MORE_ROOT_MARGIN_PX = 200;
 /** How many full pages in a row that added no new rows the list keeps loading on its own before it shows a
  * "Load more" button instead. */
 const MAX_EMPTY_PAGE_CONTINUATIONS = 3;
-/** `true` when `more` has at least one uid `shown` doesn't - i.e. appending it actually adds rows. */
-function hasUnseenMessages(shown, more) {
-    const seen = new Set(shown.map((m) => m.uid));
-    return more.some((m) => !seen.has(m.uid));
+/** `true` when `more` has at least one row `shown` doesn't - i.e. appending it actually adds rows. Generic
+ * over the row's own identity so both the message list (`uid`) and the conversation list
+ * (`conversationId`) page the same way. */
+function hasUnseenRows(shown, more, idOf) {
+    const seen = new Set(shown.map(idOf));
+    return more.some((row) => !seen.has(idOf(row)));
 }
 /** The load-more sentinel's actual current geometry against its scroll container, with the same margin the
  * IntersectionObserver uses. */
@@ -275,20 +280,23 @@ function isWithinLoadMoreRange(sentinel, root) {
     const rootRect = root.getBoundingClientRect();
     return rect.top <= rootRect.bottom + LOAD_MORE_ROOT_MARGIN_PX && rect.bottom >= rootRect.top - LOAD_MORE_ROOT_MARGIN_PX;
 }
-/** Appends `more` to `shown`, skipping any uid already shown - a later page can repeat rows (Tier 1 and
+/** Appends `more` to `shown`, skipping any row already shown - a later page can repeat rows (Tier 1 and
  * Tier 2/3 cursors advance independently, so the same message can come back from a different tier on a
- * later page; a plain folder listing's pages shift when new mail arrives between fetches). */
-function appendUnseenMessages(shown, more) {
-    const seen = new Set(shown.map((m) => m.uid));
+ * later page; a plain folder listing's pages shift when new mail arrives between fetches). Generic for the
+ * same reason `hasUnseenRows()` is. */
+function appendUnseenRows(shown, more, idOf) {
+    const seen = new Set(shown.map(idOf));
     const unseen = [];
-    for (const message of more) {
-        if (!seen.has(message.uid)) {
-            seen.add(message.uid);
-            unseen.push(message);
+    for (const row of more) {
+        if (!seen.has(idOf(row))) {
+            seen.add(idOf(row));
+            unseen.push(row);
         }
     }
     return unseen.length === 0 ? shown : [...shown, ...unseen];
 }
+const messageUid = (message) => message.uid;
+const conversationKey = (conversation) => conversation.conversationId;
 /** Flattens and sorts a per-mailbox fetch into one merged, newest-first list - the aggregate ("All
  * Inboxes" etc.) equivalent of `mergeSearchResults()` above, but simpler: an aggregated message has no
  * natural relevance score to normalize, so this only ever sorts by `receivedDate`. */
@@ -309,13 +317,17 @@ function mergeInboxMessages(perMailbox) {
  * composite-cursor "load more" per mailbox is a natural v2 if usage shows people scrolling past the first
  * page in aggregate view often.
  */
-async function fetchAggregateMessages(mailboxFolders, type) {
+async function fetchAggregateMessages(mailboxFolders, type, filter) {
     const perMailbox = await Promise.all(mailboxFolders.map(async ({ mailbox, folders }) => {
         const folder = folders.find((f) => f.type === type);
         if (!folder) {
             return { mailbox, messages: [] };
         }
-        const messages = await listMessages(folder.uid, { limit: MESSAGE_PAGE_SIZE }).catch(() => []);
+        // The filter is a server-side one per mailbox; the *sort* deliberately isn't offered here (see
+        // this function's own pagination scope trim) - each mailbox contributes its own newest page and
+        // they're merged newest-first, which a different sort key couldn't be made honest across an
+        // arbitrary number of independently-paged folders.
+        const messages = await listMessages(folder.uid, { limit: MESSAGE_PAGE_SIZE, filter }).catch(() => []);
         return { mailbox, messages };
     }));
     return mergeInboxMessages(perMailbox);
@@ -324,10 +336,9 @@ export default function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
 function InboxContent({ userUid }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated } = useMailShell();
     const isMobile = useIsMobile();
     const { requestUnlock } = useUnlockPrompt();
-    const [viewMode, setViewMode] = useState("date");
     const [messages, setMessages] = useState([]);
     const [conversations, setConversations] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -335,12 +346,41 @@ function InboxContent({ userUid }) {
     const [hasMore, setHasMore] = useState(false);
     const [error, setError] = useState(null);
     const [selectedUid, setSelectedUid] = useState(null);
-    const [selectedConversationId, setSelectedConversationId] = useState(null);
-    const [classificationFilter, setClassificationFilter] = useState("all");
+    // The thread the conversation list opened, and which of its messages was picked - the reading pane
+    // shows the whole conversation, positioned at that message (see `ConversationThreadPane`).
+    const [openThread, setOpenThread] = useState(null);
+    // Messages the page has a newer copy of than `ConversationList` fetched (so far only the one the reading
+    // pane just marked read), applied over its own child rows so they don't stay bold after being read.
+    const [conversationPatches, setConversationPatches] = useState({});
+    // Folders this session created on demand for a bulk Delete/Report junk - see `resolveFolderOfType()`.
+    const lazyFoldersRef = useRef(new Map());
+    const [selectMode, setSelectMode] = useState(false);
+    const [selectedUids, setSelectedUids] = useState(new Set());
+    // Select mode over the *conversation* list ticks whole conversations rather than messages: the rows
+    // there are conversations, and a bulk action on one means "every message of it that is in this folder".
+    // Their messages are fetched (once, cached here) as each conversation is ticked, so the selection bar
+    // and every bulk action below keep working on the `Message[]` they already take.
+    const [selectedConversationIds, setSelectedConversationIds] = useState(new Set());
+    const [conversationMessagesById, setConversationMessagesById] = useState({});
+    // A ticked conversation whose messages are still being fetched - every bulk action is held meanwhile,
+    // or it would act on a selection that is still arriving.
+    const [resolvingSelection, setResolvingSelection] = useState(0);
+    const [bulkBusy, setBulkBusy] = useState(false);
+    const [bulkError, setBulkError] = useState(null);
+    // Bumped to force the list effect below to re-run - a bulk update is deliberately neither atomic nor
+    // all-or-nothing (see `bulkUpdateMessages()`), so a rejection means refetching rather than guessing
+    // which half of the selection actually landed.
+    const [refreshKey, setRefreshKey] = useState(0);
     const [searchInput, setSearchInput] = useState("");
     const [searchQuery, setSearchQuery] = useState("");
     const [snippets, setSnippets] = useState({});
-    const [labels, setLabels] = useState([]);
+    // The *open mailbox's* labels, for the Filter menu's Labels submenu, select mode's Apply label, and -
+    // unless the selected message belongs to another mailbox - the reading pane's own Labels menu.
+    const [mailboxLabels, setMailboxLabels] = useState([]);
+    // The selected message's own mailbox's labels, when that is a different mailbox from the open one: in
+    // search and aggregate views it can be, and its labels must not be offered as a filter for this one.
+    // Empty (and never fetched) otherwise - see `labels` below.
+    const [otherMailboxLabels, setOtherMailboxLabels] = useState([]);
     // Tier 2's own reported window coverage for the current search - undefined outside a search, or
     // before Tier 2 has resolved yet for this search pass.
     const [coverage, setCoverage] = useState(undefined);
@@ -372,10 +412,67 @@ function InboxContent({ userUid }) {
     const [searchAllMailKey, setSearchAllMailKey] = useState(null);
     const searchAllMailScope = `${mailboxUid ?? ""}\n${folderUid ?? ""}\n${searchQuery}`;
     const searchAllMail = searchAllMailKey === searchAllMailScope;
+    // The mailbox unlock/decrypt call sites below treat as "the" mailbox when there's no single selected
+    // one (aggregate mode) - mirrors `MailShell`'s own identical `defaultMailboxUid` fallback. An
+    // aggregate-view row from a *different*, not-yet-unlocked mailbox stays locked until that mailbox's
+    // own folder view is opened directly - an accepted limitation, not a bug (see `MailShell`'s own doc
+    // comment on the same tradeoff for its `LocalIndexLifecycle`/`KeyEnrollmentGate` wiring).
+    const activeMailboxUid = mailboxUid ?? mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
+    const mailboxKeys = mailboxes.find((mb) => mb.uid === activeMailboxUid)?.keys ?? [];
+    // The Sort/Filter menus' and "Show as conversations"' current settings, remembered per mailbox across
+    // reloads (`listPreferences.ts`). Read during render, not in an effect, so the very first listing
+    // already uses the remembered arrangement rather than fetching the default one and immediately
+    // refetching it - and kept per mailbox rather than as one value plus a "which mailbox is this?" check,
+    // so switching mailbox simply reads the other entry. What this session has changed wins over the store,
+    // which a storage-blocked browser refuses to keep.
+    const [preferencesByMailbox, setPreferencesByMailbox] = useState({});
+    const preferences = preferencesByMailbox[activeMailboxUid] ?? getMailListPreferences(activeMailboxUid);
+    function updatePreferences(patch) {
+        const next = { ...preferences, ...patch };
+        setPreferencesByMailbox((prev) => ({ ...prev, [activeMailboxUid]: next }));
+        setMailListPreferences(activeMailboxUid, next);
+    }
     // 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 = viewMode === "date" && searchQuery.length > 0 && !aggregateFolderType;
+    const isSearching = !preferences.showAsConversations && searchQuery.length > 0 && !aggregateFolderType;
+    // 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
+    // there. Not offered for an aggregate view either (each mailbox classifies independently; merging
+    // that is out of scope).
+    const currentFolders = mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [];
+    const currentFolderIsInbox = currentFolders.find((f) => f.uid === folderUid)?.type === "inbox";
+    const offerClassificationFilters = currentFolderIsInbox && !isSearching && !aggregateFolderType;
+    // A remembered Focused/Other filter must not silently narrow a folder that has no Focused Inbox to
+    // speak of - it stays remembered for when the Inbox is opened again, but doesn't apply meanwhile.
+    const effectiveFilter = (preferences.filter === "focused" || preferences.filter === "other") && !offerClassificationFilters
+        ? "all"
+        : preferences.filter;
+    // Left out entirely rather than sent empty, so a list with no label filter asks for exactly the URL it
+    // always did.
+    const labelFilter = preferences.labelUids.length > 0 ? { labelUids: preferences.labelUids } : {};
+    // Every server-side list parameter the toolbar controls, in one place so the first page and each
+    // `loadMore()` page can't drift apart.
+    const listParams = {
+        limit: MESSAGE_PAGE_SIZE,
+        sortBy: preferences.sortBy,
+        sortOrder: preferences.sortOrder,
+        filter: effectiveFilter,
+        ...labelFilter,
+    };
+    // A dependency of the list effect and of `loadMore()`, which can't take the array itself (a new one
+    // every render would refetch on every render).
+    const labelFilterKey = preferences.labelUids.join(",");
+    /** The sort the *server* is being asked for, as one dependency value. Empty while conversations are
+     * 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}`;
+    /** 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 };
+    }
     // How far into the folder's *current* server-side listing the rows fetched so far reach. Offset
     // paging, not a cursor (`listMessages()` has none): a row removed locally (archived, scheduled send
     // cancelled) also left the folder server-side, shifting every later message back by one - so each
@@ -401,13 +498,8 @@ function InboxContent({ userUid }) {
     const [loadMoreStalled, setLoadMoreStalled] = useState(false);
     const messagesRef = useRef(messages);
     messagesRef.current = messages;
-    // The mailbox unlock/decrypt call sites below treat as "the" mailbox when there's no single selected
-    // one (aggregate mode) - mirrors `MailShell`'s own identical `defaultMailboxUid` fallback. An
-    // aggregate-view row from a *different*, not-yet-unlocked mailbox stays locked until that mailbox's
-    // own folder view is opened directly - an accepted limitation, not a bug (see `MailShell`'s own doc
-    // comment on the same tradeoff for its `LocalIndexLifecycle`/`KeyEnrollmentGate` wiring).
-    const activeMailboxUid = mailboxUid ?? mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
-    const mailboxKeys = mailboxes.find((mb) => mb.uid === activeMailboxUid)?.keys ?? [];
+    const conversationsRef = useRef(conversations);
+    conversationsRef.current = conversations;
     // Reset to a fresh Map at the start of every new search pass (see the search effect below) - see
     // resolveHitsToMessages()'s own doc comment on why this needs to persist *within* one pass but not
     // across passes (a stale `null` for a uid that's since become resolvable elsewhere must not stick).
@@ -512,35 +604,61 @@ 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 = viewMode === "date" ? (selectedMessageMailboxUid ?? activeMailboxUid) : activeMailboxUid;
+    const labelsMailboxUid = preferences.showAsConversations ? 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
+    // its own fetch, and only then is this state used at all.
+    const otherMailbox = labelsMailboxUid !== activeMailboxUid;
+    const labels = otherMailbox ? otherMailboxLabels : mailboxLabels;
     // `labelsMailboxUid` is always set: `MailShell` only renders this component once at least one mailbox
     // exists, so `activeMailboxUid` (its fallback) always resolves.
     useEffect(() => {
+        if (!otherMailbox) {
+            setOtherMailboxLabels([]);
+            return;
+        }
         let cancelled = false;
-        setLabels([]);
+        setOtherMailboxLabels([]);
         listLabels(labelsMailboxUid, { limit: 200 })
             .then((result) => {
             if (!cancelled) {
-                setLabels(result);
+                setOtherMailboxLabels(result);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [labelsMailboxUid, otherMailbox]);
+    useEffect(() => {
+        let cancelled = false;
+        setMailboxLabels([]);
+        listLabels(activeMailboxUid, { limit: 200 })
+            .then((result) => {
+            if (!cancelled) {
+                setMailboxLabels(result);
             }
         })
             .catch(() => undefined);
         return () => {
             cancelled = true;
         };
-    }, [labelsMailboxUid]);
+    }, [activeMailboxUid]);
     // Debounce the raw input into the query actually searched, so every keystroke doesn't fire a request.
     useEffect(() => {
         const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
         return () => clearTimeout(handle);
     }, [searchInput]);
-    // Conversations are computed mailbox-wide (see `conversationsApi.ts`), not scoped to the selected
-    // folder — switching into "By conversation" mode replaces the per-folder list entirely, and the
-    // folder-tree sidebar's own selection becomes purely informational until switching back to "By date".
+    // Loads whichever list the current folder, arrangement and search state call for, and resets every
+    // piece of per-listing state (selection, paging, select mode) that a previous listing left behind.
     useEffect(() => {
         setSelectedUid(null);
-        setSelectedConversationId(null);
-        setClassificationFilter("all");
+        setOpenThread(null);
+        setConversationPatches({});
+        setSelectedUids(new Set());
+        setSelectedConversationIds(new Set());
+        setConversationMessagesById({});
         listedOffsetRef.current = 0;
         compositeCursorRef.current = undefined;
         setHasMore(false);
@@ -558,16 +676,38 @@ function InboxContent({ userUid }) {
         const invalidate = () => {
             searchRunIdRef.current += 1;
         };
-        if (viewMode === "conversation") {
+        if (!folderUid && !aggregateFolderType) {
+            // The shell hasn't resolved this mailbox's folders yet (the render below says so). Listing
+            // anything now means a request whose answer is thrown away the moment the Inbox arrives - and
+            // for conversations a mailbox-wide grouping pass, the most expensive listing there is.
+            setMessages([]);
+            setConversations([]);
+            setLoading(false);
+            return;
+        }
+        if (aggregateFolderType && mailboxFolders.length === 0) {
+            // The same, for a merged view: it has no folder of its own, but it is built from every
+            // mailbox's folders, and this effect re-runs the moment they arrive. Listing twice is what
+            // that cost before.
+            setMessages([]);
+            setConversations([]);
+            setLoading(true);
+            return;
+        }
+        if (preferences.showAsConversations) {
             // 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).
+            // They're scoped to the selected folder (`folderUid`, absent only in aggregate mode), so the
+            // conversation list matches the folder the sidebar has selected rather than the whole mailbox.
             setLoading(true);
             setError(null);
-            listConversations(activeMailboxUid)
+            listConversations(activeMailboxUid, conversationParams(0))
                 .then((result) => {
                 if (isCurrentRun()) {
                     setConversations(result);
+                    listedOffsetRef.current = result.length;
+                    setHasMore(result.length === MESSAGE_PAGE_SIZE);
                 }
             })
                 .catch((err) => {
@@ -586,7 +726,7 @@ function InboxContent({ userUid }) {
             setLoading(true);
             setError(null);
             // hasMore stays false (set above) - see fetchAggregateMessages()'s own pagination scope trim.
-            void fetchAggregateMessages(mailboxFolders, aggregateFolderType)
+            void fetchAggregateMessages(mailboxFolders, aggregateFolderType, effectiveFilter)
                 .then((results) => {
                 if (isCurrentRun()) {
                     setMessages(results);
@@ -599,11 +739,6 @@ function InboxContent({ userUid }) {
             });
             return invalidate;
         }
-        if (!folderUid) {
-            setMessages([]);
-            setLoading(false);
-            return;
-        }
         setLoading(true);
         setError(null);
         if (isSearching) {
@@ -690,7 +825,9 @@ function InboxContent({ userUid }) {
             })();
             return invalidate;
         }
-        listMessages(folderUid, { limit: MESSAGE_PAGE_SIZE })
+        // Set: the guard at the top of this effect returned for a view with neither a folder nor an
+        // aggregate type, and the aggregate branch above returned for the one with an aggregate type.
+        listMessages(folderUid, listParams)
             .then((results) => {
             if (isCurrentRun()) {
                 setMessages(results);
@@ -715,7 +852,24 @@ function InboxContent({ userUid }) {
         // user unlocks, and what makes "Search all mail" actually remove Tier 3's coverage bound. Neither
         // has any effect on the non-search branch below; re-running it with identical inputs just
         // re-fetches the same page.
-    }, [viewMode, folderUid, mailboxUid, isSearching, searchQuery, unlockRefresh, searchAllMail, aggregateFolderType, mailboxFolders, activeMailboxUid]);
+        // `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,
+        serverSortKey,
+        effectiveFilter,
+        labelFilterKey,
+        refreshKey,
+        folderUid,
+        mailboxUid,
+        isSearching,
+        searchQuery,
+        unlockRefresh,
+        searchAllMail,
+        aggregateFolderType,
+        mailboxFolders,
+        activeMailboxUid,
+    ]);
     function handleSearchAllMail() {
         setSearchAllMailKey(searchAllMailScope);
     }
@@ -729,8 +883,7 @@ function InboxContent({ userUid }) {
         if (loadMoreInFlightRef.current ||
             !hasMore ||
             loading ||
-            viewMode !== "date" ||
-            !folderUid ||
+            (!preferences.showAsConversations && !folderUid) ||
             (isSearching && !searchCursor)) {
             return;
         }
@@ -762,7 +915,19 @@ function InboxContent({ userUid }) {
         const myRunId = searchRunIdRef.current;
         const isCurrentRun = () => searchRunIdRef.current === myRunId;
         try {
-            if (isSearching) {
+            if (preferences.showAsConversations) {
+                const page = Math.floor(listedOffsetRef.current / MESSAGE_PAGE_SIZE);
+                const more = await listConversations(activeMailboxUid, conversationParams(page));
+                if (!isCurrentRun()) {
+                    return;
+                }
+                const addedRows = hasUnseenRows(conversationsRef.current, more, conversationKey);
+                setConversations((prev) => appendUnseenRows(prev, more, conversationKey));
+                setHasMore(more.length === MESSAGE_PAGE_SIZE);
+                listedOffsetRef.current = page * MESSAGE_PAGE_SIZE + more.length;
+                notePageLanded(addedRows, more.length === MESSAGE_PAGE_SIZE);
+            }
+            else if (isSearching) {
                 const unlocked = getUnlockedKeys(mailboxUid);
                 const cursor = searchCursor;
                 const [tier1Page, tier2Page] = await Promise.all([
@@ -784,8 +949,8 @@ function InboxContent({ userUid }) {
                 if (!isCurrentRun()) {
                     return;
                 }
-                const addedRows = hasUnseenMessages(messagesRef.current, more);
-                setMessages((prev) => appendUnseenMessages(prev, more));
+                const addedRows = hasUnseenRows(messagesRef.current, more, messageUid);
+                setMessages((prev) => appendUnseenRows(prev, more, messageUid));
                 setSnippets((prev) => ({ ...prev, ...moreSnippets }));
                 const nextTier3Offset = tier3Offset + tier3Page.length;
                 compositeCursorRef.current = {
@@ -801,15 +966,15 @@ function InboxContent({ userUid }) {
             }
             else {
                 // The page containing the first message not fetched yet. After a local removal that offset is
-                // no longer a page boundary, so this page overlaps rows already shown - `appendUnseenMessages()`
+                // no longer a page boundary, so this page overlaps rows already shown - `appendUnseenRows()`
                 // drops those - rather than skipping the message that shifted back across the boundary.
                 const page = Math.floor(listedOffsetRef.current / MESSAGE_PAGE_SIZE);
-                const more = await listMessages(folderUid, { page, limit: MESSAGE_PAGE_SIZE });
+                const more = await listMessages(folderUid, { ...listParams, page });
                 if (!isCurrentRun()) {
                     return;
                 }
-                const addedRows = hasUnseenMessages(messagesRef.current, more);
-                setMessages((prev) => appendUnseenMessages(prev, more));
+                const addedRows = hasUnseenRows(messagesRef.current, more, messageUid);
+                setMessages((prev) => appendUnseenRows(prev, more, messageUid));
                 setHasMore(more.length === MESSAGE_PAGE_SIZE);
                 listedOffsetRef.current = page * MESSAGE_PAGE_SIZE + more.length;
                 notePageLanded(addedRows, more.length === MESSAGE_PAGE_SIZE);
@@ -826,7 +991,19 @@ function InboxContent({ userUid }) {
             loadMoreInFlightRef.current = false;
             setLoadingMore(false);
         }
-    }, [hasMore, loading, viewMode, folderUid, isSearching, searchQuery, mailboxUid]);
+    }, [
+        hasMore,
+        loading,
+        preferences.showAsConversations,
+        serverSortKey,
+        effectiveFilter,
+        labelFilterKey,
+        folderUid,
+        isSearching,
+        searchQuery,
+        mailboxUid,
+        activeMailboxUid,
+    ]);
     // Always calls the latest `loadMore` closure so the effect below doesn't need `loadMore` itself in its
     // dependency array (it changes on every keystroke/page load, which would otherwise mean nothing here).
     const loadMoreRef = useRef(loadMore);
@@ -860,57 +1037,261 @@ function InboxContent({ userUid }) {
             void loadMoreRef.current();
         }
     }, [appendedPageCount]);
+    /**
+     * Replaces one listed row - and, in the conversation list, the opened message and the child row
+     * standing for it - with a newer copy the reading pane just produced.
+     *
+     * A conversation's *parent* row has no copy to replace: it is a summary of the whole thread, and its
+     * "2 unread" chip and bold styling come from a count the server worked out when the list was fetched.
+     * So when the reading pane reports a message it has just read (`previous` unread, `updated` read), that
+     * count is decremented here - otherwise a conversation kept claiming unread mail the reader had just
+     * read, until the whole list was reloaded.
+     */
+    function patchListedMessage(updated, previous) {
+        setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m)));
+        // `ConversationList` fetched its own copy of this message when the thread was expanded; hand it the
+        // newer one so the child row doesn't keep showing a stale read/flag state.
+        setConversationPatches((prev) => ({ ...prev, [updated.uid]: updated }));
+        if (previous && !previous.flags.read && updated.flags.read) {
+            setConversations((prev) => prev.map((conversation) => conversation.messageUids.includes(updated.uid)
+                ? { ...conversation, unreadCount: Math.max(0, conversation.unreadCount - 1) }
+                : conversation));
+        }
+    }
+    function removeListedMessages(uids) {
+        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));
+    }
     function removeListedMessage(uid) {
-        setMessages((prev) => prev.filter((m) => m.uid !== uid));
-        listedOffsetRef.current = Math.max(0, listedOffsetRef.current - 1);
-        setSelectedUid(null);
+        removeListedMessages(new Set([uid]));
     }
-    const selected = messages.find((m) => m.uid === selectedUid) ?? null;
-    const selectedConversation = conversations.find((c) => c.conversationId === selectedConversationId) ?? null;
+    // 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 attachments = useMessageAttachments(selected);
-    useMarkMessageRead(selected, (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))));
+    useMarkMessageRead(selected, patchListedMessage);
     // Search results can span every folder in the mailbox, not just the one selected in the sidebar - a
     // selected message's own folderUid is the only reliable source for its actual folder type once
     // searching (outside search, every message in `messages` already comes from `folderUid` itself, so
     // 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.
-    const spansFolders = isSearching || !!aggregateFolderType;
+    // 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 selectedFolderUid = spansFolders ? (selected?.folderUid ?? folderUid) : folderUid;
     const selectedMailboxUid = spansFolders ? (selected?.mailboxUid ?? activeMailboxUid) : mailboxUid;
     const folders = mailboxFolders.find((mf) => mf.mailbox.uid === selectedMailboxUid)?.folders ?? [];
     const isSentItems = folders.find((f) => f.uid === selectedFolderUid)?.type === "sent_items";
     const isOutbox = folders.find((f) => f.uid === selectedFolderUid)?.type === "outbox";
-    const isInbox = folders.find((f) => f.uid === selectedFolderUid)?.type === "inbox";
     const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
-    // Focused/Other is an Inbox-only concept (see `MessageDetailPane`'s own `isInbox` doc comment) — the
-    // sub-tabs only ever render there, so a message with no `inferenceClassification` (the common case:
-    // absent means Focused) or an explicit `"focused"` counts as Focused, everything else as Other. Not
-    // offered for an aggregate view (each mailbox classifies independently; merging that is out of scope).
-    const visibleMessages = !isSearching && !aggregateFolderType && isInbox && classificationFilter !== "all"
-        ? messages.filter((m) => classificationFilter === "other"
-            ? m.inferenceClassification === "other"
-            : m.inferenceClassification !== "other")
-        : messages;
-    const loadMoreStatus = loadingMore ? ("Loading more…") : 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;
+    /** What a row actually shows as its subject - the decrypted one where this device recovered it, a
+     * readable stand-in for an encrypted one it hasn't, and a placeholder for a message with no subject. */
+    function rowSubject(message) {
+        return (decryptedRows[message.uid]?.subject ||
+            (message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? "Encrypted message" : message.subject) ||
+            "(no subject)");
+    }
+    /** The conversation list's selection as plain messages: every message of every ticked conversation
+     * that is in the folder being listed. A conversation spans folders (an Inbox message and the Sent
+     * Items copy of its reply), and the list only ever showed this folder's half of it, so a bulk action
+     * from here must not reach into the other folders' copies either. */
+    const selectedConversationMessages = [...selectedConversationIds].flatMap((id) => (conversationMessagesById[id] ?? []).filter((m) => !folderUid || m.folderUid === folderUid));
+    const selectedMessages = preferences.showAsConversations
+        ? 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;
+    /** 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
+     * arrived, so paging keeps appending to the same accumulated set. */
+    const listedConversations = sortConversations(conversations, preferences.sortBy, preferences.sortOrder);
+    function leaveSelectMode() {
+        setSelectMode(false);
+        setSelectedUids(new Set());
+        setSelectedConversationIds(new Set());
+        setBulkError(null);
+    }
+    function toggleSelected(uid) {
+        setSelectedUids((prev) => {
+            const next = new Set(prev);
+            if (next.has(uid)) {
+                next.delete(uid);
+            }
+            else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+    /** Loads (once) the messages behind each of `ids`, so a ticked conversation resolves to the messages
+     * every bulk action below acts on. If any of them fails to load, none of that batch stays ticked and
+     * the bar says why - better than acting on the part of a selection that happened to arrive. */
+    async function resolveConversations(ids) {
+        const missing = ids.filter((id) => !conversationMessagesById[id]);
+        if (missing.length === 0) {
+            return;
+        }
+        setResolvingSelection((n) => n + 1);
+        try {
+            const loaded = await Promise.all(missing.map(async (id) => [id, await listConversationMessages(activeMailboxUid, id)]));
+            setConversationMessagesById((prev) => ({ ...prev, ...Object.fromEntries(loaded) }));
+        }
+        catch (err) {
+            setBulkError(err instanceof ApiRequestError ? err.message : "Could not load the messages in one of those conversations.");
+            setSelectedConversationIds((prev) => {
+                const next = new Set(prev);
+                for (const id of missing) {
+                    next.delete(id);
+                }
+                return next;
+            });
+        }
+        finally {
+            setResolvingSelection((n) => n - 1);
+        }
+    }
+    function toggleConversationSelected(conversation) {
+        const id = conversation.conversationId;
+        const ticking = !selectedConversationIds.has(id);
+        setSelectedConversationIds((prev) => {
+            const next = new Set(prev);
+            if (ticking) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+        if (ticking) {
+            void resolveConversations([id]);
+        }
+    }
+    function selectAllConversations() {
+        const ids = conversations.map(conversationKey);
+        setSelectedConversationIds(new Set(ids));
+        void resolveConversations(ids);
+    }
+    /**
+     * 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).
+     *
+     * A bulk update is applied element by element server-side and stops at its first rejection, so a
+     * failure leaves an unknown prefix of the selection already changed (see `bulkUpdateMessages()`) -
+     * which is why a failure reloads the list rather than trying to reconcile it, and says so.
+     */
+    async function runBulkAction(action, removesRows) {
+        const chosen = selectedMessages;
+        setBulkBusy(true);
+        setBulkError(null);
+        try {
+            const updated = await action(chosen);
+            if (preferences.showAsConversations) {
+                // A conversation row is a summary of its messages - its count, unread count, participants
+                // and preview all move when a bulk action changes or empties part of it - so the list is
+                // reloaded rather than patched row by row.
+                setSelectedConversationIds(new Set());
+                setConversationMessagesById({});
+                setRefreshKey((n) => n + 1);
+            }
+            else if (removesRows) {
+                removeListedMessages(new Set(chosen.map((m) => m.uid)));
+            }
+            else {
+                const byUid = new Map(updated.map((m) => [m.uid, m]));
+                setMessages((prev) => prev.map((m) => byUid.get(m.uid) ?? m));
+            }
+            setSelectedUids(new Set());
+        }
+        catch (err) {
+            setBulkError(`${err instanceof ApiRequestError ? err.message : "Those messages couldn't all be updated."} Some of them may already have changed, so the list has been reloaded.`);
+            setSelectedUids(new Set());
+            setSelectedConversationIds(new Set());
+            setConversationMessagesById({});
+            setRefreshKey((n) => n + 1);
+        }
+        finally {
+            setBulkBusy(false);
+        }
+    }
+    /** Archive has no folder to move into until the mailbox has one: the server creates it lazily on the
+     * first single-message archive, so that call both creates the folder and archives the first message,
+     * and the rest of the selection is then moved into the folder it reports. */
+    async function bulkArchive(chosen) {
+        const archiveFolderUid = currentFolders.find((f) => f.type === "archive")?.uid;
+        if (archiveFolderUid) {
+            return moveMessages(chosen, archiveFolderUid);
+        }
+        const first = await archiveMessage(chosen[0].uid);
+        const rest = chosen.slice(1);
+        return rest.length === 0 ? [first] : [first, ...(await moveMessages(rest, first.folderUid))];
+    }
+    /**
+     * This mailbox's folder of `type`, created on demand. A mailbox is provisioned with only the folders it
+     * has needed so far, so Deleted Items and Junk may genuinely not exist the first time a selection is
+     * deleted or reported - and unlike Archive, neither has a server-side lazy-create route to go through.
+     *
+     * A folder created here isn't in `mailboxFolders` (the shell fetched that once), so it's remembered per
+     * mailbox and type until the page reloads; otherwise a second Delete would create a second folder.
+     */
+    async function resolveFolderOfType(type, name) {
+        const key = `${activeMailboxUid}:${type}`;
+        const known = currentFolders.find((f) => f.type === type)?.uid ?? lazyFoldersRef.current.get(key);
+        if (known) {
+            return known;
+        }
+        const created = await createFolder({ mailboxUid: activeMailboxUid, name, type });
+        lazyFoldersRef.current.set(key, created.uid);
+        return created.uid;
+    }
+    /**
+     * Sets every selected message's labels in one bulk update: each ends up with `labelUids`, plus the
+     * ones left partially applied (`keepPartial`) that it already had, plus any label this mailbox no
+     * longer defines - a label the menu couldn't show isn't one the reader chose to remove.
+     *
+     * `bulkUpdateMessages()` rather than `setMessagesLabels()`, which is its one-list-for-everyone special
+     * case: with a partially-applied row each message keeps a *different* list.
+     */
+    function applyLabelsToSelection(labelUids, keepPartial) {
+        void runBulkAction((chosen) => bulkUpdateMessages(chosen.map((message) => {
+            const kept = (message.labelUids ?? []).filter((uid) => keepPartial.includes(uid) || !mailboxLabels.some((label) => label.uid === uid));
+            return { uid: message.uid, version: message.version, labelUids: [...new Set([...labelUids, ...kept])] };
+        })), false);
+    }
+    function moveSelectionToType(type, name) {
+        void runBulkAction(async (chosen) => moveMessages(chosen, await resolveFolderOfType(type, name)), true);
+    }
+    const loadMoreStatus = loadingMore ? ("Loading more\u2026") : loadMoreError ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { role: "alert", className: "text-danger", children: loadMoreError }), _jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Retry" })] })) : loadMoreStalled ? (_jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Load more" })) : null;
     function handleSelect(message) {
+        if (selectMode) {
+            toggleSelected(message.uid);
+            return;
+        }
         if (isMobile) {
             window.location.href = `/messages/${encodeURIComponent(message.uid)}`;
             return;
         }
         setSelectedUid(message.uid);
     }
-    function handleSelectConversation(conversation) {
+    /** 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) {
+        if (selectMode) {
+            // Same rule as `handleSelect()` for a message row: while selecting, a row's own button ticks
+            // the row rather than opening it.
+            toggleConversationSelected(conversation);
+            return;
+        }
         if (isMobile) {
-            // No dedicated mobile thread route yet — the existing single-message detail route already
-            // handles any message uid regardless of conversation grouping, so land on the most recent
-            // message in the thread rather than building a second mobile detail page for this phase.
-            // `messageUids` always has at least one entry — a `ConversationSummary` only ever exists
-            // because it was grouped from real messages (see `BaseMessageRoute.conversations()`).
-            const latestUid = conversation.messageUids[conversation.messageUids.length - 1];
-            window.location.href = `/messages/${encodeURIComponent(latestUid)}`;
+            // No dedicated mobile thread route yet - the existing single-message detail route already
+            // handles any message uid regardless of conversation grouping.
+            window.location.href = `/messages/${encodeURIComponent(uid)}`;
             return;
         }
-        setSelectedConversationId(conversation.conversationId);
+        setSelectedUid(uid);
+        setOpenThread({ conversation, uid });
     }
     if (!folderUid && !aggregateFolderType) {
         // `MailShell` never renders this component at all until a mailbox is resolved (see its own
@@ -920,42 +1301,55 @@ function InboxContent({ userUid }) {
         // indistinguishable to anything (a test, a user re-reading the screen) that catches this one.
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading your mailbox\u2026" });
     }
-    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border text-sm", children: [_jsx("button", { type: "button", onClick: () => setViewMode("date"), className: [
-                                    "flex-1 py-2 font-semibold",
-                                    viewMode === "date" ? "text-primary-dark border-b-2 border-primary-dark" : "text-text-muted",
-                                ].join(" "), children: "By date" }), _jsx("button", { type: "button", onClick: () => setViewMode("conversation"), className: [
-                                    "flex-1 py-2 font-semibold",
-                                    viewMode === "conversation" ? "text-primary-dark border-b-2 border-primary-dark" : "text-text-muted",
-                                ].join(" "), children: "By conversation" })] }), viewMode === "conversation" && (_jsx("p", { className: "p-3 text-xs text-text-muted border-b border-border", children: "Showing every conversation in this mailbox \u2014 the selected folder doesn't filter this view." })), viewMode === "date" && (_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55" }) })), viewMode === "date" && isInbox && !isSearching && !aggregateFolderType && (_jsx("div", { className: "flex border-b border-border text-xs", children: ["all", "focused", "other"].map((value) => (_jsx("button", { type: "button", onClick: () => setClassificationFilter(value), className: [
+    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [selectMode ? (_jsx(MailSelectionBar, { selected: selectedMessages, listed: messages, totals: preferences.showAsConversations
+                            ? { selected: selectedConversationIds.size, listed: conversations.length, noun: "conversation" }
+                            : undefined, onSelectAll: () => preferences.showAsConversations
+                            ? selectAllConversations()
+                            : setSelectedUids(new Set(messages.map((m) => m.uid))), onClearSelection: () => preferences.showAsConversations ? setSelectedConversationIds(new Set()) : setSelectedUids(new Set()), onCancel: leaveSelectMode, folders: currentFolders, currentFolderUid: folderUid, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated, onApplyLabels: applyLabelsToSelection, onSetRead: (read) => void runBulkAction((chosen) => setMessagesRead(chosen, read), false), onSetFlagged: (flagged) => void runBulkAction((chosen) => setMessagesFlagged(chosen, flagged), false), onArchive: () => void runBulkAction(bulkArchive, true), onMoveTo: (targetFolderUid) => runBulkAction((chosen) => moveMessages(chosen, targetFolderUid), true), onReportJunk: () => moveSelectionToType("junk", "Junk Email"), onDelete: () => moveSelectionToType("deleted_items", "Deleted Items"), busy: bulkBusy || resolvingSelection > 0, error: bulkError })) : (_jsx(MailListToolbar, { sortBy: preferences.sortBy, sortOrder: preferences.sortOrder, filter: preferences.filter, labelUids: preferences.labelUids, labels: mailboxLabels, mailboxUid: activeMailboxUid, onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onLabelUidsChange: (nextLabelUids) => updatePreferences({ labelUids: nextLabelUids }), showAsConversations: preferences.showAsConversations, onSortChange: (sortBy, sortOrder) => updatePreferences({ sortBy, sortOrder }), onFilterChange: (filter) => updatePreferences({ filter }), onShowAsConversationsChange: (showAsConversations) => updatePreferences({ showAsConversations }), selectMode: selectMode, onSelectModeChange: setSelectMode, offerClassificationFilters: offerClassificationFilters, filterDisabled: isSearching, filterDisabledReason: "Filters don't apply to search results", sortKeysDisabled: isSearching || !!aggregateFolderType, 
+                        // 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
+                            ? "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
+                                    ? 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", { type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: aggregateFolderType ? "Open a mailbox's own folder to search" : "Search all mail…", "aria-label": "Search all mail", disabled: !!aggregateFolderType, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface disabled:opacity-55" }) })), offerClassificationFilters && (_jsx("div", { className: "flex border-b border-border text-xs", children: MAIL_LIST_CLASSIFICATION_FILTERS.map(({ value, label }) => (_jsx("button", { type: "button", "aria-pressed": preferences.filter === value, onClick: () => updatePreferences({ filter: value }), className: [
                                 "flex-1 py-1.5 font-semibold",
-                                classificationFilter === value
+                                preferences.filter === value
                                     ? "text-primary-dark border-b-2 border-primary-dark"
                                     : "text-text-muted",
-                            ].join(" "), children: value === "all" ? "All" : value === "focused" ? "Focused" : "Other" }, 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: [_jsx("span", { children: tier1Done && tier2Done && tier3Done
-                                    ? `${visibleMessages.length} result${visibleMessages.length === 1 ? "" : "s"}`
-                                    : `${visibleMessages.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
+                            ].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: [_jsx("span", { children: tier1Done && tier2Done && tier3Done
+                                    ? `${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 && viewMode === "date" && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : viewMode === "conversation" ? (_jsx(ConversationList, { conversations: conversations, selectedId: selectedConversationId, onSelect: handleSelectConversation })) : visibleMessages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && !preferences.showAsConversations && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : preferences.showAsConversations ? (_jsxs(_Fragment, { children: [_jsx(ConversationList, { conversations: listedConversations, newestFirst: preferences.sortBy === "date" && preferences.sortOrder === "desc", mailboxUid: activeMailboxUid, selectedUid: selectedUid, messageOverrides: conversationPatches, onOpenMessage: handleOpenConversation, selectMode: selectMode, selectedConversationIds: selectedConversationIds, onToggleSelected: toggleConversationSelected }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : messages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
                                     ? `No messages match "${searchQuery}".`
-                                    : classificationFilter === "all"
+                                    : 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: visibleMessages.map((message) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
-                                            "w-full text-left px-4 py-3 border-b border-border",
-                                            message.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt",
-                                            message.flags.read ? "" : "font-semibold",
-                                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm truncate", children: decryptedRows[message.uid]?.subject ||
-                                                            (message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER
-                                                                ? "Encrypted message"
-                                                                : message.subject) ||
-                                                            "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview })] }))] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [], labels: labels })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
+                                        : "No messages here." }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: messages.map((message) => (_jsxs("li", { className: "flex items-stretch border-b border-border", children: [selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: selectedUids.has(message.uid), onChange: () => toggleSelected(message.uid), "aria-label": `Select ${rowSubject(message)}`, className: "w-4 h-4 accent-primary" }) })), _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
+                                                "flex-1 min-w-0 text-left px-4 py-3",
+                                                message.uid === selectedUid || selectedUids.has(message.uid)
+                                                    ? "bg-primary/10"
+                                                    : "hover:bg-surface-alt",
+                                                message.flags.read ? "" : "font-semibold",
+                                            ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), aggregateFolderType && (_jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: mailboxes.find((mb) => mb.uid === message.mailboxUid)?.displayName })), isSearching && pendingUids.has(message.uid) ? (_jsxs("div", { className: "flex flex-col gap-1.5 py-0.5", children: [_jsx(Skeleton, { height: "h-3.5", className: "w-2/3 rounded-sm" }), _jsx(Skeleton, { height: "h-3", className: "w-full rounded-sm" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm truncate", children: rowSubject(message) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview }), message.hasAttachments && _jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" }), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }))] })] }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0 min-h-0", children: preferences.showAsConversations ? (_jsx(ConversationThreadPane, { conversation: openThread?.conversation ?? null, selectedUid: openThread?.uid ?? null, mailboxUid: activeMailboxUid, folders: currentFolders, labels: mailboxLabels, onMessagePatched: patchListedMessage, onMessageRemoved: (updated) => removeListedMessage(updated.uid), onLabelCreated: (label) => setMailboxLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: patchListedMessage, isOutbox: isOutbox, onReceiptHandled: patchListedMessage, draftsFolderUid: draftsFolderUid, folders: folders, onMoved: (updated) => {
+                        // 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);
+                    }, onFolderCreated: onFolderCreated, onScheduledSendCanceled: (updated) => {
                         // The message moved out of the currently-viewed Outbox folder (into Drafts)
-                        // — unlike a recall, which patches a message in place, this removes it from
+                        // - unlike a recall, which patches a message in place, this removes it from
                         // the list entirely, matching what a real folder switch would show.
                         removeListedMessage(updated.uid);
                     }, onArchived: (updated) => {
-                        // Same reasoning as onScheduledSendCanceled above — the message moved out of
+                        // Same reasoning as onScheduledSendCanceled above - the message moved out of
                         // 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: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))) })) })] }));
+                    }, labels: labels, onLabelsChanged: patchListedMessage, onLabelCreated: (label) => (otherMailbox ? setOtherMailboxLabels : setMailboxLabels)((prev) => [...prev, label]) })) })] }));
 }