@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -3,476 +3,74 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createCalendarEvent, getCalendarEvent, respondToEvent, updateCalendarEvent, } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { createVideoMeeting, getVideoMeeting, updateVideoMeeting, } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
-import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
-import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
-import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { useRef, useState } from "react";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import RecurrenceEditor from "./RecurrenceEditor.js";
-import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
-import ResourcePicker from "./ResourcePicker.js";
-import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
-const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-const ATTENDEE_ROLES = ["required", "optional", "resource"];
-const BUSY_STATUSES = ["busy", "free", "tentative", "oof"];
-const BUSY_STATUS_LABEL = { busy: "Busy", free: "Free", tentative: "Tentative", oof: "Out of office" };
-const RESPONSE_STATUS_LABEL = {
-    needsAction: "Awaiting response",
-    accepted: "Accepted",
-    declined: "Declined",
-    tentative: "Tentative",
-};
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import EventDetails from "./EventDetails.js";
+import EventEditor from "./EventEditor.js";
+import EventShell from "./EventShell.js";
+export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
+/** How wide each face of the dialog gets, in px. */
+const QUICK_WIDTH = 450;
+const DETAILS_WIDTH = 480;
+const FORM_WIDTH = 880;
+const TASK_FORM_WIDTH = 560;
 /**
- * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
- * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
+ * The calendar's event dialog, in three faces drawn through one frame (`EventShell`):
  *
- * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
- * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
- * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
- * one.
- */
-export const VIDEO_LOCATION_PLACEHOLDER = "Video call — link in this invitation";
-/** The plugin's own title bound (`BaseVideoMeetingRoute`'s `MAX_TITLE_LENGTH`) - a longer title is a 400, so
- * an over-long event title is trimmed to fit rather than failing the whole meeting. */
-const MAX_MEETING_TITLE_LENGTH = 200;
-const MS_PER_MINUTE = 60000;
-const MS_PER_DAY = 86400000;
-/** Whether two ISO instants fall in the same minute - a stored `...T15:00:00Z` and the form's re-serialized
- * `...T15:00:00.000Z` name the same time without being equal strings. */
-function sameMinute(a, b) {
-    return Math.round(new Date(a).getTime() / MS_PER_MINUTE) === Math.round(new Date(b).getTime() / MS_PER_MINUTE);
-}
-/** Milliseconds since midnight of an instant's wall clock in `timezone` (a timed event's own zone). */
-function wallTimeOfDayMs(instantMs, timezone) {
-    const wall = toEventWallClock(instantMs, timezone, false);
-    return ((wall % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;
-}
-/**
- * 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.
+ * - **A new event** opens as a quick-create popover (`EventQuickForm`, beside what was clicked; a bottom sheet on a phone). "More options"
+ * grows it into the full card (`EventExpandedForm`) with everything typed so far still in it.
+ * The popover has tabs (`QuickCreateTabs`): Event, Task, and - when the booking plugin is running (`bookingHref`) - Appointment schedule.
+ * The Task and Appointment faces are drawn by `QuickCreateFaces`, share the Event tab's title, mailbox and calendar, and only ever
+ * create a task or a booking type; the Event tab is the form it always was.
+ * - **An existing event** opens read-only (`EventDetails`): what the event says, the invited reader's Accept / Tentative / Decline,
+ * and Delete. The reader who organized it also gets Modify, which turns the same card into the full form; closing that form returns
+ * to the details, discarding the edits (a save closes everything, as it always did).
  *
- * 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.
+ * Editing or deleting a recurring event's occurrence offers a choice between "this event" and "the entire series" (see
+ * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
  */
-async function toSeriesFields(occurrence, fields) {
-    const { startDate, endDate, ...rest } = fields;
-    if (sameMinute(startDate, occurrence.startDate) && sameMinute(endDate, occurrence.endDate)) {
-        // `saveEventSeries()` treats *any* `timezone`/`allDay` in the update as a possible reinterpretation of
-        // the master's instant and fetches the master to check - so when neither differs from the occurrence's
-        // own, both are dropped too, or every plain series save (e.g. just a new title) would pay for that GET.
-        const { timezone, allDay, ...others } = rest;
-        return timezone === occurrence.timezone && allDay === occurrence.allDay ? others : rest;
-    }
-    const master = await getCalendarEvent(occurrence.uid);
-    const timezone = fields.timezone;
-    const newStart = new Date(startDate).getTime();
-    const durationMs = new Date(endDate).getTime() - newStart;
-    let masterStart;
-    if (fields.allDay) {
-        // Timed -> all-day keeps the master's own date on its wall clock.
-        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();
-    }
-    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();
-        masterStart = fromEventWallClock(masterDateWall + wallTimeOfDayMs(newStart, timezone), timezone, false);
+export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, initialAllDay, anchor, bookingHref, onSaved, onDeleted, }) {
+    const isMobile = useIsMobile();
+    // An existing event: Modify was pressed. A new event: More options was.
+    const [editing, setEditing] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    // A new event: what the popover creates (an event, a task or an appointment schedule). More options only ever grows the tab it was pressed on.
+    const [tab, setTab] = useState("event");
+    const [syncWarning, setSyncWarning] = useState(false);
+    // Whether the form holds anything a click on the backdrop would throw away (kept up to date by the editor).
+    const dirtyRef = useRef(false);
+    if (!open) {
+        return null;
     }
-    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 masterWall = toEventWallClock(new Date(master.startDate).getTime(), timezone, false);
-        masterStart = fromEventWallClock(masterWall + delta, timezone, false);
+    if (syncWarning) {
+        return (_jsxs(Modal, { open: open, onClose: onSaved, title: "Series saved", children: [_jsx("p", { role: "alert", className: "text-sm mb-4", children: "The series was saved, but some occurrences you had changed individually couldn\u2019t be moved with it. They may now appear twice - check the calendar and delete any duplicate." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: onSaved, children: "OK" })] }));
     }
-    return {
-        ...rest,
-        startDate: new Date(masterStart).toISOString(),
-        endDate: new Date(masterStart + durationMs).toISOString(),
-    };
-}
-/**
- * Create/view/edit/delete for a single calendar event. Editing or deleting a recurring event's
- * occurrence offers a choice between "this event" and "the entire series" (see
- * `calendarMutations.ts`) — Outlook's own convention for the same ambiguity.
- */
-export default function EventModal({ open, onClose, mailboxUid, folderUid, calendars, mailboxOptions, organizerAddress, organizerAliases, occurrence, initialStart, initialEnd, onSaved, onDeleted, }) {
-    const [targetFolderUid, setTargetFolderUid] = useState(folderUid);
-    const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
-    const targetMailboxOption = mailboxOptions?.find((option) => option.mailbox.uid === targetMailboxUid);
-    // Create mode follows the chosen mailbox; editing an existing event always keeps the passed-in values.
-    const calendarChoices = !occurrence && targetMailboxOption ? targetMailboxOption.calendars : calendars;
-    const effectiveOrganizerAddress = !occurrence && targetMailboxOption ? targetMailboxOption.mailbox.primarySmtpAddress : organizerAddress;
     // Every address the viewing mailbox receives at - its primary address and its aliases, case-insensitively.
     const ownAddresses = new Set([organizerAddress, ...(organizerAliases ?? mailboxOptions?.find((option) => option.mailbox.uid === mailboxUid)?.mailbox.aliasAddresses ?? [])].map((address) => address.toLowerCase()));
     const isOwnAddress = (address) => ownAddresses.has(address.toLowerCase());
     // An existing event organized by someone else is the viewing mailbox's copy of an invitation: only the
-    // organizer can change it (their next update would overwrite local edits anyway), so it's read-only
-    // apart from the RSVP controls.
+    // organizer can change it (their next update would overwrite local edits anyway), so it can't be modified.
     const isInvited = !!occurrence && !isOwnAddress(occurrence.organizer.address) && !occurrence.attendees.some((a) => a.isOrganizer && isOwnAddress(a.address));
-    function handleMailboxChange(nextMailboxUid) {
-        setTargetMailboxUid(nextMailboxUid);
-        const firstCalendar = mailboxOptions?.find((option) => option.mailbox.uid === nextMailboxUid)?.calendars[0];
-        if (firstCalendar) {
-            setTargetFolderUid(firstCalendar.uid);
-        }
-    }
-    const [title, setTitle] = useState(occurrence?.title ?? "");
-    const [location, setLocation] = useState(occurrence?.location ?? "");
-    // An all-day event is stored date-only with an exclusive end (see `allDay.ts`); the form shows its
-    // inclusive last day instead.
-    const [start, setStart] = useState(() => occurrence?.allDay
-        ? `${allDayDateKey(occurrence.startDate)}T00:00`
-        : toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString()));
-    const [end, setEnd] = useState(() => {
-        if (occurrence?.allDay) {
-            const startKey = allDayDateKey(occurrence.startDate);
-            const lastDayKey = addDaysToKey(allDayDateKey(occurrence.endDate), -1);
-            return `${lastDayKey < startKey ? startKey : lastDayKey}T00:00`;
-        }
-        return toDatetimeLocal(occurrence?.endDate ?? initialEnd?.toISOString() ?? new Date(Date.now() + 30 * 60000).toISOString());
-    });
-    const [allDay, setAllDay] = useState(occurrence?.allDay ?? false);
-    const [timezone] = useState(occurrence?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
-    const [attendees, setAttendees] = useState(occurrence?.attendees ?? []);
-    const [recurrenceRule, setRecurrenceRule] = useState(occurrence?.recurrenceRule ?? null);
-    const [reminderMinutes, setReminderMinutes] = useState(occurrence?.reminderMinutesBeforeStart?.toString() ?? "");
-    const [busyStatus, setBusyStatus] = useState(occurrence?.busyStatus ?? "busy");
-    const [autoReplyEnabled, setAutoReplyEnabled] = useState(occurrence?.autoReplyEnabled ?? false);
-    const [autoReplyMessage, setAutoReplyMessage] = useState(occurrence?.autoReplyMessage ?? "");
-    const [editScope, setEditScope] = useState("occurrence");
-    // Video conferencing: the toggle, the meeting this event is linked to (if any), the organizer's own join
-    // link for it, and whatever went wrong with the last attempt to mint/cancel one.
-    const [videoEnabled, setVideoEnabled] = useState(!!occurrence?.videoMeetingUid);
-    const [videoMeetingUid, setVideoMeetingUid] = useState(occurrence?.videoMeetingUid);
-    // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
-    const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
-    const [videoError, setVideoError] = useState(null);
-    // The event as this modal last persisted it. Set only when a save got the event stored but could not
-    // 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(null);
-    const [confirmingDelete, setConfirmingDelete] = useState(false);
-    const [error, setError] = useState(null);
-    const [saving, setSaving] = useState(false);
-    // A series save that moved the series but couldn't move every separately edited occurrence with it.
-    const [syncWarning, setSyncWarning] = useState(false);
-    const [responding, setResponding] = useState(false);
-    const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
-    const addResourceButtonRef = useRef(null);
-    // An event that already carried a meeting when it was opened (e.g. after a page reload) knows only that
-    // meeting's uid - the organizer's own join link lives on the meeting, so it is fetched once here. A
-    // meeting minted in this session already has its link from the create call (see
-    // `applyVideoConferencing()`), which is why this deliberately reads the *prop*, not the state: it must
-    // not re-fetch what was just handed to us. A failure and a meeting with no link at all are the same
-    // thing to this UI - there is nothing to open either way - so both settle on `null`.
-    useEffect(() => {
-        const uid = occurrence?.videoMeetingUid;
-        if (!uid) {
-            return;
-        }
-        let cancelled = false;
-        void getVideoMeeting(uid)
-            .then((meeting) => meeting.organizerJoinUrl ?? null)
-            .catch(() => null)
-            .then((url) => {
-            if (!cancelled) {
-                setOrganizerJoinUrl(url);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [occurrence?.videoMeetingUid]);
-    // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
-    // `organizerAddress` (plus the aliases) are this mailbox's own addresses (see `EventModalProps`), so
-    // finding one among `attendees` (and not as that attendee's own organizer flag) identifies exactly
-    // that case. `@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, so this deliberately does not consult `editScope`.
-    const myAttendeeIndex = occurrence ? attendees.findIndex((a) => isOwnAddress(a.address)) : -1;
-    const canRespond = myAttendeeIndex !== -1 && !attendees[myAttendeeIndex].isOrganizer;
-    // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
-    const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
-    function updateAttendee(index, patch) {
-        setAttendees((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
-    }
-    function removeAttendee(index) {
-        setAttendees((prev) => prev.filter((_, i) => i !== index));
-    }
-    function addResource(mailbox) {
-        setAttendees((prev) => [
-            ...prev,
-            { address: mailbox.primarySmtpAddress, displayName: mailbox.displayName, role: "resource", responseStatus: "needsAction", isOrganizer: false },
-        ]);
-        setResourcePickerOpen(false);
-    }
-    /**
-     * Brings the event's video meeting in line with the toggle, once the event itself is saved (so the
-     * attendee list a new meeting's invitees are built from is the one that was just stored).
-     *
-     * Turning it **on** mints a meeting for the saved event's attendees - every one of them except the
-     * organizer, who reaches their own meeting through ownership (`organizerJoinUrl`), not as a guest - and
-     * then patches the event with the meeting's uid and the generic `VIDEO_LOCATION_PLACEHOLDER` location.
-     * No join link is written onto the event: each attendee's own link is substituted into their own copy of
-     * the invitation server-side.
-     *
-     * Turning it **off** cancels the meeting and clears the link, restoring Location to `""` only when it
-     * still holds exactly the placeholder this modal wrote - anything the user has typed there since is
-     * theirs and is preserved.
-     *
-     * **Known, deliberate limitation:** an event that already has a meeting is left completely alone, even
-     * when its attendee list has just changed. `@rapidmx/meet-plugin`'s `PUT /mail/video-meetings/:id`
-     * is deliberately minimal (title and cancellation only) and cannot add or remove invitees, and a private
-     * meeting's personal join links are minted once at creation - so there is no way to reconcile an invitee
-     * list, and silently pretending otherwise would leave a new attendee with no link and a removed one with
-     * a working one. The helper text under the checkbox says so, and turning the toggle off and on again
-     * reissues links for the current attendee list.
-     *
-     * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
-     * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
-     */
-    async function applyVideoConferencing(saved) {
-        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
-        if (videoEnabled === !!videoMeetingUid) {
-            return { event: saved, failed: false };
-        }
-        // Detaching a single occurrence (`detachOccurrence()`, react-shared's `calendarMutations.ts`)
-        // deliberately never copies the series' `videoMeetingUid` onto the new standalone event - that
-        // shared meeting belongs to the series, not to the one occurrence being split off, and every other
-        // occurrence still needs it live. But this component's own `videoMeetingUid` *state* was seeded
-        // from the series' occurrence at mount and is untouched by the detach, so unchecking the toggle
-        // while detaching would otherwise still look like "off, but state says linked" above and fall into
-        // the cancel branch below - cancelling the series' shared meeting for every remaining occurrence,
-        // not just this one. `saved.videoMeetingUid` is the actual just-persisted record, so when the
-        // toggle is off and that record already has no meeting reference (true for every detach, checked or
-        // not - see this function's own doc comment on the still-checked case being a separate, documented
-        // gap), there is nothing of *this* record's to cancel.
-        if (!videoEnabled && !saved.videoMeetingUid) {
-            return { event: saved, failed: false };
-        }
-        try {
-            if (videoEnabled) {
-                const organizerAddressLower = saved.organizer.address.toLowerCase();
-                const invitees = attendees
-                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
-                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
-                if (invitees.length === 0) {
-                    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,
-                });
-                const patched = await updateCalendarEvent({
-                    uid: saved.uid,
-                    version: saved.version,
-                    location: VIDEO_LOCATION_PLACEHOLDER,
-                    videoMeetingUid: result.meeting.uid,
-                });
-                setVideoMeetingUid(result.meeting.uid);
-                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
-                setLocation(VIDEO_LOCATION_PLACEHOLDER);
-                return { event: patched, failed: false };
-            }
-            await updateVideoMeeting(videoMeetingUid, { status: "cancelled" });
-            const restoredLocation = location.trim() === VIDEO_LOCATION_PLACEHOLDER ? "" : location.trim();
-            // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
-            // leave the placeholder (and the link to the now-cancelled meeting) in place.
-            const patch = { location: restoredLocation || null, videoMeetingUid: null };
-            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...patch });
-            setVideoMeetingUid(undefined);
-            setOrganizerJoinUrl(undefined);
-            setLocation(restoredLocation);
-            return { event: patched, failed: false };
-        }
-        catch (err) {
-            // `videoMeetingsApi.ts`'s own doc comment: when the plugin isn't installed at all, its routes
-            // simply aren't mounted and every call here fails with a plain 404 - a caller offering video
-            // conferencing optionally must treat that as "not available here," not alarm the reader with
-            // the raw (often server-generated, unhelpful) 404 body text.
-            setVideoError(err instanceof ApiRequestError
-                ? err.status === 404
-                    ? "Video conferencing is not available on this server."
-                    : err.message
-                : "Could not update this event's video conferencing.");
-            return { event: saved, failed: true };
-        }
-    }
-    async function handleSubmit(e) {
-        e.preventDefault();
-        setError(null);
-        setVideoError(null);
-        if (!title.trim()) {
-            setError("A title is required.");
-            return;
-        }
-        let startDate;
-        let endDate;
-        if (allDay) {
-            const startKey = start.slice(0, 10);
-            const lastDayKey = end.slice(0, 10);
-            if (lastDayKey < startKey) {
-                setError("The end date can't be before the start date.");
-                return;
-            }
-            startDate = allDayInstant(startKey);
-            endDate = allDayInstant(addDaysToKey(lastDayKey, 1));
-        }
-        else {
-            if (new Date(end) <= new Date(start)) {
-                setError("The end time must be after the start time.");
-                return;
-            }
-            startDate = new Date(start).toISOString();
-            endDate = new Date(end).toISOString();
-        }
-        // Only a stored event is updated in place, where a cleared field must be sent as `null`; creating
-        // (a new event, or the detached copy of one occurrence) just omits it.
-        const updatingInPlace = !!occurrence && !editingSingleOccurrence;
-        const cleared = updatingInPlace ? null : undefined;
-        const fields = {
-            title: title.trim(),
-            location: location.trim() || cleared,
-            startDate,
-            endDate,
-            allDay,
-            timezone,
-            attendees,
-            recurrenceRule: editingSingleOccurrence ? undefined : (recurrenceRule ?? cleared),
-            reminderMinutesBeforeStart: reminderMinutes.trim() ? Number(reminderMinutes) : cleared,
-            busyStatus,
-            autoReplyEnabled,
-            autoReplyMessage: autoReplyEnabled ? autoReplyMessage : cleared,
-        };
-        setSaving(true);
-        try {
-            let saved;
-            let detachedSyncFailed = false;
-            if (savedEvent) {
-                // 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 });
-            }
-            else if (!occurrence) {
-                // The organizer is only ever set on create - an edit keeps the event's own organizer.
-                saved = await createCalendarEvent({
-                    mailboxUid: targetMailboxUid,
-                    folderUid: targetFolderUid,
-                    ...fields,
-                    organizer: { address: effectiveOrganizerAddress, type: "to" },
-                });
-            }
-            else if (editingSingleOccurrence) {
-                saved = await detachOccurrence(occurrence, fields);
-            }
-            else if (occurrence.isRecurringOccurrence) {
-                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)));
-                saved = series;
-                detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
-            }
-            else {
-                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...fields });
-            }
-            const video = await applyVideoConferencing(saved);
-            if (video.failed) {
-                // The event itself is saved - keep the modal open on the inline error so the video meeting
-                // can be retried (or the toggle put back) rather than closing over it.
-                setSavedEvent(video.event);
-                return;
-            }
-            if (detachedSyncFailed) {
-                // The series itself was saved - say so, and leave closing to the user once they've read it.
-                setSyncWarning(true);
-                return;
-            }
-            onSaved();
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this event.");
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    // Only ever invoked from the Delete button(s) rendered inside the `{occurrence && (...)}` block
-    // below, so `occurrence` is always non-null here — no defensive null check needed.
-    async function handleDelete(scope) {
-        setError(null);
-        setSaving(true);
-        try {
-            if (occurrence.isRecurringOccurrence && scope === "occurrence") {
-                await deleteEventOccurrence(occurrence);
-            }
-            else {
-                await deleteEventSeries(occurrence);
-            }
-            onDeleted();
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not delete this event.");
-            setSaving(false);
-        }
-    }
-    // Only rendered inside the `{canRespond && (...)}` block below, which already requires `occurrence`
-    // to be non-null (see `canRespond`'s own definition above) — same established pattern as
-    // `handleDelete`'s non-null assertion.
-    async function handleRespond(responseStatus) {
-        setError(null);
-        setResponding(true);
-        try {
-            await respondToEvent(occurrence.uid, responseStatus);
-            // A decline soft-deletes the mailbox's own copy server-side — treat it the same as a
-            // delete rather than a save so the calendar view drops it immediately.
-            if (responseStatus === "declined") {
-                onDeleted();
-            }
-            else {
-                onSaved();
-            }
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not send your response.");
-            setResponding(false);
-        }
-    }
-    // The recurrence end date is stored in the frame the series expands in (UTC for all-day, local otherwise),
-    // so toggling All day re-stores the same chosen date in the new frame.
-    function handleAllDayChange(nextAllDay) {
-        setAllDay(nextAllDay);
-        setRecurrenceRule((rule) => rule?.until ? { ...rule, until: recurrenceUntilInstant(recurrenceUntilDateKey(rule.until, allDay), nextAllDay) } : rule);
-    }
-    if (syncWarning) {
-        return (_jsxs(Modal, { open: open, onClose: onSaved, title: "Series saved", children: [_jsx("p", { role: "alert", className: "text-sm mb-4", children: "The series was saved, but some occurrences you had changed individually couldn\u2019t be moved with it. They may now appear twice - check the calendar and delete any duplicate." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: onSaved, children: "OK" })] }));
-    }
-    // Same scheme allow-list `calendarReminders.ts#joinMeetingUrl()` already applies to a reminder's own
-    // `location` field - reused here rather than duplicated so a video-conferencing plugin (or a stray
-    // manual edit of `videoMeetingUid`'s otherwise-plugin-owned join link) can't smuggle a `javascript:`/
-    // `file:`/other non-http(s) URL into `window.open()`. `undefined` (still loading) and `null` (fetch
-    // came back with nothing to join) both fail validation the same way as a bad scheme would - the button
-    // stays disabled either way, and the two are told apart below purely from `organizerJoinUrl` itself.
-    const validatedJoinUrl = joinMeetingUrl(organizerJoinUrl);
-    return (_jsx(Modal, { open: open, onClose: onClose, title: occurrence ? "Edit event" : "New event", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [error && _jsx(Alert, { children: error }), canRespond && (_jsxs("div", { className: "flex flex-col gap-2 mb-3 p-3 rounded-sm bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("accepted"), children: "Accept" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: responding, onClick: () => handleRespond("tentative"), children: "Tentative" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: responding, onClick: () => handleRespond("declined"), children: "Decline" })] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), isInvited && (_jsx("p", { className: "text-xs text-text-muted mb-3", children: "You were invited to this event. Only the organizer can change its details." })), videoMeetingUid && (_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !validatedJoinUrl, onClick: () => window.open(validatedJoinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !validatedJoinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] })), _jsxs("fieldset", { disabled: isInvited, className: "flex flex-col gap-1 min-w-0", children: [!occurrence && mailboxOptions && mailboxOptions.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "event-mailbox", children: _jsx("select", { id: "event-mailbox", className: INPUT_CLASS, value: targetMailboxUid, onChange: (e) => handleMailboxChange(e.target.value), children: mailboxOptions.map(({ mailbox }) => (_jsxs("option", { value: mailbox.uid, children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }, mailbox.uid))) }) })), !occurrence && calendarChoices && calendarChoices.length > 1 && (_jsx(FormField, { label: "Calendar", htmlFor: "event-calendar", children: _jsx("select", { id: "event-calendar", className: INPUT_CLASS, value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: calendarChoices.map((cal) => (_jsx("option", { value: cal.uid, children: cal.name }, cal.uid))) }) })), _jsx(FormField, { label: "Title", htmlFor: "event-title", children: _jsx("input", { id: "event-title", type: "text", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }) }), _jsx(FormField, { label: "Location", htmlFor: "event-location", children: _jsx("input", { id: "event-location", type: "text", className: INPUT_CLASS, value: location, onChange: (e) => setLocation(e.target.value) }) }), _jsxs("div", { className: "mb-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: videoEnabled, onChange: (e) => setVideoEnabled(e.target.checked) }), "Add video conferencing"] }), videoEnabled && (_jsx("p", { className: "text-xs text-text-muted mt-1", children: "Changing attendees after enabling video conferencing won\u2019t update meeting invitees \u2014 turn this off and back on to reissue links to the current attendee list." })), videoError && (_jsx("p", { role: "alert", className: "text-xs text-danger mt-1", children: videoError }))] }), _jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-3", children: [_jsx("input", { type: "checkbox", checked: allDay, onChange: (e) => handleAllDayChange(e.target.checked) }), "All day"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Start", htmlFor: "event-start", children: _jsx("input", { id: "event-start", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? start.slice(0, 10) : start, onChange: (e) => setStart(allDay ? `${e.target.value}T00:00` : e.target.value) }) }), _jsx(FormField, { label: "End", htmlFor: "event-end", children: _jsx("input", { id: "event-end", type: allDay ? "date" : "datetime-local", className: INPUT_CLASS, value: allDay ? end.slice(0, 10) : end, onChange: (e) => setEnd(allDay ? `${e.target.value}T00:00` : e.target.value) }) })] }), _jsx(FormField, { label: "Attendees", htmlFor: "event-attendees", children: _jsxs("div", { id: "event-attendees", className: "flex flex-col gap-2", children: [attendees.map((attendee, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: attendee.address, onChange: (e) => updateAttendee(i, { address: e.target.value }), "aria-label": `Attendee email ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: attendee.role, onChange: (e) => updateAttendee(i, { role: e.target.value }), "aria-label": `Attendee role ${i + 1}`, children: ATTENDEE_ROLES.map((role) => (_jsx("option", { value: role, children: role }, role))) }), _jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt self-center", children: RESPONSE_STATUS_LABEL[attendee.responseStatus] }), _jsx("button", { type: "button", onClick: () => removeAttendee(i), className: "text-sm text-danger px-2", "aria-label": `Remove attendee ${i + 1}`, children: "\u00D7" })] }, i))), _jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("button", { type: "button", onClick: () => setAttendees((prev) => [...prev, { address: "", role: "required", responseStatus: "needsAction", isOrganizer: false }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add attendee" }), _jsx("button", { ref: addResourceButtonRef, type: "button", onClick: () => setResourcePickerOpen(true), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add room/equipment" })] }), resourcePickerOpen && (_jsx(ResourcePicker, { anchorRef: addResourceButtonRef, onClose: () => setResourcePickerOpen(false), onSelect: addResource, excludeAddresses: attendees.map((a) => a.address.toLowerCase()) }))] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Busy status", htmlFor: "event-busyStatus", children: _jsx("select", { id: "event-busyStatus", className: INPUT_CLASS, value: busyStatus, onChange: (e) => setBusyStatus(e.target.value), children: BUSY_STATUSES.map((status) => (_jsx("option", { value: status, children: BUSY_STATUS_LABEL[status] }, status))) }) }), _jsx(FormField, { label: "Reminder (minutes before)", htmlFor: "event-reminder", children: _jsx("input", { id: "event-reminder", type: "number", min: 0, className: INPUT_CLASS, value: reminderMinutes, onChange: (e) => setReminderMinutes(e.target.value), placeholder: "None" }) })] }), _jsxs("div", { className: "mb-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: autoReplyEnabled, onChange: (e) => setAutoReplyEnabled(e.target.checked) }), "Send an automatic reply while this event is happening"] }), _jsx("p", { className: "text-xs text-text-muted mt-1", children: "Applies in addition to your mailbox\u2019s own Automatic Replies setting (see Settings) \u2014 this event\u2019s message takes over for its own start/end window." }), autoReplyEnabled && (_jsx("textarea", { "aria-label": "Automatic reply message", className: `${INPUT_CLASS} mt-2`, rows: 3, value: autoReplyMessage, onChange: (e) => setAutoReplyMessage(e.target.value), placeholder: "I'm out of office and back on..." }))] }), !editingSingleOccurrence && (_jsx(FormField, { label: "Recurrence", htmlFor: "event-recurrence", children: _jsx(RecurrenceEditor, { value: recurrenceRule, onChange: setRecurrenceRule, allDay: allDay, startWeekday: startWeekdayCode(start, allDay, timezone) }) })), occurrence?.isRecurringOccurrence && !isInvited && (_jsxs("fieldset", { className: "flex flex-col gap-1.5 text-sm mb-3", children: [_jsx("legend", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1", children: "Apply changes to" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "occurrence", onChange: () => setEditScope("occurrence") }), "This event only"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "event-edit-scope", checked: editScope === "series", onChange: () => setEditScope("series") }), "The entire series"] })] }))] }), _jsxs("div", { className: "flex gap-3 mt-2", children: [!isInvited && (_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), occurrence &&
-                            (!occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto text-danger", disabled: saving, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2 ml-auto", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: saving, onClick: () => handleDelete("series"), children: "Delete series" })] })))] })] }) }));
+    // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize - finding one of its own
+    // addresses among the attendees (and not as that attendee's own organizer flag) identifies exactly that case.
+    const myAttendee = occurrence?.attendees.find((a) => isOwnAddress(a.address));
+    const canRespond = !!myAttendee && !myAttendee.isOrganizer;
+    const isForm = !occurrence || editing;
+    const layout = occurrence || expanded ? "expanded" : "quick";
+    const variant = !isForm || layout === "expanded" ? "card" : isMobile ? "sheet" : "popover";
+    const width = !isForm ? DETAILS_WIDTH : layout === "expanded" ? (tab === "event" || occurrence ? FORM_WIDTH : TASK_FORM_WIDTH) : QUICK_WIDTH;
+    // Leaving the form: an existing event goes back to its details, a new one is done.
+    const leaveForm = occurrence ? () => setEditing(false) : onClose;
+    return (_jsx(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? leaveForm : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
+                ? undefined
+                : {
+                    tab,
+                    onTabChange: (next) => {
+                        setTab(next);
+                        setExpanded(false);
+                    },
+                    bookingHref,
+                } })) : (_jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted })) }));
 }

package/dist/apps/shared/components/calendar/EventQuickForm.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { EventFormController } from "./eventForm.js";
+export interface EventQuickFormProps {
+    c: EventFormController;
+    /** "More options": the same form, larger. */
+    onExpand: () => void;
+    /** A new event's tab strip (Event, Task, Appointment schedule), drawn under the header, and the attributes that make the rows below it
+     * the selected tab's panel. */
+    tabs?: ReactNode;
+    tabPanelProps?: HTMLAttributes<HTMLDivElement>;
+}
+/**
+ * The quick-create popover: a title, when (a click opens the date, time, zone and repeat controls in place), guests, video conferencing,
+ * a location, an "Add description" row (which opens the rich-text box in place) and which calendar - with the busy status, visibility and reminder it will have
+ * written under it - then "More options" and Save. Its
+ * values are `EventEditor`'s, shared with the full form.
+ */
+export default function EventQuickForm({ c, onExpand, tabs, tabPanelProps }: EventQuickFormProps): React.JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useContext, useState } from "react";
+import { HiOutlineBars2, HiOutlineCalendarDays, HiOutlineClock, HiOutlineXMark } from "react-icons/hi2";
+import { describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { EventShellContext } from "./EventShell.js";
+import { CalendarField, DateTimeControls, DescriptionRow, GuestsRow, IconRow, LocationRow, VideoConferencingRow } from "./EventFormParts.js";
+import { BUSY_STATUS_LABEL, VISIBILITY_LABEL, describeReminder, formatFormWhen, reminderOf } from "./eventFormat.js";
+/**
+ * The quick-create popover: a title, when (a click opens the date, time, zone and repeat controls in place), guests, video conferencing,
+ * a location, an "Add description" row (which opens the rich-text box in place) and which calendar - with the busy status, visibility and reminder it will have
+ * written under it - then "More options" and Save. Its
+ * values are `EventEditor`'s, shared with the full form.
+ */
+export default function EventQuickForm({ c, onExpand, tabs, tabPanelProps }) {
+    const { values } = c;
+    const { dragHandleProps } = useContext(EventShellContext);
+    const [timeOpen, setTimeOpen] = useState(false);
+    return (_jsxs("form", { onSubmit: c.onSubmit, className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between px-2 pt-2", children: [dragHandleProps ? (_jsx("div", { ...dragHandleProps, "aria-hidden": "true", className: "flex-1 h-7 flex items-center cursor-move text-text-muted select-none touch-none", children: _jsx(HiOutlineBars2, { size: 20 }) })) : (_jsx("div", { className: "flex-1" })), _jsx("button", { type: "button", "aria-label": "Close", onClick: c.onCancel, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), tabs, _jsxs("div", { ...tabPanelProps, className: "flex flex-col gap-3 px-5 pb-3", children: [c.error && _jsx(Alert, { children: c.error }), _jsx("div", { className: "pl-8", children: _jsx("input", { type: "text", "aria-label": "Title", placeholder: "Add title", "data-autofocus": true, className: "w-full text-xl bg-transparent text-text border-0 border-b-2 border-primary/50 focus:border-primary focus:outline-none pb-1 placeholder:text-text-muted", value: values.title, onChange: (e) => c.update({ title: e.target.value }) }) }), _jsxs(IconRow, { icon: _jsx(HiOutlineClock, { size: 20 }), children: [_jsxs("button", { type: "button", "aria-expanded": timeOpen, onClick: () => setTimeOpen((open) => !open), className: "w-full text-left rounded-md hover:bg-surface-alt -mx-1 px-1 py-0.5", children: [_jsx("span", { className: "block text-sm", children: formatFormWhen(values.start, values.end, values.allDay) }), _jsxs("span", { className: "block text-xs text-text-muted", children: [values.formZone.replace(/_/g, " "), " \u2022", " ", values.recurrenceRule ? `Repeats ${describeRecurrence(values.recurrenceRule)}` : "Does not repeat"] })] }), timeOpen && (_jsx("div", { className: "mt-2", children: _jsx(DateTimeControls, { c: c }) }))] }), _jsx(GuestsRow, { c: c }), _jsx(VideoConferencingRow, { c: c }), _jsx(LocationRow, { c: c }), _jsx(DescriptionRow, { c: c, collapsible: true }), _jsxs(IconRow, { icon: _jsx(HiOutlineCalendarDays, { size: 20 }), children: [_jsx(CalendarField, { c: c }), _jsxs("p", { className: "text-xs text-text-muted mt-0.5", children: [BUSY_STATUS_LABEL[values.busyStatus], " \u2022 ", VISIBILITY_LABEL[values.visibility], " \u2022 ", describeReminder(reminderOf(values.reminderMinutes))] })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onExpand, children: "More options" }), _jsx(Button, { type: "submit", loading: c.saving, disabled: c.saving, className: "!w-auto", children: "Save" })] })] }));
+}