@rapidmx/web-client 0.2.0

package/dist/apps/www/settings/read-receipts/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+export default function SettingsReadReceiptsPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "read-receipts", children: _jsx(ReadReceiptsContent, {}) }));
+}
+function ReadReceiptsContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const [alwaysRequestReceiptInternal, setAlwaysRequestReceiptInternal] = useState(mailbox.alwaysRequestReceiptInternal ?? true);
+    const [alwaysRequestReceiptExternal, setAlwaysRequestReceiptExternal] = useState(mailbox.alwaysRequestReceiptExternal ?? false);
+    const [autoSendReceiptsInternal, setAutoSendReceiptsInternal] = useState(mailbox.autoSendReceiptsInternal ?? true);
+    const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            await updateMailbox({
+                uid: mailbox.uid,
+                version: mailbox.version,
+                alwaysRequestReceiptInternal,
+                alwaysRequestReceiptExternal,
+                autoSendReceiptsInternal,
+                autoSendReceiptsExternal,
+            });
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save read receipt settings.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Read Receipts" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it responds to a receipt requested of it. A per-message \u201CRequest a read receipt\u201D checkbox in Compose always overrides the request-side settings below for that one message." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Request receipts when sending" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptInternal, onChange: (e) => setAlwaysRequestReceiptInternal(e.target.checked) }), "From internal recipients (mail to this organization)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: alwaysRequestReceiptExternal, onChange: (e) => setAlwaysRequestReceiptExternal(e.target.checked) }), "From external recipients"] })] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Respond automatically to requests" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsInternal, onChange: (e) => setAutoSendReceiptsInternal(e.target.checked) }), "From internal senders"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoSendReceiptsExternal, onChange: (e) => setAutoSendReceiptsExternal(e.target.checked) }), "From external senders"] }), _jsx("p", { className: "text-xs text-text-muted", children: "Unchecked means a request from that sender waits in your Inbox for you to send or decline it explicitly." })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
+}

package/dist/apps/www/settings/signatures/[uid].js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getMailSignature, listMailSignatures, updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { clearPreviousDefaults } from "./signatureDefaults.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import RichTextEditor from "../../../shared/components/mail/compose/RichTextEditor.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";
+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";
+/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are — see
+ * `settings/signatures/new/index.tsx`'s identical stub for the full reasoning. */
+async function handleUploadImage() {
+    return null;
+}
+export default function SignatureDetailPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "signatures", children: _jsx(SignatureDetailContent, { uid: props.params.uid }) }));
+}
+function SignatureDetailContent({ uid }) {
+    const { mailboxUid } = useSettingsShell();
+    const [original, setOriginal] = useState(null);
+    const [name, setName] = useState("");
+    const [contentHtml, setContentHtml] = useState("");
+    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
+    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMailSignature(uid)
+            .then((loaded) => {
+            setOriginal(loaded);
+            if (loaded) {
+                setName(loaded.name);
+                setContentHtml(loaded.contentHtml);
+                setIsDefaultForNewMessages(loaded.isDefaultForNewMessages);
+                setIsDefaultForReplyForward(loaded.isDefaultForReplyForward);
+            }
+        })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this signature."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+    // Only ever invoked from the form below, which itself only renders once `original` is loaded (the
+    // early returns above cover every other state) — the non-null assertions reflect that real
+    // invariant, matching `MailFilterDetailContent.handleSubmit`'s identical pattern.
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        setSaving(true);
+        setSaved(false);
+        try {
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                const existing = await listMailSignatures(mailboxUid, { limit: 100 });
+                await clearPreviousDefaults(existing, original.uid, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
+            const updated = await updateMailSignature({
+                uid: original.uid,
+                version: original.version,
+                name: name.trim(),
+                contentHtml,
+                isDefaultForNewMessages,
+                isDefaultForReplyForward,
+            });
+            setOriginal(updated);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this signature.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    if (loading) {
+        return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error && !original) {
+        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: error }) }));
+    }
+    if (!original) {
+        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: "Signature not found." }) }));
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("a", { href: `/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All signatures" }), _jsx("h1", { className: "text-lg font-bold tracking-tight mt-1 mb-5", children: original.name }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4", children: [_jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForNewMessages, onChange: (e) => setIsDefaultForNewMessages(e.target.checked) }), "Use for new messages"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForReplyForward, onChange: (e) => setIsDefaultForReplyForward(e.target.checked) }), "Use for replies and forwards"] })] }), _jsx("div", { className: "h-64", children: _jsx(RichTextEditor, { value: contentHtml, onChange: setContentHtml, fill: true, onUploadImage: handleUploadImage }) }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save changes" }) })] })] }) }));
+}

package/dist/apps/www/settings/signatures/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+export default function SettingsSignaturesPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "signatures", children: _jsx(SignaturesContent, {}) }));
+}
+function SignaturesContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [signatures, setSignatures] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listMailSignatures(mailboxUid)
+            .then(setSignatures)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load signatures."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Signatures" }), _jsx("a", { href: `/settings/signatures/new?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New signature" }) })] }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : signatures.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No signatures yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: signatures.map((sig) => (_jsxs("li", { className: "flex items-center justify-between border border-border rounded-md p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold", children: sig.name }), (sig.isDefaultForNewMessages || sig.isDefaultForReplyForward) && (_jsx("div", { className: "text-xs text-text-muted mt-0.5", children: [
+                                            sig.isDefaultForNewMessages && "Default for new messages",
+                                            sig.isDefaultForReplyForward && "Default for replies/forwards",
+                                        ]
+                                            .filter(Boolean)
+                                            .join(" · ") }))] }), _jsx("a", { href: `/settings/signatures/${encodeURIComponent(sig.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-primary-dark hover:underline font-medium text-sm", children: "Edit" })] }, sig.uid))) }))] }) }));
+}

package/dist/apps/www/settings/signatures/new/index.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createMailSignature, listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { clearPreviousDefaults } from "../signatureDefaults.js";
+import SettingsShell, { useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
+import RichTextEditor from "../../../../shared/components/mail/compose/RichTextEditor.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";
+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 default function NewSignaturePage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "signatures", children: _jsx(NewSignatureForm, {}) }));
+}
+/** Signatures aren't backed by a draft/attachment record the way Compose's own inline images are (see
+ * `ComposeWindow.handleUploadImage()`) — inline images in a signature are out of scope for this phase
+ * (`.claude/NOTES.md`'s Phase 12 entry), so this is a real, deliberate no-op, not a stub left unfinished. */
+async function handleUploadImage() {
+    return null;
+}
+function NewSignatureForm() {
+    const { mailboxUid } = useSettingsShell();
+    const [name, setName] = useState("");
+    const [contentHtml, setContentHtml] = useState("");
+    const [isDefaultForNewMessages, setIsDefaultForNewMessages] = useState(false);
+    const [isDefaultForReplyForward, setIsDefaultForReplyForward] = useState(false);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        setSaving(true);
+        try {
+            if (isDefaultForNewMessages || isDefaultForReplyForward) {
+                const existing = await listMailSignatures(mailboxUid, { limit: 100 });
+                await clearPreviousDefaults(existing, undefined, isDefaultForNewMessages, isDefaultForReplyForward);
+            }
+            const created = await createMailSignature({
+                mailboxUid: mailboxUid,
+                name: name.trim(),
+                contentHtml,
+                isDefaultForNewMessages,
+                isDefaultForReplyForward,
+            });
+            window.location.href = `/settings/signatures/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the signature.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-5", children: "New signature" }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6 flex flex-col gap-4", children: [_jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Work signature" }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForNewMessages, onChange: (e) => setIsDefaultForNewMessages(e.target.checked) }), "Use for new messages"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: isDefaultForReplyForward, onChange: (e) => setIsDefaultForReplyForward(e.target.checked) }), "Use for replies and forwards"] })] }), _jsx("div", { className: "h-64", children: _jsx(RichTextEditor, { value: contentHtml, onChange: setContentHtml, fill: true, onUploadImage: handleUploadImage }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create signature" }), _jsx("a", { href: `/settings/signatures?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] })] }) }));
+}

package/dist/apps/www/settings/signatures/signatureDefaults.js

@@ -0,0 +1,30 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { updateMailSignature } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+/**
+ * `MailSignature.isDefaultForNewMessages`/`isDefaultForReplyForward` are each meant to hold on at most
+ * one signature per mailbox — enforced by convention, not a database constraint (see
+ * `mailSignaturesApi.ts`'s own doc comment, quoting restapi's). Before saving a signature with one of
+ * these flags newly turned on, this turns the flag off on whichever *other* signature in `signatures`
+ * currently has it — the "the composing client toggles the previous default off" responsibility that
+ * convention assigns to a caller like the New/Edit signature forms.
+ */
+export async function clearPreviousDefaults(signatures, savingUid, isDefaultForNewMessages, isDefaultForReplyForward) {
+    for (const signature of signatures) {
+        if (signature.uid === savingUid) {
+            continue;
+        }
+        const patch = {};
+        if (isDefaultForNewMessages && signature.isDefaultForNewMessages) {
+            patch.isDefaultForNewMessages = false;
+        }
+        if (isDefaultForReplyForward && signature.isDefaultForReplyForward) {
+            patch.isDefaultForReplyForward = false;
+        }
+        if (Object.keys(patch).length > 0) {
+            await updateMailSignature({ uid: signature.uid, version: signature.version, ...patch });
+        }
+    }
+}

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

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, useState } from "react";
+import { endOfWeek, isAfter, isBefore, isToday, 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";
+import TasksShell, { useTasksShell } from "../../shared/components/tasks/layout/TasksShell.js";
+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";
+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, {}) }));
+}
+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);
+    if (isBefore(due, startOfDay(now))) {
+        return "Overdue";
+    }
+    if (isToday(due)) {
+        return "Today";
+    }
+    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 1 }))) {
+        return "This Week";
+    }
+    return "Later";
+}
+const PRIORITY_LABEL = { low: "Low", normal: "Normal", high: "High" };
+const PRIORITY_CLASS = {
+    low: "text-text-muted",
+    normal: "text-text-muted",
+    high: "text-danger",
+};
+function TasksContent() {
+    const { folderUid, mailboxUid, userUid } = useTasksShell();
+    const [tasks, setTasks] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [title, setTitle] = useState("");
+    const [dueDate, setDueDate] = useState("");
+    const [priority, setPriority] = useState("normal");
+    const [createError, setCreateError] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [view, setView] = useState({ type: "all" });
+    const [viewMode, setViewMode] = useState("list");
+    const [checkedUids, setCheckedUids] = useState(new Set());
+    const [flaggedMessages, setFlaggedMessages] = useState([]);
+    const [flaggedLoading, setFlaggedLoading] = useState(false);
+    const [flaggedError, setFlaggedError] = useState(null);
+    function reload() {
+        if (!folderUid) {
+            setTasks([]);
+            setLoading(false);
+            return Promise.resolve();
+        }
+        setLoading(true);
+        setError(null);
+        return listTasks(folderUid, { limit: 500 })
+            .then(setTasks)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load tasks."))
+            .finally(() => setLoading(false));
+    }
+    useEffect(() => {
+        void reload();
+    }, [folderUid]);
+    useEffect(() => {
+        if (view.type !== "flagged" || !mailboxUid) {
+            return;
+        }
+        setFlaggedLoading(true);
+        setFlaggedError(null);
+        listFlaggedMessages(mailboxUid)
+            .then(setFlaggedMessages)
+            .catch((err) => setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email."))
+            .finally(() => setFlaggedLoading(false));
+    }, [view, mailboxUid]);
+    async function handleCreate(e) {
+        e.preventDefault();
+        setCreateError(null);
+        if (!title.trim()) {
+            setCreateError("A title is required.");
+            return;
+        }
+        if (!mailboxUid || !folderUid) {
+            return;
+        }
+        setCreating(true);
+        try {
+            const created = await createTask({
+                mailboxUid,
+                folderUid,
+                title: title.trim(),
+                dueDate: dueDate ? new Date(dueDate).toISOString() : undefined,
+                priority,
+            });
+            setTasks((prev) => [...prev, created]);
+            setTitle("");
+            setDueDate("");
+            setPriority("normal");
+        }
+        catch (err) {
+            setCreateError(err instanceof ApiRequestError ? err.message : "Could not create this task.");
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    async function handleToggle(task) {
+        setError(null);
+        const nextCompleted = !task.completed;
+        setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
+        try {
+            const updated = await setTaskCompleted(task, nextCompleted);
+            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? updated : t)));
+        }
+        catch (err) {
+            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
+            setError(err instanceof ApiRequestError ? err.message : "Could not update this 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.");
+        }
+    }
+    function handleSelectView(next) {
+        setView(next);
+        setCheckedUids(new Set());
+    }
+    function toggleChecked(uid) {
+        setCheckedUids((prev) => {
+            const next = new Set(prev);
+            if (next.has(uid)) {
+                next.delete(uid);
+            }
+            else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+    const viewFiltered = useMemo(() => {
+        switch (view.type) {
+            case "myDay":
+                return tasks.filter((t) => t.myDay);
+            case "important":
+                return tasks.filter((t) => t.priority === "high");
+            case "planned":
+                return tasks.filter((t) => t.dueDate != null);
+            case "assignedToMe":
+                return tasks.filter((t) => t.assignedTo === userUid);
+            case "list":
+                return tasks.filter((t) => t.taskListUid === view.uid);
+            case "flagged":
+                return [];
+            case "all":
+                return tasks;
+        }
+    }, [tasks, view, userUid]);
+    const checkedTasks = viewFiltered.filter((t) => checkedUids.has(t.uid));
+    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.";
+            }
+        }
+        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.";
+            }
+        }
+        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.";
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+        setError(bulkError);
+    }
+    const grouped = useMemo(() => {
+        const now = new Date();
+        const map = new Map(BUCKET_ORDER.map((b) => [b, []]));
+        for (const task of viewFiltered) {
+            if (task.completed) {
+                continue;
+            }
+            map.get(bucketFor(task, now)).push(task);
+        }
+        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" })] }), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), 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) => {
+                                                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 }))] }))] }))] })] })] }));
+}
+function FlaggedEmailList({ loading, error, messages }) {
+    if (error) {
+        return _jsx(Alert, { children: error });
+    }
+    if (loading) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (messages.length === 0) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "No flagged email." });
+    }
+    return (_jsx("ul", { className: "bg-surface border border-border rounded-md divide-y divide-border", children: messages.map((m) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5 px-3 text-sm", children: [_jsx("span", { className: "flex-1 truncate", children: m.subject || "(no subject)" }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: m.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(m.receivedDate).toLocaleDateString() })] }, m.uid))) }));
+}
+/** A circular completion-toggle control matching Outlook's visual language (not a native checkbox), while
+ * staying a real accessible toggle. */
+function CompletionToggle({ task, onToggle }) {
+    return (_jsx("button", { type: "button", role: "checkbox", "aria-checked": task.completed, "aria-label": `Mark "${task.title}" as ${task.completed ? "not complete" : "complete"}`, onClick: () => onToggle(task), className: [
+            "w-4 h-4 rounded-full border shrink-0 flex items-center justify-center text-[10px]",
+            task.completed ? "bg-primary border-primary text-white" : "border-border text-transparent",
+        ].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))) })] }));
+}
+function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }) {
+    const allChecked = tasks.length > 0 && tasks.every((t) => checkedUids.has(t.uid));
+    function toggleAll() {
+        if (allChecked) {
+            // Every task is already checked when this branch runs (that's what `allChecked` means) — no
+            // per-task guard needed, unlike the `else` branch below where only *some* tasks may be checked.
+            for (const t of tasks) {
+                onToggleChecked(t.uid);
+            }
+        }
+        else {
+            for (const t of tasks) {
+                if (!checkedUids.has(t.uid)) {
+                    onToggleChecked(t.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 ? 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))) })] }) }));
+}