@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/www/messages/[uid].tsx

@@ -1,108 +1,135 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../_routedPage.js";
-import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Message, getMessage } from "@rapidmx/react-shared/mail/mailApi.js";
-import { Label, listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
-import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
-import { useMarkMessageRead } from "../../shared/mail/useMarkMessageRead.js";
-import MailShell, { MailShellProps, useMailShell } from "../../shared/components/mail/layout/MailShell.js";
-import { LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
-import { ReadingPaneSkeleton } from "../../shared/components/mail/reading/MessageCard.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-
-/**
- * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/index.tsx` keeps its existing
- * inline reading pane and never navigates here; see that file's `handleSelect`.
- */
-function MessageDetailPage(props: MailShellProps & { params: { uid: string } }) {
-    return (
-        <MailShell {...props}>
-            <MessageDetailContent uid={props.params.uid} />
-        </MailShell>
-    );
-}
-
-function MessageDetailContent({ uid }: { uid: string }) {
-    const { mailboxFolders, mailboxUid, onFolderCreated } = useMailShell();
-    const [message, setMessage] = useState<Message | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [labels, setLabels] = useState<Label[]>([]);
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        getMessage(uid)
-            .then(setMessage)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
-            .finally(() => setLoading(false));
-    }, [uid]);
-
-    // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
-    // Labels control rather than blocking the rest of the page. Keyed on the message's own mailbox, not the
-    // shell's ambient one: this route is reached from aggregate/search rows too, where they can differ.
-    const messageMailboxUid = message?.mailboxUid;
-    useEffect(() => {
-        if (!messageMailboxUid) {
-            return;
-        }
-        let cancelled = false;
-        listLabels(messageMailboxUid, { limit: 200 })
-            .then((result) => {
-                if (!cancelled) {
-                    setLabels(result);
-                }
-            })
-            .catch(() => undefined);
-        return () => {
-            cancelled = true;
-        };
-    }, [messageMailboxUid]);
-
-    const attachments = useMessageAttachments(message);
-    useMarkMessageRead(message, setMessage);
-
-    if (loading) {
-        // The pane's own frame - a header card and a message card - rather than a line of text: what is coming is known, only not yet its contents.
-        return <ReadingPaneSkeleton />;
-    }
-    if (error || !message) {
-        return <Alert>{error ?? "Message not found."}</Alert>;
-    }
-
-    // Looked up by the message's own mailboxUid, not the shell's ambient `mailboxUid` - the mobile detail
-    // route reaches here from an aggregate ("All Inboxes" etc.) list row too, where there's no single
-    // selected mailbox to fall back to.
-    const folders = mailboxFolders.find((mf) => mf.mailbox.uid === message.mailboxUid)?.folders ?? [];
-    const backHref = `/?mailboxUid=${encodeURIComponent(message.mailboxUid)}&folderUid=${encodeURIComponent(message.folderUid)}`;
-    const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
-    const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
-    const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
-    return (
-        <LazyMessageDetailPane
-            shortcuts
-            message={message}
-            attachments={attachments}
-            backHref={backHref}
-            isSentItems={isSentItems}
-            onRecalled={setMessage}
-            isOutbox={isOutbox}
-            onReceiptHandled={setMessage}
-            draftsFolderUid={draftsFolderUid}
-            folders={folders}
-            onMoved={setMessage}
-            onFolderCreated={onFolderCreated}
-            onScheduledSendCanceled={setMessage}
-            onArchived={setMessage}
-            labels={labels}
-            onLabelsChanged={setMessage}
-            onLabelCreated={(label) => setLabels((prev) => [...prev, label])}
-        />
-    );
-}
-
-export default routedPage("/messages/:uid", MessageDetailPage);
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../_routedPage.js";
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Message, getMessage } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Label, listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
+import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
+import { useMarkMessageRead } from "../../shared/mail/useMarkMessageRead.js";
+import MailShell, { MailShellProps, useMailShell } from "../../shared/components/mail/layout/MailShell.js";
+import { LazyConversationThreadPane, LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
+import { useLocationSearch } from "../../shared/navigation/AppRouter.js";
+import { ReadingPaneSkeleton } from "../../shared/components/mail/reading/MessageCard.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/index.tsx` keeps its existing
+ * inline reading pane and never navigates here; see that file's `handleSelect`. A row of the conversation list
+ * comes with `?conversation=<id>` (`handleOpenConversation`), and then this page is the whole thread, opened at this
+ * message, as the desktop's reading pane is; without it (a flat list, a link to a message) it is that one message.
+ */
+function MessageDetailPage(props: MailShellProps & { params: { uid: string } }) {
+    return (
+        <MailShell {...props}>
+            <MessageDetailContent uid={props.params.uid} />
+        </MailShell>
+    );
+}
+
+function MessageDetailContent({ uid }: { uid: string }) {
+    const { mailboxFolders, mailboxUid, onFolderCreated } = useMailShell();
+    const [message, setMessage] = useState<Message | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [labels, setLabels] = useState<Label[]>([]);
+    const conversationId: string | null = new URLSearchParams(useLocationSearch()).get("conversation");
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMessage(uid)
+            .then(setMessage)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
+    // Labels control rather than blocking the rest of the page. Keyed on the message's own mailbox, not the
+    // shell's ambient one: this route is reached from aggregate/search rows too, where they can differ.
+    const messageMailboxUid = message?.mailboxUid;
+    useEffect(() => {
+        if (!messageMailboxUid) {
+            return;
+        }
+        let cancelled = false;
+        listLabels(messageMailboxUid, { limit: 200 })
+            .then((result) => {
+                if (!cancelled) {
+                    setLabels(result);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [messageMailboxUid]);
+
+    // A thread loads, marks read and fetches the attachments of each message it opens itself.
+    const attachments = useMessageAttachments(conversationId ? null : message);
+    useMarkMessageRead(conversationId ? null : message, setMessage);
+
+    if (loading) {
+        // The pane's own frame - a header card and a message card - rather than a line of text: what is coming is known, only not yet its contents.
+        return <ReadingPaneSkeleton />;
+    }
+    if (error || !message) {
+        return <Alert>{error ?? "Message not found."}</Alert>;
+    }
+
+    // Looked up by the message's own mailboxUid, not the shell's ambient `mailboxUid` - the mobile detail
+    // route reaches here from an aggregate ("All Inboxes" etc.) list row too, where there's no single
+    // selected mailbox to fall back to.
+    const folders = mailboxFolders.find((mf) => mf.mailbox.uid === message.mailboxUid)?.folders ?? [];
+    const backHref = `/?mailboxUid=${encodeURIComponent(message.mailboxUid)}&folderUid=${encodeURIComponent(message.folderUid)}`;
+    const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
+    const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
+    const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
+    if (conversationId) {
+        return (
+            // The thread's own height, as the single message's: it scrolls inside the page rather than growing it.
+            <div className="flex flex-col h-full min-h-0">
+                <a href={backHref} className="text-sm text-primary-dark hover:underline block px-4 pt-3">
+                    &larr; Back to messages
+                </a>
+                <LazyConversationThreadPane
+                    conversation={{ conversationId, subject: message.subject, messageCount: 1 }}
+                    selectedUid={message.uid}
+                    mailboxUid={message.mailboxUid}
+                    folders={folders}
+                    labels={labels}
+                    shortcuts
+                    onMessagePatched={() => undefined}
+                    onMessageRemoved={() => undefined}
+                    onLabelCreated={(label) => setLabels((prev) => [...prev, label])}
+                    onFolderCreated={onFolderCreated}
+                />
+            </div>
+        );
+    }
+    return (
+        <LazyMessageDetailPane
+            shortcuts
+            message={message}
+            attachments={attachments}
+            backHref={backHref}
+            isSentItems={isSentItems}
+            onRecalled={setMessage}
+            isOutbox={isOutbox}
+            onReceiptHandled={setMessage}
+            draftsFolderUid={draftsFolderUid}
+            folders={folders}
+            onMoved={setMessage}
+            onFolderCreated={onFolderCreated}
+            onScheduledSendCanceled={setMessage}
+            onArchived={setMessage}
+            labels={labels}
+            onLabelsChanged={setMessage}
+            onLabelCreated={(label) => setLabels((prev) => [...prev, label])}
+        />
+    );
+}
+
+export default routedPage("/messages/:uid", MessageDetailPage);

package/apps/www/settings/auto-reply/index.tsx

@@ -1,133 +1,133 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { routedPage } from "../../_routedPage.js";
-import React, { FormEvent, useState } from "react";
-import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
-import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
-import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
-
-const INPUT_CLASS =
-    "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-
-export type SettingsAutoReplyPageProps = Omit<SettingsShellProps, "active">;
-
-function SettingsAutoReplyPage(props: SettingsAutoReplyPageProps) {
-    return (
-        <SettingsShell {...props} active="auto-reply">
-            <AutoReplyContent />
-        </SettingsShell>
-    );
-}
-
-function AutoReplyContent() {
-    const { mailboxUid, mailboxes } = useSettingsShell();
-    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
-    // resolved to one of them (a mailbox-less caller sees `MailboxProvisioning` instead) — this lookup
-    // can't miss, same established non-null pattern as `apps/www/contacts/index.tsx`'s `mailboxUid!`.
-    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
-
-    const [oofEnabled, setOofEnabled] = useState(mailbox.oofEnabled ?? false);
-    const [oofMessage, setOofMessage] = useState(mailbox.oofMessage ?? "");
-    const [oofStartTime, setOofStartTime] = useState(mailbox.oofStartTime ? toDatetimeLocal(mailbox.oofStartTime) : "");
-    const [oofEndTime, setOofEndTime] = useState(mailbox.oofEndTime ? toDatetimeLocal(mailbox.oofEndTime) : "");
-    // `SettingsShell`'s `mailboxes` is fetched once - every save bumps the server's version, so a second
-    // save without a reload must send the version the previous save returned, not the stale original.
-    const [version, setVersion] = useState(mailbox.version);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setSaved(false);
-        setSaving(true);
-        try {
-            const updated = await updateMailbox({
-                uid: mailbox.uid,
-                version,
-                oofEnabled,
-                oofMessage,
-                // `null` (not omitted) clears a previously saved window - an omitted field is left as-is.
-                oofStartTime: oofStartTime ? new Date(oofStartTime).toISOString() : null,
-                oofEndTime: oofEndTime ? new Date(oofEndTime).toISOString() : null,
-            });
-            setVersion(updated.version);
-            setSaved(true);
-        } catch (err) {
-            notifyApiError(err, "Couldn't save the automatic reply settings");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-xl">
-                <h1 className="text-lg font-bold tracking-tight mb-1">Automatic Replies</h1>
-                <p className="text-sm text-text-muted mb-4">
-                    Send an automatic reply to anyone who emails {mailbox.displayName} while you&rsquo;re away. A
-                    calendar event with its own automatic reply enabled takes over for its own start/end window.
-                </p>
-
-                {saved && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
-
-                <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-                    <label className="flex items-center gap-2 text-sm font-medium">
-                        <input type="checkbox" checked={oofEnabled} onChange={(e) => setOofEnabled(e.target.checked)} />
-                        Automatic replies are on
-                    </label>
-
-                    {oofEnabled && (
-                        <>
-                            <label className="flex flex-col gap-1.5 text-sm">
-                                <span className="font-semibold">Message</span>
-                                <textarea
-                                    aria-label="Automatic reply message"
-                                    className={INPUT_CLASS}
-                                    rows={5}
-                                    value={oofMessage}
-                                    onChange={(e) => setOofMessage(e.target.value)}
-                                />
-                            </label>
-
-                            <div className="grid grid-cols-2 gap-3">
-                                <label className="flex flex-col gap-1.5 text-sm">
-                                    <span className="font-semibold">Start (optional)</span>
-                                    <input
-                                        type="datetime-local"
-                                        aria-label="Automatic reply start"
-                                        className={INPUT_CLASS}
-                                        value={oofStartTime}
-                                        onChange={(e) => setOofStartTime(e.target.value)}
-                                    />
-                                </label>
-                                <label className="flex flex-col gap-1.5 text-sm">
-                                    <span className="font-semibold">End (optional)</span>
-                                    <input
-                                        type="datetime-local"
-                                        aria-label="Automatic reply end"
-                                        className={INPUT_CLASS}
-                                        value={oofEndTime}
-                                        onChange={(e) => setOofEndTime(e.target.value)}
-                                    />
-                                </label>
-                            </div>
-                            <p className="text-xs text-text-muted -mt-2">Leave both blank to stay on indefinitely until turned off.</p>
-                        </>
-                    )}
-
-                    <div>
-                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                            Save
-                        </Button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-}
-
-export default routedPage("/settings/auto-reply", SettingsAutoReplyPage);
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
+import React, { FormEvent, useState } from "react";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export type SettingsAutoReplyPageProps = Omit<SettingsShellProps, "active">;
+
+function SettingsAutoReplyPage(props: SettingsAutoReplyPageProps) {
+    return (
+        <SettingsShell {...props} active="auto-reply">
+            <AutoReplyContent />
+        </SettingsShell>
+    );
+}
+
+function AutoReplyContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them (a mailbox-less caller sees `MailboxProvisioning` instead) — this lookup
+    // can't miss, same established non-null pattern as `apps/www/contacts/index.tsx`'s `mailboxUid!`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
+
+    const [oofEnabled, setOofEnabled] = useState(mailbox.oofEnabled ?? false);
+    const [oofMessage, setOofMessage] = useState(mailbox.oofMessage ?? "");
+    const [oofStartTime, setOofStartTime] = useState(mailbox.oofStartTime ? toDatetimeLocal(mailbox.oofStartTime) : "");
+    const [oofEndTime, setOofEndTime] = useState(mailbox.oofEndTime ? toDatetimeLocal(mailbox.oofEndTime) : "");
+    // `SettingsShell`'s `mailboxes` is fetched once - every save bumps the server's version, so a second
+    // save without a reload must send the version the previous save returned, not the stale original.
+    const [version, setVersion] = useState(mailbox.version);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({
+                uid: mailbox.uid,
+                version,
+                oofEnabled,
+                oofMessage,
+                // `null` (not omitted) clears a previously saved window - an omitted field is left as-is.
+                oofStartTime: oofStartTime ? new Date(oofStartTime).toISOString() : null,
+                oofEndTime: oofEndTime ? new Date(oofEndTime).toISOString() : null,
+            });
+            setVersion(updated.version);
+            setSaved(true);
+        } catch (err) {
+            notifyApiError(err, "Couldn't save the automatic reply settings");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Automatic Replies</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    Send an automatic reply to anyone who emails {mailbox.displayName} while you&rsquo;re away. A
+                    calendar event with its own automatic reply enabled takes over for its own start/end window.
+                </p>
+
+                {saved && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                    <label className="flex items-center gap-2 text-sm font-medium">
+                        <input type="checkbox" checked={oofEnabled} onChange={(e) => setOofEnabled(e.target.checked)} />
+                        Automatic replies are on
+                    </label>
+
+                    {oofEnabled && (
+                        <>
+                            <label className="flex flex-col gap-1.5 text-sm">
+                                <span className="font-semibold">Message</span>
+                                <textarea
+                                    aria-label="Automatic reply message"
+                                    className={INPUT_CLASS}
+                                    rows={5}
+                                    value={oofMessage}
+                                    onChange={(e) => setOofMessage(e.target.value)}
+                                />
+                            </label>
+
+                            <div className="grid grid-cols-2 gap-3">
+                                <label className="flex flex-col gap-1.5 text-sm">
+                                    <span className="font-semibold">Start (optional)</span>
+                                    <input
+                                        type="datetime-local"
+                                        aria-label="Automatic reply start"
+                                        className={INPUT_CLASS}
+                                        value={oofStartTime}
+                                        onChange={(e) => setOofStartTime(e.target.value)}
+                                    />
+                                </label>
+                                <label className="flex flex-col gap-1.5 text-sm">
+                                    <span className="font-semibold">End (optional)</span>
+                                    <input
+                                        type="datetime-local"
+                                        aria-label="Automatic reply end"
+                                        className={INPUT_CLASS}
+                                        value={oofEndTime}
+                                        onChange={(e) => setOofEndTime(e.target.value)}
+                                    />
+                                </label>
+                            </div>
+                            <p className="text-xs text-text-muted -mt-2">Leave both blank to stay on indefinitely until turned off.</p>
+                        </>
+                    )}
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default routedPage("/settings/auto-reply", SettingsAutoReplyPage);