mostly done liveblocks integration

frontend/components/editor/live/avatars.tsx

@@ -0,0 +1,21 @@
+import { useOthers, useSelf } from "@/liveblocks.config"
+import Avatar from "@/components/ui/avatar"
+
+export function Avatars() {
+  const users = useOthers()
+  const currentUser = useSelf()
+
+  return (
+    <div className="flex">
+      {users.map(({ connectionId, info }) => {
+        return <Avatar key={connectionId} name={info.name} />
+      })}
+
+      {currentUser && (
+        <div className="relative ml-8 first:ml-0">
+          <Avatar name={currentUser.info.name} />
+        </div>
+      )}
+    </div>
+  )
+}

frontend/components/editor/live/cursors.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from "react"
+import {
+  AwarenessList,
+  TypedLiveblocksProvider,
+  UserAwareness,
+  useSelf,
+} from "@/liveblocks.config"
+
+export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
+  // Get user info from Liveblocks authentication endpoint
+  const userInfo = useSelf((me) => me.info)
+
+  const [awarenessUsers, setAwarenessUsers] = useState<AwarenessList>([])
+
+  useEffect(() => {
+    // Add user info to Yjs awareness
+    const localUser: UserAwareness["user"] = userInfo
+    yProvider.awareness.setLocalStateField("user", localUser)
+
+    // On changes, update `awarenessUsers`
+    function setUsers() {
+      setAwarenessUsers(
+        Array.from(yProvider.awareness.getStates()) as AwarenessList
+      )
+    }
+    yProvider.awareness.on("change", setUsers)
+    setUsers()
+
+    return () => {
+      yProvider.awareness.off("change", setUsers)
+    }
+  }, [yProvider])
+
+  // Insert awareness info into cursors with styles
+  const styleSheet = useMemo(() => {
+    let cursorStyles = ""
+
+    for (const [clientId, client] of awarenessUsers) {
+      if (client?.user) {
+        cursorStyles += `
+          .yRemoteSelection-${clientId},
+          .yRemoteSelectionHead-${clientId}  {
+            --user-color: ${"#FF0000"};
+          }
+          
+          .yRemoteSelectionHead-${clientId}::after {
+            content: "${client.user.name}";
+          }
+        `
+      }
+    }
+
+    return { __html: cursorStyles }
+  }, [awarenessUsers])
+
+  return <style dangerouslySetInnerHTML={styleSheet} />
+}

frontend/components/editor/live/room.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { RoomProvider } from "@/liveblocks.config"
+import { ClientSideSuspense } from "@liveblocks/react"
+
+export function Room({
+  id,
+  children,
+}: {
+  id: string
+  children: React.ReactNode
+}) {
+  return (
+    <RoomProvider
+      id={id}
+      initialPresence={{
+        cursor: null,
+      }}
+    >
+      <ClientSideSuspense fallback={<div>Loading!!!!</div>}>
+        {() => children}
+      </ClientSideSuspense>
+    </RoomProvider>
+  )
+}