investor-flow/app/src/components/LayoutShell.tsx

"use client";
import { useEffect } from "react";
import { SidebarNav } from "./SidebarNav";
import { WatchlistSidebar } from "./WatchlistSidebar";
import { SymbolHeader } from "./SymbolHeader";
import { CollapsibleProvider, useCollapsibleContext } from "@/lib/collapsible-context";

/**
 * Inner component that attaches the global Escape listener.
 * Wrapped in CollapsibleProvider so all CollapsibleSections can register.
 */
function LayoutShellInner({ children }: { children: React.ReactNode }) {
  const { openSectionId, setOpenSectionId } = useCollapsibleContext();

  // Global Escape listener: collapse the currently open section.
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape" && openSectionId) {
        e.preventDefault();
        // Collapse the currently open section by clearing the shared state.
        // Individual CollapsibleSection Escape handlers also respond to this.
        setOpenSectionId(null);
      }
    };
    window.addEventListener("keydown", handler, true); // capture phase
    return () => window.removeEventListener("keydown", handler, true);
  }, [openSectionId, setOpenSectionId]);

  return (
    <div className="min-h-screen bg-[#0a0b0f] text-[#e6e7ec] flex flex-col">
      {/* Symbol Header — always visible */}
      <SymbolHeader />

      {/* Main Content Area */}
      <div className="flex flex-1 overflow-hidden">
        {/* Left Sidebar Navigation — hidden on tablet/mobile */}
        <SidebarNav />

        {/* Watchlist Sidebar — hidden on mobile */}
        <WatchlistSidebar />

        {/* Content */}
        <main className="flex-1 overflow-y-auto p-4 sm:p-6">
          <div className="max-w-7xl mx-auto space-y-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

/**
 * Main layout shell for the redesigned terminal.
 * - Desktop (>1024px): Sidebar + Watchlist + Header + Content (3-column)
 * - Tablet (768-1024px): Watchlist + Header + Content (2-column, sidebar hidden)
 * - Mobile (<768px): Header + Content (single column)
 */
export function LayoutShell({ children }: { children: React.ReactNode }) {
  return (
    <CollapsibleProvider>
      <LayoutShellInner>{children}</LayoutShellInner>
    </CollapsibleProvider>
  );
}