@rapidmx/web-client 0.20.0 → 0.22.0

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

@@ -1,144 +1,144 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import { addDays, addMinutes, format, startOfDay } from "date-fns";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import { occursOnDay } from "./allDay.js";
-import { EventAnchor, anchorOf } from "./EventShell.js";
-
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
-const HOURS = Array.from({ length: 24 }, (_, h) => h);
-
-export interface SplitDayColumn {
-    folderUid: string;
-    name: string;
-    color: string;
-}
-
-export interface SplitDayViewProps {
-    day: Date;
-    columns: SplitDayColumn[];
-    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
-     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
-    occurrences: CalendarOccurrence[];
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`; `anchor` is the slot. */
-    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
-}
-
-/**
- * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
- * events across calendars can be compared side by side. A deliberately separate component from
- * `TimeGridView` rather than a generalization of it — it shares that component's visual language
- * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
- * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
- * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
- * click-only (select an event, or click a slot to create one already targeted at that column's
- * calendar) — a practical scope cut, not an oversight.
- */
-export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps) {
-    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
-    const dayStart = startOfDay(day);
-
-    return (
-        <div role="region" aria-label="Split view" data-calendar-scroller className="flex-1 flex flex-col min-h-0 overflow-y-auto">
-            <div className="flex border-b border-border shrink-0">
-                <div className="w-14 shrink-0" />
-                {columns.map((col) => (
-                    <div key={col.folderUid} className="flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border">
-                        <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />
-                        <span className="text-xs font-semibold truncate">{col.name}</span>
-                    </div>
-                ))}
-            </div>
-            <div className="flex flex-1">
-                <div className="w-14 shrink-0">
-                    {HOURS.map((hour) => (
-                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
-                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
-                        </div>
-                    ))}
-                </div>
-                {columns.map((col) => (
-                    <SplitColumn
-                        key={col.folderUid}
-                        column={col}
-                        dayStart={dayStart}
-                        occurrences={dayOccurrences.filter((occ) => occ.folderUid === col.folderUid)}
-                        onSelectEvent={onSelectEvent}
-                        onSelectSlot={onSelectSlot}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-function SplitColumn({
-    column,
-    dayStart,
-    occurrences,
-    onSelectEvent,
-    onSelectSlot,
-}: {
-    column: SplitDayColumn;
-    dayStart: Date;
-    occurrences: CalendarOccurrence[];
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
-}) {
-    return (
-        <div className="flex-1 min-w-0 relative border-l border-border">
-            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return (
-                    <button
-                        key={i}
-                        type="button"
-                        onClick={(e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
-                        style={{ height: HOUR_HEIGHT_PX / 2 }}
-                        className="block w-full border-b border-border/50 text-left"
-                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
-                    />
-                );
-            })}
-            {occurrences.map((occurrence) => {
-                const start = new Date(occurrence.startDate);
-                const end = new Date(occurrence.endDate);
-                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
-                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
-                const dayEnd = addDays(dayStart, 1).getTime();
-                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
-                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
-                const top = ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
-                const isFree = occurrence.busyStatus === "free";
-                return (
-                    <div
-                        key={occurrence.occurrenceKey}
-                        onClick={() => onSelectEvent(occurrence)}
-                        style={{
-                            position: "absolute",
-                            top,
-                            height,
-                            left: 2,
-                            right: 2,
-                            ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
-                        }}
-                        className={[
-                            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
-                            isFree ? "bg-surface-alt text-text-muted" : "",
-                        ].join(" ")}
-                    >
-                        <div className="font-medium truncate">{occurrence.title}</div>
-                        <div className="truncate">{format(start, "h:mma")}</div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
+import { occursOnDay } from "./allDay.js";
+import { EventAnchor, anchorOf } from "./EventShell.js";
+
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+
+export interface SplitDayColumn {
+    folderUid: string;
+    name: string;
+    color: string;
+}
+
+export interface SplitDayViewProps {
+    day: Date;
+    columns: SplitDayColumn[];
+    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
+     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`; `anchor` is the slot. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
+}
+
+/**
+ * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
+ * events across calendars can be compared side by side. A deliberately separate component from
+ * `TimeGridView` rather than a generalization of it — it shares that component's visual language
+ * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
+ * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
+ * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
+ * click-only (select an event, or click a slot to create one already targeted at that column's
+ * calendar) — a practical scope cut, not an oversight.
+ */
+export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps) {
+    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
+    const dayStart = startOfDay(day);
+
+    return (
+        <div role="region" aria-label="Split view" data-calendar-scroller className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+            <div className="flex border-b border-border shrink-0">
+                <div className="w-14 shrink-0" />
+                {columns.map((col) => (
+                    <div key={col.folderUid} className="flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border">
+                        <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />
+                        <span className="text-xs font-semibold truncate">{col.name}</span>
+                    </div>
+                ))}
+            </div>
+            <div className="flex flex-1">
+                <div className="w-14 shrink-0">
+                    {HOURS.map((hour) => (
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
+                        </div>
+                    ))}
+                </div>
+                {columns.map((col) => (
+                    <SplitColumn
+                        key={col.folderUid}
+                        column={col}
+                        dayStart={dayStart}
+                        occurrences={dayOccurrences.filter((occ) => occ.folderUid === col.folderUid)}
+                        onSelectEvent={onSelectEvent}
+                        onSelectSlot={onSelectSlot}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function SplitColumn({
+    column,
+    dayStart,
+    occurrences,
+    onSelectEvent,
+    onSelectSlot,
+}: {
+    column: SplitDayColumn;
+    dayStart: Date;
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
+}) {
+    return (
+        <div className="flex-1 min-w-0 relative border-l border-border">
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        onClick={(e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
+                        style={{ height: HOUR_HEIGHT_PX / 2 }}
+                        className="block w-full border-b border-border/50 text-left"
+                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
+                    />
+                );
+            })}
+            {occurrences.map((occurrence) => {
+                const start = new Date(occurrence.startDate);
+                const end = new Date(occurrence.endDate);
+                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
+                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
+                const dayEnd = addDays(dayStart, 1).getTime();
+                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
+                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
+                const top = ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
+                const height = Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
+                const isFree = occurrence.busyStatus === "free";
+                return (
+                    <div
+                        key={occurrence.occurrenceKey}
+                        onClick={() => onSelectEvent(occurrence)}
+                        style={{
+                            position: "absolute",
+                            top,
+                            height,
+                            left: 2,
+                            right: 2,
+                            ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
+                        }}
+                        className={[
+                            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                            isFree ? "bg-surface-alt text-text-muted" : "",
+                        ].join(" ")}
+                    >
+                        <div className="font-medium truncate">{occurrence.title}</div>
+                        <div className="truncate">{format(start, "h:mma")}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -14,9 +14,10 @@ import {
     HiOutlineSun,
     HiOutlineXMark,
 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { TaskList, TaskPriority, createTask, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { TaskList, TaskPriority, createTask, listTaskLists } from "../../../../lib/tasks/tasksApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { notify } from "../../notifications/store.js";
 import { EventFormController } from "./eventForm.js";
@@ -75,6 +76,7 @@ export interface TaskQuickFormProps {
  */
 export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded, onExpand }: TaskQuickFormProps) {
     const { values } = c;
+    const client = useApiClient();
     const [lists, setLists] = useState<TaskList[]>([]);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -83,7 +85,7 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
     useEffect(() => {
         let cancelled = false;
         setLists([]);
-        void listTaskLists(values.targetMailboxUid)
+        void listTaskLists(values.targetMailboxUid, {}, client)
             .catch((): TaskList[] => [])
             .then((result) => {
                 if (!cancelled) {
@@ -93,7 +95,7 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
         return () => {
             cancelled = true;
         };
-    }, [values.targetMailboxUid]);
+    }, [values.targetMailboxUid, client]);
 
     const mailboxChoices = c.mailboxOptions && c.mailboxOptions.length > 1 ? c.mailboxOptions : undefined;
     // A list of another mailbox that was chosen before the mailbox changed is no longer one.
@@ -114,23 +116,26 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
         setSaving(true);
         try {
             const mailboxUid = values.targetMailboxUid;
-            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks");
+            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks", client);
             if (!folderUid) {
                 setError("That mailbox has no Tasks folder.");
                 return;
             }
-            await createTask({
-                mailboxUid,
-                folderUid,
-                title,
-                body: draft.body.trim() || undefined,
-                // A date-only due date is the local day's midnight, the way the Tasks app writes one.
-                dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
-                priority: draft.priority,
-                reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
-                taskListUid: listUid || undefined,
-                myDay: draft.myDay || undefined,
-            });
+            await createTask(
+                {
+                    mailboxUid,
+                    folderUid,
+                    title,
+                    body: draft.body.trim() || undefined,
+                    // A date-only due date is the local day's midnight, the way the Tasks app writes one.
+                    dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                    priority: draft.priority,
+                    reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
+                    taskListUid: listUid || undefined,
+                    myDay: draft.myDay || undefined,
+                },
+                client,
+            );
             notify({ kind: "success", title: "Task added", message: `“${title}” was added to Tasks.` });
             c.onCancel();
         } catch (err) {