# Layout System Restructure - Summary

## Overview

The codebase has been restructured to support multiple UI layouts. The layout number (1, 2, 3, etc.) comes from the API and determines which UI layout to use. The current layout (layout-1) has been organized into a dedicated layout folder structure, making it easy to add additional layouts in the future.

## Terminology

- **Theme**: Store identifier (e.g., 'sobkaha', 'multicart') - comes from API, identifies the store
- **Layout**: UI layout variant number (1, 2, 3, etc.) - comes from API, determines which UI layout to use

## What Changed

### 1. Layout Structure Created

- **New Directory**: `src/themes/layout-1/` - Contains all layout-1 specific layout components
- **Layout Components Moved**:
  - `src/components/layout/Layout.jsx` → `src/themes/layout-1/layouts/Layout.jsx`
  - `src/components/layout/header/` → `src/themes/layout-1/components/header/`
  - `src/components/layout/footer/` → `src/themes/layout-1/components/footer/`

### 2. Layout System Files

- **`src/lib/layouts/config.js`**: Layout configuration and management utilities
- **`src/components/layout/LayoutWrapper.jsx`**: Layout-aware wrapper that loads the correct layout based on API
- **`src/lib/hooks/useLayout.js`**: React hook for layout management

### 3. Updated Files

- **`src/pages/_app.js`**: Now uses `LayoutWrapper` instead of direct `Layout` import
- All layout components are organized in `src/themes/layout-1/`
- Layout selection now comes from `SettingContext` which reads from the API

### 4. Pages Remain Layout-Agnostic

- **`src/pages/index.jsx`**: No changes needed - already layout-agnostic
- **`src/pages/product/[id].jsx`**: No changes needed - already layout-agnostic
- **`src/pages/category/[id].jsx`**: No changes needed - already layout-agnostic
- **`src/pages/cart/index.jsx`**: No changes needed - already layout-agnostic

All pages work with any layout because they don't directly import layout-specific components.

## File Structure

```
src/
├── themes/
│   ├── layout-1/                  # Default layout
│   │   ├── components/
│   │   │   ├── header/            # Header/navbar components
│   │   │   ├── footer/            # Footer components
│   │   │   ├── Navbar.jsx         # Main navbar
│   │   │   ├── Footer.jsx         # Main footer
│   │   │   └── HeaderSkeleton.jsx # Loading skeleton
│   │   ├── layouts/
│   │   │   └── Layout.jsx         # Main layout wrapper
│   │   └── index.js               # Layout exports
│   └── README.md                  # Layout system documentation
├── lib/
│   ├── layouts/
│   │   └── config.js              # Layout configuration
│   └── hooks/
│       └── useLayout.js           # Layout hook
└── components/
    └── layout/
        └── LayoutWrapper.jsx      # Layout-aware layout loader
```

## How It Works

1. **API Response**: The `domainDestails` API endpoint returns `layout` (number: 1, 2, 3, etc.)
2. **SettingContext**: Stores the layout number from the API in state and localStorage
3. **Layout Selection**: `LayoutWrapper.jsx` reads the layout number from `SettingContext`
4. **Layout Loading**: The appropriate layout component is loaded based on the layout number
5. **Rendering**: The layout's Layout component wraps all pages, providing Navbar and Footer
6. **Pages**: Pages remain unaware of layouts - they just render their feature components

## API Integration

The layout number comes from the API response:

```javascript
// API Response from domainDestails endpoint
{
  data: { ... },
  layout: 1,  // or 2, 3, etc.
  theme: "sobkaha",
  // ... other fields
}
```

The `SettingProvider` processes this and stores:

- `layout` in state and localStorage
- `theme` in state and localStorage (this is the store identifier, not the UI layout)

## Adding New Layouts

To add a new layout (e.g., layout-2):

1. Create `src/themes/layout-2/` folder with the same structure as layout-1
2. Implement all required components (Layout, Navbar, Footer, HeaderSkeleton)
3. Export them in `src/themes/layout-2/index.js`
4. Add layout configuration to `src/lib/layouts/config.js`
5. Update `src/components/layout/LayoutWrapper.jsx` to import and support layout-2

See `src/themes/README.md` for detailed instructions.

## Using Layouts

### In Components

```javascript
import { useLayout } from "@/lib/hooks/useLayout";

function MyComponent() {
  const { layoutNumber, layoutConfig } = useLayout();

  return <div>Current layout: {layoutNumber}</div>;
}
```

### Direct Context Access

```javascript
import { useContext } from "react";
import SettingContext from "@/context/helpers/theme-setting/SettingContext";

function MyComponent() {
  const settingsCtx = useContext(SettingContext);
  const layoutNumber = settingsCtx?.layout || 1;
  const theme = settingsCtx?.theme; // Store identifier like 'sobkaha'

  // Use layoutNumber as needed
}
```

## Backwards Compatibility

- The old `src/components/layout/Layout.jsx` still exists but is no longer used
- All existing pages continue to work without changes
- The layout system is transparent to pages - they don't need to know about layouts

## Key Differences from Previous System

### Before (Theme System)

- Used "theme" terminology for UI layouts
- Layout selection from local config
- Theme-1, Theme-2 naming

### After (Layout System)

- Uses "layout" terminology for UI layouts (clearer)
- Layout selection from API (via SettingContext)
- Theme = store identifier (from API)
- Layout = UI layout number (from API)
- Layout-1, Layout-2 naming

## Notes

- **AccountLayout**: Remains in `src/components/layout/AccountLayout.jsx` as it's a page-specific layout, not a theme layout
- **Shared Components**: Components in `src/components/shared/` remain layout-agnostic
- **Features**: All feature components remain layout-agnostic
- **SettingContext**: Provides both `layout` (UI layout number) and `theme` (store identifier)