Sebastian Krüger a723be7731 feat: restructure layout to professional image editor standard ...

Restructure the UI to match professional image editors (Photoshop, Affinity)
with a clean, predictable layout that maximizes canvas space.

Changes:
- **Top Bar** (48px): Unified horizontal bar with three sections:
  * Left: Title + File Menu
  * Center: Context-sensitive tool options
  * Right: Undo/Redo, Zoom controls, New Layer button

- **Left Side** (64px): Single tool palette (unchanged)

- **Center**: Maximized canvas workspace (flex-1)

- **Right Side** (280px): Unified panel dock with hybrid organization:
  * Always visible: Layers Panel (400px) + Color Panel (200px)
  * Tabbed sections: Adjustments, Tools, History
  * Collapsible panels within tabs for efficient space usage

New Components:
- `components/editor/tool-options.tsx`: Horizontal tool options bar
  * Shows context-sensitive options for active tool
  * Drawing tools: color, size, opacity, hardness, flow
  * Shape tool: shape type selector
  * Selection tool: mode selector (rectangular, elliptical, lasso, magic wand)

- `components/editor/panel-dock.tsx`: Unified right panel system
  * Fixed 280px width (compact professional standard)
  * Tab system for organizing feature panels
  * Collapsible sections within tabs
  * Hybrid approach: essential panels always visible, others tabbed

Removed from Left Sidebar:
- ToolSettings panel (now in top bar)
- ColorPanel (now in panel dock)
- FilterPanel (now in panel dock)
- SelectionPanel (now in panel dock)
- TransformPanel (now in panel dock)
- ShapePanel (now in panel dock)

Benefits:
- Reclaimed ~400px horizontal space for canvas
- Predictable, stable UI (no panels appearing/disappearing)
- Professional, industry-standard layout
- All features accessible in organized panel dock
- Cleaner, less cluttered interface

Build Status: ✓ Successful (1266ms)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-21 07:12:51 +01:00

6.1 KiB

Raw Blame History

View Raw