@rapidmx/web-client 0.23.0 → 0.24.0

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/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/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>
+    );
+}

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;
+}