@rapidmx/web-client 0.20.0 → 0.22.0

package/apps/shared/components/contacts/ContactsSidebar.tsx

@@ -4,9 +4,10 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Contact, ContactList, createContactList, listContactLists } from "@rapidmx/react-shared/contacts/contactsApi.js";
-import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { Contact, ContactList, createContactList, listContactLists } from "../../../../lib/contacts/contactsApi.js";
+import Drawer from "../../../../lib/components/overlays/Drawer.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 
 export type ContactsView =
@@ -97,6 +98,7 @@ function NavItem({
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
 export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }: ContactsSidebarProps) {
+    const client = useApiClient();
     const [lists, setLists] = useState<ContactList[]>([]);
     const [listsError, setListsError] = useState<string | null>(null);
     const [addingList, setAddingList] = useState(false);
@@ -109,7 +111,7 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             return;
         }
         setListsError(null);
-        listContactLists(mailboxUid, { limit: 200 })
+        listContactLists(mailboxUid, { limit: 200 }, client)
             .then(setLists)
             .catch((err) => setListsError(err instanceof ApiRequestError ? err.message : "Could not load contact lists."));
     }, [mailboxUid, refreshToken]);
@@ -140,7 +142,7 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             return;
         }
         try {
-            const created = await createContactList({ mailboxUid, name: newListName.trim() });
+            const created = await createContactList({ mailboxUid, name: newListName.trim() }, client);
             setLists((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
             setNewListName("");
             setAddingList(false);

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -1,103 +1,103 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { ChangeEvent, useRef } from "react";
-import {
-    HiOutlineArrowDownTray,
-    HiOutlineArrowUpTray,
-    HiOutlineEnvelope,
-    HiOutlinePencil,
-    HiOutlineStar,
-    HiOutlineTag,
-    HiOutlineTrash,
-    HiOutlineUserPlus,
-    HiStar,
-} from "react-icons/hi2";
-import { SHORTCUTS } from "../../keyboard/keymap.js";
-import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
-import ResponsiveToolbar, { ToolbarAction } from "../layout/ResponsiveToolbar.js";
-
-export interface ContactsToolbarProps {
-    selectedCount: number;
-    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
-     * to act (and read) as a removal instead of an addition. */
-    allSelectedFavorited: boolean;
-    onNewContact: () => void;
-    onEdit: () => void;
-    onDelete: () => void;
-    onEmail: () => void;
-    onToggleFavorite: () => void;
-    onAddCategory: () => void;
-    onExportVCard: () => void;
-    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
-     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
-    onImportFile: (file: File) => void;
-    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
-    shortcuts?: boolean;
-    /** Leaves the New contact button out - the phone layout offers it as a floating button instead. */
-    hideNew?: boolean;
-}
-
-/**
- * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
- * alone, then the rarely used actions - Import, Export, Add category, and so on up - in a "More" menu; the bar can never spill into the pane
- * beside it. Every button keeps its tooltip (New contact its shortcut's) and accessible name in every layout. Deliberately presentational — every action is a callback the
- * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
- * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
- * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
- * "+ New list" affordance next to the "Your contact lists" heading.
- */
-export default function ContactsToolbar({
-    selectedCount,
-    allSelectedFavorited,
-    onNewContact,
-    onEdit,
-    onDelete,
-    onEmail,
-    onToggleFavorite,
-    onAddCategory,
-    onExportVCard,
-    onImportFile,
-    shortcuts,
-    hideNew,
-}: ContactsToolbarProps) {
-    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
-    const importInputRef = useRef<HTMLInputElement | null>(null);
-    const hasSelection = selectedCount > 0;
-
-    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
-        const file = e.target.files?.[0];
-        e.target.value = "";
-        if (file) {
-            onImportFile(file);
-        }
-    }
-
-    const actions: ToolbarAction[] = [
-        ...(hideNew
-            ? []
-            : [{ id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true }]),
-        { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
-        { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
-        { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },
-        {
-            id: "favorite",
-            label: allSelectedFavorited ? "Unfavorite" : "Favorite",
-            icon: allSelectedFavorited ? HiStar : HiOutlineStar,
-            onClick: onToggleFavorite,
-            disabled: !hasSelection,
-            group: 2,
-            rank: 3,
-        },
-        { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
-        { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
-        { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
-    ];
-
-    return (
-        <ResponsiveToolbar label="Contacts actions" actions={actions}>
-            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
-        </ResponsiveToolbar>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ChangeEvent, useRef } from "react";
+import {
+    HiOutlineArrowDownTray,
+    HiOutlineArrowUpTray,
+    HiOutlineEnvelope,
+    HiOutlinePencil,
+    HiOutlineStar,
+    HiOutlineTag,
+    HiOutlineTrash,
+    HiOutlineUserPlus,
+    HiStar,
+} from "react-icons/hi2";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
+import ResponsiveToolbar, { ToolbarAction } from "../layout/ResponsiveToolbar.js";
+
+export interface ContactsToolbarProps {
+    selectedCount: number;
+    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
+     * to act (and read) as a removal instead of an addition. */
+    allSelectedFavorited: boolean;
+    onNewContact: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onEmail: () => void;
+    onToggleFavorite: () => void;
+    onAddCategory: () => void;
+    onExportVCard: () => void;
+    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
+     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
+    onImportFile: (file: File) => void;
+    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
+    /** Leaves the New contact button out - the phone layout offers it as a floating button instead. */
+    hideNew?: boolean;
+}
+
+/**
+ * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
+ * alone, then the rarely used actions - Import, Export, Add category, and so on up - in a "More" menu; the bar can never spill into the pane
+ * beside it. Every button keeps its tooltip (New contact its shortcut's) and accessible name in every layout. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({
+    selectedCount,
+    allSelectedFavorited,
+    onNewContact,
+    onEdit,
+    onDelete,
+    onEmail,
+    onToggleFavorite,
+    onAddCategory,
+    onExportVCard,
+    onImportFile,
+    shortcuts,
+    hideNew,
+}: ContactsToolbarProps) {
+    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
+    const importInputRef = useRef<HTMLInputElement | null>(null);
+    const hasSelection = selectedCount > 0;
+
+    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+            onImportFile(file);
+        }
+    }
+
+    const actions: ToolbarAction[] = [
+        ...(hideNew
+            ? []
+            : [{ id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true }]),
+        { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
+        { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
+        { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },
+        {
+            id: "favorite",
+            label: allSelectedFavorited ? "Unfavorite" : "Favorite",
+            icon: allSelectedFavorited ? HiStar : HiOutlineStar,
+            onClick: onToggleFavorite,
+            disabled: !hasSelection,
+            group: 2,
+            rank: 3,
+        },
+        { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
+        { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
+    ];
+
+    return (
+        <ResponsiveToolbar label="Contacts actions" actions={actions}>
+            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
+        </ResponsiveToolbar>
+    );
+}

package/apps/shared/components/contacts/KeyChangeReview.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { PinnedKeyChangedError, resolveKeyConflict, type KeyConflict } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { PinnedKeyChangedError, resolveKeyConflict, type KeyConflict } from "../../../../lib/crypto/keyvaultApi.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
 import { conflictSourceLabel, formatDate, groupFingerprint, keyChangeErrorMessage } from "./contactKeys.js";
 
 export interface KeyChangeReviewProps {

package/apps/shared/components/contacts/contactKeys.ts

@@ -4,9 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 /** Display and error helpers for a contact's pinned keys and key changes (`KeyChangeReview`, `ContactDetailPane`,
  * `MessageDetailPane`). */
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import type { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
-import { PinnedKeyChangedError, type KeyConflict, type PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import type { Contact } from "../../../../lib/contacts/contactsApi.js";
+import { PinnedKeyChangedError, type KeyConflict, type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
 
 export const KEY_CHANGE_STALE_MESSAGE = "This contact's keys changed while you were looking; reload to see the latest.";
 export const KEY_CHANGE_INVALID_MESSAGE =

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -4,11 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
-import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Drawer from "../../../../../lib/components/overlays/Drawer.js";
+import { Folder, Mailbox, listFolders, listMailboxes } from "../../../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "../../../../../lib/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
@@ -50,6 +51,7 @@ export default function ContactsShell({
     pluginNav,
     children,
 }: PropsWithChildren<ContactsShellProps>) {
+    const client = useApiClient();
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(null);
     const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
@@ -75,7 +77,7 @@ export default function ContactsShell({
         if (!userUid) {
             return;
         }
-        listMailboxes({ limit: 100 })
+        listMailboxes({ limit: 100 }, client)
             .then((result) => {
                 setMailboxes(orderMailboxes(result, userUid));
                 setStatus("ready");
@@ -96,7 +98,7 @@ export default function ContactsShell({
             return;
         }
         setFolderError(null);
-        listFolders(mailboxUid)
+        listFolders(mailboxUid, client)
             .then(setFolders)
             .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's contacts folder."));
     }, [mailboxUid]);