@rapidmx/web-client 0.14.0 → 0.15.1

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

package/apps/shared/components/mail/invite/inviteFormat.ts

@@ -0,0 +1,110 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { InviteResponse, MessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import { APP_HREFS } from "../../../navigation/appHrefs.js";
+
+/** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
+ * or by name, since mail clients disagree about which one they set (`text/calendar`, `application/ics`, or a bare `.ics` as octet-stream). */
+export function isCalendarAttachment(attachment: Pick<Attachment, "filename" | "mimeType">): boolean {
+    const type = (attachment.mimeType ?? "").split(";")[0].trim().toLowerCase();
+    return type === "text/calendar" || type === "application/ics" || (attachment.filename ?? "").trim().toLowerCase().endsWith(".ics");
+}
+
+const DAY_FORMAT: Intl.DateTimeFormatOptions = { weekday: "short", year: "numeric", month: "short", day: "numeric" };
+const CLOCK_FORMAT: Intl.DateTimeFormatOptions = { hour: "numeric", minute: "2-digit" };
+
+/** `zone` if the browser knows it, else UTC - an all-day date is a calendar day, and needs a fixed zone to stay the same day for every reader. */
+export function allDayZone(zone: string | undefined): string {
+    try {
+        new Intl.DateTimeFormat(undefined, { timeZone: zone });
+        return zone ?? "UTC";
+    } catch {
+        return "UTC";
+    }
+}
+
+/** The instant an ISO string names, or `undefined` when it is missing or unparseable. */
+export function validDate(iso: string | undefined): Date | undefined {
+    const date = iso ? new Date(iso) : undefined;
+    return date && !isNaN(date.getTime()) ? date : undefined;
+}
+
+/**
+ * When the meeting is, in the reader's own locale and time zone: one date and a time range for a same-day event, both ends in full for
+ * one that spans days, and dates only for an all-day event (drawn in the organizer's zone, since a calendar day is not an instant). `undefined`
+ * when the invitation names no usable start. A missing or unusable end shows the start alone.
+ */
+export function formatInviteWhen(invite: Pick<MessageInvite, "startDate" | "endDate" | "allDay" | "timezone">): string | undefined {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return undefined;
+    }
+    const parsedEnd = validDate(invite.endDate);
+    const end = parsedEnd && parsedEnd > start ? parsedEnd : undefined;
+    if (invite.allDay) {
+        const day = new Intl.DateTimeFormat(undefined, { ...DAY_FORMAT, timeZone: allDayZone(invite.timezone) });
+        const first = day.format(start);
+        // An all-day event's end is the midnight after its last day (iCalendar's DTEND is exclusive), so the last day is a moment before it.
+        const last = end ? day.format(new Date(end.getTime() - 1)) : first;
+        return last === first ? first : `${first} - ${last}`;
+    }
+    const date = new Intl.DateTimeFormat(undefined, DAY_FORMAT);
+    const time = new Intl.DateTimeFormat(undefined, CLOCK_FORMAT);
+    // The zone is named once, after the last time shown: the times are the reader's own, not the organizer's.
+    const timeAndZone = new Intl.DateTimeFormat(undefined, { ...CLOCK_FORMAT, timeZoneName: "short" });
+    const startDay = date.format(start);
+    if (!end) {
+        return `${startDay}, ${timeAndZone.format(start)}`;
+    }
+    return startDay === date.format(end)
+        ? `${startDay}, ${time.format(start)} - ${timeAndZone.format(end)}`
+        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${timeAndZone.format(end)}`;
+}
+
+/** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */
+export function formatRowStart(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string | undefined {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return undefined;
+    }
+    const zone = invite.allDay ? allDayZone(invite.timezone) : undefined;
+    const weekday = new Intl.DateTimeFormat(undefined, { weekday: "short", timeZone: zone }).format(start);
+    const date = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "numeric", day: "numeric", timeZone: zone }).format(start);
+    return invite.allDay ? `${weekday} ${date}` : `${weekday} ${date} ${new Intl.DateTimeFormat(undefined, CLOCK_FORMAT).format(start)}`;
+}
+
+/** `YYYY-MM-DD` of an instant in the reader's zone, or in `timeZone` when given (`en-CA` writes a date that way). */
+export function isoDay(date: Date, timeZone?: string): string {
+    return new Intl.DateTimeFormat("en-CA", { year: "numeric", month: "2-digit", day: "2-digit", timeZone }).format(date);
+}
+
+/** Where "Open in Calendar" goes: the day view of the day the meeting starts (the `date`/`view` the calendar page reads), or the calendar itself
+ * when the invitation names no usable start. An all-day event's day is the organizer's; any other is the reader's. */
+export function calendarHref(invite: Pick<MessageInvite, "startDate" | "allDay" | "timezone">): string {
+    const start = validDate(invite.startDate);
+    if (!start) {
+        return APP_HREFS.calendar;
+    }
+    return `${APP_HREFS.calendar}?date=${isoDay(start, invite.allDay ? allDayZone(invite.timezone) : undefined)}&view=day`;
+}
+
+/** The reader's answer as a list row says it. */
+export const ANSWER_LABEL: Record<InviteResponse, string> = {
+    accepted: "Accepted",
+    tentative: "Tentative",
+    declined: "Declined",
+};
+
+/** The most conflicting events that are named; more are counted. */
+const MAX_NAMED_CONFLICTS = 3;
+
+/** The titles of the events an invitation conflicts with, as "A, B and 2 more". */
+export function conflictSummary(conflicts: { title: string }[]): string {
+    const titles = conflicts.map((c) => c.title.trim() || "(no title)");
+    return titles.length <= MAX_NAMED_CONFLICTS
+        ? titles.join(", ")
+        : `${titles.slice(0, MAX_NAMED_CONFLICTS).join(", ")} and ${titles.length - MAX_NAMED_CONFLICTS} more`;
+}

package/apps/shared/components/mail/invite/inviteStore.ts

@@ -0,0 +1,114 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useEffect, useReducer } from "react";
+import { MessageInvite, getMessageInvite } from "@rapidmx/react-shared/calendar/inviteApi.js";
+
+/**
+ * A per-message cache of the calendar invitation the server reads out of a message, shared by everything that draws one: the reading pane's
+ * card, the list row's RSVP chip and its popover. They ask for the same message a moment apart (the row's chip, then the pane once it is
+ * opened), and an answer given in one has to show in the others, so a lookup is made once and every answer goes through `storeInvite()`.
+ *
+ * A message with no invitation (`null`, the server's 404) is remembered too. A lookup that fails is not - nothing is cached and the next
+ * thing to ask (a remount, another row) tries again - but nothing retries on its own. An entry goes stale after `INVITE_TTL_MS`, because the
+ * calendar it describes can change elsewhere (the meeting deleted, another device answering); it is refetched when next asked for.
+ */
+
+/** How long a looked-up invitation is trusted before the next ask reads it again. */
+export const INVITE_TTL_MS = 30_000;
+
+interface Entry {
+    promise: Promise<MessageInvite | null>;
+    /** `undefined` until the lookup answers; `null` for a message with no readable invitation. */
+    value?: MessageInvite | null;
+    at: number;
+}
+
+const entries = new Map<string, Entry>();
+const listeners = new Map<string, Set<() => void>>();
+
+function notify(uid: string): void {
+    listeners.get(uid)?.forEach((listener) => listener());
+}
+
+/** Older servers, or a partial answer, may leave a list out: a card must never fail to draw over one. */
+function normalize(invite: MessageInvite | null): MessageInvite | null {
+    if (!invite) {
+        return null;
+    }
+    const partial: Partial<MessageInvite> = invite;
+    return { ...invite, attendees: partial.attendees ?? [], conflicts: partial.conflicts ?? [], schedule: partial.schedule ?? [] };
+}
+
+/** Reads a message's invitation, from the cache when it is fresh. Rejects when the lookup fails. */
+export function loadInvite(uid: string): Promise<MessageInvite | null> {
+    const existing = entries.get(uid);
+    if (existing && (existing.value === undefined || Date.now() - existing.at < INVITE_TTL_MS)) {
+        return existing.promise;
+    }
+    const entry: Entry = {
+        at: Date.now(),
+        promise: getMessageInvite(uid).then(
+            (invite) => {
+                entry.value = normalize(invite);
+                entry.at = Date.now();
+                notify(uid);
+                return entry.value;
+            },
+            (err: unknown) => {
+                if (entries.get(uid) === entry) {
+                    entries.delete(uid);
+                }
+                throw err;
+            },
+        ),
+    };
+    entries.set(uid, entry);
+    return entry.promise;
+}
+
+/** Records the invitation as it now stands after an answer, so the pane, the chip and the popover all show it. */
+export function storeInvite(uid: string, invite: MessageInvite): void {
+    const value = normalize(invite);
+    entries.set(uid, { promise: Promise.resolve(value), value, at: Date.now() });
+    notify(uid);
+}
+
+/** Forgets everything - for tests, and for a sign-out. */
+export function clearInviteCache(): void {
+    entries.clear();
+}
+
+/**
+ * A message's invitation, looked up once (shared with every other user of the same message) when `enabled`. `invite` is `null` until it is
+ * known, and stays `null` for a message with none or a lookup that failed - nothing to draw either way. `settled` says the lookup is over.
+ * Nothing is asked while disabled, and a failure is never retried from here.
+ */
+export function useMessageInvite(uid: string, enabled = true): { invite: MessageInvite | null; settled: boolean; setInvite: (invite: MessageInvite) => void } {
+    const [, rerender] = useReducer((n: number) => n + 1, 0);
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        let cancelled = false;
+        const update = () => {
+            if (!cancelled) {
+                rerender();
+            }
+        };
+        const set = listeners.get(uid) ?? new Set();
+        set.add(update);
+        listeners.set(uid, set);
+        loadInvite(uid).then(update, () => {
+            // Nothing to show, and nothing worth interrupting the reader with: the message reads the same without it.
+        });
+        return () => {
+            cancelled = true;
+            set.delete(update);
+        };
+    }, [uid, enabled]);
+    const setInvite = useCallback((invite: MessageInvite) => storeInvite(uid, invite), [uid]);
+    const value = enabled ? entries.get(uid)?.value : undefined;
+    return { invite: value ?? null, settled: value !== undefined, setInvite };
+}