@rapidmx/web-client 0.10.0 → 0.11.0

package/apps/shared/components/settings/SigningCertificateCard.tsx

@@ -0,0 +1,344 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineCheckCircle, HiOutlineExclamationTriangle, HiOutlineXCircle } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import type { EnrollmentResult, SignEnrollmentStep } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import type { EnrollmentSnapshot } from "../../signing/enrollmentTracker.js";
+import type { SigningEnrollmentInfo } from "../../signing/signingInfo.js";
+import {
+    CA_UNREACHABLE_TEXT,
+    MANUAL_ISSUE_TEXT,
+    PENDING_FALLBACK_TEXT,
+    expiryOf,
+    formatDate,
+    formatDateTime,
+    healthWarning,
+    isInstalling,
+    isOverdue,
+    issueModeOf,
+    progressOf,
+    requestedFromText,
+    relativeTime,
+    statusLineOf,
+    stepsOf,
+    timeOf,
+    truncateSerial,
+} from "../../signing/enrollmentView.js";
+import { useNow } from "../../signing/useNow.js";
+
+export type SigningCertificateMode = "pending" | "issued" | "failed" | "expired";
+
+export interface SigningCertificateCardProps {
+    mode: SigningCertificateMode;
+    /** What the server last said about the enrollment (the extended fields are all optional - an older server sends only `status`). */
+    enrollment: EnrollmentResult | null;
+    /** The tracker's view of it: busy flags, the check cooldown, the last check. Absent when nothing is being followed. */
+    snapshot?: EnrollmentSnapshot;
+    /** For an issued certificate when the enrollment carries no details (one installed long ago): the active key's own expiry (epoch ms). */
+    keyNotAfter?: number;
+    /** How this deployment issues certificates (`GET /system/signing-enrollment`): what a pending request says follows it. `null` / absent when it is not known. */
+    info?: SigningEnrollmentInfo | null;
+    /** The mailbox's address - the one the CA's verification e-mail goes to. */
+    address?: string;
+    /** Only the mailbox's owner can request a certificate. */
+    canRequest: boolean;
+    /** "Try again" / "Renew" / "Request a new certificate" is under way. */
+    requesting: boolean;
+    onCheck?: () => void;
+    onRequest?: () => void;
+}
+
+const BADGE: Record<SigningCertificateMode, { text: string; className: string }> = {
+    pending: { text: "Pending", className: "bg-primary/15 text-primary-dark" },
+    issued: { text: "Active", className: "bg-success/15 text-success" },
+    failed: { text: "Failed", className: "bg-danger/15 text-danger" },
+    expired: { text: "Expired", className: "bg-danger/15 text-danger" },
+};
+
+const STEP_TEXT: Record<SignEnrollmentStep["state"], string> = {
+    done: "done",
+    active: "in progress",
+    pending: "waiting",
+    failed: "failed",
+};
+
+function StepIcon({ state }: { state: SignEnrollmentStep["state"] }) {
+    if (state === "done") {
+        return <HiOutlineCheckCircle size={18} aria-hidden="true" className="shrink-0 text-success" />;
+    }
+    if (state === "failed") {
+        return <HiOutlineXCircle size={18} aria-hidden="true" className="shrink-0 text-danger" />;
+    }
+    if (state === "active") {
+        return (
+            <span aria-hidden="true" className="flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+                <span className="h-3.5 w-3.5 rounded-full border-2 border-primary/30 border-t-primary motion-safe:animate-spin motion-reduce:border-primary" />
+            </span>
+        );
+    }
+    return (
+        <span aria-hidden="true" className="flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+            <span className="h-3 w-3 rounded-full border-2 border-border" />
+        </span>
+    );
+}
+
+function Stepper({ steps }: { steps: SignEnrollmentStep[] }) {
+    return (
+        <ol aria-label="Certificate steps" className="flex flex-col gap-2">
+            {steps.map((step) => (
+                <li key={step.id} className="flex items-start gap-2 text-sm" aria-current={step.state === "active" ? "step" : undefined}>
+                    <StepIcon state={step.state} />
+                    <span className={step.state === "pending" ? "text-text-muted" : "text-text"}>
+                        {step.label}
+                        <span className="sr-only"> - {STEP_TEXT[step.state]}</span>
+                    </span>
+                    {step.at && <span className="ml-auto shrink-0 text-xs text-text-muted">{formatDateTime(step.at)}</span>}
+                </li>
+            ))}
+        </ol>
+    );
+}
+
+/**
+ * The progress bar: determinate when the server says how far along it is, an endless shimmer while a step is active and no number is known.
+ * `role="progressbar"` with `aria-valuenow` (left off when unknown, as ARIA says for an indeterminate bar) and a `aria-valuetext` in words.
+ */
+function ProgressBar({ value, text }: { value: number | undefined; text: string }) {
+    return (
+        <div
+            role="progressbar"
+            aria-label="Certificate progress"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={value}
+            aria-valuetext={text}
+            className="h-2 w-full overflow-hidden rounded-pill bg-border/60"
+        >
+            {value === undefined ? (
+                <div className="rr-progress-indeterminate h-full w-1/3 rounded-pill bg-primary motion-reduce:w-full motion-reduce:opacity-40" />
+            ) : (
+                <div
+                    className="rr-progress-shimmer h-full rounded-pill bg-primary transition-[width] duration-500"
+                    style={{ width: `${Math.max(value, value > 0 ? 3 : 0)}%` }}
+                />
+            )}
+        </div>
+    );
+}
+
+function Detail({ label, children }: { label: string; children: React.ReactNode }) {
+    return (
+        <div className="grid grid-cols-[6.5rem_1fr] gap-2 text-sm sm:grid-cols-[8rem_1fr]">
+            <dt className="text-text-muted">{label}</dt>
+            <dd className="min-w-0 break-words">{children}</dd>
+        </div>
+    );
+}
+
+/** The sentence under the button: what the last manual check found, or why it cannot be pressed again yet. */
+function checkMessage(snapshot: EnrollmentSnapshot | undefined, statusLine: string | undefined, now: number): string | undefined {
+    if (snapshot?.offline) {
+        return "Could not reach the server - showing what was last known.";
+    }
+    const last = snapshot?.lastCheck;
+    if (!last) {
+        return undefined;
+    }
+    if (last.outcome === "failed") {
+        return "Could not check just now - try again in a moment.";
+    }
+    if (last.outcome === "limited") {
+        return "Checked a moment ago - please wait a few seconds before checking again.";
+    }
+    if (last.outcome === "changed") {
+        return `Updated - ${statusLine ?? "the status changed"}`;
+    }
+    return `Still waiting - checked ${relativeTime(last.at, now)}`;
+}
+
+/**
+ * Settings > Encryption's "Digital signature certificate" card: where a signing-certificate enrollment is, in the words of the person waiting for
+ * it. A progress bar (determinate from the server's `progress`), the steps with a state icon and time each, a status line, when it was requested
+ * and last checked (kept current), and a "Check status" button with a busy state and a cooldown. An issued certificate shows its subject, issuer,
+ * serial (copyable) and expiry with a warning (and "Renew") inside 30 days; a failed one shows the reason and "Try again"; an expired one offers a
+ * new request. Everything but `mode` is optional so a server that only says `pending`/`issued`/`failed` still gets a useful card.
+ */
+export default function SigningCertificateCard({ mode, enrollment, snapshot, keyNotAfter, info, address, canRequest, requesting, onCheck, onRequest }: SigningCertificateCardProps) {
+    const busy = mode === "pending" || (snapshot?.retryAt ?? 0) > Date.now();
+    const now = useNow(busy ? 1000 : 30_000);
+    const steps = stepsOf(enrollment);
+    const progress = progressOf(enrollment);
+    const statusLine = statusLineOf(enrollment);
+    // Any of the newer fields gives a percentage (the server's, or the share of steps done), so this is "the server told us more than pending".
+    const detailed = progress !== undefined;
+    const badge = BADGE[mode];
+    // What the words say depends on how this deployment issues certificates: a public CA does it by itself, an administrator uploads it, or nobody has said.
+    const issueMode = issueModeOf(enrollment, info);
+    const problem = healthWarning(info);
+
+    const notAfter = enrollment?.notAfter ?? keyNotAfter;
+    const expiry = expiryOf(notAfter, now);
+    const requestedAgo = relativeTime(enrollment?.requestedAt, now);
+    const checkedAt = timeOf(enrollment?.lastCheckedAt) ?? snapshot?.answeredAt ?? undefined;
+    const checkedAgo = relativeTime(checkedAt, now);
+    const waitSeconds = Math.max(0, Math.ceil(((snapshot?.retryAt ?? 0) - now) / 1000));
+    const checkingNow = snapshot?.checkingNow ?? false;
+    const message = checkMessage(snapshot, statusLine, now);
+    const overdue = isOverdue(enrollment, now);
+
+    return (
+        <section aria-label="Digital signature certificate" className="flex flex-col gap-3 rounded-md border border-border bg-surface p-4">
+            <div className="flex items-center justify-between gap-2">
+                <h3 className="text-sm font-semibold">Digital signature certificate</h3>
+                <span className={["rounded-pill px-2 py-0.5 text-xs font-bold", badge.className].join(" ")}>{badge.text}</span>
+            </div>
+
+            {mode === "pending" && (
+                <>
+                    {issueMode === "manual" ? (
+                        <>
+                            <p className="text-sm">{MANUAL_ISSUE_TEXT}</p>
+                            {info?.contactEmail && <p className="text-xs text-text-muted">Administrator: {info.contactEmail}</p>}
+                        </>
+                    ) : (
+                        <>
+                            {issueMode === "automatic" && <p className="text-sm text-text-muted">{requestedFromText(info, address)}</p>}
+                            {detailed ? (
+                                <>
+                                    <p className="text-sm">{statusLine ?? "In progress"}</p>
+                                    <ProgressBar value={progress} text={`${progress} percent - ${statusLine ?? "in progress"}`} />
+                                </>
+                            ) : (
+                                <>
+                                    <ProgressBar value={undefined} text="In progress" />
+                                    {issueMode === "unknown" && <p className="text-sm text-text-muted">{PENDING_FALLBACK_TEXT}</p>}
+                                </>
+                            )}
+                        </>
+                    )}
+                    {problem && (
+                        <div role="alert" className="flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm">
+                            <HiOutlineExclamationTriangle size={18} aria-hidden="true" className="mt-0.5 shrink-0 text-danger" />
+                            <span>{problem}</span>
+                        </div>
+                    )}
+                    {overdue && (
+                        <p className="text-sm">
+                            This is taking longer than expected{checkedAgo ? ` - last checked ${checkedAgo}` : ""}. Use Check status to ask again.
+                        </p>
+                    )}
+                    {enrollment?.errorCode === "ca-unreachable" && <p className="text-sm text-text-muted">{CA_UNREACHABLE_TEXT}</p>}
+                    {enrollment?.note && <p className="text-xs text-text-muted">{enrollment.note}</p>}
+                    {steps.length > 0 && <Stepper steps={steps} />}
+                    {issueMode === "automatic" && (
+                        <p className="text-xs text-text-muted">You can leave this page - you will be told when the certificate is issued or the request fails.</p>
+                    )}
+                    {(requestedAgo || checkedAgo) && (
+                        <p className="text-xs text-text-muted">
+                            {requestedAgo ? `Requested ${issueMode === "manual" ? formatDateTime(enrollment?.requestedAt) : requestedAgo}` : ""}
+                            {requestedAgo && checkedAgo ? " - " : ""}
+                            {checkedAgo ? `last checked ${checkedAgo}` : ""}
+                        </p>
+                    )}
+                    {onCheck && (
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                loading={checkingNow}
+                                disabled={checkingNow || waitSeconds > 0}
+                                aria-busy={checkingNow}
+                                onClick={onCheck}
+                            >
+                                {checkingNow ? "Checking..." : waitSeconds > 0 ? `Check again in ${waitSeconds} s` : "Check status"}
+                            </Button>
+                            <span role="status" aria-live="polite" className="text-xs text-text-muted">
+                                {message}
+                            </span>
+                        </div>
+                    )}
+                </>
+            )}
+
+            {mode === "issued" && (
+                <>
+                    <p className="text-sm">
+                        {isInstalling(enrollment)
+                            ? statusLineOf(enrollment)
+                            : notAfter !== undefined
+                              ? `Issued - valid until ${formatDate(notAfter)}`
+                              : "Issued"}
+                    </p>
+                    {enrollment?.note && <p className="text-xs text-text-muted">{enrollment.note}</p>}
+                    {expiry.state === "soon" && (
+                        <div role="alert" className="flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm">
+                            <HiOutlineExclamationTriangle size={18} aria-hidden="true" className="mt-0.5 shrink-0 text-danger" />
+                            <span>
+                                This certificate expires {expiry.daysLeft === 1 ? "tomorrow" : `in ${expiry.daysLeft} days`}. Renew it so your mail stays signed.
+                            </span>
+                        </div>
+                    )}
+                    {(enrollment?.subject || enrollment?.issuer || enrollment?.serialNumber || enrollment?.issuedAt) && (
+                        <dl className="flex flex-col gap-1.5">
+                            {enrollment.subject && <Detail label="Subject">{enrollment.subject}</Detail>}
+                            {enrollment.issuer && <Detail label="Issuer">{enrollment.issuer}</Detail>}
+                            {enrollment.serialNumber && (
+                                <Detail label="Serial number">
+                                    <span className="inline-flex flex-wrap items-center gap-2">
+                                        <span className="font-mono text-xs" title={enrollment.serialNumber}>
+                                            {truncateSerial(enrollment.serialNumber)}
+                                        </span>
+                                        <CopyButton value={enrollment.serialNumber} label="Copy the certificate's serial number" />
+                                    </span>
+                                </Detail>
+                            )}
+                            {enrollment.issuedAt && <Detail label="Issued">{formatDate(enrollment.issuedAt)}</Detail>}
+                            {notAfter !== undefined && <Detail label="Valid until">{formatDate(notAfter)}</Detail>}
+                        </dl>
+                    )}
+                    {canRequest && onRequest && expiry.state === "soon" && (
+                        <div>
+                            <Button type="button" variant="secondary" className="!w-auto" loading={requesting} disabled={requesting} onClick={onRequest}>
+                                Renew
+                            </Button>
+                        </div>
+                    )}
+                </>
+            )}
+
+            {mode === "failed" && (
+                <>
+                    <Alert>{statusLine ?? "Failed: the certificate could not be issued."}</Alert>
+                    {steps.length > 0 && <Stepper steps={steps} />}
+                    {canRequest && onRequest && enrollment?.retryable !== false && (
+                        <div>
+                            <Button type="button" variant="secondary" className="!w-auto" loading={requesting} disabled={requesting} onClick={onRequest}>
+                                Try again
+                            </Button>
+                        </div>
+                    )}
+                </>
+            )}
+
+            {mode === "expired" && (
+                <>
+                    <p className="text-sm">{notAfter !== undefined ? `Expired on ${formatDate(notAfter)}. Mail from this mailbox is no longer signed.` : "This certificate has expired. Mail from this mailbox is no longer signed."}</p>
+                    {canRequest && onRequest && (
+                        <div>
+                            <Button type="button" variant="secondary" className="!w-auto" loading={requesting} disabled={requesting} onClick={onRequest}>
+                                Request a new certificate
+                            </Button>
+                        </div>
+                    )}
+                </>
+            )}
+        </section>
+    );
+}

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -22,6 +22,7 @@ export interface SettingsSectionDef {
 
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS: SettingsSectionDef[] = [
+    { id: "appearance", href: "/settings/appearance", label: "Appearance" },
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
     { id: "signatures", href: "/settings/signatures", label: "Signatures" },

package/apps/shared/components/sharing/PrincipalPicker.tsx

@@ -0,0 +1,145 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 {
+    MailboxAccessRole,
+    ResolvedPrincipal,
+    resolveMailboxPrincipal,
+    setMailboxAccess,
+} from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export interface PrincipalPickerProps {
+    mailboxUid: string;
+    /** What each access level is called on this page. */
+    roleLabels: Record<MailboxAccessRole, string>;
+    /** Text put in the box to start with - a stored entry being replaced, say. */
+    initialPrincipal?: string;
+    /** The access level pre-selected. */
+    defaultRole?: MailboxAccessRole;
+    /** What the box asks for. */
+    placeholder?: string;
+    /** Called once the grant is saved, with the person it went to. */
+    onGranted: (person: ResolvedPrincipal, role: MailboxAccessRole) => void | Promise<void>;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+
+/** Who a resolved person is, for a person to check before saving: their name and address, else their uid. */
+export function describePerson(person: ResolvedPrincipal): string {
+    if (person.displayName && person.address) return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+
+/**
+ * "Who?" for a sharing screen. What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id -
+ * is RESOLVED by the server (`resolveMailboxPrincipal()`) to the person it names before anything is saved, and the person
+ * is shown (name and address) for the caller to confirm; only then is the grant made, against that person's uid. Free text
+ * is never stored: an ACL record matches a user uid and nothing else, so a grant to a typed username applies to nobody.
+ */
+export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole = "viewer", placeholder, onGranted, onCancel }: PrincipalPickerProps) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [role, setRole] = useState<MailboxAccessRole>(defaultRole);
+    const [person, setPerson] = useState<ResolvedPrincipal | null>(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+
+    async function find(principal: string) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolveMailboxPrincipal(mailboxUid, principal));
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    function handleFind(e: FormEvent) {
+        e.preventDefault();
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleGrant() {
+        setBusy(true);
+        setError(null);
+        try {
+            await setMailboxAccess(mailboxUid, person!.userUid, role);
+            await onGranted(person!, role);
+            setTyped("");
+            setPerson(null);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            {error && <Alert>{error}</Alert>}
+            <form onSubmit={handleFind} className="flex gap-2">
+                <input
+                    type="text"
+                    aria-label="Who to share with"
+                    placeholder={placeholder ?? "Email address, username or user id"}
+                    className="flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text"
+                    value={typed}
+                    onChange={(e) => {
+                        setTyped(e.target.value);
+                        setPerson(null);
+                    }}
+                    disabled={busy}
+                />
+                <select
+                    aria-label="Access level"
+                    className="text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text"
+                    value={role}
+                    onChange={(e) => setRole(e.target.value as MailboxAccessRole)}
+                    disabled={busy}
+                >
+                    {(Object.keys(roleLabels) as MailboxAccessRole[]).map((value) => (
+                        <option key={value} value={value}>
+                            {roleLabels[value]}
+                        </option>
+                    ))}
+                </select>
+                <Button type="submit" variant="secondary" loading={busy && !person} disabled={busy} className="!w-auto">
+                    Find
+                </Button>
+                {onCancel && (
+                    <Button type="button" variant="text" className="!w-auto" onClick={onCancel}>
+                        Cancel
+                    </Button>
+                )}
+            </form>
+            {person && (
+                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
+                    <span>
+                        Share with <strong className="break-all">{describePerson(person)}</strong> as <em>{roleLabels[role]}</em>?
+                    </span>
+                    <Button type="button" loading={busy} disabled={busy} className="!w-auto" onClick={() => void handleGrant()}>
+                        Grant
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/tasks/TasksSidebar.tsx

@@ -7,6 +7,7 @@ import { HiOutlineBars3 } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Task, TaskList, createTaskList, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
 
 export type TasksView =
     | { type: "myDay" }
@@ -102,7 +103,8 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
             setNewListName("");
             setAddingList(false);
         } catch (err) {
-            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+            // A pop-up: `listsError` is only the lists' own load failure.
+            notifyApiError(err, "Couldn't create the list");
         }
     }
 
@@ -184,13 +186,13 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
         <>
             <button
                 type="button"
-                className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                className="lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
                 aria-label="Open tasks menu"
                 onClick={() => setDrawerOpen(true)}
             >
                 <HiOutlineBars3 size={20} aria-hidden="true" />
             </button>
-            <nav aria-label="Tasks" className="hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto">
+            <nav aria-label="Tasks" className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto">
                 {navContent("desktop")}
             </nav>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Tasks">

package/apps/shared/components/tasks/layout/TasksShell.tsx

@@ -171,19 +171,23 @@ export default function TasksShell({
             </>
         );
 
+        // With a single mailbox and no error this column would be empty: no 224 px of nothing beside the tasks' own menu.
+        const hasSidebar = mailboxes.length > 1 || !!folderError;
         inner = (
             <>
-                <aside className="hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3">
-                    {sidebarContent("desktop")}
-                </aside>
+                {hasSidebar && (
+                    <aside className="hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3">
+                        {sidebarContent("desktop")}
+                    </aside>
+                )}
                 <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Mailbox">
                     <div className="flex flex-col gap-3">{sidebarContent("mobile")}</div>
                 </Drawer>
                 <main className="flex-1 min-w-0 flex flex-col">
-                    {(mailboxes.length > 1 || folderError) && (
+                    {hasSidebar && (
                         <button
                             type="button"
-                            className="md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
+                            className="lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text"
                             aria-label="Open mailbox switcher"
                             onClick={() => setDrawerOpen(true)}
                         >

package/apps/shared/mail/folderCounts.ts

@@ -132,10 +132,10 @@ export interface FolderCounts {
  * Holds the folder counts overlay for `MailShell`. `folders` is every folder the sidebar lists (the overlay starts from what
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
-export function useFolderCounts(mailboxes: Mailbox[], folders: Folder[]): FolderCounts {
+export function useFolderCounts(mailboxes: Mailbox[], folders: Folder[], onFoldersListed?: (folders: Folder[]) => void): FolderCounts {
     const [counts, setCounts] = useState<Record<string, FolderCount>>({});
-    const latestRef = useRef({ mailboxes, folders });
-    latestRef.current = { mailboxes, folders };
+    const latestRef = useRef({ mailboxes, folders, onFoldersListed });
+    latestRef.current = { mailboxes, folders, onFoldersListed };
     // Bumped by every change of the overlay this page makes, so a read that started before one can tell it is out of date.
     const changesRef = useRef(0);
     const inFlightRef = useRef(0);
@@ -189,6 +189,12 @@ export function useFolderCounts(mailboxes: Mailbox[], folders: Folder[]): Folder
         if (stoppedRef.current || run !== runRef.current) {
             return;
         }
+        // Whatever the counts' fate below, these are the mailboxes' folders as they are: a folder the sidebar does not have yet is filed now.
+        for (const list of results) {
+            if (list) {
+                latestRef.current.onFoldersListed?.(list);
+            }
+        }
         if (inFlightRef.current > 0 || changesRef.current !== startedAt) {
             // A change of this page's own began or ended while that was being read, so it may predate it: read again.
             refresh();