working basic live collab

frontend/components/editor/index.tsx

@@ -42,7 +42,6 @@ import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
 import { User } from "@/lib/types"
 import { processFileType, validateName } from "@/lib/utils"
 import { Cursors } from "./live/cursors"
-import { Avatars } from "./live/avatars"
 
 export default function CodeEditor({
   userData,
@@ -271,26 +270,31 @@ export default function CodeEditor({
   })
 
   useEffect(() => {
-    if (!editorRef.current) return
+    let yProvider: any
+    let yDoc: Y.Doc
+    let binding: MonacoBinding
 
-    const yDoc = new Y.Doc()
-    const yText = yDoc.getText("monaco")
-    const yProvider: any = new LiveblocksProvider(room, yDoc)
-    setProvider(yProvider)
+    if (editorRef.current) {
+      yDoc = new Y.Doc()
+      const yText = yDoc.getText("monaco")
+      yProvider = new LiveblocksProvider(room, yDoc)
+      setProvider(yProvider)
 
-    const binding = new MonacoBinding(
-      yText,
-      editorRef.current.getModel() as monaco.editor.ITextModel,
-      new Set([editorRef.current]),
-      yProvider.awareness as Awareness
-    )
+      // Attach Yjs to Monaco
+      binding = new MonacoBinding(
+        yText,
+        editorRef.current.getModel() as monaco.editor.ITextModel,
+        new Set([editorRef.current]),
+        yProvider.awareness as Awareness
+      )
+    }
 
     return () => {
-      yDoc.destroy()
-      yProvider.destroy()
-      binding.destroy()
+      yDoc?.destroy()
+      yProvider?.destroy()
+      binding?.destroy()
     }
-  }, [editorRef, room])
+  }, [editorRef.current, room])
 
   // connection/disconnection effect + resizeobserver
   useEffect(() => {
@@ -490,7 +494,6 @@ export default function CodeEditor({
                 {tab.name}
               </Tab>
             ))}
-            <Avatars />
           </div>
           <div
             ref={editorContainerRef}

frontend/components/editor/live/cursors.tsx

@@ -19,6 +19,7 @@ export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
 
     // On changes, update `awarenessUsers`
     function setUsers() {
+      console.log("SET USERS")
       setAwarenessUsers(
         Array.from(yProvider.awareness.getStates()) as AwarenessList
       )

frontend/components/editor/navbar/index.tsx

@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button"
 import { useState } from "react"
 import EditSandboxModal from "./edit"
 import ShareSandboxModal from "./share"
+import { Avatars } from "../live/avatars"
 
 export default function Navbar({
   userData,
@@ -58,6 +59,8 @@ export default function Navbar({
           </div>
         </div>
         <div className="flex items-center space-x-4">
+          <Avatars />
+
           <Button variant="outline" onClick={() => setIsShareOpen(true)}>
             <Users className="w-4 h-4 mr-2" />
             Share