feat: layer panel with element tree - shows layers + elements as children with count badges, sub-layers supported

2026-06-27 14:27:34 +02:00
parent 4303076ce4
commit affa6be151
5 changed files with 1228 additions and 183 deletions
@@ -17,6 +17,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
  activeLayerId, onSelectLayer, onAddLayer, onToggleLayer,
  onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock,
  onReorder, onAddSubLayer,
+          elements,
  onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
  onBlockCategoryChange, onBlockSearch, onDragBlock,
  kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
@@ -56,7 +57,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
        }} />}
        </div>
        <div className={`rightbar-panel${activePanel === 'layer' ? ' active' : ''}`} data-panel-content="layer">
-          {activePanel === 'layer' && <LayerPanel layers={layers} activeLayerId={activeLayerId} onSelectLayer={onSelectLayer ?? (() => {})} onAddLayer={onAddLayer ?? (() => {})} onToggleLayer={onToggleLayer ?? (() => {})} onDeleteLayer={onDeleteLayer} onRenameLayer={onRenameLayer} onDuplicateLayer={onDuplicateLayer} onToggleLock={onToggleLock} onReorder={onReorder} onAddSubLayer={onAddSubLayer} />}
+          {activePanel === 'layer' && <LayerPanel layers={layers} elements={elements} activeLayerId={activeLayerId} onSelectLayer={onSelectLayer ?? (() => {})} onAddLayer={onAddLayer ?? (() => {})} onToggleLayer={onToggleLayer ?? (() => {})} onDeleteLayer={onDeleteLayer} onRenameLayer={onRenameLayer} onDuplicateLayer={onDuplicateLayer} onToggleLock={onToggleLock} onReorder={onReorder} onAddSubLayer={onAddSubLayer} />}
        </div>
        <div className={`rightbar-panel${activePanel === 'library' ? ' active' : ''}`} data-panel-content="library">
          {activePanel === 'library' && <BlockLibrary blocks={blocks} category="Alle" onCategoryChange={onBlockCategoryChange ?? (() => {})} onSearch={onBlockSearch ?? (() => {})} onDragBlock={onDragBlock ?? (() => {})} onRenameBlock={onRenameBlock} onDuplicateBlock={onDuplicateBlock} onDeleteBlock={onDeleteBlock} onSvgImport={onSvgImport} onSaveGroupAsBlock={onSaveGroupAsBlock} />}