@rapidmx/web-client 0.30.0 → 0.31.0

package/dist/apps/shared/mail/outbox/sendJob.d.ts

@@ -45,6 +45,7 @@ export declare const CONTEXT_GRACE_MS = 4000;
 export declare function registerOutboxCounter(tracker: (mailboxUid: string) => OutboxCountTracker, onQueued: (mailboxUid: string) => void): () => void;
 /** The request a message was queued from, while this tab still holds it: what lets "Open draft" and "Retry" work on a failure the server reports later. */
 export declare function retainedRequest(draftUid: string): SendRequest | undefined;
+/** Drops the request a message was queued from, and the pictures remembered as attached to its draft: it has gone, so neither is wanted again. */
 export declare function forgetRetainedRequest(draftUid: string): void;
 /** The sender's signing/encryption key state right now, read from the tab's key session (they can lock mid-send). */
 export declare function readSendKeys(mailboxUid: string, signEnabled: boolean, mailbox: Mailbox | undefined): {

package/dist/apps/shared/mail/outbox/sendJob.js

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { assembleDraft, assembleDraftRaw, getMailbox, getMessage, queueMessageSend, sendMessage, setMessageRequestReceipt, } from "../../../../lib/mail/mailApi.js";
+import { assembleDraft, assembleDraftRaw, forgetDraftImages, getMailbox, getMessage, queueMessageSend, sendMessage, setMessageRequestReceipt, } from "../../../../lib/mail/mailApi.js";
 import { describeSendFailure } from "../../../../lib/mail/sendFailure.js";
 import { resolveRecipientEncryption } from "../../../../lib/crypto/composeSecurity.js";
 import { getUnlockedKeys } from "../../../../lib/crypto/keySession.js";
@@ -33,8 +33,10 @@ const RETAINED_LIMIT = 25;
 export function retainedRequest(draftUid) {
     return sendState.retained.get(draftUid);
 }
+/** Drops the request a message was queued from, and the pictures remembered as attached to its draft: it has gone, so neither is wanted again. */
 export function forgetRetainedRequest(draftUid) {
     sendState.retained.delete(draftUid);
+    forgetDraftImages(draftUid);
 }
 function retain(request) {
     sendState.retained.delete(request.draft.uid);
@@ -310,9 +312,11 @@ export function startSend(request, client) {
         else if (outcome.kind === "sent") {
             // A server with no queue relayed it before answering: the Sent Items copy exists already.
             markOutgoingSent(uid);
+            forgetDraftImages(uid);
             notifySent();
         }
         else {
+            forgetDraftImages(uid);
             notify({
                 id: `scheduled:${uid}`,
                 kind: "success",

package/dist/apps/shared/mail/useMailLiveUpdates.d.ts

@@ -8,6 +8,9 @@ import { FolderChange } from "./folderTree.js";
 export declare const LIVE_POLL_INTERVAL_MS = 45000;
 /** Events arriving this close together are answered with one refresh - a burst of new mail is one refetch, not one each. */
 export declare const LIVE_EVENT_DEBOUNCE_MS = 400;
+/** Refreshes are also at least this far apart: while mail keeps arriving (a bulk delivery, an import) the list, the folder counts and an open
+ * thread are read about once in this time - a trailing refresh then picks up whatever came since - instead of every debounce window. */
+export declare const LIVE_EVENT_MIN_INTERVAL_MS = 1500;
 /** What changed, as far as a list on screen is concerned. */
 export interface LiveUpdates {
     /** Bumped each time the list should quietly refetch its first page. `0` until the first bump. */

package/dist/apps/shared/mail/useMailLiveUpdates.js

@@ -13,6 +13,9 @@ import { sortFolders } from "./folderTree.js";
 export const LIVE_POLL_INTERVAL_MS = 45000;
 /** Events arriving this close together are answered with one refresh - a burst of new mail is one refetch, not one each. */
 export const LIVE_EVENT_DEBOUNCE_MS = 400;
+/** Refreshes are also at least this far apart: while mail keeps arriving (a bulk delivery, an import) the list, the folder counts and an open
+ * thread are read about once in this time - a trailing refresh then picks up whatever came since - instead of every debounce window. */
+export const LIVE_EVENT_MIN_INTERVAL_MS = 1500;
 export const NO_LIVE_UPDATES = { tick: 0, folderUids: null };
 /** The class names `NotificationUtils.sendMessage()` publishes are the model's (`MessageMongo`, `MessageSQL`, `FolderMongo`). */
 const MESSAGE_EVENT = /^Message/;
@@ -88,9 +91,11 @@ export function useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolde
         let pendingFolders = new Set();
         let pendingUnknown = false;
         let everOpen = false;
+        let lastFlushAt = -Infinity;
         // Never runs once `stopped`: whatever sets it clears the timer first.
         function flush() {
             timer = undefined;
+            lastFlushAt = Date.now();
             const folderUids = pendingUnknown ? null : new Set(pendingFolders);
             pendingFolders = new Set();
             pendingUnknown = false;
@@ -108,7 +113,7 @@ export function useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolde
             else {
                 pendingUnknown = true;
             }
-            timer ?? (timer = setTimeout(flush, LIVE_EVENT_DEBOUNCE_MS));
+            timer ?? (timer = setTimeout(flush, Math.max(LIVE_EVENT_DEBOUNCE_MS, lastFlushAt + LIVE_EVENT_MIN_INTERVAL_MS - Date.now())));
         }
         const offEvent = client.onEvent((event) => {
             const sendEvent = parseSendEvent(event);

package/dist/apps/shared/mail/usePermanentDelete.d.ts

@@ -7,6 +7,8 @@ export interface EmptiableFolder {
     name: string;
     /** Every folder to empty, when "the folder" is the "All mailboxes" view of one type (each mailbox's own Deleted Items): `uid` is then the first of them. */
     uids?: string[];
+    /** The names of the mailboxes those folders are in, for the confirmation to say whose are emptied (in the "All mailboxes" view). */
+    scope?: string[];
 }
 export interface PermanentDelete {
     /**

package/dist/apps/shared/mail/usePermanentDelete.js

@@ -97,7 +97,7 @@ export function usePermanentDelete() {
                 ? "all items"
                 : folderRequest.count === 1
                     ? "the only item"
-                    : `all ${folderRequest.count} items`} in ${folderRequest.folder.name}? This can't be undone.`
+                    : `all ${folderRequest.count} items`} in ${folderRequest.folder.name}${folderRequest.folder.scope ? ` of: ${folderRequest.folder.scope.join(", ")}` : ""}? This can't be undone.`
             : `Permanently delete ${messageCount(request?.kind === "messages" ? request.messages.length : 0)}? This can't be undone.`, confirmLabel: folderRequest ? "Delete all permanently" : "Delete permanently", busy: running, onConfirm: () => void confirm(), onCancel: cancel }));
     return { requestPermanentDelete, requestEmptyFolder, busy: pending !== null, dialog };
 }

package/dist/apps/shared/notifications/apiErrors.js

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import { logSessionEvent } from "../../../lib/auth/session.js";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { describeSendFailure } from "../../../lib/mail/sendFailure.js";
 import { notify } from "./store.js";
@@ -16,6 +17,7 @@ export function setSignInUrl(authServerUrl) {
 }
 /** The "Your session expired" pop-up: one however many requests noticed, with a "Sign in" action. Returns its id. */
 export function notifySessionExpired() {
+    logSessionEvent("notice:session-expired");
     return notify({
         kind: "error",
         title: "Your session expired",

package/dist/apps/shared/notifications/preferences.d.ts

@@ -1,7 +1,7 @@
 /**
  * The user's one switch for every pop-up (new mail, a failed send, an API error, a reminder), per browser in `localStorage`.
  * Framework-free like the store, which reads it: `notify()` keeps a notification out of sight while it is off (it is still
- * listed in "Recent notifications").
+ * listed in "Recent notifications") - except an error that carries actions (Retry, Open draft), which would otherwise be unreachable.
  */
 /**
  * `localStorage` key of the switch. Absent means on; `"off"` means the user turned pop-ups off. The name is from when the switch

package/dist/apps/shared/notifications/preferences.js

@@ -5,7 +5,7 @@
 /**
  * The user's one switch for every pop-up (new mail, a failed send, an API error, a reminder), per browser in `localStorage`.
  * Framework-free like the store, which reads it: `notify()` keeps a notification out of sight while it is off (it is still
- * listed in "Recent notifications").
+ * listed in "Recent notifications") - except an error that carries actions (Retry, Open draft), which would otherwise be unreachable.
  */
 /**
  * `localStorage` key of the switch. Absent means on; `"off"` means the user turned pop-ups off. The name is from when the switch

package/dist/apps/shared/notifications/store.js

@@ -232,7 +232,9 @@ export function notify(input) {
         paused: false,
     };
     applyInput(entry, input);
-    if (!getNotificationsEnabled()) {
+    // An error that offers something to do (a failed send's Retry and Open draft, "Sign in again") is shown whatever the switch says: it is
+    // the only way back to what the person typed, and the history has no way to carry out its actions.
+    if (!getNotificationsEnabled() && !(entry.kind === "error" && entry.actions.length > 0)) {
         // The user has pop-ups off: nothing is shown, but it is listed in the history like any other.
         record(entry);
         emit();

package/dist/apps/shared/plugins/pluginNav.d.ts

@@ -35,7 +35,8 @@ export interface PluginNavProps {
     pluginNav?: PluginNav;
 }
 /** A same-origin absolute path: starts with `/`, but not `//` or `/\` (both of which browsers treat as
- * protocol-relative URLs to another host). */
+ * protocol-relative URLs to another host), and holds no control character, space or backslash anywhere -
+ * URL parsers strip tab/CR/LF from anywhere, so `/<tab>/evil.com` would otherwise read as `//evil.com`. */
 export declare function isSafePluginHref(href: string): boolean;
 /**
  * Appends a plugin's nav items after the core ones. Skips any item that isn't well-formed, whose `href`

package/dist/apps/shared/plugins/pluginNav.js

@@ -3,9 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 /** A same-origin absolute path: starts with `/`, but not `//` or `/\` (both of which browsers treat as
- * protocol-relative URLs to another host). */
+ * protocol-relative URLs to another host), and holds no control character, space or backslash anywhere -
+ * URL parsers strip tab/CR/LF from anywhere, so `/<tab>/evil.com` would otherwise read as `//evil.com`. */
 export function isSafePluginHref(href) {
-    return /^\/(?![/\\])/.test(href);
+    // eslint-disable-next-line no-control-regex -- the control characters are exactly what is being rejected
+    return /^\/(?![/\\])[^\u0000-\u0020\u007f\\]*$/.test(href);
 }
 /**
  * Appends a plugin's nav items after the core ones. Skips any item that isn't well-formed, whose `href`

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

@@ -4,7 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3, HiOutlinePlus } from "react-icons/hi2";
 import { addDays, addMonths, addWeeks, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, parseISO, startOfDay, startOfMonth, startOfWeek, } from "date-fns";
@@ -17,6 +17,7 @@ import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calen
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { expandAllOccurrences } from "../../../lib/calendar/recurrence.js";
+import { useDayKey } from "../../../lib/calendar/useDayKey.js";
 import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
 import CalendarShell, { useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
@@ -46,7 +47,7 @@ import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
-import { redactedEventUidOf } from "../../shared/calendar/calendarLiveUpdates.js";
+import { changedEventOf } from "../../shared/calendar/calendarLiveUpdates.js";
 /** The furthest instants a `Date` can hold: the List's "range" reaches both. */
 const MAX_DATE_MS = 8.64e15;
 function CalendarPage(props) {
@@ -236,15 +237,20 @@ function CalendarContent({ userUid, bookingHref }) {
     const calendarFolderUidsKey = calendarFolders.map((f) => f.uid).sort().join(",");
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
-    // A private or confidential event that somebody creates or changes is announced on the push connection as its busy block, whatever the reader may
-    // see (see `redactedEventUidOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
-    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404) leaves it. A failed fetch
-    // changes nothing: the next load shows the event as it is.
+    // An event that somebody creates, changes or deletes is announced on the push connection - a private or confidential one as its busy block, whatever the
+    // reader may see (see `changedEventOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
+    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404, or a delete) leaves it. A failed
+    // fetch changes nothing: the next load shows the event as it is.
     const checkedFolderUidsRef = useRef(checkedFolderUids);
     checkedFolderUidsRef.current = checkedFolderUids;
     useEffect(() => getPushClient().onEvent((event) => {
-        const uid = redactedEventUidOf(event);
-        if (!uid) {
+        const change = changedEventOf(event);
+        if (!change) {
+            return;
+        }
+        const { uid } = change;
+        if (change.deleted) {
+            setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
             return;
         }
         void getCalendarEvent(uid, client).then((fresh) => {
@@ -272,11 +278,14 @@ function CalendarContent({ userUid, bookingHref }) {
         return () => clearTimeout(timer);
     }, [searchText]);
     // The List shows only what is from today on, so that is all a search steps through there; the other views reach the past ones.
+    // Today moves on at midnight: the List's "from today on" is worked out again then (`listDay` is only a dependency).
+    const listDay = useDayKey();
+    const dayOfList = view === "list" ? listDay : "";
     const matches = useMemo(() => {
         const found = searching ? searchOccurrences(events, query) : [];
         const today = new Date();
         return view === "list" ? found.filter((occurrence) => isUpcoming(occurrence, today)) : found;
-    }, [events, query, searching, view]);
+    }, [events, query, searching, view, dayOfList]);
     const activeIndex = matches.findIndex((m) => m.occurrenceKey === activeKey);
     // What an open event card steps through, in order: the matches while a search runs, else every event of the checked calendars (bounded as a
     // search is). The List holds only what is from today on, so that is all its card steps through. Worked out only when something needs it.
@@ -290,7 +299,7 @@ function CalendarContent({ userUid, bookingHref }) {
             return everything.filter((occurrence) => isUpcoming(occurrence, today));
         }
         return everything;
-    }, [searching, matches, view, everything]);
+    }, [searching, matches, view, everything, dayOfList]);
     const occurrences = useMemo(() => {
         if (view === "list") {
             return sequence;
@@ -425,11 +434,12 @@ function CalendarContent({ userUid, bookingHref }) {
             initialAllDay,
         });
     }
-    function openEvent(occurrence) {
+    // Stable (it only sets state), so the List's rows are not rendered again by every keystroke in the search box.
+    const openEvent = useCallback((occurrence) => {
         setSlide(undefined);
         setActiveKey(occurrence.occurrenceKey);
         setModal({ occurrence });
-    }
+    }, []);
     function closeModal() {
         setModal(null);
     }
@@ -477,6 +487,8 @@ function CalendarContent({ userUid, bookingHref }) {
         }
         catch (err) {
             notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
+            // A refused change (a 409 most of all) means the page holds a stale version: load again, or every later drag of this event fails the same way.
+            reload();
         }
     }
     const title = view === "list"

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()`). */