@rapidmx/web-client 0.20.0 → 0.21.0

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -1,103 +1,103 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { ChangeEvent, useRef } from "react";
-import {
-    HiOutlineArrowDownTray,
-    HiOutlineArrowUpTray,
-    HiOutlineEnvelope,
-    HiOutlinePencil,
-    HiOutlineStar,
-    HiOutlineTag,
-    HiOutlineTrash,
-    HiOutlineUserPlus,
-    HiStar,
-} from "react-icons/hi2";
-import { SHORTCUTS } from "../../keyboard/keymap.js";
-import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
-import ResponsiveToolbar, { ToolbarAction } from "../layout/ResponsiveToolbar.js";
-
-export interface ContactsToolbarProps {
-    selectedCount: number;
-    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
-     * to act (and read) as a removal instead of an addition. */
-    allSelectedFavorited: boolean;
-    onNewContact: () => void;
-    onEdit: () => void;
-    onDelete: () => void;
-    onEmail: () => void;
-    onToggleFavorite: () => void;
-    onAddCategory: () => void;
-    onExportVCard: () => void;
-    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
-     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
-    onImportFile: (file: File) => void;
-    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
-    shortcuts?: boolean;
-    /** Leaves the New contact button out - the phone layout offers it as a floating button instead. */
-    hideNew?: boolean;
-}
-
-/**
- * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
- * alone, then the rarely used actions - Import, Export, Add category, and so on up - in a "More" menu; the bar can never spill into the pane
- * beside it. Every button keeps its tooltip (New contact its shortcut's) and accessible name in every layout. Deliberately presentational — every action is a callback the
- * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
- * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
- * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
- * "+ New list" affordance next to the "Your contact lists" heading.
- */
-export default function ContactsToolbar({
-    selectedCount,
-    allSelectedFavorited,
-    onNewContact,
-    onEdit,
-    onDelete,
-    onEmail,
-    onToggleFavorite,
-    onAddCategory,
-    onExportVCard,
-    onImportFile,
-    shortcuts,
-    hideNew,
-}: ContactsToolbarProps) {
-    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
-    const importInputRef = useRef<HTMLInputElement | null>(null);
-    const hasSelection = selectedCount > 0;
-
-    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
-        const file = e.target.files?.[0];
-        e.target.value = "";
-        if (file) {
-            onImportFile(file);
-        }
-    }
-
-    const actions: ToolbarAction[] = [
-        ...(hideNew
-            ? []
-            : [{ id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true }]),
-        { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
-        { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
-        { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },
-        {
-            id: "favorite",
-            label: allSelectedFavorited ? "Unfavorite" : "Favorite",
-            icon: allSelectedFavorited ? HiStar : HiOutlineStar,
-            onClick: onToggleFavorite,
-            disabled: !hasSelection,
-            group: 2,
-            rank: 3,
-        },
-        { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
-        { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
-        { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
-    ];
-
-    return (
-        <ResponsiveToolbar label="Contacts actions" actions={actions}>
-            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
-        </ResponsiveToolbar>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ChangeEvent, useRef } from "react";
+import {
+    HiOutlineArrowDownTray,
+    HiOutlineArrowUpTray,
+    HiOutlineEnvelope,
+    HiOutlinePencil,
+    HiOutlineStar,
+    HiOutlineTag,
+    HiOutlineTrash,
+    HiOutlineUserPlus,
+    HiStar,
+} from "react-icons/hi2";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useShortcutProps } from "../../keyboard/useShortcutProps.js";
+import ResponsiveToolbar, { ToolbarAction } from "../layout/ResponsiveToolbar.js";
+
+export interface ContactsToolbarProps {
+    selectedCount: number;
+    /** `true` only when every currently-selected contact is already favorited — flips the "favorite" button
+     * to act (and read) as a removal instead of an addition. */
+    allSelectedFavorited: boolean;
+    onNewContact: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onEmail: () => void;
+    onToggleFavorite: () => void;
+    onAddCategory: () => void;
+    onExportVCard: () => void;
+    /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
+     * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
+    onImportFile: (file: File) => void;
+    /** The keyboard's "New contact" is registered by the page: the button names its shortcut in its tooltip and `aria-keyshortcuts`. */
+    shortcuts?: boolean;
+    /** Leaves the New contact button out - the phone layout offers it as a floating button instead. */
+    hideNew?: boolean;
+}
+
+/**
+ * Contacts' Outlook-style ribbon toolbar, fitted to its column (`ResponsiveToolbar`): captions under the icons while there is room, then icons
+ * alone, then the rarely used actions - Import, Export, Add category, and so on up - in a "More" menu; the bar can never spill into the pane
+ * beside it. Every button keeps its tooltip (New contact its shortcut's) and accessible name in every layout. Deliberately presentational — every action is a callback the
+ * page (`apps/www/contacts/index.tsx`) implements, since it owns the actual contact data, the current
+ * selection, and the mailbox/folder context every real action (create/delete/email/favorite/category)
+ * needs. "New contact list" isn't duplicated here — `ContactsSidebar` already has its own inline
+ * "+ New list" affordance next to the "Your contact lists" heading.
+ */
+export default function ContactsToolbar({
+    selectedCount,
+    allSelectedFavorited,
+    onNewContact,
+    onEdit,
+    onDelete,
+    onEmail,
+    onToggleFavorite,
+    onAddCategory,
+    onExportVCard,
+    onImportFile,
+    shortcuts,
+    hideNew,
+}: ContactsToolbarProps) {
+    const newContactHint = useShortcutProps("New contact", SHORTCUTS.contacts.create, !!shortcuts);
+    const importInputRef = useRef<HTMLInputElement | null>(null);
+    const hasSelection = selectedCount > 0;
+
+    function handleImportFileChosen(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (file) {
+            onImportFile(file);
+        }
+    }
+
+    const actions: ToolbarAction[] = [
+        ...(hideNew
+            ? []
+            : [{ id: "new", label: "New contact", icon: HiOutlineUserPlus, onClick: onNewContact, hint: shortcuts ? newContactHint : undefined, group: 0, rank: 99, essential: true }]),
+        { id: "edit", label: "Edit", icon: HiOutlinePencil, onClick: onEdit, disabled: selectedCount !== 1, group: 1, rank: 6 },
+        { id: "delete", label: "Delete", icon: HiOutlineTrash, onClick: onDelete, disabled: !hasSelection, group: 1, rank: 5 },
+        { id: "email", label: "Email", icon: HiOutlineEnvelope, onClick: onEmail, disabled: !hasSelection, group: 2, rank: 4 },
+        {
+            id: "favorite",
+            label: allSelectedFavorited ? "Unfavorite" : "Favorite",
+            icon: allSelectedFavorited ? HiStar : HiOutlineStar,
+            onClick: onToggleFavorite,
+            disabled: !hasSelection,
+            group: 2,
+            rank: 3,
+        },
+        { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
+        { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
+    ];
+
+    return (
+        <ResponsiveToolbar label="Contacts actions" actions={actions}>
+            <input ref={importInputRef} type="file" accept=".vcf" className="sr-only" aria-label="Import contacts file" onChange={handleImportFileChosen} />
+        </ResponsiveToolbar>
+    );
+}

package/apps/shared/components/escrow/layout/EscrowShell.tsx

@@ -1,155 +1,155 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import "../../../styles/app.css";
-import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
-import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
-import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
-import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import UserMenu from "../../layout/UserMenu.js";
-import RailIcon from "../../layout/RailIcon.js";
-import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
-import { signOutOfConsole } from "../../admin/signOut.js";
-
-export type EscrowSection = "matters" | "auditLog";
-
-export interface EscrowShellProps {
-    active: EscrowSection;
-    userUid?: string;
-    authServerUrl?: string;
-}
-
-type Status = "checking" | "error" | "authorized";
-
-const DEFAULT_ICON_SRC = "/images/logo.svg";
-
-const NAV_ITEMS: NavItem[] = [
-    { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
-    { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
-];
-
-/**
- * Gates every `apps/escrow` page behind "is this an authenticated caller at all" — deliberately **not**
- * the same "does a canary endpoint 403 me" pattern `AdminShell` uses for the trusted `admin` role.
- * `specs/end-to-end_encryption.md`'s "Separation of duties" makes holder-ness a per-`EscrowScope` grant
- * (`EscrowScope.holderUserUids`), checked directly against `holderUserUids` in every restapi route that
- * needs it (`requireEscrowHolder()`) — never a role, and never global. There is no canary endpoint a
- * non-holder gets a clean 403 from: `GET /escrow/matters` (`BaseMatterRoute.find()`) returns `200 []` for
- * *any* authenticated caller who holds no scope at all, the same as it would for a holder of zero matters
- * — so unlike `AdminShell`, this shell cannot distinguish "holds nothing" from "holds no scope at all" up
- * front, and does not try to. It only confirms the caller is signed in and the API is reachable; every
- * actual holder-gated action (create a Matter, approve/deny a request, read material) is enforced
- * server-side and surfaces its own 403 `ApiRequestError` on the specific page that attempted it, same as
- * any other gated action elsewhere in this codebase. A non-holder who reaches `/escrow` simply sees an
- * empty Matters list and gets a real error if they try to act on something they don't hold — this is a
- * deliberate, documented scope trim rather than an oversight (see this session's own report on it).
- */
-export default function EscrowShell({ active, userUid, authServerUrl, children }: PropsWithChildren<EscrowShellProps>) {
-    const [status, setStatus] = useState<Status>("checking");
-    const [error, setError] = useState<string | null>(null);
-    const [iconSrc, setIconSrc] = useState(DEFAULT_ICON_SRC);
-
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
-
-    // Only the icon is taken from branding here. The escrow console deliberately skips `useBranding()`, which
-    // would inject the custom stylesheet, and never renders the admin-configured header/footer HTML - this
-    // console handles escrow key material, so no admin-supplied markup or CSS runs on it.
-    useEffect(() => {
-        let cancelled = false;
-        getBranding()
-            .then((branding) => {
-                if (!cancelled) setIconSrc(branding.iconUrl || branding.logoUrl || DEFAULT_ICON_SRC);
-            })
-            .catch(() => {
-                // Decorative only - keep the default icon.
-            });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-
-    useEffect(() => {
-        if (!userUid) {
-            return;
-        }
-        // limit=1 - this call exists only to confirm the API is reachable for this signed-in caller, not
-        // to read any real data (every page below fetches its own data itself).
-        listMatters({ limit: 1 })
-            .then(() => setStatus("authorized"))
-            .catch((err) => {
-                setError(err instanceof ApiRequestError ? err.message : "Could not verify escrow console access.");
-                setStatus("error");
-            });
-    }, [userUid]);
-
-    function handleSignOut() {
-        // Ends the auth-server session and tells other tabs, not just navigates - see `signOutOfConsole()`.
-        void signOutOfConsole(authServerUrl);
-    }
-
-    let content: ReactNode;
-    if (!userUid || status === "checking") {
-        content = <div className="min-h-screen" />;
-    } else if (status === "error") {
-        content = (
-            <div className="min-h-screen flex items-center justify-center p-8">
-                <div className="w-full max-w-md">
-                    <Alert>{error}</Alert>
-                </div>
-            </div>
-        );
-    } else {
-        const activeItem = NAV_ITEMS.find((item) => item.id === active);
-        content = (
-            <div className="rr-frame-bg min-h-screen flex flex-col">
-                <div className="flex-1 flex min-h-0">
-                    <nav
-                        aria-label="Escrow sections"
-                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center pb-3 gap-1"
-                    >
-                        <RailIcon src={iconSrc} />
-                        {NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (
-                            <a
-                                key={id}
-                                href={href}
-                                aria-label={label}
-                                aria-current={id === active ? "page" : undefined}
-                                title={label}
-                                className={[
-                                    "w-10 h-10 flex items-center justify-center rounded-sm",
-                                    id === active
-                                        ? "bg-primary/10 text-primary-dark"
-                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                ].join(" ")}
-                            >
-                                <Icon size={20} aria-hidden="true" />
-                            </a>
-                        ))}
-                    </nav>
-                    <BottomTabBar apps={NAV_ITEMS} active={active} />
-                    <div className="flex-1 flex flex-col min-w-0">
-                        <header className="rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
-                            <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>
-                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} />
-                        </header>
-                        <div id="app-content" className="flex-1 pb-14 md:pb-0">
-                            <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    // The user's own colours and background (`AppearanceProvider`), from what the last webmail page cached in this browser: the console never asks the server.
-    return (
-        <AppearanceProvider userUid={userUid} lookUp={false}>
-            {content}
-        </AppearanceProvider>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import "../../../styles/app.css";
+import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
+import { useSessionRefresh } from "@rapidmx/react-shared/auth/session.js";
+import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import UserMenu from "../../layout/UserMenu.js";
+import RailIcon from "../../layout/RailIcon.js";
+import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
+import { signOutOfConsole } from "../../admin/signOut.js";
+
+export type EscrowSection = "matters" | "auditLog";
+
+export interface EscrowShellProps {
+    active: EscrowSection;
+    userUid?: string;
+    authServerUrl?: string;
+}
+
+type Status = "checking" | "error" | "authorized";
+
+const DEFAULT_ICON_SRC = "/images/logo.svg";
+
+const NAV_ITEMS: NavItem[] = [
+    { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
+    { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
+];
+
+/**
+ * Gates every `apps/escrow` page behind "is this an authenticated caller at all" — deliberately **not**
+ * the same "does a canary endpoint 403 me" pattern `AdminShell` uses for the trusted `admin` role.
+ * `specs/end-to-end_encryption.md`'s "Separation of duties" makes holder-ness a per-`EscrowScope` grant
+ * (`EscrowScope.holderUserUids`), checked directly against `holderUserUids` in every restapi route that
+ * needs it (`requireEscrowHolder()`) — never a role, and never global. There is no canary endpoint a
+ * non-holder gets a clean 403 from: `GET /escrow/matters` (`BaseMatterRoute.find()`) returns `200 []` for
+ * *any* authenticated caller who holds no scope at all, the same as it would for a holder of zero matters
+ * — so unlike `AdminShell`, this shell cannot distinguish "holds nothing" from "holds no scope at all" up
+ * front, and does not try to. It only confirms the caller is signed in and the API is reachable; every
+ * actual holder-gated action (create a Matter, approve/deny a request, read material) is enforced
+ * server-side and surfaces its own 403 `ApiRequestError` on the specific page that attempted it, same as
+ * any other gated action elsewhere in this codebase. A non-holder who reaches `/escrow` simply sees an
+ * empty Matters list and gets a real error if they try to act on something they don't hold — this is a
+ * deliberate, documented scope trim rather than an oversight (see this session's own report on it).
+ */
+export default function EscrowShell({ active, userUid, authServerUrl, children }: PropsWithChildren<EscrowShellProps>) {
+    const [status, setStatus] = useState<Status>("checking");
+    const [error, setError] = useState<string | null>(null);
+    const [iconSrc, setIconSrc] = useState(DEFAULT_ICON_SRC);
+
+    useSessionRefresh(userUid, authServerUrl);
+
+    // Only the icon is taken from branding here. The escrow console deliberately skips `useBranding()`, which
+    // would inject the custom stylesheet, and never renders the admin-configured header/footer HTML - this
+    // console handles escrow key material, so no admin-supplied markup or CSS runs on it.
+    useEffect(() => {
+        let cancelled = false;
+        getBranding()
+            .then((branding) => {
+                if (!cancelled) setIconSrc(branding.iconUrl || branding.logoUrl || DEFAULT_ICON_SRC);
+            })
+            .catch(() => {
+                // Decorative only - keep the default icon.
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        // limit=1 - this call exists only to confirm the API is reachable for this signed-in caller, not
+        // to read any real data (every page below fetches its own data itself).
+        listMatters({ limit: 1 })
+            .then(() => setStatus("authorized"))
+            .catch((err) => {
+                setError(err instanceof ApiRequestError ? err.message : "Could not verify escrow console access.");
+                setStatus("error");
+            });
+    }, [userUid]);
+
+    function handleSignOut() {
+        // Ends the auth-server session and tells other tabs, not just navigates - see `signOutOfConsole()`.
+        void signOutOfConsole(authServerUrl);
+    }
+
+    let content: ReactNode;
+    if (!userUid || status === "checking") {
+        content = <div className="min-h-screen" />;
+    } else if (status === "error") {
+        content = (
+            <div className="min-h-screen flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>{error}</Alert>
+                </div>
+            </div>
+        );
+    } else {
+        const activeItem = NAV_ITEMS.find((item) => item.id === active);
+        content = (
+            <div className="rr-frame-bg min-h-screen flex flex-col">
+                <div className="flex-1 flex min-h-0">
+                    <nav
+                        aria-label="Escrow sections"
+                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center pb-3 gap-1"
+                    >
+                        <RailIcon src={iconSrc} />
+                        {NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (
+                            <a
+                                key={id}
+                                href={href}
+                                aria-label={label}
+                                aria-current={id === active ? "page" : undefined}
+                                title={label}
+                                className={[
+                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    id === active
+                                        ? "bg-primary/10 text-primary-dark"
+                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                ].join(" ")}
+                            >
+                                <Icon size={20} aria-hidden="true" />
+                            </a>
+                        ))}
+                    </nav>
+                    <BottomTabBar apps={NAV_ITEMS} active={active} />
+                    <div className="flex-1 flex flex-col min-w-0">
+                        <header className="rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
+                            <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>
+                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} />
+                        </header>
+                        <div id="app-content" className="flex-1 pb-14 md:pb-0">
+                            <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    // The user's own colours and background (`AppearanceProvider`), from what the last webmail page cached in this browser: the console never asks the server.
+    return (
+        <AppearanceProvider userUid={userUid} lookUp={false}>
+            {content}
+        </AppearanceProvider>
+    );
+}