refactor terminal logic + state variables. temporarily break terminal

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

@@ -1,64 +1,83 @@
-import Navbar from "@/components/editor/navbar"
-import { Room } from "@/components/editor/live/room"
-import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
-import { currentUser } from "@clerk/nextjs"
-import dynamic from "next/dynamic"
-import { redirect } from "next/navigation"
+import Navbar from "@/components/editor/navbar";
+import { Room } from "@/components/editor/live/room";
+import { Sandbox, User, UsersToSandboxes } from "@/lib/types";
+import { currentUser } from "@clerk/nextjs";
+import dynamic from "next/dynamic";
+import { notFound, redirect } from "next/navigation";
+import Loading from "@/components/editor/loading";
+import { Suspense } from "react";
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
   ssr: false,
-})
+});
 
 const getUserData = async (id: string) => {
   const userRes = await fetch(
     `https://database.ishaan1013.workers.dev/api/user?id=${id}`
-  )
-  const userData: User = await userRes.json()
-  return userData
-}
+  );
+  const userData: User = await userRes.json();
+  return userData;
+};
 
 const getSandboxData = async (id: string) => {
   const sandboxRes = await fetch(
     `https://database.ishaan1013.workers.dev/api/sandbox?id=${id}`
-  )
-  const sandboxData: Sandbox = await sandboxRes.json()
-  return sandboxData
-}
+  );
+  const sandboxData: Sandbox = await sandboxRes.json();
+  return sandboxData;
+};
 
 const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
   const shared = await Promise.all(
     usersToSandboxes.map(async (user) => {
       const userRes = await fetch(
         `https://database.ishaan1013.workers.dev/api/user?id=${user.userId}`
-      )
-      const userData: User = await userRes.json()
-      return { id: userData.id, name: userData.name }
+      );
+      const userData: User = await userRes.json();
+      return { id: userData.id, name: userData.name };
     })
-  )
+  );
 
-  return shared
-}
+  return shared;
+};
 
 export default async function CodePage({ params }: { params: { id: string } }) {
-  const user = await currentUser()
-  const sandboxId = params.id
+  const user = await currentUser();
+  const sandboxId = params.id;
 
   if (!user) {
-    redirect("/")
+    redirect("/");
   }
 
-  const userData = await getUserData(user.id)
-  const sandboxData = await getSandboxData(sandboxId)
-  const shared = await getSharedUsers(sandboxData.usersToSandboxes)
+  const userData = await getUserData(user.id);
+  const sandboxData = await getSandboxData(sandboxId);
+  const shared = await getSharedUsers(sandboxData.usersToSandboxes);
+
+  const isOwner = sandboxData.userId === user.id;
+  const isSharedUser = shared.some((uts) => uts.id === user.id);
+
+  if (!isOwner && !isSharedUser) {
+    return notFound();
+  }
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Room id={sandboxId}>
-        <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
-        <div className="w-screen flex grow">
-          <CodeEditor userData={userData} sandboxData={sandboxData} />
-        </div>
-      </Room>
+      <Suspense fallback={<Loading />}>
+        <Room id={sandboxId}>
+          <Navbar
+            userData={userData}
+            sandboxData={sandboxData}
+            shared={shared}
+          />
+          <div className="w-screen flex grow">
+            <CodeEditor
+              userData={userData}
+              sandboxData={sandboxData}
+              isSharedUser={isSharedUser}
+            />
+          </div>
+        </Room>
+      </Suspense>
     </div>
-  )
+  );
 }