Read layers from yjsDoc.layers with observers instead of separate useState

frontend/src/components/SidePanel.tsx

@@ -5,10 +5,8 @@ import BlockLibrary from './BlockLibrary';
 
 const SidePanel: React.FC = () => {
   const [activeTab, setActiveTab] = useState('blocks');
-  const [layers, setLayers] = useState([
+  const [layers, setLayers] = useState([]);
-    { id: '1', name: 'Layer 1', visible: true, locked: false, color: '#000000', lineType: 'solid', transparency: 0, sortOrder: 0 }
+  const [activeLayer, setActiveLayer] = useState('');
-  ]);
-  const [activeLayer, setActiveLayer] = useState('1');
   const canvasRef = useRef(null);
   const yjsDocRef = useRef(null);
 
@@ -19,23 +17,39 @@ const SidePanel: React.FC = () => {
     { id: 'copilot', label: 'KI Copilot', icon: '🤖' },
   ];
 
-  // Initialize with a default layer if none exist
+  // Observe changes in yjsDoc.layers
   useEffect(() => {
-    if (layers.length === 0) {
+    if (yjsDocRef.current) {
-      const defaultLayer = { 
+      const yjsDoc = yjsDocRef.current;
-        id: '1', 
+      
-        name: 'Layer 1', 
+      // Function to update layers from yjsDoc
-        visible: true, 
+      const updateLayers = () => {
-        locked: false, 
+        const layersArray = [];
-        color: '#000000', 
+        yjsDoc.layers.forEach((layer, id) => {
-        lineType: 'solid', 
+          layersArray.push({ ...layer, id });
-        transparency: 0, 
+        });
-        sortOrder: 0 
+        setLayers(layersArray);
+        
+        // Set active layer if none is set or if current active layer doesn't exist
+        if (!activeLayer || !layersArray.some(layer => layer.id === activeLayer)) {
+          if (layersArray.length > 0) {
+            setActiveLayer(layersArray[0].id);
+          }
+        }
+      };
+      
+      // Initial update
+      updateLayers();
+      
+      // Observe changes
+      yjsDoc.layers.observe(updateLayers);
+      
+      // Cleanup observer on unmount
+      return () => {
+        yjsDoc.layers.unobserve(updateLayers);
       };
-      setLayers([defaultLayer]);
-      setActiveLayer('1');
     }
-  }, [layers.length]);
+  }, [activeLayer, yjsDocRef]);
 
   const renderContent = () => {
     switch (activeTab) {