@rapidmx/web-client 0.14.1 → 0.15.1

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

@@ -0,0 +1,81 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent } from "react";
+
+/** What the New event popover can create. */
+export type QuickTab = "event" | "task" | "appointment";
+
+const TAB_LABELS: Record<QuickTab, string> = { event: "Event", task: "Task", appointment: "Appointment schedule" };
+
+/** The DOM ids that tie each tab to its panel (`aria-controls` / `aria-labelledby`). */
+export function quickTabId(tab: QuickTab): string {
+    return `quick-create-tab-${tab}`;
+}
+export function quickPanelId(tab: QuickTab): string {
+    return `quick-create-panel-${tab}`;
+}
+
+/** The attributes of the element holding the selected tab's content. */
+export function quickPanelProps(tab: QuickTab) {
+    return { role: "tabpanel" as const, id: quickPanelId(tab), "aria-labelledby": quickTabId(tab) };
+}
+
+export interface QuickCreateTabsProps {
+    tab: QuickTab;
+    onChange: (tab: QuickTab) => void;
+    /** Whether the booking plugin is running: without it there is no Appointment schedule tab. */
+    showAppointment: boolean;
+}
+
+/**
+ * The segmented control across the top of the New event popover: Event, Task and (when the booking plugin is running) Appointment schedule.
+ * A WAI-ARIA tab list with automatic activation: only the selected tab is in the Tab order, and the arrow keys (wrapping), Home and End
+ * move to and select another.
+ */
+export default function QuickCreateTabs({ tab, onChange, showAppointment }: QuickCreateTabsProps) {
+    const tabs: QuickTab[] = showAppointment ? ["event", "task", "appointment"] : ["event", "task"];
+
+    function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+        const index = tabs.indexOf(tab);
+        let next: QuickTab;
+        if (event.key === "ArrowRight") {
+            next = tabs[(index + 1) % tabs.length];
+        } else if (event.key === "ArrowLeft") {
+            next = tabs[(index + tabs.length - 1) % tabs.length];
+        } else if (event.key === "Home") {
+            next = tabs[0];
+        } else if (event.key === "End") {
+            next = tabs[tabs.length - 1];
+        } else {
+            return;
+        }
+        event.preventDefault();
+        onChange(next);
+    }
+
+    return (
+        <div role="tablist" aria-label="What to create" className="mx-5 mb-3 flex gap-1 rounded-lg bg-surface-alt p-1">
+            {tabs.map((id) => (
+                <button
+                    key={id}
+                    type="button"
+                    role="tab"
+                    id={quickTabId(id)}
+                    aria-selected={id === tab}
+                    aria-controls={quickPanelId(id)}
+                    tabIndex={id === tab ? 0 : -1}
+                    onClick={() => onChange(id)}
+                    onKeyDown={handleKeyDown}
+                    className={[
+                        "flex-1 min-w-0 rounded-md px-2 py-1.5 text-sm font-medium truncate focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+                        id === tab ? "bg-surface text-text shadow-sm" : "text-text-muted hover:text-text",
+                    ].join(" ")}
+                >
+                    {TAB_LABELS[id]}
+                </button>
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,81 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, ReactNode, useContext } from "react";
+import { HiOutlineBars2, HiOutlineXMark } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { EventShellContext } from "./EventShell.js";
+import { EventFormController } from "./eventForm.js";
+import { QuickTab, quickPanelProps } from "./QuickCreateTabs.js";
+
+export interface QuickFaceFrameProps {
+    c: EventFormController;
+    /** The `QuickCreateTabs` strip. */
+    tabs: ReactNode;
+    /** The tab this face is the panel of. */
+    tab: QuickTab;
+    error: string | null;
+    /** Leave the title out (the Appointment schedule tab once it has saved). */
+    hideTitle?: boolean;
+    /** Enter in a field, or the Save button. */
+    onSubmit: (event: FormEvent) => void;
+    /** What sits in the tab's panel under the title. */
+    children: ReactNode;
+    /** The buttons along the bottom (More options, Save). */
+    footer: ReactNode;
+}
+
+/**
+ * The frame the Task and Appointment schedule faces share, drawn the way `EventQuickForm` draws the Event face: a grip to drag the popover
+ * and a close button, the tab strip, then the panel - an error, the title (the one the Event tab holds, so switching tabs keeps it) and the
+ * face's own rows - and the buttons.
+ */
+export default function QuickFaceFrame({ c, tabs, tab, error, hideTitle, onSubmit, children, footer }: QuickFaceFrameProps) {
+    const { dragHandleProps } = useContext(EventShellContext);
+    return (
+        <form onSubmit={onSubmit} className="flex flex-col">
+            <div className="flex items-center justify-between px-2 pt-2">
+                {dragHandleProps ? (
+                    <div {...dragHandleProps} aria-hidden="true" className="flex-1 h-7 flex items-center cursor-move text-text-muted select-none touch-none">
+                        <HiOutlineBars2 size={20} />
+                    </div>
+                ) : (
+                    <div className="flex-1" />
+                )}
+                <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"
+                >
+                    <HiOutlineXMark size={20} aria-hidden="true" />
+                </button>
+            </div>
+
+            {tabs}
+
+            <div {...quickPanelProps(tab)} className="flex flex-col gap-3 px-5 pb-3">
+                {error && <Alert>{error}</Alert>}
+
+                {!hideTitle && (
+                    <div className="pl-8">
+                        <input
+                            type="text"
+                            aria-label="Title"
+                            placeholder="Add title"
+                            data-autofocus
+                            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={c.values.title}
+                            onChange={(e) => c.update({ title: e.target.value })}
+                        />
+                    </div>
+                )}
+
+                {children}
+            </div>
+
+            <div className="flex items-center justify-end gap-2 px-4 py-3">{footer}</div>
+        </form>
+    );
+}

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

@@ -38,6 +38,9 @@ export interface RecurrenceEditorProps {
     /** The weekday the event starts on (in the frame its series expands in - see `allDay.ts`'s
      * `startWeekdayCode()`): the day a new weekly rule, or one switched to Weekly, repeats on. Defaults to Monday. */
     startWeekday?: WeekdayCode;
+    /** Leaves out the "Repeats" checkbox, for a caller that already turns repeating on and off itself (the event form's
+     * "Does not repeat" menu): what remains is the rule's details, shown only while there is a rule. */
+    hideToggle?: boolean;
 }
 
 /**
@@ -46,7 +49,7 @@ export interface RecurrenceEditorProps {
  * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
  * `.toText()`), so it never drifts out of sync with what will actually be submitted.
  */
-export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO" }: RecurrenceEditorProps) {
+export default function RecurrenceEditor({ value, onChange, allDay = false, startWeekday = "MO", hideToggle = false }: RecurrenceEditorProps) {
     function handleEnable(enabled: boolean) {
         onChange(enabled ? { freq: "weekly", interval: 1, byDay: [startWeekday], exceptions: [] } : null);
     }
@@ -109,10 +112,12 @@ export default function RecurrenceEditor({ value, onChange, allDay = false, star
 
     return (
         <div className="flex flex-col gap-3">
-            <label className="flex items-center gap-2 text-sm font-medium">
-                <input type="checkbox" checked={value !== null} onChange={(e) => handleEnable(e.target.checked)} />
-                Repeats
-            </label>
+            {!hideToggle && (
+                <label className="flex items-center gap-2 text-sm font-medium">
+                    <input type="checkbox" checked={value !== null} onChange={(e) => handleEnable(e.target.checked)} />
+                    Repeats
+                </label>
+            )}
 
             {value && (
                 <div className="flex flex-col gap-3 pl-6 border-l-2 border-border">

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

@@ -0,0 +1,271 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { HiOutlineXMark } from "react-icons/hi2";
+import { EventChangeRequest, requestEventChange } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { htmlToPlainText, sanitizeEventDescriptionHtml } from "@rapidmx/react-shared/calendar/eventDescription.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { notify } from "../../notifications/store.js";
+import { INPUT_CLASS } from "./EventFormParts.js";
+import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
+import { descriptionProblem, initialDescriptionHtml } from "./eventDialogFields.js";
+import { mergeGuests } from "./eventFormat.js";
+
+/** The event a guest asks about: what it says now (the form starts from it and sends only what differs) and which row of it the request is for. */
+export interface ChangeSubject {
+    /** The event's uid on this mailbox (`CalendarEvent.uid`, or `MessageInvite.calendarEventUid`): the row the organizer's answer will come back to. */
+    uid: string;
+    title: string;
+    location?: string | null;
+    /** ISO 8601 instants; absent for an event whose time is not known. */
+    startDate?: string;
+    endDate?: string;
+    allDay: boolean;
+    /** Part of a series: a request changes the whole series (its own row), so its time - which is one occurrence's - is not offered. */
+    recurring: boolean;
+    description?: string | null;
+    descriptionHtml?: string | null;
+    /** Everyone already invited, whatever the case, so a guest is not added twice. */
+    guestAddresses: string[];
+}
+
+export interface RequestChangeFormProps {
+    subject: ChangeSubject;
+    /** The organizer lets guests change the title, location, description and time (`guestsCanModify`). */
+    canChange: boolean;
+    /** The organizer lets guests add guests (`guestsCanInviteOthers`). */
+    canInvite: boolean;
+    /** The request was sent. */
+    onSent: () => void;
+    onCancel: () => void;
+}
+
+const MINUTE_MS = 60_000;
+
+/** Whether two instants (ISO, or a form's local time) name the same minute. */
+function sameMinute(a: string, b: string): boolean {
+    return Math.round(new Date(a).getTime() / MINUTE_MS) === Math.round(new Date(b).getTime() / MINUTE_MS);
+}
+
+/**
+ * A guest's request to the organizer, for an event whose organizer lets guests change it and/or invite others (`POST /calendar-events/:id/request-change`).
+ * Starts from the event as it is and sends only what the guest changed: the title, location, description and time (with `canChange`) and guests to add (with
+ * `canInvite`). Nothing changes on the guest's own calendar - the organizer's copy is updated (automatically, when the flags allow it) and the change
+ * comes back as the organizer's next update - so the form says so, and afterwards a "Your change was sent to the organizer" notification confirms it.
+ * A title or location can be changed, not cleared (the server refuses that), and the time of a series or an all-day event is not offered.
+ */
+export default function RequestChangeForm({ subject, canChange, canInvite, onSent, onCancel }: RequestChangeFormProps) {
+    const canChangeTime = canChange && !subject.allDay && !subject.recurring && !!subject.startDate && !!subject.endDate;
+    const [title, setTitle] = useState(subject.title);
+    const [location, setLocation] = useState(subject.location ?? "");
+    const [start, setStart] = useState(subject.startDate ? toDatetimeLocal(subject.startDate) : "");
+    const [end, setEnd] = useState(subject.endDate ? toDatetimeLocal(subject.endDate) : "");
+    const [descriptionHtml, setDescriptionHtml] = useState(() => initialDescriptionHtml(subject));
+    const [added, setAdded] = useState<{ address: string }[]>([]);
+    const [guestDraft, setGuestDraft] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [sending, setSending] = useState(false);
+    const heading = canChange ? "Request a change" : "Add guests";
+
+    /** Adds what was typed into the guests box, returning the guests as they now stand; a mistyped address stays in the box and is said. */
+    function addTypedGuests(): { address: string }[] | undefined {
+        const invited = [...subject.guestAddresses, ...added.map((guest) => guest.address)].map((address) => ({ address }));
+        const merged = mergeGuests(
+            invited.map((guest) => ({ ...guest, role: "required" as const, responseStatus: "needsAction" as const, isOrganizer: false })),
+            guestDraft,
+        );
+        if (merged.invalid.length > 0) {
+            setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
+            setGuestDraft(merged.invalid.join(" "));
+            return undefined;
+        }
+        setGuestDraft("");
+        return merged.attendees.slice(invited.length).map((guest) => ({ address: guest.address }));
+    }
+
+    function handleGuestKey(event: React.KeyboardEvent<HTMLInputElement>) {
+        if (event.key === "Enter" || event.key === "," || event.key === ";") {
+            event.preventDefault();
+            setError(null);
+            const more = addTypedGuests();
+            if (more) {
+                setAdded((current) => [...current, ...more]);
+            }
+        }
+    }
+
+    async function handleSubmit(event: FormEvent) {
+        event.preventDefault();
+        setError(null);
+        const typed = canInvite ? addTypedGuests() : [];
+        if (!typed) {
+            return;
+        }
+        const guests = [...added, ...typed];
+        const request: EventChangeRequest = {};
+
+        if (canChange) {
+            if (title.trim() !== subject.title.trim()) {
+                if (!title.trim()) {
+                    setError("Enter a title, or leave it as it is.");
+                    return;
+                }
+                request.title = title.trim();
+            }
+            if (location.trim() !== (subject.location ?? "").trim()) {
+                if (!location.trim()) {
+                    setError("Enter a location, or leave it as it is.");
+                    return;
+                }
+                request.location = location.trim();
+            }
+            if (canChangeTime && (!sameMinute(start, subject.startDate as string) || !sameMinute(end, subject.endDate as string))) {
+                const startMs = new Date(start).getTime();
+                const endMs = new Date(end).getTime();
+                if (Number.isNaN(startMs) || Number.isNaN(endMs) || endMs <= startMs) {
+                    setError("The end time must be after the start time.");
+                    return;
+                }
+                request.startDate = new Date(startMs).toISOString();
+                request.endDate = new Date(endMs).toISOString();
+            }
+            const html = sanitizeEventDescriptionHtml(descriptionHtml);
+            if (html !== sanitizeEventDescriptionHtml(initialDescriptionHtml(subject)) && descriptionHtml !== initialDescriptionHtml(subject)) {
+                const plain = htmlToPlainText(html);
+                if (!plain) {
+                    setError("Enter a description, or leave it as it is.");
+                    return;
+                }
+                const tooLong = descriptionProblem(html);
+                if (tooLong) {
+                    setError(tooLong);
+                    return;
+                }
+                request.descriptionHtml = html;
+                request.description = plain;
+            }
+        }
+        if (guests.length > 0) {
+            request.addAttendees = guests;
+        }
+        if (Object.keys(request).length === 0) {
+            setError("Change something first.");
+            return;
+        }
+
+        setSending(true);
+        try {
+            await requestEventChange(subject.uid, request);
+            notify({
+                kind: "success",
+                title: "Your change was sent to the organizer",
+                message: "The event on your calendar updates when the organizer's update comes back.",
+            });
+            onSent();
+        } catch (err) {
+            notifyApiError(err, "Couldn't send your change");
+            setSending(false);
+        }
+    }
+
+    return (
+        <form onSubmit={(event) => void handleSubmit(event)} aria-label={heading} className="flex flex-col gap-3">
+            <div className="flex items-center justify-between gap-3">
+                <h3 className="text-sm font-semibold">{heading}</h3>
+                <button
+                    type="button"
+                    aria-label="Cancel request"
+                    onClick={onCancel}
+                    className="w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text"
+                >
+                    <HiOutlineXMark size={16} aria-hidden="true" />
+                </button>
+            </div>
+            <p className="text-xs text-text-muted">
+                Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you.
+            </p>
+            {error && <Alert>{error}</Alert>}
+
+            {canChange && (
+                <>
+                    <label className="flex flex-col gap-1 text-xs font-medium">
+                        Title
+                        <input type="text" className={INPUT_CLASS} value={title} onChange={(e) => setTitle(e.target.value)} />
+                    </label>
+                    <label className="flex flex-col gap-1 text-xs font-medium">
+                        Location
+                        <input type="text" className={INPUT_CLASS} value={location} onChange={(e) => setLocation(e.target.value)} />
+                    </label>
+                    {canChangeTime && (
+                        <div className="flex flex-wrap gap-3">
+                            <label className="flex flex-col gap-1 text-xs font-medium">
+                                Starts
+                                <input type="datetime-local" className={INPUT_CLASS} value={start} onChange={(e) => setStart(e.target.value)} />
+                            </label>
+                            <label className="flex flex-col gap-1 text-xs font-medium">
+                                Ends
+                                <input type="datetime-local" className={INPUT_CLASS} value={end} onChange={(e) => setEnd(e.target.value)} />
+                            </label>
+                        </div>
+                    )}
+                    {!canChangeTime && (
+                        <p className="text-xs text-text-muted">
+                            {subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer."}
+                        </p>
+                    )}
+                    <div className="flex flex-col gap-1">
+                        <span className="text-xs font-medium">Description</span>
+                        <LazyDescriptionEditor value={descriptionHtml} onChange={setDescriptionHtml} />
+                    </div>
+                </>
+            )}
+
+            {canInvite && (
+                <div className="flex flex-col gap-2">
+                    <label className="flex flex-col gap-1 text-xs font-medium">
+                        Guests to add
+                        <input
+                            type="text"
+                            className={INPUT_CLASS}
+                            placeholder="name@example.com"
+                            value={guestDraft}
+                            onChange={(e) => setGuestDraft(e.target.value)}
+                            onKeyDown={handleGuestKey}
+                        />
+                    </label>
+                    {added.length > 0 && (
+                        <ul className="flex flex-wrap gap-1.5">
+                            {added.map((guest, index) => (
+                                <li key={guest.address} className="flex items-center gap-1 text-xs rounded-full bg-surface-alt pl-2.5 pr-1 py-0.5">
+                                    <span className="truncate max-w-[16rem]">{guest.address}</span>
+                                    <button
+                                        type="button"
+                                        aria-label={`Remove ${guest.address}`}
+                                        onClick={() => setAdded((current) => current.filter((_, i) => i !== index))}
+                                        className="w-4 h-4 flex items-center justify-center rounded-full text-text-muted hover:text-text"
+                                    >
+                                        <HiOutlineXMark size={12} aria-hidden="true" />
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            )}
+
+            <div className="flex items-center gap-2">
+                <Button type="submit" loading={sending} disabled={sending} className="!w-auto">
+                    Send request
+                </Button>
+                <Button type="button" variant="text" className="!w-auto" disabled={sending} onClick={onCancel}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}

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

@@ -6,6 +6,7 @@ import React from "react";
 import { addDays, addMinutes, format, startOfDay } from "date-fns";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
 import { occursOnDay } from "./allDay.js";
+import { EventAnchor, anchorOf } from "./EventShell.js";
 
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
@@ -25,8 +26,8 @@ export interface SplitDayViewProps {
      * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
     occurrences: CalendarOccurrence[];
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`. */
-    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`; `anchor` is the slot. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
 }
 
 /**
@@ -44,7 +45,7 @@ export default function SplitDayView({ day, columns, occurrences, onSelectEvent,
     const dayStart = startOfDay(day);
 
     return (
-        <div role="region" aria-label="Split view" className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+        <div role="region" aria-label="Split view" data-calendar-scroller className="flex-1 flex flex-col min-h-0 overflow-y-auto">
             <div className="flex border-b border-border shrink-0">
                 <div className="w-14 shrink-0" />
                 {columns.map((col) => (
@@ -88,7 +89,7 @@ function SplitColumn({
     dayStart: Date;
     occurrences: CalendarOccurrence[];
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
 }) {
     return (
         <div className="flex-1 min-w-0 relative border-l border-border">
@@ -98,7 +99,7 @@ function SplitColumn({
                     <button
                         key={i}
                         type="button"
-                        onClick={() => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid)}
+                        onClick={(e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
                         style={{ height: HOUR_HEIGHT_PX / 2 }}
                         className="block w-full border-b border-border/50 text-left"
                         aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}