@rapidmx/web-client 0.10.0 → 0.11.0

package/apps/shared/components/layout/ResponsiveToolbar.tsx

@@ -0,0 +1,315 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { IconType } from "react-icons";
+import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+
+/** One button of a `ResponsiveToolbar`. */
+export interface ToolbarAction {
+    id: string;
+    /** The visible caption while there is room, else the tooltip and the accessible name. */
+    label: string;
+    icon: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    /** A toggle: the button's pressed state. */
+    pressed?: boolean;
+    /** `title` and `aria-keyshortcuts` for a button with a shortcut - kept as given, whatever the layout. */
+    hint?: { title: string; "aria-keyshortcuts"?: string };
+    /** Actions with the same `group` sit together; a divider goes between groups. */
+    group: number;
+    /** Which goes into the "More" menu first when there is not room: the lowest number first. Never used for `essential`. */
+    rank: number;
+    /** Never moves into the "More" menu (the primary action). */
+    essential?: boolean;
+}
+
+/** 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;
+
+export interface ToolbarLayout {
+    /** Captions under the icons. */
+    labels: boolean;
+    /** The ids of the actions shown as buttons, in order. The rest are in the "More" menu. */
+    visible: string[];
+}
+
+function widthOf(actions: ToolbarAction[], perButton: number, more: boolean): number {
+    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: ToolbarAction[], width: number | undefined): ToolbarLayout {
+    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: React.RefObject<HTMLElement | null>): number | undefined {
+    const [width, setWidth] = useState<number | undefined>(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 }: { action: ToolbarAction; labels: boolean }) {
+    const Icon = action.icon;
+    return (
+        <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(" ")}
+        >
+            <Icon size={18} aria-hidden="true" />
+            <span className={labels ? "leading-tight text-center" : "sr-only"}>{action.label}</span>
+        </button>
+    );
+}
+
+/** 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 }: { actions: ToolbarAction[] }) {
+    const [open, setOpen] = useState(false);
+    const [anchor, setAnchor] = useState<{ right: number; top: number } | null>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(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<HTMLElement>('[role="menuitem"]:not(:disabled)')?.focus();
+        }
+    }, [open, anchor !== null]);
+
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function handlePointerDown(event: MouseEvent) {
+            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: boolean) {
+        setOpen(false);
+        if (refocus) {
+            buttonRef.current?.focus();
+        }
+    }
+
+    function handleMenuKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+        const items = Array.from(menuRef.current!.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)'));
+        const index = items.indexOf(document.activeElement as HTMLElement);
+        const focusAt = (next: number) => {
+            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 (
+        <>
+            <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(" ")}
+            >
+                <HiOutlineEllipsisHorizontal size={18} aria-hidden="true" />
+            </button>
+            {open &&
+                anchor &&
+                createPortal(
+                    <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"
+                    >
+                        {actions.map((action) => {
+                            const Icon = action.icon;
+                            return (
+                                <button
+                                    key={action.id}
+                                    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"
+                                >
+                                    <Icon size={18} aria-hidden="true" className="shrink-0 text-text-muted" />
+                                    {action.label}
+                                </button>
+                            );
+                        })}
+                    </div>,
+                    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 }: { label: string; actions: ToolbarAction[]; leading?: ReactNode; children?: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(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: KeyboardEvent<HTMLDivElement>) {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) || (event.target as HTMLElement).closest('[role="menu"]')) {
+            return;
+        }
+        const items = Array.from(ref.current!.querySelectorAll<HTMLElement>("[data-toolbar-item]:not(:disabled)"));
+        const index = items.indexOf(event.target as HTMLElement);
+        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 (
+        <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"
+        >
+            {leading}
+            {shown.map((action, index) => (
+                <React.Fragment key={action.id}>
+                    {index > 0 && shown[index - 1].group !== action.group && <div className="my-1 w-px shrink-0 self-stretch bg-border" aria-hidden="true" />}
+                    <ToolbarButton action={action} labels={layout.labels} />
+                </React.Fragment>
+            ))}
+            {hidden.length > 0 && (
+                <>
+                    <div className="my-1 w-px shrink-0 self-stretch bg-border" aria-hidden="true" />
+                    <MoreMenu actions={hidden} />
+                </>
+            )}
+            {children}
+        </div>
+    );
+}

package/apps/shared/components/layout/ThemeSwitch.tsx

@@ -0,0 +1,84 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useContext, useId, useRef } from "react";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import type { AppearanceMode } from "@rapidmx/react-shared/appearance/preferencesApi.js";
+import { AppearanceContext, INERT_APPEARANCE } from "../../appearance/appearanceContext.js";
+
+const CHOICES: { mode: AppearanceMode; label: string; hint: string; Icon: typeof HiOutlineSun }[] = [
+    { 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<(HTMLButtonElement | null)[]>([]);
+    const labelId = useId();
+    if (appearance === INERT_APPEARANCE) {
+        return null;
+    }
+    const current = appearance.prefs.mode;
+
+    function choose(index: number, focus: boolean) {
+        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: React.KeyboardEvent, index: number) {
+        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 (
+        <div className="flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border">
+            <span id={labelId} className="text-sm text-text">
+                Theme
+            </span>
+            <div role="radiogroup" aria-labelledby={labelId} className="inline-flex rounded-sm border border-border bg-surface-alt p-0.5">
+                {CHOICES.map(({ mode, label, hint, Icon }, index) => {
+                    const selected = mode === current;
+                    return (
+                        <button
+                            key={mode}
+                            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(" ")}
+                        >
+                            <Icon size={16} aria-hidden="true" />
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/layout/UserMenu.tsx

@@ -2,7 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, Profile, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
@@ -11,6 +12,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,
     desktopPermission,
@@ -49,6 +51,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;
 }
 
 function Avatar({ profile, initials, large }: { profile?: Profile; initials: string; large?: boolean }) {
@@ -91,9 +99,16 @@ export default function UserMenu({
     showSettingsLink,
     showNotificationSettings,
     onShowShortcuts,
+    placement = "down",
+    onShowNotifications,
+    unseenErrors = 0,
 }: UserMenuProps) {
     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<{ right: number; top?: number; bottom?: number } | null>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState<DesktopPermission>("unsupported");
@@ -172,7 +187,13 @@ export default function UserMenu({
             return;
         }
         function handlePointerDown(e: MouseEvent) {
-            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);
             }
         }
@@ -189,6 +210,26 @@ export default function UserMenu({
         };
     }, [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);
@@ -201,9 +242,12 @@ export default function UserMenu({
                 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"
+                className="relative flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt"
             >
                 <Avatar profile={profile} initials={initials} />
+                {unseenErrors > 0 && (
+                    <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" />
+                )}
                 <svg
                     width="14"
                     height="14"
@@ -215,15 +259,20 @@ export default function UserMenu({
                     <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
             </button>
-            {open && (
+            {open &&
+                anchor &&
+                createPortal(
                 <div
+                    ref={menuRef}
                     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"
+                    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]"
                 >
                     <div className="flex items-center gap-3 px-3.5 py-2.5 border-b border-border">
                         <Avatar profile={profile} initials={initials} large />
                         <span className="text-sm font-semibold text-text truncate">{name}</span>
                     </div>
+                    <ThemeSwitch />
                     {accountUrl && (
                         <a
                             role="menuitem"
@@ -264,6 +313,25 @@ export default function UserMenu({
                             Turn on desktop notifications
                         </button>
                     )}
+                    {onShowNotifications && (
+                        <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"
+                        >
+                            <span>Recent notifications</span>
+                            {unseenErrors > 0 && (
+                                <span className="rounded-pill bg-danger px-1.5 text-xs font-bold text-white">
+                                    <span aria-hidden="true">{unseenErrors}</span>
+                                    <span className="sr-only">{unseenErrors} unseen {unseenErrors === 1 ? "error" : "errors"}</span>
+                                </span>
+                            )}
+                        </button>
+                    )}
                     {onShowShortcuts && (
                         <button
                             role="menuitem"
@@ -296,7 +364,8 @@ export default function UserMenu({
                     >
                         Sign Out
                     </button>
-                </div>
+                </div>,
+                document.body,
             )}
         </div>
     );

package/apps/shared/components/mail/ConversationList.tsx

@@ -8,6 +8,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
+import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
 import { ConversationSummary, listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
 
@@ -188,7 +189,8 @@ export default function ConversationList({
                                 </div>
                                 <div className={["text-sm truncate", subjectClass(unread)].join(" ")}>{conversation.subject || "(no subject)"}</div>
                                 <div className="text-xs text-text-muted truncate font-normal">
-                                    {conversation.latestPreview}
+                                    {/* An encrypted latest message has no preview (the server never had its plaintext): say so, with a lock, not nothing. */}
+                                    {conversationLooksEncrypted(conversation) ? <EncryptedPreview /> : conversation.latestPreview}
                                 </div>
                                 <div className="flex items-center gap-2 mt-1 text-xs text-text-muted font-normal">
                                     {conversation.messageCount > 1 && <span>{conversation.messageCount} messages</span>}
@@ -244,7 +246,7 @@ export default function ConversationList({
                                                 </span>
                                             </div>
                                             <div className="flex items-center gap-2 text-xs text-text-muted font-normal">
-                                                <span className="truncate">{message.bodyPreview}</span>
+                                                <span className="truncate">{message.bodyPreview || (message.encrypted ? <EncryptedPreview /> : null)}</span>
                                                 {message.hasAttachments && (
                                                     <HiOutlinePaperClip size={12} aria-label="Has attachments" />
                                                 )}