@rapidmx/web-client 0.26.0 → 0.28.0

package/dist/apps/shared/components/contacts/ContactForm.js

@@ -5,10 +5,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { createContact, updateContact, } from "../../../../lib/contacts/contactsApi.js";
+import { contactPhotoUrl, createContact, deleteContactPhoto, updateContact, uploadContactPhoto, } from "../../../../lib/contacts/contactsApi.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import ContactPhotoField from "./ContactPhotoField.js";
+import FavoriteStarButton from "./FavoriteStarButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
@@ -36,6 +38,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     // Every stored address is kept and editable - editing a contact must never silently drop addresses
     // beyond the first.
     const [addresses, setAddresses] = useState(contact?.addresses ?? []);
+    // A picture chosen (or the current one dropped) is applied once the contact itself is saved.
+    const [pickedPhoto, setPickedPhoto] = useState(null);
+    const [removePhoto, setRemovePhoto] = useState(false);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     function updateEmail(index, patch) {
@@ -107,6 +112,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     ...input,
                 }, client);
             }
+            if (pickedPhoto) {
+                saved = await uploadContactPhoto(saved.uid, saved.version, pickedPhoto);
+            }
+            else if (removePhoto && saved.photoBlobKey) {
+                saved = await deleteContactPhoto(saved.uid, saved.version, client);
+            }
             // A message opened later in this page load must see the changed contact's signing keys.
             clearPinnedSignerCache();
             onSaved(saved);
@@ -118,5 +129,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             setSaving(false);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "@container flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsxs("div", { className: "flex max-w-xl flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) })] }) }), _jsxs("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", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "@container flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: _jsxs("div", { className: "flex max-w-xl flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(ContactPhotoField, { displayName: displayName, email: emails[0]?.address, currentUrl: contact && contactPhotoUrl(contact), picked: pickedPhoto, removed: removePhoto, onPick: (file) => {
+                                            setPickedPhoto(file);
+                                            setRemovePhoto(false);
+                                            setError(null);
+                                        }, onRemove: () => {
+                                            setPickedPhoto(null);
+                                            setRemovePhoto(true);
+                                        }, onReject: setError }) }), _jsx(FavoriteStarButton, { favorite: favorite, onToggle: () => setFavorite((value) => !value) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) })] }) }), _jsxs("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", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
 }

package/dist/apps/shared/components/contacts/ContactPhotoField.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface ContactPhotoFieldProps {
+    displayName: string;
+    /** The contact's first address, for the Gravatar shown while they have no picture of their own. */
+    email?: string;
+    /** The picture the contact has now (`contactPhotoUrl()`), if any. */
+    currentUrl?: string;
+    /** The picture chosen to replace it, not uploaded until the contact is saved; `null` for none. */
+    picked: File | null;
+    /** Whether the current picture is to be removed when the contact is saved. */
+    removed: boolean;
+    onPick: (file: File) => void;
+    onRemove: () => void;
+    /** Called with the reason a chosen file was turned down. */
+    onReject: (message: string) => void;
+}
+/**
+ * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with "Change photo" and, when
+ * there is a picture of their own, "Remove photo". A file is checked here (type and size) and only uploaded when the form is saved.
+ */
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject }: ContactPhotoFieldProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/ContactPhotoField.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { CONTACT_PHOTO_MAX_BYTES, CONTACT_PHOTO_TYPES } from "../../../../lib/contacts/contactsApi.js";
+/**
+ * The picture of a contact in the edit form: the avatar as it is (their picture, else Gravatar, else initials) with "Change photo" and, when
+ * there is a picture of their own, "Remove photo". A file is checked here (type and size) and only uploaded when the form is saved.
+ */
+export default function ContactPhotoField({ displayName, email, currentUrl, picked, removed, onPick, onRemove, onReject }) {
+    const input = useRef(null);
+    const [preview, setPreview] = useState();
+    useEffect(() => {
+        if (!picked) {
+            setPreview(undefined);
+            return;
+        }
+        const url = URL.createObjectURL(picked);
+        setPreview(url);
+        return () => URL.revokeObjectURL(url);
+    }, [picked]);
+    function handleChange(file) {
+        if (!file) {
+            return;
+        }
+        if (!CONTACT_PHOTO_TYPES.includes(file.type)) {
+            onReject("Choose a JPEG, PNG, GIF or WebP image.");
+        }
+        else if (file.size > CONTACT_PHOTO_MAX_BYTES) {
+            onReject("Choose an image no larger than 1 MB.");
+        }
+        else {
+            onPick(file);
+        }
+    }
+    const shown = picked ? preview : removed ? undefined : currentUrl;
+    const hasOwn = !!picked || (!!currentUrl && !removed);
+    return (_jsxs("div", { className: "flex items-center gap-4 mb-3", children: [_jsx(ContactAvatar, { displayName: displayName || "?", size: 72, photoUrl: shown, email: picked || (currentUrl && !removed) ? undefined : email }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("input", { ref: input, type: "file", accept: CONTACT_PHOTO_TYPES.join(","), "aria-label": "Contact photo file", className: "sr-only", tabIndex: -1, onChange: (e) => {
+                            handleChange(e.target.files?.[0]);
+                            e.target.value = "";
+                        } }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-3 text-xs", onClick: () => input.current?.click(), children: hasOwn ? "Change photo" : "Add photo" }), hasOwn && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-3 text-xs", onClick: onRemove, children: "Remove photo" }))] })] }));
+}

package/dist/apps/shared/components/contacts/FavoriteStarButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FavoriteStarButtonProps {
+    favorite: boolean;
+    onToggle: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+/** The star that marks a contact as a favorite: filled when it is one. A toggle button (`aria-pressed`) named "Favorite". */
+export default function FavoriteStarButton({ favorite, onToggle, disabled, className }: FavoriteStarButtonProps): React.JSX.Element;

package/dist/apps/shared/components/contacts/FavoriteStarButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HiOutlineStar, HiStar } from "react-icons/hi2";
+/** The star that marks a contact as a favorite: filled when it is one. A toggle button (`aria-pressed`) named "Favorite". */
+export default function FavoriteStarButton({ favorite, onToggle, disabled, className }) {
+    return (_jsx("button", { type: "button", "aria-label": "Favorite", title: favorite ? "Remove from favorites" : "Add to favorites", "aria-pressed": favorite, disabled: disabled, onClick: onToggle, className: [
+            "inline-flex items-center justify-center rounded-sm p-1 hover:bg-surface-alt disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary",
+            favorite ? "text-warning" : "text-text-muted hover:text-text",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: favorite ? _jsx(HiStar, { "aria-hidden": "true", className: "size-6" }) : _jsx(HiOutlineStar, { "aria-hidden": "true", className: "size-6" }) }));
+}

package/dist/apps/shared/components/layout/AppShell.d.ts

@@ -4,6 +4,7 @@ import type { IconType } from "react-icons";
 import { NavItem } from "../../../../lib/components/navigation/BottomTabBar.js";
 import type { Branding } from "../../../../lib/branding/brandingApi.js";
 import { PluginNav, PluginNavProps } from "../../plugins/pluginNav.js";
+import { type ResolvedRailLinks } from "../../plugins/useResolvedRailItems.js";
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export declare const LOGOUT_TIMEOUT_MS = 3000;
 export type AppShellApp = "mail" | "calendar" | "contacts" | "tasks";
@@ -47,8 +48,8 @@ export interface AppDef {
     icon: IconType;
 }
 export declare const APPS: AppDef[];
-/** `APPS` followed by the plugins' `appRail` items (generic icon), core ids winning - see `mergePluginNavItems`. */
-export declare function appRailItems(pluginNav?: PluginNav): NavItem[];
+/** `APPS` followed by the plugins' `appRail` items (their manifest `icon`, or a generic one), core ids winning - see `mergePluginNavItems`. */
+export declare function appRailItems(pluginNav?: PluginNav, resolved?: ResolvedRailLinks): NavItem[];
 /** What only the persistent frame (`apps/www/_shell.tsx`) passes to the chrome it keeps mounted. */
 export interface AppChromeProps extends AppShellProps {
     /** The router is loading the next page - the content is `aria-busy`. */

package/dist/apps/shared/components/layout/AppShell.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import "../../styles/app.css";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlinePuzzlePiece, HiOutlineUsers, } from "react-icons/hi2";
+import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlineUsers, } from "react-icons/hi2";
 import { useRouter } from "@rapidrest/react/client";
 import { useSessionRefresh } from "../../../../lib/auth/session.js";
 import { getSetupStatus } from "../../../../lib/admin/setupApi.js";
@@ -27,7 +27,9 @@ import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localInde
 import { authApiFetch, setApiUnauthorizedObserver } from "../../../../lib/util/api.js";
 import { destroyUnlockedKeys } from "../../../../lib/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { pluginIcon } from "../../plugins/pluginIcons.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
+import { useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
 import { useInAppFrame } from "../../navigation/frameContext.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
 import { useNavigate } from "../../navigation/index.js";
@@ -77,9 +79,13 @@ export const APPS = [
 /** Ids plugin `appRail` items can't take besides `APPS`' own - `"settings"` has no rail icon but is still a
  * core `active` value. */
 const RESERVED_APP_IDS = ["settings"];
-/** `APPS` followed by the plugins' `appRail` items (generic icon), core ids winning - see `mergePluginNavItems`. */
-export function appRailItems(pluginNav) {
-    return mergePluginNavItems(APPS, pluginNav?.appRail, ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }), RESERVED_APP_IDS);
+/** `APPS` followed by the plugins' `appRail` items (their manifest `icon`, or a generic one), core ids winning - see `mergePluginNavItems`. */
+export function appRailItems(pluginNav, resolved = {}) {
+    // An entry worked out per user (`resolveFrom`) is there only for a user it was answered for, and links where the answer said; the others are as declared.
+    const shown = (pluginNav?.appRail ?? [])
+        .filter((item) => !item.resolveFrom || resolved[item.id] !== undefined)
+        .map((item) => (item.resolveFrom ? { ...item, href: resolved[item.id] } : item));
+    return mergePluginNavItems(APPS, shown, ({ id, href, label, icon }) => ({ id, href, label, icon: pluginIcon(icon) }), RESERVED_APP_IDS);
 }
 /**
  * The persistent chrome shared by every webmail app (Mail, Calendar, Contacts, Tasks): a left icon rail for
@@ -232,10 +238,12 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     // The router sets the document's title to the page's own whenever the page changes, which drops the unread count this puts in front
     // of it, so a new pathname is what puts the count back. (A folder change is shallow and keeps the title.)
     useUnreadTitle(inboxUnreadTotal(mail.mailboxFolders, mail.folderCounts.counts), { enabled: inFrame, resetKey: pathname });
+    // Plugin rail entries that depend on the user (the meet plugin's personal room) are asked for once they are signed in.
+    const resolvedRail = useResolvedRailItems(pluginNav?.appRail, userUid);
     if (!userUid) {
         return _jsx("div", { className: "min-h-screen" });
     }
-    const apps = appRailItems(pluginNav);
+    const apps = appRailItems(pluginNav, resolvedRail);
     // The header title: "settings" has no rail item, everything else is labelled by its own rail item.
     const activeLabel = active === "settings" ? "Settings" : apps.find((app) => app.id === active)?.label;
     // A custom header (`Branding.headerHtml`) replaces the app's own title bar and the icon at the top of the rail: it is the top of the app, and the

package/dist/apps/shared/components/mail/ConversationList.d.ts

@@ -30,9 +30,9 @@ export interface ConversationListProps {
      * conversation is what this list's rows are. A child row stays a plain "open this message" button - a
      * mixed conversation/message selection has no sensible bulk semantics (see `MailListToolbar`). */
     selectMode?: boolean;
-    /** The `conversationId`s currently ticked. */
+    /** The `conversationRowKey()`s currently ticked. */
     selectedConversationIds?: Set<string>;
-    onToggleSelected?: (conversation: ConversationSummary) => void;
+    onToggleSelected?: (conversation: ListedConversation) => void;
     /**
      * What swiping a parent row does on a phone: right to left archives the conversation (resolving whether it went through), left
      * to right asks where to move it. Absent, or `enabled: false` (a desktop), rows don't follow a finger.

package/dist/apps/shared/components/mail/ConversationList.js

@@ -104,7 +104,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             // list itself is arranged in. Copied before reversing - the fetched array is cached.
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
-            const ticked = selectedConversationIds?.has(conversation.conversationId) ?? false;
+            const ticked = selectedConversationIds?.has(id) ?? false;
             return (_jsxs("li", { children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
                                             uid: conversation.latestMessageUid,
                                             meetingMethod: conversation.latestMeetingMethod ?? undefined,

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -59,7 +59,7 @@ import { buildConversationPrintDocument, printDocument } from "./reading/printMe
 import { olderConversationMessages, printHeaders, printableOlderMessage } from "./reading/conversationPrint.js";
 import { fetchBodyContent } from "./reading/bodyContent.js";
 import { useViewOriginal } from "./reading/viewOriginal.js";
-import { ROW_FOCUS_CLASS, UnreadLabel, dateClass, senderClass } from "./unreadStyle.js";
+import { ROW_FOCUS_CLASS, dateClass, senderClass } from "./unreadStyle.js";
 /** Labels/styling for `specs/end-to-end_encryption.md`'s "Message Security Indicators" table - kept as
  * plain data (not JSX) so `SecurityIndicator` below stays a trivial lookup. "Signature failed" MUST NOT
  * read as a muted variant of "verified" (a failed signature is a stronger negative than no signature at
@@ -928,10 +928,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     : "This message can't be read, so it can't be printed";
     // In Junk Email the card's button is the way back (Not junk), which only needs the right to change the message.
     const reportReason = !writable ? "View-only mailbox" : undefined;
-    const card = (_jsxs(CardShell, { unread: cardUnread, children: [_jsxs("div", { className: ["flex flex-wrap items-start gap-x-3 gap-y-1 px-4 pt-3 pb-2", cardUnread ? "bg-primary/[0.07]" : ""].join(" "), children: [threadHeader ? (_jsx(ParticipantLink, { participant: { address: senderAddress, displayName: senderName }, context: cardContext, label: `Contact card for ${senderLabel}`, children: _jsx(SenderAvatar, { from: senderRecipient }) })) : (_jsx(SenderAvatar, { from: senderRecipient })), _jsxs("div", { className: "flex-1 min-w-[12rem]", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [threadHeader ? (_jsx("h2", { className: "min-w-0 flex-1", style: BODY_FONT_STYLE, children: _jsxs("button", { type: "button", ref: threadHeader.buttonRef, onClick: threadHeader.onToggle, "aria-expanded": true, "aria-controls": threadHeader.bodyId, className: [
-                                                "w-full text-left rounded-sm text-sm",
-                                                ROW_FOCUS_CLASS,
-                                            ].join(" "), children: [_jsx(UnreadLabel, { unread: cardUnread }), _jsx(MailAddress, { recipient: senderRecipient, className: senderClass(cardUnread) })] }) })) : (_jsxs("p", { className: "text-sm break-words min-w-0", children: ["From", " ", _jsx(ParticipantLink, { participant: { address: senderAddress, displayName: senderName }, context: cardContext, className: "font-semibold text-text", children: senderLabel })] })), security && _jsx(SecurityIndicator, { security: security })] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsx(RecipientLine, { label: "To", recipients: message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc"), context: cardContext }), _jsx(RecipientLine, { label: "Cc", recipients: message.recipients.filter((r) => r.type === "cc"), context: cardContext }), _jsx(RecipientLine, { label: "Bcc", recipients: message.recipients.filter((r) => r.type === "bcc"), context: cardContext })] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-1", children: [_jsx("time", { dateTime: message.receivedDate, className: ["text-xs mr-1", dateClass(cardUnread)].join(" "), children: new Date(message.receivedDate).toLocaleString() }), adaptable && (_jsx("button", { type: "button", "aria-label": "View original", "aria-pressed": viewOriginal, title: viewOriginal ? "Follow the theme" : "View original", onClick: () => setViewOriginal(!viewOriginal), className: [
+    const card = (_jsxs(CardShell, { unread: cardUnread, children: [_jsxs("div", { className: ["flex flex-wrap items-start gap-x-3 gap-y-1 px-4 pt-3 pb-2", cardUnread ? "bg-primary/[0.07]" : ""].join(" "), children: [_jsx(SenderAvatar, { from: senderRecipient }), _jsxs("div", { className: "flex-1 min-w-[12rem]", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [threadHeader ? (_jsxs("h2", { className: "relative min-w-0 flex-1", style: BODY_FONT_STYLE, children: [_jsx("button", { type: "button", ref: threadHeader.buttonRef, onClick: threadHeader.onToggle, "aria-expanded": true, "aria-controls": threadHeader.bodyId, "aria-label": `${cardUnread ? "Unread. " : ""}${senderLabel}`, className: ["absolute inset-0 w-full rounded-sm", ROW_FOCUS_CLASS].join(" ") }), _jsx("span", { className: "pointer-events-none relative flex text-sm", children: _jsx(ParticipantLink, { participant: { address: senderAddress, displayName: senderName }, context: cardContext, label: `Contact card for ${senderLabel}`, className: "pointer-events-auto min-w-0 max-w-full", children: _jsx(MailAddress, { recipient: senderRecipient, className: senderClass(cardUnread) }) }) })] })) : (_jsxs("p", { className: "text-sm break-words min-w-0", children: ["From", " ", _jsx(ParticipantLink, { participant: { address: senderAddress, displayName: senderName }, context: cardContext, className: "font-semibold text-text", children: senderLabel })] })), security && _jsx(SecurityIndicator, { security: security })] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsx(RecipientLine, { label: "To", recipients: message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc"), context: cardContext }), _jsx(RecipientLine, { label: "Cc", recipients: message.recipients.filter((r) => r.type === "cc"), context: cardContext }), _jsx(RecipientLine, { label: "Bcc", recipients: message.recipients.filter((r) => r.type === "bcc"), context: cardContext })] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-1", children: [_jsx("time", { dateTime: message.receivedDate, className: ["text-xs mr-1", dateClass(cardUnread)].join(" "), children: new Date(message.receivedDate).toLocaleString() }), adaptable && (_jsx("button", { type: "button", "aria-label": "View original", "aria-pressed": viewOriginal, title: viewOriginal ? "Follow the theme" : "View original", onClick: () => setViewOriginal(!viewOriginal), className: [
                                     "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt",
                                     viewOriginal ? "bg-primary/10" : "",
                                 ].join(" "), children: viewOriginal ? _jsx(HiOutlineMoon, { size: 16, "aria-hidden": "true" }) : _jsx(HiOutlineSun, { size: 16, "aria-hidden": "true" }) })), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true" }), label: "Reply", shortcut: keyboard ? SHORTCUTS.mail.reply : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("reply") }), _jsx(IconAction, { icon: _jsxs("span", { className: "inline-flex items-center", "aria-hidden": "true", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16 }), _jsx(HiOutlineArrowUturnLeft, { size: 16, className: "-ml-2.5" })] }), label: "Reply All", shortcut: keyboard ? SHORTCUTS.mail.replyAll : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", shortcut: keyboard ? SHORTCUTS.mail.forward : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("forward") }), archivable && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", shortcut: keyboard ? SHORTCUTS.mail.archive : undefined, busy: archiving, disabled: archiving, onClick: handleArchive })), movable && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", shortcut: keyboard ? SHORTCUTS.mail.move : undefined, onClick: () => setMovePrompt(true) })), reportable && (_jsx(IconAction, { icon: inJunk ? _jsx(HiOutlineInboxArrowDown, { size: 16, "aria-hidden": "true" }) : _jsx(HiOutlineNoSymbol, { size: 16, "aria-hidden": "true" }), label: inJunk ? "Not junk" : "Report junk", busy: messageActions.busy, disabled: messageActions.busy || reportReason !== undefined, reason: reportReason, onClick: () => void (inJunk ? messageActions.notJunk() : messageActions.reportJunk()) })), labels && labels.length > 0 && (_jsx(LabelMenuButton, { "aria-label": "Labels", label: "Labels", className: "border border-border py-1.5", labels: labels, mailboxUid: message.mailboxUid, onLabelCreated: onLabelCreated, applied: currentLabelsMessage.labelUids ?? [], onCommit: (labelUids) => void handleApplyLabels(labelUids), busy: savingLabels, note: "Ticked labels are applied to this message and unticked ones removed.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } })), archivable && (_jsx(MessageMoreMenu, { actions: menuActions, senderAddress: message.from.address, read: currentLabelsMessage.flags.read === true, flagged: currentLabelsMessage.flags.flagged === true, writable: writable, busy: messageActions.busy, inJunk: inJunk, inDeletedItems: inDeletedItems, sent: !!isSentItems, ownSender: readerOwnAddresses.includes(message.from.address.toLowerCase()), canTrustSender: writable, printReason: printReason, composing: preparingCompose, triggerClassName: ICON_BUTTON_CLASS }))] })] }), (answered || forwarded) && (_jsx("p", { className: "px-4 py-1.5 text-xs text-text-muted bg-surface-alt border-y border-border", children: answered && forwarded ? "You replied to and forwarded this message." : answered ? "You replied to this message." : "You forwarded this message." })), _jsxs("div", { id: threadHeader?.bodyId, className: "px-4 pb-3 flex flex-col gap-2", children: [inThread && (subjectDiffers || !sameSubject(shownSubject, threadSubject)) && (_jsx("h3", { className: "text-sm font-semibold break-words", children: shownSubject })), _jsx("div", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: sendingStatus }), inOutbox && message.scheduledSendError && _jsxs(Alert, { children: ["This message wasn\u2019t sent: ", message.scheduledSendError] }), cancelError && _jsx(Alert, { children: cancelError }), keyChangeNotice && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: keyChangeNotice })), security && UNVERIFIED_SIGNER_STATES.has(security.state) && (_jsxs("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["Signed, but the signer isn\u2019t a trusted contact key, so the sender isn\u2019t verified.", security.signerEmails && security.signerEmails.length > 0 && _jsxs(_Fragment, { children: [" Certificate for ", security.signerEmails.join(", "), "."] }), security.signerFingerprint && (_jsxs(_Fragment, { children: [" ", "Fingerprint ", _jsx("span", { className: "font-mono text-xs break-all", children: security.signerFingerprint }), "."] }))] })), pendingConflict && (_jsxs("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["This sender has a signing key change waiting for your review, so this signer can\u2019t be trusted from here.", " ", _jsx("a", { href: `/contacts/${encodeURIComponent(senderKeyState.contactUid)}`, className: "font-medium text-primary-dark hover:underline", children: "Review it in Contacts" })] })), trustableCertificate && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => {

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineArrowUturnLeft, HiOutlineBars3, HiOutlineEnvelopeOpen, HiOutlineFunnel, HiOutlineLockClosed, HiOutlineNoSymbol, HiOutlinePaintBrush, HiOutlinePencilSquare, HiOutlinePuzzlePiece, HiOutlineShieldCheck, HiOutlineTag, HiOutlineUserCircle, HiOutlineUsers, } from "react-icons/hi2";
+import { HiOutlineArrowUturnLeft, HiOutlineBars3, HiOutlineEnvelopeOpen, HiOutlineFunnel, HiOutlineLockClosed, HiOutlineNoSymbol, HiOutlinePaintBrush, HiOutlinePencilSquare, HiOutlineShieldCheck, HiOutlineTag, HiOutlineUserCircle, HiOutlineUsers, } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
 import Drawer from "../../../../../lib/components/overlays/Drawer.js";
 import { listMailboxes } from "../../../../../lib/mail/mailApi.js";
@@ -15,6 +15,7 @@ import AppShell from "../../layout/AppShell.js";
 import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
+import { pluginIcon } from "../../../plugins/pluginIcons.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
@@ -33,11 +34,11 @@ export const SETTINGS_SECTIONS = [
 /** `SETTINGS_SECTIONS` followed by the plugins' `settingsSections` items, core ids winning - see
  * `mergePluginNavItems`. */
 export function settingsSections(pluginNav) {
-    return mergePluginNavItems(SETTINGS_SECTIONS, pluginNav?.settingsSections, ({ id, href, label }) => ({
+    return mergePluginNavItems(SETTINGS_SECTIONS, pluginNav?.settingsSections, ({ id, href, label, icon }) => ({
         id,
         href,
         label,
-        icon: HiOutlinePuzzlePiece,
+        icon: pluginIcon(icon),
     }));
 }
 const SettingsShellContext = createContext({ mailboxes: [] });

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

@@ -5,6 +5,8 @@ import { EmptyFolderOutcome, PurgeOutcome } from "./permanentDelete.js";
 export interface EmptiableFolder {
     uid: string;
     name: string;
+    /** Every folder to empty, when "the folder" is the "All mailboxes" view of one type (each mailbox's own Deleted Items): `uid` is then the first of them. */
+    uids?: string[];
 }
 export interface PermanentDelete {
     /**

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

@@ -65,14 +65,19 @@ export function usePermanentDelete() {
             finish(outcome);
             return;
         }
-        let outcome;
-        try {
-            outcome = await purgeFolder(request.folder.uid, undefined, client);
-        }
-        catch (err) {
-            notifyApiError(err, `Couldn't empty ${request.folder.name}`);
-            // Part of it may have gone before the failure: the caller reloads rather than assume nothing did.
-            outcome = { emptied: false, deleted: [], failed: [] };
+        const outcome = { emptied: true, deleted: [], failed: [] };
+        for (const folderUid of request.folder.uids ?? [request.folder.uid]) {
+            try {
+                const one = await purgeFolder(folderUid, undefined, client);
+                outcome.emptied && (outcome.emptied = one.emptied);
+                outcome.deleted.push(...one.deleted);
+                outcome.failed.push(...one.failed);
+            }
+            catch (err) {
+                notifyApiError(err, `Couldn't empty ${request.folder.name}`);
+                // Part of it may have gone before the failure: the caller reloads rather than assume nothing did.
+                outcome.emptied = false;
+            }
         }
         afterDeleted(outcome.deleted);
         // The whole-folder request does not say which messages went, so the counts are read back rather than adjusted.

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

@@ -0,0 +1,10 @@
+import type { IconType } from "react-icons";
+/** The icon a plugin nav item gets when its manifest names none, or one that isn't in `PLUGIN_ICONS`. */
+export declare const DEFAULT_PLUGIN_ICON: IconType;
+/**
+ * The `react-icons/hi2` icons a plugin manifest's nav `icon` can name. A fixed list rather than the whole icon set: importing every
+ * icon by name would put all of them in the bundle. A plugin that needs another one gets it added here.
+ */
+export declare const PLUGIN_ICONS: Readonly<Record<string, IconType>>;
+/** The icon for a plugin nav item's `icon` name - see `PLUGIN_ICONS` - or `DEFAULT_PLUGIN_ICON`. */
+export declare function pluginIcon(name: string | undefined): IconType;

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

@@ -0,0 +1,64 @@
+import { HiOutlineAcademicCap, HiOutlineBanknotes, HiOutlineBeaker, HiOutlineBellAlert, HiOutlineBolt, HiOutlineBookOpen, HiOutlineBriefcase, HiOutlineBuildingOffice2, HiOutlineCalendarDays, HiOutlineChartBar, HiOutlineChartPie, HiOutlineChatBubbleLeftRight, HiOutlineClipboardDocumentCheck, HiOutlineCloud, HiOutlineCog6Tooth, HiOutlineCreditCard, HiOutlineCube, HiOutlineCurrencyDollar, HiOutlineDocumentText, HiOutlineEnvelopeOpen, HiOutlineFolderOpen, HiOutlineFunnel, HiOutlineGlobeAlt, HiOutlineHeart, HiOutlineIdentification, HiOutlineInboxStack, HiOutlineKey, HiOutlineLifebuoy, HiOutlineLightBulb, HiOutlineMap, HiOutlineMegaphone, HiOutlineNewspaper, HiOutlinePaperAirplane, HiOutlinePhone, HiOutlinePhoto, HiOutlinePresentationChartLine, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRectangleGroup, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShoppingCart, HiOutlineSparkles, HiOutlineSquares2X2, HiOutlineTag, HiOutlineTicket, HiOutlineTrophy, HiOutlineUserGroup, HiOutlineUsers, HiOutlineVideoCamera, HiOutlineWrenchScrewdriver, } from "react-icons/hi2";
+/** The icon a plugin nav item gets when its manifest names none, or one that isn't in `PLUGIN_ICONS`. */
+export const DEFAULT_PLUGIN_ICON = HiOutlinePuzzlePiece;
+/**
+ * The `react-icons/hi2` icons a plugin manifest's nav `icon` can name. A fixed list rather than the whole icon set: importing every
+ * icon by name would put all of them in the bundle. A plugin that needs another one gets it added here.
+ */
+export const PLUGIN_ICONS = {
+    HiOutlineAcademicCap,
+    HiOutlineBanknotes,
+    HiOutlineBeaker,
+    HiOutlineBellAlert,
+    HiOutlineBolt,
+    HiOutlineBookOpen,
+    HiOutlineBriefcase,
+    HiOutlineBuildingOffice2,
+    HiOutlineCalendarDays,
+    HiOutlineChartBar,
+    HiOutlineChartPie,
+    HiOutlineChatBubbleLeftRight,
+    HiOutlineClipboardDocumentCheck,
+    HiOutlineCloud,
+    HiOutlineCog6Tooth,
+    HiOutlineCreditCard,
+    HiOutlineCube,
+    HiOutlineCurrencyDollar,
+    HiOutlineDocumentText,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFolderOpen,
+    HiOutlineFunnel,
+    HiOutlineGlobeAlt,
+    HiOutlineHeart,
+    HiOutlineIdentification,
+    HiOutlineInboxStack,
+    HiOutlineKey,
+    HiOutlineLifebuoy,
+    HiOutlineLightBulb,
+    HiOutlineMap,
+    HiOutlineMegaphone,
+    HiOutlineNewspaper,
+    HiOutlinePaperAirplane,
+    HiOutlinePhone,
+    HiOutlinePhoto,
+    HiOutlinePresentationChartLine,
+    HiOutlinePuzzlePiece,
+    HiOutlineQueueList,
+    HiOutlineRectangleGroup,
+    HiOutlineRocketLaunch,
+    HiOutlineShieldCheck,
+    HiOutlineShoppingCart,
+    HiOutlineSparkles,
+    HiOutlineSquares2X2,
+    HiOutlineTag,
+    HiOutlineTicket,
+    HiOutlineTrophy,
+    HiOutlineUserGroup,
+    HiOutlineUsers,
+    HiOutlineVideoCamera,
+    HiOutlineWrenchScrewdriver,
+};
+/** The icon for a plugin nav item's `icon` name - see `PLUGIN_ICONS` - or `DEFAULT_PLUGIN_ICON`. */
+export function pluginIcon(name) {
+    return (name && Object.prototype.hasOwnProperty.call(PLUGIN_ICONS, name) ? PLUGIN_ICONS[name] : undefined) ?? DEFAULT_PLUGIN_ICON;
+}

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

@@ -8,6 +8,14 @@ export interface PluginUiNavItem {
     label: string;
     /** A same-origin path under the host's prefix (`/settings/...`, `/admin/...`, `/...`). */
     href: string;
+    /** A `react-icons/hi2` icon name from `PLUGIN_ICONS` (`pluginIcons.ts`); anything else shows the generic puzzle piece. */
+    icon?: string;
+    /**
+     * For an app-rail entry that depends on the signed-in user: an API path (without the `/api` prefix, e.g. `/mail/video-meetings/personal-room`)
+     * the shell requests for them. The entry is shown only when that answers `200 { href }` with a same-origin path, and links there instead of to
+     * `href`; anything else hides it. See `useResolvedRailItems()`.
+     */
+    resolveFrom?: string;
 }
 /**
  * The navigation every enabled plugin with a successfully built UI contributes, supplied by the server's

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

@@ -0,0 +1,12 @@
+import { type ApiClient } from "../../../lib/util/api.js";
+import { type PluginUiNavItem } from "./pluginNav.js";
+/** Where each app-rail entry that is worked out per user points, by entry id: only the entries the server answered for are here. */
+export type ResolvedRailLinks = Record<string, string>;
+/**
+ * Asks, once per signed-in user, for the entries of a plugin's app rail that are worked out per user (they name an API path in `resolveFrom` - the
+ * meet plugin's "Meet" button is one: it shows only for a user who has a personal room, and links to it). Each path is requested through
+ * `apiFetch()`; a `200` answering `{ href }` with a same-origin path puts that link in the result, and anything else (no such thing for this user, a
+ * server error, an answer that is not a path on this site) leaves the entry out, so a failing plugin never breaks the rail. Entries with no
+ * `resolveFrom` are not asked about. Nothing is requested without a signed-in user.
+ */
+export declare function useResolvedRailItems(items: PluginUiNavItem[] | undefined, userUid: string | undefined, client?: ApiClient): ResolvedRailLinks;

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

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { withClient } from "../../../lib/util/api.js";
+import { useApiClient } from "../../../lib/util/apiClientContext.js";
+import { isSafePluginHref } from "./pluginNav.js";
+/**
+ * Asks, once per signed-in user, for the entries of a plugin's app rail that are worked out per user (they name an API path in `resolveFrom` - the
+ * meet plugin's "Meet" button is one: it shows only for a user who has a personal room, and links to it). Each path is requested through
+ * `apiFetch()`; a `200` answering `{ href }` with a same-origin path puts that link in the result, and anything else (no such thing for this user, a
+ * server error, an answer that is not a path on this site) leaves the entry out, so a failing plugin never breaks the rail. Entries with no
+ * `resolveFrom` are not asked about. Nothing is requested without a signed-in user.
+ */
+export function useResolvedRailItems(items, userUid, client) {
+    const explicitClient = useApiClient();
+    const [links, setLinks] = useState({});
+    const asked = (items ?? []).filter((item) => typeof item?.resolveFrom === "string" && item.resolveFrom !== "");
+    // A list that is the same entries again (a new array on each render) does not start over.
+    const key = asked.map((item) => `${item.id}=${item.resolveFrom}`).join("|");
+    useEffect(() => {
+        if (!userUid || asked.length === 0) {
+            setLinks({});
+            return undefined;
+        }
+        let cancelled = false;
+        void Promise.all(asked.map(async (item) => {
+            try {
+                const answer = await withClient(client ?? explicitClient, item.resolveFrom);
+                return typeof answer?.href === "string" && isSafePluginHref(answer.href) ? [item.id, answer.href] : null;
+            }
+            catch {
+                return null;
+            }
+        })).then((results) => {
+            if (!cancelled) {
+                setLinks(Object.fromEntries(results.filter((entry) => entry !== null)));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // `asked` is derived from `key`.
+    }, [key, userUid, client, explicitClient]);
+    return links;
+}

package/dist/apps/www/contacts/[uid].js

@@ -72,7 +72,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 }) }));
+    return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref, onKeysChanged: handleKeysChanged, onChanged: setContact }) }));
 }
 export default ContactDetailPage;
 /** The tab's title: `Brand: Contacts` (see `pageTitle()`). */