CedarCopilot/cedar-mail

import { useCallback } from 'react';
import { useInboxes } from '@/modules/threads/hooks/use-inboxes';
import { SetupPreviewFrame } from '../components/SetupPreviewFrame';
import { SplitTemplateGallery } from '../components/SplitTemplateGallery';
import { useSetupPreview } from '../components/SetupPreviewContext';
import { LiveInboxPreview } from '../preview/LiveInboxPreview';
import { useSetupSplits } from '../hooks/use-setup-splits';

/**
 * The same picker as the previous step, now against the user's own mail.
 *
 * Adding a tab here selects it in the preview on the same frame — the id is
 * minted client-side and the optimistic row already carries it, so there is
 * nothing to wait for before showing the user what they just built.
 */
export function LiveInboxStepBody() {
  const { setActiveInboxId } = useSetupPreview();
  const onAdded = useCallback((id: string) => setActiveInboxId(id), [setActiveInboxId]);
  const { templates, isApplied, toggle } = useSetupSplits(onAdded);

  return <SplitTemplateGallery templates={templates} isApplied={isApplied} onToggle={toggle} />;
}

export function LiveInboxStepPreview() {
  const { inboxes, hasCustomInboxOrder } = useInboxes();
  const { activeInboxId, setActiveInboxId } = useSetupPreview();

  return (
    <SetupPreviewFrame label="Your mail">
      <LiveInboxPreview
        inboxes={inboxes}
        hasCustomInboxOrder={hasCustomInboxOrder}
        activeInboxId={activeInboxId}
        onSelectInbox={setActiveInboxId}
      />
    </SetupPreviewFrame>
  );
}