@rapidmx/web-client 0.14.1 → 0.16.0

package/dist/apps/www/messages/[uid].js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
@@ -11,12 +11,15 @@ import { 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, { useMailShell } from "../../shared/components/mail/layout/MailShell.js";
-import { LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.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`.
+ * 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) {
     return (_jsx(MailShell, { ...props, children: _jsx(MessageDetailContent, { uid: props.params.uid }) }));
@@ -27,6 +30,7 @@ function MessageDetailContent({ uid }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [labels, setLabels] = useState([]);
+    const conversationId = new URLSearchParams(useLocationSearch()).get("conversation");
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -55,8 +59,9 @@ function MessageDetailContent({ uid }) {
             cancelled = true;
         };
     }, [messageMailboxUid]);
-    const attachments = useMessageAttachments(message);
-    useMarkMessageRead(message, setMessage);
+    // 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 _jsx(ReadingPaneSkeleton, {});
@@ -72,6 +77,9 @@ function MessageDetailContent({ uid }) {
     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 (_jsxs("div", { className: "flex flex-col h-full min-h-0", children: [_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" }), _jsx(LazyConversationThreadPane, { conversation: { conversationId, subject: message.subject, messageCount: 1 }, selectedUid: message.uid, mailboxUid: message.mailboxUid, folders: folders, labels: labels, shortcuts: true, onMessagePatched: () => undefined, onMessageRemoved: () => undefined, onLabelCreated: (label) => setLabels((prev) => [...prev, label]), onFolderCreated: onFolderCreated })] }));
+    }
     return (_jsx(LazyMessageDetailPane, { shortcuts: true, 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/dist/apps/www/settings/profile/index.d.ts

@@ -0,0 +1,4 @@
+import { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
+export type SettingsProfilePageProps = Omit<SettingsShellProps, "active">;
+declare const _default: import("../../../shared/navigation/AppRouter.js").RoutedPageComponent<SettingsProfilePageProps>;
+export default _default;

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
+import { useMemo, useState } from "react";
+import { freeBusyVisibilityOf, isSharedWithMe, updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { DEFAULT_TIME_ZONE, deviceTimeZone, timeZoneOptions } from "@rapidmx/react-shared/util/timeZone.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+const SELECT_CLASS = "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** Who may see when this mailbox is busy, as the Profile page words it: the label of each choice and the one line that says what it means. */
+const FREE_BUSY_CHOICES = [
+    { value: "domain", label: "Everyone on my domain", help: "People with a mailbox on your domain can see when you are busy." },
+    { value: "shared", label: "Only people I've shared my calendar with", help: "Only people you have given access to this mailbox or its calendars can see when you are busy." },
+    { value: "nobody", label: "Nobody", help: "Nobody else can see when you are busy; people looking for a time see your availability as hidden." },
+    { value: "everyone", label: "Everyone on this server", help: "Anyone signed in to this server can see when you are busy." },
+];
+/** The longest display name the server accepts. */
+const MAX_DISPLAY_NAME_LENGTH = 255;
+/**
+ * Why `displayName` can't be saved as typed, or `undefined` if it can. The server refuses the same things (400): the name
+ * is shown as the sender name on mail from this mailbox, so it must not look like an address (the fullwidth and small
+ * look-alike @ signs included) or carry a line break.
+ */
+function displayNameProblem(displayName) {
+    if (!displayName) {
+        return "Enter a display name.";
+    }
+    if (/[@＠﹫\r\n]/.test(displayName)) {
+        return "A display name can't contain \"@\" (or a look-alike) or line breaks - it is shown as the sender name on mail you send.";
+    }
+    if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
+        return `A display name can be at most ${MAX_DISPLAY_NAME_LENGTH} characters.`;
+    }
+    return undefined;
+}
+function SettingsProfilePage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "profile", children: _jsx(ProfileContent, {}) }));
+}
+function ProfileContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const deviceZone = useMemo(() => deviceTimeZone(), []);
+    // What the server holds, which is what "changed" is measured against - moved along by each successful save.
+    const [savedName, setSavedName] = useState(mailbox.displayName);
+    const [savedZone, setSavedZone] = useState(mailbox.timezone);
+    const [displayName, setDisplayName] = useState(mailbox.displayName);
+    // "UTC" is the server's placeholder for a mailbox nobody chose a zone for, not a choice anyone made, so this device's
+    // zone is offered instead. It stays unsaved until Save, like any other edit.
+    const [timezone, setTimezone] = useState(() => mailbox.timezone === DEFAULT_TIME_ZONE && deviceZone !== DEFAULT_TIME_ZONE ? deviceZone : mailbox.timezone);
+    const [savedFreeBusy, setSavedFreeBusy] = useState(freeBusyVisibilityOf(mailbox));
+    const [freeBusy, setFreeBusy] = useState(savedFreeBusy);
+    // Only the mailbox's owner may change who sees its free/busy: on one shared with you the setting is shown, not offered.
+    const canChangeFreeBusy = !isSharedWithMe(mailbox);
+    const [nameError, setNameError] = useState(null);
+    // See auto-reply/index.tsx's identical note - later saves must carry the version the previous save returned.
+    const [version, setVersion] = useState(mailbox.version);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const zones = useMemo(() => timeZoneOptions(savedZone, deviceZone, timezone), [savedZone, deviceZone, timezone]);
+    const zoneWasPreselected = savedZone === DEFAULT_TIME_ZONE && deviceZone !== DEFAULT_TIME_ZONE && timezone === deviceZone;
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setSaved(false);
+        const name = displayName.trim();
+        const problem = displayNameProblem(name);
+        if (problem) {
+            setNameError(problem);
+            return;
+        }
+        setNameError(null);
+        setDisplayName(name);
+        const nameChanged = name !== savedName;
+        const zoneChanged = timezone !== savedZone;
+        const freeBusyChanged = canChangeFreeBusy && freeBusy !== savedFreeBusy;
+        if (!nameChanged && !zoneChanged && !freeBusyChanged) {
+            setSaved(true);
+            return;
+        }
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({
+                uid: mailbox.uid,
+                version,
+                ...(nameChanged && { displayName: name }),
+                ...(zoneChanged && { timezone }),
+                ...(freeBusyChanged && { freeBusyVisibility: freeBusy }),
+            });
+            setVersion(updated.version);
+            setSavedName(name);
+            setSavedZone(timezone);
+            setSavedFreeBusy(freeBusy);
+            setSaved(true);
+        }
+        catch (err) {
+            notifyApiError(err, "Couldn't save your profile");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Profile" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "How this mailbox presents itself to the people you write to, and where you are." }), saved && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col", children: [_jsxs(FormField, { label: "Display name", htmlFor: "profile-display-name", children: [_jsx("input", { id: "profile-display-name", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => {
+                                        setDisplayName(e.target.value);
+                                        setNameError(null);
+                                        setSaved(false);
+                                    }, "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? "profile-display-name-error" : "profile-display-name-help" }), nameError && (_jsx("p", { id: "profile-display-name-error", role: "alert", className: "mt-1 text-xs text-danger", children: nameError })), _jsx("p", { id: "profile-display-name-help", className: "mt-1 text-xs text-text-muted", children: "The sender name on mail you send, shown to recipients beside your address (for example \u201CJane Doe\u201D). It can\u2019t contain an \u201C@\u201D." })] }), _jsxs(FormField, { label: "Time zone", htmlFor: "profile-time-zone", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { id: "profile-time-zone", className: SELECT_CLASS, value: timezone, onChange: (e) => {
+                                                setTimezone(e.target.value);
+                                                setSaved(false);
+                                            }, "aria-describedby": "profile-time-zone-help", children: zones.map((zone) => (_jsx("option", { value: zone, children: zone }, zone))) }), timezone !== deviceZone && (_jsxs(Button, { type: "button", variant: "text", className: "!w-auto", onClick: () => {
+                                                setTimezone(deviceZone);
+                                                setSaved(false);
+                                            }, children: ["Use this device\u2019s time zone (", deviceZone, ")"] }))] }), zoneWasPreselected && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Your mailbox has no time zone chosen yet; this device\u2019s is preselected. Save to keep it." })), _jsx("p", { id: "profile-time-zone-help", className: "mt-1 text-xs text-text-muted", children: "How calendar times and reminders are shown and scheduled for this mailbox, such as when an event or a reminder falls." })] }), _jsxs(FormField, { label: "Free/busy visibility", htmlFor: "profile-free-busy", children: [_jsx("select", { id: "profile-free-busy", className: SELECT_CLASS, value: freeBusy, disabled: !canChangeFreeBusy, onChange: (e) => {
+                                        setFreeBusy(e.target.value);
+                                        setSaved(false);
+                                    }, "aria-describedby": "profile-free-busy-help", children: FREE_BUSY_CHOICES.map((choice) => (_jsx("option", { value: choice.value, children: choice.label }, choice.value))) }), _jsx("p", { id: "profile-free-busy-help", className: "mt-1 text-xs text-text-muted", children: FREE_BUSY_CHOICES.find((choice) => choice.value === freeBusy).help }), _jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Who can see the hours you are busy when they look for a time to meet - never the title, place or guests of an event." }), !canChangeFreeBusy && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "This mailbox is shared with you: only its owner can change who sees its free/busy times." }))] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
+}
+export default routedPage("/settings/profile", SettingsProfilePage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -39,7 +39,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.15.0",
+    "@rapidmx/react-shared": "^0.18.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",