CedarCopilot/cedar-mail

import { useMemo } from 'react';
import { getRowInboxOrder, useInboxes } from '@/modules/threads/hooks/use-inboxes';
import { InboxSection } from '@/modules/threads/components/inbox-section';

/**
 * Top-level body of the `/mail/inbox` route when `inboxLayout === 'stacked'`.
 * Renders one collapsible `<InboxSection>` per configured inbox in the same
 * canonical order as the tab strip (Important, customs..., Other).
 *
 * Sections load in PARALLEL. They used to load sequentially — only the first N
 * were allowed to fetch, N advancing each time a section reported its first
 * fetch had settled — to avoid firing every per-inbox listThreads at once on
 * mount. That traded a load spike for two worse properties:
 *
 *   - time to fill the view became the SUM of every container's listThreads
 *     latency instead of the slowest one, and
 *   - a container whose query never settled pinned every container below it at
 *     `enabled: false` forever. Those issued no request at all, so they showed
 *     stale mail with no spinner, no error, and no server-side log line.
 *
 * That second property is what <email> hit on 2026-08-04:
 * six hours of staging telemetry for her connection had 25 of 25 listThreads
 * calls for a single container ("Starred") and none for any other, while her
 * inbox sat 10+ messages behind Gmail.
 *
 * The containers are independent queries — none of them informs another — so
 * there is no ordering to preserve. If the mount-time burst needs shaping
 * again, bound it with a concurrency window that advances on a timer as well
 * as on completion; never gate one container on another's success.
 */
export function StackedInboxView() {
  const { inboxes, hasCustomInboxOrder } = useInboxes();
  const sectionInboxes = useMemo(
    () => getRowInboxOrder(inboxes, hasCustomInboxOrder),
    [inboxes, hasCustomInboxOrder],
  );

  return (
    <div className="flex h-full w-full flex-col overflow-y-auto" id="stacked-inbox-scroll">
      {sectionInboxes.map((inbox) => (
        <InboxSection key=[redacted] inbox={inbox} />
      ))}
    </div>
  );
}