From 50bfd2940fd1025997c395bc0cd93f6c24e6a232 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 21 Nov 2025 07:23:27 +0100
Subject: [PATCH] refactor: move Color Panel into Adjustments tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorganize the panel dock to use tabs more efficiently by moving the
Color Panel from the always-visible section into the Adjustments tab.

Changes:
- **Panel Dock Layout**:
  * Always visible: Layers Panel only (50% height, min 300px)
  * Tabbed section: Takes up remaining 50% of dock space

- **Adjustments Tab**: Now contains (in order):
  1. Colors (collapsible, default open)
  2. Filters (collapsible, default open)
  3. Selection (collapsible, default open)
  4. Transform (collapsible, default open)

- **Tools Tab**: Contains:
  1. Shape Settings (collapsible, default open)

- **History Tab**: Contains:
  1. History Panel (full height, not collapsible)

Benefits:
- More flexible space allocation
- Layers Panel gets 50% of vertical space (was 400px fixed)
- All adjustment features grouped together in one tab
- Cleaner organization with collapsible sections
- More canvas workspace visible by default
- Consistent with professional image editor patterns

Build Status: ✓ Successful (1330ms)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/panel-dock.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/editor/panel-dock.tsx b/components/editor/panel-dock.tsx
index cb2aa0c..12f4ee6 100644
--- a/components/editor/panel-dock.tsx
+++ b/components/editor/panel-dock.tsx
@@ -42,15 +42,11 @@ export function PanelDock() {
 
   return (
     <div className="w-[280px] border-l border-border bg-card flex flex-col overflow-hidden">
-      {/* Always visible panels */}
-      <div className="border-b border-border" style={{ height: '400px' }}>
+      {/* Always visible: Layers Panel */}
+      <div className="border-b border-border" style={{ height: '50%', minHeight: '300px' }}>
         <LayersPanel />
       </div>
 
-      <div className="border-b border-border" style={{ height: '200px' }}>
-        <ColorPanel />
-      </div>
-
       {/* Tabbed section */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Tab buttons */}
@@ -91,6 +87,9 @@ export function PanelDock() {
         <div className="flex-1 overflow-y-auto">
           {activeTab === 'adjustments' && (
             <div>
+              <CollapsibleSection title="Colors">
+                <ColorPanel />
+              </CollapsibleSection>
               <CollapsibleSection title="Filters">
                 <FilterPanel />
               </CollapsibleSection>