mono/packages/ui/docs/page-edit.md

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.