@rapidmx/web-client 0.15.1 → 0.16.0

package/dist/apps/shared/components/calendar/EventFormParts.js

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
 import ResourcePicker from "./ResourcePicker.js";
@@ -31,27 +32,15 @@ export function VideoConferencingRow({ c }) {
     return (_jsxs(IconRow, { icon: _jsx(HiOutlineVideoCamera, { size: 20 }), children: [_jsxs("label", { className: "flex items-center gap-2 text-sm py-1.5", children: [_jsx("input", { type: "checkbox", checked: values.videoEnabled, onChange: (e) => c.update({ videoEnabled: e.target.checked }) }), "Add video conferencing"] }), values.videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), c.videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mb-1", children: c.videoError })), c.videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !c.joinUrl, onClick: () => window.open(c.joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !c.joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: c.organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }))] }));
 }
 /**
- * The guests field: an address box (Enter, a comma or a semicolon adds what is typed) and what has been added - chips in the quick popover,
- * rows with a role, the answer so far and a remove button in the full form, which also offers rooms and equipment.
+ * The guests field: compose's recipient field (`GuestInput`), which looks a name up among the contacts and the server's mailboxes and lists and
+ * turns what is picked, typed or pasted into chips - drawn in the field itself in the quick popover. In the full form the guests are rows with a
+ * role, the answer so far and a remove button instead (the field then draws only what is not an address), and rooms and equipment can be added.
  */
 export function GuestsField({ c, compact }) {
     const { values } = c;
-    const [hint, setHint] = useState(null);
     const [pickerOpen, setPickerOpen] = useState(false);
     const pickerAnchor = useRef(null);
-    function commit() {
-        const invalid = c.addGuests(values.guestDraft);
-        setHint(invalid.length > 0 ? `“${invalid[0]}” isn’t a valid email address.` : null);
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("input", { type: "text", "aria-label": "Add guests", placeholder: "Add guests", className: compact ? QUIET_INPUT_CLASS : INPUT_CLASS, value: values.guestDraft, onChange: (e) => {
-                    setHint(null);
-                    c.update({ guestDraft: e.target.value });
-                }, onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === "," || e.key === ";") {
-                        e.preventDefault();
-                        commit();
-                    }
-                } }), hint && (_jsx("p", { role: "alert", className: "text-xs text-danger", children: hint })), compact ? (values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-1.5", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5", children: [_jsx("span", { className: "truncate max-w-[16rem]", children: attendee.address }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, i))) }))) : (_jsxs(_Fragment, { children: [values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "w-7 h-7 shrink-0 rounded-full bg-primary/15 text-primary-dark text-xs font-semibold flex items-center justify-center uppercase", children: (attendee.displayName || attendee.address).charAt(0) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm truncate", children: attendee.displayName || attendee.address }), _jsxs("div", { className: "text-xs text-text-muted truncate", children: [attendee.displayName ? `${attendee.address} · ` : "", RESPONSE_STATUS_LABEL[attendee.responseStatus]] })] }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => c.updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }, i))) })), _jsx("button", { ref: pickerAnchor, type: "button", onClick: () => setPickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" }), pickerOpen && (_jsx(ResourcePicker, { anchorRef: pickerAnchor, onClose: () => setPickerOpen(false), onSelect: (mailbox) => {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(GuestInput, { id: "event-guests", label: "Add guests", placeholder: "Add guests", variant: compact ? "quiet" : "box", listedElsewhere: !compact, guests: values.attendees, invalid: values.guestInvalid, draft: values.guestDraft, skipAddresses: [c.organizerAddress], mailboxUid: values.targetMailboxUid, onChange: (next) => c.update({ attendees: next.guests, guestInvalid: next.invalid, guestDraft: next.draft }) }), compact ? null : (_jsxs(_Fragment, { children: [values.attendees.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: values.attendees.map((attendee, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "w-7 h-7 shrink-0 rounded-full bg-primary/15 text-primary-dark text-xs font-semibold flex items-center justify-center uppercase", children: (attendee.displayName || attendee.address).charAt(0) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm truncate", children: attendee.displayName || attendee.address }), _jsxs("div", { className: "text-xs text-text-muted truncate", children: [attendee.displayName ? `${attendee.address} · ` : "", RESPONSE_STATUS_LABEL[attendee.responseStatus]] })] }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => c.updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("button", { type: "button", onClick: () => c.removeAttendee(i), className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": `Remove attendee ${i + 1}`, children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }, i))) })), _jsx("button", { ref: pickerAnchor, type: "button", onClick: () => setPickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" }), pickerOpen && (_jsx(ResourcePicker, { anchorRef: pickerAnchor, onClose: () => setPickerOpen(false), onSelect: (mailbox) => {
                             c.addResource(mailbox);
                             setPickerOpen(false);
                         }, excludeAddresses: c.guestAddresses }))] }))] }));

package/dist/apps/shared/components/calendar/GuestInput.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Attendee } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import type { ContactSuggestionOptions, RecipientSuggestion } from "@rapidmx/react-shared/mail/directoryApi.js";
+declare const VARIANT_CLASS: {
+    /** Reads as plain text until it is hovered or focused, as the rows of the quick-create popover do. */
+    quiet: string;
+    /** A bordered box, as the full form's fields are. */
+    box: string;
+};
+/** What a guests field holds: the guests added, what was committed but is not an address (kept in the field, flagged, until it is fixed or removed),
+ * and what is still being typed. */
+export interface GuestEntries {
+    guests: Attendee[];
+    invalid: string[];
+    draft: string;
+}
+export interface GuestInputProps extends GuestEntries {
+    /** The input's id, and the prefix of its suggestions' ids. */
+    id: string;
+    /** The input's accessible name. */
+    label: string;
+    placeholder?: string;
+    variant: keyof typeof VARIANT_CLASS;
+    /** The guests are listed elsewhere (rows with a role and an answer): the field draws chips only for what is not an address. */
+    listedElsewhere?: boolean;
+    /** Addresses that are never added - the organizer's, or the people already invited. */
+    skipAddresses?: string[];
+    /** The mailbox the event is on, whose contacts are suggested too. */
+    mailboxUid?: string;
+    onChange: (next: GuestEntries) => void;
+    /** Loads suggestions; defaults to the lookup compose's recipient fields use. */
+    fetchSuggestions?: (query: string, options: ContactSuggestionOptions) => Promise<RecipientSuggestion[]>;
+    debounceMs?: number;
+}
+/**
+ * The guests field of an event: compose's recipient field (`RecipientInput`) reading its chips as guests. Typing looks the name up among the
+ * caller's contacts and the server's mailboxes and distribution lists; a suggestion (or an address, `Name <address>`, a comma, a semicolon,
+ * Enter or leaving the field) becomes a chip, a paste of several addresses becomes several, and something that is not an address stays as
+ * a flagged chip once it is committed - nothing is said while it is being typed. A distribution list is added as its own address, one guest
+ * (as compose sends to one), which the mail server delivers to its members.
+ *
+ * The field is controlled: `guests` are the attendees, and every edit hands back the whole of the entries (see `applyGuestChips()`).
+ */
+export default function GuestInput({ id, label, placeholder, variant, listedElsewhere, skipAddresses, mailboxUid, guests, invalid, draft, onChange, fetchSuggestions, debounceMs, }: GuestInputProps): React.JSX.Element;
+export {};

package/dist/apps/shared/components/calendar/GuestInput.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import RecipientInput from "../mail/compose/RecipientInput.js";
+import { applyGuestChips, guestChip } from "./eventFormat.js";
+/** Above the event dialog's own backdrop (`z-[1000]`), which the suggestions would otherwise sit under. */
+const DIALOG_SUGGESTIONS_Z_INDEX = 1100;
+const VARIANT_CLASS = {
+    /** Reads as plain text until it is hovered or focused, as the rows of the quick-create popover do. */
+    quiet: "w-full text-sm py-1 border-b border-transparent hover:border-border focus-within:border-primary",
+    /** A bordered box, as the full form's fields are. */
+    box: "w-full text-sm py-1.5 px-3 border border-border rounded-md bg-surface text-text focus-within:border-primary",
+};
+/** What `RecipientInput` calls `onChange` with; the entries come through `onEdit`. */
+const IGNORED = () => undefined;
+/**
+ * The guests field of an event: compose's recipient field (`RecipientInput`) reading its chips as guests. Typing looks the name up among the
+ * caller's contacts and the server's mailboxes and distribution lists; a suggestion (or an address, `Name <address>`, a comma, a semicolon,
+ * Enter or leaving the field) becomes a chip, a paste of several addresses becomes several, and something that is not an address stays as
+ * a flagged chip once it is committed - nothing is said while it is being typed. A distribution list is added as its own address, one guest
+ * (as compose sends to one), which the mail server delivers to its members.
+ *
+ * The field is controlled: `guests` are the attendees, and every edit hands back the whole of the entries (see `applyGuestChips()`).
+ */
+export default function GuestInput({ id, label, placeholder, variant, listedElsewhere, skipAddresses, mailboxUid, guests, invalid, draft, onChange, fetchSuggestions, debounceMs, }) {
+    const value = [...guests.map(guestChip), ...invalid, draft].filter((part) => part.length > 0).join(", ");
+    const listed = new Set(listedElsewhere ? guests.map(guestChip) : []);
+    return (_jsx(RecipientInput, { id: id, label: label, ariaLabel: label, listLabel: "Guests", placeholder: placeholder, className: VARIANT_CLASS[variant], dropdownZIndex: DIALOG_SUGGESTIONS_Z_INDEX, value: value, initialPending: draft, mailboxUid: mailboxUid, hideChip: (chip) => listed.has(chip), fetchSuggestions: fetchSuggestions, debounceMs: debounceMs, onChange: IGNORED, onEdit: (chips, pending) => {
+            const merged = applyGuestChips(guests, chips, skipAddresses);
+            onChange({ guests: merged.attendees, invalid: merged.invalid, draft: pending });
+        } }));
+}

package/dist/apps/shared/components/calendar/RequestChangeForm.js

@@ -13,6 +13,7 @@ import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { notify } from "../../notifications/store.js";
 import { INPUT_CLASS } from "./EventFormParts.js";
+import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import { descriptionProblem, initialDescriptionHtml } from "./eventDialogFields.js";
 import { mergeGuests } from "./eventFormat.js";
@@ -35,41 +36,29 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
     const [start, setStart] = useState(subject.startDate ? toDatetimeLocal(subject.startDate) : "");
     const [end, setEnd] = useState(subject.endDate ? toDatetimeLocal(subject.endDate) : "");
     const [descriptionHtml, setDescriptionHtml] = useState(() => initialDescriptionHtml(subject));
-    const [added, setAdded] = useState([]);
-    const [guestDraft, setGuestDraft] = useState("");
+    // The guests to add (not the ones already invited: `subject.guestAddresses` are skipped), what is flagged in the field, and what is being typed.
+    const [entries, setEntries] = useState({ guests: [], invalid: [], draft: "" });
     const [error, setError] = useState(null);
     const [sending, setSending] = useState(false);
     const heading = canChange ? "Request a change" : "Add guests";
-    /** Adds what was typed into the guests box, returning the guests as they now stand; a mistyped address stays in the box and is said. */
+    /** Adds what was typed into the guests box, returning the guests to add as they now stand; something that is not an address is said. */
     function addTypedGuests() {
-        const invited = [...subject.guestAddresses, ...added.map((guest) => guest.address)].map((address) => ({ address }));
-        const merged = mergeGuests(invited.map((guest) => ({ ...guest, role: "required", responseStatus: "needsAction", isOrganizer: false })), guestDraft);
+        const merged = mergeGuests(entries.guests, [...entries.invalid, entries.draft].join(", "), subject.guestAddresses);
         if (merged.invalid.length > 0) {
             setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
-            setGuestDraft(merged.invalid.join(" "));
             return undefined;
         }
-        setGuestDraft("");
-        return merged.attendees.slice(invited.length).map((guest) => ({ address: guest.address }));
-    }
-    function handleGuestKey(event) {
-        if (event.key === "Enter" || event.key === "," || event.key === ";") {
-            event.preventDefault();
-            setError(null);
-            const more = addTypedGuests();
-            if (more) {
-                setAdded((current) => [...current, ...more]);
-            }
-        }
+        setEntries({ guests: merged.attendees, invalid: [], draft: "" });
+        return merged.attendees;
     }
     async function handleSubmit(event) {
         event.preventDefault();
         setError(null);
-        const typed = canInvite ? addTypedGuests() : [];
-        if (!typed) {
+        const added = canInvite ? addTypedGuests() : [];
+        if (!added) {
             return;
         }
-        const guests = [...added, ...typed];
+        const guests = added.map((guest) => (guest.displayName ? { address: guest.address, displayName: guest.displayName } : { address: guest.address }));
         const request = {};
         if (canChange) {
             if (title.trim() !== subject.title.trim()) {
@@ -134,5 +123,5 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
             setSending(false);
         }
     }
-    return (_jsxs("form", { onSubmit: (event) => void handleSubmit(event), "aria-label": heading, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: heading }), _jsx("button", { type: "button", "aria-label": "Cancel request", onClick: onCancel, className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you." }), error && _jsx(Alert, { children: error }), canChange && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Title", _jsx("input", { type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Location", _jsx("input", { type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) })] }), canChangeTime && (_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Starts", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Ends", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), !canChangeTime && (_jsx("p", { className: "text-xs text-text-muted", children: subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer." })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium", children: "Description" }), _jsx(LazyDescriptionEditor, { value: descriptionHtml, onChange: setDescriptionHtml })] })] })), canInvite && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Guests to add", _jsx("input", { type: "text", className: INPUT_CLASS, placeholder: "name@example.com", value: guestDraft, onChange: (e) => setGuestDraft(e.target.value), onKeyDown: handleGuestKey })] }), added.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-1.5", children: added.map((guest, index) => (_jsxs("li", { className: "flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5", children: [_jsx("span", { className: "truncate max-w-[16rem]", children: guest.address }), _jsx("button", { type: "button", "aria-label": `Remove ${guest.address}`, onClick: () => setAdded((current) => current.filter((_, i) => i !== index)), className: "w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, guest.address))) }))] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "submit", loading: sending, disabled: sending, className: "!w-auto", children: "Send request" }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", disabled: sending, onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: (event) => void handleSubmit(event), "aria-label": heading, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: heading }), _jsx("button", { type: "button", "aria-label": "Cancel request", onClick: onCancel, className: "w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 16, "aria-hidden": "true" }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you." }), error && _jsx(Alert, { children: error }), canChange && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Title", _jsx("input", { type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Location", _jsx("input", { type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) })] }), canChangeTime && (_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Starts", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs font-medium", children: ["Ends", _jsx("input", { type: "datetime-local", className: INPUT_CLASS, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), !canChangeTime && (_jsx("p", { className: "text-xs text-text-muted", children: subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer." })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium", children: "Description" }), _jsx(LazyDescriptionEditor, { value: descriptionHtml, onChange: setDescriptionHtml })] })] })), canInvite && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: "request-guests", className: "text-xs font-medium", children: "Guests to add" }), _jsx(GuestInput, { id: "request-guests", label: "Guests to add", placeholder: "Name or name@example.com", variant: "box", skipAddresses: subject.guestAddresses, ...entries, onChange: setEntries })] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "submit", loading: sending, disabled: sending, className: "!w-auto", children: "Send request" }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", disabled: sending, onClick: onCancel, children: "Cancel" })] })] }));
 }

package/dist/apps/shared/components/calendar/eventForm.d.ts

@@ -22,6 +22,8 @@ export interface EventFormValues {
     attendees: Attendee[];
     /** What has been typed into the guests field but not added yet. */
     guestDraft: string;
+    /** What was committed to the guests field (Enter, a comma, leaving it) but is not an address: kept there, flagged, until it is fixed or removed. */
+    guestInvalid: string[];
     recurrenceRule: RecurrenceRule | null;
     /** Minutes before the start, as typed; blank means no reminder. */
     reminderMinutes: string;
@@ -57,8 +59,6 @@ export interface EventFormController {
     /** The address the event is organized from (the chosen mailbox's, for a new event). */
     organizerAddress: string;
     deviceZone: string;
-    /** Adds the addresses in `text`; returns the ones that are not valid addresses. */
-    addGuests: (text: string) => string[];
     updateAttendee: (index: number, patch: Partial<Attendee>) => void;
     removeAttendee: (index: number) => void;
     addResource: (mailbox: Mailbox) => void;

package/dist/apps/shared/components/calendar/eventFormat.d.ts

@@ -33,12 +33,24 @@ export type ReminderUnit = (typeof REMINDER_UNITS)[number]["unit"];
 export declare function bestReminderUnit(minutes: number): (typeof REMINDER_UNITS)[number];
 /** "Notify 30 minutes before" / "Notify 1 hour before" / "Notify at the start" for a stored reminder, or "No notification". */
 export declare function describeReminder(minutes: number | undefined): string;
-/** Splits what was typed into the guests field into its addresses: commas, semicolons and white space separate them. */
-export declare function splitGuestInput(text: string): string[];
-/** The loosest address check that is still worth making before an invitation is sent: something, an @, something. */
-export declare function isValidGuestAddress(address: string): boolean;
 /** An attendee as the guests field adds one. */
-export declare function newGuest(address: string): Attendee;
+export declare function newGuest(address: string, displayName?: string): Attendee;
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export declare function guestChip(guest: {
+    address: string;
+    displayName?: string;
+}): string;
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export declare function applyGuestChips(current: Attendee[], chips: string[], skipAddresses?: string[]): {
+    attendees: Attendee[];
+    invalid: string[];
+};
 /** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
  * itself parses such a string in, which needs no conversion. */
 export declare function wallStringToMs(value: string, zone: string, deviceZone: string): number;
@@ -55,9 +67,10 @@ export declare function localDateFromKey(key: string): Date;
 export declare function formatWhen(start: Date, end: Date, allDay: boolean, now?: Date): string;
 /** `formatWhen()` for a stored event: instants for a timed one, the date-only keys (with the exclusive end) for an all-day one. */
 export declare function formatStoredWhen(startDate: string, endDate: string, allDay: boolean, now?: Date): string;
-/** Adds the addresses typed into the guests field to `current`: an address already on the list (in any case) is skipped, and what is not an
- * address comes back as `invalid` for the field to keep. */
-export declare function mergeGuests(current: Attendee[], text: string): {
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export declare function mergeGuests(current: Attendee[], text: string, skipAddresses?: string[]): {
     attendees: Attendee[];
     invalid: string[];
 };

package/dist/apps/shared/components/calendar/eventFormat.js

@@ -5,6 +5,7 @@
 import { format } from "date-fns";
 import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { formatRecipient, isValidRecipientAddress, parseRecipient, splitRecipientList } from "../mail/compose/recipients.js";
 import { addDaysToKey, allDayDateKey } from "./allDay.js";
 /** What the event form and the read-only event view both need to say about a busy status / an answer. */
 export const BUSY_STATUSES = ["busy", "free", "tentative", "oof"];
@@ -70,17 +71,52 @@ export function describeReminder(minutes) {
     const amount = minutes / unit.factor;
     return `Notify ${amount} ${amount === 1 ? unit.singular : unit.unit} before`;
 }
-/** Splits what was typed into the guests field into its addresses: commas, semicolons and white space separate them. */
-export function splitGuestInput(text) {
-    return text.split(/[,;\s]+/).filter(Boolean);
+/** An attendee as the guests field adds one. */
+export function newGuest(address, displayName) {
+    return { address, ...(displayName ? { displayName } : {}), role: "required", responseStatus: "needsAction", isOrganizer: false };
 }
-/** The loosest address check that is still worth making before an invitation is sent: something, an @, something. */
-export function isValidGuestAddress(address) {
-    return /^[^\s@<>,;]+@[^\s@<>,;]+$/.test(address);
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export function guestChip(guest) {
+    return formatRecipient({ address: guest.address, displayName: guest.displayName });
 }
-/** An attendee as the guests field adds one. */
-export function newGuest(address) {
-    return { address, role: "required", responseStatus: "needsAction", isOrganizer: false };
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export function applyGuestChips(current, chips, skipAddresses = []) {
+    const skip = new Set(skipAddresses.map((address) => address.toLowerCase()));
+    const attendees = [];
+    const invalid = [];
+    const known = (address) => current.find((guest) => guest.address.toLowerCase() === address.toLowerCase());
+    const listed = (address) => attendees.some((guest) => guest.address.toLowerCase() === address.toLowerCase());
+    function add(address, displayName) {
+        const existing = known(address);
+        if (existing) {
+            if (!listed(address)) {
+                attendees.push(existing);
+            }
+        }
+        else if (!skip.has(address.toLowerCase()) && !listed(address)) {
+            attendees.push(newGuest(address, displayName));
+        }
+    }
+    for (const chip of chips) {
+        const { address, displayName } = parseRecipient(chip);
+        const parts = chip.trim().split(/\s+/);
+        if (isValidRecipientAddress(address) || known(address)) {
+            add(address, displayName);
+        }
+        else if (parts.length > 1 && parts.every(isValidRecipientAddress)) {
+            parts.forEach((part) => add(part));
+        }
+        else if (!invalid.includes(chip.trim())) {
+            invalid.push(chip.trim());
+        }
+    }
+    return { attendees, invalid };
 }
 /** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
  * itself parses such a string in, which needs no conversion. */
@@ -133,20 +169,11 @@ export function formatStoredWhen(startDate, endDate, allDay, now = new Date()) {
     }
     return formatWhen(new Date(startDate), new Date(endDate), false, now);
 }
-/** Adds the addresses typed into the guests field to `current`: an address already on the list (in any case) is skipped, and what is not an
- * address comes back as `invalid` for the field to keep. */
-export function mergeGuests(current, text) {
-    const attendees = [...current];
-    const invalid = [];
-    for (const token of splitGuestInput(text)) {
-        if (!isValidGuestAddress(token)) {
-            invalid.push(token);
-        }
-        else if (!attendees.some((a) => a.address.toLowerCase() === token.toLowerCase())) {
-            attendees.push(newGuest(token));
-        }
-    }
-    return { attendees, invalid };
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export function mergeGuests(current, text, skipAddresses = []) {
+    return applyGuestChips(current, [...current.map(guestChip), ...splitRecipientList(text)], skipAddresses);
 }
 /** `formatWhen()` for the form's own wall-clock strings (an all-day event's `end` is its inclusive last day); a message while either is empty. */
 export function formatFormWhen(start, end, allDay, now = new Date()) {

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -12,6 +12,7 @@ import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedbac
 import AppShell from "../../layout/AppShell.js";
 import { useLocationSearch } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const CalendarShellContext = createContext({
     calendarFolders: [],
     mailboxCalendars: [],
@@ -49,7 +50,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -57,7 +58,7 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
             setStatus("error");
         });
     }, [userUid]);
-    const ownMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
+    const ownMailboxUid = primaryMailboxUid(mailboxes, userUid);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
         ownMailboxUid;
     useEffect(() => {

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

@@ -103,5 +103,5 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     // `Drawer` (see MailShell/ContactsShell for the identical pattern and the duplicate-id reasoning
     // behind the `idPrefix`).
     const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", 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), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("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", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", 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), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("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", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

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

@@ -16,6 +16,8 @@ export interface ContactsToolbarProps {
     onImportFile: (file: File) => void;
     /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
     shortcuts?: boolean;
+    /** Leaves the New contact button out - the phone layout offers it as a floating button instead. */
+    hideNew?: boolean;
 }
 /**
  * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
@@ -26,4 +28,4 @@ export interface ContactsToolbarProps {
  * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
  * "+ New list" affordance next to the "Your contact lists" heading.
  */
-export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, }: ContactsToolbarProps): React.JSX.Element;
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, hideNew, }: ContactsToolbarProps): React.JSX.Element;

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

@@ -17,7 +17,7 @@ import ResponsiveToolbar from "../layout/ResponsiveToolbar.js";
  * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
  * "+ New list" affordance next to the "Your contact lists" heading.
  */
-export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, }) {
+export default function ContactsToolbar({ selectedCount, allSelectedFavorited, onNewContact, onEdit, onDelete, onEmail, onToggleFavorite, onAddCategory, onExportVCard, onImportFile, shortcuts, hideNew, }) {
     const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
     const importInputRef = useRef(null);
     const hasSelection = selectedCount > 0;
@@ -29,7 +29,9 @@ export default function ContactsToolbar({ selectedCount, allSelectedFavorited, o
         }
     }
     const actions = [
-        { id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true },
+        ...(hideNew
+            ? []
+            : [{ id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true }]),
         { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
         { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
         { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },

package/dist/apps/shared/components/contacts/layout/ContactsShell.js

@@ -13,6 +13,7 @@ import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedbac
 import AppShell from "../../layout/AppShell.js";
 import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 const ContactsShellContext = createContext({ mailboxes: [] });
 /** Reads the mailbox/folder Contacts is currently showing, as resolved by the enclosing `ContactsShell`. */
 export function useContactsShell() {
@@ -51,7 +52,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
         }
         listMailboxes({ limit: 100 })
             .then((result) => {
-            setMailboxes(result);
+            setMailboxes(orderMailboxes(result, userUid));
             setStatus("ready");
         })
             .catch((err) => {
@@ -60,7 +61,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
         });
     }, [userUid]);
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+        primaryMailboxUid(mailboxes, userUid);
     useEffect(() => {
         if (!mailboxUid) {
             setFolders([]);
@@ -100,7 +101,7 @@ export default function ContactsShell({ userUid, authServerUrl, impersonating, i
         // 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 = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", 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), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", 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), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(ContactsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "contacts", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

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

@@ -0,0 +1,13 @@
+import React, { ButtonHTMLAttributes } from "react";
+import type { IconType } from "react-icons";
+export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children" | "className" | "type"> {
+    /** The button's accessible name (it shows only the icon). */
+    label: string;
+    icon: IconType;
+}
+/**
+ * The phone layout's primary action - "New message" in Mail, "New event" in Calendar, "New contact" in Contacts - as a small round accent button
+ * floating at the bottom right, just above the bottom tab bar (which is `h-14`, fixed). A real `<button>` named by `label`; hidden from `md` up,
+ * where each page keeps its own toolbar button. Any other button attribute (`onPointerEnter`, `onFocus`, ...) is passed through.
+ */
+export default function FloatingActionButton({ label, icon: Icon, ...rest }: FloatingActionButtonProps): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The phone layout's primary action - "New message" in Mail, "New event" in Calendar, "New contact" in Contacts - as a small round accent button
+ * floating at the bottom right, just above the bottom tab bar (which is `h-14`, fixed). A real `<button>` named by `label`; hidden from `md` up,
+ * where each page keeps its own toolbar button. Any other button attribute (`onPointerEnter`, `onFocus`, ...) is passed through.
+ */
+export default function FloatingActionButton({ label, icon: Icon, ...rest }) {
+    return (_jsx("button", { ...rest, type: "button", "aria-label": label, className: "md:hidden fixed right-4 bottom-[4.5rem] z-30 w-12 h-12 flex items-center justify-center rounded-full bg-primary text-white shadow-lg hover:bg-primary-dark", children: _jsx(Icon, { size: 22, "aria-hidden": "true" }) }));
+}

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

@@ -32,6 +32,9 @@ export interface UserMenuProps {
     placement?: "down" | "up";
     /** Shows a "Recent notifications" item that calls this - opening the history of the last pop-ups (`AppChrome` only). */
     onShowNotifications?: () => void;
+    /** Shows a "Back to mail" item, first in the menu, linking to the main application (`/`, on this same host). For the consoles
+     * (`AdminShell`), which are a step away from the app; the app itself has no need of it. */
+    showMailLink?: boolean;
     /** Errors in that history nobody has looked at yet: a count beside the item, and a dot on the menu button. */
     unseenErrors?: number;
 }
@@ -47,4 +50,4 @@ export interface UserMenuProps {
  * (auth-server's CORS list not including this origin, or no profile document at all - a 404 for some accounts) and none
  * ever surfaces as an error. The avatar image comes from the profile alone.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, placement, onShowNotifications, unseenErrors, }: UserMenuProps): React.JSX.Element;
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, placement, onShowNotifications, showMailLink, unseenErrors, }: UserMenuProps): React.JSX.Element;

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
-import { HiOutlineShieldCheck } from "react-icons/hi2";
+import { HiOutlineArrowUturnLeft, HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
 import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
@@ -14,8 +14,9 @@ import { DEFAULT_TRUSTED_ROLES, lookUpAdminAccess } from "../../auth/adminAccess
 import { ariaKeyShortcuts } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
-import { SETTINGS_HREF } from "../../navigation/appHrefs.js";
+import { APP_HREFS, SETTINGS_HREF } from "../../navigation/appHrefs.js";
 import { MailConnectionContext } from "../../mail/useMailConnection.js";
+import { ownMailboxes } from "../../mail/primaryMailbox.js";
 import ThemeSwitch from "./ThemeSwitch.js";
 import { desktopPermission, requestDesktopPermission, setDesktopOfferDismissed, } from "../../mail/newMailNotifications.js";
 import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
@@ -39,7 +40,7 @@ function Avatar({ profile, initials, large }) {
  * (auth-server's CORS list not including this origin, or no profile document at all - a 404 for some accounts) and none
  * ever surfaces as an error. The avatar image comes from the profile alone.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, unseenErrors = 0, }) {
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, showMailLink, unseenErrors = 0, }) {
     const env = useKeyEnvironment();
     // A phone has no keyboard to speak of, so the shortcuts list (and the dialog it opens) has nothing to offer there.
     const isMobile = useIsMobile();
@@ -101,7 +102,7 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const listed = framed ? (connection.status === "checking" ? null : connection.mailboxes) : ownListing;
     const mailboxesKnown = listed !== null;
     // Only a mailbox the caller owns counts: a shared or delegated one carries somebody else's name.
-    const mailboxName = needsFallbackName ? listed?.find((mb) => mb.ownerUserUid === userUid)?.displayName?.trim() || undefined : undefined;
+    const mailboxName = needsFallbackName ? ownMailboxes(listed ?? [], userUid)[0]?.displayName?.trim() || undefined : undefined;
     useEffect(() => {
         if (!authServerUrl || !needsFallbackName || !mailboxesKnown || mailboxName) {
             return;
@@ -203,7 +204,7 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const accountUrl = accountUrlOf(authServerUrl);
     return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "relative flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), unseenErrors > 0 && (_jsx("span", { "data-testid": "unseen-errors-dot", "aria-hidden": "true", className: "absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full border-2 border-surface bg-danger" })), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open &&
                 anchor &&
-                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Notifications" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Notifications" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
                                 setOpen(false);
                                 onShowNotifications();
                             }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Recent notifications" }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {