@rapidmx/web-client 0.3.0 → 0.4.0

package/apps/shared/components/calendar/CalendarListSidebar.tsx

@@ -3,45 +3,67 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
-import { CALENDAR_COLOR_PALETTE, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
-import { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CALENDAR_COLOR_PALETTE, accentColorForMailbox, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
+import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 
+export interface CalendarListSidebarMailbox {
+    mailbox: Mailbox;
+    calendarFolders: Folder[];
+    error?: string;
+}
+
 export interface CalendarListSidebarProps {
-    /** Every `type === "calendar"` folder for the currently-resolved mailbox. */
-    calendars: Folder[];
+    /** Every accessible mailbox's `calendar`-type folders, grouped per mailbox (see `CalendarShell`). */
+    mailboxCalendars: CalendarListSidebarMailbox[];
     checkedFolderUids: Set<string>;
     onToggle: (folderUid: string) => void;
-    onAddCalendar: (name: string, color: string) => Promise<void>;
+    onAddCalendar: (mailboxUid: string, name: string, color: string) => Promise<void>;
+    /** A calendar's display color - defaults to its own `color` (see `CalendarShell`'s `colorFor`). */
+    colorFor?: (folder: Folder) => string;
 }
 
 /**
- * Calendar's left-sidebar checklist of "My calendars" — one row per `calendar`-type folder, a color
- * swatch matching `colorForFolder`, and a checkbox controlling whether that calendar's events are
- * currently shown (the checked set is owned by `apps/www/calendar/index.tsx`, since it drives which
- * folders get fanned out to on every reload). "+ Add calendar" is a real `createFolder({type:
- * "calendar", ...})` call — see the Phase 4 plan's own note that folder creation has no type
- * restriction server-side, so this needed no new backend route.
+ * Calendar's left-sidebar checklist of calendars — one row per `calendar`-type folder, a color swatch,
+ * and a checkbox controlling whether that calendar's events are currently shown (the checked set is owned
+ * by `apps/www/calendar/index.tsx`, since it drives which folders get fanned out to on every reload).
+ * With one mailbox this is a single "My calendars" list, as before; with several, each mailbox gets its
+ * own section (a shared mailbox labeled as such, with a color-dot accent) and its own "+ Add calendar",
+ * which creates the calendar in that mailbox. "+ Add calendar" is a real `createFolder({type: "calendar",
+ * ...})` call — folder creation has no type restriction server-side, so this needed no new backend route.
  */
-export default function CalendarListSidebar({ calendars, checkedFolderUids, onToggle, onAddCalendar }: CalendarListSidebarProps) {
-    const [adding, setAdding] = useState(false);
+export default function CalendarListSidebar({
+    mailboxCalendars,
+    checkedFolderUids,
+    onToggle,
+    onAddCalendar,
+    colorFor = (folder) => colorForFolder(folder),
+}: CalendarListSidebarProps) {
+    const [addingFor, setAddingFor] = useState<string | null>(null);
     const [name, setName] = useState("");
     const [color, setColor] = useState(CALENDAR_COLOR_PALETTE[0]);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    const multiple = mailboxCalendars.length > 1;
+
+    function startAdding(mailboxUid: string) {
+        setAddingFor(mailboxUid);
+        setName("");
+        setColor(CALENDAR_COLOR_PALETTE[0]);
+    }
 
     async function handleAdd(e: FormEvent) {
         e.preventDefault();
-        if (!name.trim()) {
+        if (!name.trim() || !addingFor) {
             return;
         }
         setError(null);
         setSaving(true);
         try {
-            await onAddCalendar(name.trim(), color);
+            await onAddCalendar(addingFor, name.trim(), color);
             setName("");
             setColor(CALENDAR_COLOR_PALETTE[0]);
-            setAdding(false);
+            setAddingFor(null);
         } catch {
             setError("Could not create this calendar.");
         } finally {
@@ -49,71 +71,93 @@ export default function CalendarListSidebar({ calendars, checkedFolderUids, onTo
         }
     }
 
-    return (
-        <nav aria-label="My calendars" className="p-3 border-t border-border">
-            <div className="flex items-center justify-between mb-1">
-                <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted">My calendars</h2>
-                <button
-                    type="button"
-                    onClick={() => setAdding(true)}
-                    aria-label="Add calendar"
-                    className="text-xs font-bold text-primary-dark hover:underline"
-                >
-                    +
-                </button>
-            </div>
-            {error && (
-                <div className="mb-1">
-                    <Alert>{error}</Alert>
-                </div>
-            )}
-            <div className="flex flex-col gap-0.5">
-                {calendars.map((folder) => (
-                    <label key={folder.uid} className="flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer">
-                        <input
-                            type="checkbox"
-                            checked={checkedFolderUids.has(folder.uid)}
-                            onChange={() => onToggle(folder.uid)}
-                            style={{ accentColor: colorForFolder(folder) }}
-                        />
-                        <span aria-hidden="true" className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: colorForFolder(folder) }} />
-                        <span className="truncate">{folder.name}</span>
-                    </label>
+    const addForm = (
+        <form onSubmit={handleAdd} className="flex flex-col gap-1.5 mt-2">
+            <input
+                type="text"
+                autoFocus
+                aria-label="New calendar name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="text-xs py-1 px-1.5 border border-border rounded-sm bg-surface"
+            />
+            <div className="flex items-center gap-1" role="radiogroup" aria-label="Calendar color">
+                {CALENDAR_COLOR_PALETTE.map((swatch) => (
+                    <button
+                        key={swatch}
+                        type="button"
+                        aria-label={`Color ${swatch}`}
+                        aria-pressed={color === swatch}
+                        onClick={() => setColor(swatch)}
+                        className={["w-4 h-4 rounded-full shrink-0", color === swatch ? "ring-2 ring-offset-1 ring-text" : ""].join(" ")}
+                        style={{ backgroundColor: swatch }}
+                    />
                 ))}
             </div>
-            {adding && (
-                <form onSubmit={handleAdd} className="flex flex-col gap-1.5 mt-2">
-                    <input
-                        type="text"
-                        autoFocus
-                        aria-label="New calendar name"
-                        value={name}
-                        onChange={(e) => setName(e.target.value)}
-                        className="text-xs py-1 px-1.5 border border-border rounded-sm bg-surface"
-                    />
-                    <div className="flex items-center gap-1" role="radiogroup" aria-label="Calendar color">
-                        {CALENDAR_COLOR_PALETTE.map((swatch) => (
+            <div className="flex items-center gap-2">
+                <button type="submit" disabled={saving} className="text-xs font-semibold text-primary-dark">
+                    Add
+                </button>
+                <button type="button" onClick={() => setAddingFor(null)} className="text-xs text-text-muted">
+                    Cancel
+                </button>
+            </div>
+        </form>
+    );
+
+    return (
+        <nav aria-label="My calendars" className="p-3 border-t border-border flex flex-col gap-3">
+            {error && <Alert>{error}</Alert>}
+            {mailboxCalendars.map(({ mailbox, calendarFolders, error: mailboxError }) => {
+                const title = multiple ? `${mailbox.displayName}${mailbox.ownerUserUid ? "" : " (shared)"}` : "My calendars";
+                return (
+                    <div key={mailbox.uid}>
+                        <div className="flex items-center justify-between mb-1 gap-2">
+                            <h2 className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-text-muted min-w-0">
+                                {multiple && (
+                                    <span
+                                        aria-hidden="true"
+                                        className="w-2 h-2 rounded-full shrink-0"
+                                        style={{ backgroundColor: accentColorForMailbox(mailbox.uid) }}
+                                    />
+                                )}
+                                <span className="truncate">{title}</span>
+                            </h2>
                             <button
-                                key={swatch}
                                 type="button"
-                                aria-label={`Color ${swatch}`}
-                                aria-pressed={color === swatch}
-                                onClick={() => setColor(swatch)}
-                                className={["w-4 h-4 rounded-full shrink-0", color === swatch ? "ring-2 ring-offset-1 ring-text" : ""].join(" ")}
-                                style={{ backgroundColor: swatch }}
-                            />
-                        ))}
-                    </div>
-                    <div className="flex items-center gap-2">
-                        <button type="submit" disabled={saving} className="text-xs font-semibold text-primary-dark">
-                            Add
-                        </button>
-                        <button type="button" onClick={() => setAdding(false)} className="text-xs text-text-muted">
-                            Cancel
-                        </button>
+                                onClick={() => startAdding(mailbox.uid)}
+                                aria-label={multiple ? `Add calendar to ${mailbox.displayName}` : "Add calendar"}
+                                className="text-xs font-bold text-primary-dark hover:underline shrink-0"
+                            >
+                                +
+                            </button>
+                        </div>
+                        {mailboxError && (
+                            <div className="mb-1">
+                                <Alert>{mailboxError}</Alert>
+                            </div>
+                        )}
+                        <div className="flex flex-col gap-0.5">
+                            {calendarFolders.map((folder) => (
+                                <label
+                                    key={folder.uid}
+                                    className="flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        checked={checkedFolderUids.has(folder.uid)}
+                                        onChange={() => onToggle(folder.uid)}
+                                        style={{ accentColor: colorFor(folder) }}
+                                    />
+                                    <span aria-hidden="true" className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: colorFor(folder) }} />
+                                    <span className="truncate">{folder.name}</span>
+                                </label>
+                            ))}
+                        </div>
+                        {addingFor === mailbox.uid && addForm}
                     </div>
-                </form>
-            )}
+                );
+            })}
         </nav>
     );
 }

package/apps/shared/components/calendar/EventModal.tsx

@@ -54,6 +54,10 @@ export interface EventModalProps {
      * one calendar exists" — no selector is shown and `folderUid` is used as-is, matching this
      * component's original single-calendar behavior exactly. */
     calendars?: { uid: string; name: string }[];
+    /** Every mailbox a new event could be created in, each with its own calendars. With more than one, a
+     * "Mailbox" selector (create mode only) chooses the mailbox, which in turn drives the Calendar selector
+     * and the organizer address; `mailboxUid`/`folderUid` are the initial selection. */
+    mailboxOptions?: { mailbox: Mailbox; calendars: { uid: string; name: string }[] }[];
     organizerAddress: string;
     /** `null` when creating a new event. */
     occurrence: CalendarOccurrence | null;
@@ -77,6 +81,7 @@ export default function EventModal({
     mailboxUid,
     folderUid,
     calendars,
+    mailboxOptions,
     organizerAddress,
     occurrence,
     initialStart,
@@ -85,6 +90,19 @@ export default function EventModal({
     onDeleted,
 }: EventModalProps) {
     const [targetFolderUid, setTargetFolderUid] = useState(folderUid);
+    const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
+    const targetMailboxOption = mailboxOptions?.find((option) => option.mailbox.uid === targetMailboxUid);
+    // Create mode follows the chosen mailbox; editing an existing event always keeps the passed-in values.
+    const calendarChoices = !occurrence && targetMailboxOption ? targetMailboxOption.calendars : calendars;
+    const effectiveOrganizerAddress = !occurrence && targetMailboxOption ? targetMailboxOption.mailbox.primarySmtpAddress : organizerAddress;
+
+    function handleMailboxChange(nextMailboxUid: string) {
+        setTargetMailboxUid(nextMailboxUid);
+        const firstCalendar = mailboxOptions?.find((option) => option.mailbox.uid === nextMailboxUid)?.calendars[0];
+        if (firstCalendar) {
+            setTargetFolderUid(firstCalendar.uid);
+        }
+    }
     const [title, setTitle] = useState(occurrence?.title ?? "");
     const [location, setLocation] = useState(occurrence?.location ?? "");
     const [start, setStart] = useState(toDatetimeLocal(occurrence?.startDate ?? initialStart?.toISOString() ?? new Date().toISOString()));
@@ -150,7 +168,7 @@ export default function EventModal({
             endDate: new Date(end).toISOString(),
             allDay,
             timezone,
-            organizer: { address: organizerAddress, type: "to" },
+            organizer: { address: effectiveOrganizerAddress, type: "to" },
             attendees,
             recurrenceRule: recurrenceRule ?? undefined,
             reminderMinutesBeforeStart: reminderMinutes.trim() ? Number(reminderMinutes) : undefined,
@@ -162,7 +180,7 @@ export default function EventModal({
         setSaving(true);
         try {
             if (!occurrence) {
-                await createCalendarEvent({ mailboxUid, folderUid: targetFolderUid, ...fields } as CalendarEventInput);
+                await createCalendarEvent({ mailboxUid: targetMailboxUid, folderUid: targetFolderUid, ...fields } as CalendarEventInput);
             } else if (occurrence.isRecurringOccurrence && editScope === "occurrence") {
                 await detachOccurrence(occurrence, fields);
             } else if (occurrence.isRecurringOccurrence) {
@@ -222,7 +240,25 @@ export default function EventModal({
             <form onSubmit={handleSubmit} className="flex flex-col gap-1">
                 {error && <Alert>{error}</Alert>}
 
-                {!occurrence && calendars && calendars.length > 1 && (
+                {!occurrence && mailboxOptions && mailboxOptions.length > 1 && (
+                    <FormField label="Mailbox" htmlFor="event-mailbox">
+                        <select
+                            id="event-mailbox"
+                            className={INPUT_CLASS}
+                            value={targetMailboxUid}
+                            onChange={(e) => handleMailboxChange(e.target.value)}
+                        >
+                            {mailboxOptions.map(({ mailbox }) => (
+                                <option key={mailbox.uid} value={mailbox.uid}>
+                                    {mailbox.displayName}
+                                    {mailbox.ownerUserUid ? "" : " (shared)"}
+                                </option>
+                            ))}
+                        </select>
+                    </FormField>
+                )}
+
+                {!occurrence && calendarChoices && calendarChoices.length > 1 && (
                     <FormField label="Calendar" htmlFor="event-calendar">
                         <select
                             id="event-calendar"
@@ -230,7 +266,7 @@ export default function EventModal({
                             value={targetFolderUid}
                             onChange={(e) => setTargetFolderUid(e.target.value)}
                         >
-                            {calendars.map((cal) => (
+                            {calendarChoices.map((cal) => (
                                 <option key={cal.uid} value={cal.uid}>
                                     {cal.name}
                                 </option>

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;
+        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>
         );
     }