@rapidmx/web-client 0.20.0 → 0.22.0

package/apps/www/tasks/index.tsx

@@ -1,654 +1,659 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { pageTitle } from "../../shared/navigation/pageTitle.js";
-import React, { FormEvent, 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 {
-    Task,
-    TaskPriority,
-    createTask,
-    deleteTask,
-    listTasks,
-    setTaskCompleted,
-    setTaskMyDay,
-    updateTask,
-} from "@rapidmx/react-shared/tasks/tasksApi.js";
-import { listFlaggedMessages } from "@rapidmx/react-shared/mail/flaggedMessages.js";
-import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import TasksShell, { TasksShellProps, useTasksShell } from "../../shared/components/tasks/layout/TasksShell.js";
-import TasksSidebar, { TasksView } from "../../shared/components/tasks/TasksSidebar.js";
-import TasksToolbar, { TasksViewMode } 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";
-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";
-
-function TasksPage(props: TasksShellProps) {
-    return (
-        <TasksShell {...props}>
-            <TasksContent />
-        </TasksShell>
-    );
-}
-
-/**
- * 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: string): Date {
-    return parseISO(value);
-}
-
-type Bucket = "Overdue" | "Today" | "This Week" | "Later" | "No due date";
-const BUCKET_ORDER: Bucket[] = ["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: Task, now: Date): Bucket {
-    if (!task.dueDate) {
-        return "No due date";
-    }
-    const due = parseDueDate(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: Record<TaskPriority, string> = { low: "Low", normal: "Normal", high: "High" };
-const PRIORITY_CLASS: Record<TaskPriority, string> = {
-    low: "text-text-muted",
-    normal: "text-text-muted",
-    high: "text-danger",
-};
-
-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<string | undefined>(undefined);
-    // Set after a task is added to a different mailbox than the one this list shows.
-    const [addedElsewhere, setAddedElsewhere] = useState<{ mailboxUid: string; title: string } | null>(null);
-    const [tasks, setTasks] = useState<Task[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(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<TaskPriority>("normal");
-    const [createError, setCreateError] = useState<string | null>(null);
-    const [creating, setCreating] = useState(false);
-    const [view, setView] = useState<TasksView>({ type: "all" });
-    const [viewMode, setViewMode] = useState<TasksViewMode>("list");
-    const [checkedUids, setCheckedUids] = useState<Set<string>>(new Set());
-    const [flaggedMessages, setFlaggedMessages] = useState<Message[]>([]);
-    const [flaggedLoading, setFlaggedLoading] = useState(false);
-    const [flaggedError, setFlaggedError] = useState<string | null>(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<{ type: "single"; task: Task } | { type: "bulk" } | null>(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<HTMLInputElement | null>(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(): Promise<void> {
-        if (!folderUid) {
-            setTasks([]);
-            setTruncated(false);
-            setLoading(false);
-            return Promise.resolve();
-        }
-        setLoading(true);
-        setError(null);
-        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));
-    }
-
-    useEffect(() => {
-        void reload();
-    }, [folderUid]);
-
-    useEffect(() => {
-        setTargetMailboxUid(undefined);
-        setAddedElsewhere(null);
-    }, [mailboxUid]);
-
-    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: FormEvent) {
-        e.preventDefault();
-        setCreateError(null);
-        if (!title.trim()) {
-            setCreateError("A title is required.");
-            return;
-        }
-        if (!mailboxUid || !folderUid) {
-            return;
-        }
-        const target = targetMailboxUid ?? mailboxUid;
-        setCreating(true);
-        try {
-            const targetFolderUid = target === mailboxUid ? folderUid : await findWellKnownFolderUid(target, "tasks");
-            if (!targetFolderUid) {
-                setCreateError("That mailbox has no Tasks folder.");
-                return;
-            }
-            const created = await createTask({
-                mailboxUid: target,
-                folderUid: targetFolderUid,
-                title: title.trim(),
-                // 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) {
-                setAddedElsewhere(null);
-                setTasks((prev) => [...prev, created]);
-            } else {
-                // Created in another mailbox - it doesn't belong in this mailbox's list.
-                setAddedElsewhere({ mailboxUid: target, title: created.title });
-            }
-            setTitle("");
-            setDueDate("");
-            setPriority("normal");
-        } catch (err) {
-            setCreateError(err instanceof ApiRequestError ? err.message : "Could not create this task.");
-        } finally {
-            setCreating(false);
-        }
-    }
-
-    async function handleToggle(task: Task) {
-        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)));
-            notifyApiError(err, "Couldn't update the task");
-        }
-    }
-
-    async function handleDelete(task: Task) {
-        try {
-            await deleteTask(task.uid, task.version);
-            setTasks((prev) => prev.filter((t) => t.uid !== task.uid));
-        } catch (err) {
-            notifyApiError(err, "Couldn't delete the task");
-        }
-    }
-
-    function handleSelectView(next: TasksView) {
-        setView(next);
-        setCheckedUids(new Set());
-    }
-
-    function toggleChecked(uid: string) {
-        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));
-
-    // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
-    async function handleBulkComplete() {
-        for (const task of checkedTasks) {
-            try {
-                await setTaskCompleted(task, true);
-            } catch (err) {
-                notifyApiError(err, "Couldn't update some of the tasks");
-            }
-        }
-        setCheckedUids(new Set());
-        await reload();
-    }
-
-    async function handleBulkAddToMyDay() {
-        for (const task of checkedTasks) {
-            try {
-                await setTaskMyDay(task, true);
-            } catch (err) {
-                notifyApiError(err, "Couldn't update some of the tasks");
-            }
-        }
-        setCheckedUids(new Set());
-        await reload();
-    }
-
-    async function handleBulkDelete() {
-        for (const task of checkedTasks) {
-            try {
-                await deleteTask(task.uid, task.version);
-            } catch (err) {
-                notifyApiError(err, "Couldn't delete some of the tasks");
-            }
-        }
-        setCheckedUids(new Set());
-        await reload();
-    }
-
-    function requestDelete(task: 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, Task[]>(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 (
-        // Below `lg` the tasks menu is a drawer (its button sits above the list), so the list keeps the whole width.
-        <div className="flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row">
-            <TasksSidebar mailboxUid={mailboxUid} tasks={tasks} userUid={userUid} active={view} onSelect={handleSelectView} />
-            <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
-                <TasksToolbar
-                    viewMode={viewMode}
-                    onViewModeChange={setViewMode}
-                    selectedCount={checkedTasks.length}
-                    onComplete={handleBulkComplete}
-                    onDelete={() => setPendingDelete({ type: "bulk" })}
-                    onAddToMyDay={handleBulkAddToMyDay}
-                />
-                <div role="region" aria-label="Tasks list" className="max-w-2xl mx-auto w-full flex flex-col gap-6 p-6">
-                    <h1 className="text-xl font-bold uppercase tracking-wide">Tasks</h1>
-
-                    {error && <Alert>{error}</Alert>}
-                    {truncated && view.type !== "flagged" && (
-                        <Alert>
-                            This folder has more tasks than can be shown at once - only the first {LIST_PAGE_SIZE * MAX_LIST_PAGES} are listed.
-                        </Alert>
-                    )}
-
-                    {view.type === "flagged" ? (
-                        <FlaggedEmailList loading={flaggedLoading} error={flaggedError} messages={flaggedMessages} />
-                    ) : (
-                        <>
-                            <form onSubmit={handleCreate} className="flex flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2">
-                                <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"
-                                />
-                                <input
-                                    type="date"
-                                    aria-label="Due date"
-                                    className={INPUT_CLASS}
-                                    value={dueDate}
-                                    onChange={(e) => setDueDate(e.target.value)}
-                                />
-                                <select
-                                    aria-label="Priority"
-                                    className={INPUT_CLASS}
-                                    value={priority}
-                                    onChange={(e) => setPriority(e.target.value as TaskPriority)}
-                                >
-                                    <option value="low">Low</option>
-                                    <option value="normal">Normal</option>
-                                    <option value="high">High</option>
-                                </select>
-                                {writableMailboxes.length > 1 && (
-                                    <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)}
-                                    >
-                                        {writableMailboxes.map((mb) => (
-                                            <option key={mb.uid} value={mb.uid}>
-                                                {mb.displayName}
-                                                {mb.ownerUserUid === userUid ? "" : " (shared)"}
-                                            </option>
-                                        ))}
-                                    </select>
-                                )}
-                                <Button type="submit" loading={creating} disabled={creating} className="!w-auto shrink-0">
-                                    Add
-                                </Button>
-                            </form>
-                            {createError && <Alert>{createError}</Alert>}
-                            {addedElsewhere && (
-                                <p role="status" className="text-sm py-2 px-3 rounded-sm bg-surface-alt text-text">
-                                    &ldquo;{addedElsewhere.title}&rdquo; was added to{" "}
-                                    {mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
-                                    <a
-                                        href={`/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`}
-                                        data-router-shallow=""
-                                        data-router-prefetch="false"
-                                        className="font-medium text-primary-dark hover:underline"
-                                    >
-                                        View that mailbox&rsquo;s tasks
-                                    </a>
-                                </p>
-                            )}
-
-                            {loading ? (
-                                <p className="text-sm text-text-muted">Loading&hellip;</p>
-                            ) : viewFiltered.length === 0 ? (
-                                <p className="text-sm text-text-muted">No tasks yet.</p>
-                            ) : viewMode === "grid" ? (
-                                <TaskTable
-                                    tasks={viewFiltered}
-                                    checkedUids={checkedUids}
-                                    onToggleChecked={toggleChecked}
-                                    onToggle={handleToggle}
-                                    onDelete={requestDelete}
-                                />
-                            ) : (
-                                <>
-                                    {BUCKET_ORDER.map((bucket) => {
-                                        const items = grouped.get(bucket)!;
-                                        if (items.length === 0) {
-                                            return null;
-                                        }
-                                        return (
-                                            <TaskGroup
-                                                key={bucket}
-                                                label={bucket}
-                                                tasks={items}
-                                                checkedUids={checkedUids}
-                                                onToggleChecked={toggleChecked}
-                                                onToggle={handleToggle}
-                                                onDelete={requestDelete}
-                                            />
-                                        );
-                                    })}
-                                    {completedTasks.length > 0 && (
-                                        <TaskGroup
-                                            label="Completed"
-                                            tasks={completedTasks}
-                                            checkedUids={checkedUids}
-                                            onToggleChecked={toggleChecked}
-                                            onToggle={handleToggle}
-                                            onDelete={requestDelete}
-                                        />
-                                    )}
-                                </>
-                            )}
-                        </>
-                    )}
-                </div>
-            </div>
-            <Modal open={pendingDelete !== null} onClose={() => setPendingDelete(null)} title="Delete tasks">
-                <p className="text-sm mb-5">
-                    {pendingDelete?.type === "single"
-                        ? `Delete "${pendingDelete.task.title}"?`
-                        : `Delete ${checkedTasks.length} selected ${checkedTasks.length === 1 ? "task" : "tasks"}?`}
-                </p>
-                <div className="flex gap-3 justify-end">
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setPendingDelete(null)}>
-                        Cancel
-                    </Button>
-                    <Button type="button" className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger" onClick={handleConfirmDelete}>
-                        Delete
-                    </Button>
-                </div>
-            </Modal>
-        </div>
-    );
-}
-
-function FlaggedEmailList({ loading, error, messages }: { loading: boolean; error: string | null; messages: Message[] }) {
-    if (error) {
-        return <Alert>{error}</Alert>;
-    }
-    if (loading) {
-        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (messages.length === 0) {
-        return <p className="text-sm text-text-muted">No flagged email.</p>;
-    }
-    return (
-        <ul className="bg-surface border border-border rounded-md divide-y divide-border">
-            {messages.map((m) => (
-                <li key={m.uid} className="flex items-center gap-3 py-2.5 px-3 text-sm">
-                    <span className="flex-1 truncate">{m.subject || "(no subject)"}</span>
-                    <span className="text-xs text-text-muted shrink-0">{m.from.address}</span>
-                    <span className="text-xs text-text-muted shrink-0">{new Date(m.receivedDate).toLocaleDateString()}</span>
-                </li>
-            ))}
-        </ul>
-    );
-}
-
-/** A circular completion-toggle control matching Outlook's visual language (not a native checkbox), while
- * staying a real accessible toggle. */
-function CompletionToggle({ task, onToggle }: { task: Task; onToggle: (task: Task) => void }) {
-    return (
-        <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(" ")}
-        >
-            &#10003;
-        </button>
-    );
-}
-
-interface TaskGroupProps {
-    label: string;
-    tasks: Task[];
-    checkedUids: Set<string>;
-    onToggleChecked: (uid: string) => void;
-    onToggle: (task: Task) => void;
-    onDelete: (task: Task) => void;
-}
-
-function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskGroupProps) {
-    return (
-        <div>
-            <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted mb-2">{label}</h2>
-            <ul className="bg-surface border border-border rounded-md divide-y divide-border">
-                {tasks.map((task) => (
-                    <li key={task.uid} className="flex items-center gap-3 py-2.5 px-3">
-                        <input
-                            type="checkbox"
-                            aria-label={`Select ${task.title}`}
-                            checked={checkedUids.has(task.uid)}
-                            onChange={() => onToggleChecked(task.uid)}
-                        />
-                        <CompletionToggle task={task} onToggle={onToggle} />
-                        <span className={["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" ")}>
-                            {task.title}
-                        </span>
-                        {task.priority !== "normal" && (
-                            <span className={["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" ")}>
-                                {PRIORITY_LABEL[task.priority]}
-                            </span>
-                        )}
-                        {task.dueDate && (
-                            <span className="text-xs text-text-muted shrink-0">{parseDueDate(task.dueDate).toLocaleDateString()}</span>
-                        )}
-                        <button
-                            type="button"
-                            onClick={() => onDelete(task)}
-                            aria-label={`Delete "${task.title}"`}
-                            className="text-text-muted hover:text-danger text-sm px-1"
-                        >
-                            &times;
-                        </button>
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-interface TaskTableProps {
-    tasks: Task[];
-    checkedUids: Set<string>;
-    onToggleChecked: (uid: string) => void;
-    onToggle: (task: Task) => void;
-    onDelete: (task: Task) => void;
-}
-
-function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskTableProps) {
-    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 (
-        <div className="overflow-x-auto">
-            <table className="w-full text-sm bg-surface border border-border rounded-md">
-                <thead>
-                    <tr className="border-b border-border text-left">
-                        <th className="w-8 px-3 py-2">
-                            <input type="checkbox" aria-label="Select all tasks" checked={allChecked} onChange={toggleAll} />
-                        </th>
-                        <th className="w-8 px-3 py-2" />
-                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Title</th>
-                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Due Date</th>
-                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Importance</th>
-                        <th className="w-8 px-3 py-2" />
-                    </tr>
-                </thead>
-                <tbody>
-                    {tasks.map((task) => (
-                        <tr key={task.uid} className="border-b border-border last:border-0">
-                            <td className="px-3 py-2">
-                                <input
-                                    type="checkbox"
-                                    aria-label={`Select ${task.title}`}
-                                    checked={checkedUids.has(task.uid)}
-                                    onChange={() => onToggleChecked(task.uid)}
-                                />
-                            </td>
-                            <td className="px-3 py-2">
-                                <CompletionToggle task={task} onToggle={onToggle} />
-                            </td>
-                            <td className={["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" ")}>{task.title}</td>
-                            <td className="px-3 py-2 text-text-muted">{task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : ""}</td>
-                            <td className={["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" ")}>{PRIORITY_LABEL[task.priority]}</td>
-                            <td className="px-3 py-2">
-                                <button
-                                    type="button"
-                                    onClick={() => onDelete(task)}
-                                    aria-label={`Delete "${task.title}"`}
-                                    className="text-text-muted hover:text-danger text-sm px-1"
-                                >
-                                    &times;
-                                </button>
-                            </td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    );
-}
-
-export default TasksPage;
-
-/** The tab's title: `Brand: Tasks` (see `pageTitle()`). */
-export const title = pageTitle("Tasks");
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { pageTitle } from "../../shared/navigation/pageTitle.js";
+import React, { FormEvent, useEffect, useMemo, useRef, useState } from "react";
+import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
+import { ApiRequestError } from "../../../lib/util/api.js";
+import {
+    Task,
+    TaskPriority,
+    createTask,
+    deleteTask,
+    listTasks,
+    setTaskCompleted,
+    setTaskMyDay,
+    updateTask,
+} from "../../../lib/tasks/tasksApi.js";
+import { listFlaggedMessages } from "../../../lib/mail/flaggedMessages.js";
+import { Message } from "../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../lib/util/apiClientContext.js";
+import TasksShell, { TasksShellProps, useTasksShell } from "../../shared/components/tasks/layout/TasksShell.js";
+import TasksSidebar, { TasksView } from "../../shared/components/tasks/TasksSidebar.js";
+import TasksToolbar, { TasksViewMode } from "../../shared/components/tasks/TasksToolbar.js";
+import Alert from "../../../lib/components/feedback/Alert.js";
+import Button from "../../../lib/components/buttons/Button.js";
+import Modal from "../../../lib/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";
+
+function TasksPage(props: TasksShellProps) {
+    return (
+        <TasksShell {...props}>
+            <TasksContent />
+        </TasksShell>
+    );
+}
+
+/**
+ * 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: string): Date {
+    return parseISO(value);
+}
+
+type Bucket = "Overdue" | "Today" | "This Week" | "Later" | "No due date";
+const BUCKET_ORDER: Bucket[] = ["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: Task, now: Date): Bucket {
+    if (!task.dueDate) {
+        return "No due date";
+    }
+    const due = parseDueDate(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: Record<TaskPriority, string> = { low: "Low", normal: "Normal", high: "High" };
+const PRIORITY_CLASS: Record<TaskPriority, string> = {
+    low: "text-text-muted",
+    normal: "text-text-muted",
+    high: "text-danger",
+};
+
+function TasksContent() {
+    const { folderUid, mailboxUid, userUid, mailboxes } = useTasksShell();
+    const client = useApiClient();
+    // 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<string | undefined>(undefined);
+    // Set after a task is added to a different mailbox than the one this list shows.
+    const [addedElsewhere, setAddedElsewhere] = useState<{ mailboxUid: string; title: string } | null>(null);
+    const [tasks, setTasks] = useState<Task[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(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<TaskPriority>("normal");
+    const [createError, setCreateError] = useState<string | null>(null);
+    const [creating, setCreating] = useState(false);
+    const [view, setView] = useState<TasksView>({ type: "all" });
+    const [viewMode, setViewMode] = useState<TasksViewMode>("list");
+    const [checkedUids, setCheckedUids] = useState<Set<string>>(new Set());
+    const [flaggedMessages, setFlaggedMessages] = useState<Message[]>([]);
+    const [flaggedLoading, setFlaggedLoading] = useState(false);
+    const [flaggedError, setFlaggedError] = useState<string | null>(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<{ type: "single"; task: Task } | { type: "bulk" } | null>(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<HTMLInputElement | null>(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(): Promise<void> {
+        if (!folderUid) {
+            setTasks([]);
+            setTruncated(false);
+            setLoading(false);
+            return Promise.resolve();
+        }
+        setLoading(true);
+        setError(null);
+        return listAllPages((page) => listTasks(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then((result) => {
+                setTasks(result.items);
+                setTruncated(result.truncated);
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load tasks."))
+            .finally(() => setLoading(false));
+    }
+
+    useEffect(() => {
+        void reload();
+    }, [folderUid]);
+
+    useEffect(() => {
+        setTargetMailboxUid(undefined);
+        setAddedElsewhere(null);
+    }, [mailboxUid]);
+
+    useEffect(() => {
+        if (view.type !== "flagged" || !mailboxUid) {
+            return;
+        }
+        setFlaggedLoading(true);
+        setFlaggedError(null);
+        listFlaggedMessages(mailboxUid, client)
+            .then(setFlaggedMessages)
+            .catch((err) => setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email."))
+            .finally(() => setFlaggedLoading(false));
+    }, [view, mailboxUid]);
+
+    async function handleCreate(e: FormEvent) {
+        e.preventDefault();
+        setCreateError(null);
+        if (!title.trim()) {
+            setCreateError("A title is required.");
+            return;
+        }
+        if (!mailboxUid || !folderUid) {
+            return;
+        }
+        const target = targetMailboxUid ?? mailboxUid;
+        setCreating(true);
+        try {
+            const targetFolderUid = target === mailboxUid ? folderUid : await findWellKnownFolderUid(target, "tasks", client);
+            if (!targetFolderUid) {
+                setCreateError("That mailbox has no Tasks folder.");
+                return;
+            }
+            const created = await createTask(
+                {
+                    mailboxUid: target,
+                    folderUid: targetFolderUid,
+                    title: title.trim(),
+                    // The date input's "yyyy-MM-dd" is the user's *local* day - see `parseDueDate()`.
+                    dueDate: dueDate ? parseDueDate(dueDate).toISOString() : undefined,
+                    priority,
+                },
+                client,
+            );
+            if (target === mailboxUid) {
+                setAddedElsewhere(null);
+                setTasks((prev) => [...prev, created]);
+            } else {
+                // Created in another mailbox - it doesn't belong in this mailbox's list.
+                setAddedElsewhere({ mailboxUid: target, title: created.title });
+            }
+            setTitle("");
+            setDueDate("");
+            setPriority("normal");
+        } catch (err) {
+            setCreateError(err instanceof ApiRequestError ? err.message : "Could not create this task.");
+        } finally {
+            setCreating(false);
+        }
+    }
+
+    async function handleToggle(task: Task) {
+        const nextCompleted = !task.completed;
+        setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
+        try {
+            const updated = await setTaskCompleted(task, nextCompleted, client);
+            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? updated : t)));
+        } catch (err) {
+            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
+            notifyApiError(err, "Couldn't update the task");
+        }
+    }
+
+    async function handleDelete(task: Task) {
+        try {
+            await deleteTask(task.uid, task.version, client);
+            setTasks((prev) => prev.filter((t) => t.uid !== task.uid));
+        } catch (err) {
+            notifyApiError(err, "Couldn't delete the task");
+        }
+    }
+
+    function handleSelectView(next: TasksView) {
+        setView(next);
+        setCheckedUids(new Set());
+    }
+
+    function toggleChecked(uid: string) {
+        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));
+
+    // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
+    async function handleBulkComplete() {
+        for (const task of checkedTasks) {
+            try {
+                await setTaskCompleted(task, true, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't update some of the tasks");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    }
+
+    async function handleBulkAddToMyDay() {
+        for (const task of checkedTasks) {
+            try {
+                await setTaskMyDay(task, true, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't update some of the tasks");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    }
+
+    async function handleBulkDelete() {
+        for (const task of checkedTasks) {
+            try {
+                await deleteTask(task.uid, task.version, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't delete some of the tasks");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    }
+
+    function requestDelete(task: 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, Task[]>(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 (
+        // Below `lg` the tasks menu is a drawer (its button sits above the list), so the list keeps the whole width.
+        <div className="flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row">
+            <TasksSidebar mailboxUid={mailboxUid} tasks={tasks} userUid={userUid} active={view} onSelect={handleSelectView} />
+            <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
+                <TasksToolbar
+                    viewMode={viewMode}
+                    onViewModeChange={setViewMode}
+                    selectedCount={checkedTasks.length}
+                    onComplete={handleBulkComplete}
+                    onDelete={() => setPendingDelete({ type: "bulk" })}
+                    onAddToMyDay={handleBulkAddToMyDay}
+                />
+                <div role="region" aria-label="Tasks list" className="max-w-2xl mx-auto w-full flex flex-col gap-6 p-6">
+                    <h1 className="text-xl font-bold uppercase tracking-wide">Tasks</h1>
+
+                    {error && <Alert>{error}</Alert>}
+                    {truncated && view.type !== "flagged" && (
+                        <Alert>
+                            This folder has more tasks than can be shown at once - only the first {LIST_PAGE_SIZE * MAX_LIST_PAGES} are listed.
+                        </Alert>
+                    )}
+
+                    {view.type === "flagged" ? (
+                        <FlaggedEmailList loading={flaggedLoading} error={flaggedError} messages={flaggedMessages} />
+                    ) : (
+                        <>
+                            <form onSubmit={handleCreate} className="flex flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2">
+                                <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"
+                                />
+                                <input
+                                    type="date"
+                                    aria-label="Due date"
+                                    className={INPUT_CLASS}
+                                    value={dueDate}
+                                    onChange={(e) => setDueDate(e.target.value)}
+                                />
+                                <select
+                                    aria-label="Priority"
+                                    className={INPUT_CLASS}
+                                    value={priority}
+                                    onChange={(e) => setPriority(e.target.value as TaskPriority)}
+                                >
+                                    <option value="low">Low</option>
+                                    <option value="normal">Normal</option>
+                                    <option value="high">High</option>
+                                </select>
+                                {writableMailboxes.length > 1 && (
+                                    <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)}
+                                    >
+                                        {writableMailboxes.map((mb) => (
+                                            <option key={mb.uid} value={mb.uid}>
+                                                {mb.displayName}
+                                                {mb.ownerUserUid === userUid ? "" : " (shared)"}
+                                            </option>
+                                        ))}
+                                    </select>
+                                )}
+                                <Button type="submit" loading={creating} disabled={creating} className="!w-auto shrink-0">
+                                    Add
+                                </Button>
+                            </form>
+                            {createError && <Alert>{createError}</Alert>}
+                            {addedElsewhere && (
+                                <p role="status" className="text-sm py-2 px-3 rounded-sm bg-surface-alt text-text">
+                                    &ldquo;{addedElsewhere.title}&rdquo; was added to{" "}
+                                    {mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
+                                    <a
+                                        href={`/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`}
+                                        data-router-shallow=""
+                                        data-router-prefetch="false"
+                                        className="font-medium text-primary-dark hover:underline"
+                                    >
+                                        View that mailbox&rsquo;s tasks
+                                    </a>
+                                </p>
+                            )}
+
+                            {loading ? (
+                                <p className="text-sm text-text-muted">Loading&hellip;</p>
+                            ) : viewFiltered.length === 0 ? (
+                                <p className="text-sm text-text-muted">No tasks yet.</p>
+                            ) : viewMode === "grid" ? (
+                                <TaskTable
+                                    tasks={viewFiltered}
+                                    checkedUids={checkedUids}
+                                    onToggleChecked={toggleChecked}
+                                    onToggle={handleToggle}
+                                    onDelete={requestDelete}
+                                />
+                            ) : (
+                                <>
+                                    {BUCKET_ORDER.map((bucket) => {
+                                        const items = grouped.get(bucket)!;
+                                        if (items.length === 0) {
+                                            return null;
+                                        }
+                                        return (
+                                            <TaskGroup
+                                                key={bucket}
+                                                label={bucket}
+                                                tasks={items}
+                                                checkedUids={checkedUids}
+                                                onToggleChecked={toggleChecked}
+                                                onToggle={handleToggle}
+                                                onDelete={requestDelete}
+                                            />
+                                        );
+                                    })}
+                                    {completedTasks.length > 0 && (
+                                        <TaskGroup
+                                            label="Completed"
+                                            tasks={completedTasks}
+                                            checkedUids={checkedUids}
+                                            onToggleChecked={toggleChecked}
+                                            onToggle={handleToggle}
+                                            onDelete={requestDelete}
+                                        />
+                                    )}
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+            <Modal open={pendingDelete !== null} onClose={() => setPendingDelete(null)} title="Delete tasks">
+                <p className="text-sm mb-5">
+                    {pendingDelete?.type === "single"
+                        ? `Delete "${pendingDelete.task.title}"?`
+                        : `Delete ${checkedTasks.length} selected ${checkedTasks.length === 1 ? "task" : "tasks"}?`}
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setPendingDelete(null)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger" onClick={handleConfirmDelete}>
+                        Delete
+                    </Button>
+                </div>
+            </Modal>
+        </div>
+    );
+}
+
+function FlaggedEmailList({ loading, error, messages }: { loading: boolean; error: string | null; messages: Message[] }) {
+    if (error) {
+        return <Alert>{error}</Alert>;
+    }
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (messages.length === 0) {
+        return <p className="text-sm text-text-muted">No flagged email.</p>;
+    }
+    return (
+        <ul className="bg-surface border border-border rounded-md divide-y divide-border">
+            {messages.map((m) => (
+                <li key={m.uid} className="flex items-center gap-3 py-2.5 px-3 text-sm">
+                    <span className="flex-1 truncate">{m.subject || "(no subject)"}</span>
+                    <span className="text-xs text-text-muted shrink-0">{m.from.address}</span>
+                    <span className="text-xs text-text-muted shrink-0">{new Date(m.receivedDate).toLocaleDateString()}</span>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+/** A circular completion-toggle control matching Outlook's visual language (not a native checkbox), while
+ * staying a real accessible toggle. */
+function CompletionToggle({ task, onToggle }: { task: Task; onToggle: (task: Task) => void }) {
+    return (
+        <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(" ")}
+        >
+            &#10003;
+        </button>
+    );
+}
+
+interface TaskGroupProps {
+    label: string;
+    tasks: Task[];
+    checkedUids: Set<string>;
+    onToggleChecked: (uid: string) => void;
+    onToggle: (task: Task) => void;
+    onDelete: (task: Task) => void;
+}
+
+function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskGroupProps) {
+    return (
+        <div>
+            <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted mb-2">{label}</h2>
+            <ul className="bg-surface border border-border rounded-md divide-y divide-border">
+                {tasks.map((task) => (
+                    <li key={task.uid} className="flex items-center gap-3 py-2.5 px-3">
+                        <input
+                            type="checkbox"
+                            aria-label={`Select ${task.title}`}
+                            checked={checkedUids.has(task.uid)}
+                            onChange={() => onToggleChecked(task.uid)}
+                        />
+                        <CompletionToggle task={task} onToggle={onToggle} />
+                        <span className={["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" ")}>
+                            {task.title}
+                        </span>
+                        {task.priority !== "normal" && (
+                            <span className={["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" ")}>
+                                {PRIORITY_LABEL[task.priority]}
+                            </span>
+                        )}
+                        {task.dueDate && (
+                            <span className="text-xs text-text-muted shrink-0">{parseDueDate(task.dueDate).toLocaleDateString()}</span>
+                        )}
+                        <button
+                            type="button"
+                            onClick={() => onDelete(task)}
+                            aria-label={`Delete "${task.title}"`}
+                            className="text-text-muted hover:text-danger text-sm px-1"
+                        >
+                            &times;
+                        </button>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+interface TaskTableProps {
+    tasks: Task[];
+    checkedUids: Set<string>;
+    onToggleChecked: (uid: string) => void;
+    onToggle: (task: Task) => void;
+    onDelete: (task: Task) => void;
+}
+
+function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }: TaskTableProps) {
+    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 (
+        <div className="overflow-x-auto">
+            <table className="w-full text-sm bg-surface border border-border rounded-md">
+                <thead>
+                    <tr className="border-b border-border text-left">
+                        <th className="w-8 px-3 py-2">
+                            <input type="checkbox" aria-label="Select all tasks" checked={allChecked} onChange={toggleAll} />
+                        </th>
+                        <th className="w-8 px-3 py-2" />
+                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Title</th>
+                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Due Date</th>
+                        <th className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted">Importance</th>
+                        <th className="w-8 px-3 py-2" />
+                    </tr>
+                </thead>
+                <tbody>
+                    {tasks.map((task) => (
+                        <tr key={task.uid} className="border-b border-border last:border-0">
+                            <td className="px-3 py-2">
+                                <input
+                                    type="checkbox"
+                                    aria-label={`Select ${task.title}`}
+                                    checked={checkedUids.has(task.uid)}
+                                    onChange={() => onToggleChecked(task.uid)}
+                                />
+                            </td>
+                            <td className="px-3 py-2">
+                                <CompletionToggle task={task} onToggle={onToggle} />
+                            </td>
+                            <td className={["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" ")}>{task.title}</td>
+                            <td className="px-3 py-2 text-text-muted">{task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : ""}</td>
+                            <td className={["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" ")}>{PRIORITY_LABEL[task.priority]}</td>
+                            <td className="px-3 py-2">
+                                <button
+                                    type="button"
+                                    onClick={() => onDelete(task)}
+                                    aria-label={`Delete "${task.title}"`}
+                                    className="text-text-muted hover:text-danger text-sm px-1"
+                                >
+                                    &times;
+                                </button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+export default TasksPage;
+
+/** The tab's title: `Brand: Tasks` (see `pageTitle()`). */
+export const title = pageTitle("Tasks");