@rapidmx/web-client 0.3.0 → 0.4.0

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

@@ -13,9 +13,11 @@ import {
     createContact,
     updateContact,
 } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 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";
 
 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";
@@ -24,8 +26,12 @@ const SELECT_CLASS =
 
 export interface ContactFormProps {
     contact?: Contact;
+    /** Create mode: the default mailbox (and its Contacts folder) to create in. */
     mailboxUid?: string;
     folderUid?: string;
+    /** Create mode: every mailbox the contact could be created in - with more than one, a Mailbox selector
+     * is shown. Choosing a mailbox other than `mailboxUid` looks up that mailbox's own Contacts folder. */
+    mailboxes?: Mailbox[];
     onSaved: (contact: Contact) => void;
     onCancel: () => void;
 }
@@ -37,7 +43,8 @@ const ADDRESS_KINDS: ContactAddressKind[] = ["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 }: ContactFormProps) {
+export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }: ContactFormProps) {
+    const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
     const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
     const [givenName, setGivenName] = useState(contact?.givenName ?? "");
     const [surname, setSurname] = useState(contact?.surname ?? "");
@@ -93,9 +100,18 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
                 phones,
                 addresses: address ? [address] : [],
             };
-            const saved = contact
-                ? await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input })
-                : await createContact({ mailboxUid: mailboxUid as string, folderUid: folderUid as string, ...input });
+            let saved: Contact;
+            if (contact) {
+                saved = await updateContact({ uid: contact.uid, version: contact.version, mailboxUid: contact.mailboxUid, folderUid: contact.folderUid, ...input });
+            } else {
+                const targetFolderUid =
+                    targetMailboxUid === mailboxUid ? folderUid : await findWellKnownFolderUid(targetMailboxUid as string, "contacts");
+                if (!targetFolderUid) {
+                    setError("That mailbox has no Contacts folder.");
+                    return;
+                }
+                saved = await createContact({ mailboxUid: targetMailboxUid as string, folderUid: targetFolderUid, ...input });
+            }
             onSaved(saved);
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not save this contact.");
@@ -110,6 +126,24 @@ export default function ContactForm({ contact, mailboxUid, folderUid, onSaved, o
 
             {error && <Alert>{error}</Alert>}
 
+            {!contact && mailboxes && mailboxes.length > 1 && (
+                <FormField label="Mailbox" htmlFor="contact-mailbox">
+                    <select
+                        id="contact-mailbox"
+                        className={`${SELECT_CLASS} w-full`}
+                        value={targetMailboxUid}
+                        onChange={(e) => setTargetMailboxUid(e.target.value)}
+                    >
+                        {mailboxes.map((mb) => (
+                            <option key={mb.uid} value={mb.uid}>
+                                {mb.displayName}
+                                {mb.ownerUserUid ? "" : " (shared)"}
+                            </option>
+                        ))}
+                    </select>
+                </FormField>
+            )}
+
             <FormField label="Display name" htmlFor="contact-displayName">
                 <input
                     id="contact-displayName"

package/apps/shared/components/layout/AppShell.tsx

@@ -1,169 +1,198 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import "../../styles/app.css";
-import React, { PropsWithChildren, useState } from "react";
-import type { IconType } from "react-icons";
-import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlineUsers } from "react-icons/hi2";
-import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
-import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
-import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
-import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeout.js";
-import ComposeProvider from "../mail/compose/ComposeContext.js";
-import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
-import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
-import UserMenu from "./UserMenu.js";
-
-export type AppShellApp = "mail" | "calendar" | "contacts" | "tasks";
-
-/** `"settings"` is a valid `active` value but deliberately has no entry in `APPS` below — Settings is
- * reached via a `UserMenu` item, not a 5th rail icon (see `SettingsShell.tsx`), so it highlights no
- * rail/tab icon at all; only the header title (`ACTIVE_LABELS` below) needs to account for it. */
-export type AppShellActive = AppShellApp | "settings";
-
-export interface AppShellProps {
-    /** Which icon in the rail is highlighted as the current app — `"settings"` highlights none. */
-    active: AppShellActive;
-    /** Populated automatically by the framework from an authenticated request (e.g. a valid `jwt` cookie). */
-    userUid?: string;
-    /** auth-server's base URL, injected via the route's `fetchProps`. */
-    authServerUrl?: string;
-    /**
-     * `true` when this session is an admin "log in as user" impersonation (a `jwt_impersonator` cookie is
-     * present) — see `MailShell`'s original doc comment, unchanged now that this lives here. Drives the
-     * "you are viewing as this user — stop impersonating" banner below.
-     */
-    impersonating?: boolean;
-    /** Where `mailApi.ts`'s `stopImpersonating()` should call — see `MailShell`'s original doc comment. */
-    impersonationBaseUrl?: string;
-    /** `true` when the caller's JWT carries a trusted role — shows an "Admin" item in the user menu below. */
-    trusted?: boolean;
-}
-
-export interface AppDef {
-    id: AppShellApp;
-    href: string;
-    label: string;
-    icon: IconType;
-}
-
-export const APPS: AppDef[] = [
-    { id: "mail", href: "/", label: "Mail", icon: HiOutlineEnvelope },
-    { id: "calendar", href: "/calendar", label: "Calendar", icon: HiOutlineCalendarDays },
-    { id: "contacts", href: "/contacts", label: "Contacts", icon: HiOutlineUsers },
-    { id: "tasks", href: "/tasks", label: "Tasks", icon: HiOutlineClipboardDocumentList },
-];
-
-/** The header title for every valid `active` value — a superset of `APPS`' own labels since `"settings"`
- * has no rail icon (and so no `AppDef`) but still needs a header title. */
-const ACTIVE_LABELS: Record<AppShellActive, string> = {
-    mail: "Mail",
-    calendar: "Calendar",
-    contacts: "Contacts",
-    tasks: "Tasks",
-    settings: "Settings",
-};
-
-/**
- * The persistent chrome shared by every webmail app (Mail, Calendar, Contacts, Tasks): a left icon rail for
- * switching apps (full page loads — see `MailShell`'s original doc comment on this framework having no
- * client-side router), a header with the current app's name and `UserMenu`, and the impersonation banner.
- * Each app's own shell (e.g. `MailShell`) renders its own contextual sidebar + content as `children`, inside
- * the area to the right of the icon rail and below the header.
- */
-export default function AppShell({
-    active,
-    userUid,
-    authServerUrl,
-    impersonating,
-    impersonationBaseUrl,
-    trusted,
-    children,
-}: PropsWithChildren<AppShellProps>) {
-    const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
-    const { branding, iconSrc } = useBranding();
-
-    useRedirectIfUnauthenticated(userUid, authServerUrl);
-    // Mounted here, not scoped to Mail/Settings (the only shells that actually read unlocked keys),
-    // specifically so activity in *any* app resets the idle clock - see that hook's own doc comment.
-    useIdleKeyTimeout();
-
-    function handleSignOut() {
-        window.location.href = authServerUrl ?? "/";
-    }
-
-    async function handleStopImpersonating() {
-        setStoppingImpersonation(true);
-        try {
-            await stopImpersonating(impersonationBaseUrl ?? "");
-        } catch {
-            // Navigate either way: a failed call leaves the impersonator cookie (and this banner) exactly as
-            // they were, so there's nothing else useful to show — matching this app's other network-error
-            // handling, which surfaces via a full reload rather than an inline retry affordance.
-        } finally {
-            window.location.href = "/admin";
-        }
-    }
-
-    if (!userUid) {
-        return <div className="min-h-screen" />;
-    }
-
-    return (
-        <ComposeProvider>
-            <div className="min-h-screen flex flex-col bg-surface-alt">
-                <BrandingHeader branding={branding} />
-                {impersonating && (
-                    <div className="h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4">
-                        <span>
-                            You are viewing as <strong>{userUid}</strong>.
-                        </span>
-                        <button
-                            type="button"
-                            onClick={handleStopImpersonating}
-                            disabled={stoppingImpersonation}
-                            className="underline hover:no-underline disabled:opacity-60"
-                        >
-                            {stoppingImpersonation ? "Returning to admin…" : "Return to admin"}
-                        </button>
-                    </div>
-                )}
-                <div className="flex-1 flex min-h-0">
-                    <nav
-                        aria-label="Apps"
-                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1"
-                    >
-                        <img src={iconSrc} width="96" height="96" alt="" className="mb-3" />
-                        {APPS.map(({ id, href, label, icon: Icon }) => (
-                            <a
-                                key={id}
-                                href={href}
-                                aria-label={label}
-                                aria-current={id === active ? "page" : undefined}
-                                title={label}
-                                className={[
-                                    "w-10 h-10 flex items-center justify-center rounded-sm",
-                                    id === active
-                                        ? "bg-primary/10 text-primary-dark"
-                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                ].join(" ")}
-                            >
-                                <Icon size={20} aria-hidden="true" />
-                            </a>
-                        ))}
-                    </nav>
-                    <BottomTabBar apps={APPS} active={active} />
-                    <div className="flex-1 flex flex-col min-w-0">
-                        <header className="h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
-                            <span className="font-display font-bold text-lg uppercase tracking-wide">{ACTIVE_LABELS[active]}</span>
-                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} showAdminLink={trusted} showSettingsLink />
-                        </header>
-                        <div className="flex-1 flex min-h-0 pb-14 md:pb-0">{children}</div>
-                    </div>
-                </div>
-                <BrandingFooter branding={branding} />
-            </div>
-        </ComposeProvider>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import "../../styles/app.css";
+import React, { PropsWithChildren, useState, useEffect } from "react";
+import type { IconType } from "react-icons";
+import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlineUsers } from "react-icons/hi2";
+import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
+import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeout.js";
+import ComposeProvider from "../mail/compose/ComposeContext.js";
+import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
+import UserMenu from "./UserMenu.js";
+import { UnlockPromptProvider } from "./UnlockPromptProvider.js";
+import { destroyAllLocalIndexes } from "../../search/localIndexRpcClient.js";
+
+export type AppShellApp = "mail" | "calendar" | "contacts" | "tasks";
+
+/** `"settings"` is a valid `active` value but deliberately has no entry in `APPS` below — Settings is
+ * reached via a `UserMenu` item, not a 5th rail icon (see `SettingsShell.tsx`), so it highlights no
+ * rail/tab icon at all; only the header title (`ACTIVE_LABELS` below) needs to account for it. */
+export type AppShellActive = AppShellApp | "settings";
+
+export interface AppShellProps {
+    /** Which icon in the rail is highlighted as the current app — `"settings"` highlights none. */
+    active: AppShellActive;
+    /** Populated automatically by the framework from an authenticated request (e.g. a valid `jwt` cookie). */
+    userUid?: string;
+    /** auth-server's base URL, injected via the route's `fetchProps`. */
+    authServerUrl?: string;
+    /**
+     * `true` when this session is an admin "log in as user" impersonation (a `jwt_impersonator` cookie is
+     * present) — see `MailShell`'s original doc comment, unchanged now that this lives here. Drives the
+     * "you are viewing as this user — stop impersonating" banner below.
+     */
+    impersonating?: boolean;
+    /** Where `mailApi.ts`'s `stopImpersonating()` should call — see `MailShell`'s original doc comment. */
+    impersonationBaseUrl?: string;
+    /** `true` when the caller's JWT carries a trusted role — shows an "Admin" item in the user menu below. */
+    trusted?: boolean;
+}
+
+export interface AppDef {
+    id: AppShellApp;
+    href: string;
+    label: string;
+    icon: IconType;
+}
+
+export const APPS: AppDef[] = [
+    { id: "mail", href: "/", label: "Mail", icon: HiOutlineEnvelope },
+    { id: "calendar", href: "/calendar", label: "Calendar", icon: HiOutlineCalendarDays },
+    { id: "contacts", href: "/contacts", label: "Contacts", icon: HiOutlineUsers },
+    { id: "tasks", href: "/tasks", label: "Tasks", icon: HiOutlineClipboardDocumentList },
+];
+
+/** The header title for every valid `active` value — a superset of `APPS`' own labels since `"settings"`
+ * has no rail icon (and so no `AppDef`) but still needs a header title. */
+const ACTIVE_LABELS: Record<AppShellActive, string> = {
+    mail: "Mail",
+    calendar: "Calendar",
+    contacts: "Contacts",
+    tasks: "Tasks",
+    settings: "Settings",
+};
+
+/**
+ * The persistent chrome shared by every webmail app (Mail, Calendar, Contacts, Tasks): a left icon rail for
+ * switching apps (full page loads — see `MailShell`'s original doc comment on this framework having no
+ * client-side router), a header with the current app's name and `UserMenu`, and the impersonation banner.
+ * Each app's own shell (e.g. `MailShell`) renders its own contextual sidebar + content as `children`, inside
+ * the area to the right of the icon rail and below the header.
+ */
+export default function AppShell({
+    active,
+    userUid,
+    authServerUrl,
+    impersonating,
+    impersonationBaseUrl,
+    trusted,
+    children,
+}: PropsWithChildren<AppShellProps>) {
+    const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
+    const { branding, iconSrc } = useBranding();
+
+    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // Mounted here, not scoped to Mail/Settings (the only shells that actually read unlocked keys),
+    // specifically so activity in *any* app resets the idle clock - see that hook's own doc comment.
+    useIdleKeyTimeout();
+
+    // An administrator on a server that hasn't finished first-run setup is sent to the setup wizard. Everyone else
+    // gets a 403 from the setup status check (it's admin-only), which is ignored along with any other failure.
+    useEffect(() => {
+        if (!userUid || impersonating) {
+            return;
+        }
+        getSetupStatus()
+            .then((status) => {
+                if (status.required) {
+                    window.location.href = "/admin/setup";
+                }
+            })
+            .catch(() => undefined);
+    }, [userUid, impersonating]);
+
+    function handleSignOut() {
+        // Best-effort, fire-and-forget: the Tier 2 local index MUST be destroyed on explicit logout, the
+        // same as unlocked keys themselves (spec §11) - this component has no specific mailboxUid of its
+        // own to pass (it's shared by every app, not just Mail), so this destroys every mailbox's index
+        // the session has open rather than needing one threaded through. Not awaited - the navigation
+        // below shouldn't wait on it, and destroyAllLocalIndexes() never throws either way.
+        void destroyAllLocalIndexes();
+        window.location.href = authServerUrl ?? "/";
+    }
+
+    async function handleStopImpersonating() {
+        setStoppingImpersonation(true);
+        try {
+            await stopImpersonating(impersonationBaseUrl ?? "");
+        } catch {
+            // Navigate either way: a failed call leaves the impersonator cookie (and this banner) exactly as
+            // they were, so there's nothing else useful to show — matching this app's other network-error
+            // handling, which surfaces via a full reload rather than an inline retry affordance.
+        } finally {
+            window.location.href = "/admin";
+        }
+    }
+
+    if (!userUid) {
+        return <div className="min-h-screen" />;
+    }
+
+    return (
+        // Mounted here, not scoped to Mail/Settings, for the same reason as useIdleKeyTimeout() above -
+        // ComposeWindow's sign/encrypt toggles and MessageDetailPane's encrypted-message view (both Mail)
+        // are today's only useUnlockPrompt() callers, but this needs to be available to any app shell.
+        <UnlockPromptProvider>
+            <ComposeProvider userUid={userUid}>
+            <div className="min-h-screen flex flex-col bg-surface-alt">
+                <BrandingHeader branding={branding} />
+                {impersonating && (
+                    <div className="h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4">
+                        <span>
+                            You are viewing as <strong>{userUid}</strong>.
+                        </span>
+                        <button
+                            type="button"
+                            onClick={handleStopImpersonating}
+                            disabled={stoppingImpersonation}
+                            className="underline hover:no-underline disabled:opacity-60"
+                        >
+                            {stoppingImpersonation ? "Returning to admin…" : "Return to admin"}
+                        </button>
+                    </div>
+                )}
+                <div className="flex-1 flex min-h-0">
+                    <nav
+                        aria-label="Apps"
+                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1"
+                    >
+                        <img src={iconSrc} width="96" height="96" alt="" className="mb-3" />
+                        {APPS.map(({ id, href, label, icon: Icon }) => (
+                            <a
+                                key={id}
+                                href={href}
+                                aria-label={label}
+                                aria-current={id === active ? "page" : undefined}
+                                title={label}
+                                className={[
+                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    id === active
+                                        ? "bg-primary/10 text-primary-dark"
+                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                ].join(" ")}
+                            >
+                                <Icon size={20} aria-hidden="true" />
+                            </a>
+                        ))}
+                    </nav>
+                    <BottomTabBar apps={APPS} active={active} />
+                    <div className="flex-1 flex flex-col min-w-0">
+                        <header className="h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
+                            <span className="font-display font-bold text-lg uppercase tracking-wide">{ACTIVE_LABELS[active]}</span>
+                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} showAdminLink={trusted} showSettingsLink />
+                        </header>
+                        <div className="flex-1 flex min-h-0 pb-14 md:pb-0">{children}</div>
+                    </div>
+                </div>
+                <BrandingFooter branding={branding} />
+            </div>
+            </ComposeProvider>
+        </UnlockPromptProvider>
+    );
+}