@rapidmx/web-client 0.29.0 → 0.31.0

package/apps/shared/components/admin/setup/EscrowSetupStep.tsx

@@ -3,16 +3,18 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { createEscrowScope, EscrowScope, listEscrowScopes } from "../../../../../lib/admin/escrowScopesApi.js";
 import { generateEscrowKeyPair, GeneratedEscrowKeys } from "../../../../../lib/crypto/escrowKeys.js";
 import { toDatetimeLocal } from "../../../../../lib/util/dateInput.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../elevation.js";
 import EscrowScopeKeyAndHoldersFields, {
     emptyEscrowScopeKeyAndHoldersValue,
     EscrowScopeKeyAndHoldersValue,
+    keyValidityError,
     selfAsHolderError,
 } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
 
@@ -54,6 +56,8 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
     const [generated, setGenerated] = useState<GeneratedEscrowKeys | null>(null);
     const [downloadedPrivateKey, setDownloadedPrivateKey] = useState(false);
     const [savedPrivateKey, setSavedPrivateKey] = useState(false);
+    // The private key leaves the browser as a plain file, so it is only offered after the administrator has read what that means.
+    const [confirmingDownload, setConfirmingDownload] = useState(false);
     const [keyAndHolders, setKeyAndHolders] = useState<EscrowScopeKeyAndHoldersValue>(emptyEscrowScopeKeyAndHoldersValue());
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
@@ -70,6 +74,7 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
         setGenerated(null);
         setDownloadedPrivateKey(false);
         setSavedPrivateKey(false);
+        setConfirmingDownload(false);
         setKeyAndHolders(emptyEscrowScopeKeyAndHoldersValue());
     }
 
@@ -119,6 +124,11 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
             setError("The public key, its type, and its fingerprint are all required.");
             return;
         }
+        const validityError = generated ? null : keyValidityError(keyAndHolders);
+        if (validityError) {
+            setError(validityError);
+            return;
+        }
         if (keyAndHolders.holderUserUids.length === 0) {
             setError("At least one holder is required.");
             return;
@@ -145,7 +155,7 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
             chooseMode("none");
             setName("Escrow");
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");
+            setError(actionErrorMessage(err, "Could not create the escrow scope."));
         } finally {
             setBusy(false);
         }
@@ -248,10 +258,7 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
                                 <Button
                                     type="button"
                                     className="!w-auto"
-                                    onClick={() => {
-                                        downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem);
-                                        setDownloadedPrivateKey(true);
-                                    }}
+                                    onClick={() => setConfirmingDownload(true)}
                                 >
                                     Download private key
                                 </Button>
@@ -276,6 +283,32 @@ export default function EscrowSetupStep({ adminUid }: { adminUid?: string }) {
                             {!downloadedPrivateKey && (
                                 <p className="text-xs text-text-muted">Download the private key before continuing.</p>
                             )}
+                            <Modal open={confirmingDownload} onClose={() => setConfirmingDownload(false)} title="Download the private key?">
+                                <p className="text-sm mb-3">
+                                    The file is <strong>not encrypted</strong>: it lands in this computer&rsquo;s downloads folder (and its download history),
+                                    and anyone who obtains it can decrypt every mailbox covered by this escrow scope on their own - the number of
+                                    required holders does not apply to a copy of the key.
+                                </p>
+                                <p className="text-sm mb-5">
+                                    Move it straight to offline storage or a password manager your escrow holders control, and delete it from here.
+                                </p>
+                                <div className="flex gap-3 justify-end">
+                                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingDownload(false)}>
+                                        Cancel
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        className="!w-auto"
+                                        onClick={() => {
+                                            downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem);
+                                            setDownloadedPrivateKey(true);
+                                            setConfirmingDownload(false);
+                                        }}
+                                    >
+                                        Download unencrypted key
+                                    </Button>
+                                </div>
+                            </Modal>
                         </div>
                     )}
                 </div>

package/apps/shared/components/admin/setup/SetupWizard.tsx

@@ -5,7 +5,7 @@
 import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
 import { HiCheck } from "react-icons/hi2";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
+import { actionErrorMessage } from "../elevation.js";
 import { getRetentionPolicy } from "../../../../../lib/admin/retentionPolicyApi.js";
 import { getMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
 import { createDomain, Domain, listDomains } from "../../../../../lib/admin/domainsApi.js";
@@ -14,7 +14,8 @@ import { getBranding } from "../../../../../lib/branding/brandingApi.js";
 import { EncryptionPolicy, getEncryptionPolicy } from "../../../../../lib/crypto/keyvaultApi.js";
 import { listMailboxes, Mailbox } from "../../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { LIST_PAGE_SIZE, listAllPages } from "../../../mail/listAllPages.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
@@ -50,7 +51,7 @@ function isStepId(value: string | undefined): value is SetupStepId {
 }
 
 function errorMessage(err: unknown, fallback: string): string {
-    return err instanceof ApiRequestError ? err.message : fallback;
+    return actionErrorMessage(err, fallback);
 }
 
 export interface SetupWizardProps {
@@ -397,9 +398,10 @@ function MailboxesStep({ userUid, domain }: { userUid: string; domain?: string }
     const [formKey, setFormKey] = useState(0);
 
     useEffect(() => {
-        // The administration scope: every mailbox that exists (administrative metadata), not only the administrator's own.
-        listMailboxes({ limit: 100, scope: "admin" }, client)
-            .then((list) =>
+        // The administration scope: every mailbox that exists (administrative metadata), not only the administrator's own. All pages of them: the
+        // administrator's own mailbox may be past the first, and would then be offered to be created again.
+        listAllPages((page) => listMailboxes({ limit: LIST_PAGE_SIZE, page, scope: "admin" }, client))
+            .then(({ items: list }) =>
                 // Keep any mailbox created here while the list was loading.
                 setMailboxes((prev) => [...list, ...prev.filter((mine) => !list.some((mailbox) => mailbox.uid === mine.uid))]),
             )

package/apps/shared/components/admin/signOut.ts

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { authApiFetch } from "../../../../lib/util/api.js";
+import { resetNotifications } from "../../notifications/store.js";
 
 /**
  * The cross-tab sign-out channel - must stay identical to `SIGN_OUT_CHANNEL` in
@@ -73,6 +74,8 @@ async function logOutOfAuthServer(authServerUrl: string | undefined): Promise<vo
  */
 export async function signOutOfConsole(authServerUrl: string | undefined): Promise<void> {
     markLocalIndexesForDeletion();
+    // The tab's notification history is the session's, and its storage outlives it.
+    resetNotifications();
     broadcastSignOut();
     await logOutOfAuthServer(authServerUrl);
     window.location.href = authServerUrl ?? "/";

package/apps/shared/components/admin/usePagedList.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useRef, useState } from "react";
-import { ApiRequestError } from "../../../../lib/util/api.js";
+import { actionErrorMessage } from "./elevation.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 
 /** Page size for the async-request lists (the server returns them newest first and caps `limit` at 500). */
@@ -51,7 +51,7 @@ export function usePagedList<T extends { uid: string }>(
     loaded.current = items;
 
     function describe(err: unknown): string {
-        return err instanceof ApiRequestError ? err.message : errorMessage;
+        return actionErrorMessage(err, errorMessage);
     }
 
     async function reload() {

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

@@ -38,7 +38,8 @@ export function linkFromInput(input: string): string | undefined {
     if (/\s/.test(text)) {
         return undefined;
     }
-    if (/^[a-z][a-z0-9+.-]*:/i.test(text)) {
+    // "example.com:8080/x" and "localhost:3000" name a host and a port, not a scheme.
+    if (/^[a-z][a-z0-9+.-]*:/i.test(text) && !/^(?:localhost|[^\s:/@]+\.[^\s:/@]+):\d{1,5}(?:[/?#]|$)/i.test(text)) {
         return safeDescriptionHref(text);
     }
     return safeDescriptionHref(/^[^\s@/]+@[^\s@/]+$/.test(text) ? `mailto:${text}` : `https://${text}`);

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

@@ -57,6 +57,8 @@ export interface EventDetailsProps {
     isOwnAddress?: (address: string) => boolean;
     calendarName?: string;
     calendarColor?: string;
+    /** Whether the reader may change this mailbox's events: `false` for one shared with them view-only, which gets no Modify, Delete or answer. Default `true`. */
+    canWrite?: boolean;
     onClose: () => void;
     /** Modify: switch to the edit form. */
     onModify: () => void;
@@ -81,6 +83,7 @@ export default function EventDetails({
     isOwnAddress,
     calendarName,
     calendarColor,
+    canWrite = true,
     onClose,
     onModify,
     onSaved,
@@ -90,6 +93,8 @@ export default function EventDetails({
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
+    // An answer to one occurrence of a series waits here for the reader to confirm: the server records it for the entire series.
+    const [pendingResponse, setPendingResponse] = useState<AttendeeResponseInput | null>(null);
     const [requesting, setRequesting] = useState(false);
     // The organizer's own join link for the event's video meeting: `undefined` while it is fetched, `null` once known to be none.
     const [organizerJoinUrl, setOrganizerJoinUrl] = useState<string | null | undefined>(undefined);
@@ -136,6 +141,7 @@ export default function EventDetails({
     // `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own (see `calendarApi.ts`'s `respondToEvent` doc
     // comment) - it always acts on `occurrence.uid` as a single event document.
     async function handleRespond(responseStatus: AttendeeResponseInput) {
+        setPendingResponse(null);
         setError(null);
         setBusy(true);
         try {
@@ -349,7 +355,7 @@ export default function EventDetails({
                 </div>
             )}
 
-            {myResponse !== undefined && (
+            {myResponse !== undefined && canWrite && (
                 <div className="flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt">
                     <div className="flex items-center justify-between gap-3 flex-wrap">
                         <span className="text-sm font-medium">Your response</span>
@@ -364,7 +370,7 @@ export default function EventDetails({
                                         className={["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" ")}
                                         aria-pressed={current}
                                         disabled={busy}
-                                        onClick={() => void handleRespond(response)}
+                                        onClick={() => (occurrence.isRecurringOccurrence ? setPendingResponse(response) : void handleRespond(response))}
                                     >
                                         {current && <HiOutlineCheck size={14} aria-hidden="true" />}
                                         {label}
@@ -373,12 +379,26 @@ export default function EventDetails({
                             })}
                         </div>
                     </div>
+                    {pendingResponse && (
+                        <div role="alert" className="flex flex-wrap items-center gap-2 text-sm">
+                            <span className="flex-1 min-w-0">
+                                {pendingResponse === "declined" ? "Declining" : "Your answer"} applies to every event in this series, not just this one
+                                {pendingResponse === "declined" ? ", and removes the series from your calendar" : ""}.
+                            </span>
+                            <Button type="button" variant="secondary" className="!w-auto" disabled={busy} onClick={() => setPendingResponse(null)}>
+                                Cancel
+                            </Button>
+                            <Button type="button" className="!w-auto" disabled={busy} onClick={() => void handleRespond(pendingResponse)}>
+                                {answers.find((a) => a.response === pendingResponse)!.label} the series
+                            </Button>
+                        </div>
+                    )}
                     <p className="text-xs text-text-muted">Other attendees&rsquo; responses may take a few minutes to update.</p>
                 </div>
             )}
 
             <div className="flex flex-wrap items-center gap-3 px-5 pb-4">
-                {!isInvited && (
+                {!isInvited && canWrite && (
                     <Button type="button" className="!w-auto" disabled={busy} onClick={onModify}>
                         Modify
                     </Button>
@@ -388,14 +408,20 @@ export default function EventDetails({
                         {canChange ? "Request a change" : "Add guests"}
                     </Button>
                 )}
-                {!occurrence.isRecurringOccurrence ? (
-                    <Button type="button" variant="secondary" className="!w-auto text-danger" disabled={busy} onClick={() => void handleDelete("series")}>
-                        Delete
-                    </Button>
-                ) : !confirmingDelete ? (
+                {!canWrite ? null : !confirmingDelete ? (
                     <Button type="button" variant="secondary" className="!w-auto text-danger" disabled={busy} onClick={() => setConfirmingDelete(true)}>
                         Delete
                     </Button>
+                ) : !occurrence.isRecurringOccurrence ? (
+                    <div role="alert" className="flex items-center gap-2">
+                        <span className="text-sm">Delete this event?</span>
+                        <Button type="button" variant="secondary" className="!w-auto text-danger" disabled={busy} onClick={() => void handleDelete("series")}>
+                            Yes, delete
+                        </Button>
+                        <Button type="button" variant="secondary" className="!w-auto" disabled={busy} onClick={() => setConfirmingDelete(false)}>
+                            Keep
+                        </Button>
+                    </div>
                 ) : (
                     <div className="flex gap-2">
                         <Button type="button" variant="secondary" className="!w-auto text-danger" disabled={busy} onClick={() => void handleDelete("occurrence")}>

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

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, MutableRefObject, useEffect, useMemo, useState } from "react";
+import React, { FormEvent, MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
 import { format } from "date-fns";
 import { ApiClient, ApiRequestError } from "../../../../lib/util/api.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -15,6 +15,7 @@ import {
     guestPermissionsOf,
     updateCalendarEvent,
     visibilityOf,
+    WeekdayCode,
 } from "../../../../lib/calendar/calendarApi.js";
 import {
     VideoMeetingInvitee,
@@ -71,19 +72,27 @@ function wallTimeOfDayMs(instantMs: number, timezone: string | undefined): numbe
     return ((wall % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;
 }
 
+/** The calendar date (`YYYY-MM-DD`) an instant falls on in the frame a series expands in: the UTC date for an all-day event, `timezone`'s wall clock otherwise. */
+function seriesDateKey(iso: string, allDay: boolean, timezone: string | undefined): string {
+    return allDay ? allDayDateKey(iso) : new Date(toEventWallClock(new Date(iso).getTime(), timezone, false)).toISOString().slice(0, 10);
+}
+
+const WEEKDAY_ORDER: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+
 /**
  * Rewrites an edited occurrence's `startDate`/`endDate` for a save to the entire series. The modal only
  * ever shows (and edits) *this occurrence's* dates, but the series is stored as its master record starting
  * at the first occurrence - sending the occurrence's dates as-is would move the whole series' start to
- * this occurrence. So only the change in time-of-day (and the new duration) is applied to the master's own
- * start; the series keeps its original first date. Unchanged times aren't sent at all.
+ * this occurrence. So the change made to the occurrence (its date and its time of day) is applied to the
+ * master's own start, and the new duration is kept: moving a Tuesday occurrence to Thursday moves the series
+ * by two days, never silently dropping the change. Unchanged times aren't sent at all.
  *
- * Times of day are read on the event's own timezone wall clock (the series expands there), not the
- * browser's, and the change is the smallest signed difference modulo 24h - moving 23:00 to 01:00 is two
- * hours later (into the next day), never 22 hours earlier. The master's new start is converted back from
- * that wall clock, so a master on the other side of a DST change keeps the chosen local time.
+ * The change is measured on the event's own timezone wall clock (the series expands there), not the
+ * browser's. The master's new start is converted back from that wall clock, so a master on the other side of
+ * a DST change keeps the chosen local time. A weekly rule that the edit left untouched is rotated by the
+ * same number of days, so its weekdays move with the start (a rule the form already changed is left as it is).
  */
-async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventFields, client?: ApiClient): Promise<EventFields> {
+async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventFields, formZone: string, client?: ApiClient): Promise<EventFields> {
     const { startDate, endDate, ...rest } = fields;
     if (sameMinute(startDate as string, occurrence.startDate) && sameMinute(endDate as string, occurrence.endDate)) {
         // `saveEventSeries()` treats *any* `timezone`/`allDay` in the update as a possible reinterpretation of
@@ -96,23 +105,32 @@ async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventField
     const timezone = fields.timezone as string;
     const newStart = new Date(startDate as string).getTime();
     const durationMs = new Date(endDate as string).getTime() - newStart;
+    // The days the date moved: on the event's own wall clock when both are timed, otherwise on the clock the form showed the timed side on.
+    const frame = fields.allDay || occurrence.allDay ? formZone : timezone;
+    const dayShift = Math.round(
+        (Date.parse(seriesDateKey(startDate as string, !!fields.allDay, frame)) - Date.parse(seriesDateKey(occurrence.startDate, occurrence.allDay, frame))) / MS_PER_DAY,
+    );
     let masterStart: number;
     if (fields.allDay) {
-        // Timed -> all-day keeps the master's own date on its wall clock.
+        // The master's own date (on its wall clock when it was timed), moved by the days the occurrence moved.
         const masterDateKey = master.allDay
             ? allDayDateKey(master.startDate)
             : new Date(toEventWallClock(new Date(master.startDate).getTime(), timezone, false)).toISOString().slice(0, 10);
-        masterStart = new Date(allDayInstant(masterDateKey)).getTime();
+        masterStart = new Date(allDayInstant(addDaysToKey(masterDateKey, dayShift))).getTime();
     } else if (master.allDay) {
-        // All-day -> timed: the master's own date at the newly chosen wall-clock time.
-        const masterDateWall = new Date(allDayInstant(allDayDateKey(master.startDate))).getTime();
+        // All-day -> timed: the master's own date (moved by the days the occurrence moved) at the newly chosen wall-clock time.
+        const masterDateWall = new Date(allDayInstant(addDaysToKey(allDayDateKey(master.startDate), dayShift))).getTime();
         masterStart = fromEventWallClock(masterDateWall + wallTimeOfDayMs(newStart, timezone), timezone, false);
     } else {
-        const rawDelta = wallTimeOfDayMs(newStart, timezone) - wallTimeOfDayMs(new Date(occurrence.startDate).getTime(), timezone);
-        const delta = ((((rawDelta + MS_PER_DAY / 2) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY) - MS_PER_DAY / 2;
+        const delta = toEventWallClock(newStart, timezone, false) - toEventWallClock(new Date(occurrence.startDate).getTime(), timezone, false);
         const masterWall = toEventWallClock(new Date(master.startDate).getTime(), timezone, false);
         masterStart = fromEventWallClock(masterWall + delta, timezone, false);
     }
+    const rule = rest.recurrenceRule;
+    const original = occurrence.recurrenceRule?.byDay;
+    if (rule?.freq === "weekly" && rule.byDay && original && dayShift % 7 !== 0 && rule.byDay.join() === original.join()) {
+        rest.recurrenceRule = { ...rule, byDay: rule.byDay.map((day) => WEEKDAY_ORDER[(WEEKDAY_ORDER.indexOf(day) + (dayShift % 7) + 7) % 7]) };
+    }
     return {
         ...rest,
         startDate: new Date(masterStart).toISOString(),
@@ -220,6 +238,8 @@ export default function EventEditor({
             targetFolderUid: folderUid,
         };
     });
+    // What an existing event's form held when it opened, to tell whether anything was changed since.
+    const [pristine] = useState(() => JSON.stringify(values));
     const { attendees, location, videoEnabled } = values;
     function update(patch: Partial<EventFormValues>) {
         setValues((prev) => ({ ...prev, ...patch }));
@@ -245,6 +265,12 @@ export default function EventEditor({
     // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
     // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
     const [savedEvent, setSavedEvent] = useState<CalendarEvent | null>(null);
+    // Whether that stored record is a series saved with `toSeriesFields()`: its master's dates are not the form's (the occurrence's), so a retry
+    // must not send them - the first save already applied any change of time.
+    const savedAsSeries = useRef(false);
+    // A meeting minted for this event whose link onto the event could not be saved. A retry reuses it rather than minting a second one,
+    // which would send the invitees a second set of join links and leave this one orphaned.
+    const mintedMeeting = useRef<{ uid: string; organizerJoinUrl: string | null } | null>(null);
     const [editScope, setEditScope] = useState<EditScope>("occurrence");
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -277,7 +303,9 @@ export default function EventEditor({
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
 
-    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
+    dirtyRef.current = occurrence
+        ? JSON.stringify(values) !== pristine
+        : !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
 
     function updateAttendee(index: number, patch: Partial<Attendee>) {
         setValues((prev) => ({ ...prev, attendees: prev.attendees.map((a, i) => (i === index ? { ...a, ...patch } : a)) }));
@@ -295,6 +323,12 @@ export default function EventEditor({
         }));
     }
 
+    // The weekday the form's start falls on, in the frame the series expands in (`undefined` while the start is not a valid date).
+    function startWeekdayOf(v: Pick<EventFormValues, "start" | "allDay" | "formZone" | "timezone">): WeekdayCode | undefined {
+        const ms = v.allDay ? Number.NaN : wallStringToMs(v.start, v.formZone, deviceZone);
+        return startWeekdayCode(v.allDay ? v.start : Number.isNaN(ms) ? "" : new Date(ms).toISOString(), v.allDay, v.timezone);
+    }
+
     // Moving the start moves the end with it, so the event keeps its length (a Google Calendar habit, and the way to
     // reschedule without touching two fields).
     function setStart(next: string) {
@@ -309,7 +343,13 @@ export default function EventEditor({
                     ? `${new Date(endMs + shift).toISOString().slice(0, 10)}T00:00`
                     : msToWallString(endMs + shift, prev.formZone, deviceZone);
             }
-            return { ...prev, start: next, end: nextEnd };
+            // A weekly rule on just the start's weekday ("Weekly on Wednesday") follows the start to its new weekday - left alone it
+            // would not include the event's own first day, and the series would begin on the next of the old weekday instead.
+            const oldDay = startWeekdayOf(prev);
+            const nextDay = startWeekdayOf({ ...prev, start: next });
+            const rule = prev.recurrenceRule;
+            const followsStart = oldDay && nextDay && rule?.freq === "weekly" && rule.byDay?.length === 1 && rule.byDay[0] === oldDay;
+            return { ...prev, start: next, end: nextEnd, recurrenceRule: followsStart ? { ...rule, byDay: [nextDay] } : rule };
         });
     }
 
@@ -412,29 +452,34 @@ export default function EventEditor({
                     setVideoError("Add at least one attendee other than yourself to add video conferencing.");
                     return { event: saved, failed: true };
                 }
-                const result = await createVideoMeeting(
-                    {
-                        mailboxUid: saved.mailboxUid,
-                        title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
-                        visibility: "private",
-                        calendarEventUid: saved.uid,
-                        startTime: saved.startDate,
-                        endTime: saved.endDate,
-                        invitees,
-                    },
-                    client,
-                );
+                if (!mintedMeeting.current) {
+                    const result = await createVideoMeeting(
+                        {
+                            mailboxUid: saved.mailboxUid,
+                            title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                            visibility: "private",
+                            calendarEventUid: saved.uid,
+                            startTime: saved.startDate,
+                            endTime: saved.endDate,
+                            invitees,
+                        },
+                        client,
+                    );
+                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: result.organizerJoinUrl ?? null };
+                }
+                const meeting = mintedMeeting.current;
                 const patched = await updateCalendarEvent(
                     {
                         uid: saved.uid,
                         version: saved.version,
                         location: VIDEO_LOCATION_PLACEHOLDER,
-                        videoMeetingUid: result.meeting.uid,
+                        videoMeetingUid: meeting.uid,
                     },
                     client,
                 );
-                setVideoMeetingUid(result.meeting.uid);
-                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                mintedMeeting.current = null;
+                setVideoMeetingUid(meeting.uid);
+                setOrganizerJoinUrl(meeting.organizerJoinUrl);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
                 return { event: patched, failed: false };
             }
@@ -546,8 +591,17 @@ export default function EventEditor({
                 // A retry after the event was stored but its video meeting couldn't be (see `savedEvent`):
                 // update exactly the record the first attempt left behind, whichever branch below created it.
                 // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
-                // nothing left to shift - the dates being sent again are the ones it moved everything to.
-                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) }, client);
+                // nothing left to shift. For a series the form's dates are those of the edited occurrence, not
+                // the master's: sending them would move the whole series to that occurrence, so they (and the
+                // zone and all-day flag they go with) stay as the first attempt left them.
+                const retryFields: EventFields = { ...fields };
+                if (savedAsSeries.current) {
+                    delete retryFields.startDate;
+                    delete retryFields.endDate;
+                    delete retryFields.timezone;
+                    delete retryFields.allDay;
+                }
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(retryFields as Partial<CalendarEventInput>) }, client);
             } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
                 saved = await createCalendarEvent(
@@ -564,10 +618,11 @@ export default function EventEditor({
             } else if (occurrence.isRecurringOccurrence) {
                 const series = await saveEventSeries(
                     occurrence,
-                    (await toSeriesFields(occurrence, fields, client)) as Partial<CalendarEventInput>,
+                    (await toSeriesFields(occurrence, fields, values.formZone, client)) as Partial<CalendarEventInput>,
                     client,
                 );
                 saved = series;
+                savedAsSeries.current = true;
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
                 saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) }, client);
@@ -601,7 +656,6 @@ export default function EventEditor({
     const joinUrl = joinMeetingUrl(organizerJoinUrl);
 
     const timeZones = useMemo(() => timeZoneOptions(values.formZone, values.timezone, deviceZone), [values.formZone, values.timezone, deviceZone]);
-    const startMs = values.allDay ? Number.NaN : wallStringToMs(values.start, values.formZone, deviceZone);
     const calendarFolderUid = occurrence ? occurrence.folderUid : values.targetFolderUid;
 
     const controller: EventFormController = {
@@ -615,11 +669,7 @@ export default function EventEditor({
         timeZones,
         organizerAddress: effectiveOrganizerAddress,
         deviceZone,
-        startWeekday: startWeekdayCode(
-            values.allDay ? values.start : Number.isNaN(startMs) ? "" : new Date(startMs).toISOString(),
-            values.allDay,
-            values.timezone,
-        ),
+        startWeekday: startWeekdayOf(values),
         editingSingleOccurrence,
         updateAttendee,
         removeAttendee,

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

@@ -339,11 +339,14 @@ export function RecurrenceSelect({
     onChange,
     allDay,
     startWeekday,
+    startDateKey,
 }: {
     value: RecurrenceRule | null;
     onChange: (rule: RecurrenceRule | null) => void;
     allDay: boolean;
     startWeekday: WeekdayCode | undefined;
+    /** The event's start date (`yyyy-MM-dd`), for a custom rule's default end date. */
+    startDateKey?: string;
 }) {
     // Picking "Custom…" for a rule that is also a plain repeat still opens the editor.
     const [customRequested, setCustomRequested] = useState(false);
@@ -377,7 +380,7 @@ export function RecurrenceSelect({
                 <option value="weekdays">Every weekday (Monday to Friday)</option>
                 <option value="custom">Custom…</option>
             </select>
-            {selected === "custom" && <RecurrenceEditor value={value} onChange={onChange} allDay={allDay} startWeekday={startWeekday} hideToggle />}
+            {selected === "custom" && <RecurrenceEditor value={value} onChange={onChange} allDay={allDay} startWeekday={startWeekday} startDateKey={startDateKey} hideToggle />}
         </div>
     );
 }
@@ -454,7 +457,7 @@ export function DateTimeControls({ c }: { c: EventFormController }) {
                 All day
             </label>
             {!c.editingSingleOccurrence && (
-                <RecurrenceSelect value={values.recurrenceRule} onChange={(rule) => c.update({ recurrenceRule: rule })} allDay={values.allDay} startWeekday={c.startWeekday} />
+                <RecurrenceSelect value={values.recurrenceRule} onChange={(rule) => c.update({ recurrenceRule: rule })} allDay={values.allDay} startWeekday={c.startWeekday} startDateKey={values.start.slice(0, 10)} />
             )}
         </div>
     );

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

@@ -16,16 +16,28 @@ export interface EventMatchNavProps {
     noun?: "match" | "event";
 }
 
+/** Widgets that take the arrow keys themselves (a menu's items, a radio group, a slider, a list's options, a tab list, ...) and an open popup's trigger. */
+const ARROW_WIDGET_SELECTOR = [
+    ...["menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "radiogroup", "radio", "listbox", "option"].map((role) => `[role="${role}"]`),
+    ...["slider", "spinbutton", "tablist", "tab", "tree", "grid", "combobox"].map((role) => `[role="${role}"]`),
+    '[aria-haspopup][aria-expanded="true"]',
+].join(",");
+
+/** Whether the arrow keys pressed at `target` belong to what is there: a field or select, or a widget with arrows of its own. */
+function takesArrowKeys(target: EventTarget | null): boolean {
+    return isTextEntry(target) || (target instanceof Element && target.closest(ARROW_WIDGET_SELECTOR) !== null);
+}
+
 /**
  * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
  * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
  * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
- * a field is taking them.
+ * a field or a widget (a select, a menu, a slider, ...) is taking them.
  */
 export default function EventMatchNav({ onPrevious, onNext, canPrevious = true, canNext = true, noun = "match" }: EventMatchNavProps) {
     useEffect(() => {
         function handleKeyDown(event: KeyboardEvent) {
-            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || isTextEntry(event.target)) {
+            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || takesArrowKeys(event.target)) {
                 return;
             }
             if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {