implement server actions for sandbox data mutation

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Sandbox } from "@/lib/types"
-import { Ellipsis, Lock, Trash2 } from "lucide-react"
+import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react"
 
 import {
   DropdownMenu,
@@ -12,7 +12,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
-export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
+export default function ProjectCardDropdown({
+  sandbox,
+  onVisibilityChange,
+  onDelete,
+}: {
+  sandbox: Sandbox
+  onVisibilityChange: (sandbox: Sandbox) => void
+  onDelete: (sandbox: Sandbox) => void
+}) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
@@ -25,12 +33,33 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
         <Ellipsis className="w-4 h-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40">
-        <DropdownMenuItem className="cursor-pointer">
-          <Lock className="mr-2 h-4 w-4" />
-          <span>Make Private</span>
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.stopPropagation()
+            onVisibilityChange(sandbox)
+          }}
+          className="cursor-pointer"
+        >
+          {sandbox.visibility === "public" ? (
+            <>
+              <Lock className="mr-2 h-4 w-4" />
+              <span>Make Private</span>
+            </>
+          ) : (
+            <>
+              <Globe className="mr-2 h-4 w-4" />
+              <span>Make Public</span>
+            </>
+          )}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="!text-destructive cursor-pointer">
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.stopPropagation()
+            onDelete(sandbox)
+          }}
+          className="!text-destructive cursor-pointer"
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           <span>Delete Project</span>
         </DropdownMenuItem>

frontend/components/dashboard/projects.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Sandbox } from "@/lib/types"
 import ProjectCard from "./projectCard"
 import Image from "next/image"
@@ -5,12 +7,28 @@ import ProjectCardDropdown from "./projectCard/dropdown"
 import { Clock, Globe, Lock } from "lucide-react"
 import Link from "next/link"
 import { Card } from "../ui/card"
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
+import { toast } from "sonner"
 
 export default function DashboardProjects({
   sandboxes,
 }: {
   sandboxes: Sandbox[]
 }) {
+  const onDelete = async (sandbox: Sandbox) => {
+    toast(`Project ${sandbox.name} deleted.`)
+    const res = await deleteSandbox(sandbox.id)
+  }
+
+  const onVisibilityChange = async (sandbox: Sandbox) => {
+    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
+    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
+    const res = await updateSandbox({
+      id: sandbox.id,
+      visibility: newVisibility,
+    })
+  }
+
   return (
     <div className="grow p-4 flex flex-col">
       <div className="text-xl font-medium mb-8">My Projects</div>
@@ -38,7 +56,11 @@ export default function DashboardProjects({
                   <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
                     {sandbox.name}
                   </div>
-                  <ProjectCardDropdown sandbox={sandbox} />
+                  <ProjectCardDropdown
+                    sandbox={sandbox}
+                    onVisibilityChange={onVisibilityChange}
+                    onDelete={onDelete}
+                  />
                 </div>
                 <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
                   <div className="flex items-center">