@rapidmx/web-client 0.3.1 → 0.5.0

package/dist/apps/shared/components/calendar/TimeGridView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
+import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
 import { eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { occursOnDay, startsOnDay } from "./allDay.js";
 const HOUR_HEIGHT_PX = 48;
 const SLOT_MINUTES = 30;
 const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
@@ -13,20 +14,37 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
     const allDayEvents = occurrences.filter((occ) => occ.allDay);
     const timedEvents = occurrences.filter((occ) => !occ.allDay);
     return (_jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: ["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" "), children: format(day, "EEE d") }, day.toISOString())))] }), allDayEvents.length > 0 && (_jsxs("div", { className: "flex border-b border-border shrink-0", children: [_jsx("div", { className: "w-14 shrink-0" }), days.map((day) => (_jsx("div", { className: "flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border", children: allDayEvents
-                            .filter((occ) => isSameDay(new Date(occ.startDate), day))
-                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
+                            .filter((occ) => occursOnDay(occ, day))
+                            .map((occ) => (_jsx("button", { type: "button", onClick: () => onSelectEvent(occ), style: { backgroundColor: folderColors[occ.folderUid], color: "#fff" }, className: "text-xs text-left truncate rounded-sm px-1.5 py-0.5", children: occ.title }, occ.occurrenceKey))) }, day.toISOString())))] })), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "w-14 shrink-0", children: HOURS.map((hour) => (_jsx("div", { style: { height: HOUR_HEIGHT_PX }, className: "text-[10px] text-text-muted text-right pr-1.5 -mt-1.5", children: hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha") }, hour))) }), days.map((day) => (_jsx(DayColumn, { day: day, occurrences: timedEvents.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString())))] })] }));
 }
 function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }) {
     const dayStart = startOfDay(day);
     return (_jsxs("div", { className: ["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" "), children: [Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
                 const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
                 return _jsx(TimeSlot, { start: slotStart, onSelectSlot: onSelectSlot }, i);
-            }), occurrences.map((occurrence) => (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
+            }), occurrences.map((occurrence) => startsOnDay(occurrence, day) ? (_jsx(EventBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)) : (_jsx(ContinuationBlock, { occurrence: occurrence, color: folderColors[occurrence.folderUid], dayStart: dayStart, onSelect: onSelectEvent }, occurrence.occurrenceKey)))] }));
 }
 function TimeSlot({ start, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
     return (_jsx("button", { ref: setNodeRef, type: "button", onClick: () => onSelectSlot(start, addMinutes(start, SLOT_MINUTES)), style: { height: HOUR_HEIGHT_PX / 2 }, className: ["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" "), "aria-label": `New event at ${format(start, "h:mm a, MMM d")}` }));
 }
+/** A block's position within its day column. A multi-day event is drawn in every day column it
+ * overlaps, clipped to that day. */
+function blockGeometry(occurrence, dayStart) {
+    const visibleStart = Math.max(new Date(occurrence.startDate).getTime(), dayStart.getTime());
+    const visibleEnd = Math.min(new Date(occurrence.endDate).getTime(), addDays(dayStart, 1).getTime());
+    return {
+        top: ((visibleStart - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX,
+        height: Math.max(((visibleEnd - visibleStart) / 60000 / 60) * HOUR_HEIGHT_PX, 16),
+    };
+}
+/** A multi-day event's block in a day column after its first: clickable, but not draggable/resizable
+ * (its drag ids are already taken by the start day's block). */
+function ContinuationBlock({ occurrence, color, dayStart, onSelect, }) {
+    const isFree = occurrence.busyStatus === "free";
+    const { top, height } = blockGeometry(occurrence, dayStart);
+    return (_jsx("div", { onClick: () => onSelect(occurrence), style: { position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }, className: ["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : ""].join(" "), children: _jsx("div", { className: "font-medium truncate", children: occurrence.title }) }));
+}
 function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
     const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
@@ -34,13 +52,11 @@ function EventBlock({ occurrence, color, dayStart, onSelect, }) {
     });
     const isFree = occurrence.busyStatus === "free";
     const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    const top = ((start.getTime() - dayStart.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX;
+    const { top, height } = blockGeometry(occurrence, dayStart);
     // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
     // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
     // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
     // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
-    const height = Math.max(((end.getTime() - start.getTime()) / 60000 / 60) * HOUR_HEIGHT_PX, 16);
     return (_jsxs("div", { ref: setNodeRef, onClick: () => onSelect(occurrence), style: {
             position: "absolute",
             top,

package/dist/apps/shared/components/calendar/allDay.js

@@ -0,0 +1,111 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+const MS_PER_DAY = 86400000;
+/**
+ * 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) {
+    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) {
+    return `${dateKey}T00:00:00.000Z`;
+}
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey, days) {
+    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) {
+    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, allDay) {
+    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, allDay) {
+    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 = ["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, allDay, timezone) {
+    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, day) {
+    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, day) {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

package/dist/apps/shared/components/calendar/layout/CalendarShell.js

@@ -1,39 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineBars3 } from "react-icons/hi2";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { accentColorForMailbox, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
 import { 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 AppShell from "../../layout/AppShell.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
-const CalendarShellContext = createContext({ calendarFolders: [], mailboxes: [], reloadFolders: () => undefined });
-/** Reads the mailbox/folder the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
+const CalendarShellContext = createContext({
+    calendarFolders: [],
+    mailboxCalendars: [],
+    mailboxes: [],
+    reloadFolders: () => undefined,
+    colorFor: (folder) => colorForFolder(folder),
+});
+/** Reads the calendars the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
 export function useCalendarShell() {
     return useContext(CalendarShellContext);
 }
 /**
- * The Calendar app's shell — structurally identical to `ContactsShell`/`TasksShell` (a mailbox has
- * exactly one well-known `calendar` folder, guaranteed to exist by `BaseMailboxRoute.create()`'s
- * eager provisioning in `@rapidmx/restapi`), just bound to a different folder type. Unlike Contacts/
- * Tasks, the actual view being looked at (month/week/day, and which one) is *not* shell state — it
- * lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between views/dates must
- * be instant (no full page reload) and this framework has no client-side router to make a URL-driven
- * approach for that free.
+ * The Calendar app's shell. Fetches every accessible mailbox's calendar folders in parallel so shared
+ * mailboxes' calendars show alongside the caller's own, each mailbox color-coded (see `colorFor`) - there
+ * is no mailbox switcher. The actual view being looked at (month/week/day, and which one) is *not* shell
+ * state — it lives in `apps/www/calendar/index.tsx`'s own local state, since navigating between
+ * views/dates must be instant (no full page reload) and this framework has no client-side router.
  */
 export default function CalendarShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
-    const [folders, setFolders] = useState([]);
-    const [folderError, setFolderError] = useState(null);
+    const [mailboxCalendars, setMailboxCalendars] = useState([]);
     const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
-    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [folderRefreshToken, setFolderRefreshToken] = useState(0);
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
     }, []);
@@ -51,46 +53,52 @@ export default function CalendarShell({ userUid, authServerUrl, impersonating, i
             setStatus("error");
         });
     }, [userUid]);
+    const ownMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
-    const [folderRefreshToken, setFolderRefreshToken] = useState(0);
+        ownMailboxUid;
     useEffect(() => {
-        if (!mailboxUid) {
-            setFolders([]);
+        if (mailboxes.length === 0) {
+            setMailboxCalendars([]);
             return;
         }
-        setFolderError(null);
-        listFolders(mailboxUid)
-            .then(setFolders)
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's calendar folder."));
-    }, [mailboxUid, folderRefreshToken]);
-    const calendarFolders = useMemo(() => folders.filter((f) => f.type === "calendar"), [folders]);
-    const folderUid = calendarFolders[0]?.uid;
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders: () => setFolderRefreshToken((t) => t + 1) }), [mailboxUid, folderUid, calendarFolders, mailboxes]);
+        let cancelled = false;
+        void Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
+            .then((folders) => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))
+            .catch((err) => ({
+            mailbox,
+            calendarFolders: [],
+            error: err instanceof ApiRequestError ? err.message : "Could not load this mailbox's calendar folder.",
+        })))).then((result) => {
+            if (!cancelled) {
+                setMailboxCalendars(result);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxes, folderRefreshToken]);
+    const calendarFolders = useMemo(() => mailboxCalendars.flatMap((mc) => mc.calendarFolders), [mailboxCalendars]);
+    const folderUid = calendarFolders.find((f) => f.mailboxUid === mailboxUid)?.uid;
+    const colorFor = useCallback((folder) => colorForFolder(folder, folder.mailboxUid === ownMailboxUid ? undefined : accentColorForMailbox(folder.mailboxUid)), [ownMailboxUid]);
+    const reloadFolders = useCallback(() => setFolderRefreshToken((t) => t + 1), []);
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor }), [mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
     // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
-    if (userUid && status === "ready" && !mailboxUid) {
+    if (userUid && status === "ready" && mailboxes.length === 0) {
         return _jsx(MailboxProvisioning, {});
     }
     let inner = null;
     if (userUid && status === "checking") {
         // Renders immediately (no network round trip needed) so switching into Calendar never shows a
-        // blank pane while `listMailboxes()` is in flight — the actual sidebar (mini date-picker +
-        // calendar list) lives in `apps/www/calendar/index.tsx`'s own content, so this mimics its rough
-        // shape rather than the (minimal, mailbox-switcher-only) shape of this shell's own sidebar.
+        // blank pane while `listMailboxes()` is in flight — mimics the rough shape of the real sidebar
+        // (mini date-picker + calendar list) that `apps/www/calendar/index.tsx` renders.
         inner = (_jsxs("div", { className: "w-56 shrink-0 bg-surface border-r border-border p-3 flex flex-col gap-4", children: [_jsx(Skeleton, { height: "h-40", className: "rounded-md" }), _jsx(SkeletonList, { count: 4 })] }));
     }
     else if (userUid && status === "error") {
         inner = (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
     }
     else if (userUid && status === "ready") {
-        // A function, not a plain JSX constant — see MailShell/ContactsShell's identical comment: it's
-        // rendered twice (desktop `<aside>` + mobile `Drawer`), possibly simultaneously mounted, so the
-        // `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct value per instance.
-        const mailboxSwitcher = (idPrefix) => mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-calendar-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-calendar-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
-                        window.location.href = `/calendar?mailboxUid=${encodeURIComponent(e.target.value)}`;
-                    }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] }));
-        inner = (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsx("div", { className: "hidden md:block w-56 shrink-0 bg-surface border-r border-border p-3", children: mailboxSwitcher("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsxs("div", { className: "flex flex-col gap-3", children: [mailboxSwitcher("mobile"), folderError && _jsx(Alert, { children: folderError })] }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), folderError && (_jsx("div", { className: "hidden md:block p-3", children: _jsx(Alert, { children: folderError }) })), _jsx(CalendarShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsx("div", { className: "flex-1 min-w-0 flex flex-col", children: _jsx(CalendarShellContext.Provider, { value: contextValue, children: children }) }));
     }
     return (_jsx(AppShell, { active: "calendar", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
 }

package/dist/apps/shared/components/contacts/ContactDetailPane.js

@@ -1,20 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
 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 KeyChangeReview from "./KeyChangeReview.js";
+import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 /** Groups a hex fingerprint into 4-character blocks (`ab12 cd34 ...`) for out-of-band verification -
  * the spec's own use case ("compare this over the phone") is materially easier with a grouped string
  * than one 64-character run. */
 function formatFingerprint(fingerprint) {
     return fingerprint.match(/.{1,4}/g)?.join(" ") ?? fingerprint;
 }
+/** A revoked key's reason: a superseded key was routinely replaced, a revoked one must not be trusted. */
+function RevocationBadge({ label }) {
+    if (!label) {
+        return null;
+    }
+    return _jsxs("span", { className: label === "superseded" ? "text-text-muted" : "text-danger", children: [" (", label, ")"] });
+}
 /**
  * A contact's read-only detail view. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`,
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, backHref }) {
-    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) || contact.encryptPreference || contact.keyConflict ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), contact.keyConflict && (_jsx("div", { className: "mb-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["A different encryption key was observed for this contact on", " ", new Date(contact.keyConflict.observedAt).toLocaleDateString(), ". The previously verified key below is still the one in use \u2014 this is routine after a device change or reinstall, but it\u2019s also what a real attack looks like, so verify the new fingerprint with ", contact.displayName, " ", "directly (e.g. by phone) before trusting it. There is no automatic way to accept or reject this yet."] }), _jsxs("p", { className: "font-mono text-xs", children: ["Newly observed: ", formatFingerprint(contact.keyConflict.observedFingerprint)] })] }) })), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, canResolveKeys }) {
+    // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
+    const [keyNotice, setKeyNotice] = useState(null);
+    const notice = keyNotice?.contactUid === contact.uid ? keyNotice.text : null;
+    const keyConflicts = contact.keyConflicts ?? [];
+    const previousKeys = contact.previousKeys ?? [];
+    // Pinned signing keys vouch for signatures, so the pinned-signer cache is dropped along with re-reading the contact.
+    function refresh(text) {
+        setKeyNotice({ contactUid: contact.uid, text });
+        clearPinnedSignerCache();
+        onKeysChanged?.();
+    }
+    return (_jsxs("div", { role: "region", "aria-label": "Contact details", className: "max-w-xl flex flex-col gap-5", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline", children: "\u2190 Back to contacts" })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 48 }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: contact.displayName }), contact.jobTitle && contact.company && (_jsxs("p", { className: "text-sm text-text-muted mt-0.5", children: [contact.jobTitle, " at ", contact.company] }))] })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onEdit, children: "Edit" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: onDelete, children: "Delete" })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm", children: [contact.emails.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Email" }), contact.emails.map((e, i) => (_jsxs("div", { children: [e.address, " ", _jsxs("span", { className: "text-text-muted", children: ["(", e.type, ")"] })] }, i)))] })), contact.phones.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Phone" }), contact.phones.map((p, i) => (_jsxs("div", { children: [p.phoneNumber, " ", _jsxs("span", { className: "text-text-muted", children: ["(", p.type, ")"] })] }, i)))] })), contact.addresses.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Address" }), contact.addresses.map((a, i) => (_jsx("div", { children: [a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ") }, i)))] })), contact.categories && contact.categories.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Categories" }), _jsx("div", { children: contact.categories.join(", ") })] })), contact.notes && (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Notes" }), _jsx("div", { children: contact.notes })] })), (contact.keys && contact.keys.length > 0) ||
+                        contact.encryptPreference ||
+                        keyConflicts.length > 0 ||
+                        previousKeys.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "text-text-muted text-xs font-bold uppercase tracking-wide mb-1", children: "Encryption" }), notice && (_jsx("p", { role: "status", className: "mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text", children: notice })), keyConflicts.map((conflict) => {
+                                const pinned = contact.keys?.find((key) => key.useType === conflict.useType);
+                                const kind = conflict.useType === "sign" ? "signing" : "encryption";
+                                return (_jsxs("section", { "aria-label": `${conflict.useType === "sign" ? "Signing" : "Encryption"} key change`, className: "mb-3 py-3 px-3 rounded-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsxs("h2", { className: "font-semibold", children: ["A different ", kind, " key was seen for ", contact.displayName] }), _jsx("p", { children: "The current key stays in use until you decide what to do with the new one." }), _jsx(KeyChangeReview, { mailboxUid: contact.mailboxUid, address: contact.emails[0]?.address, useType: conflict.useType, ownerName: contact.displayName, current: pinned && { fingerprint: pinned.fingerprint, since: keyPinnedSince(contact, pinned) }, proposed: {
+                                                fingerprint: conflict.observedKey.fingerprint,
+                                                observedAt: conflict.observedAt,
+                                                source: conflict.source,
+                                            }, canReject: true, canResolve: canResolveKeys, onResolved: (action) => refresh(action === "accept"
+                                                ? `The new ${kind} key is now trusted for ${contact.displayName}.`
+                                                : `You kept the current ${kind} key for ${contact.displayName}.`), onPinnedKeyChanged: () => refresh(KEY_CHANGE_STALE_MESSAGE) })] }, conflict.useType));
+                            }), contact.encryptPreference && (_jsx("div", { className: "mb-1", children: contact.encryptPreference.preferEncrypt === "mutual"
                                     ? "This contact also encrypts to you — messages to them can be encrypted."
-                                    : "This contact has not indicated a mutual encryption preference." })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint), key.revokedAt && _jsx("span", { className: "text-danger", children: " (revoked)" })] }, key.fingerprint)))] })) : null] })] }));
+                                    : "This contact has not indicated a mutual encryption preference." })), contact.keys?.map((key) => (_jsxs("div", { className: "font-mono text-xs py-0.5", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint), _jsx(RevocationBadge, { label: revocationLabel(key) })] }, key.fingerprint))), previousKeys.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-text-muted text-xs font-bold mb-1", children: "Key history" }), _jsx("ul", { "aria-label": "Key history", children: previousKeys.map((key) => (_jsxs("li", { className: "text-xs py-0.5", children: [_jsxs("span", { className: "font-mono", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", formatFingerprint(key.fingerprint)] }), _jsx(RevocationBadge, { label: revocationLabel(key) }), _jsxs("span", { className: "text-text-muted", children: [" ", "\u00B7", " ", key.replacement === "automatic" ? "Renewed automatically" : "Replaced by you", " on", " ", formatDate(key.replacedAt)] })] }, `${key.useType}:${key.fingerprint}:${key.replacedAt}`))) })] }))] })) : null] })] }));
 }

package/dist/apps/shared/components/contacts/ContactForm.js

@@ -9,6 +9,8 @@ import { createContact, updateContact, } from "@rapidmx/react-shared/contacts/co
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const ADDRESS_KINDS = ["home", "work", "other"];
@@ -17,7 +19,8 @@ const ADDRESS_KINDS = ["home", "work", "other"];
  * mobile detail route's own edit mode (`apps/www/contacts/[uid].tsx`) — creation itself stays
  * desktop-and-mobile-inline (see that route's own doc comment on why "new" never gets a dedicated route).
  */
-export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, onCancel }) {
+export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }) {
+    const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
     const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
     const [givenName, setGivenName] = useState(contact?.givenName ?? "");
     const [surname, setSurname] = useState(contact?.surname ?? "");
@@ -28,7 +31,9 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
     const [categoriesText, setCategoriesText] = useState((contact?.categories ?? []).join(", "));
     const [emails, setEmails] = useState(contact?.emails ?? []);
     const [phones, setPhones] = useState(contact?.phones ?? []);
-    const [address, setAddress] = useState(contact?.addresses[0] ?? null);
+    // Every stored address is kept and editable - editing a contact must never silently drop addresses
+    // beyond the first.
+    const [addresses, setAddresses] = useState(contact?.addresses ?? []);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     function updateEmail(index, patch) {
@@ -43,6 +48,12 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
     function removePhone(index) {
         setPhones((prev) => prev.filter((_, i) => i !== index));
     }
+    function updateAddress(index, patch) {
+        setAddresses((prev) => prev.map((a, i) => (i === index ? { ...a, ...patch } : a)));
+    }
+    function removeAddress(index) {
+        setAddresses((prev) => prev.filter((_, i) => i !== index));
+    }
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
@@ -56,22 +67,44 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
                 .split(",")
                 .map((c) => c.trim())
                 .filter(Boolean);
+            // An update merges only the fields in its body, so a field the user cleared is sent as an
+            // explicit `null` (an omitted/undefined one would keep its stored value); a create just omits it.
+            const cleared = contact ? null : undefined;
             const input = {
                 displayName: displayName.trim(),
-                givenName: givenName.trim() || undefined,
-                surname: surname.trim() || undefined,
-                company: company.trim() || undefined,
-                jobTitle: jobTitle.trim() || undefined,
-                notes: notes.trim() || undefined,
+                givenName: givenName.trim() || cleared,
+                surname: surname.trim() || cleared,
+                company: company.trim() || cleared,
+                jobTitle: jobTitle.trim() || cleared,
+                notes: notes.trim() || cleared,
                 favorite,
                 categories,
                 emails,
                 phones,
-                addresses: address ? [address] : [],
+                addresses,
             };
-            const saved = contact
-                ? await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input })
-                : await createContact({ mailboxUid: mailboxUid, folderUid: folderUid, ...input });
+            let saved;
+            if (contact) {
+                saved = await updateContact({
+                    uid: contact.uid,
+                    version: contact.version,
+                    ...input,
+                });
+            }
+            else {
+                const targetFolderUid = targetMailboxUid === mailboxUid ? folderUid : await findWellKnownFolderUid(targetMailboxUid, "contacts");
+                if (!targetFolderUid) {
+                    setError("That mailbox has no Contacts folder.");
+                    return;
+                }
+                saved = await createContact({
+                    mailboxUid: targetMailboxUid,
+                    folderUid: targetFolderUid,
+                    ...input,
+                });
+            }
+            // A message opened later in this page load must see the changed contact's signing keys.
+            clearPinnedSignerCache();
             onSaved(saved);
         }
         catch (err) {
@@ -81,5 +114,5 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
             setSaving(false);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: address ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => setAddress({ ...address, street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => setAddress({ ...address, city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => setAddress({ ...address, state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => setAddress({ ...address, postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => setAddress({ ...address, country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => setAddress({ ...address, type: e.target.value }), "aria-label": "Address type", children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => setAddress(null), className: "self-start text-xs font-medium text-danger hover:underline", children: "Remove address" })] })) : (_jsx("button", { type: "button", onClick: () => setAddress({ type: "home" }), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "max-w-xl flex flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: contact ? "Edit contact" : "New contact" }), error && _jsx(Alert, { children: error }), !contact && mailboxes && mailboxes.length > 1 && (_jsx(FormField, { label: "Mailbox", htmlFor: "contact-mailbox", children: _jsx("select", { id: "contact-mailbox", className: `${SELECT_CLASS} w-full`, value: targetMailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) }) })), _jsx(FormField, { label: "Display name", htmlFor: "contact-displayName", children: _jsx("input", { id: "contact-displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "First name", htmlFor: "contact-givenName", children: _jsx("input", { id: "contact-givenName", type: "text", className: INPUT_CLASS, value: givenName, onChange: (e) => setGivenName(e.target.value) }) }), _jsx(FormField, { label: "Last name", htmlFor: "contact-surname", children: _jsx("input", { id: "contact-surname", type: "text", className: INPUT_CLASS, value: surname, onChange: (e) => setSurname(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Company", htmlFor: "contact-company", children: _jsx("input", { id: "contact-company", type: "text", className: INPUT_CLASS, value: company, onChange: (e) => setCompany(e.target.value) }) }), _jsx(FormField, { label: "Job title", htmlFor: "contact-jobTitle", children: _jsx("input", { id: "contact-jobTitle", type: "text", className: INPUT_CLASS, value: jobTitle, onChange: (e) => setJobTitle(e.target.value) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: favorite, onChange: (e) => setFavorite(e.target.checked) }), "Favorite"] }), _jsx(FormField, { label: "Categories (comma-separated)", htmlFor: "contact-categories", children: _jsx("input", { id: "contact-categories", type: "text", className: INPUT_CLASS, value: categoriesText, onChange: (e) => setCategoriesText(e.target.value), placeholder: "VIP, Work" }) }), _jsx(FormField, { label: "Email", htmlFor: "contact-emails", children: _jsxs("div", { id: "contact-emails", className: "flex flex-col gap-2", children: [emails.map((email, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "email", className: `${INPUT_CLASS} flex-1`, value: email.address, onChange: (e) => updateEmail(i, { address: e.target.value }), "aria-label": `Email address ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: email.type, onChange: (e) => updateEmail(i, { type: e.target.value }), "aria-label": `Email type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removeEmail(i), className: "text-sm text-danger px-2", "aria-label": `Remove email ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setEmails((prev) => [...prev, { address: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add email" })] }) }), _jsx(FormField, { label: "Phone", htmlFor: "contact-phones", children: _jsxs("div", { id: "contact-phones", className: "flex flex-col gap-2", children: [phones.map((phone, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "tel", className: `${INPUT_CLASS} flex-1`, value: phone.phoneNumber, onChange: (e) => updatePhone(i, { phoneNumber: e.target.value }), "aria-label": `Phone number ${i + 1}` }), _jsx("select", { className: SELECT_CLASS, value: phone.type, onChange: (e) => updatePhone(i, { type: e.target.value }), "aria-label": `Phone type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) }), _jsx("button", { type: "button", onClick: () => removePhone(i), className: "text-sm text-danger px-2", "aria-label": `Remove phone ${i + 1}`, children: "\u00D7" })] }, i))), _jsx("button", { type: "button", onClick: () => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add phone" })] }) }), _jsx(FormField, { label: "Address", htmlFor: "contact-address", children: _jsxs("div", { className: "flex flex-col gap-3", children: [addresses.map((address, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsx("input", { type: "text", placeholder: "Street", className: INPUT_CLASS, value: address.street ?? "", onChange: (e) => updateAddress(i, { street: e.target.value }) }), _jsx("input", { type: "text", placeholder: "City", className: INPUT_CLASS, value: address.city ?? "", onChange: (e) => updateAddress(i, { city: e.target.value }) }), _jsx("input", { type: "text", placeholder: "State/Province", className: INPUT_CLASS, value: address.state ?? "", onChange: (e) => updateAddress(i, { state: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Postal code", className: INPUT_CLASS, value: address.postalCode ?? "", onChange: (e) => updateAddress(i, { postalCode: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Country", className: INPUT_CLASS, value: address.country ?? "", onChange: (e) => updateAddress(i, { country: e.target.value }) }), _jsx("select", { className: SELECT_CLASS, value: address.type, onChange: (e) => updateAddress(i, { type: e.target.value }), "aria-label": i === 0 ? "Address type" : `Address type ${i + 1}`, children: ADDRESS_KINDS.map((kind) => (_jsx("option", { value: kind, children: kind }, kind))) })] }), _jsx("button", { type: "button", onClick: () => removeAddress(i), className: "self-start text-xs font-medium text-danger hover:underline", "aria-label": i === 0 ? "Remove address" : `Remove address ${i + 1}`, children: "Remove address" })] }, i))), _jsx("button", { type: "button", onClick: () => setAddresses((prev) => [...prev, { type: "home" }]), className: "self-start text-xs font-medium text-primary-dark hover:underline", children: "+ Add address" })] }) }), _jsx(FormField, { label: "Notes", htmlFor: "contact-notes", children: _jsx("textarea", { id: "contact-notes", rows: 3, className: INPUT_CLASS, value: notes, onChange: (e) => setNotes(e.target.value) }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onCancel, children: "Cancel" })] })] }));
 }

package/dist/apps/shared/components/contacts/ContactsSidebar.js

@@ -43,7 +43,7 @@ function NavItem({ label, count, active, onClick, swatch, }) {
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken }) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }) {
     const [lists, setLists] = useState([]);
     const [listsError, setListsError] = useState(null);
     const [addingList, setAddingList] = useState(false);
@@ -100,6 +100,6 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
     // `Drawer` (see MailShell/ContactsShell for the identical pattern and the duplicate-id reasoning
     // behind the `idPrefix`).
-    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
     return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open contacts menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Contacts", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }