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

"use client";

import { ReactNode } from "react";
import { Sidebar } from "./sidebar";
import { ModelStatusBar } from "../features/models";
import { VersionChecker } from "./version-checker";
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 3rem",
          gridTemplateAreas: '"sidebar main" "sidebar footer"',
          height: "100vh",
          width: "100vw",
          overflow: "hidden",
        }}
      >
        <aside
          style={{
            gridArea: "sidebar",
            height: "100vh",
            overflowY: "auto",
            borderRight: "1px solid var(--color-border)",
            backgroundColor: "var(--color-card)",
            zIndex: 10,
          }}
        >
          <Sidebar />
        </aside>
        <main
          style={{
            gridArea: "main",
            overflowY: "auto",
            overflowX: "hidden",
            backgroundColor: "var(--color-background)",
            maxWidth: "100%",
            boxSizing: "border-box",
          }}
        >
          {children}
        </main>
        <footer
          style={{
            gridArea: "footer",
            height: "3rem",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "0 1rem",
            borderTop: "1px solid var(--color-border)",
            backgroundColor: "var(--color-card)",
            overflow: "hidden",
          }}
        >
          <div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
            <ModelStatusBar />
          </div>
          <div style={{ flex: "none", marginLeft: "1rem" }}>
            <VersionChecker />
          </div>
        </footer>
      </div>
    </LayoutProvider>
  );
}