@rapidmx/web-client 0.23.0 → 0.25.1

package/apps/shared/components/calendar/eventFormat.ts

@@ -187,6 +187,21 @@ export function formatStoredWhen(startDate: string, endDate: string, allDay: boo
     return formatWhen(new Date(startDate), new Date(endDate), false, now);
 }
 
+/** The date the form's start falls on, for reading a zone's offset as it will be for the event (daylight saving); now while there is no date. */
+export function zoneDate(start: string): Date {
+    const day = new Date(`${start.slice(0, 10)}T12:00:00Z`);
+    return Number.isNaN(day.getTime()) ? new Date() : day;
+}
+
+/** `formatWhen()` for a stored timed event as `zone`'s clock reads it, whatever zone the viewer is in. */
+export function formatStoredWhenInZone(startDate: string, endDate: string, zone: string, now: Date = new Date()): string {
+    const onZoneClock = (iso: string) => {
+        const wall = new Date(toEventWallClock(new Date(iso).getTime(), zone, false));
+        return new Date(wall.getUTCFullYear(), wall.getUTCMonth(), wall.getUTCDate(), wall.getUTCHours(), wall.getUTCMinutes());
+    };
+    return formatWhen(onZoneClock(startDate), onZoneClock(endDate), false, now);
+}
+
 /** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
  * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
  * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */

package/apps/shared/components/calendar/timePicker.ts

@@ -0,0 +1,106 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+
+/** The step between the times a time field offers. */
+export const TIME_STEP_MINUTES = 15;
+const MS_PER_MINUTE = 60_000;
+
+/**
+ * The start a new event gets when nothing was clicked: the next half hour (11:12 becomes 11:30; a time already on the half hour stays), with the
+ * event lasting an hour from there.
+ */
+export function nextHalfHour(now: Date): Date {
+    const slot = 30 * MS_PER_MINUTE;
+    return new Date(Math.ceil(now.getTime() / slot) * slot);
+}
+
+/** `HH:mm` (24 hour) as a 12 hour clock reading: "13:05" is "1:05 PM". */
+export function formatTimeOfDay(time: string): string {
+    // A cleared date leaves no time to read: the field is empty, not an error.
+    if (!/^\d\d:\d\d$/.test(time)) {
+        return "";
+    }
+    const [hours, minutes] = time.split(":").map(Number);
+    return format(new Date(2000, 0, 1, hours, minutes), "h:mm a");
+}
+
+/**
+ * What was typed into a time field as `HH:mm`, or `null` when it isn't a time. Takes 24 hour and 12 hour readings, with or without the colon and
+ * the space: "15:45", "3:45 pm", "3:45p", "345pm", "1130" and a bare hour such as "9" (9:00) are all times.
+ */
+export function parseTimeInput(text: string): string | null {
+    const match = /^\s*(\d{1,2})(?::?(\d{2}))?\s*(?:([ap])\.?m?\.?)?\s*$/i.exec(text);
+    if (!match) {
+        return null;
+    }
+    let hours = Number(match[1]);
+    const minutes = match[2] === undefined ? 0 : Number(match[2]);
+    const meridiem = match[3]?.toLowerCase();
+    if (minutes > 59) {
+        return null;
+    }
+    if (meridiem) {
+        if (hours < 1 || hours > 12) {
+            return null;
+        }
+        hours = (hours % 12) + (meridiem === "p" ? 12 : 0);
+    } else if (hours > 23) {
+        return null;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+/** Every time of a day, a quarter hour apart, as `HH:mm`. */
+export function dayTimes(): string[] {
+    return Array.from({ length: (24 * 60) / TIME_STEP_MINUTES }, (_, i) => {
+        const minutes = i * TIME_STEP_MINUTES;
+        return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+    });
+}
+
+/** A length of time as a menu says it: "15 mins", "1 hr", "1.5 hrs", "2 hrs". */
+export function formatDuration(minutes: number): string {
+    if (minutes < 60) {
+        return `${minutes} min${minutes === 1 ? "" : "s"}`;
+    }
+    const hours = Math.round((minutes / 60) * 100) / 100;
+    return `${hours} ${hours === 1 ? "hr" : "hrs"}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` read as a wall clock, in minutes since the epoch (no zone: the daylight saving changes of a zone are not this field's business). */
+function wallMinutes(value: string): number {
+    return Date.parse(`${value.slice(0, 16)}:00Z`) / MS_PER_MINUTE;
+}
+
+function wallString(minutes: number): string {
+    return new Date(minutes * MS_PER_MINUTE).toISOString().slice(0, 16);
+}
+
+export interface EndTimeOption {
+    /** The end as `YYYY-MM-DDTHH:mm`. */
+    value: string;
+    /** The time of day, as a 12 hour clock reading. */
+    label: string;
+    /** How long the event would last, "(1.5 hrs)". */
+    hint: string;
+}
+
+/**
+ * The ends a time field offers for an event starting at `start` (`YYYY-MM-DDTHH:mm`): each quarter hour on the clock after the start, up to a
+ * day later, with the length of the event that end would make.
+ */
+export function endTimeOptions(start: string): EndTimeOption[] {
+    if (!/^\d{4}-\d\d-\d\dT\d\d:\d\d/.test(start)) {
+        return [];
+    }
+    const startMinutes = wallMinutes(start);
+    const options: EndTimeOption[] = [];
+    for (let at = Math.floor(startMinutes / TIME_STEP_MINUTES + 1) * TIME_STEP_MINUTES; at <= startMinutes + 24 * 60; at += TIME_STEP_MINUTES) {
+        const value = wallString(at);
+        options.push({ value, label: formatTimeOfDay(value.slice(11, 16)), hint: `(${formatDuration(at - startMinutes)})` });
+    }
+    return options;
+}

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/invite/inviteFormat.ts

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import type { Attachment } from "../../../../../lib/mail/mailApi.js";
 import type { InviteResponse, MessageInvite } from "../../../../../lib/calendar/inviteApi.js";
+import { describeTimeZone, deviceTimeZone } from "../../../../../lib/util/timeZone.js";
 import { APP_HREFS } from "../../../navigation/appHrefs.js";
 
 /** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
@@ -53,15 +54,15 @@ export function formatInviteWhen(invite: Pick<MessageInvite, "startDate" | "endD
     }
     const date = new Intl.DateTimeFormat(undefined, DAY_FORMAT);
     const time = new Intl.DateTimeFormat(undefined, CLOCK_FORMAT);
-    // The zone is named once, after the last time shown: the times are the reader's own, not the organizer's.
-    const timeAndZone = new Intl.DateTimeFormat(undefined, { ...CLOCK_FORMAT, timeZoneName: "short" });
+    // The zone is named once, in full, after the last time shown: the times are the reader's own, not the organizer's.
+    const zone = describeTimeZone(deviceTimeZone(), end ?? start);
     const startDay = date.format(start);
     if (!end) {
-        return `${startDay}, ${timeAndZone.format(start)}`;
+        return `${startDay}, ${time.format(start)} • ${zone}`;
     }
     return startDay === date.format(end)
-        ? `${startDay}, ${time.format(start)} - ${timeAndZone.format(end)}`
-        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${timeAndZone.format(end)}`;
+        ? `${startDay}, ${time.format(start)} - ${time.format(end)} • ${zone}`
+        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${time.format(end)} • ${zone}`;
 }
 
 /** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */

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/apps/www/calendar/index.tsx

@@ -43,6 +43,7 @@ import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
+import { nextHalfHour } from "../../shared/components/calendar/timePicker.js";
 import { useSwipeSlide } from "../../shared/gestures/useSwipeSlide.js";
 import { useEnterSlide } from "../../shared/gestures/useEnterSlide.js";
 import { useWheelPaging, type WheelEdge } from "../../shared/gestures/useWheelPaging.js";
@@ -357,10 +358,12 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         if (!mailboxUid || !folderUid) {
             return;
         }
+        // With nothing clicked, the next half hour, for an hour.
+        const from = start ?? nextHalfHour(new Date());
         setModal({
             occurrence: null,
-            initialStart: start ?? new Date(),
-            initialEnd: end ?? new Date(Date.now() + 30 * 60_000),
+            initialStart: from,
+            initialEnd: end ?? new Date(from.getTime() + 60 * 60_000),
             targetFolderUid,
             anchor,
             initialAllDay,

package/apps/www/settings/profile/index.tsx

@@ -5,7 +5,8 @@
 import { pageTitle } from "../../../shared/navigation/pageTitle.js";
 import React, { FormEvent, useMemo, useState } from "react";
 import { FreeBusyVisibility, freeBusyVisibilityOf, isSharedWithMe, updateMailbox } from "../../../../lib/mail/mailApi.js";
-import { DEFAULT_TIME_ZONE, deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
+import TimeZonePicker from "../../../../lib/components/pickers/TimeZonePicker.js";
+import { DEFAULT_TIME_ZONE, describeTimeZone, deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
 import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Button from "../../../../lib/components/buttons/Button.js";
@@ -169,22 +170,17 @@ function ProfileContent() {
 
                     <FormField label="Time zone" htmlFor="profile-time-zone">
                         <div className="flex flex-wrap items-center gap-2">
-                            <select
+                            <TimeZonePicker
                                 id="profile-time-zone"
                                 className={SELECT_CLASS}
                                 value={timezone}
-                                onChange={(e) => {
-                                    setTimezone(e.target.value);
+                                zones={zones}
+                                onChange={(zone) => {
+                                    setTimezone(zone);
                                     setSaved(false);
                                 }}
                                 aria-describedby="profile-time-zone-help"
-                            >
-                                {zones.map((zone) => (
-                                    <option key={zone} value={zone}>
-                                        {zone}
-                                    </option>
-                                ))}
-                            </select>
+                            />
                             {timezone !== deviceZone && (
                                 <Button
                                     type="button"
@@ -195,7 +191,7 @@ function ProfileContent() {
                                         setSaved(false);
                                     }}
                                 >
-                                    Use this device&rsquo;s time zone ({deviceZone})
+                                    Use this device&rsquo;s time zone ({describeTimeZone(deviceZone)})
                                 </Button>
                             )}
                         </div>

package/dist/apps/admin/mailboxes/[uid].js

@@ -13,6 +13,7 @@ import ResourceSettingsCard from "../../shared/components/admin/mailboxes/Resour
 import EscrowScopeCard from "../../shared/components/admin/mailboxes/EscrowScopeCard.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { describeTimeZone } from "../../../lib/util/timeZone.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
 function formatBytes(bytes) {
     if (bytes >= 1000000000)
@@ -107,7 +108,7 @@ function MailboxDetailContent({ uid, impersonationBaseUrl, currentUserUid, }) {
     const ingestQueueHref = `/admin/ingest-queue?mailboxUid=${encodeURIComponent(mailbox.uid)}`;
     return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("a", { href: "/admin", className: "text-sm text-primary-dark hover:underline", children: "\u2190 All mailboxes" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: mailbox.primarySmtpAddress })] }), _jsxs("div", { className: "flex gap-3 shrink-0", children: [mailbox.ownerUserUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingAccess(true), children: "Impersonate this user" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete mailbox" })] })] }), _jsxs("p", { className: "text-sm text-text-muted", children: ["The console shows administrative details only - never a mailbox\u2019s mail or settings.", mailbox.ownerUserUid
                         ? " To see this mailbox as its owner sees it, impersonate them: that is recorded, and you can stop at any time."
-                        : " This shared mailbox has no owner: add yourself under Shared access to open it in the mail client."] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Display name" }), _jsx("dd", { children: mailbox.displayName }), _jsx("dt", { className: "text-text-muted", children: "Owner" }), _jsx("dd", { children: mailbox.ownerUserUid ?? "None (shared mailbox)" }), _jsx("dt", { className: "text-text-muted", children: "Timezone" }), _jsx("dd", { children: mailbox.timezone }), _jsx("dt", { className: "text-text-muted", children: "Quota" }), _jsxs("dd", { children: [formatBytes(mailbox.usedBytes), " / ", formatBytes(mailbox.quotaBytes)] }), _jsx("dt", { className: "text-text-muted", children: "Alias addresses" }), _jsx("dd", { children: mailbox.aliasAddresses.length > 0 ? mailbox.aliasAddresses.join(", ") : "None" }), mailbox.isResource && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Resource type" }), _jsx("dd", { className: "capitalize", children: mailbox.resourceType ?? "room" })] })), _jsx("dt", { className: "text-text-muted", children: "Created" }), _jsx("dd", { children: new Date(mailbox.dateCreated).toLocaleString() })] }), _jsxs("div", { className: "flex gap-4 mt-5 pt-5 border-t border-border text-sm font-medium", children: [_jsx("a", { href: quarantineHref, className: "text-primary-dark hover:underline", children: "View quarantine" }), _jsx("a", { href: ingestQueueHref, className: "text-primary-dark hover:underline", children: "View ingest queue" })] })] }), _jsx(ShareAccessCard, { mailboxUid: mailbox.uid, ownerUserUid: mailbox.ownerUserUid, currentUserUid: currentUserUid }), _jsx(EscrowScopeCard, { mailbox: mailbox, onUpdate: setMailbox }), mailbox.isResource && _jsx(ResourceSettingsCard, { mailbox: mailbox, onUpdate: setMailbox }), _jsxs(Modal, { open: confirmingAccess, onClose: closeAccessModal, title: "Impersonate this user", children: [_jsxs("p", { className: "text-sm mb-3", children: ["You\u2019ll be signed in as ", _jsx("strong", { className: "break-all", children: mailbox.ownerUserUid }), ", the owner of ", _jsx("strong", { className: "break-all", children: mailbox.primarySmtpAddress }), ", and see everything they can - and act as them, until you stop impersonating. This is the only way an administrator sees another user\u2019s mail."] }), accessError && _jsx(Alert, { children: accessError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: impersonating, onClick: closeAccessModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: impersonating, disabled: impersonating, onClick: handleAccessMailbox, children: "Impersonate" })] })] }), _jsxs(Modal, { open: confirmingDelete, onClose: closeDeleteModal, title: "Delete mailbox", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Are you sure you want to delete ", _jsx("strong", { className: "break-all", children: mailbox.primarySmtpAddress }), "? This cannot be undone. It fails if this mailbox is a custodian on an active legal hold."] }), _jsxs("p", { className: "text-sm mb-3", children: ["Deleting removes the mailbox itself. Its mail, contacts, calendars and everything else in it are", " ", _jsx("strong", { children: "kept" }), " until they are erased, and until then the address can\u2019t be used for a new mailbox. You can erase them later from the Mailboxes page."] }), _jsxs("label", { className: "flex items-start gap-2 text-sm mb-3", children: [_jsx("input", { type: "checkbox", className: "mt-0.5", checked: eraseData, disabled: deleting, onChange: (e) => {
+                        : " This shared mailbox has no owner: add yourself under Shared access to open it in the mail client."] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Display name" }), _jsx("dd", { children: mailbox.displayName }), _jsx("dt", { className: "text-text-muted", children: "Owner" }), _jsx("dd", { children: mailbox.ownerUserUid ?? "None (shared mailbox)" }), _jsx("dt", { className: "text-text-muted", children: "Timezone" }), _jsx("dd", { children: describeTimeZone(mailbox.timezone) }), _jsx("dt", { className: "text-text-muted", children: "Quota" }), _jsxs("dd", { children: [formatBytes(mailbox.usedBytes), " / ", formatBytes(mailbox.quotaBytes)] }), _jsx("dt", { className: "text-text-muted", children: "Alias addresses" }), _jsx("dd", { children: mailbox.aliasAddresses.length > 0 ? mailbox.aliasAddresses.join(", ") : "None" }), mailbox.isResource && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Resource type" }), _jsx("dd", { className: "capitalize", children: mailbox.resourceType ?? "room" })] })), _jsx("dt", { className: "text-text-muted", children: "Created" }), _jsx("dd", { children: new Date(mailbox.dateCreated).toLocaleString() })] }), _jsxs("div", { className: "flex gap-4 mt-5 pt-5 border-t border-border text-sm font-medium", children: [_jsx("a", { href: quarantineHref, className: "text-primary-dark hover:underline", children: "View quarantine" }), _jsx("a", { href: ingestQueueHref, className: "text-primary-dark hover:underline", children: "View ingest queue" })] })] }), _jsx(ShareAccessCard, { mailboxUid: mailbox.uid, ownerUserUid: mailbox.ownerUserUid, currentUserUid: currentUserUid }), _jsx(EscrowScopeCard, { mailbox: mailbox, onUpdate: setMailbox }), mailbox.isResource && _jsx(ResourceSettingsCard, { mailbox: mailbox, onUpdate: setMailbox }), _jsxs(Modal, { open: confirmingAccess, onClose: closeAccessModal, title: "Impersonate this user", children: [_jsxs("p", { className: "text-sm mb-3", children: ["You\u2019ll be signed in as ", _jsx("strong", { className: "break-all", children: mailbox.ownerUserUid }), ", the owner of ", _jsx("strong", { className: "break-all", children: mailbox.primarySmtpAddress }), ", and see everything they can - and act as them, until you stop impersonating. This is the only way an administrator sees another user\u2019s mail."] }), accessError && _jsx(Alert, { children: accessError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: impersonating, onClick: closeAccessModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: impersonating, disabled: impersonating, onClick: handleAccessMailbox, children: "Impersonate" })] })] }), _jsxs(Modal, { open: confirmingDelete, onClose: closeDeleteModal, title: "Delete mailbox", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Are you sure you want to delete ", _jsx("strong", { className: "break-all", children: mailbox.primarySmtpAddress }), "? This cannot be undone. It fails if this mailbox is a custodian on an active legal hold."] }), _jsxs("p", { className: "text-sm mb-3", children: ["Deleting removes the mailbox itself. Its mail, contacts, calendars and everything else in it are", " ", _jsx("strong", { children: "kept" }), " until they are erased, and until then the address can\u2019t be used for a new mailbox. You can erase them later from the Mailboxes page."] }), _jsxs("label", { className: "flex items-start gap-2 text-sm mb-3", children: [_jsx("input", { type: "checkbox", className: "mt-0.5", checked: eraseData, disabled: deleting, onChange: (e) => {
                                     setEraseData(e.target.checked);
                                     setTypedAddress("");
                                 } }), _jsx("span", { children: "Also erase all of its data now (permanent)" })] }), eraseData && (_jsxs("div", { className: "mb-3", children: [_jsx("p", { className: "text-sm font-semibold text-danger mb-2", children: "Everything in this mailbox will be permanently erased, and this cannot be undone." }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsxs("span", { className: "font-semibold", children: ["Type ", _jsx("span", { className: "break-all", children: mailbox.primarySmtpAddress }), " to confirm"] }), _jsx("input", { "aria-label": "Type the address to confirm", className: "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary", value: typedAddress, disabled: deleting, autoComplete: "off", spellCheck: false, onChange: (e) => setTypedAddress(e.target.value) })] })] })), deleteError && _jsx(Alert, { children: deleteError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: deleting, onClick: closeDeleteModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: deleting, disabled: deleting || (eraseData && typedAddress.trim().toLowerCase() !== mailbox.primarySmtpAddress.trim().toLowerCase()), onClick: handleDelete, children: eraseData ? "Delete and erase all its data" : "Delete" })] })] })] }));