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

'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

/**
 * Layout Context - Manages global layout state
 * Modern OOP pattern using Context API for shared state management
 */

interface LayoutContextValue {
  sidebarCollapsed: boolean;
  toggleSidebar: () => void;
  setSidebarCollapsed: (collapsed: boolean) => void;
}

const LayoutContext = createContext<LayoutContextValue | undefined>(undefined);

export function useLayout() {
  const context = useContext(LayoutContext);
  if (!context) {
    throw new Error('useLayout must be used within LayoutProvider');
  }
  return context;
}

interface LayoutProviderProps {
  children: ReactNode;
}

export function LayoutProvider({ children }: LayoutProviderProps) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  const toggleSidebar = () => {
    setSidebarCollapsed(prev => !prev);
  };

  const value: LayoutContextValue = {
    sidebarCollapsed,
    toggleSidebar,
    setSidebarCollapsed,
  };

  return (
    <LayoutContext.Provider value={value}>
      {children}
    </LayoutContext.Provider>
  );
}