sandbox data route + cosmetic changes

backend/database/src/index.ts

@@ -46,8 +46,18 @@ export default {
 			});
 
 			return success;
-
-			// } else if (path === "/api/sandbox/files") {
+		} else if (path === "/api/sandbox" && method === "GET") {
+			const params = url.searchParams;
+			if (params.has("id")) {
+				const id = params.get("id") as string;
+				const res = await db.query.sandbox.findFirst({
+					where: (sandbox, { eq }) => eq(sandbox.id, id),
+				});
+				return json(res ?? {});
+			} else {
+				const res = await db.select().from(sandbox).all();
+				return json(res ?? {});
+			}
 		} else if (path === "/api/user") {
 			if (method === "GET") {
 				const params = url.searchParams;

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

@@ -1,5 +1,5 @@
 import Navbar from "@/components/editor/navbar"
-import { User } from "@/lib/types"
+import { Sandbox, User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
 import { redirect } from "next/navigation"
@@ -14,6 +14,12 @@ const getUserData = async (id: string) => {
   return userData
 }
 
+const getSandboxData = async (id: string) => {
+  const sandboxRes = await fetch(`http://localhost:8787/api/sandbox?id=${id}`)
+  const sandboxData: Sandbox = await sandboxRes.json()
+  return sandboxData
+}
+
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -23,10 +29,11 @@ export default async function CodePage({ params }: { params: { id: string } }) {
   }
 
   const userData = await getUserData(user.id)
+  const sandboxData = await getSandboxData(sandboxId)
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Navbar userData={userData} />
+      <Navbar userData={userData} sandboxData={sandboxData} />
       <div className="w-screen flex grow">
         <CodeEditor userId={user.id} sandboxId={sandboxId} />
       </div>

frontend/components/editor/index.tsx

@@ -23,6 +23,7 @@ import { TFile, TFileData, TFolder } from "./sidebar/types"
 
 import { io } from "socket.io-client"
 import { set } from "zod"
+import { processFileType } from "@/lib/utils"
 
 export default function CodeEditor({
   userId,
@@ -92,7 +93,7 @@ export default function CodeEditor({
     socket.emit("getFile", tab.id, (response: string) => {
       setActiveFile(response)
     })
-    setEditorLanguage(tab.name.split(".").pop() ?? "plaintext")
+    setEditorLanguage(processFileType(tab.name))
     setActiveId(tab.id)
   }
 

frontend/components/editor/navbar/index.tsx

@@ -2,10 +2,16 @@ import Image from "next/image"
 import Logo from "@/assets/logo.svg"
 import { Pencil } from "lucide-react"
 import Link from "next/link"
-import { User } from "@/lib/types"
+import { Sandbox, User } from "@/lib/types"
 import UserButton from "@/components/ui/userButton"
 
-export default function Navbar({ userData }: { userData: User }) {
+export default function Navbar({
+  userData,
+  sandboxData,
+}: {
+  userData: User
+  sandboxData: Sandbox
+}) {
   return (
     <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
@@ -16,7 +22,7 @@ export default function Navbar({ userData }: { userData: User }) {
           <Image src={Logo} alt="Logo" width={36} height={36} />
         </Link>
         <div className="text-sm font-medium flex items-center">
-          My React Project{" "}
+          {sandboxData.name}
           <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
             <Pencil className="w-4 h-4" />
           </div>

frontend/lib/utils.ts

@@ -4,3 +4,13 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function processFileType(file: string) {
+  const ending = file.split(".").pop()
+
+  if (ending === "ts" || ending === "tsx") return "typescript"
+  if (ending === "js" || ending === "jsx") return "javascript"
+
+  if (ending) return ending
+  return "plaintext"
+}