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;
-    if (yjsDocInstance?.layers) {
-      const yjsDoc = yjsDocInstance;
+    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 yjsLayers = yjsDocInstance?.layers;
+    if (!yjsLayers) return;
 
-      // Function to update layers from yjsDoc
-      const updateLayers = () => {
-        const layersArray: Array<Record<string, unknown> & { id: string }> = [];
-        yjsDoc.layers.forEach((layer, id) => {
-          layersArray.push({ ...layer, id });
-        });
-        setLayers(layersArray as never);
+    // Function to update layers from yjsDoc
+    const updateLayers = () => {
+      const layersArray: Array<Record<string, unknown> & { id: string }> = [];
+      yjsLayers.forEach((layer, id) => {
+        layersArray.push({ ...layer, 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);
-          }
+      // 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 () => {
-        yjsDoc.layers.unobserve(updateLayers);
-      };
-    }
+    // Cleanup observer on unmount
+    return () => {
+      yjsLayers.unobserve(updateLayers);
+    };
   }, [activeLayer, effectiveYjsDocRef]);
 
   const renderContent = () => {
@@ -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: