@rapidmx/web-client 0.15.1 → 0.17.0

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -2,14 +2,16 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, PropsWithChildren, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3, HiOutlinePencilSquare } from "react-icons/hi2";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import FloatingActionButton from "../../layout/FloatingActionButton.js";
+import { useLocation } from "@rapidrest/react/client";
+import { useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
@@ -17,15 +19,19 @@ import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
 import { LiveUpdates, NO_LIVE_UPDATES } from "../../../mail/useMailLiveUpdates.js";
 import { MAILBOX_LIST_LIMIT, MailConnectionContext, useMailConnection } from "../../../mail/useMailConnection.js";
 import { folderRows } from "../../../mail/folderTree.js";
+import { primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import {
     CountTracker,
     FolderBadge,
     FolderCount,
     badgeFor,
-    badgeLabel,
     countOfFolder,
     inboxUnreadTotal,
+    unreadBadgeTotal,
 } from "../../../mail/folderCounts.js";
+import { ALL_MAILBOXES_SECTION, useSidebarSections } from "../../../mail/useCollapsedSections.js";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+import SidebarSection from "./SidebarSection.js";
 import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
 import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
 import OutboxBadge from "../OutboxBadge.js";
@@ -96,6 +102,13 @@ export interface MailShellContextValue {
      * context value, which is only ever read outside a real shell.
      */
     trackMessageChange: (previous: Message, next: Message | null) => CountTracker;
+    /**
+     * Reads every mailbox's real folder counts back and shows them (after `delayMs`, 600 ms by default) - for a change too big to track message by
+     * message, such as emptying a folder. A no-op on the default context value, which is only ever read outside a real shell.
+     */
+    refreshFolderCounts: (delayMs?: number) => void;
+    /** A folder's counts as the sidebar shows them: what the shell has worked out or been told since it loaded, else what the folder was listed with. */
+    folderCountOf: (folder: Folder) => FolderCount;
     /**
      * The phone layout's header row beside the folders button, for the page to put its search box in (`createPortal()`): the shell
      * owns the row, the page owns the search state. `null` until the row has rendered, and on the default context value.
@@ -112,6 +125,8 @@ const MailShellContext = createContext<MailShellContextValue>({
     noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
     trackMessageChange: () => NO_TRACKER,
+    refreshFolderCounts: () => undefined,
+    folderCountOf: (folder) => ({ unread: folder.unreadCount, total: folder.totalCount }),
     mobileSearchSlot: null,
 });
 
@@ -143,21 +158,6 @@ function aggregateBadge(mailboxFolders: MailboxFolders[], type: AggregateFolderT
     return badgeFor(type, sum);
 }
 
-/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
-function FolderBadgeChip({ badge }: { badge: FolderBadge }) {
-    return (
-        <span
-            className={[
-                "text-xs rounded-pill py-0.5 px-1.5",
-                badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
-            ].join(" ")}
-        >
-            <span aria-hidden="true">{badge.value}</span>
-            <span className="sr-only"> {badgeLabel(badge)}</span>
-        </span>
-    );
-}
-
 type Status = "checking" | "error" | "ready";
 
 export { MAILBOX_LIST_LIMIT };
@@ -200,16 +200,13 @@ function ComposeButton({ mailboxUid }: { mailboxUid?: string }) {
 function MobileComposeButton({ mailboxUid }: { mailboxUid?: string }) {
     const { openCompose } = useCompose();
     return (
-        <button
-            type="button"
-            aria-label="New message"
+        <FloatingActionButton
+            label="New message"
+            icon={HiOutlinePencilSquare}
             onClick={() => openCompose({ mailboxUid })}
             onPointerEnter={prefetchComposeWindow}
             onFocus={prefetchComposeWindow}
-            className="md:hidden fixed right-4 bottom-[4.5rem] z-30 w-12 h-12 flex items-center justify-center rounded-full bg-primary text-white shadow-lg hover:bg-primary-dark"
-        >
-            <HiOutlinePencilSquare size={22} aria-hidden="true" />
-        </button>
+        />
     );
 }
 
@@ -227,18 +224,20 @@ function MailShortcuts({ mailboxUid }: { mailboxUid?: string }) {
 /**
  * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
  * aggregate section) + content area, rendered inside the shared `AppShell` chrome (icon rail, header,
- * impersonation banner — see that component). There is no client-side router in this framework (see
- * `ReactRoute`'s file-convention resolver) — the selected mailbox/folder (or aggregate pseudo-folder) live
- * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read once on mount (never during
- * the initial render itself, matching every other query-param reader in this codebase — e.g.
- * `apps/admin/quarantine`'s `readMailboxUid()` — so the server-rendered and just-hydrated client markup
- * match).
+ * impersonation banner — see that component). The selected mailbox/folder (or aggregate pseudo-folder) live
+ * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read from the router's location
+ * (`@rapidrest/react`), which is the request's on the server and while hydrating and follows a shallow
+ * navigation (a folder link) without remounting the page.
  *
  * Every accessible mailbox's folder tree renders at once - there is no "switch mailbox" affordance
  * anymore (the mailbox `<select>` this shell used to have is gone) - so a single-mailbox user sees zero
  * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
+ *
+ * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * primary mailbox.
  */
 export default function MailShell({
     userUid,
@@ -259,20 +258,16 @@ export default function MailShell({
     const { status, error, mailboxes, mailboxFolders, foldersLoading, onFolderCreated, noteFolderUids, live, folderCounts, outbox: outboxStatuses } = hosted ?? own;
     // The messages this tab is still handing to the server: the Outbox pill counts them at once.
     const pendingSends = usePendingSends();
-    const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
-    const [requestedFolderUid, setRequestedFolderUid] = useState<string | null>(null);
-    const [requestedAggregateType, setRequestedAggregateType] = useState<string | null>(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
 
-    // The selection lives in the URL, and the router (`AppRouter`) changes the URL without a page load when a folder link is
-    // clicked - so it is read from the router's location, which updates, rather than once from `window.location`. Still read
-    // in an effect, never during the first render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
-    useEffect(() => {
+    // The selection lives in the URL, and the router (`@rapidrest/react`) changes the URL without a page load when a folder link is
+    // clicked - a shallow navigation, which keeps this page and its state - so it is read from the router's location, which updates,
+    // rather than once from `window.location`. The location is the request's on the server and while hydrating (its `#fragment` is not
+    // sent, and no one here reads it), so the server render and the hydrating render agree and the selection is known from the first render.
+    const { search } = useLocation();
+    const { requestedMailboxUid, requestedFolderUid, requestedAggregateType } = useMemo(() => {
         const params = new URLSearchParams(search);
-        setRequestedMailboxUid(params.get("mailboxUid"));
-        setRequestedFolderUid(params.get("folderUid"));
-        setRequestedAggregateType(params.get("aggregate"));
+        return { requestedMailboxUid: params.get("mailboxUid"), requestedFolderUid: params.get("folderUid"), requestedAggregateType: params.get("aggregate") };
     }, [search]);
     // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
     // with the page - is closed here.
@@ -280,14 +275,20 @@ export default function MailShell({
         setDrawerOpen(false);
     }, [search]);
 
-    const aggregateFolderType: AggregateFolderType | undefined = isAggregateFolderType(requestedAggregateType)
-        ? requestedAggregateType
-        : undefined;
+    // What the address asks for.
+    const requestedAggregate: AggregateFolderType | undefined = isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
+    const requestedMailbox: string | undefined =
+        requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
 
-    const mailboxUid: string | undefined = aggregateFolderType
-        ? undefined
-        : (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-          mailboxes[0]?.uid;
+    // The mailbox the caller has not chosen: their own, never a shared one that merely sorts first. It is what compose, the new-message
+    // shortcut and everything else that needs a single mailbox use while an all-mailboxes view (which has none) is open.
+    const defaultMailboxUid = primaryMailboxUid(mailboxes, userUid);
+
+    // With several mailboxes the address that names nothing opens "All Mailboxes > Inbox", the merged Inbox; with one there is no such
+    // section, so it opens that mailbox's own Inbox. A mailbox, a folder or an all-mailboxes view in the address wins over either.
+    const aggregateByDefault = !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
+    const aggregateFolderType: AggregateFolderType | undefined = requestedAggregate ?? (aggregateByDefault ? "inbox" : undefined);
+    const mailboxUid: string | undefined = aggregateFolderType ? undefined : (requestedMailbox ?? defaultMailboxUid);
 
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid: string | undefined = aggregateFolderType
@@ -296,23 +297,33 @@ export default function MailShell({
           selectedMailboxFolders.find((f) => f.type === "inbox")?.uid;
 
     // The mailbox `KeyEnrollmentGate`/`LocalIndexLifecycle`/`ComposeButton` treat as "the" mailbox when
-    // there's no single selected one to use (aggregate mode) - the caller's own owned mailbox if they
-    // have one, else whichever accessible mailbox happens to be first. See MailShell's own doc comment on
+    // there's no single selected one to use (aggregate mode) - the caller's primary mailbox (`primaryMailbox()`). See MailShell's own doc comment on
     // this being an accepted limitation: an aggregate-view message from a *different*, not-yet-visited
     // mailbox may still need that mailbox's own folder view opened directly to unlock/decrypt it.
-    const defaultMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const activeMailboxUid = mailboxUid ?? defaultMailboxUid;
 
+    // Which sidebar sections are open: "All mailboxes" and the primary mailbox unless the reader chose otherwise. Any of them can be collapsed;
+    // a change of the open folder into another section opens that one (see `useSidebarSections()`); the first selection, once the address has been read
+    // and the mailboxes are here, is where a load lands, not a navigation. A lone mailbox has nothing to collapse, so its section is never a toggle.
+    const sections = useSidebarSections({
+        userUid,
+        primaryUid: defaultMailboxUid,
+        activeId: aggregateFolderType ? ALL_MAILBOXES_SECTION : mailboxUid,
+    });
+    const collapsible = mailboxes.length > 1;
+
     const counts = folderCounts.counts;
     const trackMessageChange = folderCounts.track;
+    const refreshFolderCounts = folderCounts.refresh;
+    const folderCountOf = useCallback((folder: Folder) => countOfFolder(folder, counts), [counts]);
     // `(3) Acme: Mail` in the tab strip while there is unread mail in an Inbox - kept by the frame when there is one.
     useUnreadTitle(inboxUnreadTotal(mailboxFolders, counts), { enabled: !hosted });
 
     // A state rather than a ref: the page reads it during its render, so it has to re-render once the row it names is in the document.
     const [mobileSearchSlot, setMobileSearchSlot] = useState<HTMLElement | null>(null);
     const contextValue = useMemo<MailShellContextValue>(
-        () => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot }),
-        [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot],
+        () => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot }),
+        [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot],
     );
 
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
@@ -345,7 +356,8 @@ export default function MailShell({
         // A function, not a plain JSX constant — it's rendered twice (desktop `<aside>` + mobile
         // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
         // unmounted).
-        const sidebarContent = () => (
+        // `idPrefix` keeps each section's folder list's id (which its heading's `aria-controls` names) unique between the two.
+        const sidebarContent = (idPrefix: string) => (
             <>
                 <div className="p-3">
                     <ComposeButton mailboxUid={defaultMailboxUid} />
@@ -357,91 +369,106 @@ export default function MailShell({
                 ) : (
                     <nav className="flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3">
                         {mailboxes.length > 1 && (
-                            <div>
-                                <div className="text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5">
-                                    All Mailboxes
-                                </div>
-                                <div className="flex flex-col gap-0.5">
-                                    {AGGREGATE_FOLDER_TYPES.map((type) => {
-                                        const badge = aggregateBadge(mailboxFolders, type, counts);
-                                        return (
-                                            <a
-                                                key={type}
-                                                href={`/?aggregate=${encodeURIComponent(type)}`}
-                                                className={[
-                                                    "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                                                    aggregateFolderType === type
-                                                        ? "bg-primary/10 text-primary-dark font-semibold"
-                                                        : "text-text hover:bg-surface-alt",
-                                                ].join(" ")}
-                                            >
-                                                <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>{FOLDER_LABELS[type]}</span>
-                                                {badge && <FolderBadgeChip badge={badge} />}
-                                            </a>
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                        )}
-                        {mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (
-                            <div key={mailbox.uid}>
-                                <div className="text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate">
-                                    {mailbox.displayName}
-                                    {mailbox.ownerUserUid ? "" : " (shared)"}
-                                </div>
-                                {mailboxError && (
-                                    <div className="px-2.5 pb-1">
-                                        <Alert>{mailboxError}</Alert>
-                                    </div>
-                                )}
-                                <div className="flex flex-col gap-0.5">
-                                    {folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
-                                        if (row.kind === "placeholder") {
-                                            // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
-                                            // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
-                                            const sending = pendingCountFor(mailbox.uid, pendingSends);
-                                            return (
-                                                <div
-                                                    key={`placeholder-${row.type}`}
-                                                    data-folder-placeholder={row.type}
-                                                    className="flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted"
-                                                >
-                                                    <span>{FOLDER_LABELS[row.type]}</span>
-                                                    {row.type === "outbox" && <OutboxBadge total={sending} pendingHere={sending} />}
-                                                </div>
-                                            );
-                                        }
-                                        const folder = row.folder;
-                                        const badge = badgeFor(folder.type, countOfFolder(folder, counts));
-                                        return (
+                            <SidebarSection
+                                domId={`${idPrefix}-mail-section-${ALL_MAILBOXES_SECTION}`}
+                                label="All Mailboxes"
+                                collapsible={collapsible}
+                                expanded={sections.isExpanded(ALL_MAILBOXES_SECTION)}
+                                onToggle={() => sections.toggle(ALL_MAILBOXES_SECTION)}
+                                unread={unreadBadgeTotal(mailboxFolders.flatMap((mf) => mf.folders), counts)}
+                            >
+                                {AGGREGATE_FOLDER_TYPES.map((type) => {
+                                    const badge = aggregateBadge(mailboxFolders, type, counts);
+                                    return (
                                         <a
-                                            key={folder.uid}
-                                            href={`/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`}
+                                            key={type}
+                                            href={`/?aggregate=${encodeURIComponent(type)}`}
+                                            data-router-shallow=""
+                                            data-router-prefetch="false"
                                             className={[
                                                 "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                                                folder.uid === folderUid
+                                                aggregateFolderType === type
                                                     ? "bg-primary/10 text-primary-dark font-semibold"
                                                     : "text-text hover:bg-surface-alt",
                                             ].join(" ")}
                                         >
-                                            <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>
-                                                {FOLDER_LABELS[folder.type] ?? folder.name}
-                                            </span>
-                                            {badge &&
-                                                (folder.type === "outbox" ? (
-                                                    <OutboxBadge
-                                                        total={badge.value}
-                                                        status={outboxStatuses[folder.uid]}
-                                                        pendingHere={pendingCountFor(mailbox.uid, pendingSends)}
-                                                    />
-                                                ) : (
-                                                    <FolderBadgeChip badge={badge} />
-                                                ))}
+                                            <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>{FOLDER_LABELS[type]}</span>
+                                            {badge && <FolderBadgeChip badge={badge} />}
                                         </a>
+                                    );
+                                })}
+                            </SidebarSection>
+                        )}
+                        {mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (
+                            <SidebarSection
+                                key={mailbox.uid}
+                                domId={`${idPrefix}-mail-section-${mailbox.uid}`}
+                                label={
+                                    <>
+                                        {mailbox.displayName}
+                                        {mailbox.ownerUserUid ? "" : " (shared)"}
+                                    </>
+                                }
+                                collapsible={collapsible}
+                                expanded={sections.isExpanded(mailbox.uid)}
+                                onToggle={() => sections.toggle(mailbox.uid)}
+                                unread={unreadBadgeTotal(folders, counts)}
+                                notice={
+                                    mailboxError && (
+                                        <div className="px-2.5 pb-1">
+                                            <Alert>{mailboxError}</Alert>
+                                        </div>
+                                    )
+                                }
+                            >
+                                {folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
+                                    if (row.kind === "placeholder") {
+                                        // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
+                                        // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
+                                        const sending = pendingCountFor(mailbox.uid, pendingSends);
+                                        return (
+                                            <div
+                                                key={`placeholder-${row.type}`}
+                                                data-folder-placeholder={row.type}
+                                                className="flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted"
+                                            >
+                                                <span>{FOLDER_LABELS[row.type]}</span>
+                                                {row.type === "outbox" && <OutboxBadge total={sending} pendingHere={sending} />}
+                                            </div>
                                         );
-                                    })}
-                                </div>
-                            </div>
+                                    }
+                                    const folder = row.folder;
+                                    const badge = badgeFor(folder.type, countOfFolder(folder, counts));
+                                    return (
+                                    <a
+                                        key={folder.uid}
+                                        href={`/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`}
+                                        data-router-shallow=""
+                                        data-router-prefetch="false"
+                                        className={[
+                                            "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                            folder.uid === folderUid
+                                                ? "bg-primary/10 text-primary-dark font-semibold"
+                                                : "text-text hover:bg-surface-alt",
+                                        ].join(" ")}
+                                    >
+                                        <span className={badge?.kind === "unread" ? "font-semibold" : undefined}>
+                                            {FOLDER_LABELS[folder.type] ?? folder.name}
+                                        </span>
+                                        {badge &&
+                                            (folder.type === "outbox" ? (
+                                                <OutboxBadge
+                                                    total={badge.value}
+                                                    status={outboxStatuses[folder.uid]}
+                                                    pendingHere={pendingCountFor(mailbox.uid, pendingSends)}
+                                                />
+                                            ) : (
+                                                <FolderBadgeChip badge={badge} />
+                                            ))}
+                                    </a>
+                                    );
+                                })}
+                            </SidebarSection>
                         ))}
                     </nav>
                 )}
@@ -451,9 +478,9 @@ export default function MailShell({
         inner = (
             <>
                 <MailShortcuts mailboxUid={defaultMailboxUid} />
-                <aside className="hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col">{sidebarContent()}</aside>
-                <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Folders">
-                    <div className="flex flex-col">{sidebarContent()}</div>
+                <aside className="hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col">{sidebarContent("desktop")}</aside>
+                <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Folders" fullScreen>
+                    <div className="flex flex-col">{sidebarContent("mobile")}</div>
                 </Drawer>
                 <main className="flex-1 min-w-0 overflow-y-auto">
                     <div className="md:hidden flex items-center gap-2 p-3">

package/apps/shared/components/mail/layout/SidebarSection.tsx

@@ -0,0 +1,66 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import { HiChevronDown } from "react-icons/hi2";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+
+export interface SidebarSectionProps {
+    /** Unique per rendering of the sidebar (it is on screen twice on a phone: beside the list and in the drawer): names the folder list the heading controls. */
+    domId: string;
+    /** The heading's text. */
+    label: ReactNode;
+    /** Whether the heading is a toggle at all. Not for a lone mailbox, whose section has nothing to be hidden for. */
+    collapsible: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    /** The unread mail in the section's folders that carry an unread count (see `unreadBadgeTotal()`), shown on the heading while it is collapsed (and only when there is some) so new mail in a hidden section is still noticed. */
+    unread?: number;
+    /** Shown between the heading and the folders, collapsed or not: a failure to load the section's folders is not something to hide. */
+    notice?: ReactNode;
+    /** The section's folder rows. */
+    children: ReactNode;
+}
+
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread = 0, notice, children }: SidebarSectionProps) {
+    const shown = !collapsible || expanded;
+    return (
+        <div>
+            {collapsible ? (
+                <h2 className="mb-1">
+                    <button
+                        type="button"
+                        aria-expanded={expanded}
+                        aria-controls={domId}
+                        onClick={onToggle}
+                        className={[
+                            "flex w-full items-center gap-1 rounded-sm px-2.5 py-0.5 text-left text-xs font-bold uppercase tracking-wide text-text-muted",
+                            "focus-visible:outline-2 focus-visible:outline-primary",
+                            "hover:bg-surface-alt hover:text-text",
+                        ].join(" ")}
+                    >
+                        <HiChevronDown
+                            size={14}
+                            aria-hidden="true"
+                            className={["shrink-0 transition-transform", expanded ? "" : "-rotate-90"].join(" ")}
+                        />
+                        <span className="min-w-0 flex-1 truncate">{label}</span>
+                        {!expanded && unread > 0 && <FolderBadgeChip badge={{ kind: "unread", value: unread }} />}
+                    </button>
+                </h2>
+            ) : (
+                <div className="text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate">{label}</div>
+            )}
+            {notice}
+            <div id={domId} hidden={!shown} className={shown ? "flex flex-col gap-0.5" : "hidden"}>
+                {children}
+            </div>
+        </div>
+    );
+}