@rapidmx/web-client 0.32.0 → 0.33.0

package/apps/shared/components/admin/diagnostics/SettingsTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useMemo, useState } from "react";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import type { DiagnosticsSetting } from "./diagnosticsApi.js";
 
 /** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
@@ -83,9 +84,19 @@ export default function SettingsTable({ title, description, id, settings }: Sett
                         <tbody>
                             {shown.map((item) => (
                                 <tr key={item.name}>
-                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">{item.name}</td>
                                     <td className="py-2 px-2.5 border-b border-border font-mono break-all">
-                                        {item.redacted ? <span className="text-text-muted">{HIDDEN_VALUE}</span> : item.value}
+                                        {item.name}
+                                        <CopyIconButton value={item.name} label={`Copy the name of ${item.name}`} />
+                                    </td>
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">
+                                        {item.redacted ? (
+                                            <span className="text-text-muted">{HIDDEN_VALUE}</span>
+                                        ) : (
+                                            <>
+                                                {item.value}
+                                                <CopyIconButton value={item.value ?? ""} label={`Copy the value of ${item.name}`} />
+                                            </>
+                                        )}
                                     </td>
                                 </tr>
                             ))}

package/apps/shared/components/admin/mailboxes/MailboxTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { Mailbox } from "../../../../../lib/mail/mailApi.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 
 function formatBytes(bytes: number): string {
     if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`;
@@ -12,6 +13,16 @@ function formatBytes(bytes: number): string {
     return `${bytes} B`;
 }
 
+/** A cell's value with the icon button that copies it. */
+function Copyable({ value, label }: { value: string; label: string }) {
+    return (
+        <span className="inline-flex items-center gap-1">
+            {value}
+            <CopyIconButton value={value} label={label} />
+        </span>
+    );
+}
+
 export interface MailboxTableProps {
     mailboxes: Mailbox[];
 }
@@ -44,17 +55,26 @@ export default function MailboxTable({ mailboxes }: MailboxTableProps) {
                 <tbody>
                     {mailboxes.map((mailbox) => (
                         <tr key={mailbox.uid}>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.primarySmtpAddress}</td>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.displayName}</td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {mailbox.ownerUserUid ?? (
+                                <Copyable value={mailbox.primarySmtpAddress} label={`Copy the address of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                <Copyable value={mailbox.displayName} label={`Copy the display name of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                {mailbox.ownerUserUid ? (
+                                    <Copyable value={mailbox.ownerUserUid} label={`Copy the owner of ${mailbox.primarySmtpAddress}`} />
+                                ) : (
                                     <span className="inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
                                         Shared
                                     </span>
                                 )}
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
+                                <Copyable
+                                    value={`${formatBytes(mailbox.usedBytes)} / ${formatBytes(mailbox.quotaBytes)}`}
+                                    label={`Copy the quota used of ${mailbox.primarySmtpAddress}`}
+                                />
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle text-right">
                                 <a

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react";
 import { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import { actionErrorMessage } from "../elevation.js";
 
 const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
@@ -51,12 +51,12 @@ function splitSrvValue(value: string): { priority: string; weight: string; port:
     return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
 }
 
-/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
 function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
     return (
         <div className="flex items-start gap-2">
             <code className="flex-1 min-w-0 text-xs break-all">{value}</code>
-            <CopyButton value={value} label={copyLabel} />
+            <CopyIconButton value={value} label={copyLabel} className="shrink-0" />
         </div>
     );
 }

package/apps/shared/components/calendar/EventDetails.tsx

@@ -25,6 +25,7 @@ import { getVideoMeeting } from "../../../../lib/videoconf/videoMeetingsApi.js";
 import { describeTimeZone, deviceTimeZone } from "../../../../lib/util/timeZone.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import ParticipantLink from "../contacts/ParticipantLink.js";
 import EventDescriptionView from "./EventDescriptionView.js";
@@ -273,6 +274,15 @@ export default function EventDetails({
                                 </span>
                             )}
                         </div>
+                        {joinUrl && (
+                            // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                            <div className="mt-1.5 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                                <a href={joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                                    {joinUrl}
+                                </a>
+                                <CopyIconButton value={joinUrl} label="Copy the video call link" className="shrink-0" />
+                            </div>
+                        )}
                     </DetailRow>
                 )}
 

package/apps/shared/components/calendar/EventFormParts.tsx

@@ -6,6 +6,7 @@ import React, { ReactNode, useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
@@ -103,6 +104,15 @@ export function VideoConferencingRow({ c }: { c: EventFormController }) {
                     )}
                 </div>
             )}
+            {c.videoMeetingUid && c.joinUrl && (
+                // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                <div className="mb-1 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                    <a href={c.joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                        {c.joinUrl}
+                    </a>
+                    <CopyIconButton value={c.joinUrl} label="Copy the video call link" className="shrink-0" />
+                </div>
+            )}
         </IconRow>
     );
 }

package/apps/shared/components/calendar/MonthView.tsx

@@ -27,15 +27,21 @@ export interface MonthViewProps {
     onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 
-/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
+/** A real 6-week month grid (Sunday-start), matching Outlook/Gmail's month view. Multi-day and all-day
  * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
 export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: MonthViewProps) {
-    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
     const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
 
     return (
-        <div className="flex-1 grid grid-cols-7 grid-rows-6 min-h-0" role="grid" aria-label="Month">
+        <div className="flex-1 grid grid-cols-7 grid-rows-[auto_repeat(6,minmax(0,1fr))] min-h-0" role="grid" aria-label="Month">
+            {days.slice(0, 7).map((day) => (
+                <div key={day.getDay()} role="columnheader" className="px-2 py-1 text-xs font-semibold text-text-muted border-b border-border">
+                    <span className="sm:hidden">{format(day, "EEEEE")}</span>
+                    <span className="hidden sm:inline">{format(day, "EEEE")}</span>
+                </div>
+            ))}
             {days.map((day) => (
                 <DayCell
                     key={day.toISOString()}

package/apps/shared/components/contacts/ContactCard.tsx

@@ -22,6 +22,7 @@ import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import { notify } from "../../notifications/store.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
+import { closeAllOverlays } from "../../../../lib/components/overlays/overlayStack.js";
 import { useCompose } from "../mail/compose/ComposeContext.js";
 import { formatInviteWhen } from "../mail/invite/inviteFormat.js";
 import {
@@ -234,6 +235,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     }
 
     function handleEmail() {
+        // Every card open, not just this one: it may have been reached from another (a guest of an event), which would stay on screen behind the new window.
+        closeAllOverlays();
         openCompose({ to: formatMailAddress(participant) });
         onClose();
     }
@@ -261,9 +264,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                 {stored && <FavoriteStarButton favorite={!!stored.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
             </div>
             <div className="mt-4 flex flex-wrap items-center gap-2">
-                <Button type="button" variant="secondary" className={`${ACTION_CLASS} inline-flex items-center gap-1.5`} onClick={handleEmail}>
+                <Button type="button" variant="secondary" aria-label="Email" title="Email" className={`${ACTION_CLASS} inline-flex items-center`} onClick={handleEmail}>
                     <HiOutlineEnvelope aria-hidden="true" className="size-4" />
-                    Email
                 </Button>
                 {stored ? (
                     <a

package/apps/shared/components/contacts/ContactsSidebar.tsx

@@ -13,6 +13,7 @@ import { notifyApiError } from "../../notifications/apiErrors.js";
 export type ContactsView =
     | { type: "all" }
     | { type: "favorites" }
+    | { type: "suggested" }
     | { type: "list"; uid: string; name: string }
     | { type: "deleted" }
     | { type: "category"; name: string };
@@ -49,6 +50,8 @@ export interface ContactsSidebarProps {
     contacts: Contact[];
     active: ContactsView;
     onSelect: (view: ContactsView) => void;
+    /** How many contacts the mailbox's Suggested Contacts folder holds; `undefined` when it has none to show (the folder isn't known), which hides the view. */
+    suggestedCount?: number;
     /** Whether to offer the "Deleted" view - restapi only honors `deleted=true` for a caller with delete and
      * update rights on the mailbox (anyone else silently gets the live contacts), so the parent hides it
      * otherwise. Defaults to `true`. */
@@ -91,13 +94,13 @@ function NavItem({
 }
 
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Your contact
+ * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
  * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
  * distinct `categories` values across the loaded contacts — no separate category registry exists
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }: ContactsSidebarProps) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true, suggestedCount }: ContactsSidebarProps) {
     const client = useApiClient();
     const [lists, setLists] = useState<ContactList[]>([]);
     const [listsError, setListsError] = useState<string | null>(null);
@@ -165,6 +168,9 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             <div className="flex flex-col gap-0.5">
                 <NavItem label="Your contacts" count={contacts.length} active={active.type === "all"} onClick={() => handleSelect({ type: "all" })} />
                 <NavItem label="Favorites" count={favoriteCount} active={active.type === "favorites"} onClick={() => handleSelect({ type: "favorites" })} />
+                {suggestedCount !== undefined && (
+                    <NavItem label="Suggested contacts" count={suggestedCount} active={active.type === "suggested"} onClick={() => handleSelect({ type: "suggested" })} />
+                )}
                 {showDeleted && <NavItem label="Deleted" active={active.type === "deleted"} onClick={() => handleSelect({ type: "deleted" })} />}
             </div>
 

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -30,6 +30,8 @@ export interface ContactsToolbarProps {
     onToggleFavorite: () => void;
     onAddCategory: () => void;
     onExportVCard: () => void;
+    /** Turns the selected suggested contacts into contacts of the mailbox. Given only in the Suggested contacts view, which is also the only place the button is offered. */
+    onAddToContacts?: () => void;
     /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
      * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
     onImportFile: (file: File) => void;
@@ -58,6 +60,7 @@ export default function ContactsToolbar({
     onToggleFavorite,
     onAddCategory,
     onExportVCard,
+    onAddToContacts,
     onImportFile,
     shortcuts,
     hideNew,
@@ -91,6 +94,9 @@ export default function ContactsToolbar({
             rank: 3,
         },
         { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        ...(onAddToContacts
+            ? [{ id: "addToContacts", label: "Add to contacts", icon: HiOutlineUserPlus, onClick: onAddToContacts, disabled: !hasSelection, group: 1, rank: 7 }]
+            : []),
         { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
         { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
     ];

package/apps/shared/components/mail/ConversationThreadPane.tsx

@@ -15,7 +15,8 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
-import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
+import { InlineComposeSlot, useCompose, useInlineCompose } from "./compose/ComposeContext.js";
+import { resumeFromDraft } from "./compose/draftResume.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -206,6 +207,11 @@ export default function ConversationThreadPane({
     // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
     // what makes the compose provider open a reply here rather than floating at the bottom right.
     const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
+    const { openCompose } = useCompose();
+    /** The draft this pane has already opened an editor for, so it is opened once per visit - closing the editor leaves the draft as a message to read. */
+    const openedDraftRef = useRef<string | null>(null);
+    const selectedUidRef = useRef(selectedUid);
+    selectedUidRef.current = selectedUid;
 
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
@@ -291,6 +297,26 @@ export default function ConversationThreadPane({
         setPendingFocusUid([...expanded][expanded.size - 1]);
     }, [conversationId, selectedUid, messages]);
 
+    // A draft the reader opens is edited where it is read: its compose window opens as the card at the top of the thread, with the draft as it was
+    // saved. It is opened once per visit to the draft (an encrypted draft, which only the server holds the ciphertext of, stays a message to read).
+    useEffect(() => {
+        if (openedDraftRef.current !== null && openedDraftRef.current !== selectedUid) {
+            openedDraftRef.current = null;
+        }
+        if (loading || loadedIdRef.current !== conversationId || !selectedUid || openedDraftRef.current === selectedUid) return;
+        const draft = messages.find((message) => message.uid === selectedUid);
+        if (!draft || folders.find((folder) => folder.uid === draft.folderUid)?.type !== "drafts") return;
+        openedDraftRef.current = draft.uid;
+        void resumeFromDraft(draft, client)
+            .then((resume) => {
+                // The reader may have moved on while it loaded.
+                if (resume && selectedUidRef.current === draft.uid) {
+                    openCompose({ mailboxUid: draft.mailboxUid, resume, inlineFor: draft.uid });
+                }
+            })
+            .catch(() => undefined);
+    }, [conversationId, selectedUid, messages, loading, folders]);
+
     useLayoutEffect(() => {
         if (!pendingFocusUid) return;
         // The row is always rendered by now: this runs after the DOM update that added the message it
@@ -301,7 +327,9 @@ export default function ConversationThreadPane({
         // took the app header and the folder rail off the screen - so the adjustment goes on whichever
         // ancestor actually scrolls, exactly as the toggle below already does it. When that is the page
         // itself, nothing inside the pane scrolls and the row is already in view, so it is left alone.
-        const row = rowRefs.current[pendingFocusUid]!;
+        const row = rowRefs.current[pendingFocusUid];
+        // None for a draft opened as the editor card (see the effect above): the card takes the view when it is placed.
+        if (!row) return;
         const scroller = scrollingAncestor(row);
         if (scroller !== document.documentElement) {
             const rect = row.getBoundingClientRect();
@@ -571,6 +599,10 @@ export default function ConversationThreadPane({
                 ))}
                 {messages.map((message) => {
                     const uid = message.uid;
+                    // A draft being edited here is the editor card above, not a message to read as well.
+                    if (inlineSessions.some((session) => session.draftUid === uid)) {
+                        return null;
+                    }
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
                     const messageUnread = isUnread(message);

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

@@ -198,6 +198,8 @@ export interface InlineComposeSession {
     id: string;
     /** The uid of the message the window answers. */
     inlineFor: string;
+    /** The uid of the draft the window continues, when it was opened to edit one: the draft is then the card, not a message beside it. */
+    draftUid?: string;
 }
 
 interface InlineComposeValue {
@@ -258,6 +260,9 @@ export function useCompose(): ComposeContextValue {
  */
 export default function ComposeProvider({ children, userUid, trusted }: PropsWithChildren<{ userUid?: string; trusted?: boolean }>) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
+    // The sessions as of the last render, for `openCompose()` to read at the click.
+    const sessionsRef = useRef(sessions);
+    sessionsRef.current = sessions;
     const client = useApiClient();
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
@@ -283,7 +288,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     const isInline = (session: ComposeSession) => !!session.inlineFor && !parked.has(session.id) && hosted.has(session.inlineFor);
     const inlineKey = sessions.filter(isInline).map((session) => `${session.id}:${session.inlineFor}`).join("|");
     const inlineSessions = useMemo<InlineComposeSession[]>(
-        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor! })),
+        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor!, draftUid: session.resume?.draft.uid })),
         [inlineKey],
     );
     const inlineValue = useMemo<InlineComposeValue>(
@@ -354,6 +359,19 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         resume,
         inlineFor,
     }: OpenComposeInput) {
+        // A draft already being edited has its window: it is brought back to the pane that was holding it rather than opened a second time.
+        const editing = resume && sessionsRef.current.find((session) => session.resume?.draft.uid === resume.draft.uid);
+        if (editing) {
+            setParked((prev) => {
+                if (!prev.has(editing.id)) {
+                    return prev;
+                }
+                const next = new Set(prev);
+                next.delete(editing.id);
+                return next;
+            });
+            return;
+        }
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
         // The window's own element, attached to the page from the start (it is moved to its slot or the stack as soon as that is drawn).

package/apps/shared/components/mail/compose/draftResume.ts

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { type Message, type Recipient, type RecipientType, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { formatMailAddress } from "../../../../../lib/mail/mailAddress.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import type { ResumeCompose } from "../../../mail/outbox/composeBridge.js";
+import { loadOriginalMessage } from "./quotedBody.js";
+
+/** The comma-separated address text a recipient field holds, for the recipients of one type. */
+function recipientText(recipients: Recipient[], type: RecipientType): string {
+    return recipients
+        .filter((recipient) => recipient.type === type)
+        .map((recipient) => formatMailAddress(recipient))
+        .join(", ");
+}
+
+/** Plain text as the HTML paragraphs the editor holds. */
+function textToHtml(text: string): string {
+    const escape = (value: string): string => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return text
+        .split(/\n{2,}/)
+        .map((paragraph) => `<p>${escape(paragraph).replace(/\n/g, "<br>")}</p>`)
+        .join("");
+}
+
+/**
+ * What the compose window needs to continue `draft` - a message in the Drafts folder the reader opened rather than one a window of this tab
+ * saved - read back from the server: its recipients and subject from the record, its body from the server's copy (with its embedded pictures)
+ * and its attachments. `undefined` for a draft that cannot be edited here: an encrypted one holds only its ciphertext, which is never opened.
+ * Never rejects for a body that could not be loaded - the draft then opens with the preview, as a reply's quote does.
+ */
+export async function resumeFromDraft(draft: Message, client?: ApiClient): Promise<ResumeCompose | undefined> {
+    if (draft.encrypted) {
+        return undefined;
+    }
+    const [original, attachments] = await Promise.all([loadOriginalMessage(draft, null), listAttachments(draft.folderUid, draft.uid, client)]);
+    const html =
+        original.body.html !== undefined ? original.body.html : original.body.text !== undefined ? textToHtml(original.body.text) : textToHtml(draft.bodyPreview ?? "");
+    return {
+        draft,
+        mailboxUid: draft.mailboxUid,
+        to: recipientText(draft.recipients, "to"),
+        cc: recipientText(draft.recipients, "cc"),
+        bcc: recipientText(draft.recipients, "bcc"),
+        subject: draft.subject,
+        html,
+        attachments,
+        requestReceipt: !!draft.requestReceipt,
+        signEnabled: false,
+        encryptRequested: false,
+    };
+}

package/apps/www/calendar/index.tsx

@@ -217,13 +217,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             return { rangeStart: new Date(-MAX_DATE_MS), rangeEnd: new Date(MAX_DATE_MS), days: [] as Date[] };
         }
         if (view === "month") {
-            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: [] as Date[] };
         }
         if (view === "week") {
-            const start = startOfWeek(viewDate, { weekStartsOn: 1 });
-            const end = endOfWeek(viewDate, { weekStartsOn: 1 });
+            const start = startOfWeek(viewDate, { weekStartsOn: 0 });
+            const end = endOfWeek(viewDate, { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: eachDayOfInterval({ start, end }) };
         }
         if (view === "workWeek") {

package/apps/www/contacts/index.tsx

@@ -11,6 +11,7 @@ import {
     createContact,
     deleteContact,
     listContacts,
+    ensureSuggestedContacts,
     listContactsInFolders,
     listDeletedContacts,
     setContactFavorite,
@@ -91,6 +92,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     const client = useApiClient();
     const [contacts, setContacts] = useState<Contact[]>([]);
     const [deletedContacts, setDeletedContacts] = useState<Contact[]>([]);
+    // The mailbox's Suggested Contacts folder - the people it has corresponded with - once the server has made it; `null` while unknown (an older server has none).
+    const [suggestedFolderUid, setSuggestedFolderUid] = useState<string | null>(null);
+    const [suggestedContacts, setSuggestedContacts] = useState<Contact[]>([]);
     const [deletedLoading, setDeletedLoading] = useState(false);
     const [deletedError, setDeletedError] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
@@ -121,6 +125,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         }
         setLoading(true);
         setError(null);
+        if (suggestedFolderUid) {
+            void loadSuggested(suggestedFolderUid);
+        }
         return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
             .then((result) => {
                 setContacts(result.items);
@@ -134,6 +141,31 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         void reload();
     }, [folderUid]);
 
+    /** Reads the Suggested Contacts folder's contacts. A failure leaves the list as it was. */
+    function loadSuggested(suggestedUid: string): Promise<void> {
+        return listAllPages((page) => listContacts(suggestedUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then((result) => setSuggestedContacts(result.items))
+            .catch(() => undefined);
+    }
+
+    // Asks the server to turn the people this mailbox has corresponded with into suggested contacts (it does so once for each person, so this is cheap when
+    // nothing is new), then lists them. An older server, or one that refuses, simply has no such view.
+    useEffect(() => {
+        let cancelled = false;
+        // `ContactsShell` only renders this with a resolved mailbox (see the Deleted view's comment above).
+        void ensureSuggestedContacts(mailboxUid!, client)
+            .then(async (result) => {
+                if (!cancelled) {
+                    setSuggestedFolderUid(result.folderUid);
+                    await loadSuggested(result.folderUid);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid]);
+
     // restapi only honors `?deleted=true` for a caller with both delete and update rights on the contacts *folder*
     // (its ACL, which inherits the mailbox's but can carry its own records) - anyone else silently gets the *live*
     // contacts back, which the Deleted view would then present as deleted. There is no client API for the caller's
@@ -196,6 +228,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 return contacts;
             case "favorites":
                 return contacts.filter((c) => c.favorite);
+            case "suggested":
+                return suggestedContacts;
             case "list":
                 return contacts.filter((c) => c.contactListUid === view.uid);
             case "category":
@@ -203,7 +237,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
             case "deleted":
                 return deletedContacts;
         }
-    }, [contacts, deletedContacts, view]);
+    }, [contacts, deletedContacts, suggestedContacts, view]);
 
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
@@ -226,7 +260,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         return arr;
     }, [filtered, sortColumn, sortDesc]);
 
-    const selected = contacts.find((c) => c.uid === selectedUid) ?? null;
+    const selected = contacts.find((c) => c.uid === selectedUid) ?? suggestedContacts.find((c) => c.uid === selectedUid) ?? null;
     const isDeletedView = view.type === "deleted";
     const checkedContacts = sorted.filter((c) => checkedUids.has(c.uid));
     const allChecked = sorted.length > 0 && sorted.every((c) => checkedUids.has(c.uid));
@@ -392,6 +426,36 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         await reload();
     });
 
+    // A suggested contact becomes one of the mailbox's own: a copy in its contacts folder, and the suggestion removed (the person is not suggested again).
+    const handleAddToContacts = singleFlight(async () => {
+        for (const contact of checkedContacts) {
+            try {
+                await createContact(
+                    {
+                        mailboxUid: contact.mailboxUid,
+                        folderUid: folderUid!,
+                        displayName: contact.displayName,
+                        givenName: contact.givenName,
+                        surname: contact.surname,
+                        emails: contact.emails,
+                        phones: contact.phones,
+                        addresses: contact.addresses,
+                        company: contact.company,
+                        jobTitle: contact.jobTitle,
+                        notes: contact.notes,
+                        categories: contact.categories,
+                    },
+                    client,
+                );
+                await deleteContact(contact.uid, contact.version, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't add some of the contacts");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    });
+
     function handleExportVCard() {
         downloadTextFile(
             checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf",
@@ -447,7 +511,14 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         // open-ended, so a column's `overflow` would otherwise never apply); on a phone the whole page scrolls, as it always did. Below `lg` the
         // contacts menu is a drawer (a button above the columns), so the list and the detail pane keep a usable width.
         <div className="flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden">
-            <ContactsSidebar mailboxUid={mailboxUid} contacts={contacts} active={view} onSelect={handleSelectView} showDeleted={canViewDeleted} />
+            <ContactsSidebar
+                mailboxUid={mailboxUid}
+                contacts={contacts}
+                active={view}
+                onSelect={handleSelectView}
+                showDeleted={canViewDeleted}
+                suggestedCount={suggestedFolderUid ? suggestedContacts.length : undefined}
+            />
             <div className="flex-1 min-w-0 min-h-0 flex">
             {/* Hidden on mobile while the "new contact" form (the one form-pane state mobile keeps
                 in-place — see the pane's own comment below) is showing, so the two never compete for the
@@ -469,6 +540,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                     onToggleFavorite={handleToggleFavorite}
                     onAddCategory={handleAddCategory}
                     onExportVCard={handleExportVCard}
+                    onAddToContacts={view.type === "suggested" ? handleAddToContacts : undefined}
                     onImportFile={handleImportFile}
                     shortcuts
                     hideNew={isMobile}

package/apps/www/tasks/index.tsx

@@ -61,7 +61,7 @@ function bucketFor(task: Task, now: Date): Bucket {
     if (isToday(due)) {
         return "Today";
     }
-    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 1 }))) {
+    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 0 }))) {
         return "This Week";
     }
     return "Later";