feat: initial commit web-cad-neu with docker-compose, frontend and backend

2026-06-26 10:50:24 +02:00
commit 4ec76fe406
102 changed files with 25722 additions and 0 deletions
@@ -0,0 +1,66 @@
+import React from 'react';
+import type { RightSidebarProps, RightPanel } from '../types/ui.types';
+import PropertiesPanel from './PropertiesPanel';
+import LayerPanel from './LayerPanel';
+import BlockLibrary from './BlockLibrary';
+import KICopilot from './KICopilot';
+import PluginManager from './PluginManager';
+
+const tabs: Array<{ id: RightPanel; label: string; svg: React.ReactNode; badge?: number }> = [
+  { id: 'tool', label: 'Werkzeug', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> },
+  { id: 'layer', label: 'Layer', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg> },
+  { id: 'library', label: 'Bibliothek', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><line x1="3" y1="12" x2="21" y2="12"/></svg> },
+  { id: 'ki', label: 'KI', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>, badge: 2 },
+  { id: 'plugins', label: 'Plugins', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> },
+];
+
+const RightSidebar: React.FC<RightSidebarProps> = ({
+  activePanel, onPanelChange, selectedElement, layers, blocks,
+  activeLayerId, onSelectLayer, onAddLayer, onToggleLayer,
+  onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock,
+  onUpdateLayerColor, onUpdateLayerLineType, onUpdateLayerTransparency,
+  onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
+  onBlockCategoryChange, onBlockSearch, onDragBlock,
+  kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading,
+}) => {
+  return (
+    <aside className="rightbar" aria-label="Eigenschaften-Panels">
+      <div className="rightbar-tabs" role="tablist">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            className={`rightbar-tab${activePanel === tab.id ? ' active' : ''}`}
+            data-panel={tab.id}
+            role="tab"
+            aria-selected={activePanel === tab.id}
+            onClick={() => onPanelChange(tab.id)}
+          >
+            {tab.svg}
+            <span>{tab.label}</span>
+            {tab.badge !== undefined && <span className="rightbar-tab-badge">{tab.badge}</span>}
+          </button>
+        ))}
+      </div>
+
+      <div className="rightbar-content">
+        <div className={`rightbar-panel${activePanel === 'tool' ? ' active' : ''}`} data-panel-content="tool">
+          {activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} onUpdateProperty={() => {}} />}
+        </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} onUpdateLayerColor={onUpdateLayerColor} onUpdateLayerLineType={onUpdateLayerLineType} onUpdateLayerTransparency={onUpdateLayerTransparency} />}
+        </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} />}
+        </div>
+        <div className={`rightbar-panel${activePanel === 'ki' ? ' active' : ''}`} data-panel-content="ki">
+          {activePanel === 'ki' && <KICopilot messages={kiMessages ?? []} suggestions={kiSuggestions ?? []} onSend={onKISend ?? (() => {})} onSuggestionClick={onKISuggestionClick ?? (() => {})} loading={kiLoading} />}
+        </div>
+        <div className={`rightbar-panel${activePanel === 'plugins' ? ' active' : ''}`} data-panel-content="plugins">
+          {activePanel === 'plugins' && <PluginManager />}
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default RightSidebar;