@rapidmx/web-client 0.9.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

@@ -5,22 +5,44 @@ export interface UserMenuProps {
      * the "Account" item links into, if configured. Without it the menu shows the bare uid and has no "Account" item. */
     authServerUrl?: string;
     onSignOut: () => void;
-    /** Shows an "Admin" item linking to `/admin`, above "Sign Out" — pass only for a trusted-role caller. */
+    /** Shows an "Admin Console" item linking to `/admin`, above "Sign Out" — pass only for a trusted-role caller
+     * (the JWT carries the role, i.e. an elevated session). See `detectAdmin` for everyone else. */
     showAdminLink?: boolean;
+    /** Asks auth-server whether the caller holds a trusted role (`GET /api/users/me`, once per sitting - see
+     * `lookUpAdminAccess()`) and shows the "Admin Console" item if so. Needed because a token that isn't elevated
+     * carries no trusted role, so an administrator with an ordinary session is not `showAdminLink`. Does nothing
+     * without `authServerUrl`, and a failed lookup leaves the item hidden. Pass `false` while impersonating. */
+    detectAdmin?: boolean;
+    /** The role names the server treats as trusted (its `trusted_roles` config) - what `detectAdmin` looks for.
+     * Defaults to `["admin"]`, the server's own default. */
+    trustedRoles?: readonly string[];
     /** Shows a "Settings" item, above "Admin"/"Sign Out" — an account-scoped surface (like "Admin"), not
      * a content-scoped one, so it lives here rather than as a 5th `AppShell` rail icon. Links straight to
      * `/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. */
+    showNotificationSettings?: boolean;
+    /** 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
  * 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" link, and "Sign Out". This service has no local user directory (see
+ * 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.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, showSettingsLink }: 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,8 +3,18 @@ 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";
+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 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";
     if (profile?.avatar) {
@@ -15,15 +25,23 @@ function Avatar({ profile, initials, large }) {
 /**
  * The top-right "who am I" menu shared by every shell (`AppShell`, `AdminShell`, `EscrowShell`): an avatar-button
  * 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" link, and "Sign Out". This service has no local user directory (see
+ * 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.
  */
-export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, showSettingsLink }) {
+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");
     const [profile, setProfile] = useState(undefined);
     const [username, setUsername] = useState(undefined);
     const containerRef = useRef(null);
@@ -56,12 +74,49 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             cancelled = true;
         };
     }, [authServerUrl]);
+    // 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(() => {
+        if (!detectAdmin || !authServerUrl || showAdminLink) {
+            setDetectedAdmin(false);
+            return;
+        }
+        let cancelled = false;
+        void lookUpAdminAccess(authServerUrl, userUid, JSON.parse(trustedRolesKey)).then((admin) => {
+            if (!cancelled) {
+                setDetectedAdmin(admin === true);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [detectAdmin, authServerUrl, userUid, showAdminLink, trustedRolesKey]);
+    // 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());
+            setPermission(desktopPermission());
+        }
+    }, [open, showNotificationSettings]);
+    function togglePopups() {
+        setNewMailPopupsEnabled(!popups);
+        setPopups(!popups);
+    }
+    async function enableDesktopNotifications() {
+        // Asked from this click, as browsers require; a "no" (or "yes") answers the first pop-up's offer as well.
+        setPermission(await requestDesktopPermission());
+        setDesktopOfferDismissed(true);
+    }
     useEffect(() => {
         if (!open) {
             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);
             }
         }
@@ -77,9 +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);
-    // Tolerates a configured URL with a trailing slash, which would otherwise produce `//account`.
-    const accountUrl = authServerUrl ? `${authServerUrl.replace(/\/+$/, "")}/account` : undefined;
-    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/auto-reply", className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showAdminLink && (_jsx("a", { role: "menuitem", href: "/admin", className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Admin" })), _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" })] }))] }));
+    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: () => {
+                                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,7 +8,9 @@ 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. */
 function participantList(conversation) {
     return conversation.participants.map((participant) => formatMailAddress(participant)).join(", ");
@@ -77,18 +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", { className: [
-                            "flex items-stretch border-b border-border",
-                            conversation.latestMessageUid === selectedUid || ticked
-                                ? "bg-primary/10"
-                                : "hover:bg-surface-alt",
-                        ].join(" "), children: [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", children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("button", { type: "button", onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 text-left pr-4 py-3", unread ? "font-semibold" : ""].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: "flex-1" }), 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 text-text-muted shrink-0", children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", 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/10 text-primary-dark font-semibold", 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;
-                                return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenMessage(conversation, message.uid), className: [
-                                            "w-full text-left pl-8 pr-4 py-2 border-b border-border",
-                                            message.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt",
-                                            message.flags.read ? "" : "font-semibold",
-                                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from }), _jsx("span", { className: "text-xs text-text-muted shrink-0", 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));
+                                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));
                             })] })] }, id));
         }) }));
 }

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

@@ -41,9 +41,13 @@ export interface ConversationThreadPaneProps {
     onLabelCreated?: (label: Label) => void;
     /** A folder created from a message's own Move to prompt, for the folder sidebar to pick up. */
     onFolderCreated?: (folder: Folder) => void;
+    /** Registers the keyboard shortcuts (Reply, Reply all, Forward, Archive, Move to) of the message that was opened - see `MessageDetailPane`'s
+     * `shortcuts`. The caller turns it off while it is doing something else with the keyboard (select mode). */
+    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
@@ -59,4 +63,4 @@ export interface ConversationThreadPaneProps {
  * single-message pane, and each acts on the message it belongs to. A collapsed message mounts none of
  * that - mounting a body iframe per message up front would be wasteful in a long thread.
  */
-export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, }: ConversationThreadPaneProps): React.JSX.Element;
+export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, shortcuts, }: ConversationThreadPaneProps): React.JSX.Element;