From c8efb1a88e195a2f25e3e4af7ac2612c3d277a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 21 Nov 2025 07:19:12 +0100
Subject: [PATCH] refactor: move tool adjustments to dedicated bar below header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Separate tool controls from the header into a dedicated adjustments bar,
following the classic Photoshop pattern with:
- Header bar: application controls (file, undo/redo, zoom, new layer)
- Tool adjustments bar: context-sensitive tool options

Changes:
- **Header Bar** (48px): Simplified to two sections
  * Left: Title + File Menu
  * Right: Undo/Redo + Zoom controls + New Layer button
  * Removed tool options from center

- **Tool Adjustments Bar** (40px): New dedicated bar below header
  * Full-width bar for tool-specific controls
  * Context-sensitive: shows options for active tool only
  * Slightly darker background (bg-card/50) for visual separation
  * Contains all tool options (size, opacity, color, shape type, etc.)

Benefits:
- Cleaner header without crowding
- More space for tool controls to expand
- Better visual separation of concerns
- Matches professional image editor conventions
- Header remains clean and consistent

Build Status: ✓ Successful (1313ms)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/editor-layout.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/editor/editor-layout.tsx b/components/editor/editor-layout.tsx
index 87e00a8..76fd5d4 100644
--- a/components/editor/editor-layout.tsx
+++ b/components/editor/editor-layout.tsx
@@ -55,7 +55,7 @@ export function EditorLayout() {
   const handleZoomToFit = () => {
     // Approximate viewport size (accounting for panels)
     const viewportWidth = window.innerWidth - 344; // Subtract sidebar width (64px tools + 280px panels)
-    const viewportHeight = window.innerHeight - 48; // Subtract toolbar height
+    const viewportHeight = window.innerHeight - 88; // Subtract toolbar height (48px header + 40px tool adjustments)
     zoomToFit(viewportWidth, viewportHeight);
   };
 
@@ -81,23 +81,18 @@ export function EditorLayout() {
         </div>
       )}
 
-      {/* Top Bar */}
-      <div className="flex h-12 items-center border-b border-border bg-card">
+      {/* Header Bar */}
+      <div className="flex h-12 items-center justify-between border-b border-border bg-card px-4">
         {/* Left: Title and File Menu */}
-        <div className="flex items-center gap-4 px-4 border-r border-border">
+        <div className="flex items-center gap-4">
           <h1 className="text-lg font-semibold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
             Paint UI
           </h1>
           <FileMenu />
         </div>
 
-        {/* Center: Tool Options (context-sensitive) */}
-        <div className="flex-1 flex items-center justify-center">
-          <ToolOptions />
-        </div>
-
         {/* Right: Controls */}
-        <div className="flex items-center gap-2 px-4 border-l border-border">
+        <div className="flex items-center gap-2">
           {/* History controls */}
           <button
             onClick={undo}
@@ -171,6 +166,11 @@ export function EditorLayout() {
         </div>
       </div>
 
+      {/* Tool Adjustments Bar */}
+      <div className="flex h-10 items-center border-b border-border bg-card/50 px-4">
+        <ToolOptions />
+      </div>
+
       {/* Main content */}
       <div className="flex flex-1 overflow-hidden">
         {/* Left: Tool Palette */}