start liveblocks integration

frontend/app/(app)/code/[id]/page.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/editor/navbar"
+import { Room } from "@/components/editor/room"
 import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
@@ -48,10 +49,12 @@ export default async function CodePage({ params }: { params: { id: string } }) {
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+      {/* <Room> */}
       <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
       <div className="w-screen flex grow">
         <CodeEditor userData={userData} sandboxId={sandboxId} />
       </div>
+      {/* </Room> */}
     </div>
   )
 }

frontend/app/(app)/layout.tsx

@@ -1,3 +1,4 @@
+import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { redirect } from "next/navigation"
 
@@ -13,9 +14,9 @@ export default async function AppAuthLayout({
   }
 
   const dbUser = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
-  const dbUserJSON = await dbUser.json()
+  const dbUserJSON = (await dbUser.json()) as User
 
-  if (!dbUserJSON?.id) {
+  if (!dbUserJSON.id) {
     const res = await fetch("http://localhost:8787/api/user", {
       method: "POST",
       headers: {