@rapidmx/web-client 0.9.0 → 0.11.0

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

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useState } from "react";
+import { routedPage } from "../_routedPage.js";
+import { useEffect, useMemo, useRef, useState } from "react";
 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";
@@ -17,8 +18,12 @@ 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";
+import { SHORTCUTS } 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";
 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) {
+function TasksPage(props) {
     return (_jsx(TasksShell, { ...props, children: _jsx(TasksContent, {}) }));
 }
 /**
@@ -80,6 +85,13 @@ function TasksContent() {
     // 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);
+    // "New task" from the keyboard: a task is made in the quick-add form, so this moves the caret to its title field (which the Flagged view,
+    // a list of flagged mail rather than tasks, doesn't have). A dialog open - the delete confirmation - silences it.
+    const addTaskRef = useRef(null);
+    const canAddTask = view.type !== "flagged";
+    // Registered only while the form is rendered (`canAddTask`), so its field is there.
+    useShortcut(SHORTCUTS.tasks.create, () => addTaskRef.current.focus(), { enabled: canAddTask });
+    const addTaskHint = useShortcutProps("Add a task", SHORTCUTS.tasks.create, canAddTask);
     function reload() {
         if (!folderUid) {
             setTasks([]);
@@ -161,7 +173,6 @@ function TasksContent() {
         }
     }
     async function handleToggle(task) {
-        setError(null);
         const nextCompleted = !task.completed;
         setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
         try {
@@ -170,17 +181,16 @@ function TasksContent() {
         }
         catch (err) {
             setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
-            setError(err instanceof ApiRequestError ? err.message : "Could not update this task.");
+            notifyApiError(err, "Couldn't update the task");
         }
     }
     async function handleDelete(task) {
-        setError(null);
         try {
             await deleteTask(task.uid, task.version);
             setTasks((prev) => prev.filter((t) => t.uid !== task.uid));
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not delete this task.");
+            notifyApiError(err, "Couldn't delete the task");
         }
     }
     function handleSelectView(next) {
@@ -218,47 +228,42 @@ function TasksContent() {
         }
     }, [tasks, view, userUid]);
     const checkedTasks = viewFiltered.filter((t) => checkedUids.has(t.uid));
+    // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
     async function handleBulkComplete() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await setTaskCompleted(task, true);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more tasks.";
+                notifyApiError(err, "Couldn't update some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     async function handleBulkAddToMyDay() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await setTaskMyDay(task, true);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more tasks.";
+                notifyApiError(err, "Couldn't update some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     async function handleBulkDelete() {
-        let bulkError = null;
         for (const task of checkedTasks) {
             try {
                 await deleteTask(task.uid, task.version);
             }
             catch (err) {
-                bulkError = err instanceof ApiRequestError ? err.message : "Could not delete one or more tasks.";
+                notifyApiError(err, "Couldn't delete some of the tasks");
             }
         }
         setCheckedUids(new Set());
         await reload();
-        setError(bulkError);
     }
     function requestDelete(task) {
         setPendingDelete({ type: "single", task });
@@ -285,7 +290,7 @@ 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: () => 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`, 
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row", 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 flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { ref: addTaskRef, type: "text", "aria-label": "Add a task", ...addTaskHint, className: `${INPUT_CLASS} min-w-40 basis-40 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);
@@ -340,3 +345,4 @@ 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 ? 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))) })] }) }));
 }
+export default routedPage("/tasks", TasksPage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -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.9.0",
+    "@rapidmx/react-shared": "^0.11.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",

package/apps/shared/components/mail/compose/SendFailureAlert.tsx

@@ -1,48 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
-
-export interface SendFailureAlertProps {
-    /** The plain, human message - always shown. */
-    message: string;
-    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
-     * With none, only the message is shown. */
-    lines: string[];
-}
-
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }: SendFailureAlertProps) {
-    return (
-        <Alert>
-            <div className="flex-1 min-w-0">
-                <p className="font-semibold break-words">{message}</p>
-                {lines.length > 0 && (
-                    <details className="mt-2">
-                        <summary className="cursor-pointer text-xs font-semibold">Technical details</summary>
-                        <ul
-                            aria-label="Technical details"
-                            className="mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text"
-                        >
-                            {lines.map((line, index) => (
-                                <li key={index} className="whitespace-pre-wrap break-words">
-                                    {line}
-                                </li>
-                            ))}
-                        </ul>
-                        <div className="mt-2">
-                            <CopyButton value={lines.join("\n")} label="Copy technical details" />
-                        </div>
-                    </details>
-                )}
-            </div>
-        </Alert>
-    );
-}

package/dist/apps/shared/components/mail/compose/SendFailureAlert.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-export interface SendFailureAlertProps {
-    /** The plain, human message - always shown. */
-    message: string;
-    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
-     * With none, only the message is shown. */
-    lines: string[];
-}
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }: SendFailureAlertProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/SendFailureAlert.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
-/**
- * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
- * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
- * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
- */
-export default function SendFailureAlert({ message, lines }) {
-    return (_jsx(Alert, { children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-semibold break-words", children: message }), lines.length > 0 && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs font-semibold", children: "Technical details" }), _jsx("ul", { "aria-label": "Technical details", className: "mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text", children: lines.map((line, index) => (_jsx("li", { className: "whitespace-pre-wrap break-words", children: line }, index))) }), _jsx("div", { className: "mt-2", children: _jsx(CopyButton, { value: lines.join("\n"), label: "Copy technical details" }) })] }))] }) }));
-}