fix worker + start create modal with logic

frontend/components/dashboard/index.tsx

@@ -20,72 +20,84 @@ import Image from "next/image"
 import ProjectCardDropdown from "./projectCard/dropdown"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
+import NewProjectModal from "./newProject"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
 export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
   const [screen, setScreen] = useState<TScreen>("projects")
 
+  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
+
   const activeScreen = (s: TScreen) => {
     if (screen === s) return "justify-start"
     else return "justify-start font-normal text-muted-foreground"
   }
 
   return (
-    <div className="flex grow w-full">
-      <div className="w-56 shrink-0 border-r border-border p-4 justify-between flex flex-col">
-        <div className="flex flex-col">
-          <CustomButton className="mb-4">
-            <Plus className="w-4 h-4 mr-2" />
-            New Project
-          </CustomButton>
-          <Button
-            variant="ghost"
-            onClick={() => setScreen("projects")}
-            className={activeScreen("projects")}
-          >
-            <FolderDot className="w-4 h-4 mr-2" />
-            My Projects
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => setScreen("shared")}
-            className={activeScreen("shared")}
-          >
-            <Users className="w-4 h-4 mr-2" />
-            Shared With Me
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => setScreen("settings")}
-            className={activeScreen("settings")}
-          >
-            <Settings className="w-4 h-4 mr-2" />
-            Settings
-          </Button>
-        </div>
-        <div className="flex flex-col">
-          <Button
-            variant="ghost"
-            className="justify-start font-normal text-muted-foreground"
-          >
-            <Code2 className="w-4 h-4 mr-2" />
-            GitHub Repository
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start font-normal text-muted-foreground"
-          >
-            <HelpCircle className="w-4 h-4 mr-2" />
-            About
-          </Button>
+    <>
+      <NewProjectModal
+        open={newProjectModalOpen}
+        setOpen={setNewProjectModalOpen}
+      />
+      <div className="flex grow w-full">
+        <div className="w-56 shrink-0 border-r border-border p-4 justify-between flex flex-col">
+          <div className="flex flex-col">
+            <CustomButton
+              onClick={() => setNewProjectModalOpen(true)}
+              className="mb-4"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              New Project
+            </CustomButton>
+            <Button
+              variant="ghost"
+              onClick={() => setScreen("projects")}
+              className={activeScreen("projects")}
+            >
+              <FolderDot className="w-4 h-4 mr-2" />
+              My Projects
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setScreen("shared")}
+              className={activeScreen("shared")}
+            >
+              <Users className="w-4 h-4 mr-2" />
+              Shared With Me
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setScreen("settings")}
+              className={activeScreen("settings")}
+            >
+              <Settings className="w-4 h-4 mr-2" />
+              Settings
+            </Button>
+          </div>
+          <div className="flex flex-col">
+            <Button
+              variant="ghost"
+              className="justify-start font-normal text-muted-foreground"
+            >
+              <Code2 className="w-4 h-4 mr-2" />
+              GitHub Repository
+            </Button>
+            <Button
+              variant="ghost"
+              className="justify-start font-normal text-muted-foreground"
+            >
+              <HelpCircle className="w-4 h-4 mr-2" />
+              About
+            </Button>
+          </div>
         </div>
+        {screen === "projects" ? (
+          <DashboardProjects sandboxes={sandboxes} />
+        ) : screen === "shared" ? (
+          <DashboardSharedWithMe sandboxes={sandboxes} />
+        ) : screen === "settings" ? null : null}
       </div>
-      {screen === "projects" ? (
-        <DashboardProjects sandboxes={sandboxes} />
-      ) : screen === "shared" ? (
-        <DashboardSharedWithMe sandboxes={sandboxes} />
-      ) : screen === "settings" ? null : null}
-    </div>
+    </>
   )
 }

frontend/components/dashboard/newProject.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import Image from "next/image"
+import { useState } from "react"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+
+import CustomButton from "@/components/ui/customButton"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type TOptions = "react" | "node"
+
+const data: {
+  id: TOptions
+  name: string
+  icon: string
+  description: string
+}[] = [
+  {
+    id: "react",
+    name: "React",
+    icon: "/project-icons/react.svg",
+    description: "A JavaScript library for building user interfaces",
+  },
+  {
+    id: "node",
+    name: "Node",
+    icon: "/project-icons/node.svg",
+    description: "A JavaScript runtime built on the V8 JavaScript engine",
+  },
+]
+
+const formSchema = z.object({
+  name: z.string().min(1).max(16),
+  visibility: z.enum(["public", "private"]),
+})
+
+export default function NewProjectModal({
+  open,
+  setOpen,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const [selected, setSelected] = useState<TOptions>("react")
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      visibility: "public",
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    const sandboxData = { type: selected, ...values }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create A Sandbox</DialogTitle>
+        </DialogHeader>
+        <div className="grid grid-cols-2 w-full gap-2 mt-2">
+          {data.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setSelected(item.id)}
+              className={`${
+                selected === item.id ? "border-foreground" : "border-border"
+              } rounded-md border bg-card text-card-foreground shadow text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring`}
+            >
+              <div className="space-x-2 flex items-center justify-start w-full">
+                <Image alt="" src={item.icon} width={20} height={20} />
+                <div className="font-medium">{item.name}</div>
+              </div>
+              <div className="mt-2 text-muted-foreground text-sm">
+                {item.description}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="mb-4">
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Project" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="visibility"
+              render={({ field }) => (
+                <FormItem className="mb-8">
+                  <FormLabel>Visibility</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="public">Public</SelectItem>
+                      <SelectItem value="private">Private</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <CustomButton type="submit" className="w-full">
+              Submit
+            </CustomButton>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/components/dashboard/projectCard/index.tsx

@@ -14,6 +14,7 @@ export default function ProjectCard({
     <Link
       href={`/code/${id}`}
       className={cn(
+        className,
         "rounded-lg border bg-card text-card-foreground shadow h-48 p-[1px] gradient-project-card-bg 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"
       )}
     >