@rapidmx/web-client 0.24.0 → 0.25.1

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -24,6 +24,8 @@ import {
     HiOutlineUserGroup,
     HiOutlineWrenchScrewdriver,
     HiOutlineBars3,
+    HiOutlineChevronDoubleLeft,
+    HiOutlineChevronDoubleRight,
 } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "../../../../../lib/util/api.js";
 import { getSetupStatus } from "../../../../../lib/admin/setupApi.js";
@@ -35,6 +37,7 @@ import Drawer from "../../../../../lib/components/overlays/Drawer.js";
 import type { NavItem } from "../../../../../lib/components/navigation/BottomTabBar.js";
 import { FrameBrandingFooter, useBrandingHtml } from "../../layout/BrandingChrome.js";
 import RailIcon from "../../layout/RailIcon.js";
+import { readRailExpanded, writeRailExpanded } from "./railPreference.js";
 import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
 import UserMenu from "../../layout/UserMenu.js";
 import {
@@ -192,6 +195,15 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(null);
     const [menuOpen, setMenuOpen] = useState(false);
+    // The side rail shows icons alone, or icons with their labels. Read after the first render: the page is drawn on the server first, which cannot know.
+    const [railExpanded, setRailExpanded] = useState(false);
+    useEffect(() => setRailExpanded(readRailExpanded()), []);
+    function toggleRail() {
+        setRailExpanded((expanded) => {
+            writeRailExpanded(!expanded);
+            return !expanded;
+        });
+    }
     // `branding` only feeds the footer below: the admin-configured header is for the webmail and public pages, not the
     // console. `useBranding()` is still what injects the custom stylesheet and supplies the rail's icon.
     const { branding, iconSrc } = useBranding();
@@ -309,7 +321,10 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
                 <div className="flex-1 flex min-h-0">
                     <nav
                         aria-label="Admin sections"
-                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center pb-3 gap-1"
+                        className={[
+                            "hidden md:flex shrink-0 bg-surface border-r border-border flex-col pb-3 gap-1",
+                            railExpanded ? "w-56 items-stretch" : "w-16 items-center",
+                        ].join(" ")}
                     >
                         <RailIcon src={iconSrc} />
                         {navItems.map(({ id, href, label, icon: Icon }) => (
@@ -318,17 +333,37 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
                                 href={href}
                                 aria-label={label}
                                 aria-current={id === active ? "page" : undefined}
-                                title={label}
+                                title={railExpanded ? undefined : label}
                                 className={[
-                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    "h-10 flex items-center rounded-sm",
+                                    railExpanded ? "gap-3 px-3 mx-2 text-sm font-medium" : "w-10 justify-center",
                                     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" />
+                                <Icon size={20} aria-hidden="true" className="shrink-0" />
+                                {railExpanded && <span className="truncate">{label}</span>}
                             </a>
                         ))}
+                        <button
+                            type="button"
+                            aria-expanded={railExpanded}
+                            aria-label={railExpanded ? "Collapse the menu" : "Expand the menu"}
+                            title={railExpanded ? "Collapse the menu" : "Expand the menu"}
+                            onClick={toggleRail}
+                            className={[
+                                "mt-auto h-10 flex items-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text",
+                                railExpanded ? "gap-3 px-3 mx-2 text-sm font-medium" : "w-10 justify-center",
+                            ].join(" ")}
+                        >
+                            {railExpanded ? (
+                                <HiOutlineChevronDoubleLeft size={20} aria-hidden="true" className="shrink-0" />
+                            ) : (
+                                <HiOutlineChevronDoubleRight size={20} aria-hidden="true" className="shrink-0" />
+                            )}
+                            {railExpanded && <span>Collapse</span>}
+                        </button>
                     </nav>
                     {/* Below `md` the sections are a menu that slides in from the left: ten or so of them don't fit a bar along the bottom. */}
                     <Drawer open={menuOpen} onClose={() => setMenuOpen(false)} title="Admin" fullScreen>

package/apps/shared/components/admin/layout/railPreference.ts

@@ -0,0 +1,25 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** Where this browser remembers whether the admin console's side rail is showing its labels. */
+export const RAIL_EXPANDED_KEY = "rapidmx:admin-rail-expanded";
+
+/** Whether the rail was left expanded. A missing or blocked store means collapsed, as it always was. */
+export function readRailExpanded(): boolean {
+    try {
+        return localStorage.getItem(RAIL_EXPANDED_KEY) === "true";
+    } catch {
+        return false;
+    }
+}
+
+/** Remembers the rail's state. Best effort: a blocked store only means it starts collapsed the next time. */
+export function writeRailExpanded(expanded: boolean): void {
+    try {
+        localStorage.setItem(RAIL_EXPANDED_KEY, String(expanded));
+    } catch {
+        // Nothing to do.
+    }
+}

package/apps/shared/components/calendar/CalendarListSidebar.tsx

@@ -7,6 +7,7 @@ import { CALENDAR_COLOR_PALETTE, accentColorForMailbox, colorForFolder } from ".
 import { Folder, Mailbox } from "../../../../lib/mail/mailApi.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
+import { SharedMailboxMark } from "../mail/layout/folderIcons.js";
 
 export interface CalendarListSidebarMailbox {
     mailbox: Mailbox;
@@ -108,7 +109,7 @@ export default function CalendarListSidebar({
     return (
         <nav aria-label="My calendars" className="p-3 border-t border-border flex flex-col gap-3">
             {mailboxCalendars.map(({ mailbox, calendarFolders, error: mailboxError }) => {
-                const title = multiple ? `${mailbox.displayName}${mailbox.ownerUserUid ? "" : " (shared)"}` : "My calendars";
+                const title = multiple ? mailbox.displayName : "My calendars";
                 return (
                     <div key={mailbox.uid}>
                         <div className="flex items-center justify-between mb-1 gap-2">
@@ -120,7 +121,10 @@ export default function CalendarListSidebar({
                                         style={{ backgroundColor: accentColorForMailbox(mailbox.uid) }}
                                     />
                                 )}
-                                <span className="truncate">{title}</span>
+                                <span className="truncate">
+                                    {title}
+                                    {multiple && !mailbox.ownerUserUid && <SharedMailboxMark />}
+                                </span>
                             </h2>
                             <button
                                 type="button"

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useContext, useId, useRef } from "react";
-import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlinePaintBrush, HiOutlineSun } from "react-icons/hi2";
 import type { AppearanceMode } from "../../../../lib/appearance/preferencesApi.js";
 import { AppearanceContext, INERT_APPEARANCE } from "../../appearance/appearanceContext.js";
 
@@ -49,7 +49,8 @@ export default function ThemeSwitch() {
 
     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">
+            <span id={labelId} className="flex items-center gap-2 text-sm text-text">
+                <HiOutlinePaintBrush size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                 Theme
             </span>
             <div role="radiogroup" aria-labelledby={labelId} className="inline-flex rounded-sm border border-border bg-surface-alt p-0.5">

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

@@ -5,7 +5,17 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
-import { HiOutlineArrowUturnLeft, HiOutlineShieldCheck } from "react-icons/hi2";
+import {
+    HiOutlineArrowRightOnRectangle,
+    HiOutlineArrowUturnLeft,
+    HiOutlineBell,
+    HiOutlineBellAlert,
+    HiOutlineClock,
+    HiOutlineCog6Tooth,
+    HiOutlineCommandLine,
+    HiOutlineShieldCheck,
+    HiOutlineUserCircle,
+} from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, Profile, profileInitials } from "../../../../lib/auth/profileApi.js";
 import { listMailboxes, Mailbox } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -46,8 +56,7 @@ export interface UserMenuProps {
     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. */
+     * `/settings/profile`, the first settings section; repoint this at a real `/settings` landing page once one is worth building. */
     showSettingsLink?: boolean;
     /** Shows the notification controls, above "Admin Console"/"Sign Out": a "Notifications" on/off switch for every pop-up and,
      * while the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `notifications/preferences.ts`
@@ -346,8 +355,9 @@ export default function UserMenu({
                         <a
                             role="menuitem"
                             href={accountUrl}
-                            className="block px-3.5 py-2 text-sm text-text hover:bg-surface-alt"
+                            className="flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt"
                         >
+                            <HiOutlineUserCircle size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                             Account
                         </a>
                     )}
@@ -355,8 +365,9 @@ export default function UserMenu({
                         <a
                             role="menuitem"
                             href={SETTINGS_HREF}
-                            className="block px-3.5 py-2 text-sm text-text hover:bg-surface-alt"
+                            className="flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt"
                         >
+                            <HiOutlineCog6Tooth size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                             Settings
                         </a>
                     )}
@@ -368,7 +379,10 @@ export default function UserMenu({
                             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"
                         >
-                            <span>Notifications</span>
+                            <span className="flex items-center gap-2">
+                                <HiOutlineBell size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
+                                Notifications
+                            </span>
                             <span className="text-xs font-semibold text-text-muted">{popups ? "On" : "Off"}</span>
                         </button>
                     )}
@@ -377,8 +391,9 @@ export default function UserMenu({
                             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"
+                            className="flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
                         >
+                            <HiOutlineBellAlert size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                             Turn on desktop notifications
                         </button>
                     )}
@@ -392,7 +407,10 @@ export default function UserMenu({
                             }}
                             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>
+                            <span className="flex items-center gap-2">
+                                <HiOutlineClock size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
+                                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>
@@ -410,8 +428,9 @@ export default function UserMenu({
                                 setOpen(false);
                                 onShowShortcuts();
                             }}
-                            className="block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
+                            className="flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
                         >
+                            <HiOutlineCommandLine size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                             Keyboard shortcuts
                         </button>
                     )}
@@ -429,8 +448,9 @@ export default function UserMenu({
                         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"
+                        className="flex w-full items-center gap-2 text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt"
                     >
+                        <HiOutlineArrowRightOnRectangle size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
                         Sign Out
                     </button>
                 </div>,

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -30,6 +30,7 @@ import {
 } from "../../../mail/folderCounts.js";
 import { ALL_MAILBOXES_SECTION, useSidebarSections } from "../../../mail/useCollapsedSections.js";
 import FolderBadgeChip from "./FolderBadgeChip.js";
+import { FolderTypeIcon, SharedMailboxMark } from "./folderIcons.js";
 import SidebarSection from "./SidebarSection.js";
 import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
 import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
@@ -391,7 +392,10 @@ export default function MailShell({
                                                     : "text-text hover:bg-surface-alt",
                                             ].join(" ")}
                                         >
-                                            <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>{FOLDER_LABELS[type]}</span>
+                                            <span className={["flex items-center gap-2.5 min-w-0", badge?.kind === "unread" ? "font-semibold" : ""].join(" ")}>
+                                                <FolderTypeIcon type={type} />
+                                                <span className="truncate">{FOLDER_LABELS[type]}</span>
+                                            </span>
                                             {badge && <FolderBadgeChip badge={badge} />}
                                         </a>
                                     );
@@ -405,7 +409,7 @@ export default function MailShell({
                                 label={
                                     <>
                                         {mailbox.displayName}
-                                        {mailbox.ownerUserUid ? "" : " (shared)"}
+                                        {!mailbox.ownerUserUid && <SharedMailboxMark />}
                                     </>
                                 }
                                 collapsible={collapsible}
@@ -431,7 +435,10 @@ export default function MailShell({
                                                 data-folder-placeholder={row.type}
                                                 className="flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted"
                                             >
-                                                <span>{FOLDER_LABELS[row.type]}</span>
+                                                <span className="flex items-center gap-2.5 min-w-0">
+                                                    <FolderTypeIcon type={row.type} />
+                                                    <span className="truncate">{FOLDER_LABELS[row.type]}</span>
+                                                </span>
                                                 {row.type === "outbox" && <OutboxBadge total={sending} pendingHere={sending} />}
                                             </div>
                                         );
@@ -451,8 +458,9 @@ export default function MailShell({
                                                 : "text-text hover:bg-surface-alt",
                                         ].join(" ")}
                                     >
-                                        <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>
-                                            {FOLDER_LABELS[folder.type] ?? folder.name}
+                                        <span className={["flex items-center gap-2.5 min-w-0", badge?.kind === "unread" ? "font-semibold" : ""].join(" ")}>
+                                            <FolderTypeIcon type={folder.type} />
+                                            <span className="truncate">{FOLDER_LABELS[folder.type] ?? folder.name}</span>
                                         </span>
                                         {badge &&
                                             (folder.type === "outbox" ? (

package/apps/shared/components/mail/layout/folderIcons.tsx

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { IconType } from "react-icons";
+import {
+    HiOutlineArchiveBox,
+    HiOutlineArrowUpTray,
+    HiOutlineBookOpen,
+    HiOutlineCalendarDays,
+    HiOutlineClipboardDocumentList,
+    HiOutlineFolder,
+    HiOutlineInbox,
+    HiOutlinePaperAirplane,
+    HiOutlinePencilSquare,
+    HiOutlineShieldExclamation,
+    HiOutlineTrash,
+    HiOutlineUsers,
+    HiUserGroup,
+} from "react-icons/hi2";
+import type { FolderType } from "../../../../../lib/mail/mailApi.js";
+
+const FOLDER_ICONS: Record<FolderType, IconType> = {
+    inbox: HiOutlineInbox,
+    drafts: HiOutlinePencilSquare,
+    sent_items: HiOutlinePaperAirplane,
+    outbox: HiOutlineArrowUpTray,
+    junk: HiOutlineShieldExclamation,
+    archive: HiOutlineArchiveBox,
+    deleted_items: HiOutlineTrash,
+    calendar: HiOutlineCalendarDays,
+    contacts: HiOutlineUsers,
+    tasks: HiOutlineClipboardDocumentList,
+    notes: HiOutlineBookOpen,
+    user: HiOutlineFolder,
+};
+
+/** The icon drawn to the left of a folder's name: one per well-known folder, a plain folder for the user's own. */
+export function FolderTypeIcon({ type }: { type: FolderType | string }) {
+    const Icon = FOLDER_ICONS[type as FolderType] ?? HiOutlineFolder;
+    return <Icon size={18} aria-hidden="true" className="shrink-0 text-text-muted" />;
+}
+
+/** What marks a mailbox other people share with this user, beside its name: the group icon, and for a screen reader the word it stands for. */
+export function SharedMailboxMark() {
+    return (
+        <>
+            <HiUserGroup size={14} aria-hidden="true" className="inline-block ml-1.5 align-[-2px] shrink-0 text-text-muted" />
+            {" "}
+            <span className="sr-only">(shared)</span>
+        </>
+    );
+}

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -3,7 +3,22 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineBars3 } from "react-icons/hi2";
+import type { IconType } from "react-icons";
+import {
+    HiOutlineArrowUturnLeft,
+    HiOutlineBars3,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFunnel,
+    HiOutlineLockClosed,
+    HiOutlineNoSymbol,
+    HiOutlinePaintBrush,
+    HiOutlinePencilSquare,
+    HiOutlinePuzzlePiece,
+    HiOutlineShieldCheck,
+    HiOutlineTag,
+    HiOutlineUserCircle,
+    HiOutlineUsers,
+} from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
 import Drawer from "../../../../../lib/components/overlays/Drawer.js";
 import { Mailbox, listMailboxes } from "../../../../../lib/mail/mailApi.js";
@@ -20,21 +35,23 @@ export interface SettingsSectionDef {
     id: string;
     href: string;
     label: string;
+    /** Drawn beside the label in the sidebar. */
+    icon: IconType;
 }
 
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS: SettingsSectionDef[] = [
-    { id: "profile", href: "/settings/profile", label: "Profile" },
-    { id: "appearance", href: "/settings/appearance", label: "Appearance" },
-    { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
-    { id: "filters", href: "/settings/filters", label: "Mail Filters" },
-    { id: "blocked-senders", href: "/settings/blocked-senders", label: "Blocked & Safe Senders" },
-    { id: "signatures", href: "/settings/signatures", label: "Signatures" },
-    { id: "labels", href: "/settings/labels", label: "Labels" },
-    { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
-    { id: "encryption", href: "/settings/encryption", label: "Encryption" },
-    { id: "sharing", href: "/settings/sharing", label: "Sharing" },
-    { id: "privacy", href: "/settings/privacy", label: "Privacy & Data" },
+    { id: "profile", href: "/settings/profile", label: "Profile", icon: HiOutlineUserCircle },
+    { id: "appearance", href: "/settings/appearance", label: "Appearance", icon: HiOutlinePaintBrush },
+    { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies", icon: HiOutlineArrowUturnLeft },
+    { id: "filters", href: "/settings/filters", label: "Mail Filters", icon: HiOutlineFunnel },
+    { id: "blocked-senders", href: "/settings/blocked-senders", label: "Blocked & Safe Senders", icon: HiOutlineNoSymbol },
+    { id: "signatures", href: "/settings/signatures", label: "Signatures", icon: HiOutlinePencilSquare },
+    { id: "labels", href: "/settings/labels", label: "Labels", icon: HiOutlineTag },
+    { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts", icon: HiOutlineEnvelopeOpen },
+    { id: "encryption", href: "/settings/encryption", label: "Encryption", icon: HiOutlineLockClosed },
+    { id: "sharing", href: "/settings/sharing", label: "Sharing", icon: HiOutlineUsers },
+    { id: "privacy", href: "/settings/privacy", label: "Privacy & Data", icon: HiOutlineShieldCheck },
 ];
 
 /** A `SETTINGS_SECTIONS` id, or a plugin's `settingsSections` item id (see `PluginNav`). */
@@ -47,6 +64,7 @@ export function settingsSections(pluginNav?: PluginNav): SettingsSectionDef[] {
         id,
         href,
         label,
+        icon: HiOutlinePuzzlePiece,
     }));
 }
 
@@ -207,10 +225,11 @@ export default function SettingsShell({
                             href={`${section.href}?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
                             aria-current={section.id === active ? "page" : undefined}
                             className={[
-                                "block px-2.5 py-1.5 rounded-sm text-sm",
+                                "flex items-center gap-2.5 px-2.5 py-1.5 rounded-sm text-sm",
                                 section.id === active ? "bg-primary/10 text-primary-dark font-medium" : "text-text hover:bg-surface-alt",
                             ].join(" ")}
                         >
+                            <section.icon size={18} aria-hidden="true" className="shrink-0" />
                             {section.label}
                         </a>
                     ))}

package/apps/shared/navigation/appHrefs.ts

@@ -12,10 +12,10 @@ export const APP_HREFS = {
 } as const;
 
 /**
- * Settings is reached from the account menu, not the rail. It links straight to the first settings section, the only one that always
- * exists - repoint this at a real `/settings` landing page once there is one.
+ * Settings is reached from the account menu, not the rail. It links straight to the Profile section, the first of them and the one that
+ * always exists - repoint this at a real `/settings` landing page once there is one.
  */
-export const SETTINGS_HREF = "/settings/auto-reply";
+export const SETTINGS_HREF = "/settings/profile";
 
 /** Whether `pathname` is a page of Settings (any section), which is what "already there" means for it. */
 export function isSettingsPath(pathname: string): boolean {

package/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../../styles/app.css";
 import { useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineCpuChip, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, HiOutlineBars3, } from "react-icons/hi2";
+import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineCpuChip, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, HiOutlineBars3, HiOutlineChevronDoubleLeft, HiOutlineChevronDoubleRight, } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "../../../../../lib/util/api.js";
 import { getSetupStatus } from "../../../../../lib/admin/setupApi.js";
 import { useSessionRefresh } from "../../../../../lib/auth/session.js";
@@ -16,6 +16,7 @@ import Button from "../../../../../lib/components/buttons/Button.js";
 import Drawer from "../../../../../lib/components/overlays/Drawer.js";
 import { FrameBrandingFooter, useBrandingHtml } from "../../layout/BrandingChrome.js";
 import RailIcon from "../../layout/RailIcon.js";
+import { readRailExpanded, writeRailExpanded } from "./railPreference.js";
 import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
 import UserMenu from "../../layout/UserMenu.js";
 import { clearElevationAttempt, elevationAttemptedRecently, elevationUrl, isElevationRequired, recordElevationAttempt, } from "../elevation.js";
@@ -114,6 +115,15 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [menuOpen, setMenuOpen] = useState(false);
+    // The side rail shows icons alone, or icons with their labels. Read after the first render: the page is drawn on the server first, which cannot know.
+    const [railExpanded, setRailExpanded] = useState(false);
+    useEffect(() => setRailExpanded(readRailExpanded()), []);
+    function toggleRail() {
+        setRailExpanded((expanded) => {
+            writeRailExpanded(!expanded);
+            return !expanded;
+        });
+    }
     // `branding` only feeds the footer below: the admin-configured header is for the webmail and public pages, not the
     // console. `useBranding()` is still what injects the custom stylesheet and supplies the rail's icon.
     const { branding, iconSrc } = useBranding();
@@ -198,12 +208,19 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
     else {
         const navItems = adminNavItems(pluginNav);
         const activeItem = [...navItems, ...OFF_RAIL_ITEMS].find((item) => item.id === active);
-        content = (_jsx("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Admin sections", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center pb-3 gap-1", children: [_jsx(RailIcon, { src: iconSrc }), navItems.map(({ id, href, label, icon: Icon }) => (_jsx("a", { 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",
+        content = (_jsx("div", { className: "rr-frame-bg min-h-screen flex flex-col", children: _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Admin sections", className: [
+                            "hidden md:flex shrink-0 bg-surface border-r border-border flex-col pb-3 gap-1",
+                            railExpanded ? "w-56 items-stretch" : "w-16 items-center",
+                        ].join(" "), children: [_jsx(RailIcon, { src: iconSrc }), navItems.map(({ id, href, label, icon: Icon }) => (_jsxs("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: railExpanded ? undefined : label, className: [
+                                    "h-10 flex items-center rounded-sm",
+                                    railExpanded ? "gap-3 px-3 mx-2 text-sm font-medium" : "w-10 justify-center",
                                     id === active
                                         ? "bg-primary/10 text-primary-dark"
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(Drawer, { open: menuOpen, onClose: () => setMenuOpen(false), title: "Admin", fullScreen: true, children: _jsx("nav", { "aria-label": "Admin menu", className: "flex flex-col gap-1 -mx-2", children: navItems.map(({ id, href, label, icon: Icon }) => (_jsxs("a", { href: href, "aria-current": id === active ? "page" : undefined, onClick: () => setMenuOpen(false), className: [
+                                ].join(" "), children: [_jsx(Icon, { size: 20, "aria-hidden": "true", className: "shrink-0" }), railExpanded && _jsx("span", { className: "truncate", children: label })] }, id))), _jsxs("button", { type: "button", "aria-expanded": railExpanded, "aria-label": railExpanded ? "Collapse the menu" : "Expand the menu", title: railExpanded ? "Collapse the menu" : "Expand the menu", onClick: toggleRail, className: [
+                                    "mt-auto h-10 flex items-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text",
+                                    railExpanded ? "gap-3 px-3 mx-2 text-sm font-medium" : "w-10 justify-center",
+                                ].join(" "), children: [railExpanded ? (_jsx(HiOutlineChevronDoubleLeft, { size: 20, "aria-hidden": "true", className: "shrink-0" })) : (_jsx(HiOutlineChevronDoubleRight, { size: 20, "aria-hidden": "true", className: "shrink-0" })), railExpanded && _jsx("span", { children: "Collapse" })] })] }), _jsx(Drawer, { open: menuOpen, onClose: () => setMenuOpen(false), title: "Admin", fullScreen: true, children: _jsx("nav", { "aria-label": "Admin menu", className: "flex flex-col gap-1 -mx-2", children: navItems.map(({ id, href, label, icon: Icon }) => (_jsxs("a", { href: href, "aria-current": id === active ? "page" : undefined, onClick: () => setMenuOpen(false), className: [
                                     "flex items-center gap-3 px-3 py-2.5 rounded-sm text-sm font-medium",
                                     id === active ? "bg-primary/10 text-primary-dark" : "text-text hover:bg-surface-alt",
                                 ].join(" "), children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), label] }, id))) }) }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("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-4 md:px-6", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("button", { type: "button", className: "md:hidden shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open menu", onClick: () => setMenuOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide truncate", children: activeItem?.label })] }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut, showMailLink: true })] }), _jsx("div", { id: "app-content", className: "flex-1", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));

package/dist/apps/shared/components/admin/layout/railPreference.d.ts

@@ -0,0 +1,6 @@
+/** Where this browser remembers whether the admin console's side rail is showing its labels. */
+export declare const RAIL_EXPANDED_KEY = "rapidmx:admin-rail-expanded";
+/** Whether the rail was left expanded. A missing or blocked store means collapsed, as it always was. */
+export declare function readRailExpanded(): boolean;
+/** Remembers the rail's state. Best effort: a blocked store only means it starts collapsed the next time. */
+export declare function writeRailExpanded(expanded: boolean): void;

package/dist/apps/shared/components/admin/layout/railPreference.js

@@ -0,0 +1,24 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Where this browser remembers whether the admin console's side rail is showing its labels. */
+export const RAIL_EXPANDED_KEY = "rapidmx:admin-rail-expanded";
+/** Whether the rail was left expanded. A missing or blocked store means collapsed, as it always was. */
+export function readRailExpanded() {
+    try {
+        return localStorage.getItem(RAIL_EXPANDED_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+}
+/** Remembers the rail's state. Best effort: a blocked store only means it starts collapsed the next time. */
+export function writeRailExpanded(expanded) {
+    try {
+        localStorage.setItem(RAIL_EXPANDED_KEY, String(expanded));
+    }
+    catch {
+        // Nothing to do.
+    }
+}

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

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { CALENDAR_COLOR_PALETTE, accentColorForMailbox, colorForFolder } from "../../../../lib/calendar/calendarColors.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
+import { SharedMailboxMark } from "../mail/layout/folderIcons.js";
 /**
  * Calendar's left-sidebar checklist of calendars — one row per `calendar`-type folder, a color swatch,
  * and a checkbox controlling whether that calendar's events are currently shown (the checked set is owned
@@ -49,7 +50,7 @@ export default function CalendarListSidebar({ mailboxCalendars, checkedFolderUid
     }
     const addForm = (_jsxs("form", { onSubmit: handleAdd, className: "flex flex-col gap-1.5 mt-2", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New calendar name", value: name, onChange: (e) => setName(e.target.value), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("div", { className: "flex items-center gap-1", role: "radiogroup", "aria-label": "Calendar color", children: CALENDAR_COLOR_PALETTE.map((swatch) => (_jsx("button", { type: "button", "aria-label": `Color ${swatch}`, "aria-pressed": color === swatch, onClick: () => setColor(swatch), className: ["w-4 h-4 rounded-full shrink-0", color === swatch ? "ring-2 ring-offset-1 ring-text" : ""].join(" "), style: { backgroundColor: swatch } }, swatch))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "submit", disabled: saving, className: "text-xs font-semibold text-primary-dark", children: "Add" }), _jsx("button", { type: "button", onClick: () => setAddingFor(null), className: "text-xs text-text-muted", children: "Cancel" })] })] }));
     return (_jsx("nav", { "aria-label": "My calendars", className: "p-3 border-t border-border flex flex-col gap-3", children: mailboxCalendars.map(({ mailbox, calendarFolders, error: mailboxError }) => {
-            const title = multiple ? `${mailbox.displayName}${mailbox.ownerUserUid ? "" : " (shared)"}` : "My calendars";
-            return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1 gap-2", children: [_jsxs("h2", { className: "flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-text-muted min-w-0", children: [multiple && (_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: accentColorForMailbox(mailbox.uid) } })), _jsx("span", { className: "truncate", children: title })] }), _jsx("button", { type: "button", onClick: () => startAdding(mailbox.uid), "aria-label": multiple ? `Add calendar to ${mailbox.displayName}` : "Add calendar", className: "text-xs font-bold text-primary-dark hover:underline shrink-0", children: "+" })] }), mailboxError && (_jsx("div", { className: "mb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: calendarFolders.map((folder) => (_jsxs("label", { className: "flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: checkedFolderUids.has(folder.uid), onChange: () => onToggle(folder.uid), style: { accentColor: colorFor(folder) } }), _jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: colorFor(folder) } }), _jsx("span", { className: "truncate", children: folder.name })] }, folder.uid))) }), addingFor === mailbox.uid && addForm] }, mailbox.uid));
+            const title = multiple ? mailbox.displayName : "My calendars";
+            return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1 gap-2", children: [_jsxs("h2", { className: "flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-text-muted min-w-0", children: [multiple && (_jsx("span", { "aria-hidden": "true", className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: accentColorForMailbox(mailbox.uid) } })), _jsxs("span", { className: "truncate", children: [title, multiple && !mailbox.ownerUserUid && _jsx(SharedMailboxMark, {})] })] }), _jsx("button", { type: "button", onClick: () => startAdding(mailbox.uid), "aria-label": multiple ? `Add calendar to ${mailbox.displayName}` : "Add calendar", className: "text-xs font-bold text-primary-dark hover:underline shrink-0", children: "+" })] }), mailboxError && (_jsx("div", { className: "mb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: calendarFolders.map((folder) => (_jsxs("label", { className: "flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: checkedFolderUids.has(folder.uid), onChange: () => onToggle(folder.uid), style: { accentColor: colorFor(folder) } }), _jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: colorFor(folder) } }), _jsx("span", { className: "truncate", children: folder.name })] }, folder.uid))) }), addingFor === mailbox.uid && addForm] }, mailbox.uid));
         }) }));
 }

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

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useContext, useId, useRef } from "react";
-import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlineSun } from "react-icons/hi2";
+import { HiOutlineComputerDesktop, HiOutlineMoon, HiOutlinePaintBrush, 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 },
@@ -42,7 +42,7 @@ export default function ThemeSwitch() {
             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) => {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3.5 py-2 border-b border-border", children: [_jsxs("span", { id: labelId, className: "flex items-center gap-2 text-sm text-text", children: [_jsx(HiOutlinePaintBrush, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "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;

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

@@ -18,8 +18,7 @@ export interface UserMenuProps {
     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. */
+     * `/settings/profile`, the first settings section; repoint this at a real `/settings` landing page once one is worth building. */
     showSettingsLink?: boolean;
     /** Shows the notification controls, above "Admin Console"/"Sign Out": a "Notifications" on/off switch for every pop-up and,
      * while the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `notifications/preferences.ts`

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
-import { HiOutlineArrowUturnLeft, HiOutlineShieldCheck } from "react-icons/hi2";
+import { HiOutlineArrowRightOnRectangle, HiOutlineArrowUturnLeft, HiOutlineBell, HiOutlineBellAlert, HiOutlineClock, HiOutlineCog6Tooth, HiOutlineCommandLine, HiOutlineShieldCheck, HiOutlineUserCircle, } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "../../../../lib/auth/profileApi.js";
 import { listMailboxes } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -206,11 +206,11 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     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 })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Notifications" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showMailLink && (_jsxs("a", { role: "menuitem", href: APP_HREFS.mail, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Back to mail"] })), _jsx(ThemeSwitch, {}), accountUrl && (_jsxs("a", { role: "menuitem", href: accountUrl, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineUserCircle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Account"] })), showSettingsLink && (_jsxs("a", { role: "menuitem", href: SETTINGS_HREF, className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCog6Tooth, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "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: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineBell, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Notifications"] }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineBellAlert, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "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 && !isMobile && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
+                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(HiOutlineClock, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Recent notifications"] }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsxs("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)] }));
+                            }, className: "flex w-full items-center gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineCommandLine, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "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"] })), _jsxs("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "flex w-full items-center gap-2 text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineArrowRightOnRectangle, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Sign Out"] })] }), document.body)] }));
 }

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -22,6 +22,7 @@ import { primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { badgeFor, countOfFolder, inboxUnreadTotal, unreadBadgeTotal, } from "../../../mail/folderCounts.js";
 import { ALL_MAILBOXES_SECTION, useSidebarSections } from "../../../mail/useCollapsedSections.js";
 import FolderBadgeChip from "./FolderBadgeChip.js";
+import { FolderTypeIcon, SharedMailboxMark } from "./folderIcons.js";
 import SidebarSection from "./SidebarSection.js";
 import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
 import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
@@ -220,13 +221,13 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
                                         aggregateFolderType === type
                                             ? "bg-primary/10 text-primary-dark font-semibold"
                                             : "text-text hover:bg-surface-alt",
-                                    ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[type] }), badge && _jsx(FolderBadgeChip, { badge: badge })] }, type));
-                            }) })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${mailbox.uid}`, label: _jsxs(_Fragment, { children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), collapsible: collapsible, expanded: sections.isExpanded(mailbox.uid), onToggle: () => sections.toggle(mailbox.uid), unread: unreadBadgeTotal(folders, counts), notice: mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), children: folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
+                                    ].join(" "), children: [_jsxs("span", { className: ["flex items-center gap-2.5 min-w-0", badge?.kind === "unread" ? "font-semibold" : ""].join(" "), children: [_jsx(FolderTypeIcon, { type: type }), _jsx("span", { className: "truncate", children: FOLDER_LABELS[type] })] }), badge && _jsx(FolderBadgeChip, { badge: badge })] }, type));
+                            }) })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${mailbox.uid}`, label: _jsxs(_Fragment, { children: [mailbox.displayName, !mailbox.ownerUserUid && _jsx(SharedMailboxMark, {})] }), collapsible: collapsible, expanded: sections.isExpanded(mailbox.uid), onToggle: () => sections.toggle(mailbox.uid), unread: unreadBadgeTotal(folders, counts), notice: mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), children: folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
                                 if (row.kind === "placeholder") {
                                     // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
                                     // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
                                     const sending = pendingCountFor(mailbox.uid, pendingSends);
-                                    return (_jsxs("div", { "data-folder-placeholder": row.type, className: "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted", children: [_jsx("span", { children: FOLDER_LABELS[row.type] }), row.type === "outbox" && _jsx(OutboxBadge, { total: sending, pendingHere: sending })] }, `placeholder-${row.type}`));
+                                    return (_jsxs("div", { "data-folder-placeholder": row.type, className: "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted", children: [_jsxs("span", { className: "flex items-center gap-2.5 min-w-0", children: [_jsx(FolderTypeIcon, { type: row.type }), _jsx("span", { className: "truncate", children: FOLDER_LABELS[row.type] })] }), row.type === "outbox" && _jsx(OutboxBadge, { total: sending, pendingHere: sending })] }, `placeholder-${row.type}`));
                                 }
                                 const folder = row.folder;
                                 const badge = badgeFor(folder.type, countOfFolder(folder, counts));
@@ -235,7 +236,7 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
                                         folder.uid === folderUid
                                             ? "bg-primary/10 text-primary-dark font-semibold"
                                             : "text-text hover:bg-surface-alt",
-                                    ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[folder.type] ?? folder.name }), badge &&
+                                    ].join(" "), children: [_jsxs("span", { className: ["flex items-center gap-2.5 min-w-0", badge?.kind === "unread" ? "font-semibold" : ""].join(" "), children: [_jsx(FolderTypeIcon, { type: folder.type }), _jsx("span", { className: "truncate", children: FOLDER_LABELS[folder.type] ?? folder.name })] }), badge &&
                                             (folder.type === "outbox" ? (_jsx(OutboxBadge, { total: badge.value, status: outboxStatuses[folder.uid], pendingHere: pendingCountFor(mailbox.uid, pendingSends) })) : (_jsx(FolderBadgeChip, { badge: badge })))] }, folder.uid));
                             }) }, mailbox.uid)))] }))] }));
         inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));

package/dist/apps/shared/components/mail/layout/folderIcons.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { FolderType } from "../../../../../lib/mail/mailApi.js";
+/** The icon drawn to the left of a folder's name: one per well-known folder, a plain folder for the user's own. */
+export declare function FolderTypeIcon({ type }: {
+    type: FolderType | string;
+}): React.JSX.Element;
+/** What marks a mailbox other people share with this user, beside its name: the group icon, and for a screen reader the word it stands for. */
+export declare function SharedMailboxMark(): React.JSX.Element;

package/dist/apps/shared/components/mail/layout/folderIcons.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineArchiveBox, HiOutlineArrowUpTray, HiOutlineBookOpen, HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineFolder, HiOutlineInbox, HiOutlinePaperAirplane, HiOutlinePencilSquare, HiOutlineShieldExclamation, HiOutlineTrash, HiOutlineUsers, HiUserGroup, } from "react-icons/hi2";
+const FOLDER_ICONS = {
+    inbox: HiOutlineInbox,
+    drafts: HiOutlinePencilSquare,
+    sent_items: HiOutlinePaperAirplane,
+    outbox: HiOutlineArrowUpTray,
+    junk: HiOutlineShieldExclamation,
+    archive: HiOutlineArchiveBox,
+    deleted_items: HiOutlineTrash,
+    calendar: HiOutlineCalendarDays,
+    contacts: HiOutlineUsers,
+    tasks: HiOutlineClipboardDocumentList,
+    notes: HiOutlineBookOpen,
+    user: HiOutlineFolder,
+};
+/** The icon drawn to the left of a folder's name: one per well-known folder, a plain folder for the user's own. */
+export function FolderTypeIcon({ type }) {
+    const Icon = FOLDER_ICONS[type] ?? HiOutlineFolder;
+    return _jsx(Icon, { size: 18, "aria-hidden": "true", className: "shrink-0 text-text-muted" });
+}
+/** What marks a mailbox other people share with this user, beside its name: the group icon, and for a screen reader the word it stands for. */
+export function SharedMailboxMark() {
+    return (_jsxs(_Fragment, { children: [_jsx(HiUserGroup, { size: 14, "aria-hidden": "true", className: "inline-block ml-1.5 align-[-2px] shrink-0 text-text-muted" }), " ", _jsx("span", { className: "sr-only", children: "(shared)" })] }));
+}

package/dist/apps/shared/components/settings/layout/SettingsShell.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+import type { IconType } from "react-icons";
 import { Mailbox } from "../../../../../lib/mail/mailApi.js";
 import { AppShellProps } from "../../layout/AppShell.js";
 import { PluginNav } from "../../../plugins/pluginNav.js";
@@ -6,6 +7,8 @@ export interface SettingsSectionDef {
     id: string;
     href: string;
     label: string;
+    /** Drawn beside the label in the sidebar. */
+    icon: IconType;
 }
 /** Every settings section with its own sidebar entry. */
 export declare const SETTINGS_SECTIONS: SettingsSectionDef[];

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineBars3 } from "react-icons/hi2";
+import { HiOutlineArrowUturnLeft, HiOutlineBars3, HiOutlineEnvelopeOpen, HiOutlineFunnel, HiOutlineLockClosed, HiOutlineNoSymbol, HiOutlinePaintBrush, HiOutlinePencilSquare, HiOutlinePuzzlePiece, HiOutlineShieldCheck, HiOutlineTag, HiOutlineUserCircle, HiOutlineUsers, } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
 import Drawer from "../../../../../lib/components/overlays/Drawer.js";
 import { listMailboxes } from "../../../../../lib/mail/mailApi.js";
@@ -18,17 +18,17 @@ import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
-    { id: "profile", href: "/settings/profile", label: "Profile" },
-    { id: "appearance", href: "/settings/appearance", label: "Appearance" },
-    { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
-    { id: "filters", href: "/settings/filters", label: "Mail Filters" },
-    { id: "blocked-senders", href: "/settings/blocked-senders", label: "Blocked & Safe Senders" },
-    { id: "signatures", href: "/settings/signatures", label: "Signatures" },
-    { id: "labels", href: "/settings/labels", label: "Labels" },
-    { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
-    { id: "encryption", href: "/settings/encryption", label: "Encryption" },
-    { id: "sharing", href: "/settings/sharing", label: "Sharing" },
-    { id: "privacy", href: "/settings/privacy", label: "Privacy & Data" },
+    { id: "profile", href: "/settings/profile", label: "Profile", icon: HiOutlineUserCircle },
+    { id: "appearance", href: "/settings/appearance", label: "Appearance", icon: HiOutlinePaintBrush },
+    { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies", icon: HiOutlineArrowUturnLeft },
+    { id: "filters", href: "/settings/filters", label: "Mail Filters", icon: HiOutlineFunnel },
+    { id: "blocked-senders", href: "/settings/blocked-senders", label: "Blocked & Safe Senders", icon: HiOutlineNoSymbol },
+    { id: "signatures", href: "/settings/signatures", label: "Signatures", icon: HiOutlinePencilSquare },
+    { id: "labels", href: "/settings/labels", label: "Labels", icon: HiOutlineTag },
+    { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts", icon: HiOutlineEnvelopeOpen },
+    { id: "encryption", href: "/settings/encryption", label: "Encryption", icon: HiOutlineLockClosed },
+    { id: "sharing", href: "/settings/sharing", label: "Sharing", icon: HiOutlineUsers },
+    { id: "privacy", href: "/settings/privacy", label: "Privacy & Data", icon: HiOutlineShieldCheck },
 ];
 /** `SETTINGS_SECTIONS` followed by the plugins' `settingsSections` items, core ids winning - see
  * `mergePluginNavItems`. */
@@ -37,6 +37,7 @@ export function settingsSections(pluginNav) {
         id,
         href,
         label,
+        icon: HiOutlinePuzzlePiece,
     }));
 }
 const SettingsShellContext = createContext({ mailboxes: [] });
@@ -111,7 +112,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                                 // server didn't send its nav item, so that falls back to the current path.
                                 const href = sections.find((s) => s.id === active)?.href ?? window.location.pathname;
                                 navigate(`${href}?mailboxUid=${encodeURIComponent(e.target.value)}`);
-                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: sections.map((section) => (_jsx("a", { 
+                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: sections.map((section) => (_jsxs("a", { 
                         // `inner` (this whole branch) is only ever computed once `status === "ready"`
                         // and `mailboxUid` has already resolved truthy — a falsy `mailboxUid` returns
                         // `<MailboxProvisioning />` above instead (which is what the `!` below records,
@@ -120,9 +121,9 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                         // structurally can't trigger" removal precedent (e.g.
                         // `DomainDetailContent.handleVerify`).
                         href: `${section.href}?mailboxUid=${encodeURIComponent(mailboxUid)}`, "aria-current": section.id === active ? "page" : undefined, className: [
-                            "block px-2.5 py-1.5 rounded-sm text-sm",
+                            "flex items-center gap-2.5 px-2.5 py-1.5 rounded-sm text-sm",
                             section.id === active ? "bg-primary/10 text-primary-dark font-medium" : "text-text hover:bg-surface-alt",
-                        ].join(" "), children: section.label }, section.id))) })] }));
+                        ].join(" "), children: [_jsx(section.icon, { size: 18, "aria-hidden": "true", className: "shrink-0" }), section.label] }, section.id))) })] }));
         inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Settings", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));

package/dist/apps/shared/navigation/appHrefs.d.ts

@@ -6,9 +6,9 @@ export declare const APP_HREFS: {
     readonly tasks: "/tasks";
 };
 /**
- * Settings is reached from the account menu, not the rail. It links straight to the first settings section, the only one that always
- * exists - repoint this at a real `/settings` landing page once there is one.
+ * Settings is reached from the account menu, not the rail. It links straight to the Profile section, the first of them and the one that
+ * always exists - repoint this at a real `/settings` landing page once there is one.
  */
-export declare const SETTINGS_HREF = "/settings/auto-reply";
+export declare const SETTINGS_HREF = "/settings/profile";
 /** Whether `pathname` is a page of Settings (any section), which is what "already there" means for it. */
 export declare function isSettingsPath(pathname: string): boolean;

package/dist/apps/shared/navigation/appHrefs.js

@@ -10,10 +10,10 @@ export const APP_HREFS = {
     tasks: "/tasks",
 };
 /**
- * Settings is reached from the account menu, not the rail. It links straight to the first settings section, the only one that always
- * exists - repoint this at a real `/settings` landing page once there is one.
+ * Settings is reached from the account menu, not the rail. It links straight to the Profile section, the first of them and the one that
+ * always exists - repoint this at a real `/settings` landing page once there is one.
  */
-export const SETTINGS_HREF = "/settings/auto-reply";
+export const SETTINGS_HREF = "/settings/profile";
 /** Whether `pathname` is a page of Settings (any section), which is what "already there" means for it. */
 export function isSettingsPath(pathname) {
     return pathname === "/settings" || pathname.startsWith("/settings/");

package/dist/lib/components/pickers/TimeZonePicker.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { compareTimeZones, describeTimeZone } from "../../util/timeZone.js";
+import { describeTimeZone, sortTimeZones } from "../../util/timeZone.js";
 /**
  * A time zone chooser that lists zones as "Los Angeles, America (GMT-07:00)", west to east and then by city, and has a search box in the list: typing narrows it to the zones whose
  * name or offset contains every word typed ("berlin", "gmt+9", "america indiana"). A button showing the chosen zone opens it; the arrow keys move
@@ -19,10 +19,19 @@ export default function TimeZonePicker({ id, "aria-label": label, "aria-describe
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
     const [active, setActive] = useState(-1);
-    // Listed by the offsets shown (which move with daylight saving): west to east, then by city.
-    const entries = useMemo(() => [...zones]
-        .sort((a, b) => compareTimeZones(a, b, at))
-        .map((zone) => ({ zone, text: describeTimeZone(zone, at), haystack: `${describeTimeZone(zone, at)} ${zone.replace(/_/g, " ")}`.toLowerCase() })), [zones, at]);
+    // Listed by the offsets shown (which move with daylight saving): west to east, then by city. Worked out only while the list is open - naming several
+    // hundred zones is the costly part, and a closed picker (most renders) shows one - and keyed on the date's value, since a caller may hand over a new `Date` each render.
+    const atTime = at?.getTime();
+    const entries = useMemo(() => {
+        if (!open) {
+            return [];
+        }
+        const on = new Date(atTime ?? Date.now());
+        return sortTimeZones(zones, on).map((zone) => {
+            const text = describeTimeZone(zone, on);
+            return { zone, text, haystack: `${text} ${zone.replace(/_/g, " ")}`.toLowerCase() };
+        });
+    }, [open, zones, atTime]);
     const shown = useMemo(() => {
         const words = query.toLowerCase().replace(/_/g, " ").split(/\s+/).filter(Boolean);
         return words.length === 0 ? entries : entries.filter((entry) => words.every((word) => entry.haystack.includes(word)));

package/dist/lib/util/timeZone.d.ts

@@ -22,7 +22,7 @@ export declare function describeTimeZone(zone: string, at?: Date): string;
  * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
  * doesn't know comes last.
  */
-export declare function compareTimeZones(a: string, b: string, at?: Date): number;
+export declare function sortTimeZones(zones: readonly string[], at?: Date): string[];
 /**
  * Every time zone the browser can name, for a picker (sorted by offset from UTC as it is now, then by city): `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
  * which is added), else just `extra` - the zones the caller already holds, such as a mailbox's current one.

package/dist/lib/util/timeZone.js

@@ -22,13 +22,25 @@ export function deviceTimeZone() {
  */
 export function zoneClock(zone, at = new Date()) {
     try {
-        const part = (style) => new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style }).formatToParts(at).find((p) => p.type === "timeZoneName").value;
+        const part = (style) => formatterFor(zone, style).formatToParts(at).find((p) => p.type === "timeZoneName").value;
         return { abbreviation: part("short"), offset: part("longOffset").replace("GMT", "") || "+00:00" };
     }
     catch {
         return null;
     }
 }
+/** Building an `Intl.DateTimeFormat` is by far the costly part of naming a zone's clock, and a list names hundreds: each is made once. */
+const formatters = new Map();
+function formatterFor(zone, style) {
+    const key = `${style}|${zone}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        // Throws for a zone the runtime doesn't know, which is then not remembered.
+        formatter = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+}
 /** A zone id split into its city and the region it is in: "America/Argentina/Buenos_Aires" is "Buenos Aires" in "America/Argentina"; "UTC" is in none. */
 function zoneNames(zone) {
     const parts = zone.split("/");
@@ -51,13 +63,15 @@ export function describeTimeZone(zone, at = new Date()) {
  * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
  * doesn't know comes last.
  */
-export function compareTimeZones(a, b, at = new Date()) {
-    const minutes = (zone) => {
+export function sortTimeZones(zones, at = new Date()) {
+    // Each zone's offset is read once, not once per comparison.
+    const keyed = zones.map((zone) => {
         const offset = zoneClock(zone, at)?.offset;
-        return offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
-    };
-    const byOffset = minutes(a) - minutes(b);
-    return (Number.isNaN(byOffset) ? 0 : byOffset) || zoneNames(a).city.localeCompare(zoneNames(b).city) || a.localeCompare(b);
+        const minutes = offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
+        return { zone, minutes, city: zoneNames(zone).city };
+    });
+    keyed.sort((a, b) => (a.minutes === b.minutes ? 0 : a.minutes < b.minutes ? -1 : 1) || a.city.localeCompare(b.city) || a.zone.localeCompare(b.zone));
+    return keyed.map((entry) => entry.zone);
 }
 /**
  * Every time zone the browser can name, for a picker (sorted by offset from UTC as it is now, then by city): `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
@@ -71,6 +85,5 @@ export function timeZoneOptions(...extra) {
     catch {
         zones = [];
     }
-    const now = new Date();
-    return [...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])].sort((a, b) => compareTimeZones(a, b, now));
+    return sortTimeZones([...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])]);
 }

package/lib/components/pickers/TimeZonePicker.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from "react";
-import { compareTimeZones, describeTimeZone } from "../../util/timeZone.js";
+import { describeTimeZone, sortTimeZones } from "../../util/timeZone.js";
 
 export interface TimeZonePickerProps {
     id?: string;
@@ -34,14 +34,19 @@ export default function TimeZonePicker({ id, "aria-label": label, "aria-describe
     const [query, setQuery] = useState("");
     const [active, setActive] = useState(-1);
 
-    // Listed by the offsets shown (which move with daylight saving): west to east, then by city.
-    const entries = useMemo(
-        () =>
-            [...zones]
-                .sort((a, b) => compareTimeZones(a, b, at))
-                .map((zone) => ({ zone, text: describeTimeZone(zone, at), haystack: `${describeTimeZone(zone, at)} ${zone.replace(/_/g, " ")}`.toLowerCase() })),
-        [zones, at],
-    );
+    // Listed by the offsets shown (which move with daylight saving): west to east, then by city. Worked out only while the list is open - naming several
+    // hundred zones is the costly part, and a closed picker (most renders) shows one - and keyed on the date's value, since a caller may hand over a new `Date` each render.
+    const atTime = at?.getTime();
+    const entries = useMemo(() => {
+        if (!open) {
+            return [];
+        }
+        const on = new Date(atTime ?? Date.now());
+        return sortTimeZones(zones, on).map((zone) => {
+            const text = describeTimeZone(zone, on);
+            return { zone, text, haystack: `${text} ${zone.replace(/_/g, " ")}`.toLowerCase() };
+        });
+    }, [open, zones, atTime]);
     const shown = useMemo(() => {
         const words = query.toLowerCase().replace(/_/g, " ").split(/\s+/).filter(Boolean);
         return words.length === 0 ? entries : entries.filter((entry) => words.every((word) => entry.haystack.includes(word)));

package/lib/util/timeZone.ts

@@ -25,13 +25,27 @@ export function deviceTimeZone(): string {
 export function zoneClock(zone: string, at: Date = new Date()): { abbreviation: string; offset: string } | null {
     try {
         const part = (style: "short" | "longOffset") =>
-            new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style }).formatToParts(at).find((p) => p.type === "timeZoneName")!.value;
+            formatterFor(zone, style).formatToParts(at).find((p) => p.type === "timeZoneName")!.value;
         return { abbreviation: part("short"), offset: part("longOffset").replace("GMT", "") || "+00:00" };
     } catch {
         return null;
     }
 }
 
+/** Building an `Intl.DateTimeFormat` is by far the costly part of naming a zone's clock, and a list names hundreds: each is made once. */
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+function formatterFor(zone: string, style: "short" | "longOffset"): Intl.DateTimeFormat {
+    const key = `${style}|${zone}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        // Throws for a zone the runtime doesn't know, which is then not remembered.
+        formatter = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+}
+
 /** A zone id split into its city and the region it is in: "America/Argentina/Buenos_Aires" is "Buenos Aires" in "America/Argentina"; "UTC" is in none. */
 function zoneNames(zone: string): { city: string; region: string } {
     const parts = zone.split("/");
@@ -56,13 +70,15 @@ export function describeTimeZone(zone: string, at: Date = new Date()): string {
  * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
  * doesn't know comes last.
  */
-export function compareTimeZones(a: string, b: string, at: Date = new Date()): number {
-    const minutes = (zone: string) => {
+export function sortTimeZones(zones: readonly string[], at: Date = new Date()): string[] {
+    // Each zone's offset is read once, not once per comparison.
+    const keyed = zones.map((zone) => {
         const offset = zoneClock(zone, at)?.offset;
-        return offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
-    };
-    const byOffset = minutes(a) - minutes(b);
-    return (Number.isNaN(byOffset) ? 0 : byOffset) || zoneNames(a).city.localeCompare(zoneNames(b).city) || a.localeCompare(b);
+        const minutes = offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
+        return { zone, minutes, city: zoneNames(zone).city };
+    });
+    keyed.sort((a, b) => (a.minutes === b.minutes ? 0 : a.minutes < b.minutes ? -1 : 1) || a.city.localeCompare(b.city) || a.zone.localeCompare(b.zone));
+    return keyed.map((entry) => entry.zone);
 }
 
 /**
@@ -76,6 +92,5 @@ export function timeZoneOptions(...extra: string[]): string[] {
     } catch {
         zones = [];
     }
-    const now = new Date();
-    return [...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])].sort((a, b) => compareTimeZones(a, b, now));
+    return sortTimeZones([...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",