@rapidmx/web-client 0.10.0 → 0.11.0

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

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+/** Room (px) each kind of button takes, and what the bar spends on its padding, a divider and the "More" button - the layout is computed from them
+ * rather than measured, so the first paint on the client is already right and nothing jumps. */
+export const LABELLED_BUTTON_WIDTH = 64;
+export const ICON_BUTTON_WIDTH = 36;
+const BAR_PADDING = 16;
+const DIVIDER_WIDTH = 9;
+function widthOf(actions, perButton, more) {
+    const groups = new Set(actions.map((action) => action.group)).size;
+    return BAR_PADDING + actions.length * perButton + Math.max(0, groups - 1) * DIVIDER_WIDTH + (more ? perButton : 0);
+}
+/**
+ * Which buttons a bar of `width` px shows, and how: every one with its caption when that fits; else every one as an icon (the captions go first);
+ * else as many icons as fit, the least important (`rank`) going into a "More" menu one at a time - the essential ones stay whatever the width.
+ * Pure, so it is the same on the server and the client for a given width; `width === undefined` (not measured yet, no ResizeObserver) shows
+ * everything.
+ */
+export function layoutToolbar(actions, width) {
+    const ordered = [...actions].sort((a, b) => a.group - b.group);
+    const all = ordered.map((action) => action.id);
+    if (width === undefined) {
+        return { labels: true, visible: all };
+    }
+    if (widthOf(ordered, LABELLED_BUTTON_WIDTH, false) <= width) {
+        return { labels: true, visible: all };
+    }
+    if (widthOf(ordered, ICON_BUTTON_WIDTH, false) <= width) {
+        return { labels: false, visible: all };
+    }
+    // Not everything fits: the least important actions go into "More" one at a time, until what is left and the "More" button do.
+    let shown = ordered;
+    for (const dropped of ordered.filter((action) => !action.essential).sort((x, y) => x.rank - y.rank)) {
+        if (widthOf(shown, ICON_BUTTON_WIDTH, true) <= width) {
+            break;
+        }
+        shown = shown.filter((action) => action !== dropped);
+    }
+    return { labels: false, visible: shown.map((action) => action.id) };
+}
+/** The width of `ref`'s element, kept current with a ResizeObserver; `undefined` until measured (and where there is no ResizeObserver). */
+export function useElementWidth(ref) {
+    const [width, setWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        setWidth(element.getBoundingClientRect().width);
+        const observer = new ResizeObserver((entries) => {
+            const box = entries[0]?.contentRect.width;
+            if (box !== undefined) {
+                setWidth(Math.round(box));
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+function ToolbarButton({ action, labels }) {
+    const Icon = action.icon;
+    return (_jsxs("button", { type: "button", onClick: action.onClick, disabled: action.disabled, "aria-pressed": action.pressed, 
+        // A tooltip when the caption is not on show (the shortcut's own title, when it has one, wins).
+        title: action.hint?.title ?? (labels ? undefined : action.label), "aria-keyshortcuts": action.hint?.["aria-keyshortcuts"], "data-toolbar-item": "", className: [
+            "flex shrink-0 flex-col items-center justify-center gap-1 rounded-sm text-xs disabled:opacity-40 disabled:cursor-not-allowed",
+            labels ? "w-16 py-1.5" : "h-9 w-9",
+            action.pressed ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text",
+        ].join(" "), children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { className: labels ? "leading-tight text-center" : "sr-only", children: action.label })] }));
+}
+/** The menu that holds what does not fit: a button, and a portalled `role="menu"` so nothing clips it. Arrow keys, Home, End and Escape; focus returns to the button. */
+function MoreMenu({ actions }) {
+    const [open, setOpen] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!open) {
+            setAnchor(null);
+            return;
+        }
+        function place() {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setAnchor({ right: Math.max(8, window.innerWidth - rect.right), top: rect.bottom + 4 });
+        }
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open]);
+    // On open, the first item that can be used gets the focus.
+    useEffect(() => {
+        if (open && anchor) {
+            menuRef.current?.querySelector('[role="menuitem"]:not(:disabled)')?.focus();
+        }
+    }, [open, anchor !== null]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function handlePointerDown(event) {
+            if (event.target instanceof Node && !buttonRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [open]);
+    function close(refocus) {
+        setOpen(false);
+        if (refocus) {
+            buttonRef.current?.focus();
+        }
+    }
+    function handleMenuKeyDown(event) {
+        const items = Array.from(menuRef.current.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        const index = items.indexOf(document.activeElement);
+        const focusAt = (next) => {
+            event.preventDefault();
+            items[(next + items.length) % items.length]?.focus();
+        };
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        }
+        else if (event.key === "ArrowDown") {
+            focusAt(index + 1);
+        }
+        else if (event.key === "ArrowUp") {
+            focusAt(index - 1);
+        }
+        else if (event.key === "Home") {
+            focusAt(0);
+        }
+        else if (event.key === "End") {
+            focusAt(items.length - 1);
+        }
+        else if (event.key === "Tab") {
+            close(false);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: buttonRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": "More actions", title: "More actions", "data-toolbar-item": "", onClick: () => setOpen((current) => !current), onKeyDown: (event) => {
+                    if (event.key === "ArrowDown" && !open) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, className: [
+                    "flex h-9 w-9 shrink-0 items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text",
+                    open ? "bg-surface-alt text-text" : "",
+                ].join(" "), children: _jsx(HiOutlineEllipsisHorizontal, { size: 18, "aria-hidden": "true" }) }), open &&
+                anchor &&
+                createPortal(_jsx("div", { ref: menuRef, role: "menu", "aria-label": "More actions", onKeyDown: handleMenuKeyDown, style: { position: "fixed", right: anchor.right, top: anchor.top }, className: "z-[70] w-52 max-w-[calc(100vw-1rem)] rounded-md border border-border bg-surface py-1.5 shadow-modal", children: actions.map((action) => {
+                        const Icon = action.icon;
+                        return (_jsxs("button", { type: "button", role: "menuitem", disabled: action.disabled, title: action.hint?.title, "aria-keyshortcuts": action.hint?.["aria-keyshortcuts"], onClick: () => {
+                                close(true);
+                                action.onClick();
+                            }, className: "flex w-full items-center gap-3 px-3.5 py-2 text-left text-sm text-text hover:not-disabled:bg-surface-alt focus-visible:bg-surface-alt disabled:cursor-not-allowed disabled:opacity-40", children: [_jsx(Icon, { size: 18, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), action.label] }, action.id));
+                    }) }), document.body)] }));
+}
+/**
+ * A toolbar that fits the column it is in - never wider, never over another pane. It measures its own width (`ResizeObserver`) and shows every
+ * action with a caption when there is room; when there is not, the captions go first (each button keeps its tooltip and accessible name), then the
+ * least important actions move into a "More" menu (`layoutToolbar()`). Arrow keys, Home and End move between the buttons; the menu is a real
+ * `role="menu"`. `children` (a hidden file input, say) are rendered inside the toolbar's element but take no room.
+ */
+export default function ResponsiveToolbar({ label, actions, leading, children }) {
+    const ref = useRef(null);
+    const width = useElementWidth(ref);
+    const layout = layoutToolbar(actions, width);
+    const ordered = [...actions].sort((a, b) => a.group - b.group);
+    const shown = ordered.filter((action) => layout.visible.includes(action.id));
+    const hidden = ordered.filter((action) => !layout.visible.includes(action.id));
+    function handleKeyDown(event) {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) || event.target.closest('[role="menu"]')) {
+            return;
+        }
+        const items = Array.from(ref.current.querySelectorAll("[data-toolbar-item]:not(:disabled)"));
+        const index = items.indexOf(event.target);
+        if (index === -1) {
+            return;
+        }
+        event.preventDefault();
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index + (event.key === "ArrowRight" ? 1 : -1);
+        items[(next + items.length) % items.length].focus();
+    }
+    return (_jsxs("div", { ref: ref, role: "toolbar", "aria-label": label, onKeyDown: handleKeyDown, 
+        // `overflow-x-clip` is the guarantee: whatever the layout says, the bar can never paint outside its own column.
+        className: "flex min-w-0 items-stretch gap-0.5 overflow-x-clip border-b border-border bg-surface-alt px-2 py-1", children: [leading, shown.map((action, index) => (_jsxs(React.Fragment, { children: [index > 0 && shown[index - 1].group !== action.group && _jsx("div", { className: "my-1 w-px shrink-0 self-stretch bg-border", "aria-hidden": "true" }), _jsx(ToolbarButton, { action: action, labels: layout.labels })] }, action.id))), hidden.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 w-px shrink-0 self-stretch bg-border", "aria-hidden": "true" }), _jsx(MoreMenu, { actions: hidden })] })), children] }));
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * The account menu's colour scheme control: a row "Theme" with a three-way segmented control of icon buttons - System, Light, Dark - a
+ * `radiogroup` (one tab stop, the arrow keys move and choose, Home/End jump). A choice applies through `useAppearance().setPrefs()`, which
+ * changes every open surface in the same frame (the app frame, message cards, the consoles) and saves in the background - and puts the change
+ * back, with a notice, if the save fails. Renders nothing where there is no `AppearanceProvider` (a shell that has none, a component tested
+ * alone): the hook is inert there and a control that changes nothing would be a lie.
+ */
+export default function ThemeSwitch(): React.JSX.Element | null;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useContext, useId, useRef } from "react";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import { AppearanceContext, INERT_APPEARANCE } from "../../appearance/appearanceContext.js";
+const CHOICES = [
+    { mode: "system", label: "System", hint: "System - follow this device", Icon: HiOutlineComputerDesktop },
+    { mode: "light", label: "Light", hint: "Light", Icon: HiOutlineSun },
+    { mode: "dark", label: "Dark", hint: "Dark", Icon: HiOutlineMoon },
+];
+/**
+ * The account menu's colour scheme control: a row "Theme" with a three-way segmented control of icon buttons - System, Light, Dark - a
+ * `radiogroup` (one tab stop, the arrow keys move and choose, Home/End jump). A choice applies through `useAppearance().setPrefs()`, which
+ * changes every open surface in the same frame (the app frame, message cards, the consoles) and saves in the background - and puts the change
+ * back, with a notice, if the save fails. Renders nothing where there is no `AppearanceProvider` (a shell that has none, a component tested
+ * alone): the hook is inert there and a control that changes nothing would be a lie.
+ */
+export default function ThemeSwitch() {
+    const appearance = useContext(AppearanceContext);
+    const buttons = useRef([]);
+    const labelId = useId();
+    if (appearance === INERT_APPEARANCE) {
+        return null;
+    }
+    const current = appearance.prefs.mode;
+    function choose(index, focus) {
+        const next = CHOICES[(index + CHOICES.length) % CHOICES.length];
+        if (next.mode !== current) {
+            appearance.setPrefs({ mode: next.mode });
+        }
+        if (focus) {
+            buttons.current[(index + CHOICES.length) % CHOICES.length]?.focus();
+        }
+    }
+    function handleKeyDown(event, index) {
+        const target = { ArrowRight: index + 1, ArrowDown: index + 1, ArrowLeft: index - 1, ArrowUp: index - 1, Home: 0, End: CHOICES.length - 1 }[event.key];
+        if (target !== undefined) {
+            event.preventDefault();
+            choose(target, true);
+        }
+    }
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border", children: [_jsx("span", { id: labelId, className: "text-sm text-text", children: "Theme" }), _jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "inline-flex rounded-sm border border-border bg-surface-alt p-0.5", children: CHOICES.map(({ mode, label, hint, Icon }, index) => {
+                    const selected = mode === current;
+                    return (_jsx("button", { ref: (element) => {
+                            buttons.current[index] = element;
+                        }, type: "button", role: "radio", "aria-checked": selected, "aria-label": label, title: hint, tabIndex: selected ? 0 : -1, onClick: () => choose(index, false), onKeyDown: (event) => handleKeyDown(event, index), className: [
+                            "flex h-7 w-8 items-center justify-center rounded-[3px] focus-visible:outline-2 focus-visible:outline-primary",
+                            selected ? "bg-surface text-primary-dark shadow-sm" : "text-text-muted hover:text-text",
+                        ].join(" "), children: _jsx(Icon, { size: 16, "aria-hidden": "true" }) }, mode));
+                }) })] }));
+}

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

@@ -28,6 +28,12 @@ export interface UserMenuProps {
     /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too). 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;
+    /** Errors in that history nobody has looked at yet: a count beside the item, and a dot on the menu button. */
+    unseenErrors?: number;
 }
 /**
  * The top-right "who am I" menu shared by every shell (`AppShell`, `AdminShell`, `EscrowShell`): an avatar-button
@@ -39,4 +45,4 @@ export interface UserMenuProps {
  * 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.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, }: UserMenuProps): React.JSX.Element;
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles, showSettingsLink, showNotificationSettings, onShowShortcuts, placement, onShowNotifications, unseenErrors, }: UserMenuProps): React.JSX.Element;

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

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
@@ -12,6 +13,7 @@ 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 ThemeSwitch from "./ThemeSwitch.js";
 import { desktopPermission, getNewMailPopupsEnabled, requestDesktopPermission, setDesktopOfferDismissed, setNewMailPopupsEnabled, } from "../../mail/newMailNotifications.js";
 function Avatar({ profile, initials, large }) {
     const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
@@ -30,9 +32,13 @@ function Avatar({ profile, initials, large }) {
  * 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.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, }) {
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, unseenErrors = 0, }) {
     const env = useKeyEnvironment();
     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.
+    const [anchor, setAnchor] = useState(null);
+    const menuRef = useRef(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState("unsupported");
@@ -106,7 +112,11 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             return;
         }
         function handlePointerDown(e) {
-            if (containerRef.current && e.target instanceof Node && !containerRef.current.contains(e.target)) {
+            // The menu is portalled out of the container, so it and the button are checked separately.
+            if (containerRef.current &&
+                e.target instanceof Node &&
+                !containerRef.current.contains(e.target) &&
+                !menuRef.current?.contains(e.target)) {
                 setOpen(false);
             }
         }
@@ -122,11 +132,35 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [open]);
+    // Measured before paint, and again whenever the window resizes or anything scrolls (a footer's button moves with the page).
+    useLayoutEffect(() => {
+        if (!open) {
+            setAnchor(null);
+            return;
+        }
+        function place() {
+            const rect = containerRef.current.getBoundingClientRect();
+            const right = Math.max(8, window.innerWidth - rect.right);
+            setAnchor(placement === "up" ? { right, bottom: window.innerHeight - rect.top + 8 } : { right, top: rect.bottom + 8 });
+        }
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open, placement]);
     const name = formatProfileName(profile) ?? username ?? userUid;
     const initials = profileInitials(profile, userUid, 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: "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 }), _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 && (_jsxs("div", { role: "menu", className: "absolute right-0 top-full mt-2 w-60 bg-surface border border-border rounded-md shadow-modal py-1.5 z-10", 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 })] }), 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" })), onShowShortcuts && (_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" })] }))] }));
+    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: () => {
+                                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: () => {
+                                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.js

@@ -8,6 +8,7 @@ import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 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";
 /** Every participant as `Name <address>`, for the tooltip and the accessible text of the "+N" a crowded row folds them into. */
@@ -78,10 +79,10 @@ 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: 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("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) => {
                                 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.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" }))] })] })] }, message.uid));
                             })] })] }, id));
         }) }));
 }

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

@@ -46,7 +46,8 @@ export interface ConversationThreadPaneProps {
     shortcuts?: boolean;
 }
 /**
- * The reading pane for the conversation list: the whole thread, **newest at the top**, opened at the message
+ * The reading pane for the conversation list: the conversation's subject in a card of its own, pinned at the top, and under it the whole thread as
+ * a stack of message cards (each exactly as tall as its message; the list scrolls as a whole), **newest at the top**, opened at the message
  * the reader picked. Every message from that one through to the newest is expanded - which in this order is
  * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
  * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -8,11 +8,12 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import MailAddress from "./MailAddress.js";
 import MessageDetailPane from "./MessageDetailPane.js";
+import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
-import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, senderClass } from "./unreadStyle.js";
+import { dateClass, isUnread, senderClass } from "./unreadStyle.js";
 /** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
 export const THREAD_PAGE_SIZE = 100;
 /**
@@ -86,7 +87,8 @@ function hasFocusRing(element) {
     }
 }
 /**
- * The reading pane for the conversation list: the whole thread, **newest at the top**, opened at the message
+ * The reading pane for the conversation list: the conversation's subject in a card of its own, pinned at the top, and under it the whole thread as
+ * a stack of message cards (each exactly as tall as its message; the list scrolls as a whole), **newest at the top**, opened at the message
  * the reader picked. Every message from that one through to the newest is expanded - which in this order is
  * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
  * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just
@@ -129,6 +131,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     /** Where the toggled message's header sat in the viewport before it expanded, so the run below can put
      * it back there - expanding a message above the one being read must not shove that one off-screen. */
     const anchorRef = useRef(null);
+    /** The message whose header button had the focus when it was toggled: expanding or collapsing swaps that button for the other state's, so the
+     * focus is put back on the new one. */
+    const refocusRef = useRef(null);
     const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
@@ -211,7 +216,8 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         const active = document.activeElement;
         if (!(active instanceof HTMLElement && active.hasAttribute("data-row-open") && hasFocusRing(active))) {
             // `preventScroll` so focusing doesn't scroll it somewhere else again.
-            headerRefs.current[pendingFocusUid].focus({ preventScroll: true });
+            // (A card's header button is drawn by the message pane, which registers it; a stand-in pane that doesn't has none to focus.)
+            headerRefs.current[pendingFocusUid]?.focus({ preventScroll: true });
         }
         setPendingFocusUid(null);
     }, [pendingFocusUid, expandedUids]);
@@ -225,6 +231,11 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         // The row is still there: the anchor was taken from a rendered row, and toggling never removes one.
         const row = rowRefs.current[anchor.uid];
         scrollingAncestor(row).scrollTop += row.getBoundingClientRect().top - anchor.top;
+        // The button the reader had focused is gone (a collapsed card and an expanded one each draw their own): keep them where they were.
+        if (refocusRef.current === anchor.uid) {
+            headerRefs.current[anchor.uid]?.focus({ preventScroll: true });
+        }
+        refocusRef.current = null;
     }, [expandedUids]);
     // Attachments and mark-as-read, for expanded messages only - mirrors `mailDetailHooks.ts`'s
     // `useMessageAttachments`/`useMarkMessageRead`, reimplemented here (rather than called in a loop, which
@@ -288,6 +299,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         markReadRequestedRef.current.delete(uid);
         // The row this button lives in has rendered, so its ref is set.
         anchorRef.current = { uid, top: rowRefs.current[uid].getBoundingClientRect().top };
+        refocusRef.current = document.activeElement === headerRefs.current[uid] ? uid : null;
         setExpandedUids((prev) => {
             const next = new Set(prev);
             if (next.has(uid)) {
@@ -308,25 +320,35 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     if (!conversation) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
     }
-    if (loading) {
-        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
-    }
-    if (error) {
-        return (_jsx("div", { className: "p-4 flex-1", children: _jsx(Alert, { children: error }) }));
-    }
-    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [messages.length, " message", messages.length === 1 ? "" : "s"] }), truncated && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] }))] }), _jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto", children: messages.map((message) => {
+    const subject = displaySubject(conversation.subject) || "(no subject)";
+    // The newest message that is open carries the Reply / Forward buttons at the foot of its card.
+    const footerUid = messages.find((message) => expandedUids.has(message.uid))?.uid;
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsx(SubjectCard, { subject: subject, meta: loading
+                    ? conversation.messageCount > 1
+                        ? `${conversation.messageCount} messages`
+                        : undefined
+                    : error
+                        ? undefined
+                        : `${messages.length} message${messages.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: messages.map((message) => {
                     const uid = message.uid;
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
                     const messageUnread = isUnread(message);
-                    return (_jsxs("li", { ref: (node) => {
+                    return (_jsx("li", { ref: (node) => {
                             rowRefs.current[uid] = node;
-                        }, "data-unread": messageUnread ? "true" : undefined, className: ["relative border-b border-border", expanded ? "flex flex-col min-h-full" : ""].join(" "), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsx("h2", { className: "shrink-0", children: _jsxs("button", { type: "button", ref: (node) => {
+                        }, "data-unread": messageUnread ? "true" : undefined, children: expanded ? (_jsx(MessageDetailPane, { inThread: true, threadSubject: subject, threadHeader: {
+                                bodyId,
+                                unread: messageUnread,
+                                onToggle: () => toggleExpanded(uid),
+                                buttonRef: (node) => {
+                                    headerRefs.current[uid] = node;
+                                },
+                            }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
                                         headerRefs.current[uid] = node;
-                                    }, onClick: () => toggleExpanded(uid), "aria-expanded": expanded, "aria-controls": bodyId, className: [
-                                        "w-full text-left px-4 py-3",
-                                        messageUnread ? "bg-primary/[0.07] hover:bg-primary/10" : "hover:bg-surface-alt",
-                                        ROW_FOCUS_CLASS,
-                                    ].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("span", { 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).toLocaleString() })] }), !expanded && (_jsx("span", { className: "block text-xs text-text-muted truncate font-normal", children: message.bodyPreview }))] }) }), _jsx("div", { id: bodyId, hidden: !expanded, className: expanded ? "flex-1 min-h-0 flex" : undefined, children: expanded && (_jsx(MessageDetailPane, { inThread: true, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) })] }, uid));
-                }) })] }));
+                                    }, buttonProps: {
+                                        onClick: () => toggleExpanded(uid),
+                                        "aria-expanded": false,
+                                        "aria-controls": bodyId,
+                                    } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
+                }) }))] }));
 }