@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/components/mail/invite/InviteRsvpPopover.tsx

@@ -0,0 +1,271 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { RefObject, useEffect, useId, useRef, useState } from "react";
+import { HiOutlineCheck, HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+import { InviteResponse, MessageInvite, ProposedTime, proposeNewTime, respondToMessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { notifyApiError } from "../../../notifications/apiErrors.js";
+import { calendarHref, conflictSummary, formatInviteWhen } from "./inviteFormat.js";
+import InviteTimeline from "./InviteTimeline.js";
+import ProposeTimeForm from "./ProposeTimeForm.js";
+
+/** The popover's width, and the room it leaves the window's edges. */
+const WIDTH = 360;
+const WINDOW_MARGIN = 16;
+/** What the popover is tall for its own text and footer, before the day view (px), and how tall the day view is per hour drawn. */
+const CHROME_HEIGHT = 190;
+const CONFLICT_LINE_HEIGHT = 22;
+const HOURS_HEIGHT = 36;
+const PROPOSE_HEIGHT = 340;
+
+/** The hours the day view draws for an invitation, as `InviteTimeline` will (a fixed estimate is all a popover's box needs). */
+function estimateHeight(invite: MessageInvite, proposing: boolean): number {
+    const cap = window.innerHeight - WINDOW_MARGIN;
+    if (proposing) {
+        return Math.min(PROPOSE_HEIGHT, cap);
+    }
+    const start = invite.startDate ? new Date(invite.startDate) : undefined;
+    const end = invite.endDate ? new Date(invite.endDate) : undefined;
+    const spanHours = start && end ? Math.max(0, (end.getTime() - start.getTime()) / 3_600_000) : 1;
+    // The day view spans the invitation with two hours either side, and never less than five.
+    const hours = Math.min(24, Math.max(5, Math.ceil(spanHours) + 4));
+    const allDay = invite.schedule.filter((entry) => entry.allDay).length;
+    return Math.min(CHROME_HEIGHT + hours * HOURS_HEIGHT + allDay * CONFLICT_LINE_HEIGHT + (invite.conflicts.length > 0 ? CONFLICT_LINE_HEIGHT : 0), cap);
+}
+
+const RESPONSES: { response: InviteResponse; label: string; text: string; failure: string }[] = [
+    { response: "accepted", label: "Accept", text: "Accept", failure: "Couldn't accept this meeting" },
+    { response: "declined", label: "Decline", text: "Decline", failure: "Couldn't decline this meeting" },
+    { response: "tentative", label: "Tentative", text: "?", failure: "Couldn't respond tentatively to this meeting" },
+];
+
+interface RsvpPanelProps {
+    messageUid: string;
+    invite: MessageInvite;
+    /** Called with the invitation as it stands after an answer or a proposal - the popover then closes. */
+    onDone: (invite: MessageInvite) => void;
+    /** Escape, or Cancel: close without returning anything. */
+    onClose: () => void;
+    /** The proposal form is showing, so the box can be sized for it. */
+    onProposingChange?: (proposing: boolean) => void;
+}
+
+/** What is inside the RSVP popover (or dialog): the meeting, a day view around it and the buttons that answer it. */
+function RsvpPanel({ messageUid, invite, onDone, onClose, onProposingChange }: RsvpPanelProps) {
+    const titleId = useId();
+    const [pending, setPending] = useState<InviteResponse | "propose" | null>(null);
+    const [proposing, setProposingState] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const moreRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const busy = pending !== null;
+    const when = formatInviteWhen(invite);
+
+    // Focus goes to the first thing to do when the panel opens.
+    useEffect(() => {
+        rootRef.current?.querySelector<HTMLElement>("button:not([disabled])")?.focus();
+    }, []);
+
+    function setProposing(next: boolean) {
+        setProposingState(next);
+        onProposingChange?.(next);
+    }
+
+    async function answer(response: InviteResponse, failure: string) {
+        setPending(response);
+        try {
+            onDone(await respondToMessageInvite(messageUid, response));
+        } catch (err) {
+            notifyApiError(err, failure);
+            setPending(null);
+        }
+    }
+
+    async function propose(proposal: ProposedTime) {
+        setPending("propose");
+        try {
+            onDone(await proposeNewTime(messageUid, proposal));
+        } catch (err) {
+            notifyApiError(err, "Couldn't send the proposed time");
+            setPending(null);
+        }
+    }
+
+    function handleKeyDown(event: React.KeyboardEvent) {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            if (menuOpen) {
+                setMenuOpen(false);
+                moreRef.current?.focus();
+            } else {
+                onClose();
+            }
+        }
+    }
+
+    function handleMenuKeyDown(event: React.KeyboardEvent) {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+            return;
+        }
+        event.preventDefault();
+        const items = Array.from(menuRef.current!.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+        const at = items.indexOf(document.activeElement as HTMLElement);
+        items[(at + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus();
+    }
+
+    return (
+        <div
+            ref={rootRef}
+            role="group"
+            aria-labelledby={titleId}
+            tabIndex={-1}
+            onKeyDown={handleKeyDown}
+            className="relative flex-1 min-h-0 flex flex-col text-sm text-text outline-none"
+        >
+            <div className="flex-1 min-h-0 overflow-y-auto px-4 pt-3 pb-2 flex flex-col gap-2">
+                <h3 id={titleId} className="font-semibold break-words">
+                    {invite.summary?.trim() || "(no title)"}
+                </h3>
+                {when && <p className="break-words">{when}{invite.recurring && <span className="text-text-muted"> (Repeats)</span>}</p>}
+                {invite.conflicts.length > 0 && (
+                    <p className="text-danger break-words">
+                        <span className="font-medium">Conflicts with:</span> {conflictSummary(invite.conflicts)}
+                    </p>
+                )}
+                {proposing ? (
+                    <ProposeTimeForm
+                        invite={invite}
+                        busy={pending === "propose"}
+                        onSubmit={(proposal) => void propose(proposal)}
+                        onCancel={() => setProposing(false)}
+                    />
+                ) : (
+                    <InviteTimeline invite={invite} />
+                )}
+            </div>
+            {!proposing && (
+                <div className="flex items-center gap-2 px-4 py-3 border-t border-border" aria-busy={busy || undefined}>
+                    {RESPONSES.map(({ response, label, text, failure }) => {
+                        const current = invite.response === response;
+                        return (
+                            <Button
+                                key={response}
+                                type="button"
+                                variant={response === "accepted" && !current ? "primary" : "secondary"}
+                                className={["!w-auto", response === "tentative" ? "!px-3" : "", current ? "!bg-primary/10 !border-primary disabled:!opacity-100" : ""].join(" ")}
+                                aria-label={label}
+                                title={label}
+                                aria-pressed={current}
+                                aria-busy={pending === response || undefined}
+                                loading={pending === response}
+                                disabled={busy || current}
+                                onClick={() => void answer(response, failure)}
+                            >
+                                {current && <HiOutlineCheck size={14} aria-hidden="true" />}
+                                {text}
+                            </Button>
+                        );
+                    })}
+                    <div className="ml-auto relative">
+                        <button
+                            ref={moreRef}
+                            type="button"
+                            aria-label="More actions"
+                            aria-haspopup="menu"
+                            aria-expanded={menuOpen}
+                            disabled={busy}
+                            onClick={() => setMenuOpen((open) => !open)}
+                            className="inline-flex items-center justify-center p-1.5 rounded-md border border-border text-text hover:bg-surface-alt disabled:opacity-50"
+                        >
+                            <HiOutlineEllipsisHorizontal size={18} aria-hidden="true" />
+                        </button>
+                        {menuOpen && (
+                            <div
+                                ref={(node) => {
+                                    menuRef.current = node;
+                                    // A menu that has just opened takes the focus, as a menu does.
+                                    node?.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+                                }}
+                                role="menu"
+                                aria-label="More actions"
+                                onKeyDown={handleMenuKeyDown}
+                                className="absolute bottom-full right-0 mb-1 w-48 py-1 rounded-md border border-border bg-surface shadow-modal z-10"
+                            >
+                                {invite.canPropose && (
+                                    <button
+                                        type="button"
+                                        role="menuitem"
+                                        onClick={() => {
+                                            setMenuOpen(false);
+                                            setProposing(true);
+                                        }}
+                                        className="w-full px-3 py-2 text-left hover:bg-surface-alt"
+                                    >
+                                        Propose new time
+                                    </button>
+                                )}
+                                <a role="menuitem" href={calendarHref(invite)} className="block px-3 py-2 hover:bg-surface-alt">
+                                    Open in calendar
+                                </a>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export interface InviteRsvpPopoverProps {
+    messageUid: string;
+    invite: MessageInvite;
+    /** The RSVP button: the popover hangs from it, and focus goes back to it when the popover closes. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Called with the invitation as it stands after an answer or a proposal. The popover has closed itself. */
+    onDone: (invite: MessageInvite) => void;
+    onClose: () => void;
+}
+
+/**
+ * What the RSVP button opens: an anchored popover on a desktop, a dialog on a phone. A day view of the reader's schedule around the meeting, with
+ * the invitation highlighted and its conflicts marked, and Accept, Decline, a "?" for Tentative and a "..." menu (Propose new time, Open in calendar).
+ * An answer is sent to the server, which puts the meeting on the calendar and replies to the organizer; the popover then closes and hands the
+ * updated invitation to its caller. A failure raises a pop-up and leaves the popover open.
+ *
+ * Focus moves to the first button when it opens, Escape closes it (a menu open inside it first), and focus returns to the RSVP button.
+ */
+export default function InviteRsvpPopover({ messageUid, invite, anchorRef, onDone, onClose }: InviteRsvpPopoverProps) {
+    const isMobile = useIsMobile();
+    const [proposing, setProposing] = useState(false);
+    const title = invite.summary?.trim() || "(no title)";
+
+    function close() {
+        onClose();
+        anchorRef.current?.focus();
+    }
+
+    function done(updated: MessageInvite) {
+        onDone(updated);
+        close();
+    }
+
+    const panel = <RsvpPanel messageUid={messageUid} invite={invite} onDone={done} onClose={close} onProposingChange={setProposing} />;
+    if (isMobile) {
+        return (
+            <Modal open onClose={close} title="Meeting invitation">
+                {panel}
+            </Modal>
+        );
+    }
+    return (
+        <PopoverPortal anchorRef={anchorRef} onClose={onClose} width={WIDTH} height={estimateHeight(invite, proposing)} aria-label={`RSVP: ${title}`}>
+            {panel}
+        </PopoverPortal>
+    );
+}

package/apps/shared/components/mail/invite/InviteTimeline.tsx

@@ -0,0 +1,200 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { InviteScheduleEntry, MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import { validDate } from "./inviteFormat.js";
+
+/** How tall one hour is drawn, in px. */
+const HOUR_HEIGHT = 36;
+/** The room the hour labels take at the left, as a CSS length. */
+const LABEL_WIDTH = "3.25rem";
+/** The hours of context shown before the invitation and after it, and the least the day view is tall (in hours). */
+const CONTEXT_HOURS = 2;
+const MIN_HOURS = 5;
+
+const MINUTE_MS = 60_000;
+
+/** A block of the day and where it sits among the blocks it overlaps. */
+export interface PlacedBlock {
+    /** Which of the overlapping columns it is drawn in. */
+    column: number;
+    /** How many columns its cluster of overlapping blocks needs. */
+    columns: number;
+}
+
+/**
+ * Lays overlapping blocks side by side: blocks that overlap (directly or through a chain of others) form a cluster, and each block takes the first
+ * column of the cluster that is free where it starts. `blocks` must be sorted by start; the result is in the same order.
+ */
+export function placeBlocks(blocks: { start: number; end: number }[]): PlacedBlock[] {
+    const placed: PlacedBlock[] = [];
+    let cluster: { index: number; column: number }[] = [];
+    let columnEnds: number[] = [];
+    let clusterEnd = -Infinity;
+    const close = () => {
+        for (const member of cluster) {
+            placed[member.index] = { column: member.column, columns: columnEnds.length };
+        }
+        cluster = [];
+        columnEnds = [];
+    };
+    blocks.forEach((block, index) => {
+        if (block.start >= clusterEnd) {
+            close();
+        }
+        let column = columnEnds.findIndex((end) => end <= block.start);
+        if (column === -1) {
+            column = columnEnds.length;
+        }
+        columnEnds[column] = block.end;
+        cluster.push({ index, column });
+        clusterEnd = Math.max(clusterEnd, block.end);
+    });
+    close();
+    return placed;
+}
+
+/** The hours the day view spans: the invitation's own, with `CONTEXT_HOURS` either side (at least `MIN_HOURS`), kept inside the invitation's day. */
+function hourWindow(start: Date, end: Date): { from: number; to: number } {
+    const sameDay = start.toDateString() === end.toDateString();
+    const endHour = sameDay ? Math.ceil(end.getHours() + end.getMinutes() / 60) : 24;
+    let from = Math.max(0, start.getHours() - CONTEXT_HOURS);
+    let to = Math.min(24, endHour + CONTEXT_HOURS);
+    if (to - from < MIN_HOURS) {
+        to = Math.min(24, from + MIN_HOURS);
+        from = Math.max(0, to - MIN_HOURS);
+    }
+    return { from, to };
+}
+
+interface Block {
+    key: string;
+    title: string;
+    start: number;
+    end: number;
+    kind: "invite" | "conflict" | "busy" | "free";
+    tentative: boolean;
+}
+
+const BLOCK_CLASS: Record<Block["kind"], string> = {
+    invite: "bg-primary/20 border-primary text-text font-semibold",
+    conflict: "bg-danger-bg border-danger text-danger",
+    busy: "bg-surface border-border text-text",
+    free: "bg-transparent border-border text-text-muted",
+};
+
+const CLOCK = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" });
+const HOUR = new Intl.DateTimeFormat(undefined, { hour: "numeric" });
+
+export interface InviteTimelineProps {
+    invite: Pick<MessageInvite, "startDate" | "endDate" | "summary" | "conflicts" | "schedule">;
+}
+
+/**
+ * A small day agenda around an invitation, as Outlook draws it in its RSVP card: hour rows for the invitation's day (from a couple of hours before it
+ * to a couple after), the invitation itself as a highlighted block, and the reader's other events as blocks - the ones that overlap it marked in red
+ * (and named as conflicts to a screen reader). Overlapping blocks stand side by side. All-day events are listed above the hours rather than drawn.
+ * Draws nothing when the invitation has no usable time.
+ */
+export default function InviteTimeline({ invite }: InviteTimelineProps) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    if (!start || !end || end <= start) {
+        return null;
+    }
+    const { from, to } = hourWindow(start, end);
+    const windowStart = new Date(start.getFullYear(), start.getMonth(), start.getDate(), from).getTime();
+    const windowEnd = new Date(start.getFullYear(), start.getMonth(), start.getDate(), to).getTime();
+    const conflictUids = new Set(invite.conflicts.map((entry) => entry.uid));
+    // A conflict the schedule doesn't list is still drawn.
+    const entries: InviteScheduleEntry[] = [...invite.schedule, ...invite.conflicts.filter((c) => !invite.schedule.some((s) => s.uid === c.uid))];
+    const allDay = entries.filter((entry) => entry.allDay);
+
+    const blocks: Block[] = [{ key: "invite", title: invite.summary?.trim() || "(no title)", start: start.getTime(), end: end.getTime(), kind: "invite", tentative: false }];
+    for (const entry of entries) {
+        const entryStart = validDate(entry.startDate)?.getTime();
+        const entryEnd = validDate(entry.endDate)?.getTime();
+        if (entry.allDay || entryStart === undefined || entryEnd === undefined) {
+            continue;
+        }
+        blocks.push({
+            key: entry.uid,
+            title: entry.title || "(no title)",
+            start: entryStart,
+            end: entryEnd,
+            kind: conflictUids.has(entry.uid) ? "conflict" : entry.busy ? "busy" : "free",
+            tentative: entry.tentative,
+        });
+    }
+    // Clipped to the hours shown; a block entirely outside them isn't drawn.
+    const visible = blocks
+        .map((block) => ({ ...block, start: Math.max(block.start, windowStart), end: Math.min(block.end, windowEnd), fullStart: block.start, fullEnd: block.end }))
+        .filter((block) => block.end > block.start)
+        .sort((a, b) => a.start - b.start || a.end - b.end);
+    const placed = placeBlocks(visible);
+    const hours = Array.from({ length: to - from }, (_, i) => from + i);
+
+    return (
+        <div aria-label="Your schedule around this meeting" role="group" className="text-xs">
+            {allDay.length > 0 && (
+                <ul aria-label="All-day events" className="mb-1 flex flex-col gap-0.5">
+                    {allDay.map((entry) => (
+                        <li key={entry.uid} className="px-2 py-0.5 rounded-sm border border-border bg-surface text-text-muted truncate">
+                            All day: {entry.title || "(no title)"}
+                        </li>
+                    ))}
+                </ul>
+            )}
+            <div className="relative border-t border-border" style={{ height: hours.length * HOUR_HEIGHT }}>
+                {hours.map((hour) => (
+                    <div
+                        key={hour}
+                        aria-hidden="true"
+                        className="absolute inset-x-0 border-b border-border text-text-muted"
+                        style={{ top: (hour - from) * HOUR_HEIGHT, height: HOUR_HEIGHT }}
+                    >
+                        <span className="absolute left-0 top-0 pr-1 leading-none pt-0.5" style={{ width: LABEL_WIDTH }}>
+                            {HOUR.format(new Date(2000, 0, 1, hour))}
+                        </span>
+                    </div>
+                ))}
+                <ul aria-label="Events">
+                    {visible.map((block, index) => {
+                        const { column, columns } = placed[index];
+                        const top = ((block.start - windowStart) / MINUTE_MS / 60) * HOUR_HEIGHT;
+                        const height = Math.max(18, ((block.end - block.start) / MINUTE_MS / 60) * HOUR_HEIGHT - 1);
+                        const range = `${CLOCK.format(block.fullStart)} to ${CLOCK.format(block.fullEnd)}`;
+                        return (
+                            <li
+                                key={block.key}
+                                title={`${block.title}, ${range}`}
+                                data-kind={block.kind}
+                                className={[
+                                    "absolute overflow-hidden rounded-sm border px-1.5 py-0.5 leading-tight",
+                                    BLOCK_CLASS[block.kind],
+                                    block.tentative ? "border-dashed" : "",
+                                ].join(" ")}
+                                style={{
+                                    top,
+                                    height,
+                                    left: `calc(${LABEL_WIDTH} + (100% - ${LABEL_WIDTH}) * ${column} / ${columns})`,
+                                    width: `calc((100% - ${LABEL_WIDTH}) / ${columns} - 2px)`,
+                                }}
+                            >
+                                <span className="block truncate">{block.title}</span>
+                                <span className="sr-only">
+                                    , {range}
+                                    {block.kind === "invite" ? ", this meeting" : ""}
+                                    {block.kind === "conflict" ? ", conflicts with this meeting" : ""}
+                                    {block.tentative ? ", tentative" : ""}
+                                </span>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/mail/invite/ProposeTimeForm.tsx

@@ -0,0 +1,109 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useId, useState } from "react";
+import type { MessageInvite, ProposedTime } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { isoDay, validDate } from "./inviteFormat.js";
+
+const INPUT_CLASS = "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text";
+
+/** `HH:MM` of an instant in the reader's zone, the value of a time input. */
+function clock(date: Date): string {
+    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+
+export interface ProposeTimeFormProps {
+    /** The invitation being answered: its own time (in the reader's zone) is what the fields start out as. */
+    invite: Pick<MessageInvite, "startDate" | "endDate">;
+    /** A proposal is on its way: the form is off. */
+    busy?: boolean;
+    /** Called with the proposed instants once the fields are valid. The caller reports a failure and closes the form on success. */
+    onSubmit: (proposal: ProposedTime) => void;
+    onCancel: () => void;
+}
+
+/**
+ * The small form behind "Propose new time": a date and a start and end time - in the reader's own time zone, prefilled with the invitation's own
+ * time - and an optional note to the organizer. It validates what it can (all three fields, and an end after the start) before anything is sent.
+ * The end is on the start's day: a proposal spans one day, as Outlook's does from a list.
+ */
+export default function ProposeTimeForm({ invite, busy = false, onSubmit, onCancel }: ProposeTimeFormProps) {
+    const start = validDate(invite.startDate);
+    const end = validDate(invite.endDate);
+    const [date, setDate] = useState(start ? isoDay(start) : "");
+    const [startTime, setStartTime] = useState(start ? clock(start) : "");
+    const [endTime, setEndTime] = useState(end ? clock(end) : "");
+    const [comment, setComment] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const id = useId();
+
+    function submit(event: React.FormEvent) {
+        event.preventDefault();
+        if (!date || !startTime || !endTime) {
+            setError("Choose a date and a start and end time.");
+            return;
+        }
+        const proposedStart = new Date(`${date}T${startTime}:00`);
+        const proposedEnd = new Date(`${date}T${endTime}:00`);
+        if (proposedEnd <= proposedStart) {
+            setError("The end time must be after the start time.");
+            return;
+        }
+        setError(null);
+        const note = comment.trim();
+        onSubmit({ startDate: proposedStart.toISOString(), endDate: proposedEnd.toISOString(), ...(note ? { comment: note } : {}) });
+    }
+
+    return (
+        <form aria-label="Propose a new time" onSubmit={submit} noValidate className="flex flex-col gap-2 text-sm">
+            <div className="flex flex-wrap gap-2">
+                <div className="flex-1 min-w-[9rem]">
+                    <label htmlFor={`${id}-date`} className="block text-xs text-text-muted mb-0.5">
+                        Date
+                    </label>
+                    <input id={`${id}-date`} type="date" value={date} disabled={busy} onChange={(e) => setDate(e.target.value)} className={INPUT_CLASS} />
+                </div>
+                <div className="flex-1 min-w-[6rem]">
+                    <label htmlFor={`${id}-start`} className="block text-xs text-text-muted mb-0.5">
+                        Start
+                    </label>
+                    <input id={`${id}-start`} type="time" value={startTime} disabled={busy} onChange={(e) => setStartTime(e.target.value)} className={INPUT_CLASS} />
+                </div>
+                <div className="flex-1 min-w-[6rem]">
+                    <label htmlFor={`${id}-end`} className="block text-xs text-text-muted mb-0.5">
+                        End
+                    </label>
+                    <input id={`${id}-end`} type="time" value={endTime} disabled={busy} onChange={(e) => setEndTime(e.target.value)} className={INPUT_CLASS} />
+                </div>
+            </div>
+            <div>
+                <label htmlFor={`${id}-comment`} className="block text-xs text-text-muted mb-0.5">
+                    Comment (optional)
+                </label>
+                <textarea
+                    id={`${id}-comment`}
+                    rows={2}
+                    value={comment}
+                    disabled={busy}
+                    onChange={(e) => setComment(e.target.value)}
+                    className={`${INPUT_CLASS} resize-y`}
+                />
+            </div>
+            {error && (
+                <p role="alert" className="text-danger">
+                    {error}
+                </p>
+            )}
+            <div className="flex flex-wrap gap-2">
+                <Button type="submit" className="!w-auto" loading={busy} disabled={busy} aria-busy={busy || undefined}>
+                    Send proposal
+                </Button>
+                <Button type="button" variant="secondary" className="!w-auto" disabled={busy} onClick={onCancel}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}