@rapidmx/web-client 0.3.1 → 0.5.0

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

@@ -2,10 +2,9 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
-import { HiOutlineBars3 } from "react-icons/hi2";
+import React, { createContext, PropsWithChildren, ReactNode, 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 { 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";
@@ -14,23 +13,43 @@ import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 
 export type CalendarShellProps = Omit<AppShellProps, "active">;
 
+/** One mailbox's own `calendar`-type folders. `error` is set (and `calendarFolders` left empty) when that
+ * mailbox's own `listFolders()` failed - one mailbox's failure never hides every other mailbox's calendars. */
+export interface MailboxCalendars {
+    mailbox: Mailbox;
+    calendarFolders: Folder[];
+    error?: string;
+}
+
 export interface CalendarShellContextValue {
-    /** The mailbox currently selected (`?mailboxUid=`, or the caller's first accessible mailbox). */
+    /** The default mailbox for "+ New event" (`?mailboxUid=` if accessible, else the caller's own mailbox,
+     * else the first accessible one) - every accessible mailbox's calendars are shown regardless. */
     mailboxUid?: string;
-    /** The selected mailbox's first `calendar`-type folder — kept for callers that only care about a
-     * single calendar (e.g. as the default target for "+ New event"). */
+    /** `mailboxUid`'s first `calendar`-type folder - the default target for "+ New event". */
     folderUid?: string;
-    /** Every `calendar`-type folder for the selected mailbox — usually just one, but a mailbox can have
-     * several (see `CalendarListSidebar`). */
+    /** Every accessible mailbox's `calendar`-type folders, flattened - the set of calendars that can be
+     * checked/shown (see `CalendarListSidebar`). Each folder's own `mailboxUid` says which mailbox it's in. */
     calendarFolders: Folder[];
+    /** The same folders, grouped per mailbox, for the sidebar's per-mailbox sections. */
+    mailboxCalendars: MailboxCalendars[];
     mailboxes: Mailbox[];
-    /** Re-fetches this mailbox's folders (e.g. after creating a new calendar) without a full mailbox reload. */
+    /** Re-fetches every mailbox's folders (e.g. after creating a new calendar) without a full reload. */
     reloadFolders: () => void;
+    /** The display color for a calendar folder: its own `color`, else the default for the caller's own
+     * mailbox, else its mailbox's `accentColorForMailbox()` - so a shared mailbox's calendar is visually
+     * distinct from the caller's own even when neither has a color set. */
+    colorFor: (folder: Folder) => string;
 }
 
-const CalendarShellContext = createContext<CalendarShellContextValue>({ calendarFolders: [], mailboxes: [], reloadFolders: () => undefined });
+const CalendarShellContext = createContext<CalendarShellContextValue>({
+    calendarFolders: [],
+    mailboxCalendars: [],
+    mailboxes: [],
+    reloadFolders: () => undefined,
+    colorFor: (folder) => colorForFolder(folder),
+});
 
-/** Reads the mailbox/folder the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
+/** Reads the calendars the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
 export function useCalendarShell(): CalendarShellContextValue {
     return useContext(CalendarShellContext);
 }
@@ -38,13 +57,11 @@ export function useCalendarShell(): CalendarShellContextValue {
 type Status = "checking" | "error" | "ready";
 
 /**
- * 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,
@@ -57,10 +74,9 @@ export default function CalendarShell({
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(null);
     const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
-    const [folders, setFolders] = useState<Folder[]>([]);
-    const [folderError, setFolderError] = useState<string | null>(null);
+    const [mailboxCalendars, setMailboxCalendars] = useState<MailboxCalendars[]>([]);
     const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
-    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [folderRefreshToken, setFolderRefreshToken] = useState(0);
 
     useEffect(() => {
         setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
@@ -81,43 +97,64 @@ export default function CalendarShell({
             });
     }, [userUid]);
 
+    const ownMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const mailboxUid: string | undefined =
         (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: Folder[] = useMemo(() => folders.filter((f) => f.type === "calendar"), [folders]);
-    const folderUid: string | undefined = calendarFolders[0]?.uid;
+        let cancelled = false;
+        void Promise.all(
+            mailboxes.map((mailbox) =>
+                listFolders(mailbox.uid)
+                    .then((folders): MailboxCalendars => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))
+                    .catch(
+                        (err): MailboxCalendars => ({
+                            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: string | undefined = calendarFolders.find((f) => f.mailboxUid === mailboxUid)?.uid;
+
+    const colorFor = useCallback(
+        (folder: Folder) => colorForFolder(folder, folder.mailboxUid === ownMailboxUid ? undefined : accentColorForMailbox(folder.mailboxUid)),
+        [ownMailboxUid],
+    );
+    const reloadFolders = useCallback(() => setFolderRefreshToken((t) => t + 1), []);
 
     const contextValue = useMemo<CalendarShellContextValue>(
-        () => ({ mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders: () => setFolderRefreshToken((t) => t + 1) }),
-        [mailboxUid, folderUid, calendarFolders, mailboxes],
+        () => ({ 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 <MailboxProvisioning />;
     }
 
     let inner: ReactNode = 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 = (
             <div className="w-56 shrink-0 bg-surface border-r border-border p-3 flex flex-col gap-4">
                 <Skeleton height="h-40" className="rounded-md" />
@@ -133,66 +170,10 @@ export default function CalendarShell({
             </div>
         );
     } 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: string) =>
-            mailboxes.length > 1 && (
-                <div>
-                    <label
-                        className="block text-xs font-bold uppercase tracking-wide text-text-muted mb-1"
-                        htmlFor={`${idPrefix}-calendar-mailbox-switcher`}
-                    >
-                        Mailbox
-                    </label>
-                    <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)}`;
-                        }}
-                    >
-                        {mailboxes.map((mb) => (
-                            <option key={mb.uid} value={mb.uid}>
-                                {mb.displayName}
-                                {mb.ownerUserUid ? "" : " (shared)"}
-                            </option>
-                        ))}
-                    </select>
-                </div>
-            );
-
         inner = (
-            <>
-                {mailboxes.length > 1 && (
-                    <div className="hidden md:block w-56 shrink-0 bg-surface border-r border-border p-3">{mailboxSwitcher("desktop")}</div>
-                )}
-                <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Mailbox">
-                    <div className="flex flex-col gap-3">
-                        {mailboxSwitcher("mobile")}
-                        {folderError && <Alert>{folderError}</Alert>}
-                    </div>
-                </Drawer>
-                <div className="flex-1 min-w-0 flex flex-col">
-                    {(mailboxes.length > 1 || folderError) && (
-                        <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)}
-                        >
-                            <HiOutlineBars3 size={20} aria-hidden="true" />
-                        </button>
-                    )}
-                    {folderError && (
-                        <div className="hidden md:block p-3">
-                            <Alert>{folderError}</Alert>
-                        </div>
-                    )}
-                    <CalendarShellContext.Provider value={contextValue}>{children}</CalendarShellContext.Provider>
-                </div>
-            </>
+            <div className="flex-1 min-w-0 flex flex-col">
+                <CalendarShellContext.Provider value={contextValue}>{children}</CalendarShellContext.Provider>
+            </div>
         );
     }
 

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

@@ -2,11 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React from "react";
+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 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
@@ -15,6 +18,14 @@ function formatFingerprint(fingerprint: string): string {
     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 }: { label: "superseded" | "revoked" | undefined }) {
+    if (!label) {
+        return null;
+    }
+    return <span className={label === "superseded" ? "text-text-muted" : "text-danger"}> ({label})</span>;
+}
+
 export interface ContactDetailPaneProps {
     contact: Contact;
     onEdit: () => void;
@@ -23,6 +34,12 @@ export interface ContactDetailPaneProps {
      * on the desktop inline pane, which never navigates away (selecting a different contact just swaps
      * `contact` in place). */
     backHref?: string;
+    /** Called after one of the contact's key changes was accepted or kept, or turned out to be stale - the caller
+     * re-reads the contact. */
+    onKeysChanged?: () => void;
+    /** `false` when the reader is known not to be able to change this contact's keys (the actions are hidden); `undefined`
+     * when unknown (they're hidden after a 403). */
+    canResolveKeys?: boolean;
 }
 
 /**
@@ -30,7 +47,20 @@ export interface ContactDetailPaneProps {
  * 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 }: ContactDetailPaneProps) {
+export default function ContactDetailPane({ contact, onEdit, onDelete, backHref, onKeysChanged, canResolveKeys }: ContactDetailPaneProps) {
+    // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
+    const [keyNotice, setKeyNotice] = useState<{ contactUid: string; text: string } | null>(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: string) {
+        setKeyNotice({ contactUid: contact.uid, text });
+        clearPinnedSignerCache();
+        onKeysChanged?.();
+    }
+
     return (
         <div role="region" aria-label="Contact details" className="max-w-xl flex flex-col gap-5">
             {backHref && (
@@ -101,27 +131,55 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref
                         <div>{contact.notes}</div>
                     </div>
                 )}
-                {(contact.keys && contact.keys.length > 0) || contact.encryptPreference || contact.keyConflict ? (
+                {(contact.keys && contact.keys.length > 0) ||
+                contact.encryptPreference ||
+                keyConflicts.length > 0 ||
+                previousKeys.length > 0 ? (
                     <div>
                         <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Encryption</div>
-                        {contact.keyConflict && (
-                            <div className="mb-2">
-                                <Alert>
-                                    <p className="mb-2">
-                                        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 — this is routine
-                                        after a device change or reinstall, but it&rsquo;s 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.
-                                    </p>
-                                    <p className="font-mono text-xs">
-                                        Newly observed: {formatFingerprint(contact.keyConflict.observedFingerprint)}
-                                    </p>
-                                </Alert>
-                            </div>
+                        {notice && (
+                            <p role="status" className="mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text">
+                                {notice}
+                            </p>
                         )}
+                        {keyConflicts.map((conflict) => {
+                            const pinned = contact.keys?.find((key) => key.useType === conflict.useType);
+                            const kind = conflict.useType === "sign" ? "signing" : "encryption";
+                            return (
+                                <section
+                                    key={conflict.useType}
+                                    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"
+                                >
+                                    <h2 className="font-semibold">
+                                        A different {kind} key was seen for {contact.displayName}
+                                    </h2>
+                                    <p>The current key stays in use until you decide what to do with the new one.</p>
+                                    <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
+                                        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)}
+                                    />
+                                </section>
+                            );
+                        })}
                         {contact.encryptPreference && (
                             <div className="mb-1">
                                 {contact.encryptPreference.preferEncrypt === "mutual"
@@ -132,9 +190,30 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref
                         {contact.keys?.map((key) => (
                             <div key={key.fingerprint} className="font-mono text-xs py-0.5">
                                 {key.useType === "sign" ? "Signing" : "Encryption"} key: {formatFingerprint(key.fingerprint)}
-                                {key.revokedAt && <span className="text-danger"> (revoked)</span>}
+                                <RevocationBadge label={revocationLabel(key)} />
                             </div>
                         ))}
+                        {previousKeys.length > 0 && (
+                            <div className="mt-3">
+                                <div className="text-text-muted text-xs font-bold mb-1">Key history</div>
+                                <ul aria-label="Key history">
+                                    {previousKeys.map((key) => (
+                                        <li key={`${key.useType}:${key.fingerprint}:${key.replacedAt}`} className="text-xs py-0.5">
+                                            <span className="font-mono">
+                                                {key.useType === "sign" ? "Signing" : "Encryption"} key: {formatFingerprint(key.fingerprint)}
+                                            </span>
+                                            <RevocationBadge label={revocationLabel(key)} />
+                                            <span className="text-text-muted">
+                                                {" "}
+                                                &middot;{" "}
+                                                {key.replacement === "automatic" ? "Renewed automatically" : "Replaced by you"} on{" "}
+                                                {formatDate(key.replacedAt)}
+                                            </span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
                     </div>
                 ) : null}
             </div>