@rapidmx/web-client 0.30.0 → 0.32.0

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

@@ -9,12 +9,13 @@ import { useEffect, useState } from "react";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { deleteContact, getContact } from "../../../lib/contacts/contactsApi.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
-import ContactsShell from "../../shared/components/contacts/layout/ContactsShell.js";
+import ContactsShell, { useContactsShell } from "../../shared/components/contacts/layout/ContactsShell.js";
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { useMailboxUpdateAccess } from "../../shared/mail/useMailboxUpdateAccess.js";
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
  * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
@@ -31,6 +32,9 @@ function ContactDetailContent({ uid }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [mode, setMode] = useState("view");
+    const { mailboxes } = useContactsShell();
+    // A contact in a mailbox shared with the reader view-only can be read, not changed.
+    const writable = useMailboxUpdateAccess(mailboxes.find((mailbox) => mailbox.uid === contact?.mailboxUid));
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -72,7 +76,7 @@ function ContactDetailContent({ uid }) {
                         setMode("view");
                     }, onCancel: () => setMode("view") })] }));
     }
-    return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref, onKeysChanged: handleKeysChanged, onChanged: setContact }) }));
+    return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), canWrite: writable, backHref: backHref, onKeysChanged: handleKeysChanged, onChanged: setContact }) }));
 }
 export default ContactDetailPage;
 /** The tab's title: `Brand: Contacts` (see `pageTitle()`). */

package/dist/apps/www/contacts/index.js

@@ -7,8 +7,9 @@ import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useNavigate } from "../../shared/navigation/index.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ApiRequestError } from "../../../lib/util/api.js";
-import { createContact, deleteContact, listContacts, listDeletedContacts, setContactFavorite, contactPhotoUrl, updateContact, } from "../../../lib/contacts/contactsApi.js";
-import { contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
+import { createContact, deleteContact, listContacts, listContactsInFolders, listDeletedContacts, setContactFavorite, updateContact, } from "../../../lib/contacts/contactsApi.js";
+import { VCARD_MAX_CHARS, VCARD_MAX_CONTACTS, contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
+import { withoutDuplicates } from "../../shared/components/contacts/participantDetails.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import { useCompose } from "../../shared/components/mail/compose/ComposeContext.js";
@@ -17,11 +18,12 @@ import ContactsSidebar from "../../shared/components/contacts/ContactsSidebar.js
 import ContactsToolbar from "../../shared/components/contacts/ContactsToolbar.js";
 import FloatingActionButton from "../../shared/components/layout/FloatingActionButton.js";
 import { HiOutlineUserPlus } from "react-icons/hi2";
-import ContactAvatar from "../../../lib/components/avatar/ContactAvatar.js";
+import ContactPhotoAvatar from "../../../lib/components/avatar/ContactPhotoAvatar.js";
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import { getMyMailboxAccess } from "../../../lib/mail/mailboxAccessApi.js";
+import { useMailboxUpdateAccess } from "../../shared/mail/useMailboxUpdateAccess.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
@@ -30,6 +32,7 @@ import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigne
 import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { notify } from "../../shared/notifications/store.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function ContactsPage(props) {
     return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, { userUid: props.userUid }) }));
@@ -57,6 +60,8 @@ function ContactsContent({ userUid }) {
     const { folderUid, mailboxUid, mailboxes } = useContactsShell();
     // The new-contact form's Mailbox choices - view-only shares are left out (see writableMailboxes.ts).
     const writableMailboxes = useWritableMailboxes(mailboxes, userUid, mailboxUid);
+    // A mailbox shared with the reader view-only: its contacts can be read, not changed.
+    const mailboxWritable = useMailboxUpdateAccess(mailboxes.find((mb) => mb.uid === mailboxUid));
     const { openCompose } = useCompose();
     const isMobile = useIsMobile();
     const navigate = useNavigate();
@@ -263,6 +268,22 @@ function ContactsContent({ userUid }) {
         }
     }
     // The bulk handlers below try every contact and report each failure: the same failure repeated is one pop-up with a count.
+    // A bulk action sends every checked row's own version: pressed again before it finishes, it would send stale ones and raise a stream of 409s.
+    const bulkRunning = useRef(false);
+    function singleFlight(run) {
+        return async () => {
+            if (bulkRunning.current) {
+                return;
+            }
+            bulkRunning.current = true;
+            try {
+                await run();
+            }
+            finally {
+                bulkRunning.current = false;
+            }
+        };
+    }
     async function handleBulkDelete() {
         setConfirmingBulkDelete(false);
         for (const contact of checkedContacts) {
@@ -291,7 +312,7 @@ function ContactsContent({ userUid }) {
         // contacts happen to be open - the compose window's From field can still change it.
         openCompose({ to: addresses.join(", ") });
     }
-    async function handleToggleFavorite() {
+    const handleToggleFavorite = singleFlight(async () => {
         const allFavorited = checkedContacts.every((c) => c.favorite);
         for (const contact of checkedContacts) {
             try {
@@ -303,8 +324,8 @@ function ContactsContent({ userUid }) {
         }
         clearPinnedSignerCache();
         await reload();
-    }
-    async function handleAddCategory() {
+    });
+    const handleAddCategory = singleFlight(async () => {
         const category = window.prompt("Category name");
         if (!category?.trim()) {
             return;
@@ -322,7 +343,7 @@ function ContactsContent({ userUid }) {
         }
         clearPinnedSignerCache();
         await reload();
-    }
+    });
     function handleExportVCard() {
         downloadTextFile(checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf", checkedContacts.length === 1 ? contactToVCard(checkedContacts[0]) : contactsToVCardFile(checkedContacts));
     }
@@ -330,9 +351,37 @@ function ContactsContent({ userUid }) {
         if (!mailboxUid || !folderUid) {
             return;
         }
-        const text = await file.text();
-        const parsed = parseVCards(text);
-        for (const input of parsed) {
+        // A file is only read, and only so many records taken from it (see `parseVCards()`): one contact is one request, and a huge export would
+        // lock the page for minutes and flood the server. Whatever goes wrong while reading it is said, not left as an unhandled rejection.
+        if (file.size > VCARD_MAX_CHARS) {
+            notify({ kind: "error", title: "Couldn't import contacts", message: `That file is larger than ${Math.round(VCARD_MAX_CHARS / 1000000)} MB. Split it into smaller files.` });
+            return;
+        }
+        let parsed;
+        try {
+            parsed = parseVCards(await file.text());
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't read that contacts file");
+            return;
+        }
+        if (parsed.length >= VCARD_MAX_CONTACTS) {
+            notify({ kind: "warning", title: "Only part of the file was imported", message: `A file is imported up to its first ${VCARD_MAX_CONTACTS} contacts - import the rest from another file.` });
+        }
+        // Importing a file twice must not double every contact: one whose address (or, with no address, name and phone) is already a contact's - or an
+        // earlier card's in the file - is left alone. The folder is read in full for that, not just the page of it the list holds.
+        let fresh;
+        try {
+            fresh = withoutDuplicates(parsed, await listContactsInFolders([folderUid], client)).fresh;
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't check the file against your contacts");
+            return;
+        }
+        if (fresh.length < parsed.length) {
+            notify({ kind: "info", title: "Some contacts were skipped", message: `${parsed.length - fresh.length} of the contacts in that file are already in your contacts.` });
+        }
+        for (const input of fresh) {
             try {
                 await createContact({ mailboxUid, folderUid, ...input }, client);
             }
@@ -346,7 +395,9 @@ function ContactsContent({ userUid }) {
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView, showDeleted: canViewDeleted }), _jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex", children: [_jsxs("div", { className: [
                             "w-full md:w-[clamp(16rem,32vw,26rem)] min-w-0 md:shrink-0 md:border-r border-border md:flex flex-col min-h-0",
                             mode === "new" ? "hidden md:flex" : "flex",
-                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28, photoUrl: contactPhotoUrl(contact), email: contact.emails[0]?.address }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), onKeysChanged: () => void reload(), onChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
+                        ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: () => setConfirmingBulkDelete(true), onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile, shortcuts: true, hideNew: isMobile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), (isDeletedView ? deletedTruncated : truncated) && (_jsx("div", { className: "p-3", children: _jsxs(Alert, { children: ["This folder has more contacts than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsxs("table", { className: "w-full table-fixed text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-10 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "w-[58%] px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "block max-w-full truncate text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", 
+                                                            // A deleted contact has no pane to show (it can't be restored or opened), and its route would answer 404.
+                                                            disabled: isDeletedView, onClick: () => handleSelectRow(contact), className: "flex w-full min-w-0 items-center gap-2 text-left disabled:cursor-default", children: [_jsx(ContactPhotoAvatar, { lazy: true, displayName: contact.displayName, size: 28, contact: contact, email: contact.emails[0]?.address }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "max-w-0 truncate px-3 py-2 text-text-muted", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsxs("div", { className: ["flex-1 min-w-0 min-h-0 flex-col md:flex", mode === "new" ? "flex" : "hidden"].join(" "), children: [savedElsewhere && mode !== "new" && (_jsxs("p", { role: "status", className: "m-6 mb-0 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: [savedElsewhere.displayName, " was added to", " ", mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s contacts" })] })), mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, mailboxes: writableMailboxes, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected), canWrite: mailboxWritable, onKeysChanged: () => void reload(), onChanged: () => void reload(), canResolveKeys: ownsMailbox || delegateCanUpdate }) })) : (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center", children: _jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." }) }))] })] }), _jsxs(Modal, { open: confirmingBulkDelete, onClose: () => setConfirmingBulkDelete(false), title: "Delete contacts", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Delete ", checkedContacts.length, " selected ", checkedContacts.length === 1 ? "contact" : "contacts", "? They move to Deleted contacts."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingBulkDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleBulkDelete, children: "Delete" })] })] }), isMobile && mode !== "new" && _jsx(FloatingActionButton, { label: "New contact", icon: HiOutlineUserPlus, onClick: handleNew })] }));
 }
 export default ContactsPage;
 /** The tab's title: `Brand: Contacts` (see `pageTitle()`). */

package/dist/apps/www/index.js

@@ -21,6 +21,7 @@ import { searchLocalIndex } from "../shared/search/searchTier2.js";
 import { SEARCH_LIMITS, classifyFailure, describeFailures, hitKey, mergeSearchResults, runLimited, searchPageSize, tagHits, withTimeout, } from "../shared/search/crossMailboxSearch.js";
 import { getUnlockedKeys, subscribeKeySession } from "../../lib/crypto/keySession.js";
 import { useMessageAttachments } from "../../lib/mail/mailDetailHooks.js";
+import { settleWithLimit } from "../../lib/util/settleWithLimit.js";
 import useIsMobile from "../../lib/util/useIsMobile.js";
 import MailShell, { useMailShell, } from "../shared/components/mail/layout/MailShell.js";
 import MailAddress from "../shared/components/mail/MailAddress.js";
@@ -34,7 +35,7 @@ import { setReadStateMany } from "../shared/mail/messageReadState.js";
 import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
-import { rememberDecrypted } from "../shared/mail/decryptedMessages.js";
+import { decryptFailedBefore, mapWithConcurrency, markDecryptFailed, rememberDecrypted } from "../shared/mail/decryptedMessages.js";
 import ConversationList, { conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
 import InviteRowChip from "../shared/components/mail/invite/InviteRowChip.js";
@@ -57,6 +58,8 @@ import { notifyApiError } from "../shared/notifications/apiErrors.js";
 const MESSAGE_PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
 const LIST_PREVIEW_MAX_LENGTH = 160;
+/** How many encrypted rows are fetched and decrypted at once. */
+const DECRYPT_CONCURRENCY = 4;
 /** The literal outer-envelope `Subject` every encrypted message carries server-side - RFC 9788's
  * `hcp_baseline` policy obscures it to this exact string (see `smimeMessage.ts`'s
  * `applyBaselineOuterHeaders()`), which is also all `Message.subject` ever shows for one of these until
@@ -90,10 +93,12 @@ function stripHtmlToText(html) {
  * and `handleUnlockList()`), and a single row's fetch/decrypt failure never blocks the rest.
  */
 async function decryptEncryptedRows(messages, unlocked) {
-    const encrypted = messages.filter((m) => m.subject === ENCRYPTED_SUBJECT_PLACEHOLDER);
+    // A row that already came to nothing since the last unlock is not downloaded again by every refresh of the list.
+    const encrypted = messages.filter((m) => m.subject === ENCRYPTED_SUBJECT_PLACEHOLDER && !decryptFailedBefore(m.uid));
     // Imported once for all the rows, by whichever needs it first.
     let securityModule;
-    const entries = await Promise.all(encrypted.map(async (message) => {
+    // A few at a time: each is a download and a public-key decryption.
+    const entries = await mapWithConcurrency(encrypted, DECRYPT_CONCURRENCY, async (message) => {
         try {
             const rawMime = await getMessageRawContent(message.uid);
             // Loaded here, on first use: the S/MIME code (PKI.js, ASN.1, X.509) is over half a megabyte and an inbox with
@@ -101,6 +106,7 @@ async function decryptEncryptedRows(messages, unlocked) {
             const { evaluateMessageSecurity } = await (securityModule ?? (securityModule = import("../../lib/crypto/messageSecurity.js")));
             const security = await evaluateMessageSecurity(rawMime, unlocked);
             if (!security.subject && !security.html) {
+                markDecryptFailed(message.uid);
                 return null;
             }
             const preview = security.html ? stripHtmlToText(security.html).slice(0, LIST_PREVIEW_MAX_LENGTH) : undefined;
@@ -108,9 +114,10 @@ async function decryptEncryptedRows(messages, unlocked) {
             return [message.uid, { subject: security.subject, preview }];
         }
         catch {
+            markDecryptFailed(message.uid);
             return null;
         }
-    }));
+    });
     const result = {};
     for (const entry of entries) {
         if (entry) {
@@ -319,6 +326,10 @@ function appendUnseenRows(shown, more, idOf, cap) {
 }
 const messageUid = (message) => message.uid;
 const conversationKey = conversationRowKey;
+/** How many conversations' messages are requested at once when many are ticked together (Select all on a long list). */
+const RESOLVE_CONVERSATIONS_AT_ONCE = 5;
+/** What of a conversation's summary changes when one of its messages does: a different one means the messages fetched for it are out of date. */
+const conversationSignature = (row) => [row.messageUids.join(","), row.unreadCount, row.flagged, row.folderUids.join(","), row.latestFolderUid].join("|");
 /** 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`. */
@@ -330,7 +341,9 @@ function mergeInboxMessages(perMailbox) {
 /**
  * Fans out one `listMessages()` call per accessible mailbox that has a folder of `type`, merges the
  * results newest-first. A mailbox with no matching folder, or whose fetch fails, simply contributes
- * nothing - one mailbox's absence/failure must not blank out every other mailbox's messages.
+ * nothing - one mailbox's absence/failure must not blank out every other mailbox's messages. `listed`, the
+ * rows on screen when this is a refresh of them, makes a mailbox whose fetch fails keep the rows it has there
+ * instead of contributing none (a timeout must not make its mail vanish until the next success).
  *
  * **Pagination scope trim (deliberate, matching this file's own documented Tier 2/3 tradeoffs)**: there is
  * no composite cursor across an arbitrary number of independently-paginated mailboxes in this pass - this
@@ -339,7 +352,7 @@ 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, filter, client) {
+async function fetchAggregateMessages(mailboxFolders, type, filter, client, listed) {
     const perMailbox = await Promise.all(mailboxFolders.map(async ({ mailbox, folders }) => {
         const folder = folders.find((f) => f.type === type);
         if (!folder) {
@@ -349,7 +362,7 @@ async function fetchAggregateMessages(mailboxFolders, type, filter, client) {
         // 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 }, client).catch(() => []);
+        const messages = await listMessages(folder.uid, { limit: MESSAGE_PAGE_SIZE, filter }, client).catch(() => (listed ?? []).filter((m) => m.mailboxUid === mailbox.uid));
         return { mailbox, messages };
     }));
     return mergeInboxMessages(perMailbox);
@@ -358,16 +371,17 @@ async function fetchAggregateMessages(mailboxFolders, type, filter, client) {
  * The conversation-list counterpart of `fetchAggregateMessages()`: one `listConversations()` per accessible mailbox that has a folder of
  * `type`, each scoped to *that folder* (so "All Inboxes" groups only Inbox mail - not the Sent Items copy of a reply, which a mailbox-wide
  * grouping pulls in) and each row tagged with its mailbox, then merged newest activity first. Same first-page-only scope, and the same
- * rule that a mailbox that has no such folder or fails to answer contributes nothing rather than blanking the rest.
+ * rule that a mailbox that has no such folder or fails to answer contributes nothing rather than blanking the rest - or, with `listed` (the rows on
+ * screen, for a refresh of them), keeps the rows it has there.
  */
-async function fetchAggregateConversations(mailboxFolders, type, params, client) {
+async function fetchAggregateConversations(mailboxFolders, type, params, client, listed) {
     const perMailbox = await Promise.all(mailboxFolders.map(async ({ mailbox, folders }) => {
         const folder = folders.find((f) => f.type === type);
         if (!folder) {
             return [];
         }
-        const rows = await listConversations(mailbox.uid, { ...params, folderUid: folder.uid, page: 0 }, client).catch(() => []);
-        return rows.map((row) => ({ ...row, mailboxUid: mailbox.uid }));
+        const rows = await listConversations(mailbox.uid, { ...params, folderUid: folder.uid, page: 0 }, client).catch(() => null);
+        return rows ? rows.map((row) => ({ ...row, mailboxUid: mailbox.uid })) : (listed ?? []).filter((row) => row.mailboxUid === mailbox.uid);
     }));
     return perMailbox.flat().sort((a, b) => Date.parse(b.latestDate) - Date.parse(a.latestDate));
 }
@@ -621,6 +635,8 @@ function InboxContent({ userUid }) {
     messagesRef.current = messages;
     const conversationsRef = useRef(conversations);
     conversationsRef.current = conversations;
+    const selectedConversationIdsRef = useRef(selectedConversationIds);
+    selectedConversationIdsRef.current = selectedConversationIds;
     // 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).
@@ -1256,8 +1272,9 @@ function InboxContent({ userUid }) {
             try {
                 if (asConversations && aggregateFolderType) {
                     // No paging here either: the fresh merged first pages are the list.
-                    const fresh = await fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0), client);
+                    const fresh = await fetchAggregateConversations(mailboxFolders, aggregateFolderType, conversationParams(0), client, conversationsRef.current);
                     if (isCurrent()) {
+                        refreshConversationMessages(conversationsRef.current, fresh);
                         setConversations(fresh);
                     }
                 }
@@ -1267,13 +1284,14 @@ function InboxContent({ userUid }) {
                         return;
                     }
                     const merged = mergeFirstPage(conversationsRef.current, fresh, conversationKey, MESSAGE_PAGE_SIZE);
+                    refreshConversationMessages(conversationsRef.current, merged.rows);
                     setConversations(merged.rows);
                     listedOffsetRef.current = merged.complete ? fresh.length : listedOffsetRef.current + merged.added;
                     setHasMore(!merged.complete);
                 }
                 else if (aggregateFolderType) {
                     // No paging here (see `fetchAggregateMessages()`): the fresh merged first pages are the list.
-                    const fresh = await fetchAggregateMessages(mailboxFolders, aggregateFolderType, effectiveFilter, client);
+                    const fresh = await fetchAggregateMessages(mailboxFolders, aggregateFolderType, effectiveFilter, client, messagesRef.current);
                     if (isCurrent()) {
                         setMessages(fresh);
                     }
@@ -1685,35 +1703,66 @@ function InboxContent({ userUid }) {
             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
-     * a pop-up says why - better than acting on the part of a selection that happened to arrive. */
-    async function resolveConversations(rows) {
-        const missing = rows.filter((row) => !conversationMessagesById[conversationKey(row)]);
+    /** Loads (once, or again with `refetch`) the messages behind each of `rows`, so a ticked conversation resolves to the messages
+     * every bulk action below acts on - a few requests at a time (Select all on a long list is hundreds of rows). A conversation
+     * that fails to load is unticked, with one pop-up saying why - better than acting on a part of it - and the rest stay ticked.
+     * What arrives after the list was loaded again is dropped: those rows are gone. */
+    async function resolveConversations(rows, refetch = false) {
+        const missing = rows.filter((row) => refetch || !conversationMessagesById[conversationKey(row)]);
         if (missing.length === 0) {
             return;
         }
+        const listRun = searchRunIdRef.current;
         setResolvingSelection((n) => n + 1);
         try {
-            const loaded = await Promise.all(
+            const outcomes = await settleWithLimit(missing, RESOLVE_CONVERSATIONS_AT_ONCE, (row) => 
             // A row of the "All mailboxes" view names its own mailbox; any other list is the open mailbox's.
-            missing.map(async (row) => [conversationKey(row), await listConversationMessages(row.mailboxUid ?? activeMailboxUid, row.conversationId, {}, client)]));
-            setConversationMessagesById((prev) => ({ ...prev, ...Object.fromEntries(loaded) }));
-        }
-        catch (err) {
-            notifyApiError(err, "Couldn't load the messages in one of those conversations");
-            setSelectedConversationIds((prev) => {
-                const next = new Set(prev);
-                for (const row of missing) {
-                    next.delete(conversationKey(row));
+            searchRunIdRef.current === listRun
+                ? listConversationMessages(row.mailboxUid ?? activeMailboxUid, row.conversationId, {}, client)
+                : Promise.reject(new Error("The list was loaded again")));
+            if (searchRunIdRef.current !== listRun) {
+                return;
+            }
+            const loaded = {};
+            const failed = new Set();
+            let firstFailure;
+            outcomes.forEach((outcome, index) => {
+                const key = conversationKey(missing[index]);
+                if (outcome.status === "fulfilled") {
+                    loaded[key] = outcome.value;
+                }
+                else {
+                    failed.add(key);
+                    firstFailure ?? (firstFailure = outcome.reason);
                 }
-                return next;
             });
+            setConversationMessagesById((prev) => ({ ...prev, ...loaded }));
+            if (failed.size > 0) {
+                notifyApiError(firstFailure, "Couldn't load the messages in one of those conversations");
+                setSelectedConversationIds((prev) => new Set([...prev].filter((key) => !failed.has(key))));
+            }
         }
         finally {
             setResolvingSelection((n) => n - 1);
         }
     }
+    /**
+     * Called as a refresh of the list swaps in `after` for `before`: the messages kept for a conversation whose summary changed (a reply arrived, a
+     * message was read or moved) are out of date - the next action on it would act on a list missing the new message, or send an old `version`. The
+     * cached messages of one that is not ticked are dropped, to be fetched when next wanted; a ticked one's are fetched again now, the old ones standing
+     * until they arrive.
+     */
+    function refreshConversationMessages(before, after) {
+        const was = new Map(before.map((row) => [conversationKey(row), conversationSignature(row)]));
+        const changed = after.filter((row) => was.has(conversationKey(row)) && was.get(conversationKey(row)) !== conversationSignature(row));
+        if (changed.length === 0) {
+            return;
+        }
+        const ticked = changed.filter((row) => selectedConversationIdsRef.current.has(conversationKey(row)));
+        const stale = new Set(changed.filter((row) => !ticked.includes(row)).flatMap((row) => [conversationKey(row), row.conversationId]));
+        setConversationMessagesById((prev) => Object.fromEntries(Object.entries(prev).filter(([key]) => !stale.has(key))));
+        void resolveConversations(ticked, true);
+    }
     function toggleConversationSelected(conversation) {
         const id = conversationKey(conversation);
         const ticking = !selectedConversationIds.has(id);
@@ -1955,7 +2004,7 @@ function InboxContent({ userUid }) {
     }
     /** Empty folder: permanently deletes everything in the folder being listed (Deleted Items or Junk Email) after the reader has confirmed. */
     async function emptyListedFolder(folder, count) {
-        const outcome = await permanent.requestEmptyFolder({ uid: folder.uid, name: folder.name }, count);
+        const outcome = await permanent.requestEmptyFolder(folder, count);
         if (!outcome) {
             return;
         }
@@ -2325,6 +2374,12 @@ function InboxContent({ userUid }) {
             uid: emptiableFolders[0].uid,
             name: aggregateFolderType ? (emptiableFolders[0].type === "junk" ? "Junk Email" : "Deleted Items") : emptiableFolders[0].name,
             uids: aggregateFolderType ? emptiableFolders.map((f) => f.uid) : undefined,
+            // The mailboxes whose folders these are, for the confirmation to name (it empties each of them, a share included).
+            scope: aggregateFolderType
+                ? mailboxFolders
+                    .filter((entry) => entry.folders.some((f) => f.type === aggregateFolderType))
+                    .map(({ mailbox }) => `${mailbox.displayName}${mailbox.ownerUserUid ? "" : " (shared)"}`)
+                : undefined,
         };
     // How many it holds as the sidebar's counts have it (kept right as messages leave), unless that says none while the list shows some.
     const emptiableTotal = emptiableFolders.reduce((sum, f) => sum + folderCountOf(f).total, 0);

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

@@ -34,12 +34,17 @@ function MessageDetailContent({ uid }) {
     const [labels, setLabels] = useState([]);
     const conversationId = useSearchParams()[0].get("conversation");
     useEffect(() => {
+        // An answer for a message since replaced (the uid changed without the page remounting) must not be shown as the current one.
+        let cancelled = false;
         setLoading(true);
         setError(null);
         getMessage(uid, client)
-            .then(setMessage)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
-            .finally(() => setLoading(false));
+            .then((loaded) => !cancelled && setMessage(loaded))
+            .catch((err) => !cancelled && setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
+            .finally(() => !cancelled && setLoading(false));
+        return () => {
+            cancelled = true;
+        };
     }, [uid, client]);
     // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
     // Labels control rather than blocking the rest of the page. Keyed on the message's own mailbox, not the

package/dist/apps/www/settings/auto-reply/index.js

@@ -10,6 +10,7 @@ import { updateMailbox } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
 import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 function SettingsAutoReplyPage(props) {
@@ -31,9 +32,20 @@ function AutoReplyContent() {
     const [version, setVersion] = useState(mailbox.version);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
     async function handleSubmit(e) {
         e.preventDefault();
         setSaved(false);
+        // Turned on with nothing to send, or over a window that ends before it starts, would answer people with an empty message or never at all.
+        if (oofEnabled && !oofMessage.trim()) {
+            setError("Write the message to send while automatic replies are on.");
+            return;
+        }
+        if (oofEnabled && oofStartTime && oofEndTime && new Date(oofEndTime) <= new Date(oofStartTime)) {
+            setError("The end must be after the start.");
+            return;
+        }
+        setError(null);
         setSaving(true);
         try {
             const updated = await updateMailbox({
@@ -55,7 +67,7 @@ function AutoReplyContent() {
             setSaving(false);
         }
     }
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Automatic Replies" }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: ["Send an automatic reply to anyone who emails ", mailbox.displayName, " while you\u2019re away. A calendar event with its own automatic reply enabled takes over for its own start/end window."] }), saved && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: oofEnabled, onChange: (e) => setOofEnabled(e.target.checked) }), "Automatic replies are on"] }), oofEnabled && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message" }), _jsx("textarea", { "aria-label": "Automatic reply message", className: INPUT_CLASS, rows: 5, value: oofMessage, onChange: (e) => setOofMessage(e.target.value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Start (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply start", className: INPUT_CLASS, value: oofStartTime, onChange: (e) => setOofStartTime(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "End (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply end", className: INPUT_CLASS, value: oofEndTime, onChange: (e) => setOofEndTime(e.target.value) })] })] }), _jsx("p", { className: "text-xs text-text-muted -mt-2", children: "Leave both blank to stay on indefinitely until turned off." })] })), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Automatic Replies" }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: ["Send an automatic reply to anyone who emails ", mailbox.displayName, " while you\u2019re away. A calendar event with its own automatic reply enabled takes over for its own start/end window."] }), saved && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: oofEnabled, onChange: (e) => setOofEnabled(e.target.checked) }), "Automatic replies are on"] }), oofEnabled && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message" }), _jsx("textarea", { "aria-label": "Automatic reply message", className: INPUT_CLASS, rows: 5, value: oofMessage, onChange: (e) => setOofMessage(e.target.value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Start (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply start", className: INPUT_CLASS, value: oofStartTime, onChange: (e) => setOofStartTime(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "End (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply end", className: INPUT_CLASS, value: oofEndTime, onChange: (e) => setOofEndTime(e.target.value) })] })] }), _jsx("p", { className: "text-xs text-text-muted -mt-2", children: "Leave both blank to stay on indefinitely until turned off." })] })), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
 }
 export default SettingsAutoReplyPage;
 /** The tab's title: `Brand: Settings` (see `pageTitle()`). */

package/dist/apps/www/settings/blocked-senders/index.js

@@ -61,6 +61,10 @@ function ListSection({ kind, entries, otherEntries, ownAddresses, editable, onAd
             setError("That is one of your own addresses, so it cannot be blocked.");
             return;
         }
+        if (kind === "blocked" && checked.entry.startsWith("@") && ownAddresses.some((address) => address.toLowerCase().endsWith(checked.entry))) {
+            setError("That is your own domain: blocking it would send the mail of everyone at it - yours included - to Junk.");
+            return;
+        }
         setError(null);
         setBusy(true);
         try {