@rapidmx/web-client 0.14.1 → 0.16.0

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/calendar/swipeNavigation.d.ts

@@ -0,0 +1,9 @@
+import type { SwipeDirection } from "../../gestures/useSwipe.js";
+/**
+ * What a horizontal swipe on the phone layout's calendar does, as the direction the visible period moves: `-1` is the previous
+ * month/week/day, `1` the next. This is the one place that mapping lives, so it flips in a single line.
+ *
+ * Swiping left (finger right to left) shows the next period and swiping right shows the previous, as most calendar apps do: the page is
+ * dragged along with the finger, and what was to its right comes in.
+ */
+export declare const SWIPE_PERIOD_SHIFT: Readonly<Record<SwipeDirection, 1 | -1>>;

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

@@ -0,0 +1,8 @@
+/**
+ * What a horizontal swipe on the phone layout's calendar does, as the direction the visible period moves: `-1` is the previous
+ * month/week/day, `1` the next. This is the one place that mapping lives, so it flips in a single line.
+ *
+ * Swiping left (finger right to left) shows the next period and swiping right shows the previous, as most calendar apps do: the page is
+ * dragged along with the finger, and what was to its right comes in.
+ */
+export const SWIPE_PERIOD_SHIFT = { left: 1, right: -1 };

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

@@ -21,17 +21,20 @@ export interface UserMenuProps {
      * `/settings/auto-reply`, the only settings section that exists today; repoint this at a real
      * `/settings` landing page once a second section (Mail Filters, Signatures) makes one worth building. */
     showSettingsLink?: boolean;
-    /** Shows the new-mail notification controls, above "Admin Console"/"Sign Out": a "New mail pop-ups" on/off switch and, while
-     * the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `newMailNotifications.ts`).
-     * For the shells that announce new mail (Mail); the consoles have nothing to announce. */
+    /** Shows the notification controls, above "Admin Console"/"Sign Out": a "Notifications" on/off switch for every pop-up and,
+     * while the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `notifications/preferences.ts`
+     * and `newMailNotifications.ts`). For the shells that draw pop-ups (`AppShell`). */
     showNotificationSettings?: boolean;
-    /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too). For the shells that have the
+    /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too); not on the phone layout. For the shells that have the
      * keyboard layer (`AppChrome`); the consoles don't offer it. */
     onShowShortcuts?: () => void;
     /** Which way the menu opens from its button: `"down"` (the default; in a header) or `"up"` (in a footer, where there is no room below). */
     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;
 }
@@ -40,9 +43,11 @@ export interface UserMenuProps {
  * trigger that opens a dropdown showing the caller's avatar/name, an "Account" link to auth-server's account page,
  * an optional "Settings" and "Admin Console" link, and "Sign Out". This service has no local user directory (see
  * `.claude/NOTES.md`), so the name and avatar come from auth-server, and the displayed name (and the initials badge)
- * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the caller's username - their first
- * verified `name` alias (`GET /api/aliases?type=name`, asked for only when the profile gave no name) - else the bare
- * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
- * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
+ * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the display name of the mailbox the
+ * caller owns (`listMailboxes()`, or the list the app frame already holds; a shared or delegated mailbox does not count), else the caller's username - their first
+ * verified `name` alias (`GET /api/aliases?type=name`) - else the bare uid. The mailbox and the username are asked for
+ * only when the profile gave no name, and the username only when the mailbox gave none. Every lookup can fail
+ * (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

@@ -3,18 +3,24 @@ 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, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { HiOutlineShieldCheck } from "react-icons/hi2";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+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";
 import { DEFAULT_TRUSTED_ROLES, lookUpAdminAccess } from "../../auth/adminAccess.js";
 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, getNewMailPopupsEnabled, requestDesktopPermission, setDesktopOfferDismissed, setNewMailPopupsEnabled, } from "../../mail/newMailNotifications.js";
+import { desktopPermission, requestDesktopPermission, setDesktopOfferDismissed, } from "../../mail/newMailNotifications.js";
+import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import { dismissAll } from "../../notifications/store.js";
 function Avatar({ profile, initials, large }) {
     const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
     if (profile?.avatar) {
@@ -27,13 +33,17 @@ function Avatar({ profile, initials, large }) {
  * trigger that opens a dropdown showing the caller's avatar/name, an "Account" link to auth-server's account page,
  * an optional "Settings" and "Admin Console" link, and "Sign Out". This service has no local user directory (see
  * `.claude/NOTES.md`), so the name and avatar come from auth-server, and the displayed name (and the initials badge)
- * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the caller's username - their first
- * verified `name` alias (`GET /api/aliases?type=name`, asked for only when the profile gave no name) - else the bare
- * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
- * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
+ * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the display name of the mailbox the
+ * caller owns (`listMailboxes()`, or the list the app frame already holds; a shared or delegated mailbox does not count), else the caller's username - their first
+ * verified `name` alias (`GET /api/aliases?type=name`) - else the bare uid. The mailbox and the username are asked for
+ * only when the profile gave no name, and the username only when the mailbox gave none. Every lookup can fail
+ * (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();
     const [open, setOpen] = useState(false);
     // Where the menu sits, in window coordinates: it is drawn through a portal into `<body>` with `position: fixed`, so no ancestor's
     // `overflow`, `z-index` or stacking context - a custom branding header's, say - can clip it or put it behind the page.
@@ -43,7 +53,14 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState("unsupported");
     const [profile, setProfile] = useState(undefined);
+    // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
+    const [profileSettled, setProfileSettled] = useState(false);
     const [username, setUsername] = useState(undefined);
+    // The mailboxes this menu listed itself; `null` until it has, or when it has no need to.
+    const [ownListing, setOwnListing] = useState(null);
+    // Inside the app frame the mailboxes are already listed for the whole session (see `useMailConnection()`), so they are reused, not listed again.
+    const connection = useContext(MailConnectionContext);
+    const framed = connection !== null;
     const containerRef = useRef(null);
     useEffect(() => {
         if (!authServerUrl) {
@@ -56,24 +73,50 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
                 loaded = await getMyProfile(authServerUrl);
             }
             catch {
-                // Unreachable, blocked, or no profile document (404) - fall through to the username.
+                // Unreachable, blocked, or no profile document (404) - fall through to the fallback names.
             }
-            if (cancelled) {
-                return;
-            }
-            setProfile(loaded);
-            // The username is only the fallback for a missing name - no second request when the profile has one.
-            if (!formatProfileName(loaded)) {
-                const alias = await getMyUsername(authServerUrl);
-                if (!cancelled) {
-                    setUsername(alias);
-                }
+            if (!cancelled) {
+                setProfile(loaded);
+                setProfileSettled(true);
             }
         })();
         return () => {
             cancelled = true;
         };
     }, [authServerUrl]);
+    // The mailbox's display name and then the username are only fallbacks for a missing name - nothing more is asked when the profile has
+    // one, and no username is asked for when the mailbox has a name. Without `authServerUrl` the profile never settles, so nothing is.
+    const needsFallbackName = profileSettled && !formatProfileName(profile);
+    useEffect(() => {
+        if (!needsFallbackName || framed) {
+            return;
+        }
+        let cancelled = false;
+        // A failure (no mail server, no access) is just "no mailbox name" - the username is asked for next.
+        listMailboxes({ limit: 50 }).then((list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []), () => !cancelled && setOwnListing([]));
+        return () => {
+            cancelled = true;
+        };
+    }, [needsFallbackName, framed]);
+    // `null` while the mailboxes are still on their way.
+    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 ? ownMailboxes(listed ?? [], userUid)[0]?.displayName?.trim() || undefined : undefined;
+    useEffect(() => {
+        if (!authServerUrl || !needsFallbackName || !mailboxesKnown || mailboxName) {
+            return;
+        }
+        let cancelled = false;
+        void getMyUsername(authServerUrl).then((alias) => {
+            if (!cancelled) {
+                setUsername(alias);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [authServerUrl, needsFallbackName, mailboxesKnown, mailboxName]);
     // Keyed on the joined names, not the array: a caller's fresh `["admin"]` each render must not re-ask.
     const trustedRolesKey = JSON.stringify(trustedRoles);
     useEffect(() => {
@@ -94,13 +137,17 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     // Read fresh each time the menu opens - another tab may have changed either since - and only on the client.
     useEffect(() => {
         if (open && showNotificationSettings) {
-            setPopups(getNewMailPopupsEnabled());
+            setPopups(getNotificationsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
     function togglePopups() {
-        setNewMailPopupsEnabled(!popups);
+        setNotificationsEnabled(!popups);
         setPopups(!popups);
+        if (popups) {
+            // Turned off: what is on screen goes too (it stays in "Recent notifications").
+            dismissAll();
+        }
     }
     async function enableDesktopNotifications() {
         // Asked from this click, as browsers require; a "no" (or "yes") answers the first pop-up's offer as well.
@@ -151,15 +198,16 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             window.removeEventListener("scroll", place, true);
         };
     }, [open, placement]);
-    const name = formatProfileName(profile) ?? username ?? userUid;
-    const initials = profileInitials(profile, userUid, username);
+    const name = formatProfileName(profile) ?? mailboxName ?? username ?? userUid;
+    // The badge takes its letter from whichever fallback name is shown, so it never disagrees with the name beside it.
+    const initials = profileInitials(profile, userUid, mailboxName ?? username);
     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: "New mail pop-ups" }), _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 && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
+                            }, 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: () => {
                                 setOpen(false);
                                 onShowShortcuts();
                             }, className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Keyboard shortcuts" })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _jsx("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "block w-full text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Sign Out" })] }), document.body)] }));

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

@@ -17,6 +17,8 @@ export interface ConversationListProps {
      * read, which this list would otherwise keep showing as unread until the thread is collapsed and
      * expanded again. */
     messageOverrides?: Record<string, Message>;
+    /** Called with one of a conversation's own messages carrying the answer the reader just gave to its meeting request (from that row's RSVP chip), so the caller can keep it. An answer given from the conversation's own (parent) row is kept by this list itself. */
+    onMeetingResponded?: (updated: Message) => void;
     /** Turns each parent row into a checkbox row: select mode here ticks whole conversations, since a
      * 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`). */
@@ -24,6 +26,15 @@ export interface ConversationListProps {
     /** The `conversationId`s currently ticked. */
     selectedConversationIds?: Set<string>;
     onToggleSelected?: (conversation: ConversationSummary) => 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.
+     */
+    swipe?: {
+        enabled: boolean;
+        onArchive: (conversation: ConversationSummary) => Promise<boolean>;
+        onMove: (conversation: ConversationSummary) => void;
+    };
     /**
      * Whether a conversation's own messages read newest first, matching the order sense the rows themselves
      * are in ("Newest on top"). `listConversationMessages()` always answers oldest first - the order a
@@ -44,4 +55,4 @@ export interface ConversationListProps {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }: ConversationListProps): React.JSX.Element;
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }: ConversationListProps): React.JSX.Element;

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

@@ -11,6 +11,8 @@ import MailAddress from "./MailAddress.js";
 import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
+import SwipeRow from "./SwipeRow.js";
+import InviteRowChip from "./invite/InviteRowChip.js";
 /** Every participant as `Name <address>`, for the tooltip and the accessible text of the "+N" a crowded row folds them into. */
 function participantList(conversation) {
     return conversation.participants.map((participant) => formatMailAddress(participant)).join(", ");
@@ -28,11 +30,16 @@ function participantList(conversation) {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }) {
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }) {
     const [expanded, setExpanded] = useState(new Set());
     const [messagesById, setMessagesById] = useState({});
     const [loadingIds, setLoadingIds] = useState(new Set());
     const [errorsById, setErrorsById] = useState({});
+    // The answers given from a row's RSVP chip, by message uid: a row draws them at once, whichever row (the conversation's, or one of its messages) they were given from.
+    const [answers, setAnswers] = useState({});
+    function answered(updated) {
+        setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
+    }
     function toggle(conversation) {
         const id = conversation.conversationId;
         setExpanded((prev) => {
@@ -69,7 +76,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
     if (conversations.length === 0) {
         return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this folder." });
     }
-    return (_jsx("ul", { children: conversations.map((conversation) => {
+    return (_jsx("ul", { className: swipe?.enabled ? "overflow-x-clip" : undefined, children: conversations.map((conversation) => {
             const id = conversation.conversationId;
             const isExpanded = expanded.has(id);
             const unread = conversation.unreadCount > 0;
@@ -79,10 +86,20 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${id}`;
             const ticked = selectedConversationIds?.has(id) ?? false;
-            return (_jsxs("li", { children: [_jsxs("div", { "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("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 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: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _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" }))] })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
+            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: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _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,
+                                            meetingResponse: answers[conversation.latestMessageUid] ??
+                                                messageOverrides?.[conversation.latestMessageUid]?.meetingResponse ??
+                                                conversation.latestMeetingResponse ??
+                                                undefined,
+                                        }, onResponded: answered, className: "mr-4" })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
                                 const message = messageOverrides?.[fetched.uid] ?? fetched;
                                 const messageUnread = isUnread(message);
-                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] })] }, message.uid));
+                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: { ...message, meetingResponse: answers[message.uid] ?? message.meetingResponse }, onResponded: (updated) => {
+                                                answered(updated);
+                                                onMeetingResponded?.(updated);
+                                            }, className: "ml-8 mr-4" })] }, message.uid));
                             })] })] }, id));
         }) }));
 }

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

@@ -11,8 +11,11 @@ export declare const THREAD_PAGE_SIZE = 100;
  * into an unbounded run of requests. Past it the pane says so and the rest stay readable from the list.
  */
 export declare const THREAD_MESSAGE_LIMIT = 500;
+/** What the pane needs to know of a conversation up front: the thread itself is loaded by `conversationId`. The subject and
+ * count fill the header while it loads, so a caller that only has a message (the mobile route) gives its subject and a count of 1. */
+export type ConversationThreadHead = Pick<ConversationSummary, "conversationId" | "subject" | "messageCount">;
 export interface ConversationThreadPaneProps {
-    conversation: ConversationSummary | null;
+    conversation: ConversationThreadHead | null;
     /** The mailbox the conversation was listed from - `listConversationMessages()` is mailbox-scoped. */
     mailboxUid: string;
     /**