# UserPageEdit Refactoring Plan

The `UserPageEdit.tsx` component has grown too large (~900 lines) and handles too many responsibilities. This plan outlines the steps to decompose it into manageable, single-purpose components and custom hooks, leveraging the existing Action System for cleaner communication.

## 1. Goal
Split `UserPageEdit.tsx` to improve maintainability, verify separation of concerns, and fully utilize the `src/actions/` system to decouple UI components (like the Ribbon) from the logic.

## 2. Proposed Architecture

### 2.1. Directories
`src/pages/editor/`
  - `components/`
  - `hooks/`
  - `UserPageEdit.tsx` (The main entry point, simplified)

### 2.2. Custom Hooks & Logic
Move state and logic into `src/pages/editor/hooks/`. Crucially, we will use `useActions` to register capabilities.

1.  **`usePageEditorState.ts`**
    - Manages UI state: `isSidebarCollapsed`, `showHierarchy`, `showTypeFields`, `selectedWidgetId`.
    - **Action Registration**: Registers actions like `View/ToggleSidebar`, `View/ToggleHierarchy`, `View/ToggleTypeFields`.

2.  **`usePageTemplates.ts`**
    - Manages template state.
    - **Action Registration**: Registers `File/LoadTemplate`, `File/SaveTemplate`.

3.  **`useEmailActions.ts`**
    - Manages email state.
    - **Action Registration**: Registers `Email/SendTest`, `Email/TogglePreview`.

4.  **`useEditorActions.ts` (Core Logic)**
    - Wraps `useLayout` and `useLayouts` context methods.
    - **Action Registration**:
        - `Edit/Undo`
        - `Edit/Redo`
        - `File/Save`
        - `File/ImportLayout`
        - `File/ExportLayout`
        - `Edit/AddContainer`
        - `Edit/AddWidget`
        - `Edit/DeletePage`

### 2.3. Components (UI Extraction)
Move UI sections into `src/pages/editor/components/`:

1.  **`EditorSidebar.tsx`**
    - Subscribes to UI state via context or props (managed by `UserPageEdit`).
    - Handlers can trigger Actions.
    - Renders `HierarchyTree`.

2.  **`EditorMainArea.tsx`**
    - The central workspace.
    - Renders `GenericCanvas`.

3.  **`EditorRightPanel.tsx`**
    - The properties panel.

4.  **`PageRibbonBar.tsx` (Refactor)**
    - **Change**: Instead of accepting 30+ props, it will use `useActions()` to retrieve registered actions (`Save`, `Undo`, `Redo`, `ToggleVisibility`, etc.) and bind them to buttons.
    - Props will be minimized to just `page` (for context) and layout specific data.

5.  **`EditorDialogs.tsx`**
    - A container component that renders all global dialogs (Email, Settings, Templates) based on state.

## 3. Implementation Steps

1.  **Setup Directory**: Create `src/pages/editor/` structure.
2.  **RefactorHooks**:
    - Implement `useEditorActions` to register core actions.
    - Implement `usePageEditorState` for UI toggles.
3.  **Refactor `PageRibbonBar`**:
    - Update it to use `useActions().getActionsByGroup('History')` etc.
    - Remove prop drilling for `onUndo`, `onRedo`, `onSave`.
4.  **Extract Components**:
    - Move JSX to `EditorSidebar`, `EditorMainArea`, `EditorRightPanel`.
5.  **Reassemble `UserPageEdit`**:
    - Initialize hooks.
    - Render `ActionProvider` (if not at top level) or ensure hooks run inside it.
    - Pass minimal props to children.

## 4. Verification
- **Ribbon Functionality**: Verify buttons (Undo, Redo, Save) are active/disabled correctly via Action state.
- **Shortcuts**: Verify Ctrl+Z/Y work via the Action registry.
- **Layout**: Verify UI allows adding widgets/containers.