@rapidmx/web-client 0.14.1 → 0.16.0

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

package/apps/shared/components/mail/layout/FolderBadgeChip.tsx

@@ -0,0 +1,21 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { FolderBadge, badgeLabel } from "../../../mail/folderCounts.js";
+
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+export default function FolderBadgeChip({ badge }: { badge: FolderBadge }) {
+    return (
+        <span
+            className={[
+                "text-xs rounded-pill py-0.5 px-1.5",
+                badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
+            ].join(" ")}
+        >
+            <span aria-hidden="true">{badge.value}</span>
+            <span className="sr-only"> {badgeLabel(badge)}</span>
+        </span>
+    );
+}