add sonner + project creation working

backend/database/drizzle/0002_rare_beyonder.sql

@@ -0,0 +1 @@
+ALTER TABLE sandbox ADD `visibility` text;

backend/database/drizzle/meta/0002_snapshot.json

@@ -0,0 +1,118 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "a2239d60-e4b8-4375-979f-bbca5539a825",
+  "prevId": "739c5df4-de1b-408b-bc8c-5783688c5297",
+  "tables": {
+    "sandbox": {
+      "name": "sandbox",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sandbox_id_unique": {
+          "name": "sandbox_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "sandbox_user_id_user_id_fk": {
+          "name": "sandbox_user_id_user_id_fk",
+          "tableFrom": "sandbox",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_unique": {
+          "name": "user_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

backend/database/drizzle/meta/0003_snapshot.json

@@ -0,0 +1,118 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "913932e8-65cf-40b9-a978-8818396234f6",
+  "prevId": "a2239d60-e4b8-4375-979f-bbca5539a825",
+  "tables": {
+    "sandbox": {
+      "name": "sandbox",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sandbox_id_unique": {
+          "name": "sandbox_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "sandbox_user_id_user_id_fk": {
+          "name": "sandbox_user_id_user_id_fk",
+          "tableFrom": "sandbox",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_unique": {
+          "name": "user_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

backend/database/drizzle/meta/_journal.json

@@ -15,6 +15,20 @@
       "when": 1713937589365,
       "tag": "0001_magenta_tenebrous",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "5",
+      "when": 1714247208074,
+      "tag": "0002_rare_beyonder",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "5",
+      "when": 1714247272878,
+      "tag": "0003_silky_talos",
+      "breakpoints": true
     }
   ]
 }

backend/database/src/index.ts

@@ -13,6 +13,9 @@ export interface Env {
 
 // https://github.com/drizzle-team/drizzle-orm/tree/main/examples/cloudflare-d1
 
+// npm run generate
+// npx wrangler d1 execute d1-sandbox --local --file=./drizzle/<FILE>
+
 export default {
 	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
 		const success = new Response("Success", { status: 200 });
@@ -26,27 +29,8 @@ export default {
 
 		const db = drizzle(env.DB, { schema });
 
-		if (path === "/api/sandbox/create" && method === "POST") {
+		if (path === "/api/sandbox") {
-			const initSchema = z.object({
+			if (method === "GET") {
-				type: z.enum(["react", "node"]),
-				name: z.string(),
-				userId: z.string(),
-			});
-
-			const body = await request.json();
-			const { type, name, userId } = initSchema.parse(body);
-
-			const sb = await db.insert(sandbox).values({ type, name, userId }).returning().get();
-
-			console.log("sb:", sb);
-			await fetch("https://storage.ishaan1013.workers.dev/api/init", {
-				method: "POST",
-				body: JSON.stringify({ sandboxId: sb.id, type }),
-				headers: { "Content-Type": "application/json" },
-			});
-
-			return success;
-		} else if (path === "/api/sandbox" && method === "GET") {
 				const params = url.searchParams;
 				if (params.has("id")) {
 					const id = params.get("id") as string;
@@ -58,6 +42,31 @@ export default {
 					const res = await db.select().from(sandbox).all();
 					return json(res ?? {});
 				}
+			} else if (method === "PUT") {
+				const initSchema = z.object({
+					type: z.enum(["react", "node"]),
+					name: z.string(),
+					userId: z.string(),
+					visibility: z.enum(["public", "private"]),
+				});
+
+				const body = await request.json();
+				const { type, name, userId, visibility } = initSchema.parse(body);
+
+				const sb = await db.insert(sandbox).values({ type, name, userId, visibility }).returning().get();
+
+				// console.log("sb:", sb);
+				await fetch("https://storage.ishaan1013.workers.dev/api/init", {
+					method: "POST",
+					body: JSON.stringify({ sandboxId: sb.id, type }),
+					headers: { "Content-Type": "application/json" },
+				});
+
+				return new Response(sb.id, { status: 200 });
+			} else {
+				console.log(method);
+				return methodNotAllowed;
+			}
 		} else if (path === "/api/user") {
 			if (method === "GET") {
 				const params = url.searchParams;

backend/database/src/schema.ts

@@ -24,6 +24,7 @@ export const sandbox = sqliteTable("sandbox", {
 		.unique(),
 	name: text("name").notNull(),
 	type: text("type", { enum: ["react", "node"] }).notNull(),
+	visibility: text("visibility", { enum: ["public", "private"] }),
 	userId: text("user_id")
 		.notNull()
 		.references(() => user.id),

backend/server/src/types.ts

@@ -11,6 +11,7 @@ export type Sandbox = {
   id: string
   name: string
   type: "react" | "node"
+  visibility: "public" | "private"
   userId: string
 }
 

frontend/app/layout.tsx

@@ -4,6 +4,7 @@ import { GeistMono } from "geist/font/mono"
 import "./globals.css"
 import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
+import { Toaster } from "@/components/ui/sonner"
 
 export const metadata: Metadata = {
   title: "Sandbox",
@@ -26,6 +27,7 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             {children}
+            <Toaster position="bottom-left" richColors />
           </ThemeProvider>
         </body>
       </html>

frontend/components/dashboard/newProject.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dialog"
 import Image from "next/image"
 import { useState } from "react"
-import { z } from "zod"
+import { set, z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 
@@ -32,6 +32,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { useUser } from "@clerk/nextjs"
+import { createSandbox } from "@/lib/actions"
+import { useRouter } from "next/navigation"
+import { Loader2 } from "lucide-react"
 
 type TOptions = "react" | "node"
 
@@ -68,6 +72,10 @@ export default function NewProjectModal({
   setOpen: (open: boolean) => void
 }) {
   const [selected, setSelected] = useState<TOptions>("react")
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const user = useUser()
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -77,8 +85,14 @@ export default function NewProjectModal({
     },
   })
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  async function onSubmit(values: z.infer<typeof formSchema>) {
-    const sandboxData = { type: selected, ...values }
+    if (!user.isSignedIn) return
+
+    const sandboxData = { type: selected, userId: user.user.id, ...values }
+    setLoading(true)
+
+    const id = await createSandbox(sandboxData)
+    router.push(`/code/${id}`)
   }
 
   return (
@@ -146,8 +160,14 @@ export default function NewProjectModal({
                 </FormItem>
               )}
             />
-            <CustomButton type="submit" className="w-full">
+            <CustomButton disabled={loading} type="submit" className="w-full">
-              Submit
+              {loading ? (
+                <>
+                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+                </>
+              ) : (
+                "Submit"
+              )}
             </CustomButton>
           </form>
         </Form>

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -20,7 +20,7 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
           e.preventDefault()
           e.stopPropagation()
         }}
-        className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+        className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
       >
         <Ellipsis className="w-4 h-4" />
       </DropdownMenuTrigger>

frontend/components/dashboard/projects.tsx

@@ -2,7 +2,9 @@ import { Sandbox } from "@/lib/types"
 import ProjectCard from "./projectCard"
 import Image from "next/image"
 import ProjectCardDropdown from "./projectCard/dropdown"
-import { Clock, Globe } from "lucide-react"
+import { Clock, Globe, Lock } from "lucide-react"
+import Link from "next/link"
+import { Card } from "../ui/card"
 
 export default function DashboardProjects({
   sandboxes,
@@ -12,9 +14,16 @@ export default function DashboardProjects({
   return (
     <div className="grow p-4 flex flex-col">
       <div className="text-xl font-medium mb-8">My Projects</div>
-      <div className="grow w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
+      <div className="grow w-full ">
+        <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
           {sandboxes.map((sandbox) => (
-          <ProjectCard key={sandbox.id} id={sandbox.id}>
+            <Link
+              key={sandbox.id}
+              href={`/code/${sandbox.id}`}
+              className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+            >
+              <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
+                {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
                 <div className="space-x-2 flex items-center justify-start w-full">
                   <Image
                     alt=""
@@ -33,15 +42,26 @@ export default function DashboardProjects({
                 </div>
                 <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
                   <div className="flex items-center">
+                    {sandbox.visibility === "private" ? (
+                      <>
+                        <Lock className="w-3 h-3 mr-2" /> Private
+                      </>
+                    ) : (
+                      <>
                         <Globe className="w-3 h-3 mr-2" /> Public
+                      </>
+                    )}
                   </div>
                   <div className="flex items-center">
                     <Clock className="w-3 h-3 mr-2" /> 3d ago
                   </div>
                 </div>
-          </ProjectCard>
+                {/* </ProjectCard> */}
+              </Card>
+            </Link>
           ))}
         </div>
       </div>
+    </div>
   )
 }

frontend/components/editor/index.tsx

@@ -23,8 +23,8 @@ import { useClerk } from "@clerk/nextjs"
 import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
 
 import { io } from "socket.io-client"
-import { set } from "zod"
 import { processFileType } from "@/lib/utils"
+import { toast } from "sonner"
 
 export default function CodeEditor({
   userId,
@@ -117,11 +117,6 @@ export default function CodeEditor({
     setTabs((prev) => prev.filter((t) => t.id !== tab.id))
   }
 
-  // Note: add renaming validation:
-  // In general: must not contain / or \ or whitespace, not empty, no duplicates
-  // Files: must contain dot
-  // Folders: must not contain dot
-
   const handleRename = (
     id: string,
     newName: string,
@@ -129,14 +124,18 @@ export default function CodeEditor({
     type: "file" | "folder"
   ) => {
     // Validation
+    if (newName === oldName) {
+      return false
+    }
+
     if (
-      newName === oldName ||
       newName.includes("/") ||
       newName.includes("\\") ||
       newName.includes(" ") ||
       (type === "file" && !newName.includes(".")) ||
       (type === "folder" && newName.includes("."))
     ) {
+      toast.error("Invalid file name.")
       return false
     }
 

frontend/components/ui/customButton.tsx

@@ -7,19 +7,22 @@ const Button = ({
   className,
   onClick,
   type,
+  disabled = false,
 }: {
   children: React.ReactNode
   className?: string
   onClick?: () => void
   type?: "button" | "submit" | "reset"
+  disabled?: boolean
 }) => {
   return (
     <button
       onClick={onClick}
+      disabled={disabled}
       type={type ?? "button"}
       className={cn(
         className,
-        "gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        `gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
       )}
     >
       <div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">

frontend/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

frontend/lib/actions.ts

@@ -3,13 +3,16 @@
 export async function createSandbox(body: {
   type: string
   name: string
+  userId: string
   visibility: string
 }) {
-  const res = await fetch("http://localhost:8787/api/sandbox/create", {
+  const res = await fetch("http://localhost:8787/api/sandbox", {
-    method: "POST",
+    method: "PUT",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify(body),
   })
+
+  return await res.text()
 }

frontend/lib/types.ts

@@ -11,6 +11,7 @@ export type Sandbox = {
   id: string
   name: string
   type: "react" | "node"
+  visibility: "public" | "private"
   userId: string
 }
 

frontend/package-lock.json

@@ -30,6 +30,7 @@
         "react-hook-form": "^7.51.3",
         "react-resizable-panels": "^2.0.16",
         "socket.io-client": "^4.7.5",
+        "sonner": "^1.4.41",
         "tailwind-merge": "^2.2.2",
         "tailwindcss-animate": "^1.0.7",
         "vscode-icons-js": "^11.6.1",
@@ -3012,6 +3013,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.4.41",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.4.41.tgz",
+      "integrity": "sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz",

frontend/package.json

@@ -31,6 +31,7 @@
     "react-hook-form": "^7.51.3",
     "react-resizable-panels": "^2.0.16",
     "socket.io-client": "^4.7.5",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "vscode-icons-js": "^11.6.1",