@rapidmx/web-client 0.3.0 → 0.4.0

package/apps/www/calendar/index.tsx

@@ -19,7 +19,6 @@ import {
     startOfWeek,
 } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
 import { CalendarEvent, listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { resolveDragAction } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
@@ -58,10 +57,7 @@ interface ModalState {
 }
 
 function CalendarContent() {
-    const { mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders } = useCalendarShell();
-    // `CalendarShell` only ever renders this component once `mailboxUid` is set, and always to a value
-    // drawn from `mailboxes` itself (see its own resolution logic) — the lookup below always succeeds.
-    const organizerAddress = mailboxes.find((mb) => mb.uid === mailboxUid)!.primarySmtpAddress;
+    const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
     // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
     // scroll gesture on a touch device. `MouseSensor` (a small `distance` — desktop drags still start
     // immediately on a deliberate movement, no change from before) + `TouchSensor` (a `delay`+`tolerance`
@@ -100,8 +96,8 @@ function CalendarContent() {
 
     const checkedFolderUids = checkedFolderUidsState ?? new Set(calendarFolders.map((f) => f.uid));
     const folderColors = useMemo(
-        () => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorForFolder(f)])),
-        [calendarFolders],
+        () => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorFor(f)])),
+        [calendarFolders, colorFor],
     );
 
     function toggleCalendar(toggledUid: string) {
@@ -116,9 +112,8 @@ function CalendarContent() {
         });
     }
 
-    async function handleAddCalendar(name: string, color: string) {
-        // `CalendarContent` only renders once `mailboxUid` is resolved — same invariant as `organizerAddress` above.
-        const created = await createFolder({ mailboxUid: mailboxUid!, name, type: "calendar", color });
+    async function handleAddCalendar(targetMailboxUid: string, name: string, color: string) {
+        const created = await createFolder({ mailboxUid: targetMailboxUid, name, type: "calendar", color });
         setCheckedFolderUidsState((prev) => new Set([...(prev ?? calendarFolders.map((f) => f.uid)), created.uid]));
         reloadFolders();
     }
@@ -198,8 +193,8 @@ function CalendarContent() {
         () =>
             calendarFolders
                 .filter((f) => checkedFolderUids.has(f.uid))
-                .map((f) => ({ folderUid: f.uid, name: f.name, color: colorForFolder(f) })),
-        [calendarFolders, checkedFolderUidsKey],
+                .map((f) => ({ folderUid: f.uid, name: f.name, color: colorFor(f) })),
+        [calendarFolders, checkedFolderUidsKey, colorFor],
     );
 
     function shiftView(direction: 1 | -1) {
@@ -277,14 +272,27 @@ function CalendarContent() {
               ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
               : format(viewDate, "EEEE, MMMM d, yyyy");
 
+    const modalFolderUid = modal ? (modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid) : undefined;
+    const modalMailboxUid = calendarFolders.find((f) => f.uid === modalFolderUid)?.mailboxUid ?? mailboxUid;
+    const modalMailbox = mailboxes.find((mb) => mb.uid === modalMailboxUid);
+    // Mailboxes a new event can be created in - only those with at least one calendar.
+    const mailboxOptions = useMemo(
+        () =>
+            mailboxCalendars
+                .filter((mc) => mc.calendarFolders.length > 0)
+                .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })),
+        [mailboxCalendars],
+    );
+
     const sidebarContent = (
         <>
             <MiniDatePicker selected={viewDate} onSelect={(date) => setViewDate(startOfDay(date))} />
             <CalendarListSidebar
-                calendars={calendarFolders}
+                mailboxCalendars={mailboxCalendars}
                 checkedFolderUids={checkedFolderUids}
                 onToggle={toggleCalendar}
                 onAddCalendar={handleAddCalendar}
+                colorFor={colorFor}
             />
         </>
     );
@@ -383,17 +391,19 @@ function CalendarContent() {
                     </DndContext>
                 )}
 
-                {/* `mailboxUid`/`folderUid` are guaranteed defined whenever `modal` is: `openNewEvent` only sets it
-                    after checking both, and `openEvent` only fires from an occurrence that itself required a
-                    successful, folder-scoped load to render. */}
-                {modal && (
+                {/* `folderUid` is guaranteed defined whenever `modal` is: `openNewEvent` only sets it after
+                    checking it, and `openEvent` only fires from an occurrence that itself required a
+                    successful, folder-scoped load to render. The modal is scoped to that folder's own mailbox
+                    (which may be a shared one) - its organizer address and calendar picker come from there. */}
+                {modal && modalMailbox && (
                     <EventModal
                         open
                         onClose={closeModal}
-                        mailboxUid={mailboxUid!}
-                        folderUid={modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid!}
-                        calendars={calendarFolders.map((f) => ({ uid: f.uid, name: f.name }))}
-                        organizerAddress={organizerAddress}
+                        mailboxUid={modalMailbox.uid}
+                        folderUid={modalFolderUid!}
+                        calendars={calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name }))}
+                        mailboxOptions={mailboxOptions}
+                        organizerAddress={modalMailbox.primarySmtpAddress}
                         occurrence={modal.occurrence}
                         initialStart={modal.initialStart}
                         initialEnd={modal.initialEnd}

package/apps/www/contacts/index.tsx

@@ -53,7 +53,7 @@ function downloadTextFile(filename: string, content: string): void {
 }
 
 function ContactsContent() {
-    const { folderUid, mailboxUid } = useContactsShell();
+    const { folderUid, mailboxUid, mailboxes } = useContactsShell();
     const { openCompose } = useCompose();
     const isMobile = useIsMobile();
     const [contacts, setContacts] = useState<Contact[]>([]);
@@ -69,6 +69,8 @@ function ContactsContent() {
     const [checkedUids, setCheckedUids] = useState<Set<string>>(new Set());
     const [selectedUid, setSelectedUid] = useState<string | null>(null);
     const [mode, setMode] = useState<Mode>("view");
+    // Set after a contact is created in a different mailbox than the one this list shows.
+    const [savedElsewhere, setSavedElsewhere] = useState<{ mailboxUid: string; displayName: string } | null>(null);
 
     /** Returns a promise so bulk actions (below) can wait for the refreshed list before re-asserting their
      * own error message — this always clears `error` first (a legitimate reset for a fresh fetch attempt),
@@ -192,8 +194,15 @@ function ContactsContent() {
     }
 
     function handleSaved(contact: Contact) {
-        setSelectedUid(contact.uid);
         setMode("view");
+        if (contact.mailboxUid !== mailboxUid) {
+            // Created in another mailbox (via the form's Mailbox selector) - it won't be in this list.
+            setSelectedUid(null);
+            setSavedElsewhere({ mailboxUid: contact.mailboxUid, displayName: contact.displayName });
+            return;
+        }
+        setSavedElsewhere(null);
+        setSelectedUid(contact.uid);
         void reload();
     }
 
@@ -237,9 +246,9 @@ function ContactsContent() {
 
     function handleEmail() {
         const addresses = checkedContacts.map((c) => c.emails[0]?.address).filter((a): a is string => Boolean(a));
-        // `ContactsShell` only ever renders this component once `mailboxUid` is resolved (see its own
-        // invariant comment) — same non-null pattern as `organizerAddress` in the calendar page.
-        openCompose({ mailboxUid: mailboxUid!, to: addresses.join(", ") });
+        // No mailboxUid: a fresh message defaults to the caller's own mailbox, not whichever mailbox's
+        // contacts happen to be open - the compose window's From field can still change it.
+        openCompose({ to: addresses.join(", ") });
     }
 
     async function handleToggleFavorite() {
@@ -421,8 +430,26 @@ function ContactsContent() {
                 see handleSelectRow), so this pane only needs to show there for "new", which stays in-place
                 on every device (an unsaved contact has no uid for a route). Always visible on desktop. */}
             <div className={["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" ")}>
+                {savedElsewhere && mode !== "new" && (
+                    <p role="status" className="mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text">
+                        {savedElsewhere.displayName} was added to{" "}
+                        {mailboxes.find((mb) => mb.uid === savedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
+                        <a
+                            href={`/contacts?mailboxUid=${encodeURIComponent(savedElsewhere.mailboxUid)}`}
+                            className="font-medium text-primary-dark hover:underline"
+                        >
+                            View that mailbox&rsquo;s contacts
+                        </a>
+                    </p>
+                )}
                 {mode === "new" && mailboxUid && folderUid ? (
-                    <ContactForm mailboxUid={mailboxUid} folderUid={folderUid} onSaved={handleSaved} onCancel={handleCancel} />
+                    <ContactForm
+                        mailboxUid={mailboxUid}
+                        folderUid={folderUid}
+                        mailboxes={mailboxes}
+                        onSaved={handleSaved}
+                        onCancel={handleCancel}
+                    />
                 ) : mode === "edit" && selected ? (
                     <ContactForm contact={selected} onSaved={handleSaved} onCancel={handleCancel} />
                 ) : selected ? (