@rapidmx/web-client 0.3.0 → 0.4.0

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

@@ -24,7 +24,7 @@ export default function MessageDetailPage(props: MailShellProps & { params: { ui
 }
 
 function MessageDetailContent({ uid }: { uid: string }) {
-    const { folders, mailboxUid } = useMailShell();
+    const { mailboxFolders, mailboxUid } = useMailShell();
     const [message, setMessage] = useState<Message | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -58,6 +58,10 @@ function MessageDetailContent({ uid }: { uid: string }) {
         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";

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

@@ -24,6 +24,12 @@ import {
     unlockWithPassword,
 } from "@rapidmx/react-shared/crypto/keySession.js";
 import { IDLE_TIMEOUT_OPTIONS_MINUTES, getIdleTimeoutMinutes, setIdleTimeoutMinutes } from "@rapidmx/react-shared/crypto/idleTimeout.js";
+import {
+    LOCAL_INDEX_SIZE_OPTIONS,
+    getDefaultLocalIndexByteBudget,
+    getLocalIndexByteBudget,
+    setLocalIndexByteBudget,
+} from "../../../shared/search/localIndexSizePreference.js";
 import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
 import { buildAad, sealWithKey } from "@rapidmx/react-shared/crypto/masterKey.js";
 import { buildEscrowWrap, buildPasswordWrap, buildRecoveryWraps } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
@@ -32,6 +38,7 @@ import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "@rapidmx/react-sh
 import { getMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import KeyEnrollmentGate from "../../../shared/components/layout/KeyEnrollmentGate.js";
+import { destroyLocalIndex } from "../../../shared/search/localIndexRpcClient.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
@@ -105,6 +112,7 @@ function EncryptionContent() {
     // invalidates every other unlock method, which the copy needs to say plainly.
     const [recoveryCodesReason, setRecoveryCodesReason] = useState<"regenerate" | "rotate">("regenerate");
     const [codesSaved, setCodesSaved] = useState(false);
+    const [codesCopied, setCodesCopied] = useState(false);
 
     const [rotationPassword, setRotationPassword] = useState("");
     const [rotationConfirmPassword, setRotationConfirmPassword] = useState("");
@@ -112,6 +120,9 @@ function EncryptionContent() {
 
     const [destroyed, setDestroyed] = useState(false);
     const [idleTimeoutMinutes, setIdleTimeoutMinutesState] = useState(() => getIdleTimeoutMinutes());
+    const [localIndexByteBudget, setLocalIndexByteBudgetState] = useState(() => getLocalIndexByteBudget());
+    const localIndexDefaultByteBudgetLabel =
+        LOCAL_INDEX_SIZE_OPTIONS.find((option) => option.bytes === getDefaultLocalIndexByteBudget())?.label ?? "500 MB";
 
     // `mailbox.keys` comes from `SettingsShell`'s one-time `listMailboxes()` fetch - once an ACME
     // enrollment issues, the server has installed a new signing key that fetch never saw. Only this
@@ -209,6 +220,12 @@ function EncryptionContent() {
         setIdleTimeoutMinutesState(minutes);
     }
 
+    function handleLocalIndexByteBudgetChange(e: React.ChangeEvent<HTMLSelectElement>) {
+        const bytes = Number(e.target.value);
+        setLocalIndexByteBudget(bytes);
+        setLocalIndexByteBudgetState(bytes);
+    }
+
     function loadVault() {
         return getKeyVault(mailboxUid!)
             .then(setVault)
@@ -288,6 +305,18 @@ function EncryptionContent() {
         }
     }
 
+    async function handleCopyCodes() {
+        try {
+            // Only reachable via the button below, which never renders while newRecoveryCodes is null.
+            await navigator.clipboard.writeText(newRecoveryCodes!.join("\n"));
+            setCodesCopied(true);
+            setTimeout(() => setCodesCopied(false), 2000);
+        } catch {
+            // Clipboard access can be denied by the browser - the codes are still selectable/copyable by
+            // hand from the list below.
+        }
+    }
+
     /**
      * Real revocation for a captured wrap (`keyvaultApi.ts`'s `rekey()` - see that function's own doc
      * comment): re-wraps this mailbox's already-unlocked private keys under a brand new master key
@@ -360,6 +389,12 @@ function EncryptionContent() {
 
     function handleDestroyKeysNow() {
         destroyUnlockedKeys(mailboxUid);
+        // Spec §11: the Tier 2 local index MUST be destroyed on the same events that destroy unlocked
+        // keys. Not awaited - this page's own "keys removed" confirmation shouldn't wait on it, and
+        // destroyLocalIndex() never throws either way. Reached directly here (rather than relying on
+        // LocalIndexLifecycle.tsx's polling, which only runs while Mail's own MailShell is mounted) since
+        // this button lives on the Settings page, which never mounts that component.
+        void destroyLocalIndex(mailboxUid!);
         setDestroyed(true);
     }
 
@@ -388,13 +423,16 @@ function EncryptionContent() {
                         If you lose your password, these new codes are the only way to recover your encrypted mail.
                         Each code can be used once. Store them somewhere safe — they will not be shown again.
                     </p>
-                    <ul className="grid grid-cols-2 gap-2 mb-5 font-mono text-sm">
+                    <ul className="grid grid-cols-2 gap-2 mb-3 font-mono text-sm">
                         {newRecoveryCodes.map((code) => (
                             <li key={code} className="bg-surface-alt rounded-sm py-1.5 px-2 text-center">
                                 {code}
                             </li>
                         ))}
                     </ul>
+                    <Button type="button" variant="secondary" className="!w-auto mb-5" onClick={handleCopyCodes}>
+                        {codesCopied ? "Copied" : "Copy codes to clipboard"}
+                    </Button>
                     <label className="flex items-center gap-2 text-sm mb-4">
                         <input type="checkbox" checked={codesSaved} onChange={(e) => setCodesSaved(e.target.checked)} />
                         I have saved these recovery codes in a safe place.
@@ -647,6 +685,30 @@ function EncryptionContent() {
                     </select>
                 </div>
 
+                <div>
+                    <h2 className="text-sm font-semibold mb-2">Local search index size</h2>
+                    <p className="text-xs text-text-muted mb-3">
+                        How much decrypted mail this device keeps in a local encrypted search index, so recent
+                        search results and inbox previews work instantly without contacting the server every
+                        time. Defaults to {localIndexDefaultByteBudgetLabel} on this device. Applies the next
+                        time this mailbox&rsquo;s index rebuilds (e.g. the next time you unlock it) — lowering
+                        it doesn&rsquo;t delete anything already indexed elsewhere, it just narrows what this
+                        device keeps a local copy of.
+                    </p>
+                    <select
+                        aria-label="Local search index size"
+                        className="text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
+                        value={localIndexByteBudget}
+                        onChange={handleLocalIndexByteBudgetChange}
+                    >
+                        {LOCAL_INDEX_SIZE_OPTIONS.map((option) => (
+                            <option key={option.bytes} value={option.bytes}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                </div>
+
                 <div>
                     <h2 className="text-sm font-semibold mb-2">This session</h2>
                     <p className="text-xs text-text-muted mb-3">

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

@@ -0,0 +1,271 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    MailboxAccessMember,
+    MailboxAccessRole,
+    listMailboxAccess,
+    lookupMailboxOwnerByEmail,
+    removeMailboxAccess,
+    setMailboxAccess,
+} from "@rapidmx/react-shared/mail/mailboxAccessApi.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 Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+
+const ROLE_LABELS: Record<MailboxAccessRole, string> = { viewer: "Can view", manager: "Can manage" };
+
+export type SettingsSharingPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsSharingPage(props: SettingsSharingPageProps) {
+    return (
+        <SettingsShell {...props} active="sharing">
+            <SharingContent />
+        </SettingsShell>
+    );
+}
+
+type Status = "loading" | "ready" | "forbidden" | "error";
+
+/**
+ * Manages who else can access whichever mailbox Settings is currently scoped to (the ambient mailbox from
+ * `useSettingsShell()`'s own switcher, which already lists every mailbox the caller can reach, shared ones
+ * included) - not just for shared/ownerless mailboxes specifically, matching every other settings page's
+ * own mailbox-agnostic design. A single grant here already cascades to that mailbox's calendar/contacts/
+ * tasks/mail folders (see `@rapidmx/restapi`'s `BaseMailboxAccessRoute` doc comment), so there is nothing
+ * else to configure per data type.
+ */
+function SharingContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+
+    const [members, setMembers] = useState<MailboxAccessMember[]>([]);
+    const [status, setStatus] = useState<Status>("loading");
+    const [error, setError] = useState<string | null>(null);
+
+    const [emailInput, setEmailInput] = useState("");
+    const [newRole, setNewRole] = useState<MailboxAccessRole>("viewer");
+    const [adding, setAdding] = useState(false);
+    const [addError, setAddError] = useState<string | null>(null);
+
+    const [pendingRoleChange, setPendingRoleChange] = useState<string | null>(null);
+    const [removeTarget, setRemoveTarget] = useState<MailboxAccessMember | null>(null);
+    const [removing, setRemoving] = useState(false);
+
+    function reload() {
+        if (!mailboxUid) {
+            return;
+        }
+        setStatus("loading");
+        setError(null);
+        listMailboxAccess(mailboxUid)
+            .then((result) => {
+                setMembers(result);
+                setStatus("ready");
+            })
+            .catch((err) => {
+                // A 403 here is the live, server-verified "can this caller manage this mailbox's sharing"
+                // signal - the same permission threshold (ACLAction.UPDATE) this route itself requires, so
+                // no separate probe call is needed to decide which state to render.
+                if (err instanceof ApiRequestError && err.status === 403) {
+                    setStatus("forbidden");
+                    return;
+                }
+                setError(err instanceof ApiRequestError ? err.message : "Could not load sharing settings.");
+                setStatus("error");
+            });
+    }
+
+    useEffect(reload, [mailboxUid]);
+
+    async function handleAdd(e: FormEvent) {
+        e.preventDefault();
+        const email = emailInput.trim();
+        if (!email || !mailboxUid) {
+            return;
+        }
+        setAddError(null);
+        setAdding(true);
+        try {
+            const found = await lookupMailboxOwnerByEmail(email);
+            if (!found) {
+                setAddError("No one found with that email on this platform.");
+                return;
+            }
+            await setMailboxAccess(mailboxUid, found.userUid, newRole);
+            setEmailInput("");
+            setNewRole("viewer");
+            reload();
+        } catch (err) {
+            setAddError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        } finally {
+            setAdding(false);
+        }
+    }
+
+    async function handleRoleChange(userOrRoleId: string, role: MailboxAccessRole) {
+        if (!mailboxUid) {
+            return;
+        }
+        setPendingRoleChange(userOrRoleId);
+        setError(null);
+        try {
+            await setMailboxAccess(mailboxUid, userOrRoleId, role);
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not update this member's role.");
+        } finally {
+            setPendingRoleChange(null);
+        }
+    }
+
+    function closeRemoveModal() {
+        setRemoveTarget(null);
+    }
+
+    async function handleRemove() {
+        if (!mailboxUid || !removeTarget) {
+            return;
+        }
+        setRemoving(true);
+        setError(null);
+        try {
+            await removeMailboxAccess(mailboxUid, removeTarget.userOrRoleId);
+            setRemoveTarget(null);
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not remove this member.");
+        } finally {
+            setRemoving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl flex flex-col gap-6">
+                <div>
+                    <h1 className="text-lg font-bold tracking-tight mb-1">Sharing</h1>
+                    <p className="text-sm text-text-muted">
+                        Manage who else can access {mailbox?.displayName ?? "this mailbox"}&rsquo;s mail, calendar,
+                        contacts, and tasks. Granting access here covers all of it at once - there&rsquo;s nothing
+                        else to configure per data type.
+                    </p>
+                </div>
+
+                {status === "loading" && <SkeletonList count={3} />}
+
+                {status === "forbidden" && (
+                    <Alert>You don&rsquo;t have permission to manage sharing for this mailbox.</Alert>
+                )}
+
+                {status === "error" && error && <Alert>{error}</Alert>}
+
+                {status === "ready" && (
+                    <>
+                        {error && <Alert>{error}</Alert>}
+
+                        <div>
+                            <h2 className="text-sm font-semibold mb-2">People with access</h2>
+                            {members.length === 0 ? (
+                                <p className="text-sm text-text-muted">No one else has access to this mailbox yet.</p>
+                            ) : (
+                                <ul className="flex flex-col gap-2">
+                                    {members.map((member) => (
+                                        <li
+                                            key={member.userOrRoleId}
+                                            className="flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm"
+                                        >
+                                            <span className="truncate">{member.userOrRoleId}</span>
+                                            <span className="flex items-center gap-2 shrink-0">
+                                                <select
+                                                    aria-label={`Role for ${member.userOrRoleId}`}
+                                                    className="text-sm border border-border rounded-sm py-1 px-2 bg-surface"
+                                                    value={member.role}
+                                                    disabled={pendingRoleChange === member.userOrRoleId}
+                                                    onChange={(e) =>
+                                                        handleRoleChange(member.userOrRoleId, e.target.value as MailboxAccessRole)
+                                                    }
+                                                >
+                                                    {(Object.keys(ROLE_LABELS) as MailboxAccessRole[]).map((role) => (
+                                                        <option key={role} value={role}>
+                                                            {ROLE_LABELS[role]}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                <Button
+                                                    type="button"
+                                                    variant="text"
+                                                    className="!w-auto text-danger"
+                                                    onClick={() => setRemoveTarget(member)}
+                                                >
+                                                    Remove
+                                                </Button>
+                                            </span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </div>
+
+                        <form onSubmit={handleAdd} className="flex flex-col gap-2">
+                            <h2 className="text-sm font-semibold">Add someone</h2>
+                            {addError && <Alert>{addError}</Alert>}
+                            <div className="flex gap-2">
+                                <input
+                                    type="email"
+                                    aria-label="Email address"
+                                    placeholder="Email address"
+                                    className="flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
+                                    value={emailInput}
+                                    onChange={(e) => setEmailInput(e.target.value)}
+                                    disabled={adding}
+                                />
+                                <select
+                                    aria-label="Role to grant"
+                                    className="text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
+                                    value={newRole}
+                                    onChange={(e) => setNewRole(e.target.value as MailboxAccessRole)}
+                                    disabled={adding}
+                                >
+                                    {(Object.keys(ROLE_LABELS) as MailboxAccessRole[]).map((role) => (
+                                        <option key={role} value={role}>
+                                            {ROLE_LABELS[role]}
+                                        </option>
+                                    ))}
+                                </select>
+                                <Button type="submit" loading={adding} disabled={adding} className="!w-auto">
+                                    Add
+                                </Button>
+                            </div>
+                        </form>
+                    </>
+                )}
+
+                <Modal open={!!removeTarget} onClose={closeRemoveModal} title="Remove access">
+                    <p className="text-sm mb-5">
+                        {removeTarget?.userOrRoleId} will no longer be able to access {mailbox?.displayName ?? "this mailbox"}.
+                    </p>
+                    <div className="flex gap-3 justify-end">
+                        <Button type="button" variant="secondary" className="!w-auto" disabled={removing} onClick={closeRemoveModal}>
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                            loading={removing}
+                            disabled={removing}
+                            onClick={handleRemove}
+                        >
+                            Remove
+                        </Button>
+                    </div>
+                </Modal>
+            </div>
+        </div>
+    );
+}

package/apps/www/tasks/index.tsx

@@ -22,6 +22,7 @@ import TasksSidebar, { TasksView } from "../../shared/components/tasks/TasksSide
 import TasksToolbar, { TasksViewMode } from "../../shared/components/tasks/TasksToolbar.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { findWellKnownFolderUid } from "../../shared/mail/findWellKnownFolderUid.js";
 
 const INPUT_CLASS =
     "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -63,7 +64,11 @@ const PRIORITY_CLASS: Record<TaskPriority, string> = {
 };
 
 function TasksContent() {
-    const { folderUid, mailboxUid, userUid } = useTasksShell();
+    const { folderUid, mailboxUid, userUid, mailboxes } = useTasksShell();
+    // The quick-add form's chosen mailbox - `undefined` means "the mailbox being viewed".
+    const [targetMailboxUid, setTargetMailboxUid] = useState<string | undefined>(undefined);
+    // Set after a task is added to a different mailbox than the one this list shows.
+    const [addedElsewhere, setAddedElsewhere] = useState<{ mailboxUid: string; title: string } | null>(null);
     const [tasks, setTasks] = useState<Task[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -97,6 +102,11 @@ function TasksContent() {
         void reload();
     }, [folderUid]);
 
+    useEffect(() => {
+        setTargetMailboxUid(undefined);
+        setAddedElsewhere(null);
+    }, [mailboxUid]);
+
     useEffect(() => {
         if (view.type !== "flagged" || !mailboxUid) {
             return;
@@ -119,16 +129,28 @@ function TasksContent() {
         if (!mailboxUid || !folderUid) {
             return;
         }
+        const target = targetMailboxUid ?? mailboxUid;
         setCreating(true);
         try {
+            const targetFolderUid = target === mailboxUid ? folderUid : await findWellKnownFolderUid(target, "tasks");
+            if (!targetFolderUid) {
+                setCreateError("That mailbox has no Tasks folder.");
+                return;
+            }
             const created = await createTask({
-                mailboxUid,
-                folderUid,
+                mailboxUid: target,
+                folderUid: targetFolderUid,
                 title: title.trim(),
                 dueDate: dueDate ? new Date(dueDate).toISOString() : undefined,
                 priority,
             });
-            setTasks((prev) => [...prev, created]);
+            if (target === mailboxUid) {
+                setAddedElsewhere(null);
+                setTasks((prev) => [...prev, created]);
+            } else {
+                // Created in another mailbox - it doesn't belong in this mailbox's list.
+                setAddedElsewhere({ mailboxUid: target, title: created.title });
+            }
             setTitle("");
             setDueDate("");
             setPriority("normal");
@@ -303,11 +325,38 @@ function TasksContent() {
                                     <option value="normal">Normal</option>
                                     <option value="high">High</option>
                                 </select>
+                                {mailboxes.length > 1 && (
+                                    <select
+                                        aria-label="Task mailbox"
+                                        className={`${INPUT_CLASS} max-w-40`}
+                                        value={targetMailboxUid ?? mailboxUid ?? ""}
+                                        onChange={(e) => setTargetMailboxUid(e.target.value)}
+                                    >
+                                        {mailboxes.map((mb) => (
+                                            <option key={mb.uid} value={mb.uid}>
+                                                {mb.displayName}
+                                                {mb.ownerUserUid === userUid ? "" : " (shared)"}
+                                            </option>
+                                        ))}
+                                    </select>
+                                )}
                                 <Button type="submit" loading={creating} disabled={creating} className="!w-auto shrink-0">
                                     Add
                                 </Button>
                             </form>
                             {createError && <Alert>{createError}</Alert>}
+                            {addedElsewhere && (
+                                <p role="status" className="text-sm py-2 px-3 rounded-sm bg-surface-alt text-text">
+                                    &ldquo;{addedElsewhere.title}&rdquo; was added to{" "}
+                                    {mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox"}.{" "}
+                                    <a
+                                        href={`/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`}
+                                        className="font-medium text-primary-dark hover:underline"
+                                    >
+                                        View that mailbox&rsquo;s tasks
+                                    </a>
+                                </p>
+                            )}
 
                             {loading ? (
                                 <p className="text-sm text-text-muted">Loading&hellip;</p>