@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/www/contacts/index.tsx

@@ -11,12 +11,13 @@ import {
     createContact,
     deleteContact,
     listContacts,
+    listContactsInFolders,
     listDeletedContacts,
     setContactFavorite,
-    contactPhotoUrl,
     updateContact,
 } from "../../../lib/contacts/contactsApi.js";
-import { contactsToVCardFile, contactToVCard, parseVCards } from "../../../lib/contacts/vcard.js";
+import { VCARD_MAX_CHARS, VCARD_MAX_CONTACTS, ParsedVCardContact, 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";
@@ -25,11 +26,12 @@ import ContactsSidebar, { ContactsView } from "../../shared/components/contacts/
 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";
@@ -38,6 +40,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";
@@ -80,6 +83,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     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();
@@ -309,6 +314,22 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     }
 
     // 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: () => Promise<void>): () => Promise<void> {
+        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) {
@@ -339,7 +360,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         openCompose({ to: addresses.join(", ") });
     }
 
-    async function handleToggleFavorite() {
+    const handleToggleFavorite = singleFlight(async () => {
         const allFavorited = checkedContacts.every((c) => c.favorite);
         for (const contact of checkedContacts) {
             try {
@@ -350,9 +371,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         }
         clearPinnedSignerCache();
         await reload();
-    }
+    });
 
-    async function handleAddCategory() {
+    const handleAddCategory = singleFlight(async () => {
         const category = window.prompt("Category name");
         if (!category?.trim()) {
             return;
@@ -369,7 +390,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         }
         clearPinnedSignerCache();
         await reload();
-    }
+    });
 
     function handleExportVCard() {
         downloadTextFile(
@@ -382,9 +403,35 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         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 / 1_000_000)} MB. Split it into smaller files.` });
+            return;
+        }
+        let parsed: ReturnType<typeof parseVCards>;
+        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: ParsedVCardContact[];
+        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);
             } catch (err) {
@@ -513,8 +560,14 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                                             </td>
                                         )}
                                         <td className="px-3 py-2">
-                                            <button type="button" onClick={() => handleSelectRow(contact)} className="flex w-full min-w-0 items-center gap-2 text-left">
-                                                <ContactAvatar displayName={contact.displayName} size={28} photoUrl={contactPhotoUrl(contact)} email={contact.emails[0]?.address} />
+                                            <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"
+                                            >
+                                                <ContactPhotoAvatar lazy displayName={contact.displayName} size={28} contact={contact} email={contact.emails[0]?.address} />
                                                 <span className="min-w-0 truncate font-medium">
                                                     {contact.displayName}
                                                     {contact.favorite && <span aria-label="Favorite"> ★</span>}
@@ -563,6 +616,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                             contact={selected}
                             onEdit={() => setMode("edit")}
                             onDelete={() => handleDelete(selected)}
+                            canWrite={mailboxWritable}
                             onKeysChanged={() => void reload()}
                             onChanged={() => void reload()}
                             canResolveKeys={ownsMailbox || delegateCanUpdate}

package/apps/www/index.tsx

@@ -53,6 +53,7 @@ import {
 import type { Coverage } from "../shared/search/localIndexWorker.js";
 import { getUnlockedKeys, subscribeKeySession, UnlockedKeys } 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, {
     AggregateFolderType,
@@ -71,7 +72,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, { ListedConversation, conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import type { ConversationThreadHead } from "../shared/components/mail/ConversationThreadPane.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
@@ -104,6 +105,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
@@ -147,11 +150,15 @@ function stripHtmlToText(html: string): string {
  * and `handleUnlockList()`), and a single row's fetch/decrypt failure never blocks the rest.
  */
 async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys): Promise<Record<string, DecryptedRow>> {
-    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: Promise<typeof import("../../lib/crypto/messageSecurity.js")> | undefined;
-    const entries = await Promise.all(
-        encrypted.map(async (message): Promise<[string, DecryptedRow] | null> => {
+    // A few at a time: each is a download and a public-key decryption.
+    const entries = await mapWithConcurrency(
+        encrypted,
+        DECRYPT_CONCURRENCY,
+        async (message): Promise<[string, DecryptedRow] | null> => {
             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
@@ -159,15 +166,17 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
                 const { evaluateMessageSecurity } = await (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;
                 rememberDecrypted(message.uid, message.mailboxUid, { subject: security.subject, preview });
                 return [message.uid, { subject: security.subject, preview }];
             } catch {
+                markDecryptFailed(message.uid);
                 return null;
             }
-        }),
+        },
     );
     const result: Record<string, DecryptedRow> = {};
     for (const entry of entries) {
@@ -470,6 +479,13 @@ function appendUnseenRows<T>(shown: T[], more: T[], idOf: (row: T) => string, ca
 const messageUid = (message: 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: ListedConversation) =>
+    [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`. */
@@ -482,7 +498,9 @@ function mergeInboxMessages(perMailbox: { mailbox: Mailbox; messages: Message[]
 /**
  * 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
@@ -496,6 +514,7 @@ async function fetchAggregateMessages(
     type: AggregateFolderType,
     filter: MessageListFilter,
     client?: ApiClient,
+    listed?: Message[],
 ): Promise<Message[]> {
     const perMailbox = await Promise.all(
         mailboxFolders.map(async ({ mailbox, folders }) => {
@@ -507,7 +526,7 @@ async function fetchAggregateMessages(
             // 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(() => [] as Message[]);
+            const messages = await listMessages(folder.uid, { limit: MESSAGE_PAGE_SIZE, filter }, client).catch(() => (listed ?? []).filter((m) => m.mailboxUid === mailbox.uid));
             return { mailbox, messages };
         }),
     );
@@ -518,13 +537,15 @@ async function fetchAggregateMessages(
  * 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: MailboxFolders[],
     type: AggregateFolderType,
     params: ConversationListParams,
     client?: ApiClient,
+    listed?: ListedConversation[],
 ): Promise<ListedConversation[]> {
     const perMailbox = await Promise.all(
         mailboxFolders.map(async ({ mailbox, folders }): Promise<ListedConversation[]> => {
@@ -532,8 +553,8 @@ async function fetchAggregateConversations(
             if (!folder) {
                 return [];
             }
-            const rows = await listConversations(mailbox.uid, { ...params, folderUid: folder.uid, page: 0 }, client).catch(() => [] as ConversationSummary[]);
-            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));
@@ -805,6 +826,8 @@ function InboxContent({ userUid }: { userUid?: string }) {
     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).
@@ -1485,8 +1508,9 @@ function InboxContent({ userUid }: { userUid?: string }) {
             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);
                     }
                 } else if (asConversations) {
@@ -1495,12 +1519,13 @@ function InboxContent({ userUid }: { userUid?: string }) {
                         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);
                     }
@@ -1954,35 +1979,67 @@ function InboxContent({ userUid }: { userUid?: string }) {
         });
     }
 
-    /** 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: ListedConversation[]) {
-        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: ListedConversation[], 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)] as const),
+                searchRunIdRef.current === listRun
+                    ? listConversationMessages(row.mailboxUid ?? activeMailboxUid, row.conversationId, {}, client)
+                    : Promise.reject(new Error("The list was loaded again")),
             );
-            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));
+            if (searchRunIdRef.current !== listRun) {
+                return;
+            }
+            const loaded: Record<string, Message[]> = {};
+            const failed = new Set<string>();
+            let firstFailure: unknown;
+            outcomes.forEach((outcome, index) => {
+                const key = conversationKey(missing[index]);
+                if (outcome.status === "fulfilled") {
+                    loaded[key] = outcome.value;
+                } else {
+                    failed.add(key);
+                    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: ListedConversation[], after: ListedConversation[]) {
+        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: ListedConversation) {
         const id = conversationKey(conversation);
         const ticking = !selectedConversationIds.has(id);
@@ -2251,7 +2308,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
 
     /** Empty folder: permanently deletes everything in the folder being listed (Deleted Items or Junk Email) after the reader has confirmed. */
     async function emptyListedFolder(folder: EmptiableFolder, count: number | undefined) {
-        const outcome = await permanent.requestEmptyFolder({ uid: folder.uid, name: folder.name }, count);
+        const outcome = await permanent.requestEmptyFolder(folder, count);
         if (!outcome) {
             return;
         }
@@ -2799,6 +2856,12 @@ function InboxContent({ userUid }: { userUid?: string }) {
                   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/apps/www/messages/[uid].tsx

@@ -40,12 +40,17 @@ function MessageDetailContent({ uid }: { uid: string }) {
     const conversationId: string | null = 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

package/apps/www/settings/auto-reply/index.tsx

@@ -9,6 +9,7 @@ import { updateMailbox } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import SettingsShell, { SettingsShellProps, 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 =
@@ -41,10 +42,21 @@ function AutoReplyContent() {
     const [version, setVersion] = useState(mailbox.version);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    const [error, setError] = useState<string | null>(null);
 
     async function handleSubmit(e: FormEvent) {
         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({
@@ -75,6 +87,7 @@ function AutoReplyContent() {
                 </p>
 
                 {saved && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+                {error && <Alert>{error}</Alert>}
 
                 <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                     <label className="flex items-center gap-2 text-sm font-medium">

package/apps/www/settings/blocked-senders/index.tsx

@@ -93,6 +93,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 {