T19: Fix TypeScript errors in SidePanel.tsx (type narrowing + RefObject casts)

frontend/src/components/SidePanel.tsx

@@ -11,7 +11,7 @@ interface SidePanelProps {
 
 const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
   const [activeTab, setActiveTab] = useState('blocks');
-  const [layers, setLayers] = useState([]);
+  const [layers, setLayers] = useState<Record<string, unknown> & { id: string }[]>([]);
   const [activeLayer, setActiveLayer] = useState('');
   const localCanvasRef = useRef(null);
   const localYjsDocRef = useRef(null);
@@ -29,37 +29,42 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
 
   // Observe changes in yjsDoc.layers
   useEffect(() => {
-    const yjsDocInstance = effectiveYjsDocRef?.current as { layers?: { forEach: (cb: (layer: Record<string, unknown>, id: string) => void) => void; observe: (cb: () => void) => void; unobserve: (cb: () => void) => void } } | null;
+    const yjsDocInstance = effectiveYjsDocRef?.current as {
-    if (yjsDocInstance?.layers) {
+      layers?: {
-      const yjsDoc = yjsDocInstance;
+        forEach: (cb: (layer: Record<string, unknown>, id: string) => void) => void;
-      
+        observe: (cb: () => void) => void;
-      // Function to update layers from yjsDoc
+        unobserve: (cb: () => void) => void;
-      const updateLayers = () => {
+      };
-        const layersArray: Array<Record<string, unknown> & { id: string }> = [];
+    } | null;
-        yjsDoc.layers.forEach((layer, id) => {
+    const yjsLayers = yjsDocInstance?.layers;
-          layersArray.push({ ...layer, id });
+    if (!yjsLayers) return;
-        });
+
-        setLayers(layersArray as never);
+    // Function to update layers from yjsDoc
-        
+    const updateLayers = () => {
-        // Set active layer if none is set or if current active layer doesn't exist
+      const layersArray: Array<Record<string, unknown> & { id: string }> = [];
-        if (!activeLayer || !layersArray.some(layer => layer.id === activeLayer)) {
+      yjsLayers.forEach((layer, id) => {
-          if (layersArray.length > 0) {
+        layersArray.push({ ...layer, id });
-            setActiveLayer(layersArray[0].id);
+      });
-          }
+      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();
+    // Initial update
-      
+    updateLayers();
-      // Observe changes
+
-      yjsDoc.layers.observe(updateLayers);
+    // Observe changes
-      
+    yjsLayers.observe(updateLayers);
-      // Cleanup observer on unmount
+
-      return () => {
+    // Cleanup observer on unmount
-        yjsDoc.layers.unobserve(updateLayers);
+    return () => {
-      };
+      yjsLayers.unobserve(updateLayers);
-    }
+    };
   }, [activeLayer, effectiveYjsDocRef]);
 
   const renderContent = () => {
@@ -68,7 +73,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
         return <BlockLibrary canvasRef={effectiveCanvasRef as never} yjsDoc={(effectiveYjsDocRef as React.MutableRefObject<unknown>).current} />;
       case 'layers':
         return (
-          <LayerPanel 
+          <LayerPanel
             layers={layers as never}
             setLayers={setLayers as never}
             activeLayer={activeLayer}
@@ -77,7 +82,12 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
           />
         );
       case 'properties':
-        return <PropertiesPanel canvasRef={effectiveCanvasRef} yjsDocRef={effectiveYjsDocRef} />;
+        return (
+          <PropertiesPanel
+            canvasRef={effectiveCanvasRef as never}
+            yjsDocRef={effectiveYjsDocRef as never}
+          />
+        );
       case 'copilot':
         return <div className="panel-content">KI Copilot content goes here</div>;
       default:
@@ -103,7 +113,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
           </button>
         ))}
       </div>
-      <div 
+      <div
         className="panel-content-container"
         role="tabpanel"
         id={`panel-${activeTab}`}
@@ -115,4 +125,4 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
   );
 };
 
-export default SidePanel;
+export default SidePanel;