@rapidmx/web-client 0.14.0 → 0.15.1

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

@@ -0,0 +1,289 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, ReactNode, useEffect, useState } from "react";
+import { parseISO } from "date-fns";
+import {
+    HiOutlineBars3BottomLeft,
+    HiOutlineBell,
+    HiOutlineClock,
+    HiOutlineFlag,
+    HiOutlineFolder,
+    HiOutlineListBullet,
+    HiOutlineSun,
+    HiOutlineXMark,
+} from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { TaskList, TaskPriority, createTask, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
+import { notify } from "../../notifications/store.js";
+import { EventFormController } from "./eventForm.js";
+import { INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
+import QuickFaceFrame from "./QuickFaceFrame.js";
+
+/**
+ * What the Task tab holds besides the title (which is the Event tab's): kept by `QuickCreateFaces`, so it survives a trip to another tab.
+ * `dueDate` and `reminder` are on the device's clock, as the Tasks app's own form reads them.
+ */
+export interface TaskDraft {
+    /** `yyyy-MM-dd`, or `""` for a task with no due date. */
+    dueDate: string;
+    /** A date-only due date (local midnight, what the Tasks app writes) rather than a time on it. */
+    allDay: boolean;
+    /** `HH:mm`, used when `allDay` is off. */
+    dueTime: string;
+    /** The `TaskList` chosen; `""` is the default "Tasks" list. */
+    listUid: string;
+    body: string;
+    priority: TaskPriority;
+    /** `yyyy-MM-ddTHH:mm`, or `""` for no reminder. */
+    reminder: string;
+    myDay: boolean;
+}
+
+/** A new task's starting values: due on the day of the slot or day that was clicked, all day, with the slot's time ready if a time is wanted. */
+export function initialTaskDraft(start: string, allDayClick: boolean): TaskDraft {
+    return {
+        dueDate: start.slice(0, 10),
+        allDay: true,
+        dueTime: allDayClick ? "09:00" : start.slice(11, 16),
+        listUid: "",
+        body: "",
+        priority: "normal",
+        reminder: "",
+        myDay: false,
+    };
+}
+
+export interface TaskQuickFormProps {
+    c: EventFormController;
+    draft: TaskDraft;
+    onDraftChange: (patch: Partial<TaskDraft>) => void;
+    tabs: ReactNode;
+    /** The card: notes, priority, a reminder and My Day as well. */
+    expanded: boolean;
+    onExpand: () => void;
+}
+
+/**
+ * The Task tab of the New event popover (and, with More options, its card): creates a task in the chosen mailbox's Tasks folder with
+ * `POST /api/mail/tasks`. Title, due date (all day, or a time on it), which mailbox and - when the mailbox has any - which task list; the
+ * card adds notes, priority, a reminder and My Day - every field a `Task` has that a person can fill in (an assignee is chosen in the Tasks app).
+ * The calendar does not show tasks, so a save closes the popover with a "Task added" notification instead of reloading anything.
+ */
+export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded, onExpand }: TaskQuickFormProps) {
+    const { values } = c;
+    const [lists, setLists] = useState<TaskList[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    // The chosen mailbox's task lists (a mailbox with none has just the default one, and no choice is shown).
+    useEffect(() => {
+        let cancelled = false;
+        setLists([]);
+        void listTaskLists(values.targetMailboxUid)
+            .catch((): TaskList[] => [])
+            .then((result) => {
+                if (!cancelled) {
+                    setLists(result);
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [values.targetMailboxUid]);
+
+    const mailboxChoices = c.mailboxOptions && c.mailboxOptions.length > 1 ? c.mailboxOptions : undefined;
+    // A list of another mailbox that was chosen before the mailbox changed is no longer one.
+    const listUid = lists.some((list) => list.uid === draft.listUid) ? draft.listUid : "";
+
+    async function handleSubmit(event: FormEvent) {
+        event.preventDefault();
+        setError(null);
+        const title = values.title.trim();
+        if (!title) {
+            setError("A title is required.");
+            return;
+        }
+        if (draft.dueDate && !draft.allDay && !draft.dueTime) {
+            setError("Pick a time, or choose All day.");
+            return;
+        }
+        setSaving(true);
+        try {
+            const mailboxUid = values.targetMailboxUid;
+            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks");
+            if (!folderUid) {
+                setError("That mailbox has no Tasks folder.");
+                return;
+            }
+            await createTask({
+                mailboxUid,
+                folderUid,
+                title,
+                body: draft.body.trim() || undefined,
+                // A date-only due date is the local day's midnight, the way the Tasks app writes one.
+                dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                priority: draft.priority,
+                reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
+                taskListUid: listUid || undefined,
+                myDay: draft.myDay || undefined,
+            });
+            notify({ kind: "success", title: "Task added", message: `“${title}” was added to Tasks.` });
+            c.onCancel();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create this task.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <QuickFaceFrame
+            c={c}
+            tabs={tabs}
+            tab="task"
+            error={error}
+            onSubmit={(event) => void handleSubmit(event)}
+            footer={
+                <>
+                    {!expanded && (
+                        <Button type="button" variant="text" className="!w-auto" onClick={onExpand}>
+                            More options
+                        </Button>
+                    )}
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </>
+            }
+        >
+            <IconRow icon={<HiOutlineClock size={20} />}>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+                    <input
+                        type="date"
+                        aria-label="Due date"
+                        className={`${SELECT_CLASS} min-w-0`}
+                        value={draft.dueDate}
+                        onChange={(e) => onDraftChange({ dueDate: e.target.value })}
+                    />
+                    {draft.dueDate && !draft.allDay && (
+                        <input
+                            type="time"
+                            aria-label="Due time"
+                            className={`${SELECT_CLASS} min-w-0`}
+                            value={draft.dueTime}
+                            onChange={(e) => onDraftChange({ dueTime: e.target.value })}
+                        />
+                    )}
+                    {draft.dueDate && (
+                        <label className="flex items-center gap-2">
+                            <input type="checkbox" checked={draft.allDay} onChange={(e) => onDraftChange({ allDay: e.target.checked })} />
+                            All day
+                        </label>
+                    )}
+                </div>
+            </IconRow>
+
+            {mailboxChoices && (
+                <IconRow icon={<HiOutlineFolder size={20} />}>
+                    <select
+                        aria-label="Mailbox"
+                        className={`${SELECT_CLASS} max-w-full`}
+                        value={values.targetMailboxUid}
+                        onChange={(e) => c.onMailboxChange(e.target.value)}
+                    >
+                        {mailboxChoices.map(({ mailbox }) => (
+                            <option key={mailbox.uid} value={mailbox.uid}>
+                                {mailbox.displayName}
+                                {mailbox.ownerUserUid ? "" : " (shared)"}
+                            </option>
+                        ))}
+                    </select>
+                </IconRow>
+            )}
+
+            {lists.length > 0 && (
+                <IconRow icon={<HiOutlineListBullet size={20} />}>
+                    <select
+                        aria-label="Task list"
+                        className={`${SELECT_CLASS} max-w-full`}
+                        value={listUid}
+                        onChange={(e) => onDraftChange({ listUid: e.target.value })}
+                    >
+                        <option value="">Tasks</option>
+                        {lists.map((list) => (
+                            <option key={list.uid} value={list.uid}>
+                                {list.name}
+                            </option>
+                        ))}
+                    </select>
+                </IconRow>
+            )}
+
+            {expanded && (
+                <>
+                    <IconRow icon={<HiOutlineBars3BottomLeft size={20} />}>
+                        <textarea
+                            aria-label="Notes"
+                            rows={3}
+                            placeholder="Add notes"
+                            className={INPUT_CLASS}
+                            value={draft.body}
+                            onChange={(e) => onDraftChange({ body: e.target.value })}
+                        />
+                    </IconRow>
+                    <IconRow icon={<HiOutlineFlag size={20} />}>
+                        <select
+                            aria-label="Priority"
+                            className={`${SELECT_CLASS} max-w-full`}
+                            value={draft.priority}
+                            onChange={(e) => onDraftChange({ priority: e.target.value as TaskPriority })}
+                        >
+                            <option value="low">Low priority</option>
+                            <option value="normal">Normal priority</option>
+                            <option value="high">High priority</option>
+                        </select>
+                    </IconRow>
+                    <IconRow icon={<HiOutlineBell size={20} />}>
+                        {draft.reminder ? (
+                            <div className="flex items-center gap-2 text-sm">
+                                <input
+                                    type="datetime-local"
+                                    aria-label="Reminder"
+                                    className={`${SELECT_CLASS} min-w-0`}
+                                    value={draft.reminder}
+                                    onChange={(e) => onDraftChange({ reminder: e.target.value })}
+                                />
+                                <button
+                                    type="button"
+                                    aria-label="Remove reminder"
+                                    className="w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text"
+                                    onClick={() => onDraftChange({ reminder: "" })}
+                                >
+                                    <HiOutlineXMark size={16} aria-hidden="true" />
+                                </button>
+                            </div>
+                        ) : (
+                            <button
+                                type="button"
+                                className="text-sm text-text-muted hover:text-text py-1.5"
+                                onClick={() => onDraftChange({ reminder: `${draft.dueDate || values.start.slice(0, 10)}T09:00` })}
+                            >
+                                Add reminder
+                            </button>
+                        )}
+                    </IconRow>
+                    <IconRow icon={<HiOutlineSun size={20} />}>
+                        <label className="flex items-center gap-2 text-sm py-1.5">
+                            <input type="checkbox" checked={draft.myDay} onChange={(e) => onDraftChange({ myDay: e.target.checked })} />
+                            Add to My Day
+                        </label>
+                    </IconRow>
+                </>
+            )}
+        </QuickFaceFrame>
+    );
+}

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

@@ -8,6 +8,7 @@ import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
 import { dayDropId, eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
+import { EventAnchor, anchorOf } from "./EventShell.js";
 
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
@@ -22,8 +23,9 @@ export interface TimeGridViewProps {
     /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
     folderColors: Record<string, string>;
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
-    onSelectSlot: (start: Date, end: Date) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. `anchor` is the slot, for the
+     * quick-create popover to open beside. */
+    onSelectSlot: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 
 /** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
@@ -34,7 +36,7 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
 
     return (
-        <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+        <div 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" />
                 {days.map((day) => (
@@ -96,7 +98,7 @@ interface DayColumnProps {
     occurrences: CalendarOccurrence[];
     folderColors: Record<string, string>;
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    onSelectSlot: (start: Date, end: Date) => void;
+    onSelectSlot: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }: DayColumnProps) {
@@ -131,13 +133,13 @@ function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot
     );
 }
 
-function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start: Date, end: Date) => void }) {
+function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start: Date, end: Date, anchor: EventAnchor) => void }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
     return (
         <button
             ref={setNodeRef}
             type="button"
-            onClick={() => onSelectSlot(start, addMinutes(start, SLOT_MINUTES))}
+            onClick={(e) => onSelectSlot(start, addMinutes(start, SLOT_MINUTES), anchorOf(e.currentTarget))}
             style={{ height: HOUR_HEIGHT_PX / 2 }}
             className={["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" ")}
             aria-label={`New event at ${format(start, "h:mm a, MMM d")}`}

package/apps/shared/components/calendar/eventDialogFields.ts

@@ -0,0 +1,86 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { EventVisibility, guestPermissionsOf, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import {
+    MAX_EVENT_DESCRIPTION_HTML_LENGTH,
+    MAX_EVENT_DESCRIPTION_LENGTH,
+    htmlToPlainText,
+    sanitizeEventDescriptionHtml,
+} from "@rapidmx/react-shared/calendar/eventDescription.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventFormValues } from "./eventForm.js";
+
+/** The event dialog's own fields of a `CalendarEventInput` - only the ones that differ from what the event has, so saving an event no one touched these on
+ * says nothing about them (and asks for no new invitations). */
+export interface EventDialogFields {
+    /** `null` clears. */
+    description?: string | null;
+    descriptionHtml?: string | null;
+    visibility?: EventVisibility;
+    guestsCanModify?: boolean;
+    guestsCanInviteOthers?: boolean;
+    guestsCanSeeGuestList?: boolean;
+}
+
+function escapeHtml(text: string): string {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/** Whether the editor's HTML holds any text (an emptied editor writes `<p></p>`). */
+export function hasDescriptionText(html: string): boolean {
+    return html.replace(/<[^>]*>/g, "").trim() !== "";
+}
+
+/** A plain-text description as the paragraphs the editor starts from: one for each line (an event whose description has no HTML). */
+export function plainTextToHtml(text: string): string {
+    return text
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<p>${escapeHtml(line)}</p>`)
+        .join("");
+}
+
+/** What the description editor starts with for `occurrence`: its HTML, else its plain text as paragraphs, else nothing. */
+export function initialDescriptionHtml(occurrence: Pick<CalendarOccurrence, "description" | "descriptionHtml"> | null): string {
+    if (occurrence?.descriptionHtml) {
+        return occurrence.descriptionHtml;
+    }
+    return occurrence?.description ? plainTextToHtml(occurrence.description) : "";
+}
+
+/** Why the description cannot be saved as it is - too long for the server (400) - or `undefined`. */
+export function descriptionProblem(descriptionHtml: string): string | undefined {
+    const html = sanitizeEventDescriptionHtml(descriptionHtml);
+    return html.length > MAX_EVENT_DESCRIPTION_HTML_LENGTH || htmlToPlainText(html).length > MAX_EVENT_DESCRIPTION_LENGTH
+        ? "The description is too long."
+        : undefined;
+}
+
+/**
+ * What the form says about the description, visibility and guest permissions that differs from `occurrence` (`null` for a new event, which starts from the
+ * defaults: no description, default visibility, guests cannot modify, can invite, can see the list). A description is sent as both its sanitized HTML and the
+ * plain text derived from it, or as `null` twice when it was emptied; one the user did not change is not sent.
+ */
+export function dialogFields(values: EventFormValues, occurrence: CalendarOccurrence | null): EventDialogFields {
+    const fields: EventDialogFields = {};
+
+    const initial = initialDescriptionHtml(occurrence);
+    const html = sanitizeEventDescriptionHtml(values.descriptionHtml);
+    if (values.descriptionHtml !== initial && html !== sanitizeEventDescriptionHtml(initial)) {
+        const plain = htmlToPlainText(html);
+        fields.description = plain || null;
+        fields.descriptionHtml = plain ? html : null;
+    }
+
+    if (values.visibility !== (occurrence ? visibilityOf(occurrence) : "default")) {
+        fields.visibility = values.visibility;
+    }
+    const permissions = guestPermissionsOf(occurrence ?? {});
+    for (const key of ["guestsCanModify", "guestsCanInviteOthers", "guestsCanSeeGuestList"] as const) {
+        if (values[key] !== permissions[key]) {
+            fields[key] = values[key];
+        }
+    }
+    return fields;
+}

package/apps/shared/components/calendar/eventForm.ts

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { FormEvent } from "react";
+import { Attendee, BusyStatus, EventVisibility, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+/** Which occurrences of a recurring event an edit applies to. */
+export type EditScope = "occurrence" | "series";
+
+/**
+ * Everything the event form edits. The quick-create popover and the full form are two faces of the same values, so a title typed in the
+ * one is still there when "More options" opens the other.
+ */
+export interface EventFormValues {
+    title: string;
+    location: string;
+    /** `YYYY-MM-DDTHH:mm` on the wall clock of `formZone` (for an all-day event only the date part matters). */
+    start: string;
+    end: string;
+    allDay: boolean;
+    /** The zone `start` and `end` are read in: the device's own until the user picks another. */
+    formZone: string;
+    /** The IANA zone the event is stored with. */
+    timezone: string;
+    attendees: Attendee[];
+    /** What has been typed into the guests field but not added yet. */
+    guestDraft: string;
+    recurrenceRule: RecurrenceRule | null;
+    /** Minutes before the start, as typed; blank means no reminder. */
+    reminderMinutes: string;
+    busyStatus: BusyStatus;
+    /** Who may see the event's details. */
+    visibility: EventVisibility;
+    /** The description as the editor last wrote it: HTML, `""` when there is none (an emptied editor writes `<p></p>`, which counts as none). */
+    descriptionHtml: string;
+    /** What guests may do: ask for the event to change, ask for guests to be added, see who else is invited. */
+    guestsCanModify: boolean;
+    guestsCanInviteOthers: boolean;
+    guestsCanSeeGuestList: boolean;
+    autoReplyEnabled: boolean;
+    autoReplyMessage: string;
+    videoEnabled: boolean;
+    targetMailboxUid: string;
+    targetFolderUid: string;
+}
+
+/** What `EventEditor` hands both faces of the form: the values, and every action and derived fact they need. */
+export interface EventFormController {
+    /** The event being edited, `null` for a new one. */
+    occurrence: CalendarOccurrence | null;
+    values: EventFormValues;
+    update: (patch: Partial<EventFormValues>) => void;
+
+    // Date and time.
+    setStart: (next: string) => void;
+    setEnd: (next: string) => void;
+    onAllDayChange: (allDay: boolean) => void;
+    onTimeZoneChange: (zone: string) => void;
+    timeZones: string[];
+    startWeekday: WeekdayCode | undefined;
+    /** "This event only" of a recurring event: the copy it detaches has no rule of its own. */
+    editingSingleOccurrence: boolean;
+
+    // Find a time: whose calendar the grid shows as "you", and the zone the device's own clock is in.
+    /** The address the event is organized from (the chosen mailbox's, for a new event). */
+    organizerAddress: string;
+    deviceZone: string;
+
+    // Guests.
+    /** Adds the addresses in `text`; returns the ones that are not valid addresses. */
+    addGuests: (text: string) => string[];
+    updateAttendee: (index: number, patch: Partial<Attendee>) => void;
+    removeAttendee: (index: number) => void;
+    addResource: (mailbox: Mailbox) => void;
+    /** Addresses already on the list (lowercased), for the room/equipment picker to leave out. */
+    guestAddresses: string[];
+
+    // Where the event goes.
+    mailboxOptions: { mailbox: Mailbox; calendars: { uid: string; name: string }[] }[] | undefined;
+    onMailboxChange: (mailboxUid: string) => void;
+    /** The calendars to choose between when creating; `undefined` for an existing event, which keeps its own. */
+    calendarChoices: { uid: string; name: string }[] | undefined;
+    calendarName: string | undefined;
+    calendarColor: string | undefined;
+
+    // Video conferencing.
+    videoMeetingUid: string | undefined;
+    /** The organizer's own join link once it is known and safe to open. */
+    joinUrl: string | undefined;
+    /** `undefined` while it is being fetched, `null` once it is known there is none. */
+    organizerJoinUrl: string | null | undefined;
+    videoError: string | null;
+
+    // The form as a whole.
+    editScope: EditScope;
+    setEditScope: (scope: EditScope) => void;
+    /** Whether the "Apply changes to" choice is offered (editing an occurrence of a recurring event). */
+    showEditScope: boolean;
+    error: string | null;
+    saving: boolean;
+    /** Submits the form. */
+    onSubmit: (event: FormEvent) => void;
+    /** The X / Cancel: leaves the form (back to the details for an existing event). */
+    onCancel: () => void;
+}