@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,211 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell, { AppShellProps } from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+
+export type CalendarShellProps = Omit<AppShellProps, "active">;
+
+export interface CalendarShellContextValue {
+    /** The mailbox currently selected (`?mailboxUid=`, or the caller's first accessible mailbox). */
+    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"). */
+    folderUid?: string;
+    /** Every `calendar`-type folder for the selected mailbox — usually just one, but a mailbox can have
+     * several (see `CalendarListSidebar`). */
+    calendarFolders: Folder[];
+    mailboxes: Mailbox[];
+    /** Re-fetches this mailbox's folders (e.g. after creating a new calendar) without a full mailbox reload. */
+    reloadFolders: () => void;
+}
+
+const CalendarShellContext = createContext<CalendarShellContextValue>({ calendarFolders: [], mailboxes: [], reloadFolders: () => undefined });
+
+/** Reads the mailbox/folder the Calendar is currently showing, as resolved by the enclosing `CalendarShell`. */
+export function useCalendarShell(): CalendarShellContextValue {
+    return useContext(CalendarShellContext);
+}
+
+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.
+ */
+export default function CalendarShell({
+    userUid,
+    authServerUrl,
+    impersonating,
+    impersonationBaseUrl,
+    trusted,
+    children,
+}: PropsWithChildren<CalendarShellProps>) {
+    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 [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+                setMailboxes(result);
+                setStatus("ready");
+            })
+            .catch((err) => {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+                setStatus("error");
+            });
+    }, [userUid]);
+
+    const mailboxUid: string | undefined =
+        (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+
+    const [folderRefreshToken, setFolderRefreshToken] = useState(0);
+
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            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;
+
+    const contextValue = useMemo<CalendarShellContextValue>(
+        () => ({ mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders: () => setFolderRefreshToken((t) => t + 1) }),
+        [mailboxUid, folderUid, calendarFolders, mailboxes],
+    );
+
+    // 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) {
+        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.
+        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" />
+                <SkeletonList count={4} />
+            </div>
+        );
+    } else if (userUid && status === "error") {
+        inner = (
+            <div className="flex-1 flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>{error}</Alert>
+                </div>
+            </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>
+            </>
+        );
+    }
+
+    return (
+        <AppShell
+            active="calendar"
+            userUid={userUid}
+            authServerUrl={authServerUrl}
+            impersonating={impersonating}
+            impersonationBaseUrl={impersonationBaseUrl}
+            trusted={trusted}
+        >
+            {inner}
+        </AppShell>
+    );
+}

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

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
+
+export interface ContactDetailPaneProps {
+    contact: Contact;
+    onEdit: () => void;
+    onDelete: () => void;
+    /** Present only on the mobile detail route — renders a "back to contacts" link above the header. Absent
+     * on the desktop inline pane, which never navigates away (selecting a different contact just swaps
+     * `contact` in place). */
+    backHref?: string;
+}
+
+/**
+ * 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 }: ContactDetailPaneProps) {
+    return (
+        <div role="region" aria-label="Contact details" className="max-w-xl flex flex-col gap-5">
+            {backHref && (
+                <a href={backHref} className="text-sm text-primary-dark hover:underline">
+                    &larr; Back to contacts
+                </a>
+            )}
+            <div className="flex items-start justify-between gap-4">
+                <div className="flex items-center gap-3">
+                    <ContactAvatar displayName={contact.displayName} size={48} />
+                    <div>
+                        <h1 className="text-xl font-bold tracking-tight">{contact.displayName}</h1>
+                        {contact.jobTitle && contact.company && (
+                            <p className="text-sm text-text-muted mt-0.5">
+                                {contact.jobTitle} at {contact.company}
+                            </p>
+                        )}
+                    </div>
+                </div>
+                <div className="flex gap-2 shrink-0">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={onEdit}>
+                        Edit
+                    </Button>
+                    <Button type="button" variant="secondary" className="!w-auto text-danger" onClick={onDelete}>
+                        Delete
+                    </Button>
+                </div>
+            </div>
+
+            <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm">
+                {contact.emails.length > 0 && (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Email</div>
+                        {contact.emails.map((e, i) => (
+                            <div key={i}>
+                                {e.address} <span className="text-text-muted">({e.type})</span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {contact.phones.length > 0 && (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Phone</div>
+                        {contact.phones.map((p, i) => (
+                            <div key={i}>
+                                {p.phoneNumber} <span className="text-text-muted">({p.type})</span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {contact.addresses.length > 0 && (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Address</div>
+                        {contact.addresses.map((a, i) => (
+                            <div key={i}>{[a.street, a.city, a.state, a.postalCode, a.country].filter(Boolean).join(", ")}</div>
+                        ))}
+                    </div>
+                )}
+                {contact.categories && contact.categories.length > 0 && (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Categories</div>
+                        <div>{contact.categories.join(", ")}</div>
+                    </div>
+                )}
+                {contact.notes && (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Notes</div>
+                        <div>{contact.notes}</div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,314 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    Contact,
+    ContactAddressKind,
+    ContactEmail,
+    ContactPhone,
+    ContactPostalAddress,
+    createContact,
+    updateContact,
+} from "@rapidmx/react-shared/contacts/contactsApi.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";
+
+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";
+
+export interface ContactFormProps {
+    contact?: Contact;
+    mailboxUid?: string;
+    folderUid?: string;
+    onSaved: (contact: Contact) => void;
+    onCancel: () => void;
+}
+
+const ADDRESS_KINDS: ContactAddressKind[] = ["home", "work", "other"];
+
+/**
+ * A contact's create/edit form. Shared by the desktop inline pane (`apps/www/contacts/index.tsx`) and the
+ * 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) {
+    const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
+    const [givenName, setGivenName] = useState(contact?.givenName ?? "");
+    const [surname, setSurname] = useState(contact?.surname ?? "");
+    const [company, setCompany] = useState(contact?.company ?? "");
+    const [jobTitle, setJobTitle] = useState(contact?.jobTitle ?? "");
+    const [notes, setNotes] = useState(contact?.notes ?? "");
+    const [favorite, setFavorite] = useState(contact?.favorite ?? false);
+    const [categoriesText, setCategoriesText] = useState((contact?.categories ?? []).join(", "));
+    const [emails, setEmails] = useState<ContactEmail[]>(contact?.emails ?? []);
+    const [phones, setPhones] = useState<ContactPhone[]>(contact?.phones ?? []);
+    const [address, setAddress] = useState<ContactPostalAddress | null>(contact?.addresses[0] ?? null);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    function updateEmail(index: number, patch: Partial<ContactEmail>) {
+        setEmails((prev) => prev.map((e, i) => (i === index ? { ...e, ...patch } : e)));
+    }
+    function removeEmail(index: number) {
+        setEmails((prev) => prev.filter((_, i) => i !== index));
+    }
+    function updatePhone(index: number, patch: Partial<ContactPhone>) {
+        setPhones((prev) => prev.map((p, i) => (i === index ? { ...p, ...patch } : p)));
+    }
+    function removePhone(index: number) {
+        setPhones((prev) => prev.filter((_, i) => i !== index));
+    }
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!displayName.trim()) {
+            setError("A display name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const categories = categoriesText
+                .split(",")
+                .map((c) => c.trim())
+                .filter(Boolean);
+            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,
+                favorite,
+                categories,
+                emails,
+                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 });
+            onSaved(saved);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this contact.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="max-w-xl flex flex-col gap-1">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-3">{contact ? "Edit contact" : "New contact"}</h1>
+
+            {error && <Alert>{error}</Alert>}
+
+            <FormField label="Display name" htmlFor="contact-displayName">
+                <input
+                    id="contact-displayName"
+                    type="text"
+                    className={INPUT_CLASS}
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                />
+            </FormField>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <FormField label="First name" htmlFor="contact-givenName">
+                    <input id="contact-givenName" type="text" className={INPUT_CLASS} value={givenName} onChange={(e) => setGivenName(e.target.value)} />
+                </FormField>
+                <FormField label="Last name" htmlFor="contact-surname">
+                    <input id="contact-surname" type="text" className={INPUT_CLASS} value={surname} onChange={(e) => setSurname(e.target.value)} />
+                </FormField>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <FormField label="Company" htmlFor="contact-company">
+                    <input id="contact-company" type="text" className={INPUT_CLASS} value={company} onChange={(e) => setCompany(e.target.value)} />
+                </FormField>
+                <FormField label="Job title" htmlFor="contact-jobTitle">
+                    <input id="contact-jobTitle" type="text" className={INPUT_CLASS} value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} />
+                </FormField>
+            </div>
+
+            <label className="flex items-center gap-2 text-sm mb-4">
+                <input type="checkbox" checked={favorite} onChange={(e) => setFavorite(e.target.checked)} />
+                Favorite
+            </label>
+
+            <FormField label="Categories (comma-separated)" htmlFor="contact-categories">
+                <input
+                    id="contact-categories"
+                    type="text"
+                    className={INPUT_CLASS}
+                    value={categoriesText}
+                    onChange={(e) => setCategoriesText(e.target.value)}
+                    placeholder="VIP, Work"
+                />
+            </FormField>
+
+            <FormField label="Email" htmlFor="contact-emails">
+                <div id="contact-emails" className="flex flex-col gap-2">
+                    {emails.map((email, i) => (
+                        <div key={i} className="flex gap-2">
+                            <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}`}
+                            />
+                            <select
+                                className={SELECT_CLASS}
+                                value={email.type}
+                                onChange={(e) => updateEmail(i, { type: e.target.value as ContactAddressKind })}
+                                aria-label={`Email type ${i + 1}`}
+                            >
+                                {ADDRESS_KINDS.map((kind) => (
+                                    <option key={kind} value={kind}>
+                                        {kind}
+                                    </option>
+                                ))}
+                            </select>
+                            <button type="button" onClick={() => removeEmail(i)} className="text-sm text-danger px-2" aria-label={`Remove email ${i + 1}`}>
+                                &times;
+                            </button>
+                        </div>
+                    ))}
+                    <button
+                        type="button"
+                        onClick={() => setEmails((prev) => [...prev, { address: "", type: "work" }])}
+                        className="self-start text-xs font-medium text-primary-dark hover:underline"
+                    >
+                        + Add email
+                    </button>
+                </div>
+            </FormField>
+
+            <FormField label="Phone" htmlFor="contact-phones">
+                <div id="contact-phones" className="flex flex-col gap-2">
+                    {phones.map((phone, i) => (
+                        <div key={i} className="flex gap-2">
+                            <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}`}
+                            />
+                            <select
+                                className={SELECT_CLASS}
+                                value={phone.type}
+                                onChange={(e) => updatePhone(i, { type: e.target.value as ContactAddressKind })}
+                                aria-label={`Phone type ${i + 1}`}
+                            >
+                                {ADDRESS_KINDS.map((kind) => (
+                                    <option key={kind} value={kind}>
+                                        {kind}
+                                    </option>
+                                ))}
+                            </select>
+                            <button type="button" onClick={() => removePhone(i)} className="text-sm text-danger px-2" aria-label={`Remove phone ${i + 1}`}>
+                                &times;
+                            </button>
+                        </div>
+                    ))}
+                    <button
+                        type="button"
+                        onClick={() => setPhones((prev) => [...prev, { phoneNumber: "", type: "work" }])}
+                        className="self-start text-xs font-medium text-primary-dark hover:underline"
+                    >
+                        + Add phone
+                    </button>
+                </div>
+            </FormField>
+
+            <FormField label="Address" htmlFor="contact-address">
+                {address ? (
+                    <div className="flex flex-col gap-2">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                            <input
+                                type="text"
+                                placeholder="Street"
+                                className={INPUT_CLASS}
+                                value={address.street ?? ""}
+                                onChange={(e) => setAddress({ ...address, street: e.target.value })}
+                            />
+                            <input
+                                type="text"
+                                placeholder="City"
+                                className={INPUT_CLASS}
+                                value={address.city ?? ""}
+                                onChange={(e) => setAddress({ ...address, city: e.target.value })}
+                            />
+                            <input
+                                type="text"
+                                placeholder="State/Province"
+                                className={INPUT_CLASS}
+                                value={address.state ?? ""}
+                                onChange={(e) => setAddress({ ...address, state: e.target.value })}
+                            />
+                            <input
+                                type="text"
+                                placeholder="Postal code"
+                                className={INPUT_CLASS}
+                                value={address.postalCode ?? ""}
+                                onChange={(e) => setAddress({ ...address, postalCode: e.target.value })}
+                            />
+                            <input
+                                type="text"
+                                placeholder="Country"
+                                className={INPUT_CLASS}
+                                value={address.country ?? ""}
+                                onChange={(e) => setAddress({ ...address, country: e.target.value })}
+                            />
+                            <select
+                                className={SELECT_CLASS}
+                                value={address.type}
+                                onChange={(e) => setAddress({ ...address, type: e.target.value as ContactAddressKind })}
+                                aria-label="Address type"
+                            >
+                                {ADDRESS_KINDS.map((kind) => (
+                                    <option key={kind} value={kind}>
+                                        {kind}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <button type="button" onClick={() => setAddress(null)} className="self-start text-xs font-medium text-danger hover:underline">
+                            Remove address
+                        </button>
+                    </div>
+                ) : (
+                    <button
+                        type="button"
+                        onClick={() => setAddress({ type: "home" })}
+                        className="self-start text-xs font-medium text-primary-dark hover:underline"
+                    >
+                        + Add address
+                    </button>
+                )}
+            </FormField>
+
+            <FormField label="Notes" htmlFor="contact-notes">
+                <textarea id="contact-notes" rows={3} className={INPUT_CLASS} value={notes} onChange={(e) => setNotes(e.target.value)} />
+            </FormField>
+
+            <div className="flex gap-3 mt-2">
+                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                    Save
+                </Button>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={onCancel}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}