@rapidmx/web-client 0.3.1 → 0.5.0

package/apps/www/contacts/[uid].tsx

@@ -9,6 +9,7 @@ import ContactsShell, { ContactsShellProps } from "../../shared/components/conta
 import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
 
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
@@ -30,6 +31,9 @@ function ContactDetailContent({ uid }: { uid: string }) {
     const [contact, setContact] = useState<Contact | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    // Kept apart from the load `error` - a failed delete must leave the contact on screen (with the
+    // reason) rather than replacing the whole page with an error as if it had never loaded.
+    const [deleteError, setDeleteError] = useState<string | null>(null);
     const [mode, setMode] = useState<Mode>("view");
 
     useEffect(() => {
@@ -46,14 +50,22 @@ function ContactDetailContent({ uid }: { uid: string }) {
     // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
     // never runs with a stale/absent contact — no redundant null check needed here.
     async function handleDelete(contact: Contact) {
+        setDeleteError(null);
         try {
             await deleteContact(contact.uid, contact.version);
+            // A deleted contact's pinned signing keys must stop vouching for signatures.
+            clearPinnedSignerCache();
             window.location.href = "/contacts";
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
         }
     }
 
+    // After a key change was resolved (or found stale): re-read the contact, keeping the one shown if that fails.
+    function handleKeysChanged() {
+        getContact(uid).then(setContact, () => undefined);
+    }
+
     if (loading) {
         return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
     }
@@ -82,7 +94,14 @@ function ContactDetailContent({ uid }: { uid: string }) {
 
     return (
         <div className="p-6">
-            <ContactDetailPane contact={contact} onEdit={() => setMode("edit")} onDelete={() => handleDelete(contact)} backHref={backHref} />
+            {deleteError && <Alert>{deleteError}</Alert>}
+            <ContactDetailPane
+                contact={contact}
+                onEdit={() => setMode("edit")}
+                onDelete={() => handleDelete(contact)}
+                backHref={backHref}
+                onKeysChanged={handleKeysChanged}
+            />
         </div>
     );
 }

package/apps/www/contacts/index.tsx

@@ -22,7 +22,13 @@ import ContactsToolbar from "../../shared/components/contacts/ContactsToolbar.js
 import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.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 "@rapidmx/react-shared/mail/mailboxAccessApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/listAllPages.js";
+import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.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";
@@ -30,7 +36,7 @@ const INPUT_CLASS =
 export default function ContactsPage(props: ContactsShellProps) {
     return (
         <ContactsShell {...props}>
-            <ContactsContent />
+            <ContactsContent userUid={props.userUid} />
         </ContactsShell>
     );
 }
@@ -38,22 +44,33 @@ export default function ContactsPage(props: ContactsShellProps) {
 type Mode = "view" | "edit" | "new";
 type SortColumn = "name" | "info";
 
+/** Shown in the Deleted view when the server answered `?deleted=true` with live contacts (see `canViewDeleted`). */
+const DELETED_NOT_PERMITTED_MESSAGE = "You don't have permission to view deleted contacts in this folder.";
+
 function primaryInfo(contact: Contact): string {
     return contact.emails[0]?.address ?? contact.phones[0]?.phoneNumber ?? "";
 }
 
+/** How long an export's object URL is kept alive after the click - some browsers are still reading the
+ * blob after `click()` returns, so revoking it synchronously can cancel the download. */
+const VCARD_DOWNLOAD_URL_LIFETIME_MS = 60_000;
+
 function downloadTextFile(filename: string, content: string): void {
     const blob = new Blob([content], { type: "text/vcard" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
     a.download = filename;
+    document.body.appendChild(a);
     a.click();
-    URL.revokeObjectURL(url);
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), VCARD_DOWNLOAD_URL_LIFETIME_MS);
 }
 
-function ContactsContent() {
-    const { folderUid, mailboxUid } = useContactsShell();
+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);
     const { openCompose } = useCompose();
     const isMobile = useIsMobile();
     const [contacts, setContacts] = useState<Contact[]>([]);
@@ -62,6 +79,9 @@ function ContactsContent() {
     const [deletedError, setDeletedError] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    // Set when `listAllPages()` stopped at its page cap - the list shown isn't every contact.
+    const [truncated, setTruncated] = useState(false);
+    const [deletedTruncated, setDeletedTruncated] = useState(false);
     const [query, setQuery] = useState("");
     const [view, setView] = useState<ContactsView>({ type: "all" });
     const [sortColumn, setSortColumn] = useState<SortColumn>("name");
@@ -69,6 +89,9 @@ function ContactsContent() {
     const [checkedUids, setCheckedUids] = useState<Set<string>>(new Set());
     const [selectedUid, setSelectedUid] = useState<string | null>(null);
     const [mode, setMode] = useState<Mode>("view");
+    // Set after a contact is created in a different mailbox than the one this list shows.
+    const [savedElsewhere, setSavedElsewhere] = useState<{ mailboxUid: string; displayName: string } | null>(null);
+    const [confirmingBulkDelete, setConfirmingBulkDelete] = useState(false);
 
     /** Returns a promise so bulk actions (below) can wait for the refreshed list before re-asserting their
      * own error message — this always clears `error` first (a legitimate reset for a fresh fetch attempt),
@@ -77,13 +100,17 @@ function ContactsContent() {
     function reload(): Promise<void> {
         if (!folderUid) {
             setContacts([]);
+            setTruncated(false);
             setLoading(false);
             return Promise.resolve();
         }
         setLoading(true);
         setError(null);
-        return listContacts(folderUid, { limit: 500 })
-            .then(setContacts)
+        return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }))
+            .then((result) => {
+                setContacts(result.items);
+                setTruncated(result.truncated);
+            })
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load contacts."))
             .finally(() => setLoading(false));
     }
@@ -92,14 +119,56 @@ function ContactsContent() {
         void reload();
     }, [folderUid]);
 
+    // restapi only honors `?deleted=true` for a caller with both delete and update rights on the contacts *folder*
+    // (its ACL, which inherits the mailbox's but can carry its own records) - anyone else silently gets the *live*
+    // contacts back, which the Deleted view would then present as deleted. There is no client API for the caller's
+    // access to a folder, so the mailbox-level check below is only a first gate (an owner always passes; anyone else
+    // asks the server; unknown - still loading, or the check failed - hides the view), and the Deleted view's own
+    // load below detects the server ignoring the filter. `ContactsShell` only renders this with a resolved mailbox,
+    // and switching mailboxes is a full page load, so `mailboxUid` never changes under this component.
+    const ownsMailbox = mailboxes.some((mb) => mb.uid === mailboxUid && mb.ownerUserUid !== undefined && mb.ownerUserUid === userUid);
+    const [delegateCanViewDeleted, setDelegateCanViewDeleted] = useState(false);
+    // Resolving a contact's key change needs update rights on the mailbox - `undefined` while unknown.
+    const [delegateCanUpdate, setDelegateCanUpdate] = useState<boolean | undefined>(undefined);
+    useEffect(() => {
+        if (ownsMailbox) {
+            return;
+        }
+        let cancelled = false;
+        getMyMailboxAccess(mailboxUid!).then(
+            (access) => {
+                if (!cancelled) {
+                    setDelegateCanViewDeleted(access.canDelete && access.canUpdate);
+                    setDelegateCanUpdate(access.canUpdate);
+                }
+            },
+            () => undefined,
+        );
+        return () => {
+            cancelled = true;
+        };
+    }, [ownsMailbox]);
+    const canViewDeleted = ownsMailbox || delegateCanViewDeleted;
+
     useEffect(() => {
         if (view.type !== "deleted" || !folderUid) {
             return;
         }
         setDeletedLoading(true);
         setDeletedError(null);
-        listDeletedContacts(folderUid, { limit: 500 })
-            .then(setDeletedContacts)
+        listAllPages((page) => listDeletedContacts(folderUid, { limit: LIST_PAGE_SIZE, page }))
+            .then((result) => {
+                // A server that dropped the `deleted` filter (no delete+update right on this folder) answers with live
+                // contacts, which must never be listed as deleted.
+                if (result.items.some((c) => c.deleted !== true)) {
+                    setDeletedContacts([]);
+                    setDeletedTruncated(false);
+                    setDeletedError(DELETED_NOT_PERMITTED_MESSAGE);
+                    return;
+                }
+                setDeletedContacts(result.items);
+                setDeletedTruncated(result.truncated);
+            })
             .catch((err) => setDeletedError(err instanceof ApiRequestError ? err.message : "Could not load deleted contacts."))
             .finally(() => setDeletedLoading(false));
         // Re-fetches every time the Deleted view is (re-)selected, matching this page's own `reload()`
@@ -192,8 +261,15 @@ function ContactsContent() {
     }
 
     function handleSaved(contact: Contact) {
-        setSelectedUid(contact.uid);
         setMode("view");
+        if (contact.mailboxUid !== mailboxUid) {
+            // Created in another mailbox (via the form's Mailbox selector) - it won't be in this list.
+            setSelectedUid(null);
+            setSavedElsewhere({ mailboxUid: contact.mailboxUid, displayName: contact.displayName });
+            return;
+        }
+        setSavedElsewhere(null);
+        setSelectedUid(contact.uid);
         void reload();
     }
 
@@ -204,6 +280,8 @@ function ContactsContent() {
     async function handleDelete(contact: Contact) {
         try {
             await deleteContact(contact.uid, contact.version);
+            // Trusted signer pins come from contacts - a deleted contact's keys must stop vouching for signatures.
+            clearPinnedSignerCache();
             setSelectedUid(null);
             setMode("view");
             void reload();
@@ -213,6 +291,7 @@ function ContactsContent() {
     }
 
     async function handleBulkDelete() {
+        setConfirmingBulkDelete(false);
         let bulkError: string | null = null;
         for (const contact of checkedContacts) {
             try {
@@ -221,6 +300,7 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not delete one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         setCheckedUids(new Set());
         await reload();
         setError(bulkError);
@@ -237,9 +317,9 @@ function ContactsContent() {
 
     function handleEmail() {
         const addresses = checkedContacts.map((c) => c.emails[0]?.address).filter((a): a is string => Boolean(a));
-        // `ContactsShell` only ever renders this component once `mailboxUid` is resolved (see its own
-        // invariant comment) — same non-null pattern as `organizerAddress` in the calendar page.
-        openCompose({ mailboxUid: mailboxUid!, to: addresses.join(", ") });
+        // No mailboxUid: a fresh message defaults to the caller's own mailbox, not whichever mailbox's
+        // contacts happen to be open - the compose window's From field can still change it.
+        openCompose({ to: addresses.join(", ") });
     }
 
     async function handleToggleFavorite() {
@@ -252,6 +332,7 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
@@ -265,11 +346,14 @@ function ContactsContent() {
         for (const contact of checkedContacts) {
             const categories = Array.from(new Set([...(contact.categories ?? []), category.trim()]));
             try {
-                await updateContact({ ...contact, categories });
+                // Only the changed field - sending the whole fetched contact back includes server-managed
+                // fields restapi rejects, and would overwrite any concurrent edit to the other fields.
+                await updateContact({ uid: contact.uid, version: contact.version, categories });
             } catch (err) {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
@@ -295,13 +379,14 @@ function ContactsContent() {
                 bulkError = err instanceof ApiRequestError ? err.message : "Could not import one or more contacts.";
             }
         }
+        clearPinnedSignerCache();
         await reload();
         setError(bulkError);
     }
 
     return (
         <div className="flex-1 flex min-h-0">
-            <ContactsSidebar mailboxUid={mailboxUid} contacts={contacts} active={view} onSelect={handleSelectView} />
+            <ContactsSidebar mailboxUid={mailboxUid} contacts={contacts} active={view} onSelect={handleSelectView} showDeleted={canViewDeleted} />
             {/* Hidden on mobile while the "new contact" form (the one form-pane state mobile keeps
                 in-place — see the pane's own comment below) is showing, so the two never compete for the
                 same row's width. Desktop always shows both side by side, unchanged. */}
@@ -316,7 +401,7 @@ function ContactsContent() {
                     allSelectedFavorited={checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite)}
                     onNewContact={handleNew}
                     onEdit={handleToolbarEdit}
-                    onDelete={handleBulkDelete}
+                    onDelete={() => setConfirmingBulkDelete(true)}
                     onEmail={handleEmail}
                     onToggleFavorite={handleToggleFavorite}
                     onAddCategory={handleAddCategory}
@@ -338,6 +423,14 @@ function ContactsContent() {
                         <Alert>{error}</Alert>
                     </div>
                 )}
+                {(isDeletedView ? deletedTruncated : truncated) && (
+                    <div className="p-3">
+                        <Alert>
+                            This folder has more contacts than can be shown at once - only the first {LIST_PAGE_SIZE * MAX_LIST_PAGES} are
+                            listed.
+                        </Alert>
+                    </div>
+                )}
                 {deletedError && isDeletedView && (
                     <div className="p-3">
                         <Alert>{deletedError}</Alert>
@@ -421,16 +514,54 @@ function ContactsContent() {
                 see handleSelectRow), so this pane only needs to show there for "new", which stays in-place
                 on every device (an unsaved contact has no uid for a route). Always visible on desktop. */}
             <div className={["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" ")}>
+                {savedElsewhere && mode !== "new" && (
+                    <p role="status" className="mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text">
+                        {savedElsewhere.displayName} was added to{" "}
+                        {mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
+                        <a
+                            href={`/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`}
+                            className="font-medium text-primary-dark hover:underline"
+                        >
+                            View that mailbox&rsquo;s contacts
+                        </a>
+                    </p>
+                )}
                 {mode === "new" && mailboxUid && folderUid ? (
-                    <ContactForm mailboxUid={mailboxUid} folderUid={folderUid} onSaved={handleSaved} onCancel={handleCancel} />
+                    <ContactForm
+                        mailboxUid={mailboxUid}
+                        folderUid={folderUid}
+                        mailboxes={writableMailboxes}
+                        onSaved={handleSaved}
+                        onCancel={handleCancel}
+                    />
                 ) : mode === "edit" && selected ? (
                     <ContactForm contact={selected} onSaved={handleSaved} onCancel={handleCancel} />
                 ) : selected ? (
-                    <ContactDetailPane contact={selected} onEdit={() => setMode("edit")} onDelete={() => handleDelete(selected)} />
+                    <ContactDetailPane
+                        contact={selected}
+                        onEdit={() => setMode("edit")}
+                        onDelete={() => handleDelete(selected)}
+                        onKeysChanged={() => void reload()}
+                        canResolveKeys={ownsMailbox || delegateCanUpdate}
+                    />
                 ) : (
                     <p className="text-sm text-text-muted">Select a contact, or create a new one.</p>
                 )}
             </div>
+            <Modal open={confirmingBulkDelete} onClose={() => setConfirmingBulkDelete(false)} title="Delete contacts">
+                <p className="text-sm mb-5">
+                    Delete {checkedContacts.length} selected {checkedContacts.length === 1 ? "contact" : "contacts"}? They
+                    move to Deleted contacts.
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingBulkDelete(false)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger" onClick={handleBulkDelete}>
+                        Delete
+                    </Button>
+                </div>
+            </Modal>
         </div>
     );
 }