@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -1,173 +1,185 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
-import { dayDropId, eventDragId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import { occursOnDay, startsOnDay } from "./allDay.js";
-
-const MAX_CHIPS_PER_DAY = 3;
-
-export interface MonthViewProps {
-    /** Any date within the month to display. */
-    viewDate: Date;
-    /** Already expanded for the visible grid range — see `recurrence.ts`'s `expandAllOccurrences`. */
-    occurrences: CalendarOccurrence[];
-    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
-    folderColors: Record<string, string>;
-    onSelectDay: (date: Date) => void;
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-}
-
-/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
- * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
-export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent }: MonthViewProps) {
-    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
-    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
-
-    return (
-        <div className="flex-1 grid grid-cols-7 grid-rows-6 min-h-0" role="grid" aria-label="Month">
-            {days.map((day) => (
-                <DayCell
-                    key={day.toISOString()}
-                    day={day}
-                    inCurrentMonth={isSameMonth(day, viewDate)}
-                    occurrences={occurrences.filter((occ) => occursOnDay(occ, day))}
-                    folderColors={folderColors}
-                    onSelectDay={onSelectDay}
-                    onSelectEvent={onSelectEvent}
-                />
-            ))}
-        </div>
-    );
-}
-
-interface DayCellProps {
-    day: Date;
-    inCurrentMonth: boolean;
-    occurrences: CalendarOccurrence[];
-    folderColors: Record<string, string>;
-    onSelectDay: (date: Date) => void;
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-}
-
-function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent }: DayCellProps) {
-    const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
-    const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
-    const overflowCount = occurrences.length - visible.length;
-
-    return (
-        <div
-            ref={setNodeRef}
-            className={[
-                "border-b border-r border-border p-1 flex flex-col gap-0.5 min-h-0 overflow-hidden",
-                isOver ? "bg-primary/5" : "",
-                inCurrentMonth ? "bg-surface" : "bg-surface-alt",
-            ].join(" ")}
-        >
-            <button
-                type="button"
-                onClick={() => onSelectDay(day)}
-                className={[
-                    "self-start text-xs font-semibold w-6 h-6 rounded-full flex items-center justify-center shrink-0",
-                    isToday(day) ? "bg-primary text-white" : inCurrentMonth ? "text-text" : "text-text-muted",
-                ].join(" ")}
-            >
-                {format(day, "d")}
-            </button>
-            <div className="flex-1 flex flex-col gap-0.5 min-h-0 overflow-hidden">
-                {visible.map((occurrence) =>
-                    startsOnDay(occurrence, day) ? (
-                        <EventChip
-                            key={occurrence.occurrenceKey}
-                            occurrence={occurrence}
-                            color={folderColors[occurrence.folderUid]}
-                            onSelect={onSelectEvent}
-                        />
-                    ) : (
-                        <ContinuationChip
-                            key={occurrence.occurrenceKey}
-                            occurrence={occurrence}
-                            color={folderColors[occurrence.folderUid]}
-                            onSelect={onSelectEvent}
-                        />
-                    ),
-                )}
-                {overflowCount > 0 && (
-                    <button
-                        type="button"
-                        onClick={() => onSelectDay(day)}
-                        className="text-xs text-text-muted text-left hover:underline shrink-0"
-                    >
-                        +{overflowCount} more
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function EventChip({
-    occurrence,
-    color,
-    onSelect,
-}: {
-    occurrence: CalendarOccurrence;
-    /** This occurrence's calendar color — see `calendarColors.ts`. Only applied for a "busy" chip; a
-     * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
-    color: string;
-    onSelect: (occurrence: CalendarOccurrence) => void;
-}) {
-    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
-    const isFree = occurrence.busyStatus === "free";
-
-    return (
-        <button
-            ref={setNodeRef}
-            type="button"
-            onClick={() => onSelect(occurrence)}
-            style={{
-                ...(transform ? { transform: `translate(${transform.x}px, ${transform.y}px)`, zIndex: 10 } : undefined),
-                ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
-            }}
-            className={[
-                "text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0",
-                isFree ? "bg-surface-alt text-text-muted" : "",
-                isDragging ? "opacity-50" : "",
-            ].join(" ")}
-            {...listeners}
-            {...attributes}
-        >
-            {occurrence.allDay ? "" : `${format(new Date(occurrence.startDate), "h:mma")} `}
-            {occurrence.title}
-        </button>
-    );
-}
-
-/** A multi-day event's chip on a day after its first: clickable, but not draggable (its drag id is
- * already taken by the start day's chip) and without a start-time prefix. */
-function ContinuationChip({
-    occurrence,
-    color,
-    onSelect,
-}: {
-    occurrence: CalendarOccurrence;
-    color: string;
-    onSelect: (occurrence: CalendarOccurrence) => void;
-}) {
-    const isFree = occurrence.busyStatus === "free";
-    return (
-        <button
-            type="button"
-            onClick={() => onSelect(occurrence)}
-            style={isFree ? undefined : { backgroundColor: color, color: "#fff" }}
-            className={["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : ""].join(" ")}
-        >
-            {occurrence.title}
-        </button>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { addDays, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
+import { dayDropId, eventDragId } 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 MAX_CHIPS_PER_DAY = 3;
+
+export interface MonthViewProps {
+    /** Any date within the month to display. */
+    viewDate: Date;
+    /** Already expanded for the visible grid range — see `recurrence.ts`'s `expandAllOccurrences`. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectDay: (date: Date) => void;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on the empty part of a day: the day (from midnight to the next midnight) and the cell, for a new all-day event's quick-create
+     * popover to open beside. */
+    onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
+}
+
+/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
+ * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
+export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: MonthViewProps) {
+    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
+    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+    const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
+
+    return (
+        <div className="flex-1 grid grid-cols-7 grid-rows-6 min-h-0" role="grid" aria-label="Month">
+            {days.map((day) => (
+                <DayCell
+                    key={day.toISOString()}
+                    day={day}
+                    inCurrentMonth={isSameMonth(day, viewDate)}
+                    occurrences={occurrences.filter((occ) => occursOnDay(occ, day))}
+                    folderColors={folderColors}
+                    onSelectDay={onSelectDay}
+                    onSelectEvent={onSelectEvent}
+                    onSelectSlot={onSelectSlot}
+                />
+            ))}
+        </div>
+    );
+}
+
+interface DayCellProps {
+    day: Date;
+    inCurrentMonth: boolean;
+    occurrences: CalendarOccurrence[];
+    folderColors: Record<string, string>;
+    onSelectDay: (date: Date) => void;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
+}
+
+function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: DayCellProps) {
+    const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
+    const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
+    const overflowCount = occurrences.length - visible.length;
+
+    return (
+        <div
+            ref={setNodeRef}
+            onClick={(e) => {
+                // Only the empty part of the cell: the day number, the chips and "+N more" have their own clicks.
+                if (onSelectSlot && !(e.target as Element).closest("button")) {
+                    onSelectSlot(day, addDays(day, 1), anchorOf(e.currentTarget));
+                }
+            }}
+            className={[
+                "border-b border-r border-border p-1 flex flex-col gap-0.5 min-h-0 overflow-hidden",
+                isOver ? "bg-primary/5" : "",
+                inCurrentMonth ? "bg-surface" : "bg-surface-alt",
+            ].join(" ")}
+        >
+            <button
+                type="button"
+                onClick={() => onSelectDay(day)}
+                className={[
+                    "self-start text-xs font-semibold w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                    isToday(day) ? "bg-primary text-white" : inCurrentMonth ? "text-text" : "text-text-muted",
+                ].join(" ")}
+            >
+                {format(day, "d")}
+            </button>
+            <div className="flex-1 flex flex-col gap-0.5 min-h-0 overflow-hidden">
+                {visible.map((occurrence) =>
+                    startsOnDay(occurrence, day) ? (
+                        <EventChip
+                            key={occurrence.occurrenceKey}
+                            occurrence={occurrence}
+                            color={folderColors[occurrence.folderUid]}
+                            onSelect={onSelectEvent}
+                        />
+                    ) : (
+                        <ContinuationChip
+                            key={occurrence.occurrenceKey}
+                            occurrence={occurrence}
+                            color={folderColors[occurrence.folderUid]}
+                            onSelect={onSelectEvent}
+                        />
+                    ),
+                )}
+                {overflowCount > 0 && (
+                    <button
+                        type="button"
+                        onClick={() => onSelectDay(day)}
+                        className="text-xs text-text-muted text-left hover:underline shrink-0"
+                    >
+                        +{overflowCount} more
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function EventChip({
+    occurrence,
+    color,
+    onSelect,
+}: {
+    occurrence: CalendarOccurrence;
+    /** This occurrence's calendar color — see `calendarColors.ts`. Only applied for a "busy" chip; a
+     * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
+    color: string;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+}) {
+    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
+    const isFree = occurrence.busyStatus === "free";
+
+    return (
+        <button
+            ref={setNodeRef}
+            type="button"
+            onClick={() => onSelect(occurrence)}
+            style={{
+                ...(transform ? { transform: `translate(${transform.x}px, ${transform.y}px)`, zIndex: 10 } : undefined),
+                ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
+            }}
+            className={[
+                "text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0",
+                isFree ? "bg-surface-alt text-text-muted" : "",
+                isDragging ? "opacity-50" : "",
+            ].join(" ")}
+            {...listeners}
+            {...attributes}
+        >
+            {occurrence.allDay ? "" : `${format(new Date(occurrence.startDate), "h:mma")} `}
+            {occurrence.title}
+        </button>
+    );
+}
+
+/** A multi-day event's chip on a day after its first: clickable, but not draggable (its drag id is
+ * already taken by the start day's chip) and without a start-time prefix. */
+function ContinuationChip({
+    occurrence,
+    color,
+    onSelect,
+}: {
+    occurrence: CalendarOccurrence;
+    color: string;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+}) {
+    const isFree = occurrence.busyStatus === "free";
+    return (
+        <button
+            type="button"
+            onClick={() => onSelect(occurrence)}
+            style={isFree ? undefined : { backgroundColor: color, color: "#fff" }}
+            className={["text-xs text-left truncate rounded-sm px-1.5 py-0.5 shrink-0", isFree ? "bg-surface-alt text-text-muted" : ""].join(" ")}
+        >
+            {occurrence.title}
+        </button>
+    );
+}

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

@@ -0,0 +1,87 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
+import AppointmentQuickForm, { initialAppointmentDraft } from "./AppointmentQuickForm.js";
+import EventExpandedForm from "./EventExpandedForm.js";
+import EventQuickForm from "./EventQuickForm.js";
+import { EventFormController } from "./eventForm.js";
+import QuickCreateTabs, { QuickTab, quickPanelProps, quickTabId } from "./QuickCreateTabs.js";
+import TaskQuickForm, { initialTaskDraft } from "./TaskQuickForm.js";
+
+/** What `EventModal` tells the editor about the tabs of a new event's popover. */
+export interface QuickCreateConfig {
+    tab: QuickTab;
+    onTabChange: (tab: QuickTab) => void;
+    /** Where the booking plugin's Settings pages are, or `undefined` when the plugin is not running (and there is no Appointment schedule tab). */
+    bookingHref?: string;
+}
+
+export interface QuickCreateFacesProps {
+    /** The Event tab's form, which owns the title and the mailbox and calendar the other tabs share. */
+    c: EventFormController;
+    layout: "quick" | "expanded";
+    onExpand: () => void;
+    config: QuickCreateConfig;
+    dirtyRef: MutableRefObject<boolean>;
+    /** The signed-in mailbox's address: the host's name on booking pages when its display name is not known. */
+    organizerAddress: string;
+}
+
+/**
+ * The faces of a new event, one for each tab: Event (the quick popover or, after More options, the full card - unchanged), Task and
+ * Appointment schedule. Stays mounted while the tab changes, so it is what keeps the other tabs' fields (the Event tab's live in
+ * `EventEditor`) when the user looks at another one and comes back. The title, the mailbox and the calendar are the Event tab's, so they
+ * are shared by all three.
+ *
+ * The tab strip is redrawn by whichever face is showing, so a tab change moves keyboard focus back to the selected tab here - what an
+ * arrow-key walk along the strip needs.
+ */
+export default function QuickCreateFaces({ c, layout, onExpand, config, dirtyRef, organizerAddress }: QuickCreateFacesProps) {
+    const { tab, onTabChange, bookingHref } = config;
+    const [task, setTask] = useState(() => initialTaskDraft(c.values.start, c.values.allDay));
+    const [appointment, setAppointment] = useState(initialAppointmentDraft);
+
+    const shownTab = useRef(tab);
+    useEffect(() => {
+        if (shownTab.current !== tab) {
+            shownTab.current = tab;
+            document.getElementById(quickTabId(tab))?.focus();
+        }
+    }, [tab]);
+
+    // Notes typed on the Task tab are worth a second thought before a stray click closes the popover, like a title.
+    dirtyRef.current = dirtyRef.current || task.body.trim() !== "";
+
+    const tabs = <QuickCreateTabs tab={tab} onChange={onTabChange} showAppointment={!!bookingHref} />;
+
+    if (tab === "task") {
+        return (
+            <TaskQuickForm
+                c={c}
+                draft={task}
+                onDraftChange={(patch) => setTask((prev) => ({ ...prev, ...patch }))}
+                tabs={tabs}
+                expanded={layout === "expanded"}
+                onExpand={onExpand}
+            />
+        );
+    }
+    if (tab === "appointment") {
+        const hostMailbox = c.mailboxOptions?.find((option) => option.mailbox.uid === c.values.targetMailboxUid)?.mailbox;
+        return (
+            <AppointmentQuickForm
+                c={c}
+                draft={appointment}
+                onDraftChange={(patch) => setAppointment((prev) => ({ ...prev, ...patch }))}
+                tabs={tabs}
+                settingsHref={bookingHref!}
+                hostName={hostMailbox?.displayName ?? organizerAddress}
+                timeZone={hostMailbox?.timezone ?? deviceTimeZone()}
+            />
+        );
+    }
+    return layout === "quick" ? <EventQuickForm c={c} onExpand={onExpand} tabs={tabs} tabPanelProps={quickPanelProps("event")} /> : <EventExpandedForm c={c} />;
+}

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