@rapidmx/web-client 0.14.1 → 0.15.1

package/apps/www/_routes.ts

@@ -28,6 +28,7 @@ export const wwwRoutes: readonly RouteDefinition[] = [
     { path: "/settings/filters/:uid", active: "settings", load: () => import("./settings/filters/[uid].js") },
     { path: "/settings/labels", active: "settings", load: () => import("./settings/labels/index.js") },
     { path: "/settings/privacy", active: "settings", load: () => import("./settings/privacy/index.js") },
+    { path: "/settings/profile", active: "settings", load: () => import("./settings/profile/index.js") },
     { path: "/settings/read-receipts", active: "settings", load: () => import("./settings/read-receipts/index.js") },
     { path: "/settings/sharing", active: "settings", load: () => import("./settings/sharing/index.js") },
     { path: "/settings/signatures", active: "settings", load: () => import("./settings/signatures/index.js") },

package/apps/www/calendar/index.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { routedPage } from "../_routedPage.js";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3 } from "react-icons/hi2";
 import {
@@ -21,7 +21,9 @@ import {
     startOfWeek,
 } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { CalendarEvent, listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { CalendarEvent, getCalendarEvent, listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { getPushClient } from "@rapidmx/react-shared/mail/pushClient.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { resolveDragAction } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
 import { createFolder } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -31,21 +33,28 @@ import CalendarShell, { CalendarShellProps, useCalendarShell } from "../../share
 import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
 import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import EventModal from "../../shared/components/calendar/EventModal.js";
+import { EventAnchor, anchorOf } from "../../shared/components/calendar/EventShell.js";
 import MiniDatePicker from "@rapidmx/react-shared/components/pickers/MiniDatePicker.js";
 import MonthView from "../../shared/components/calendar/MonthView.js";
 import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
+import { useSwipeSlide } from "../../shared/gestures/useSwipeSlide.js";
+import { useEnterSlide } from "../../shared/gestures/useEnterSlide.js";
+import { useWheelPaging, type WheelEdge } from "../../shared/gestures/useWheelPaging.js";
 import { SHORTCUTS, ShortcutDef } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
+import { redactedEventUidOf } from "../../shared/calendar/calendarLiveUpdates.js";
 
 function CalendarPage(props: CalendarShellProps) {
     return (
         <CalendarShell {...props}>
-            <CalendarContent userUid={props.userUid} />
+            <CalendarContent userUid={props.userUid} bookingHref={bookingSettingsHref(props.pluginNav)} />
         </CalendarShell>
     );
 }
@@ -90,9 +99,13 @@ interface ModalState {
     /** Overrides the default calendar a new event is created into (e.g. the column clicked in Split
      * view) — ignored when editing an existing occurrence, which always keeps its own `folderUid`. */
     targetFolderUid?: string;
+    /** What was clicked to start a new event, for the quick-create popover to open beside (none: centered near the top). */
+    anchor?: EventAnchor;
+    /** A new event that starts as an all-day one (a day of the month view was clicked). */
+    initialAllDay?: boolean;
 }
 
-function CalendarContent({ userUid }: { userUid?: string }) {
+function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHref?: string }) {
     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
@@ -111,6 +124,8 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [modal, setModal] = useState<ModalState | null>(null);
+    // True from the moment a touch drag of an event (or its resize handle) activates until it ends or is cancelled.
+    const [dragging, setDragging] = useState(false);
     // `null` means "not yet customized by the user" — every calendar is treated as checked without
     // needing to be seeded from `calendarFolders` the moment it loads (see `checkedFolderUids` below).
     // Once the user toggles anything, this becomes a real (possibly empty) set of exactly what's checked.
@@ -235,6 +250,39 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
 
+    // A private or confidential event that somebody creates or changes is announced on the push connection as its busy block, whatever the reader may
+    // see (see `redactedEventUidOf()`): that payload is never stored here. The event is fetched again by its uid, which comes back as much as this
+    // reader may see - all of it for the owner - and replaces (or joins) what the calendar holds; one that is gone (a 404) leaves it. A failed fetch
+    // changes nothing: the next load shows the event as it is.
+    const checkedFolderUidsRef = useRef(checkedFolderUids);
+    checkedFolderUidsRef.current = checkedFolderUids;
+    useEffect(
+        () =>
+            getPushClient().onEvent((event) => {
+                const uid = redactedEventUidOf(event);
+                if (!uid) {
+                    return;
+                }
+                void getCalendarEvent(uid).then(
+                    (fresh) => {
+                        if (checkedFolderUidsRef.current.has(fresh.folderUid)) {
+                            setEvents((previous) =>
+                                previous.some((existing) => existing.uid === fresh.uid)
+                                    ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
+                                    : [...previous, fresh],
+                            );
+                        }
+                    },
+                    (err: unknown) => {
+                        if (err instanceof ApiRequestError && err.status === 404) {
+                            setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
+                        }
+                    },
+                );
+            }),
+        [],
+    );
+
     const occurrences = useMemo(
         () => expandAllOccurrences(events, rangeStart, rangeEnd),
         [events, rangeStart, rangeEnd],
@@ -258,6 +306,41 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         );
     }
 
+    // The phone layout's swipe between periods. Only the view area carries it (not the toolbar), it calls the same `shiftView()`
+    // the Previous/Next buttons and shortcuts do, and it is off while an event is being dragged or the editor is open. The views
+    // never scroll sideways (their columns share the width), so there is no horizontal scroller for the gesture to fight with.
+    // The view follows the finger and, once the swipe commits, slides out while the next period slides in (see `useSwipeSlide()`).
+    const isMobile = useIsMobile();
+    const swipe = useSwipeSlide({
+        enabled: isMobile && !dragging && !modal,
+        onShift: (direction) => shiftView(SWIPE_PERIOD_SHIFT[direction]),
+    });
+
+    // The desktop's mouse wheel steps through the months without end; in the views that scroll through the hours of a day it scrolls
+    // them as usual and, pushed past the last (or first) hour, carries on into the next (or previous) day, week or work week. Each
+    // step is the same `shiftView()` and enters with a short vertical slide (`useEnterSlide()`), which never waits for the last one.
+    const wheelSlide = useEnterSlide();
+    /** Where the scroller of the page a wheel step arrived at starts: its top after going on, its bottom after going back. */
+    const arrivalEdge = useRef<WheelEdge | null>(null);
+    const scrollerOf = (): HTMLElement | null => swipe.ref.current?.querySelector<HTMLElement>("[data-calendar-scroller]") ?? null;
+    useWheelPaging(swipe.ref, {
+        enabled: !isMobile && !dragging && !modal,
+        getScroller: () => (view === "month" ? null : scrollerOf()),
+        onStep: (direction, edge) => {
+            arrivalEdge.current = edge;
+            shiftView(direction);
+            wheelSlide.enter(direction);
+        },
+    });
+    useLayoutEffect(() => {
+        const edge = arrivalEdge.current;
+        arrivalEdge.current = null;
+        const scroller = edge ? scrollerOf() : null;
+        if (scroller) {
+            scroller.scrollTop = edge === "top" ? 0 : scroller.scrollHeight;
+        }
+    }, [viewDate]);
+
     function goToday() {
         setViewDate(startOfDay(new Date()));
     }
@@ -267,7 +350,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         setViewDate(startOfDay(date));
     }
 
-    function openNewEvent(start?: Date, end?: Date, targetFolderUid?: string) {
+    function openNewEvent(start?: Date, end?: Date, targetFolderUid?: string, anchor?: EventAnchor, initialAllDay?: boolean) {
         if (!mailboxUid || !folderUid) {
             return;
         }
@@ -276,6 +359,8 @@ function CalendarContent({ userUid }: { userUid?: string }) {
             initialStart: start ?? new Date(),
             initialEnd: end ?? new Date(Date.now() + 30 * 60_000),
             targetFolderUid,
+            anchor,
+            initialAllDay,
         });
     }
 
@@ -312,6 +397,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     }
 
     async function handleDragEnd(event: DragEndEvent) {
+        setDragging(false);
         const overId = event.over ? String(event.over.id) : undefined;
         const action = resolveDragAction(String(event.active.id), overId, occurrences);
         if (!action) {
@@ -380,7 +466,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                     >
                         <HiOutlineBars3 size={20} aria-hidden="true" />
                     </button>
-                    <Button type="button" onClick={() => openNewEvent()} className="!w-auto shrink-0" {...newEventHint}>
+                    <Button type="button" onClick={(e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below"))} className="!w-auto shrink-0" {...newEventHint}>
                         + New event
                     </Button>
                     <div className="flex items-center gap-1">
@@ -408,37 +494,49 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                     </div>
                 )}
 
-                {loading ? (
-                    <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>
-                ) : (
-                    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
-                        {view === "month" ? (
-                            <MonthView
-                                viewDate={viewDate}
-                                occurrences={occurrences}
-                                folderColors={folderColors}
-                                onSelectDay={handleSelectDay}
-                                onSelectEvent={openEvent}
-                            />
-                        ) : view === "split" ? (
-                            <SplitDayView
-                                day={viewDate}
-                                columns={splitColumns}
-                                occurrences={occurrences}
-                                onSelectEvent={openEvent}
-                                onSelectSlot={(start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid)}
-                            />
-                        ) : (
-                            <TimeGridView
-                                days={days}
-                                occurrences={occurrences}
-                                folderColors={folderColors}
-                                onSelectEvent={openEvent}
-                                onSelectSlot={openNewEvent}
-                            />
-                        )}
-                    </DndContext>
-                )}
+                <div ref={swipe.ref} className="flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden" {...swipe.handlers} style={swipe.style}>
+                    <div data-swipe-phase={swipe.phase} className="flex-1 min-w-0 flex flex-col min-h-0" style={swipe.contentStyle}>
+                        <div className="flex-1 min-w-0 flex flex-col min-h-0" style={wheelSlide.style}>
+                            {loading ? (
+                                <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>
+                            ) : (
+                                <DndContext
+                                    sensors={sensors}
+                                    onDragStart={() => setDragging(true)}
+                                    onDragEnd={handleDragEnd}
+                                    onDragCancel={() => setDragging(false)}
+                                >
+                                    {view === "month" ? (
+                                        <MonthView
+                                            viewDate={viewDate}
+                                            occurrences={occurrences}
+                                            folderColors={folderColors}
+                                            onSelectDay={handleSelectDay}
+                                            onSelectEvent={openEvent}
+                                            onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor, true)}
+                                        />
+                                    ) : view === "split" ? (
+                                        <SplitDayView
+                                            day={viewDate}
+                                            columns={splitColumns}
+                                            occurrences={occurrences}
+                                            onSelectEvent={openEvent}
+                                            onSelectSlot={(start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor)}
+                                        />
+                                    ) : (
+                                        <TimeGridView
+                                            days={days}
+                                            occurrences={occurrences}
+                                            folderColors={folderColors}
+                                            onSelectEvent={openEvent}
+                                            onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor)}
+                                        />
+                                    )}
+                                </DndContext>
+                            )}
+                        </div>
+                    </div>
+                </div>
 
                 {/* `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
@@ -452,11 +550,15 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                         folderUid={modalFolderUid!}
                         calendars={calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name }))}
                         mailboxOptions={mailboxOptions}
+                        folderColors={folderColors}
                         organizerAddress={modalMailbox.primarySmtpAddress}
                         organizerAliases={modalMailbox.aliasAddresses}
                         occurrence={modal.occurrence}
                         initialStart={modal.initialStart}
                         initialEnd={modal.initialEnd}
+                        initialAllDay={modal.initialAllDay}
+                        anchor={modal.anchor}
+                        bookingHref={bookingHref}
                         onSaved={handleSaved}
                         onDeleted={handleDeleted}
                     />