@rapidmx/web-client 0.29.0 → 0.31.0

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