@rapidmx/web-client 0.10.0 → 0.12.0

package/apps/www/index.tsx

@@ -20,6 +20,7 @@ import {
     createFolder,
     getMessage,
     getMessageRawContent,
+    listFolders,
     listMessages,
     moveMessages,
     setMessagesFlagged,
@@ -46,6 +47,7 @@ import MailShell, {
     useMailShell,
 } from "../shared/components/mail/layout/MailShell.js";
 import MailAddress from "../shared/components/mail/MailAddress.js";
+import OutboxRowStatus from "../shared/components/mail/OutboxRowStatus.js";
 import { mergeFirstPage } from "../shared/mail/mergeFirstPage.js";
 import { listSnapshotKey, readListSnapshot, saveListScroll, writeListSnapshot } from "../shared/mail/listSnapshots.js";
 import { setReadStateMany } from "../shared/mail/messageReadState.js";
@@ -53,6 +55,7 @@ import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
 import ConversationList from "../shared/components/mail/ConversationList.js";
+import { EncryptedPreview } from "../shared/components/mail/reading/EncryptedPreview.js";
 import MailListToolbar from "../shared/components/mail/MailListToolbar.js";
 import MailSelectionBar from "../shared/components/mail/MailSelectionBar.js";
 import {
@@ -70,6 +73,7 @@ import { useUnlockPrompt } from "../shared/components/layout/UnlockPromptProvide
 import { SHORTCUTS } from "../shared/keyboard/keymap.js";
 import { isActivatable } from "../shared/keyboard/targets.js";
 import { useShortcut } from "../shared/keyboard/useShortcut.js";
+import { notifyApiError } from "../shared/notifications/apiErrors.js";
 
 const MESSAGE_PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
@@ -461,7 +465,7 @@ function InboxPage(props: MailShellProps) {
 }
 
 function InboxContent({ userUid }: { userUid?: string }) {
-    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, live, trackMessageChange } = useMailShell();
+    const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType, onFolderCreated, noteFolderUids, live, trackMessageChange } = useMailShell();
     const isMobile = useIsMobile();
     const navigate = useNavigate();
     const { requestUnlock } = useUnlockPrompt();
@@ -503,7 +507,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
     // or it would act on a selection that is still arriving.
     const [resolvingSelection, setResolvingSelection] = useState(0);
     const [bulkBusy, setBulkBusy] = useState(false);
-    const [bulkError, setBulkError] = useState<string | null>(null);
     // Bumped to force the list effect below to re-run - a bulk update is deliberately neither atomic nor
     // all-or-nothing (see `bulkUpdateMessages()`), so a rejection means refetching rather than guessing
     // which half of the selection actually landed.
@@ -1120,10 +1123,18 @@ function InboxContent({ userUid }: { userUid?: string }) {
         unlockRefresh,
         searchAllMail,
         aggregateFolderType,
-        mailboxFolders,
+        // Only a merged view is built from the folder tree; for a single folder a folder appearing in the sidebar (the Outbox, Sent Items) must not reload
+        // the list on screen and forget its selection.
+        aggregateFolderType ? mailboxFolders : null,
         activeMailboxUid,
     ]);
 
+    // Which folders the messages on screen live in: one the sidebar does not know (the Outbox and Sent Items are made by the server on first use) is looked for -
+    // its mailbox's folders are listed again, once - so it appears without a reload. A conversation names every folder it has a message in.
+    useEffect(() => {
+        noteFolderUids([...messages.map((message) => message.folderUid), ...conversations.flatMap((conversation) => conversation.folderUids)]);
+    }, [messages, conversations, noteFolderUids]);
+
     // New mail without a reload. `live` is bumped by a push event, a reconnect, the safety-net poll or the tab coming back (see
     // `useMailLiveUpdates()`); this then quietly refetches the first page of whatever is listed and folds it in - unlike the
     // effect above it resets nothing: not the selection, the open thread, select mode, the scroll position or the rows
@@ -1454,7 +1465,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
         setSelectMode(false);
         setSelectedUids(new Set());
         setSelectedConversationIds(new Set());
-        setBulkError(null);
     }
 
     function toggleSelected(uid: string) {
@@ -1471,7 +1481,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
 
     /** Loads (once) the messages behind each of `ids`, so a ticked conversation resolves to the messages
      * every bulk action below acts on. If any of them fails to load, none of that batch stays ticked and
-     * the bar says why - better than acting on the part of a selection that happened to arrive. */
+     * a pop-up says why - better than acting on the part of a selection that happened to arrive. */
     async function resolveConversations(ids: string[]) {
         const missing = ids.filter((id) => !conversationMessagesById[id]);
         if (missing.length === 0) {
@@ -1484,9 +1494,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
             );
             setConversationMessagesById((prev) => ({ ...prev, ...Object.fromEntries(loaded) }));
         } catch (err) {
-            setBulkError(
-                err instanceof ApiRequestError ? err.message : "Could not load the messages in one of those conversations.",
-            );
+            notifyApiError(err, "Couldn't load the messages in one of those conversations");
             setSelectedConversationIds((prev) => {
                 const next = new Set(prev);
                 for (const id of missing) {
@@ -1528,7 +1536,8 @@ function InboxContent({ userUid }: { userUid?: string }) {
      *
      * A bulk update is applied element by element server-side and stops at its first rejection, so a
      * failure leaves an unknown prefix of the selection already changed (see `bulkUpdateMessages()`) -
-     * which is why a failure reloads the list rather than trying to reconcile it, and says so.
+     * which is why a failure reloads the list rather than trying to reconcile it, and says so ("all of those messages" in the pop-up's
+     * title: some may have changed).
      *
      * `chosen` is the selection bar's ticked messages unless the caller (a keyboard shortcut acting on the one open message or conversation)
      * names its own. Resolves whether it succeeded.
@@ -1539,7 +1548,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
         chosen: Message[] = selectedMessages,
     ): Promise<boolean> {
         setBulkBusy(true);
-        setBulkError(null);
         try {
             const updated = await action(chosen);
             if (removesRows) {
@@ -1569,9 +1577,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
             setSelectedUids(new Set());
             return true;
         } catch (err) {
-            setBulkError(
-                `${err instanceof ApiRequestError ? err.message : "Those messages couldn't all be updated."} Some of them may already have changed, so the list has been reloaded.`,
-            );
+            notifyApiError(err, chosen.length === 1 ? "Couldn't update the message" : "Couldn't update all of those messages");
             setSelectedUids(new Set());
             setSelectedConversationIds(new Set());
             setConversationMessagesById({});
@@ -1596,12 +1602,13 @@ function InboxContent({ userUid }: { userUid?: string }) {
     }
 
     /**
-     * This mailbox's folder of `type`, created on demand. A mailbox is provisioned with only the folders it
-     * has needed so far, so Deleted Items and Junk may genuinely not exist the first time a selection is
-     * deleted or reported - and unlike Archive, neither has a server-side lazy-create route to go through.
+     * This mailbox's folder of `type`. The server makes every well-known folder itself (when the mailbox is made, and again when the folders are listed
+     * if one is missing), so a folder the page's tree lacks is asked for - the tree may simply be out of date - and used, never created a second time: a
+     * duplicate of a well-known type is invisible to the server (it answers with the oldest) but would be a second row in the sidebar. Only a server that
+     * really has none (an older one, which makes Deleted Items and Junk on first use) is asked to create it.
      *
-     * A folder created here isn't in `mailboxFolders` (the shell fetched that once), so it's remembered per
-     * mailbox and type until the page reloads; otherwise a second Delete would create a second folder.
+     * A folder found or created here may not be in `mailboxFolders` yet, so it is filed there and remembered per mailbox and type until the page
+     * reloads; otherwise a second Delete would ask again.
      */
     async function resolveFolderOfType(type: Folder["type"], name: string): Promise<string> {
         const key = `${activeMailboxUid}:${type}`;
@@ -1609,6 +1616,12 @@ function InboxContent({ userUid }: { userUid?: string }) {
         if (known) {
             return known;
         }
+        const listed = (await listFolders(activeMailboxUid)).find((f) => f.type === type);
+        if (listed) {
+            onFolderCreated(listed);
+            lazyFoldersRef.current.set(key, listed.uid);
+            return listed.uid;
+        }
         const created = await createFolder({ mailboxUid: activeMailboxUid, name, type });
         lazyFoldersRef.current.set(key, created.uid);
         return created.uid;
@@ -1784,7 +1797,7 @@ function InboxContent({ userUid }: { userUid?: string }) {
         try {
             chosen = selectMode ? selectedMessages : inConversations ? await loadOpenConversation(openThread!.conversation) : [selected!];
         } catch (err) {
-            setBulkError(err instanceof ApiRequestError ? err.message : "Could not load the messages in that conversation.");
+            notifyApiError(err, "Couldn't load the messages in that conversation");
             return;
         }
         chosen = chosen.filter(applies);
@@ -1934,7 +1947,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
                         onReportJunk={() => void moveSelectionToType("junk", "Junk Email")}
                         onDelete={() => void moveSelectionToType("deleted_items", "Deleted Items")}
                         busy={bulkBusy || resolvingSelection > 0}
-                        error={bulkError}
                     />
                 ) : (
                     <MailListToolbar
@@ -2079,12 +2091,6 @@ function InboxContent({ userUid }: { userUid?: string }) {
                         <Alert>{error}</Alert>
                     </div>
                 )}
-                {/* Select mode shows a bulk action's failure in its own bar; the keyboard's actions on the one open message need somewhere too. */}
-                {!selectMode && bulkError && (
-                    <div className="p-4">
-                        <Alert>{bulkError}</Alert>
-                    </div>
-                )}
 
                 {loading ? (
                     // A skeleton of rows rather than a line of text: the list keeps its shape while a folder that was not shown a
@@ -2189,13 +2195,18 @@ function InboxContent({ userUid }: { userUid?: string }) {
                                                 </div>
                                                 <div className="flex items-center gap-2 text-xs text-text-muted font-normal">
                                                     <span className="truncate">
-                                                        {snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview}
+                                                        {snippets[message.uid] ||
+                                                            decryptedRows[message.uid]?.preview ||
+                                                            message.bodyPreview ||
+                                                            (message.encrypted ? <EncryptedPreview /> : null)}
                                                     </span>
                                                     {message.hasAttachments && <HiOutlinePaperClip size={12} aria-label="Has attachments" />}
                                                     {message.flags.flagged && (
                                                         <HiOutlineFlag size={12} aria-label="Flagged" className="text-danger" />
                                                     )}
                                                 </div>
+                                                {/* What the server is doing with a message in Outbox: sending, retrying, or why it wasn't sent. */}
+                                                {isOutbox && <OutboxRowStatus message={message} />}
                                             </>
                                         )}
                                     </button>

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

@@ -11,6 +11,7 @@ import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHook
 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";
 
 /**
@@ -66,7 +67,8 @@ function MessageDetailContent({ uid }: { uid: string }) {
     useMarkMessageRead(message, setMessage);
 
     if (loading) {
-        return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
+        // 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>;

package/apps/www/settings/appearance/index.tsx

@@ -0,0 +1,21 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
+import React from "react";
+import SettingsShell, { SettingsShellProps } from "../../../shared/components/settings/layout/SettingsShell.js";
+import AppearanceForm from "../../../shared/appearance/AppearanceForm.js";
+
+export type SettingsAppearancePageProps = Omit<SettingsShellProps, "active">;
+
+/** Settings > Appearance: the colour scheme, theme colours and background. Not mailbox-scoped - it is the signed-in user's own. */
+function SettingsAppearancePage(props: SettingsAppearancePageProps) {
+    return (
+        <SettingsShell {...props} active="appearance">
+            <AppearanceForm />
+        </SettingsShell>
+    );
+}
+
+export default routedPage("/settings/appearance", SettingsAppearancePage);

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

@@ -4,12 +4,11 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { routedPage } from "../../_routedPage.js";
 import React, { FormEvent, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 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 Alert from "@rapidmx/react-shared/components/feedback/Alert.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";
@@ -38,13 +37,11 @@ function AutoReplyContent() {
     // `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 [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
-        setError(null);
         setSaved(false);
         setSaving(true);
         try {
@@ -60,7 +57,7 @@ function AutoReplyContent() {
             setVersion(updated.version);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save automatic reply settings.");
+            notifyApiError(err, "Couldn't save the automatic reply settings");
         } finally {
             setSaving(false);
         }
@@ -75,8 +72,7 @@ function AutoReplyContent() {
                     calendar event with its own automatic reply enabled takes over for its own start/end window.
                 </p>
 
-                {error && <Alert>{error}</Alert>}
-                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+                {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">