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,17 +29,23 @@ 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) => {
+      yjsLayers.forEach((layer, id) => {
         layersArray.push({ ...layer, id });
       });
-        setLayers(layersArray as never);
+      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)) {
@@ -53,13 +59,12 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
     updateLayers();
 
     // Observe changes
-      yjsDoc.layers.observe(updateLayers);
+    yjsLayers.observe(updateLayers);
 
     // Cleanup observer on unmount
     return () => {
-        yjsDoc.layers.unobserve(updateLayers);
+      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: