@rapidmx/web-client 0.2.0

package/apps/shared/components/tasks/TasksSidebar.tsx

@@ -0,0 +1,201 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Task, TaskList, createTaskList, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+
+export type TasksView =
+    | { type: "myDay" }
+    | { type: "important" }
+    | { type: "planned" }
+    | { type: "assignedToMe" }
+    | { type: "flagged" }
+    | { type: "all" }
+    | { type: "list"; uid: string; name: string };
+
+export function tasksViewKey(view: TasksView): string {
+    return view.type === "list" ? `list:${view.uid}` : view.type;
+}
+
+export interface TasksSidebarProps {
+    mailboxUid?: string;
+    /** The caller's own (incomplete) tasks — used to compute every smart-filter's count. Deliberately not
+     * fetched again here; the parent already has this loaded for the main list. */
+    tasks: Task[];
+    userUid?: string;
+    active: TasksView;
+    onSelect: (view: TasksView) => void;
+    /** Bumped by the parent to force a contact-list-style re-fetch of task lists (mirrors
+     * `ContactsSidebar`'s identical prop) — not currently used by any caller, kept for parity/future use. */
+    refreshToken?: number;
+}
+
+function NavItem({ label, count, active, onClick }: { label: string; count?: number; active: boolean; onClick: () => void }) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            aria-current={active ? "true" : undefined}
+            className={[
+                "w-full flex items-center justify-between gap-2 text-sm text-left px-2.5 py-1.5 rounded-sm",
+                active ? "bg-primary/10 text-primary-dark font-semibold" : "text-text hover:bg-surface-alt",
+            ].join(" ")}
+        >
+            <span className="truncate">{label}</span>
+            {count !== undefined && <span className="text-xs text-text-muted shrink-0">{count}</span>}
+        </button>
+    );
+}
+
+/**
+ * Tasks' Outlook To-Do-style left sidebar. "My Day"/"Assigned to me" are real persisted fields
+ * (`Task.myDay`/`assignedTo`, from Phase 0); "Important"/"Planned" are pure smart-filters derived from
+ * already-loaded fields (`priority === "high"`/`dueDate != null`) with no backend concept of their own;
+ * "Flagged email" is a `Message` smart-filter (see `flaggedMessages.ts`), not a `Task` one at all — the
+ * page renders it as a distinct list, not the task table. "Tasks" is the flat, unfiltered default. Custom
+ * lists are real `TaskList` records, fetched here (same pattern as `ContactsSidebar`'s contact lists).
+ */
+export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSelect, refreshToken }: TasksSidebarProps) {
+    const [lists, setLists] = useState<TaskList[]>([]);
+    const [listsError, setListsError] = useState<string | null>(null);
+    const [addingList, setAddingList] = useState(false);
+    const [newListName, setNewListName] = useState("");
+    const [drawerOpen, setDrawerOpen] = useState(false);
+
+    useEffect(() => {
+        if (!mailboxUid) {
+            setLists([]);
+            return;
+        }
+        setListsError(null);
+        listTaskLists(mailboxUid, { limit: 200 })
+            .then(setLists)
+            .catch((err) => setListsError(err instanceof ApiRequestError ? err.message : "Could not load task lists."));
+    }, [mailboxUid, refreshToken]);
+
+    const myDayCount = useMemo(() => tasks.filter((t) => t.myDay).length, [tasks]);
+    const importantCount = useMemo(() => tasks.filter((t) => t.priority === "high").length, [tasks]);
+    const plannedCount = useMemo(() => tasks.filter((t) => t.dueDate != null).length, [tasks]);
+    const assignedToMeCount = useMemo(() => tasks.filter((t) => t.assignedTo === userUid).length, [tasks, userUid]);
+    const listCounts = useMemo(() => {
+        const counts = new Map<string, number>();
+        for (const t of tasks) {
+            if (t.taskListUid) {
+                counts.set(t.taskListUid, (counts.get(t.taskListUid) ?? 0) + 1);
+            }
+        }
+        return counts;
+    }, [tasks]);
+
+    async function handleAddList(e: FormEvent) {
+        e.preventDefault();
+        if (!mailboxUid || !newListName.trim()) {
+            return;
+        }
+        try {
+            const created = await createTaskList({ mailboxUid, name: newListName.trim() });
+            setLists((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)));
+            setNewListName("");
+            setAddingList(false);
+        } catch (err) {
+            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+        }
+    }
+
+    function handleSelect(view: TasksView) {
+        onSelect(view);
+        setDrawerOpen(false);
+    }
+
+    // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
+    // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
+    // the `idPrefix`).
+    const navContent = (idPrefix: string) => (
+        <>
+            <div className="flex flex-col gap-0.5">
+                <NavItem label="My Day" count={myDayCount} active={active.type === "myDay"} onClick={() => handleSelect({ type: "myDay" })} />
+                <NavItem
+                    label="Important"
+                    count={importantCount}
+                    active={active.type === "important"}
+                    onClick={() => handleSelect({ type: "important" })}
+                />
+                <NavItem label="Planned" count={plannedCount} active={active.type === "planned"} onClick={() => handleSelect({ type: "planned" })} />
+                <NavItem
+                    label="Assigned to me"
+                    count={assignedToMeCount}
+                    active={active.type === "assignedToMe"}
+                    onClick={() => handleSelect({ type: "assignedToMe" })}
+                />
+                <NavItem label="Flagged email" active={active.type === "flagged"} onClick={() => handleSelect({ type: "flagged" })} />
+            </div>
+
+            <NavItem label="Tasks" count={tasks.length} active={active.type === "all"} onClick={() => handleSelect({ type: "all" })} />
+
+            <div>
+                <div className="flex items-center justify-between px-2.5 mb-1">
+                    <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted">Lists</h2>
+                    <button
+                        type="button"
+                        onClick={() => setAddingList(true)}
+                        aria-label="New list"
+                        className="text-xs font-bold text-primary-dark hover:underline"
+                    >
+                        +
+                    </button>
+                </div>
+                {listsError && <p className="px-2.5 text-xs text-danger">{listsError}</p>}
+                <div className="flex flex-col gap-0.5">
+                    {lists.map((list) => (
+                        <NavItem
+                            key={list.uid}
+                            label={list.name}
+                            count={listCounts.get(list.uid) ?? 0}
+                            active={active.type === "list" && active.uid === list.uid}
+                            onClick={() => handleSelect({ type: "list", uid: list.uid, name: list.name })}
+                        />
+                    ))}
+                </div>
+                {addingList && (
+                    <form onSubmit={handleAddList} className="flex items-center gap-1 px-2.5 mt-1">
+                        <input
+                            type="text"
+                            autoFocus
+                            aria-label="New list name"
+                            id={`${idPrefix}-new-list-name`}
+                            value={newListName}
+                            onChange={(e) => setNewListName(e.target.value)}
+                            className="flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface"
+                        />
+                        <button type="submit" className="text-xs font-semibold text-primary-dark">
+                            Add
+                        </button>
+                    </form>
+                )}
+            </div>
+        </>
+    );
+
+    return (
+        <>
+            <button
+                type="button"
+                className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                aria-label="Open tasks menu"
+                onClick={() => setDrawerOpen(true)}
+            >
+                <HiOutlineBars3 size={20} aria-hidden="true" />
+            </button>
+            <nav aria-label="Tasks" className="hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto">
+                {navContent("desktop")}
+            </nav>
+            <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Tasks">
+                <div className="flex flex-col gap-4">{navContent("mobile")}</div>
+            </Drawer>
+        </>
+    );
+}

package/apps/shared/components/tasks/TasksToolbar.tsx

@@ -0,0 +1,68 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { IconType } from "react-icons";
+import { HiOutlineCheckCircle, HiOutlineListBullet, HiOutlineSun, HiOutlineTableCells, HiOutlineTrash } from "react-icons/hi2";
+
+export type TasksViewMode = "list" | "grid";
+
+export interface TasksToolbarProps {
+    viewMode: TasksViewMode;
+    onViewModeChange: (mode: TasksViewMode) => void;
+    selectedCount: number;
+    onComplete: () => void;
+    onDelete: () => void;
+    onAddToMyDay: () => void;
+}
+
+function ToolbarButton({
+    label,
+    icon: Icon,
+    active,
+    disabled,
+    onClick,
+}: {
+    label: string;
+    icon: IconType;
+    active?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+}) {
+    return (
+        <button
+            type="button"
+            aria-label={label}
+            aria-pressed={active}
+            title={label}
+            disabled={disabled}
+            onClick={onClick}
+            className={[
+                "flex flex-col items-center gap-1 text-xs px-2.5 py-1.5 rounded-sm disabled:opacity-40 disabled:cursor-not-allowed",
+                active ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text",
+            ].join(" ")}
+        >
+            <Icon size={18} aria-hidden="true" />
+            <span>{label}</span>
+        </button>
+    );
+}
+
+/** Tasks' toolbar: a Grid/List view-mode toggle (local, not persisted) plus bulk actions for whatever
+ * rows are checked (Complete, Add to My Day, Delete) — deliberately presentational, matching
+ * `ContactsToolbar`'s convention, since the page owns the actual task data/selection. */
+export default function TasksToolbar({ viewMode, onViewModeChange, selectedCount, onComplete, onDelete, onAddToMyDay }: TasksToolbarProps) {
+    const hasSelection = selectedCount > 0;
+
+    return (
+        <div role="toolbar" aria-label="Tasks actions" className="border-b border-border bg-surface-alt flex items-center gap-0.5 px-2 py-1">
+            <ToolbarButton label="List" icon={HiOutlineListBullet} active={viewMode === "list"} onClick={() => onViewModeChange("list")} />
+            <ToolbarButton label="Grid" icon={HiOutlineTableCells} active={viewMode === "grid"} onClick={() => onViewModeChange("grid")} />
+            <div className="w-px self-stretch my-1 bg-border" aria-hidden="true" />
+            <ToolbarButton label="Complete" icon={HiOutlineCheckCircle} disabled={!hasSelection} onClick={onComplete} />
+            <ToolbarButton label="Add to My Day" icon={HiOutlineSun} disabled={!hasSelection} onClick={onAddToMyDay} />
+            <ToolbarButton label="Delete" icon={HiOutlineTrash} disabled={!hasSelection} onClick={onDelete} />
+        </div>
+    );
+}

package/apps/shared/components/tasks/layout/TasksShell.tsx

@@ -0,0 +1,199 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import AppShell, { AppShellProps } from "../../layout/AppShell.js";
+import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
+
+export type TasksShellProps = Omit<AppShellProps, "active">;
+
+export interface TasksShellContextValue {
+    /** The mailbox currently selected (`?mailboxUid=`, or the caller's first accessible mailbox). */
+    mailboxUid?: string;
+    /** The selected mailbox's single `tasks`-type folder. */
+    folderUid?: string;
+    mailboxes: Mailbox[];
+    /** The caller's own uid — exposed here (rather than only as `AppShell`'s prop) so the page content
+     * can compute "assigned to me" without needing it threaded through separately. */
+    userUid?: string;
+}
+
+const TasksShellContext = createContext<TasksShellContextValue>({ mailboxes: [] });
+
+/** Reads the mailbox/folder Tasks is currently showing, as resolved by the enclosing `TasksShell`. */
+export function useTasksShell(): TasksShellContextValue {
+    return useContext(TasksShellContext);
+}
+
+type Status = "checking" | "error" | "ready";
+
+/**
+ * The Tasks app's shell — structurally identical to `ContactsShell` (a mailbox has exactly one
+ * well-known `tasks` folder, guaranteed to exist by `BaseMailboxRoute.create()`'s eager provisioning
+ * in `@rapidmx/restapi`), just bound to a different folder type. Kept as its own small component
+ * (rather than a single generic "SingleFolderShell" parameterized by type) so each app's sidebar can
+ * grow its own app-specific controls later without threading extra props through a shared one.
+ */
+export default function TasksShell({
+    userUid,
+    authServerUrl,
+    impersonating,
+    impersonationBaseUrl,
+    trusted,
+    children,
+}: PropsWithChildren<TasksShellProps>) {
+    const [status, setStatus] = useState<Status>("checking");
+    const [error, setError] = useState<string | null>(null);
+    const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
+    const [folders, setFolders] = useState<Folder[]>([]);
+    const [folderError, setFolderError] = useState<string | null>(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+
+    useEffect(() => {
+        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
+    }, []);
+
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+                setMailboxes(result);
+                setStatus("ready");
+            })
+            .catch((err) => {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+                setStatus("error");
+            });
+    }, [userUid]);
+
+    const mailboxUid: string | undefined =
+        (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+        mailboxes[0]?.uid;
+
+    useEffect(() => {
+        if (!mailboxUid) {
+            setFolders([]);
+            return;
+        }
+        setFolderError(null);
+        listFolders(mailboxUid)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's tasks folder."));
+    }, [mailboxUid]);
+
+    const folderUid: string | undefined = folders.find((f) => f.type === "tasks")?.uid;
+
+    const contextValue = useMemo<TasksShellContextValue>(
+        () => ({ mailboxUid, folderUid, mailboxes, userUid }),
+        [mailboxUid, folderUid, mailboxes, userUid],
+    );
+
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
+    // for a mailbox-less caller to do here yet, so the icon rail/header don't render at all.
+    if (userUid && status === "ready" && !mailboxUid) {
+        return <MailboxProvisioning />;
+    }
+
+    let inner: ReactNode = null;
+    if (userUid && status === "checking") {
+        // Renders immediately (no network round trip needed) so switching into Tasks never shows a
+        // blank pane while `listMailboxes()` is in flight — the real sidebar (My Day/Important/Planned/
+        // lists) lives in `apps/www/tasks/index.tsx`'s own content, so this mimics its rough shape rather
+        // than the (minimal, mailbox-switcher-only) shape of this shell's own sidebar.
+        inner = (
+            <aside className="w-56 shrink-0 bg-surface border-r border-border flex flex-col p-3 gap-4">
+                <Skeleton height="h-9" />
+                <SkeletonList count={5} />
+            </aside>
+        );
+    } else if (userUid && status === "error") {
+        inner = (
+            <div className="flex-1 flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>{error}</Alert>
+                </div>
+            </div>
+        );
+    } else if (userUid && status === "ready") {
+        // A function, not a plain JSX constant — see MailShell/ContactsShell/CalendarShell's identical
+        // comment: it's rendered twice (desktop `<aside>` + mobile `Drawer`), possibly simultaneously
+        // mounted, so the `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct value per instance.
+        const sidebarContent = (idPrefix: string) => (
+            <>
+                {mailboxes.length > 1 && (
+                    <div>
+                        <label
+                            className="block text-xs font-bold uppercase tracking-wide text-text-muted mb-1"
+                            htmlFor={`${idPrefix}-tasks-mailbox-switcher`}
+                        >
+                            Mailbox
+                        </label>
+                        <select
+                            id={`${idPrefix}-tasks-mailbox-switcher`}
+                            className="w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
+                            value={mailboxUid}
+                            onChange={(e) => {
+                                window.location.href = `/tasks?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }}
+                        >
+                            {mailboxes.map((mb) => (
+                                <option key={mb.uid} value={mb.uid}>
+                                    {mb.displayName}
+                                    {mb.ownerUserUid ? "" : " (shared)"}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+                {folderError && <Alert>{folderError}</Alert>}
+            </>
+        );
+
+        inner = (
+            <>
+                <aside className="hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3">
+                    {sidebarContent("desktop")}
+                </aside>
+                <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Mailbox">
+                    <div className="flex flex-col gap-3">{sidebarContent("mobile")}</div>
+                </Drawer>
+                <main className="flex-1 min-w-0 flex flex-col">
+                    {(mailboxes.length > 1 || folderError) && (
+                        <button
+                            type="button"
+                            className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                            aria-label="Open mailbox switcher"
+                            onClick={() => setDrawerOpen(true)}
+                        >
+                            <HiOutlineBars3 size={20} aria-hidden="true" />
+                        </button>
+                    )}
+                    <TasksShellContext.Provider value={contextValue}>{children}</TasksShellContext.Provider>
+                </main>
+            </>
+        );
+    }
+
+    return (
+        <AppShell
+            active="tasks"
+            userUid={userUid}
+            authServerUrl={authServerUrl}
+            impersonating={impersonating}
+            impersonationBaseUrl={impersonationBaseUrl}
+            trusted={trusted}
+        >
+            {inner}
+        </AppShell>
+    );
+}