From d80e5990e4849ef1ca1693abf8138d0772aa59f9 Mon Sep 17 00:00:00 2001 From: A0 Orchestrator Date: Fri, 3 Jul 2026 11:51:07 +0200 Subject: [PATCH] fix: remove left footer symbols + right sidebar edge toggle/resize + rename tab to Einstellungen --- frontend/src/App.tsx | 5 +- frontend/src/components/LeftSidebar.tsx | 11 -- frontend/src/components/RightSidebar.tsx | 184 ++++++++++++++--------- frontend/src/styles.css | 43 +++++- frontend/src/types/ui.types.ts | 2 + 5 files changed, 159 insertions(+), 86 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c62a215..29d3fa4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -155,6 +155,7 @@ const CADEditor: React.FC = ({ projectId, token, onNavigateBack // Desktop sidebar collapse const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(false); const [leftbarWidth, setLeftbarWidth] = useState(200); + const [rightbarWidth, setRightbarWidth] = useState(300); const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const [activeDrawerTab, setActiveDrawerTab] = useState('tool'); @@ -1640,9 +1641,11 @@ const CADEditor: React.FC = ({ projectId, token, onNavigateBack onKISuggestionClick={handleSuggestionClick} kiLoading={kiLoading} className={mobileRightOpen ? 'open' : ''} - onCollapse={() => setMobileRightOpen(false)} + onCollapse={() => { setMobileRightOpen(false); setRightSidebarCollapsed(true); }} collapsed={rightSidebarCollapsed} onToggleCollapse={() => setRightSidebarCollapsed((p) => !p)} + rightbarWidth={rightbarWidth} + onWidthChange={setRightbarWidth} onReorder={handleReorderLayer} onAddSubLayer={handleAddSubLayer} onUpdateElement={handleUpdateElement} diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx index f6231f5..84963eb 100644 --- a/frontend/src/components/LeftSidebar.tsx +++ b/frontend/src/components/LeftSidebar.tsx @@ -200,17 +200,6 @@ const LeftSidebar: React.FC = ({ activeTool, onToolChange, sel
-
- - - -
); }; diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx index 1679db2..b435255 100644 --- a/frontend/src/components/RightSidebar.tsx +++ b/frontend/src/components/RightSidebar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import type { RightSidebarProps, RightPanel } from '../types/ui.types'; import PropertiesPanel from './PropertiesPanel'; import LayerPanel from './LayerPanel'; @@ -6,8 +6,11 @@ import BlockLibrary from './BlockLibrary'; import BlockLibraryTree from './BlockLibraryTree'; import KICopilot from './KICopilot'; +const MIN_RIGHTBAR_WIDTH = 200; +const MAX_RIGHTBAR_WIDTH = 500; + const tabs: Array<{ id: RightPanel; label: string; svg: React.ReactNode; badge?: number }> = [ - { id: 'tool', label: 'Werkzeug', svg: }, + { id: 'tool', label: 'Einstellungen', svg: }, { id: 'layer', label: 'Layer', svg: }, { id: 'library', label: 'Bibliothek', svg: }, { id: 'ki', label: 'KI', svg: , badge: 2 }, @@ -19,8 +22,8 @@ const RightSidebar: React.FC = ({ activeLayerId, onSelectLayer, onAddLayer, onToggleLayer, onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock, onReorder, onAddSubLayer, - onElementsDeleted, onToggleElementVisible, - elements, + onElementsDeleted, onToggleElementVisible, + elements, onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock, onBlockCategoryChange, onBlockSearch, onDragBlock, kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement, @@ -33,76 +36,117 @@ const RightSidebar: React.FC = ({ token, unit = 'mm', scaleFactor = 1, + rightbarWidth = 300, + onWidthChange, }) => { + const handleResizeMouseDown = useCallback((e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + const startClientX = e.clientX; + const startWidth = rightbarWidth; + + const handleMouseMove = (ev: MouseEvent) => { + const delta = startClientX - ev.clientX; + const newWidth = Math.min(MAX_RIGHTBAR_WIDTH, Math.max(MIN_RIGHTBAR_WIDTH, startWidth + delta)); + document.documentElement.style.setProperty('--rightbar-w', newWidth + 'px'); + if (onWidthChange) { + onWidthChange(newWidth); + } + }; + + const handleMouseUp = () => { + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + document.body.style.cursor = ''; + }; + + document.body.style.cursor = 'col-resize'; + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); + }, [rightbarWidth, onWidthChange]); + return ( ); }; diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 975c659..91291f5 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2255,12 +2255,47 @@ body.drawer-open { overflow: hidden; } .rightbar-toggle:hover { background: var(--color-surface-2); color: var(--color-text); } .rightbar-toggle svg { width: 14px; height: 14px; } -.app-body.right-collapsed .rightbar { padding: 4px; } -.app-body.right-collapsed .rightbar-header { justify-content: center; } -.app-body.right-collapsed .rightbar-title { display: none; } +.rightbar-edge-toggle { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 20px; + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: 10px; + background: var(--color-surface-2); + border-right: 1px solid var(--color-border); + cursor: pointer; + z-index: 10; + color: var(--color-text-muted); + transition: color var(--t-fast); +} +.rightbar-edge-toggle:hover { color: var(--color-text); } +.rightbar-edge-toggle svg { width: 14px; height: 14px; } + +.rightbar-resize-handle { + position: absolute; + left: -2px; + top: 0; + bottom: 0; + width: 4px; + cursor: col-resize; + z-index: 11; +} +.rightbar-resize-handle:hover { + background: var(--color-primary); +} + +.rightbar-content { padding-left: 24px; } +.rightbar-tabs { margin-left: 20px; } +.rightbar-header { margin-left: 20px; } + +.app-body.right-collapsed .rightbar-header, .app-body.right-collapsed .rightbar-tabs, .app-body.right-collapsed .rightbar-content { display: none; } -.app-body.right-collapsed .rightbar-toggle { display: grid !important; transform: rotate(180deg); } +.app-body.right-collapsed .rightbar-edge-toggle svg { transform: rotate(180deg); } .leftbar-collapsed .tool-section, .leftbar-collapsed .leftbar-title, diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts index eaca511..231779c 100644 --- a/frontend/src/types/ui.types.ts +++ b/frontend/src/types/ui.types.ts @@ -209,6 +209,8 @@ export interface RightSidebarProps { onToggleCollapse?: () => void; unit?: UnitType; scaleFactor?: number; + rightbarWidth?: number; + onWidthChange?: (width: number) => void; } export interface PropertiesPanelProps {