@rapidmx/web-client 0.4.0 → 0.6.0

package/dist/apps/www/tasks/index.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useMemo, useState } from "react";
-import { endOfWeek, isAfter, isBefore, isToday, startOfDay } from "date-fns";
+import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createTask, deleteTask, listTasks, setTaskCompleted, setTaskMyDay, } from "@rapidmx/react-shared/tasks/tasksApi.js";
 import { listFlaggedMessages } from "@rapidmx/react-shared/mail/flaggedMessages.js";
@@ -13,18 +13,29 @@ import TasksSidebar from "../../shared/components/tasks/TasksSidebar.js";
 import TasksToolbar from "../../shared/components/tasks/TasksToolbar.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import { findWellKnownFolderUid } from "../../shared/mail/findWellKnownFolderUid.js";
+import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
+import { LIST_PAGE_SIZE, MAX_LIST_PAGES, listAllPages } from "../../shared/mail/listAllPages.js";
 const INPUT_CLASS = "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 export default function TasksPage(props) {
     return (_jsx(TasksShell, { ...props, children: _jsx(TasksContent, {}) }));
 }
+/**
+ * Parses a task's `dueDate` - `parseISO()` rather than `new Date()`, since `new Date("2026-06-16")` reads a
+ * date-only value as UTC midnight, which is the *previous* local day anywhere west of UTC. A full
+ * timestamp parses identically either way.
+ */
+function parseDueDate(value) {
+    return parseISO(value);
+}
 const BUCKET_ORDER = ["Overdue", "Today", "This Week", "Later", "No due date"];
 /** Buckets a task by its due date relative to `now`, matching the Outlook/To-Do convention this list mirrors. */
 function bucketFor(task, now) {
     if (!task.dueDate) {
         return "No due date";
     }
-    const due = new Date(task.dueDate);
+    const due = parseDueDate(task.dueDate);
     if (isBefore(due, startOfDay(now))) {
         return "Overdue";
     }
@@ -44,6 +55,8 @@ const PRIORITY_CLASS = {
 };
 function TasksContent() {
     const { folderUid, mailboxUid, userUid, mailboxes } = useTasksShell();
+    // The quick-add form's Mailbox choices - view-only shares are left out (see writableMailboxes.ts).
+    const writableMailboxes = useWritableMailboxes(mailboxes, userUid, mailboxUid);
     // The quick-add form's chosen mailbox - `undefined` means "the mailbox being viewed".
     const [targetMailboxUid, setTargetMailboxUid] = useState(undefined);
     // Set after a task is added to a different mailbox than the one this list shows.
@@ -51,6 +64,8 @@ function TasksContent() {
     const [tasks, setTasks] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    // Set when `listAllPages()` stopped at its page cap - the list shown isn't every task.
+    const [truncated, setTruncated] = useState(false);
     const [title, setTitle] = useState("");
     const [dueDate, setDueDate] = useState("");
     const [priority, setPriority] = useState("normal");
@@ -62,16 +77,23 @@ function TasksContent() {
     const [flaggedMessages, setFlaggedMessages] = useState([]);
     const [flaggedLoading, setFlaggedLoading] = useState(false);
     const [flaggedError, setFlaggedError] = useState(null);
+    // What the delete confirmation dialog is asking about - one task (a row's delete button), or every
+    // checked task (the toolbar's Delete).
+    const [pendingDelete, setPendingDelete] = useState(null);
     function reload() {
         if (!folderUid) {
             setTasks([]);
+            setTruncated(false);
             setLoading(false);
             return Promise.resolve();
         }
         setLoading(true);
         setError(null);
-        return listTasks(folderUid, { limit: 500 })
-            .then(setTasks)
+        return listAllPages((page) => listTasks(folderUid, { limit: LIST_PAGE_SIZE, page }))
+            .then((result) => {
+            setTasks(result.items);
+            setTruncated(result.truncated);
+        })
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load tasks."))
             .finally(() => setLoading(false));
     }
@@ -115,7 +137,8 @@ function TasksContent() {
                 mailboxUid: target,
                 folderUid: targetFolderUid,
                 title: title.trim(),
-                dueDate: dueDate ? new Date(dueDate).toISOString() : undefined,
+                // The date input's "yyyy-MM-dd" is the user's *local* day - see `parseDueDate()`.
+                dueDate: dueDate ? parseDueDate(dueDate).toISOString() : undefined,
                 priority,
             });
             if (target === mailboxUid) {
@@ -237,6 +260,19 @@ function TasksContent() {
         await reload();
         setError(bulkError);
     }
+    function requestDelete(task) {
+        setPendingDelete({ type: "single", task });
+    }
+    function handleConfirmDelete() {
+        const pending = pendingDelete;
+        setPendingDelete(null);
+        if (pending.type === "single") {
+            void handleDelete(pending.task);
+        }
+        else {
+            void handleBulkDelete();
+        }
+    }
     const grouped = useMemo(() => {
         const now = new Date();
         const map = new Map(BUCKET_ORDER.map((b) => [b, []]));
@@ -249,13 +285,17 @@ function TasksContent() {
         return map;
     }, [viewFiltered]);
     const completedTasks = viewFiltered.filter((t) => t.completed);
-    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: handleBulkDelete, onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { type: "text", "aria-label": "Add a task", className: `${INPUT_CLASS} flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), mailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, value: targetMailboxUid ?? mailboxUid ?? "", onChange: (e) => setTargetMailboxUid(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: handleDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
+    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: () => setPendingDelete({ type: "bulk" }), onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), truncated && view.type !== "flagged" && (_jsxs(Alert, { children: ["This folder has more tasks than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] })), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { type: "text", "aria-label": "Add a task", className: `${INPUT_CLASS} flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), writableMailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, 
+                                                // `writableMailboxes` only has entries once `mailboxUid` has resolved.
+                                                value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
                                                 const items = grouped.get(bucket);
                                                 if (items.length === 0) {
                                                     return null;
                                                 }
-                                                return (_jsx(TaskGroup, { label: bucket, tasks: items, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: handleDelete }, bucket));
-                                            }), completedTasks.length > 0 && (_jsx(TaskGroup, { label: "Completed", tasks: completedTasks, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: handleDelete }))] }))] }))] })] })] }));
+                                                return (_jsx(TaskGroup, { label: bucket, tasks: items, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete }, bucket));
+                                            }), completedTasks.length > 0 && (_jsx(TaskGroup, { label: "Completed", tasks: completedTasks, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete }))] }))] }))] })] }), _jsxs(Modal, { open: pendingDelete !== null, onClose: () => setPendingDelete(null), title: "Delete tasks", children: [_jsx("p", { className: "text-sm mb-5", children: pendingDelete?.type === "single"
+                            ? `Delete "${pendingDelete.task.title}"?`
+                            : `Delete ${checkedTasks.length} selected ${checkedTasks.length === 1 ? "task" : "tasks"}?` }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setPendingDelete(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleConfirmDelete, children: "Delete" })] })] })] }));
 }
 function FlaggedEmailList({ loading, error, messages }) {
     if (error) {
@@ -278,7 +318,7 @@ function CompletionToggle({ task, onToggle }) {
         ].join(" "), children: "\u2713" }));
 }
 function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDelete }) {
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-2", children: label }), _jsx("ul", { className: "bg-surface border border-border rounded-md divide-y divide-border", children: tasks.map((task) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5 px-3", children: [_jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }), _jsx(CompletionToggle, { task: task, onToggle: onToggle }), _jsx("span", { className: ["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), task.priority !== "normal" && (_jsx("span", { className: ["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] })), task.dueDate && (_jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(task.dueDate).toLocaleDateString() })), _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" })] }, task.uid))) })] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-2", children: label }), _jsx("ul", { className: "bg-surface border border-border rounded-md divide-y divide-border", children: tasks.map((task) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5 px-3", children: [_jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }), _jsx(CompletionToggle, { task: task, onToggle: onToggle }), _jsx("span", { className: ["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), task.priority !== "normal" && (_jsx("span", { className: ["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] })), task.dueDate && (_jsx("span", { className: "text-xs text-text-muted shrink-0", children: parseDueDate(task.dueDate).toLocaleDateString() })), _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" })] }, task.uid))) })] }));
 }
 function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }) {
     const allChecked = tasks.length > 0 && tasks.every((t) => checkedUids.has(t.uid));
@@ -298,5 +338,5 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete })
             }
         }
     }
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm bg-surface border border-border rounded-md", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all tasks", checked: allChecked, onChange: toggleAll }) }), _jsx("th", { className: "w-8 px-3 py-2" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Title" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Due Date" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Importance" }), _jsx("th", { className: "w-8 px-3 py-2" })] }) }), _jsx("tbody", { children: tasks.map((task) => (_jsxs("tr", { className: "border-b border-border last:border-0", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(CompletionToggle, { task: task, onToggle: onToggle }) }), _jsx("td", { className: ["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), _jsx("td", { className: "px-3 py-2 text-text-muted", children: task.dueDate ? new Date(task.dueDate).toLocaleDateString() : "" }), _jsx("td", { className: ["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] }), _jsx("td", { className: "px-3 py-2", children: _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" }) })] }, task.uid))) })] }) }));
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm bg-surface border border-border rounded-md", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all tasks", checked: allChecked, onChange: toggleAll }) }), _jsx("th", { className: "w-8 px-3 py-2" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Title" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Due Date" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Importance" }), _jsx("th", { className: "w-8 px-3 py-2" })] }) }), _jsx("tbody", { children: tasks.map((task) => (_jsxs("tr", { className: "border-b border-border last:border-0", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(CompletionToggle, { task: task, onToggle: onToggle }) }), _jsx("td", { className: ["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), _jsx("td", { className: "px-3 py-2 text-text-muted", children: task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : "" }), _jsx("td", { className: ["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] }), _jsx("td", { className: "px-3 py-2", children: _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" }) })] }, task.uid))) })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -17,7 +17,7 @@
     "./shared/styles/app.css": "./apps/shared/styles/app.css"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.json && shx mkdir -p dist/apps/shared/styles && shx cp apps/shared/styles/app.css dist/apps/shared/styles/app.css",
+    "build": "rimraf dist && tsc -p tsconfig.json && shx mkdir -p dist/apps/shared/styles && shx cp apps/shared/styles/app.css dist/apps/shared/styles/app.css && node scripts/checkDistReferences.mjs",
     "lint": "eslint ./apps ./test",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch --coverage",
@@ -39,7 +39,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.4.0",
+    "@rapidmx/react-shared": "^0.6.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",

package/apps/shared/components/booking/AvailabilityEditor.tsx

@@ -1,118 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useState } from "react";
-import { BookingAvailabilityWindow } from "@rapidmx/react-shared/booking/bookingApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-
-const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-const INPUT_CLASS =
-    "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-
-function minutesToTimeValue(minutes: number): string {
-    const h = Math.floor(minutes / 60)
-        .toString()
-        .padStart(2, "0");
-    const m = (minutes % 60).toString().padStart(2, "0");
-    return `${h}:${m}`;
-}
-
-function timeValueToMinutes(value: string): number {
-    const [h, m] = value.split(":").map(Number);
-    return h * 60 + m;
-}
-
-export interface AvailabilityEditorProps {
-    value: BookingAvailabilityWindow[];
-    onChange: (value: BookingAvailabilityWindow[]) => void;
-}
-
-/**
- * Adds/removes `BookingType.availability` weekly windows — deliberately does not cover `dateOverrides`
- * (per-date blackouts/exceptions), a separate, less commonly needed escape hatch left for a future pass;
- * `BookingUtils.generateCandidateSlots()` already handles an empty `dateOverrides` array gracefully.
- */
-export default function AvailabilityEditor({ value, onChange }: AvailabilityEditorProps) {
-    const [dayOfWeek, setDayOfWeek] = useState(1);
-    const [startTime, setStartTime] = useState("09:00");
-    const [endTime, setEndTime] = useState("17:00");
-    const [error, setError] = useState<string | null>(null);
-
-    function handleAdd() {
-        const startMinute = timeValueToMinutes(startTime);
-        const endMinute = timeValueToMinutes(endTime);
-        if (startMinute >= endMinute) {
-            setError("Start time must be before end time.");
-            return;
-        }
-        setError(null);
-        onChange([...value, { dayOfWeek, startMinute, endMinute }]);
-    }
-
-    function handleRemove(index: number) {
-        onChange(value.filter((_, i) => i !== index));
-    }
-
-    return (
-        <div className="flex flex-col gap-3">
-            {error && <p className="text-sm text-danger">{error}</p>}
-            {value.length === 0 ? (
-                <p className="text-sm text-text-muted">No availability windows yet — add one below.</p>
-            ) : (
-                <ul className="flex flex-col gap-2">
-                    {value.map((window, index) => (
-                        <li
-                            key={index}
-                            className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm text-sm"
-                        >
-                            <span>
-                                {DAY_LABELS[window.dayOfWeek]} {minutesToTimeValue(window.startMinute)}&ndash;
-                                {minutesToTimeValue(window.endMinute)}
-                            </span>
-                            <button
-                                type="button"
-                                onClick={() => handleRemove(index)}
-                                className="text-sm text-danger hover:underline"
-                            >
-                                Remove
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            )}
-            <div className="flex flex-wrap items-center gap-2">
-                <select
-                    aria-label="Day of week"
-                    value={dayOfWeek}
-                    onChange={(e) => setDayOfWeek(Number(e.target.value))}
-                    className={INPUT_CLASS}
-                >
-                    {DAY_LABELS.map((label, i) => (
-                        <option key={label} value={i}>
-                            {label}
-                        </option>
-                    ))}
-                </select>
-                <input
-                    type="time"
-                    aria-label="Start time"
-                    value={startTime}
-                    onChange={(e) => setStartTime(e.target.value)}
-                    className={INPUT_CLASS}
-                />
-                <span className="text-sm text-text-muted">to</span>
-                <input
-                    type="time"
-                    aria-label="End time"
-                    value={endTime}
-                    onChange={(e) => setEndTime(e.target.value)}
-                    className={INPUT_CLASS}
-                />
-                <Button type="button" variant="secondary" className="!w-auto" onClick={handleAdd}>
-                    Add window
-                </Button>
-            </div>
-        </div>
-    );
-}

package/apps/www/settings/booking-types/[uid].tsx

@@ -1,300 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import {
-    BookingAvailabilityWindow,
-    BookingType,
-    deleteBookingType,
-    getBookingType,
-    updateBookingType,
-} from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import AvailabilityEditor from "../../../shared/components/booking/AvailabilityEditor.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";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-
-const INPUT_CLASS =
-    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-
-export type BookingTypeDetailPageProps = Omit<SettingsShellProps, "active"> & { params: { uid: string } };
-
-export default function BookingTypeDetailPage(props: BookingTypeDetailPageProps) {
-    return (
-        <SettingsShell {...props} active="booking-types">
-            <BookingTypeDetailContent uid={props.params.uid} />
-        </SettingsShell>
-    );
-}
-
-function BookingTypeDetailContent({ uid }: { uid: string }) {
-    const { mailboxUid } = useSettingsShell();
-    const [bookingType, setBookingType] = useState<BookingType | null>(null);
-    const [name, setName] = useState("");
-    const [description, setDescription] = useState("");
-    const [hostDisplayName, setHostDisplayName] = useState("");
-    const [durationMinutes, setDurationMinutes] = useState(30);
-    const [timezone, setTimezone] = useState("");
-    const [availability, setAvailability] = useState<BookingAvailabilityWindow[]>([]);
-    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
-    const [bookingWindowDays, setBookingWindowDays] = useState(30);
-    const [requiresApproval, setRequiresApproval] = useState(false);
-    const [enabled, setEnabled] = useState(true);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const [confirmingDelete, setConfirmingDelete] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [deleteError, setDeleteError] = useState<string | null>(null);
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        getBookingType(uid)
-            .then((bt) => {
-                setBookingType(bt);
-                setName(bt.name);
-                setDescription(bt.description ?? "");
-                setHostDisplayName(bt.hostDisplayName);
-                setDurationMinutes(bt.durationMinutes);
-                setTimezone(bt.timezone);
-                setAvailability(bt.availability);
-                setMinimumNoticeMinutes(bt.minimumNoticeMinutes);
-                setBookingWindowDays(bt.bookingWindowDays);
-                setRequiresApproval(bt.requiresApproval);
-                setEnabled(bt.enabled);
-            })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this booking link."))
-            .finally(() => setLoading(false));
-    }, [uid]);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        setSaving(true);
-        try {
-            const updated = await updateBookingType({
-                uid: bookingType!.uid,
-                version: bookingType!.version,
-                name,
-                description: description.trim() || undefined,
-                hostDisplayName,
-                durationMinutes,
-                timezone,
-                availability,
-                minimumNoticeMinutes,
-                bookingWindowDays,
-                requiresApproval,
-                enabled,
-            });
-            setBookingType(updated);
-            setSaved(true);
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this booking link.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    async function handleCopy(value: string) {
-        try {
-            await navigator.clipboard.writeText(value);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        } catch {
-            // Clipboard access can be denied by the browser — the value is still selectable/copyable by hand.
-        }
-    }
-
-    async function handleDelete() {
-        setDeleting(true);
-        setDeleteError(null);
-        try {
-            await deleteBookingType(bookingType!.uid, bookingType!.version);
-            window.location.href = `/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid!)}`;
-        } catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this booking link.");
-            setDeleting(false);
-        }
-    }
-
-    if (loading) {
-        return <p className="p-6 text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (error || !bookingType) {
-        // `error` is always set whenever `bookingType` is falsy here: the load effect above destructures
-        // every field off the resolved value directly (`bt.name`, `bt.hostDisplayName`, ...), so a
-        // successful-but-empty response throws into `.catch()` — which sets `error` — before this
-        // component ever renders past the `loading` guard above. `!bookingType` alone (with `error` still
-        // `null`) is therefore unreachable, unlike e.g. `messages/[uid].tsx`'s identical-looking check,
-        // which stores its fetched value whole rather than destructuring it.
-        return (
-            <div className="p-6">
-                <Alert>{error!}</Alert>
-            </div>
-        );
-    }
-
-    // `bookingType` only ever becomes non-null via the client-only fetch above, so by the time this line
-    // runs `window` is always defined — the `!bookingType` early return just above covers every real SSR
-    // pass, where `bookingType` is still `null`.
-    const publicUrl = `${window.location.origin}/book/${encodeURIComponent(bookingType.slug)}`;
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-2xl">
-                <div className="flex items-start justify-between gap-4 mb-1">
-                    <div>
-                        <a
-                            href={`/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
-                            className="text-sm text-primary-dark hover:underline"
-                        >
-                            &larr; All booking links
-                        </a>
-                        <h1 className="text-xl font-bold tracking-tight mt-1">{bookingType.name}</h1>
-                    </div>
-                    <Button
-                        type="button"
-                        variant="secondary"
-                        className="!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger"
-                        onClick={() => setConfirmingDelete(true)}
-                    >
-                        Delete
-                    </Button>
-                </div>
-
-                <div className="flex items-center gap-2 mb-5">
-                    <code className="flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap">
-                        {publicUrl}
-                    </code>
-                    <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => handleCopy(publicUrl)}>
-                        {copied ? "Copied" : "Copy"}
-                    </Button>
-                </div>
-
-                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
-
-                <form onSubmit={handleSubmit} className="flex flex-col gap-1">
-                    <label className="flex items-center gap-2 text-sm mb-3">
-                        <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
-                        Enabled (publicly bookable)
-                    </label>
-                    <FormField label="Name" htmlFor="name">
-                        <input id="name" type="text" className={INPUT_CLASS} value={name} onChange={(e) => setName(e.target.value)} />
-                    </FormField>
-                    <FormField label="Description (optional)" htmlFor="description">
-                        <textarea
-                            id="description"
-                            className={INPUT_CLASS}
-                            rows={2}
-                            value={description}
-                            onChange={(e) => setDescription(e.target.value)}
-                        />
-                    </FormField>
-                    <FormField label="Host name shown to visitors" htmlFor="hostDisplayName">
-                        <input
-                            id="hostDisplayName"
-                            type="text"
-                            className={INPUT_CLASS}
-                            value={hostDisplayName}
-                            onChange={(e) => setHostDisplayName(e.target.value)}
-                        />
-                    </FormField>
-                    <div className="grid grid-cols-2 gap-3">
-                        <FormField label="Duration (minutes)" htmlFor="durationMinutes">
-                            <input
-                                id="durationMinutes"
-                                type="number"
-                                min={1}
-                                className={INPUT_CLASS}
-                                value={durationMinutes}
-                                onChange={(e) => setDurationMinutes(Number(e.target.value))}
-                            />
-                        </FormField>
-                        <FormField label="Timezone" htmlFor="timezone">
-                            <input
-                                id="timezone"
-                                type="text"
-                                className={INPUT_CLASS}
-                                value={timezone}
-                                onChange={(e) => setTimezone(e.target.value)}
-                            />
-                        </FormField>
-                    </div>
-                    <div className="grid grid-cols-2 gap-3">
-                        <FormField label="Minimum notice (minutes)" htmlFor="minimumNoticeMinutes">
-                            <input
-                                id="minimumNoticeMinutes"
-                                type="number"
-                                min={0}
-                                className={INPUT_CLASS}
-                                value={minimumNoticeMinutes}
-                                onChange={(e) => setMinimumNoticeMinutes(Number(e.target.value))}
-                            />
-                        </FormField>
-                        <FormField label="Booking window (days ahead)" htmlFor="bookingWindowDays">
-                            <input
-                                id="bookingWindowDays"
-                                type="number"
-                                min={1}
-                                className={INPUT_CLASS}
-                                value={bookingWindowDays}
-                                onChange={(e) => setBookingWindowDays(Number(e.target.value))}
-                            />
-                        </FormField>
-                    </div>
-                    <label className="flex items-center gap-2 text-sm my-3">
-                        <input type="checkbox" checked={requiresApproval} onChange={(e) => setRequiresApproval(e.target.checked)} />
-                        Require my approval before confirming a booking
-                    </label>
-
-                    <div className="mb-4">
-                        <span className="block text-sm font-semibold mb-1.5 text-text">Weekly availability</span>
-                        <AvailabilityEditor value={availability} onChange={setAvailability} />
-                    </div>
-
-                    <div>
-                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                            Save
-                        </Button>
-                    </div>
-                </form>
-
-                <Modal open={confirmingDelete} onClose={() => setConfirmingDelete(false)} title="Delete booking link">
-                    <p className="text-sm mb-5">
-                        Are you sure you want to delete <strong>{bookingType.name}</strong>? Its public link will stop
-                        working immediately. This cannot be undone.
-                    </p>
-                    {deleteError && <Alert>{deleteError}</Alert>}
-                    <div className="flex gap-3 justify-end mt-5">
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            className="!w-auto"
-                            disabled={deleting}
-                            onClick={() => setConfirmingDelete(false)}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            type="button"
-                            className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
-                            loading={deleting}
-                            disabled={deleting}
-                            onClick={handleDelete}
-                        >
-                            Delete
-                        </Button>
-                    </div>
-                </Modal>
-            </div>
-        </div>
-    );
-}