@rapidmx/web-client 0.10.0 → 0.12.0

package/apps/shared/components/admin/settings/PluginsManager.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useCallback, useEffect, useRef, useState } from "react";
+import React, { FormEvent, useCallback, useEffect, useId, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     addPlugin,
@@ -17,6 +17,8 @@ import {
     PluginChangePlan,
     PluginInstanceStatus,
     PluginNamespace,
+    PluginPurgeInfo,
+    PluginPurgeState,
     PluginRegistryLookup,
     PluginSearchResult,
     PluginSettingDefinition,
@@ -24,12 +26,16 @@ import {
     PluginStatus,
     PluginUpdateInfo,
     removePlugin,
+    RemovePluginResult,
+    retryPluginPurge,
     searchPlugins,
     updatePlugin,
 } from "@rapidmx/react-shared/admin/pluginsApi.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 { notify } from "../../../notifications/store.js";
+import { isElevationRequired } from "../elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -57,6 +63,23 @@ async function attempt(action: () => Promise<void>, failure: string): Promise<st
     }
 }
 
+/** The classes of a confirm button that deletes data, the same as the app's other destructive buttons. */
+const DANGER_BUTTON_CLASS = "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger";
+
+/** Shown when the server wants the administrator to have confirmed their identity recently (`api-104`). */
+const ELEVATION_MESSAGE = "Deleting data needs you to have recently confirmed your identity. Reload this page, or sign in again, then try once more.";
+
+/** What an administrator sees an uninstalled plugin's data deletion as, without the display name of a plugin that's gone. */
+const purgeName = (purge: PluginPurgeInfo): string => purge.displayName ?? purge.name;
+
+/** Why a data deletion failed: what the server recorded, else the steps that failed. */
+function purgeFailure(purge: PluginPurgeInfo): string {
+    return purge.error ?? (purge.steps.filter((step) => !step.ok).map((step) => step.error ?? step.step).join("; ") || "The reason wasn't recorded.");
+}
+
+/** A day, in the administrator's own format. */
+const formatDate = (iso: string): string => new Date(iso).toLocaleDateString(undefined, { dateStyle: "medium" });
+
 /** A change waiting for the administrator to confirm the other plugins it also installs or enables. */
 interface PendingChange {
     displayName: string;
@@ -116,6 +139,8 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     /** How many times status has been retried while none has ever been read. */
     const [statusRetries, setStatusRetries] = useState(0);
     const statusRequest = useRef<Promise<void> | null>(null);
+    /** The state each data deletion was last seen in, so a notification is raised when one that was under way ends. */
+    const seenPurges = useRef<Map<string, PluginPurgeState>>(new Map());
 
     const setBusy = (uid: string, busy: boolean) =>
         setBusyUids((prev) => {
@@ -171,8 +196,12 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     }, [refreshStatus, refreshUpdates]);
 
     const pending: boolean = !!status && status.instances.some((instance) => instance.hash !== status.hash);
+    // A plugin's data deletion in the status that isn't over yet, for a plugin that's uninstalled (one added again is hidden).
+    const installedNames: Set<string> = new Set(plugins.map((plugin) => plugin.name));
+    const purges: PluginPurgeInfo[] = (status?.purges ?? []).filter((purge) => !installedNames.has(purge.name));
+    const purging: boolean = purges.some((purge) => purge.state === "pending" || purge.state === "running");
     useEffect(() => {
-        if (!pending && pollUntil === 0) {
+        if (!pending && !purging && pollUntil === 0) {
             return;
         }
         const timer = setInterval(() => void refreshStatus(), PENDING_POLL_MS);
@@ -182,7 +211,29 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
             clearInterval(timer);
             clearTimeout(stop);
         };
-    }, [pending, pollUntil, refreshStatus]);
+    }, [pending, purging, pollUntil, refreshStatus]);
+
+    // A data deletion seen under way that has now ended is worth a notification: it happens after the servers restart,
+    // long after the administrator asked for it.
+    useEffect(() => {
+        for (const purge of status?.purges ?? []) {
+            const before = seenPurges.current.get(purge.uid);
+            seenPurges.current.set(purge.uid, purge.state);
+            if (before !== "pending" && before !== "running") {
+                continue;
+            }
+            if (purge.state === "done") {
+                notify({ kind: "success", title: `${purgeName(purge)}'s data was deleted`, dedupeKey: `plugin-purge-${purge.uid}-done` });
+            } else if (purge.state === "failed") {
+                notify({
+                    kind: "error",
+                    title: `Deleting ${purgeName(purge)}'s data failed`,
+                    message: purgeFailure(purge),
+                    dedupeKey: `plugin-purge-${purge.uid}-failed`,
+                });
+            }
+        }
+    }, [status]);
 
     // With no status read at all there's nothing pending to poll for, so keep retrying - less often each time.
     const neverRead: boolean = !status && statusStale;
@@ -298,6 +349,10 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
             async (plan) => {
                 const result = await addPlugin(name, packageVersion, expectedPlanOf(plan));
                 applied(...result.dependencies, result.plugin);
+                // Adding a plugin cancels the deletion of its data that was waiting for the servers to stop running it.
+                for (const warning of result.warnings ?? []) {
+                    notify({ kind: "warning", title: "Data deletion cancelled", message: warning });
+                }
             },
             `Could not install ${displayName}.`,
         );
@@ -328,6 +383,22 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
         return onRow(plugin, () => changeVersion(plugin, packageVersion));
     }
 
+    /** Runs the steps of a failed data deletion that failed, again. */
+    async function retryPurge(purge: PluginPurgeInfo) {
+        setBusy(purge.uid, true);
+        setError(null);
+        setRetryEnableUid(null);
+        try {
+            await retryPluginPurge(purge.uid);
+            // The retry starts on a server shortly; keep reading status until it ends.
+            setPollUntil(Date.now() + AFTER_CHANGE_POLL_MS);
+            await refreshStatus();
+        } catch (err) {
+            setError(isElevationRequired(err) ? ELEVATION_MESSAGE : errorMessage(err, `Could not retry deleting ${purgeName(purge)}'s data.`));
+        }
+        setBusy(purge.uid, false);
+    }
+
     // Retried against the plugin as it's listed now (a newer version, or already enabled elsewhere, hides the retry).
     const retryEnable: Plugin | undefined = plugins.find((plugin) => plugin.uid === retryEnableUid && !plugin.enabled);
 
@@ -398,7 +469,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
             </div>
             {loading ? (
                 <p className="text-sm text-text-muted">Loading&hellip;</p>
-            ) : plugins.length === 0 ? (
+            ) : plugins.length === 0 && purges.length === 0 ? (
                 <p className="text-sm text-text-muted">No plugins installed.</p>
             ) : (
                 <div className="overflow-x-auto">
@@ -492,6 +563,9 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                                     </tr>
                                 );
                             })}
+                            {purges.map((purge) => (
+                                <UninstalledPluginRow key={purge.uid} purge={purge} busy={busyUids.has(purge.uid)} onRetry={() => void retryPurge(purge)} />
+                            ))}
                         </tbody>
                     </table>
                 </div>
@@ -551,10 +625,23 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                 <RemoveModal
                     plugin={removing}
                     onClose={() => setRemoving(null)}
-                    onRemoved={() => {
+                    onRemoved={(result) => {
                         const uid = removing.uid;
+                        const displayName = removing.manifest.displayName;
                         setRemoving(null);
                         setPlugins((prev) => prev.filter((plugin) => plugin.uid !== uid));
+                        if (result.purgeScheduled) {
+                            // Shown at once; the status polling that follows replaces it with what the servers report.
+                            const scheduled = result.purge;
+                            setStatus((prev) =>
+                                prev && scheduled ? { ...prev, purges: [...(prev.purges ?? []).filter((purge) => purge.uid !== scheduled.uid), scheduled] } : prev,
+                            );
+                            notify({
+                                kind: "info",
+                                title: `${displayName} uninstalled`,
+                                message: "Its data is deleted once every server has stopped running it. Adding the plugin again before then cancels the deletion.",
+                            });
+                        }
                         watchRollout();
                     }}
                 />
@@ -811,6 +898,68 @@ function PluginServers({ plugin, status }: { plugin: Plugin; status: PluginStatu
     );
 }
 
+/** The row of a plugin that was uninstalled but whose data deletion is still listed: what became of its data. */
+function UninstalledPluginRow({ purge, busy, onRetry }: { purge: PluginPurgeInfo; busy: boolean; onRetry: () => void }) {
+    const failedSteps = purge.steps.filter((step) => !step.ok);
+    return (
+        <tr role="row" className={INSTALLED_ROW_CLASS}>
+            <td role="cell" className={`${INSTALLED_TD_CLASS} basis-full pt-3 pb-2`}>
+                <div className="font-semibold">{purgeName(purge)}</div>
+                <div className="text-xs text-text-muted">{purge.name}</div>
+            </td>
+            <td role="cell" className={`${INSTALLED_TD_CLASS} hidden lg:table-cell`} />
+            <td role="cell" className={`${INSTALLED_TD_CLASS} pt-1 pb-3 basis-full lg:basis-auto`}>
+                <div className="flex flex-col items-start gap-1 text-xs max-w-sm">
+                    <span className={`${BADGE_CLASS} bg-surface-alt text-text-muted`}>Uninstalled</span>
+                    {purge.state === "pending" && (
+                        <>
+                            <span>Uninstalled - data will be deleted after servers restart</span>
+                            {!!purge.serversRunning && (
+                                <span className="text-text-muted">
+                                    {purge.serversRunning} of {purge.serversTotal} {purge.serversTotal === 1 ? "server" : "servers"} still running it
+                                </span>
+                            )}
+                        </>
+                    )}
+                    {purge.state === "running" && <span>Uninstalled - deleting its data now</span>}
+                    {purge.state === "done" && <span className="text-success font-medium">Data deleted{purge.completedAt ? ` ${formatDate(purge.completedAt)}` : ""}</span>}
+                    {purge.state === "failed" && (
+                        <>
+                            <span className="text-danger break-words">Data deletion failed: {purgeFailure(purge)}</span>
+                            {failedSteps.length > 0 && (
+                                <ul className="list-disc pl-4 text-text-muted break-words">
+                                    {failedSteps.map((step) => (
+                                        <li key={step.step}>
+                                            {step.step}: {step.error ?? "failed"}
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </>
+                    )}
+                </div>
+            </td>
+            <td role="cell" className={`${INSTALLED_TD_CLASS} basis-full pt-1 pb-3`}>
+                {purge.state === "failed" && (
+                    <div className="flex lg:justify-end">
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            aria-label={`Retry deleting the data of ${purgeName(purge)}`}
+                            disabled={busy}
+                            loading={busy}
+                            onClick={onRetry}
+                        >
+                            Retry
+                        </Button>
+                    </div>
+                )}
+            </td>
+        </tr>
+    );
+}
+
 function AddPluginModal({
     open,
     onClose,
@@ -1252,37 +1401,91 @@ function SettingField({
     );
 }
 
-function RemoveModal({ plugin, onClose, onRemoved }: { plugin: Plugin; onClose: () => void; onRemoved: () => void }) {
+function RemoveModal({ plugin, onClose, onRemoved }: { plugin: Plugin; onClose: () => void; onRemoved: (result: RemovePluginResult) => void }) {
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
-
-    async function remove() {
+    const [purgeData, setPurgeData] = useState(false);
+    const [typed, setTyped] = useState("");
+    const helpId = useId();
+    const displayName = plugin.manifest.displayName;
+    // Deleting data is destructive and permanent, so it also takes the plugin's name typed out.
+    const confirmed = !purgeData || typed.trim().toLowerCase() === displayName.trim().toLowerCase();
+
+    async function remove(event: FormEvent) {
+        event.preventDefault();
         setBusy(true);
         setError(null);
         try {
-            await removePlugin(plugin.uid);
-            onRemoved();
+            onRemoved(await removePlugin(plugin.uid, { purgeData }));
         } catch (err) {
-            setError(errorMessage(err, "Could not uninstall the plugin."));
+            setError(isElevationRequired(err) ? ELEVATION_MESSAGE : errorMessage(err, "Could not uninstall the plugin."));
             setBusy(false);
         }
     }
 
     return (
-        <Modal open onClose={onClose} title={`Uninstall ${plugin.manifest.displayName}?`}>
-            {error && <Alert>{error}</Alert>}
-            <p className="text-sm mb-4">
-                The servers stop running this plugin after they restart. Data it stored stays in the database, and adding
-                the plugin again brings it back.
-            </p>
-            <div className="flex gap-2 justify-end">
-                <Button type="button" variant="secondary" className="!w-auto" onClick={onClose}>
-                    Cancel
-                </Button>
-                <Button type="button" className="!w-auto" loading={busy} disabled={busy} onClick={() => void remove()}>
-                    Uninstall
-                </Button>
-            </div>
+        <Modal open onClose={onClose} title={`Uninstall ${displayName}?`}>
+            <form onSubmit={(event) => void remove(event)}>
+                {error && <Alert>{error}</Alert>}
+                <p className="text-sm mb-4">
+                    {purgeData
+                        ? "The servers stop running this plugin after they restart, and then all the data it stored is deleted."
+                        : "The servers stop running this plugin after they restart. Data it stored stays in the database, and adding the plugin again brings it back."}
+                </p>
+                <div className="mb-4">
+                    <label className="flex items-start gap-2 text-sm font-semibold cursor-pointer">
+                        <input
+                            type="checkbox"
+                            className="mt-0.5 h-4 w-4 shrink-0 accent-danger"
+                            checked={purgeData}
+                            disabled={busy}
+                            aria-describedby={helpId}
+                            onChange={(e) => setPurgeData(e.target.checked)}
+                        />
+                        <span>Also delete all data this plugin stored</span>
+                    </label>
+                    <div id={helpId} className="mt-2 pl-6 text-xs text-text-muted">
+                        <p>What is deleted:</p>
+                        <ul className="list-disc pl-5 mt-1 space-y-0.5">
+                            <li>the database collections and tables the plugin&apos;s features use, with everything in them</li>
+                            <li>the plugin&apos;s saved settings</li>
+                            <li>its downloaded package and cached pages on the servers</li>
+                            <li>whatever else the plugin cleans up itself, such as files it stored or data kept outside the database</li>
+                        </ul>
+                        <p className="mt-2 text-danger font-semibold">This can&apos;t be undone.</p>
+                    </div>
+                </div>
+                {purgeData && (
+                    <>
+                        <p className="text-xs text-text-muted mb-3">
+                            Nothing is deleted while a server is still running the plugin. Once every server has restarted without it, usually
+                            within a few minutes, its data is deleted. Adding the plugin again before then cancels the deletion.
+                        </p>
+                        <label className="block text-sm mb-4">
+                            <span>
+                                Type <strong>{displayName}</strong> to confirm
+                            </span>
+                            <input
+                                type="text"
+                                className={`${INPUT_CLASS} mt-1.5`}
+                                value={typed}
+                                autoComplete="off"
+                                spellCheck={false}
+                                disabled={busy}
+                                onChange={(e) => setTyped(e.target.value)}
+                            />
+                        </label>
+                    </>
+                )}
+                <div className="flex gap-2 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button type="submit" className={purgeData ? DANGER_BUTTON_CLASS : "!w-auto"} loading={busy} disabled={busy || !confirmed}>
+                        {purgeData ? "Uninstall and delete data" : "Uninstall"}
+                    </Button>
+                </div>
+            </form>
         </Modal>
     );
 }

package/apps/shared/components/admin/setup/SetupWizard.tsx

@@ -391,7 +391,8 @@ function MailboxesStep({ userUid, domain }: { userUid: string; domain?: string }
     const [formKey, setFormKey] = useState(0);
 
     useEffect(() => {
-        listMailboxes({ limit: 100 })
+        // The administration scope: every mailbox that exists (administrative metadata), not only the administrator's own.
+        listMailboxes({ limit: 100, scope: "admin" })
             .then((list) =>
                 // Keep any mailbox created here while the list was loading.
                 setMailboxes((prev) => [...list, ...prev.filter((mine) => !list.some((mailbox) => mailbox.uid === mine.uid))]),

package/apps/shared/components/calendar/CalendarListSidebar.tsx

@@ -6,6 +6,7 @@ import React, { FormEvent, useState } from "react";
 import { CALENDAR_COLOR_PALETTE, accentColorForMailbox, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
 import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
 
 export interface CalendarListSidebarMailbox {
     mailbox: Mailbox;
@@ -42,7 +43,6 @@ export default function CalendarListSidebar({
     const [addingFor, setAddingFor] = useState<string | null>(null);
     const [name, setName] = useState("");
     const [color, setColor] = useState(CALENDAR_COLOR_PALETTE[0]);
-    const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     const multiple = mailboxCalendars.length > 1;
 
@@ -57,15 +57,15 @@ export default function CalendarListSidebar({
         if (!name.trim() || !addingFor) {
             return;
         }
-        setError(null);
         setSaving(true);
         try {
             await onAddCalendar(addingFor, name.trim(), color);
             setName("");
             setColor(CALENDAR_COLOR_PALETTE[0]);
             setAddingFor(null);
-        } catch {
-            setError("Could not create this calendar.");
+        } catch (err) {
+            // A pop-up; the form stays open, with what was typed, for another try.
+            notifyApiError(err, "Couldn't create the calendar");
         } finally {
             setSaving(false);
         }
@@ -107,7 +107,6 @@ export default function CalendarListSidebar({
 
     return (
         <nav aria-label="My calendars" className="p-3 border-t border-border flex flex-col gap-3">
-            {error && <Alert>{error}</Alert>}
             {mailboxCalendars.map(({ mailbox, calendarFolders, error: mailboxError }) => {
                 const title = multiple ? `${mailbox.displayName}${mailbox.ownerUserUid ? "" : " (shared)"}` : "My calendars";
                 return (

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

@@ -144,7 +144,11 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     }
 
     return (
-        <form onSubmit={handleSubmit} className="max-w-xl flex flex-col gap-1">
+        // The form fills the pane it is in: the fields scroll in their own area and Save / Cancel stay in view under them (`rr-solid`: opaque over a
+        // background image). Outside a bounded pane (the phone's page, which scrolls as a whole) the footer sticks above the bottom tab bar instead.
+        <form onSubmit={handleSubmit} className="@container flex min-h-0 flex-1 flex-col">
+            <div className="min-h-0 flex-1 overflow-y-auto p-6">
+            <div className="flex max-w-xl flex-col gap-1">
             <h1 className="text-xl font-bold uppercase tracking-wide mb-3">{contact ? "Edit contact" : "New contact"}</h1>
 
             {error && <Alert>{error}</Alert>}
@@ -177,7 +181,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 />
             </FormField>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 @md:grid-cols-2 gap-3">
                 <FormField label="First name" htmlFor="contact-givenName">
                     <input id="contact-givenName" type="text" className={INPUT_CLASS} value={givenName} onChange={(e) => setGivenName(e.target.value)} />
                 </FormField>
@@ -186,7 +190,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 </FormField>
             </div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 @md:grid-cols-2 gap-3">
                 <FormField label="Company" htmlFor="contact-company">
                     <input id="contact-company" type="text" className={INPUT_CLASS} value={company} onChange={(e) => setCompany(e.target.value)} />
                 </FormField>
@@ -291,7 +295,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 <div className="flex flex-col gap-3">
                     {addresses.map((address, i) => (
                         <div key={i} className="flex flex-col gap-2">
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                            <div className="grid grid-cols-1 @md:grid-cols-2 gap-2">
                                 <input
                                     type="text"
                                     placeholder="Street"
@@ -364,7 +368,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 <textarea id="contact-notes" rows={3} className={INPUT_CLASS} value={notes} onChange={(e) => setNotes(e.target.value)} />
             </FormField>
 
-            <div className="flex gap-3 mt-2">
+            </div>
+            </div>
+            <div className="rr-solid sticky bottom-14 z-10 flex shrink-0 gap-3 border-t border-border bg-surface px-6 py-3 md:bottom-0">
                 <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
                     Save
                 </Button>

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

@@ -7,6 +7,7 @@ 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 { notifyApiError } from "../../notifications/apiErrors.js";
 
 export type ContactsView =
     | { type: "all" }
@@ -144,7 +145,8 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             setNewListName("");
             setAddingList(false);
         } catch (err) {
-            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+            // A pop-up: `listsError` is only the lists' own load failure.
+            notifyApiError(err, "Couldn't create the list");
         }
     }
 
@@ -229,13 +231,13 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
         <>
             <button
                 type="button"
-                className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                className="lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
                 aria-label="Open contacts menu"
                 onClick={() => setDrawerOpen(true)}
             >
                 <HiOutlineBars3 size={20} aria-hidden="true" />
             </button>
-            <nav aria-label="Contacts" className="hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto">
+            <nav aria-label="Contacts" className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto">
                 {navContent("desktop")}
             </nav>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Contacts">

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

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ChangeEvent, useRef } from "react";
-import type { IconType } from "react-icons";
 import {
     HiOutlineArrowDownTray,
     HiOutlineArrowUpTray,
@@ -17,6 +16,7 @@ import {
 } 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;
@@ -37,40 +37,10 @@ export interface ContactsToolbarProps {
     shortcuts?: boolean;
 }
 
-function ToolbarButton({
-    label,
-    icon: Icon,
-    disabled,
-    onClick,
-    hint,
-}: {
-    label: string;
-    icon: IconType;
-    disabled?: boolean;
-    onClick: () => void;
-    /** `title` and `aria-keyshortcuts` for a button with a shortcut. */
-    hint?: { title: string; "aria-keyshortcuts"?: string };
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            disabled={disabled}
-            {...hint}
-            className="flex flex-col items-center gap-1 text-xs text-text-muted hover:text-text disabled:opacity-40 disabled:cursor-not-allowed px-2.5 py-1.5 rounded-sm hover:not-disabled:bg-surface-alt"
-        >
-            <Icon size={18} aria-hidden="true" />
-            <span>{label}</span>
-        </button>
-    );
-}
-
-function Divider() {
-    return <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />;
-}
-
 /**
- * Contacts' Outlook-style ribbon toolbar. Deliberately presentational — every action is a callback the
+ * 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
@@ -101,25 +71,28 @@ export default function ContactsToolbar({
         }
     }
 
+    const actions: ToolbarAction[] = [
+        { 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 (
-        <div role="toolbar" aria-label="Contacts actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
-            <ToolbarButton label="New contact" icon={HiOutlineUserPlus} onClick={onNewContact} hint={shortcuts ? newContactHint : undefined} />
-            <Divider />
-            <ToolbarButton label="Edit" icon={HiOutlinePencil} disabled={selectedCount !== 1} onClick={onEdit} />
-            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
-            <Divider />
-            <ToolbarButton label="Email" icon={HiOutlineEnvelope} disabled={!hasSelection} onClick={onEmail} />
-            <ToolbarButton
-                label={allSelectedFavorited ? "Unfavorite" : "Favorite"}
-                icon={allSelectedFavorited ? HiStar : HiOutlineStar}
-                disabled={!hasSelection}
-                onClick={onToggleFavorite}
-            />
-            <ToolbarButton label="Add category" icon={HiOutlineTag} disabled={!hasSelection} onClick={onAddCategory} />
-            <Divider />
-            <ToolbarButton label="Export" icon={HiOutlineArrowUpTray} disabled={!hasSelection} onClick={onExportVCard} />
-            <ToolbarButton label="Import" icon={HiOutlineArrowDownTray} onClick={() => importInputRef.current?.click()} />
+        <ResponsiveToolbar label="Contacts actions" actions={actions}>
             <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
-        </div>
+        </ResponsiveToolbar>
     );
 }

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

@@ -169,19 +169,24 @@ export default function ContactsShell({
             </>
         );
 
+        // The mailbox switcher (or an error) is all this column holds: with a single mailbox and no error there is nothing to put in it, and an empty
+        // 224 px column beside the contacts' own menu is wasted room.
+        const hasSidebar = mailboxes.length > 1 || !!folderError;
         inner = (
             <>
-                <aside className="hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3">
-                    {sidebarContent("desktop")}
-                </aside>
+                {hasSidebar && (
+                    <aside className="hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3">
+                        {sidebarContent("desktop")}
+                    </aside>
+                )}
                 <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Mailbox">
                     <div className="flex flex-col gap-3">{sidebarContent("mobile")}</div>
                 </Drawer>
                 <main className="flex-1 min-w-0 flex flex-col">
-                    {(mailboxes.length > 1 || folderError) && (
+                    {hasSidebar && (
                         <button
                             type="button"
-                            className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                            className="lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
                             aria-label="Open mailbox switcher"
                             onClick={() => setDrawerOpen(true)}
                         >