From eefd99ee48117bf285e43472505d3ce9f62d1aa7 Mon Sep 17 00:00:00 2001
From: A0 Orchestrator <orchestrator@media-on.de>
Date: Fri, 3 Jul 2026 10:52:38 +0200
Subject: [PATCH] fix: right sidebar header + left sidebar toggle + ribbon
 color pickers + ribbon height

---
 frontend/src/components/LeftSidebar.tsx  |  7 +-
 frontend/src/components/RibbonBar.tsx    | 34 +++++-----
 frontend/src/components/RightSidebar.tsx | 12 ++--
 frontend/src/styles.css                  | 82 +++++++++++++++++-------
 4 files changed, 83 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx
index bcbeb0c..f6231f5 100644
--- a/frontend/src/components/LeftSidebar.tsx
+++ b/frontend/src/components/LeftSidebar.tsx
@@ -106,7 +106,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, sel
     <aside className={`leftbar${className ? ' ' + className : ''}${collapsed ? ' leftbar-collapsed' : ''}`} aria-label="Werkzeugpalette">
       <div className="leftbar-header">
         <span className="leftbar-title">Werkzeuge</span>
-        <button className="leftbar-toggle" aria-label="Linke Leiste ausblenden" onClick={onCollapse}>
+        <button className="leftbar-toggle" aria-label="Linke Leiste ein-/ausklappen" onClick={collapsed ? onToggleCollapse : onCollapse} title="Linke Leiste ein-/ausklappen">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
         </button>
       </div>
@@ -201,11 +201,6 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, sel
       <div className="leftbar-resize-handle" onMouseDown={handleResizeMouseDown} />
 
       <div className="leftbar-footer">
-        {onToggleCollapse && (
-          <button className="leftbar-footer-btn" title="Linke Leiste ein-/ausklappen" aria-label="Linke Leiste ein-/ausklappen" onClick={onToggleCollapse}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
-          </button>
-        )}
         <button className="leftbar-footer-btn" title="Plugin hinzufügen" aria-label="Plugin hinzufügen">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
         </button>
diff --git a/frontend/src/components/RibbonBar.tsx b/frontend/src/components/RibbonBar.tsx
index e67f4d9..58ab756 100644
--- a/frontend/src/components/RibbonBar.tsx
+++ b/frontend/src/components/RibbonBar.tsx
@@ -225,23 +225,25 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
           <>
             <div className="ribbon-group">
               <div className="ribbon-group-btns">
-                <div className="ribbon-color-control" title="Hintergrundfarbe der Zeichenfläche">
-                  <label className="ribbon-color-label">Hintergrund</label>
-                  <input
-                    type="color"
-                    value={canvasBgColor}
-                    onChange={(e) => onCanvasBgColorChange?.(e.target.value)}
-                    style={{ width: '32px', height: '32px', border: '1px solid var(--color-border)', borderRadius: '4px', cursor: 'pointer', padding: 0, background: 'none' }}
-                  />
+                <div className="ribbon-color-picker" title="Hintergrundfarbe der Zeichenfläche">
+                  <div className="ribbon-color-swatch" style={{ background: canvasBgColor }}>
+                    <input
+                      type="color"
+                      value={canvasBgColor}
+                      onChange={(e) => onCanvasBgColorChange?.(e.target.value)}
+                    />
+                  </div>
+                  <span className="ribbon-color-label">Hintergrund</span>
                 </div>
-                <div className="ribbon-color-control" title="Gitterfarbe">
-                  <label className="ribbon-color-label">Gitterfarbe</label>
-                  <input
-                    type="color"
-                    value={gridColor}
-                    onChange={(e) => onGridColorChange?.(e.target.value)}
-                    style={{ width: '32px', height: '32px', border: '1px solid var(--color-border)', borderRadius: '4px', cursor: 'pointer', padding: 0, background: 'none' }}
-                  />
+                <div className="ribbon-color-picker" title="Gitterfarbe">
+                  <div className="ribbon-color-swatch" style={{ background: gridColor }}>
+                    <input
+                      type="color"
+                      value={gridColor}
+                      onChange={(e) => onGridColorChange?.(e.target.value)}
+                    />
+                  </div>
+                  <span className="ribbon-color-label">Gitter</span>
                 </div>
               </div>
               <div className="ribbon-group-label">Farben</div>
diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx
index 75c2f71..1679db2 100644
--- a/frontend/src/components/RightSidebar.tsx
+++ b/frontend/src/components/RightSidebar.tsx
@@ -36,14 +36,12 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
 }) => {
   return (
     <aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels">
-      <button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
-      </button>
-      {onToggleCollapse && (
-        <button className="rightbar-collapse-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={onToggleCollapse} title="Rechte Leiste ein-/ausklappen">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+      <div className="rightbar-header">
+        <span className="rightbar-title">Eigenschaften</span>
+        <button className="rightbar-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={collapsed ? onToggleCollapse : onCollapse} title="Rechte Leiste ein-/ausklappen">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
         </button>
-      )}
+      </div>
       <div className="rightbar-tabs" role="tablist">
         {tabs.map((tab) => (
           <button
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1a4e64b..975c659 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -53,7 +53,7 @@
 
   /* Layout */
   --topbar-h: 38px;
-  --ribbon-h: 72px;
+  --ribbon-h: 86px;
   --leftbar-w: 200px;
   --rightbar-w: 300px;
   --cmdline-h: 56px;
@@ -371,7 +371,7 @@ a:hover { text-decoration: underline; }
   flex: 1;
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-md);
+  padding: 6px 8px;
   gap: var(--spacing-lg);
   overflow: hidden;
 }
@@ -385,7 +385,7 @@ a:hover { text-decoration: underline; }
 }
 .ribbon-group-btns { display: flex; align-items: center; gap: 2px; flex: 1; }
 .ribbon-group-label {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.4px;
@@ -395,6 +395,38 @@ a:hover { text-decoration: underline; }
   padding-top: 3px;
   margin-top: 2px;
 }
+.ribbon-color-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.ribbon-color-swatch {
+  width: 32px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid var(--color-border);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.ribbon-color-swatch input[type="color"] {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+.ribbon-color-swatch:hover { border-color: var(--color-primary); }
+.ribbon-color-label {
+  font-size: 11px;
+  color: var(--color-text-muted);
+  text-align: center;
+}
 .ribbon-divider {
   width: 1px;
   height: 60%;
@@ -442,7 +474,7 @@ a:hover { text-decoration: underline; }
 .app-body.left-collapsed .leftbar .tool-section { display: none; }
 .app-body.left-collapsed .leftbar-toggle svg { transform: rotate(180deg); }
 .app-body.left-collapsed .leftbar-toggle { display: grid !important; }
-.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
+.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 28px; }
 .app-body.both-collapsed { grid-template-columns: 0 1fr 0; }
 
 /* ============================================================
@@ -2199,32 +2231,36 @@ body.drawer-open { overflow: hidden; }
 
 
 /* ─── Desktop Sidebar Collapse ─────────────────────────── */
-.rightbar-collapse-toggle {
-  position: absolute;
-  top: 8px;
-  right: 32px;
-  width: 24px;
-  height: 24px;
+.rightbar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+.rightbar-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.rightbar-toggle {
+  width: 22px;
+  height: 22px;
   display: grid;
   place-items: center;
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  cursor: pointer;
+  border-radius: var(--radius-xs);
   color: var(--color-text-muted);
-  z-index: 10;
   transition: all var(--t-fast);
 }
-.rightbar-collapse-toggle:hover {
-  background: var(--color-surface-3);
-  color: var(--color-text);
-}
-.rightbar-collapse-toggle svg { width: 14px; height: 14px; }
+.rightbar-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
+.rightbar-toggle svg { width: 14px; height: 14px; }
 
-.app-body.right-collapsed .rightbar { width: 0; min-width: 0; overflow: hidden; border-left: none; }
+.app-body.right-collapsed .rightbar { padding: 4px; }
+.app-body.right-collapsed .rightbar-header { justify-content: center; }
+.app-body.right-collapsed .rightbar-title { display: none; }
 .app-body.right-collapsed .rightbar-tabs,
-.app-body.right-collapsed .rightbar-content,
-.app-body.right-collapsed .rightbar-close { display: none; }
+.app-body.right-collapsed .rightbar-content { display: none; }
+.app-body.right-collapsed .rightbar-toggle { display: grid !important; transform: rotate(180deg); }
 
 .leftbar-collapsed .tool-section,
 .leftbar-collapsed .leftbar-title,