Add Yjs integration for collaborative drawing and update socket handling

app/src/components/layout/scenes/MainScene.tsx

@@ -53,7 +53,7 @@ function MainScene() {
   const { toggleThreeD } = useThreeDStore();
   const { isPlaying } = usePlayButtonStore();
   const { widgetSubOption } = useWidgetSubOption();
-  const { visualizationSocket } = useSocketStore();
+  const { socket, visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
   const { clearComparisonProduct } = useComparisonProduct();
@@ -68,6 +68,24 @@ function MainScene() {
   const { selectedVersion, setSelectedVersion } = selectedVersionStore();
   const { selectedComment, commentPositionState } = useSelectedComment();
 
+  useEffect(() => {
+    console.log('hi');
+    if (!projectId || !selectedVersion?.versionId || !socket) return;
+
+    socket.emit("joinRoom", { projectId, versionId: selectedVersion.versionId });
+
+    socket.on("v1:Line-collab:response:create", (data: any) => {
+      console.log("v1:Line-collab:response:create:", data);
+    });
+
+    return () => {
+      if (projectId && selectedVersion?.versionId && socket) {
+        socket.emit("leaveRoom", { projectId, versionId: selectedVersion.versionId });
+        socket.off("v1:Line-collab:response:create");
+      }
+    };
+  }, [projectId, selectedVersion?.versionId]);
+
   useEffect(() => {
     if (activeModule !== 'simulation') {
       clearComparisonProduct();
@@ -188,7 +206,7 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
-      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat/>}
+      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
 
     </>
   );