leocrm/frontend/src/components/layout/AppShell.tsx

import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { TopBar } from './TopBar';
import { PluginToolbar } from './PluginToolbar';
import { AISidebar } from './AISidebar';
import { ToastContainer } from '@/components/ui/Toast';
import { useUIStore } from '@/store/uiStore';

export function AppShell() {
  const { aiSidebarOpen } = useUIStore();
  const location = useLocation();

  // Hide AI sidebar on the AI Assistant page itself
  const showAISidebar = aiSidebarOpen && !location.pathname.startsWith('/ai-assistant');

  return (
    <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <TopBar />
        <PluginToolbar />
        <div className="flex-1 flex overflow-hidden">
          <main
            className="flex-1 overflow-y-auto focus:outline-none"
            tabIndex={-1}
            role="main"
            id="main-content"
            data-testid="content-area"
          >
            <Outlet />
          </main>
          {showAISidebar && <AISidebar />}
        </div>
      </div>
      <ToastContainer />
    </div>
  );
}