@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,83 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useRef } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import { TableKit } from "@tiptap/extension-table";
+import Placeholder from "@tiptap/extension-placeholder";
+import ComposeToolbar from "./ComposeToolbar.js";
+
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    height?: string;
+    /** When true, the editor fills its parent's height via flexbox instead of a fixed `height` — for
+     * embedding inside a flex-column container of variable height (the floating Compose window) where
+     * a literal pixel height can't be computed up front. `height` is ignored when this is set. */
+    fill?: boolean;
+    /** Passed straight through to `ComposeToolbar` — see its own doc comment on this prop. */
+    onUploadImage: (file: File) => Promise<string | null>;
+}
+
+/**
+ * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
+ * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
+ * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
+ * comment).
+ *
+ * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
+ * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
+ * `editor.getHTML()`) through `onChange`.
+ *
+ * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
+ * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
+ * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
+ * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
+ * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
+ * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
+ * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
+ * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
+ * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
+ * an editor view actually mounts.
+ */
+export default function RichTextEditor({ value, onChange, height = "360px", fill = false, onUploadImage }: RichTextEditorProps) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({ link: { openOnClick: false } }),
+            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
+            TextAlign.configure({ types: ["heading", "paragraph"] }),
+            Highlight,
+            Image,
+            TableKit.configure({ table: { resizable: true } }),
+            Placeholder.configure({ placeholder: "Write your message…" }),
+        ],
+        content: value,
+        immediatelyRender: false,
+        onUpdate: ({ editor: updated }) => onChangeRef.current(updated.getHTML()),
+    });
+
+    return (
+        <div className={["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" ")}>
+            <ComposeToolbar editor={editor} onUploadImage={onUploadImage} />
+            <EditorContent
+                editor={editor}
+                style={fill ? undefined : { height }}
+                className={[
+                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
+                    fill ? "flex-1 min-h-0" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,64 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, RefObject, useState } from "react";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+
+export interface ScheduleSendPickerProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    /** Called with the chosen instant as a UTC ISO string, already validated to be in the future. */
+    onSchedule: (scheduledSendTimeIso: string) => void;
+}
+
+/**
+ * The "Send later" popover next to Compose's Send button — same `PopoverPortal` shell
+ * `EmojiPicker`/`GifPicker`/`ResourcePicker` already use, just holding a single `datetime-local` input
+ * instead of a grid/list. Validates the chosen time is genuinely in the future before calling
+ * `onSchedule` — `@rapidmx/restapi`'s own `send()` only defers when `scheduledSendTime` is strictly
+ * later than "now", so a past/immediate pick here would silently send right away instead of scheduling,
+ * which would surprise a reader expecting the picker's own choice to be honored.
+ */
+export default function ScheduleSendPicker({ anchorRef, onClose, onSchedule }: ScheduleSendPickerProps) {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState<string | null>(null);
+
+    function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        if (!value) {
+            setError("Pick a date and time.");
+            return;
+        }
+        const iso = new Date(value).toISOString();
+        if (new Date(iso).getTime() <= Date.now()) {
+            setError("Pick a time in the future.");
+            return;
+        }
+        onSchedule(iso);
+    }
+
+    return (
+        <PopoverPortal anchorRef={anchorRef} onClose={onClose} width={260} height={150} aria-label="Schedule send">
+            <form onSubmit={handleSubmit} className="p-3 flex flex-col gap-2">
+                <label className="text-xs font-semibold" htmlFor="schedule-send-time">
+                    Send at
+                </label>
+                <input
+                    id="schedule-send-time"
+                    type="datetime-local"
+                    className="text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+                {error && <p className="text-xs text-danger">{error}</p>}
+                <button
+                    type="submit"
+                    className="text-sm font-semibold py-1.5 px-3 rounded-pill bg-primary text-white hover:bg-primary-dark"
+                >
+                    Send later
+                </button>
+            </form>
+        </PopoverPortal>
+    );
+}

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -0,0 +1,287 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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";
+import { useCompose } from "../compose/ComposeContext.js";
+
+export type MailShellProps = Omit<AppShellProps, "active">;
+
+export interface MailShellContextValue {
+    /** The mailbox currently selected (`?mailboxUid=`, or the caller's first accessible mailbox). */
+    mailboxUid?: string;
+    /** The folder currently selected (`?folderUid=`, or the selected mailbox's Inbox). */
+    folderUid?: string;
+    mailboxes: Mailbox[];
+    folders: Folder[];
+}
+
+const MailShellContext = createContext<MailShellContextValue>({ mailboxes: [], folders: [] });
+
+/** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
+export function useMailShell(): MailShellContextValue {
+    return useContext(MailShellContext);
+}
+
+const FOLDER_LABELS: Record<string, string> = {
+    inbox: "Inbox",
+    sent_items: "Sent Items",
+    drafts: "Drafts",
+    outbox: "Outbox",
+    junk: "Junk Email",
+    deleted_items: "Deleted Items",
+};
+
+/** Well-known folders sort first, in Gmail/Outlook's conventional order; anything else (incl. `user`) sorts after, alphabetically. */
+const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "junk", "deleted_items"];
+
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see
+ * `CalendarShell`/`ContactsShell`/`TasksShell`), not Mail — `listFolders()` returns every well-known
+ * folder for the mailbox regardless of which app owns it, so Mail's own folder tree must filter down
+ * to just the mail ones itself, or those other apps' folders leak into this sidebar.
+ */
+const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
+
+function folderSortKey(folder: Folder): number {
+    const idx = FOLDER_ORDER.indexOf(folder.type);
+    return idx === -1 ? FOLDER_ORDER.length : idx;
+}
+
+type Status = "checking" | "error" | "ready";
+
+/**
+ * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
+ * `ComposeProvider` correctly: that provider is rendered *inside* the `AppShell` that `MailShell` itself
+ * returns, i.e. a descendant of `MailShell`, not an ancestor — a hook call made directly in `MailShell`'s
+ * own function body would see only whatever context exists *above* `MailShell`, never a provider one of
+ * its own descendants creates. This button, rendered as part of `AppShell`'s `children`, sits correctly
+ * inside that subtree.
+ */
+function ComposeButton({ mailboxUid }: { mailboxUid: string }) {
+    const { openCompose } = useCompose();
+    return (
+        <button
+            type="button"
+            onClick={() => openCompose({ mailboxUid })}
+            className="block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark"
+        >
+            Compose
+        </button>
+    );
+}
+
+/**
+ * Mail's own contextual sidebar (mailbox switcher + folder tree) + content area, rendered inside the shared
+ * `AppShell` chrome (icon rail, header, impersonation banner — see that component). There is no client-side
+ * router in this framework (see `ReactRoute`'s file-convention resolver) — the selected mailbox/folder live
+ * in the URL's `?mailboxUid=`/`?folderUid=` query params, read once on mount (never during the initial
+ * render itself, matching every other query-param reader in this codebase — e.g. `apps/admin/quarantine`'s
+ * `readMailboxUid()` — so the server-rendered and just-hydrated client markup match).
+ */
+export default function MailShell({
+    userUid,
+    authServerUrl,
+    impersonating,
+    impersonationBaseUrl,
+    trusted,
+    children,
+}: PropsWithChildren<MailShellProps>) {
+    const [status, setStatus] = useState<Status>("checking");
+    const [error, setError] = useState<string | null>(null);
+    const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
+    const [folders, setFolders] = useState<Folder[]>([]);
+    const [foldersLoading, setFoldersLoading] = useState(true);
+    const [folderError, setFolderError] = useState<string | null>(null);
+    const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
+    const [requestedFolderUid, setRequestedFolderUid] = useState<string | null>(null);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        setRequestedMailboxUid(params.get("mailboxUid"));
+        setRequestedFolderUid(params.get("folderUid"));
+    }, []);
+
+    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);
+        setFoldersLoading(true);
+        listFolders(mailboxUid)
+            .then((result) => setFolders(result.filter((f) => MAIL_FOLDER_TYPES.has(f.type))))
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load folders."))
+            .finally(() => setFoldersLoading(false));
+    }, [mailboxUid]);
+
+    const folderUid: string | undefined =
+        (requestedFolderUid && folders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
+        folders.find((f) => f.type === "inbox")?.uid;
+
+    const contextValue = useMemo<MailShellContextValue>(
+        () => ({ mailboxUid, folderUid, mailboxes, folders }),
+        [mailboxUid, folderUid, mailboxes, folders],
+    );
+
+    const sortedFolders = useMemo(
+        () => [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name)),
+        [folders],
+    );
+
+    // 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/folder tree 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 Mail never shows a blank
+        // pane while `listMailboxes()` is in flight — the outline below mirrors the real sidebar's shape.
+        inner = (
+            <aside className="w-64 shrink-0 bg-surface border-r border-border flex flex-col p-3 gap-4">
+                <Skeleton height="h-9" className="rounded-sm" />
+                <SkeletonList count={6} />
+            </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 — it's rendered twice (desktop `<aside>` + mobile
+        // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
+        // unmounted), so the mailbox-switcher `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct
+        // value per instance. Two elements sharing one id breaks label association (and is invalid HTML).
+        const sidebarContent = (idPrefix: string) => (
+            <>
+                <div className="p-3">
+                    <ComposeButton mailboxUid={mailboxUid} />
+                </div>
+                {mailboxes.length > 1 && (
+                    <div className="px-3 pb-2">
+                        <label
+                            className="block text-xs font-bold uppercase tracking-wide text-text-muted mb-1"
+                            htmlFor={`${idPrefix}-mailbox-switcher`}
+                        >
+                            Mailbox
+                        </label>
+                        <select
+                            id={`${idPrefix}-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 = `/?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                            }}
+                        >
+                            {mailboxes.map((mb) => (
+                                <option key={mb.uid} value={mb.uid}>
+                                    {mb.displayName}
+                                    {mb.ownerUserUid ? "" : " (shared)"}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+                {folderError && (
+                    <div className="px-3 pb-2">
+                        <Alert>{folderError}</Alert>
+                    </div>
+                )}
+                <nav className="flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-0.5">
+                    {foldersLoading ? (
+                        <SkeletonList count={5} className="pt-1" />
+                    ) : (
+                        sortedFolders.map((folder) => (
+                            <a
+                                key={folder.uid}
+                                href={`/?mailboxUid=${encodeURIComponent(mailboxUid)}&folderUid=${encodeURIComponent(folder.uid)}`}
+                                className={[
+                                    "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                    folder.uid === folderUid
+                                        ? "bg-primary/10 text-primary-dark font-semibold"
+                                        : "text-text hover:bg-surface-alt",
+                                ].join(" ")}
+                            >
+                                <span>{FOLDER_LABELS[folder.type] ?? folder.name}</span>
+                                {folder.unreadCount > 0 && (
+                                    <span className="text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted">
+                                        {folder.unreadCount}
+                                    </span>
+                                )}
+                            </a>
+                        ))
+                    )}
+                </nav>
+            </>
+        );
+
+        inner = (
+            <>
+                <aside className="hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col">
+                    {sidebarContent("desktop")}
+                </aside>
+                <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Folders">
+                    <div className="flex flex-col">{sidebarContent("mobile")}</div>
+                </Drawer>
+                <main className="flex-1 min-w-0 overflow-y-auto">
+                    <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 folders"
+                        onClick={() => setDrawerOpen(true)}
+                    >
+                        <HiOutlineBars3 size={20} aria-hidden="true" />
+                    </button>
+                    <MailShellContext.Provider value={contextValue}>{children}</MailShellContext.Provider>
+                </main>
+            </>
+        );
+    }
+
+    return (
+        <AppShell
+            active="mail"
+            userUid={userUid}
+            authServerUrl={authServerUrl}
+            impersonating={impersonating}
+            impersonationBaseUrl={impersonationBaseUrl}
+            trusted={trusted}
+        >
+            {inner}
+        </AppShell>
+    );
+}