stable-diffusion.cpp-rest/webui/components/layout/app-layout.tsx

'use client';

import { ReactNode } from 'react';
import { Sidebar } from '../sidebar';
import { ModelStatusBar } from '../model-status-bar';
import { LayoutProvider } from './layout-context';

/**
 * AppLayout - Pure inline style layout (no CSS modules)
 * Using inline styles to avoid any CSS loading/cascade issues
 */

interface AppLayoutProps {
  children: ReactNode;
}

export function AppLayout({ children }: AppLayoutProps) {
  return (
    <LayoutProvider>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '16rem 1fr',
        gridTemplateRows: '1fr auto',
        gridTemplateAreas: '"sidebar main" "sidebar footer"',
        minHeight: '100vh',
        width: '100vw',
        overflowX: 'hidden',
      }}>
        <aside style={{
          gridArea: 'sidebar',
          position: 'sticky',
          top: 0,
          height: '100vh',
          overflowY: 'auto',
          borderRight: '1px solid var(--color-border)',
          backgroundColor: 'var(--color-card)',
          zIndex: 10000,
        }}>
          <Sidebar />
        </aside>
        <main style={{
          gridArea: 'main',
          minHeight: '100vh',
          maxWidth: 'calc(100vw - 16rem)',
          overflowX: 'hidden',
          backgroundColor: 'var(--color-background)',
        }}>
          {children}
        </main>
        <footer style={{
          gridArea: 'footer',
          minHeight: '3rem',
        }}>
          <ModelStatusBar />
        </footer>
      </div>
    </LayoutProvider>
  );
}