@rapidmx/web-client 0.23.0 → 0.25.1

package/apps/admin/mailboxes/[uid].tsx

@@ -12,6 +12,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: number): string {
@@ -156,7 +157,7 @@ function MailboxDetailContent({
                     <dt className="text-text-muted">Owner</dt>
                     <dd>{mailbox.ownerUserUid ?? "None (shared mailbox)"}</dd>
                     <dt className="text-text-muted">Timezone</dt>
-                    <dd>{mailbox.timezone}</dd>
+                    <dd>{describeTimeZone(mailbox.timezone)}</dd>
                     <dt className="text-text-muted">Quota</dt>
                     <dd>
                         {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}

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/admin/settings/MailboxCreateForm.tsx

@@ -7,7 +7,7 @@ import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { getMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
 import { LeftoverConflict, leftoverConflictOf } from "../../../../../lib/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, Mailbox, resolveMailboxOwner, ResolvedPrincipal } from "../../../../../lib/mail/mailApi.js";
-import { deviceTimeZone } from "../../../../../lib/util/timeZone.js";
+import { describeTimeZone, deviceTimeZone, zoneClock } from "../../../../../lib/util/timeZone.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
 import Alert from "../../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
@@ -298,6 +298,7 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
                         onChange={(e) => setTimezone(e.target.value)}
                         placeholder="America/Los_Angeles"
                     />
+                    {zoneClock(timezone) && <p className="text-xs text-text-muted mt-1">{describeTimeZone(timezone)}</p>}
                 </FormField>
 
                 <FormField label="Quota (GB)" htmlFor="quotaGb">

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

@@ -19,6 +19,7 @@ import {
 import { EventFormController } from "./eventForm.js";
 import { CalendarField, INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
 import QuickFaceFrame from "./QuickFaceFrame.js";
+import { describeTimeZone } from "../../../../lib/util/timeZone.js";
 
 const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 const DURATIONS = ["15", "30", "45", "60"];
@@ -298,7 +299,7 @@ export default function AppointmentQuickForm({ c, draft, onDraftChange, tabs, se
                                 onChange={(e) => onDraftChange({ endTime: e.target.value })}
                             />
                         </div>
-                        <p className="text-xs text-text-muted mt-1">Times are in {timeZone.replace(/_/g, " ")}.</p>
+                        <p className="text-xs text-text-muted mt-1">Times are in {describeTimeZone(timeZone)}.</p>
                     </IconRow>
 
                     <IconRow icon={<HiOutlineMapPin size={20} />}>

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/calendar/EventDescriptionView.tsx

@@ -5,18 +5,50 @@
 import React, { ReactNode } from "react";
 import { DescriptionNode, htmlToPlainText, parseEventDescription } from "../../../../lib/calendar/eventDescription.js";
 
-function renderNodes(nodes: DescriptionNode[]): ReactNode[] {
+const URL_PATTERN = /https?:\/\/[^\s<>"']+/gi;
+const LINK_CLASS = "text-primary-dark underline break-words";
+
+function count(text: string, character: string): number {
+    return text.split(character).length - 1;
+}
+
+/**
+ * `text` with every web address in it made a link that opens in a new tab: a description's own links are its author's, but Google Meet joins, dial-in pages
+ * and the like are often only typed into the text. Punctuation that ends a sentence, or closes a bracket the address was not in, stays out of the link.
+ */
+export function linkifyText(text: string): ReactNode[] {
+    const parts: ReactNode[] = [];
+    let last = 0;
+    for (const match of text.matchAll(URL_PATTERN)) {
+        let url = match[0];
+        while (/[.,;:!?]$/.test(url) || (url.endsWith(")") && count(url, ")") > count(url, "(")) || (url.endsWith("]") && count(url, "]") > count(url, "["))) {
+            url = url.slice(0, -1);
+        }
+        const at = match.index;
+        parts.push(text.slice(last, at));
+        parts.push(
+            <a key={at} href={url} target="_blank" rel="noopener noreferrer" className={LINK_CLASS}>
+                {url}
+            </a>,
+        );
+        last = at + url.length;
+    }
+    parts.push(text.slice(last));
+    return parts;
+}
+
+function renderNodes(nodes: DescriptionNode[], insideLink = false): ReactNode[] {
     return nodes.map((node, index) => {
         if ("text" in node) {
-            return node.text;
+            return insideLink ? node.text : <React.Fragment key={index}>{linkifyText(node.text)}</React.Fragment>;
         }
         switch (node.tag) {
             case "br":
                 return <br key={index} />;
             case "a":
                 return (
-                    <a key={index} href={node.href} target="_blank" rel="noopener noreferrer" className="text-primary-dark underline break-words">
-                        {renderNodes(node.children)}
+                    <a key={index} href={node.href} target="_blank" rel="noopener noreferrer" className={LINK_CLASS}>
+                        {renderNodes(node.children, true)}
                     </a>
                 );
             case "ul":
@@ -66,5 +98,5 @@ export default function EventDescriptionView({ html, text, className }: EventDes
     if (htmlToPlainText(html) !== "") {
         return <div className={["break-words", className].filter(Boolean).join(" ")}>{renderNodes(parseEventDescription(html))}</div>;
     }
-    return text?.trim() ? <div className={["break-words whitespace-pre-wrap", className].filter(Boolean).join(" ")}>{text}</div> : null;
+    return text?.trim() ? <div className={["break-words whitespace-pre-wrap", className].filter(Boolean).join(" ")}>{linkifyText(text)}</div> : null;
 }

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

@@ -22,13 +22,13 @@ import { htmlToPlainText } from "../../../../lib/calendar/eventDescription.js";
 import { deleteEventOccurrence, deleteEventSeries } from "../../../../lib/calendar/calendarMutations.js";
 import { CalendarOccurrence, describeRecurrence } from "../../../../lib/calendar/recurrence.js";
 import { getVideoMeeting } from "../../../../lib/videoconf/videoMeetingsApi.js";
-import { deviceTimeZone } from "../../../../lib/util/timeZone.js";
+import { describeTimeZone, deviceTimeZone } from "../../../../lib/util/timeZone.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import EventDescriptionView from "./EventDescriptionView.js";
 import RequestChangeForm from "./RequestChangeForm.js";
-import { BUSY_STATUS_LABEL, RESPONSE_STATUS_LABEL, VISIBILITY_LABEL, describeGuestPermissions, describeReminder, formatStoredWhen } from "./eventFormat.js";
+import { BUSY_STATUS_LABEL, RESPONSE_STATUS_LABEL, VISIBILITY_LABEL, describeGuestPermissions, describeReminder, formatStoredWhen, formatStoredWhenInZone } from "./eventFormat.js";
 
 const ROLE_LABEL = { required: "", optional: "Optional", resource: "Room/equipment" } as const;
 
@@ -220,11 +220,20 @@ export default function EventDetails({
                 {error && <Alert>{error}</Alert>}
 
                 <DetailRow icon={<HiOutlineClock size={18} />}>
-                    <div>{formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay)}</div>
-                    {occurrence.recurrenceRule && <div className="text-text-muted">Repeats {describeRecurrence(occurrence.recurrenceRule)}</div>}
-                    {!occurrence.allDay && eventZone && eventZone !== deviceTimeZone() && (
-                        <div className="text-text-muted">Event time zone: {eventZone.replace(/_/g, " ")}</div>
+                    {!occurrence.allDay && eventZone && eventZone !== deviceTimeZone() ? (
+                        // Set somewhere else: the time on the reader's own clock, and on the clock it was set on, each said in full so nobody has to convert.
+                        <>
+                            <div>
+                                {formatStoredWhen(occurrence.startDate, occurrence.endDate, false)} &bull; {describeTimeZone(deviceTimeZone(), new Date(occurrence.startDate))}
+                            </div>
+                            <div className="text-text-muted">
+                                {formatStoredWhenInZone(occurrence.startDate, occurrence.endDate, eventZone)} &bull; {describeTimeZone(eventZone, new Date(occurrence.startDate))}
+                            </div>
+                        </>
+                    ) : (
+                        <div>{formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay)}</div>
                     )}
+                    {occurrence.recurrenceRule && <div className="text-text-muted">Repeats {describeRecurrence(occurrence.recurrenceRule)}</div>}
                 </DetailRow>
 
                 {occurrence.location && (

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

@@ -34,6 +34,7 @@ import QuickCreateFaces, { QuickCreateConfig } from "./QuickCreateFaces.js";
 import { EditScope, EventFormController, EventFormValues } from "./eventForm.js";
 import { descriptionProblem, dialogFields, hasDescriptionText, initialDescriptionHtml } from "./eventDialogFields.js";
 import { mergeGuests, msToWallString, wallStringToMs } from "./eventFormat.js";
+import { nextHalfHour } from "./timePicker.js";
 
 /**
  * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
@@ -190,8 +191,10 @@ export default function EventEditor({
             start = `${format(initialStart ?? new Date(), "yyyy-MM-dd")}T00:00`;
             end = start;
         } else {
-            start = toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString());
-            end = toDatetimeLocal(occurrence?.endDate ?? initialEnd?.toISOString() ?? new Date(Date.now() + 30 * MS_PER_MINUTE).toISOString());
+            // With nothing clicked, a new event starts at the next half hour and lasts an hour.
+            const newStart = initialStart ?? nextHalfHour(new Date());
+            start = toDatetimeLocal(occurrence?.startDate ?? newStart.toISOString());
+            end = toDatetimeLocal(occurrence?.endDate ?? (initialEnd ?? new Date(newStart.getTime() + MS_PER_HOUR)).toISOString());
         }
         return {
             title: occurrence?.title ?? "",

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

@@ -9,9 +9,12 @@ import Button from "../../../../lib/components/buttons/Button.js";
 import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
+import TimeComboBox from "./TimeComboBox.js";
+import TimeZonePicker from "../../../../lib/components/pickers/TimeZonePicker.js";
 import ResourcePicker from "./ResourcePicker.js";
 import { EventFormController } from "./eventForm.js";
 import { hasDescriptionText } from "./eventDialogFields.js";
+import { dayTimes, endTimeOptions, formatTimeOfDay } from "./timePicker.js";
 import {
     REMINDER_UNITS,
     ReminderUnit,
@@ -20,6 +23,7 @@ import {
     VISIBILITY_HELP,
     VISIBILITY_LABEL,
     bestReminderUnit,
+    zoneDate,
 } from "./eventFormat.js";
 
 export const INPUT_CLASS =
@@ -378,7 +382,9 @@ export function RecurrenceSelect({
     );
 }
 
-/** [start date] [start time] to [end time] [end date], then "All day", the "Time zone" link (and its menu) and how the event repeats. */
+const START_TIME_OPTIONS = dayTimes().map((time) => ({ value: time, label: formatTimeOfDay(time) }));
+
+/** [start date] [start time] to [end time] [end date], then the "Time zone" link (and its menu), "All day" and how the event repeats. */
 export function DateTimeControls({ c }: { c: EventFormController }) {
     const { values } = c;
     const [zoneOpen, setZoneOpen] = useState(false);
@@ -393,22 +399,27 @@ export function DateTimeControls({ c }: { c: EventFormController }) {
                     onChange={(e) => c.setStart(`${e.target.value}${values.start.slice(10)}`)}
                 />
                 {!values.allDay && (
-                    <input
-                        type="time"
+                    <TimeComboBox
                         aria-label="Event start time"
-                        className={`${SELECT_CLASS} min-w-0`}
-                        value={values.start.slice(11, 16)}
-                        onChange={(e) => c.setStart(`${values.start.slice(0, 11)}${e.target.value}`)}
+                        className={`${SELECT_CLASS} w-28`}
+                        display={formatTimeOfDay(values.start.slice(11, 16))}
+                        current={values.start.slice(11, 16)}
+                        options={START_TIME_OPTIONS}
+                        // Moving the start moves the end with it, so the event keeps its length: whatever the start is set to.
+                        onSelect={(time) => c.setStart(`${values.start.slice(0, 11)}${time}`)}
+                        onType={(time) => c.setStart(`${values.start.slice(0, 11)}${time}`)}
                     />
                 )}
                 <span className="text-text-muted">to</span>
                 {!values.allDay && (
-                    <input
-                        type="time"
+                    <TimeComboBox
                         aria-label="Event end time"
-                        className={`${SELECT_CLASS} min-w-0`}
-                        value={values.end.slice(11, 16)}
-                        onChange={(e) => c.setEnd(`${values.end.slice(0, 11)}${e.target.value}`)}
+                        className={`${SELECT_CLASS} w-28`}
+                        display={formatTimeOfDay(values.end.slice(11, 16))}
+                        current={values.end}
+                        options={endTimeOptions(values.start).map((option) => ({ value: option.value, label: option.label, hint: option.hint }))}
+                        onSelect={c.setEnd}
+                        onType={(time) => c.setEnd(`${values.end.slice(0, 11)}${time}`)}
                     />
                 )}
                 <input
@@ -419,36 +430,31 @@ export function DateTimeControls({ c }: { c: EventFormController }) {
                     onChange={(e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`)}
                 />
             </div>
-            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
-                <label className="flex items-center gap-2">
-                    <input type="checkbox" checked={values.allDay} onChange={(e) => c.onAllDayChange(e.target.checked)} />
-                    All day
-                </label>
-                <button
-                    type="button"
-                    aria-expanded={zoneOpen}
-                    className="text-primary-dark hover:underline"
-                    onClick={() => setZoneOpen((open) => !open)}
-                >
-                    Time zone
-                </button>
-                {!c.editingSingleOccurrence && (
-                    <RecurrenceSelect value={values.recurrenceRule} onChange={(rule) => c.update({ recurrenceRule: rule })} allDay={values.allDay} startWeekday={c.startWeekday} />
-                )}
-            </div>
+            {/* The Time zone link sits above All day, and the zone menu it opens right under it - before how the event repeats. */}
+            <button
+                type="button"
+                aria-expanded={zoneOpen}
+                className="self-start text-sm text-primary-dark hover:underline"
+                onClick={() => setZoneOpen((open) => !open)}
+            >
+                Time zone
+            </button>
             {zoneOpen && (
-                <select
-                    aria-label="Time zone"
-                    className={`${SELECT_CLASS} self-start max-w-full`}
+                <TimeZonePicker
+                    aria-label="Event time zone"
+                    className={`${SELECT_CLASS} max-w-full`}
                     value={values.formZone}
-                    onChange={(e) => c.onTimeZoneChange(e.target.value)}
-                >
-                    {c.timeZones.map((zone) => (
-                        <option key={zone} value={zone}>
-                            {zone}
-                        </option>
-                    ))}
-                </select>
+                    zones={c.timeZones}
+                    at={zoneDate(values.start)}
+                    onChange={c.onTimeZoneChange}
+                />
+            )}
+            <label className="flex items-center gap-2 text-sm">
+                <input type="checkbox" checked={values.allDay} onChange={(e) => c.onAllDayChange(e.target.checked)} />
+                All day
+            </label>
+            {!c.editingSingleOccurrence && (
+                <RecurrenceSelect value={values.recurrenceRule} onChange={(rule) => c.update({ recurrenceRule: rule })} allDay={values.allDay} startWeekday={c.startWeekday} />
             )}
         </div>
     );

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

@@ -9,8 +9,9 @@ import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import { EventShellContext } from "./EventShell.js";
 import { CalendarField, DateTimeControls, DescriptionRow, GuestsRow, IconRow, LocationRow, VideoConferencingRow } from "./EventFormParts.js";
+import { describeTimeZone } from "../../../../lib/util/timeZone.js";
 import { EventFormController } from "./eventForm.js";
-import { BUSY_STATUS_LABEL, VISIBILITY_LABEL, describeReminder, formatFormWhen, reminderOf } from "./eventFormat.js";
+import { BUSY_STATUS_LABEL, VISIBILITY_LABEL, describeReminder, formatFormWhen, reminderOf, zoneDate } from "./eventFormat.js";
 
 export interface EventQuickFormProps {
     c: EventFormController;
@@ -79,7 +80,7 @@ export default function EventQuickForm({ c, onExpand, tabs, tabPanelProps }: Eve
                     >
                         <span className="block text-sm">{formatFormWhen(values.start, values.end, values.allDay)}</span>
                         <span className="block text-xs text-text-muted">
-                            {values.formZone.replace(/_/g, " ")} &bull;{" "}
+                            {describeTimeZone(values.formZone, zoneDate(values.start))} &bull;{" "}
                             {values.recurrenceRule ? `Repeats ${describeRecurrence(values.recurrenceRule)}` : "Does not repeat"}
                         </span>
                     </button>

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

@@ -19,7 +19,8 @@ import Button from "../../../../lib/components/buttons/Button.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { addDaysToKey } from "./allDay.js";
 import { EventFormController } from "./eventForm.js";
-import { formatFormWhen, localDateFromKey, msToWallString, wallStringToMs } from "./eventFormat.js";
+import { formatFormWhen, localDateFromKey, msToWallString, wallStringToMs, zoneDate } from "./eventFormat.js";
+import { describeTimeZone } from "../../../../lib/util/timeZone.js";
 import {
     SEARCH_DAYS,
     WORK_END_HOUR,
@@ -238,7 +239,7 @@ export default function FindATime({ c }: { c: EventFormController }) {
                 >
                     ›
                 </button>
-                <span className="text-xs text-text-muted">{formZone.replace(/_/g, " ")}</span>
+                <span className="text-xs text-text-muted">{describeTimeZone(formZone, zoneDate(dayKey))}</span>
             </div>
 
             {lookUp.status === "error" && (

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

@@ -0,0 +1,143 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, useEffect, useId, useRef, useState } from "react";
+import { parseTimeInput } from "./timePicker.js";
+
+export interface TimeOption {
+    value: string;
+    label: string;
+    /** Said after the label, muted: the length of the event an end time makes. */
+    hint?: string;
+}
+
+export interface TimeComboBoxProps {
+    "aria-label": string;
+    /** The time being shown, as it reads in the field. */
+    display: string;
+    /** The `value` of the option that is the current one, if any of them is. */
+    current?: string;
+    options: TimeOption[];
+    /** An option was picked. */
+    onSelect: (value: string) => void;
+    /** A time was typed (`HH:mm`, already understood). */
+    onType: (time: string) => void;
+    className?: string;
+}
+
+/**
+ * A time field that is a text box and a menu at once: focusing it opens a list of times to pick from, and whatever is typed instead - "3:45pm", "1530" -
+ * is understood when the field is left or Enter is pressed (and put back as it was when it isn't a time, or on Escape). The list follows the arrow keys.
+ */
+export default function TimeComboBox({ "aria-label": label, display, current, options, onSelect, onType, className }: TimeComboBoxProps) {
+    const listId = useId();
+    const [draft, setDraft] = useState<string | null>(null);
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(-1);
+    const selectedRef = useRef<HTMLLIElement>(null);
+
+    // Opening puts the current time in view, as the middle of the list.
+    useEffect(() => {
+        if (open) {
+            selectedRef.current?.scrollIntoView?.({ block: "center" });
+        }
+    }, [open]);
+
+    function close() {
+        setOpen(false);
+        setActive(-1);
+        setDraft(null);
+    }
+
+    function commitDraft() {
+        const time = draft === null ? null : parseTimeInput(draft);
+        if (time !== null) {
+            onType(time);
+        }
+        close();
+    }
+
+    function pick(value: string) {
+        onSelect(value);
+        close();
+    }
+
+    function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setOpen(true);
+            setActive((index) => {
+                const from = index < 0 ? options.findIndex((option) => option.value === current) : index;
+                return Math.min(Math.max(from + (event.key === "ArrowDown" ? 1 : -1), 0), options.length - 1);
+            });
+        } else if (event.key === "Enter") {
+            // Never the form's own submit: Enter here settles the time.
+            event.preventDefault();
+            if (open && active >= 0) {
+                pick(options[active].value);
+            } else {
+                commitDraft();
+            }
+        } else if (event.key === "Escape" && open) {
+            event.stopPropagation();
+            close();
+        }
+    }
+
+    return (
+        <div className="relative">
+            <input
+                type="text"
+                role="combobox"
+                aria-label={label}
+                aria-expanded={open}
+                aria-controls={listId}
+                aria-autocomplete="list"
+                aria-activedescendant={active >= 0 ? `${listId}-${active}` : undefined}
+                autoComplete="off"
+                className={className}
+                value={draft ?? display}
+                onClick={() => setOpen(true)}
+                onFocus={(event) => {
+                    event.currentTarget.select();
+                    setOpen(true);
+                }}
+                onChange={(event) => setDraft(event.target.value)}
+                onBlur={commitDraft}
+                onKeyDown={handleKeyDown}
+            />
+            {open && (
+                <ul
+                    id={listId}
+                    role="listbox"
+                    aria-label={`${label} options`}
+                    className="absolute left-0 top-full z-30 mt-1 max-h-56 w-44 overflow-y-auto rounded-md border border-border bg-surface py-1 shadow-lg"
+                >
+                    {options.map((option, index) => (
+                        <li
+                            key={option.value}
+                            id={`${listId}-${index}`}
+                            ref={option.value === current ? selectedRef : undefined}
+                            role="option"
+                            aria-selected={option.value === current}
+                            // Before the field's own blur, which would otherwise close the list and swallow the click.
+                            onMouseDown={(event) => {
+                                event.preventDefault();
+                                pick(option.value);
+                            }}
+                            className={[
+                                "flex cursor-pointer items-baseline gap-1.5 px-3 py-1.5 text-sm hover:bg-surface-alt",
+                                option.value === current ? "font-semibold text-primary-dark" : "",
+                                index === active ? "bg-surface-alt" : "",
+                            ].join(" ")}
+                        >
+                            {option.label}
+                            {option.hint && <span className="text-xs font-normal text-text-muted">{option.hint}</span>}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}