@rapidmx/web-client 0.20.0 → 0.22.0

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

@@ -1,124 +1,124 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { format } from "date-fns";
-import { WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { CalendarOccurrence, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
-
-const MS_PER_DAY = 86_400_000;
-
-/**
- * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
- * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
- * an all-day event on the same calendar date for every viewer, whatever their timezone.
- *
- * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
- * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
- * ISO string — which gives the intended date for both formats.
- */
-export function allDayDateKey(iso: string): string {
-    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
-    return new Date(rounded).toISOString().slice(0, 10);
-}
-
-/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
-export function allDayInstant(dateKey: string): string {
-    return `${dateKey}T00:00:00.000Z`;
-}
-
-/** Adds `days` to a `YYYY-MM-DD` date key. */
-export function addDaysToKey(dateKey: string, days: number): string {
-    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
-}
-
-/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
-export function localDateKey(day: Date): string {
-    return format(day, "yyyy-MM-dd");
-}
-
-/**
- * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
- * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
- * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
- * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
- * local end of day is already the next UTC day west of UTC and would add one more occurrence.
- */
-export function recurrenceUntilInstant(dateKey: string, allDay: boolean): string {
-    if (allDay) {
-        return `${dateKey}T23:59:59.999Z`;
-    }
-    const [y, m, d] = dateKey.split("-").map(Number);
-    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
-}
-
-/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
-const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
-/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
-const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
-
-/**
- * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
- * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
- * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
- * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
- * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
- * frame it was written in.
- */
-export function recurrenceUntilDateKey(until: string, allDay: boolean): string {
-    if (allDay) {
-        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
-        if (stored) {
-            return stored[1];
-        }
-    }
-    return format(new Date(until), "yyyy-MM-dd");
-}
-
-/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
-const JS_WEEKDAY_CODES: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
-
-/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
- * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
- * `undefined` while the start input is empty/invalid. */
-export function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined {
-    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
-    if (Number.isNaN(ms)) {
-        return undefined;
-    }
-    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
-}
-
-/**
- * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
- * date from their start date up to (not including) their exclusive end date — at least their start date.
- * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
- * each day rather than only on its start day.
- */
-export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
-    if (occurrence.allDay) {
-        const key = localDateKey(day);
-        const startKey = allDayDateKey(occurrence.startDate);
-        const endKey = allDayDateKey(occurrence.endDate);
-        return key === startKey || (key > startKey && key < endKey);
-    }
-    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
-    const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    if (start.getTime() === end.getTime()) {
-        return start >= dayStart && start < dayEnd;
-    }
-    return start < dayEnd && end > dayStart;
-}
-
-/**
- * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
- * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
- */
-export function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
-    if (occurrence.allDay) {
-        return allDayDateKey(occurrence.startDate) === localDateKey(day);
-    }
-    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
+import { CalendarOccurrence, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
+
+const MS_PER_DAY = 86_400_000;
+
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export function allDayDateKey(iso: string): string {
+    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
+    return new Date(rounded).toISOString().slice(0, 10);
+}
+
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export function allDayInstant(dateKey: string): string {
+    return `${dateKey}T00:00:00.000Z`;
+}
+
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey: string, days: number): string {
+    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
+}
+
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export function localDateKey(day: Date): string {
+    return format(day, "yyyy-MM-dd");
+}
+
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export function recurrenceUntilInstant(dateKey: string, allDay: boolean): string {
+    if (allDay) {
+        return `${dateKey}T23:59:59.999Z`;
+    }
+    const [y, m, d] = dateKey.split("-").map(Number);
+    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
+}
+
+/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
+const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
+/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
+const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
+
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export function recurrenceUntilDateKey(until: string, allDay: boolean): string {
+    if (allDay) {
+        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
+        if (stored) {
+            return stored[1];
+        }
+    }
+    return format(new Date(until), "yyyy-MM-dd");
+}
+
+/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
+const JS_WEEKDAY_CODES: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined {
+    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
+    if (Number.isNaN(ms)) {
+        return undefined;
+    }
+    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
+}
+
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        const key = localDateKey(day);
+        const startKey = allDayDateKey(occurrence.startDate);
+        const endKey = allDayDateKey(occurrence.endDate);
+        return key === startKey || (key > startKey && key < endKey);
+    }
+    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    if (start.getTime() === end.getTime()) {
+        return start >= dayStart && start < dayEnd;
+    }
+    return start < dayEnd && end > dayStart;
+}
+
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

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

@@ -2,14 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { EventVisibility, guestPermissionsOf, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { EventVisibility, guestPermissionsOf, visibilityOf } from "../../../../lib/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";
+} from "../../../../lib/calendar/eventDescription.js";
+import { CalendarOccurrence } from "../../../../lib/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

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

@@ -3,9 +3,9 @@
 // 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";
+import { Attendee, BusyStatus, EventVisibility, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
+import { Mailbox } from "../../../../lib/mail/mailApi.js";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 
 /** Which occurrences of a recurring event an edit applies to. */
 export type EditScope = "occurrence" | "series";

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

@@ -3,9 +3,9 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { format } from "date-fns";
-import { Attendee, AttendeeResponseStatus, BusyStatus, EventVisibility, GuestPermissions } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
-import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { Attendee, AttendeeResponseStatus, BusyStatus, EventVisibility, GuestPermissions } from "../../../../lib/calendar/calendarApi.js";
+import { fromEventWallClock, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
+import { toDatetimeLocal } from "../../../../lib/util/dateInput.js";
 import { formatRecipient, isValidRecipientAddress, parseRecipient, splitRecipientList } from "../mail/compose/recipients.js";
 import { addDaysToKey, allDayDateKey } from "./allDay.js";
 

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { format } from "date-fns";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { AvailabilitySummary } from "@rapidmx/react-shared/calendar/freeBusyApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { AvailabilitySummary } from "../../../../lib/calendar/freeBusyApi.js";
 import { addDaysToKey } from "./allDay.js";
 import { msToWallString, wallStringToMs } from "./eventFormat.js";
 

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -3,11 +3,12 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { createContext, PropsWithChildren, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { accentColorForMailbox, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
-import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
+import { accentColorForMailbox, colorForFolder } from "../../../../../lib/calendar/calendarColors.js";
+import { Folder, Mailbox, listFolders, listMailboxes } from "../../../../../lib/mail/mailApi.js";
+import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "../../../../../lib/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import { useLocation } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
@@ -75,6 +76,7 @@ export default function CalendarShell({
     pluginNav,
     children,
 }: PropsWithChildren<CalendarShellProps>) {
+    const client = useApiClient();
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(null);
     const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
@@ -93,7 +95,7 @@ export default function CalendarShell({
         if (!userUid) {
             return;
         }
-        listMailboxes({ limit: 100 })
+        listMailboxes({ limit: 100 }, client)
             .then((result) => {
                 setMailboxes(orderMailboxes(result, userUid));
                 setStatus("ready");
@@ -102,7 +104,7 @@ export default function CalendarShell({
                 setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
                 setStatus("error");
             });
-    }, [userUid]);
+    }, [userUid, client]);
 
     const ownMailboxUid = primaryMailboxUid(mailboxes, userUid);
     const mailboxUid: string | undefined =
@@ -117,7 +119,7 @@ export default function CalendarShell({
         let cancelled = false;
         void Promise.all(
             mailboxes.map((mailbox) =>
-                listFolders(mailbox.uid)
+                listFolders(mailbox.uid, client)
                     .then((folders): MailboxCalendars => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))
                     .catch(
                         (err): MailboxCalendars => ({
@@ -135,7 +137,7 @@ export default function CalendarShell({
         return () => {
             cancelled = true;
         };
-    }, [mailboxes, folderRefreshToken]);
+    }, [mailboxes, folderRefreshToken, client]);
 
     const calendarFolders = useMemo(() => mailboxCalendars.flatMap((mc) => mc.calendarFolders), [mailboxCalendars]);
     const folderUid: string | undefined = calendarFolders.find((f) => f.mailboxUid === mailboxUid)?.uid;

package/apps/shared/components/contacts/ContactDetailPane.tsx

@@ -3,10 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
+import { Contact } from "../../../../lib/contacts/contactsApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import ContactAvatar from "../../../../lib/components/avatar/ContactAvatar.js";
 import KeyChangeReview from "./KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";