fix propagation

frontend/app/globals.css

@@ -87,18 +87,6 @@
   background: radial-gradient(circle at bottom, #312e81 -10%, hsl(0 0% 3.9%) 80%); /* violet 900 -> bg */
 }
 
-.gradient-project-card-bg {
-  background: radial-gradient(circle at bottom right, #a5b4fc -15%, #3730a3 25%, hsl(0 0% 3.9%) 50%); /* violet 300 -> 800 */
-}
-
-.gradient-project-card {
-  background: radial-gradient(circle at bottom right, #312e81 -75%, hsl(0 0% 3.9%) 50%); /* violet 900 -> bg */
-}
-
-.gradient-project-card-bg > div:hover {
-  background: radial-gradient(circle at bottom right, #312e81 -75%, hsl(0 0% 3.9%) 60%); /* violet 900 -> bg */
-}
-
 .inline-decoration::before {
   content: 'Generate';
   color: #525252;

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -1,30 +1,30 @@
-"use client"
+"use client";
 
-import { Sandbox } from "@/lib/types"
+import { Sandbox } from "@/lib/types";
-import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react"
+import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react";
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 export default function ProjectCardDropdown({
   sandbox,
   onVisibilityChange,
   onDelete,
 }: {
-  sandbox: Sandbox
+  sandbox: Sandbox;
-  onVisibilityChange: (sandbox: Sandbox) => void
+  onVisibilityChange: (sandbox: Sandbox) => void;
-  onDelete: (sandbox: Sandbox) => void
+  onDelete: (sandbox: Sandbox) => void;
 }) {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger
         onClick={(e) => {
-          e.preventDefault()
+          e.preventDefault();
-          e.stopPropagation()
+          e.stopPropagation();
         }}
         className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
       >
@@ -33,8 +33,8 @@ export default function ProjectCardDropdown({
       <DropdownMenuContent className="w-40">
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation()
+            e.stopPropagation();
-            onVisibilityChange(sandbox)
+            onVisibilityChange(sandbox);
           }}
           className="cursor-pointer"
         >
@@ -52,8 +52,8 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation()
+            e.stopPropagation();
-            onDelete(sandbox)
+            onDelete(sandbox);
           }}
           className="!text-destructive cursor-pointer"
         >
@@ -62,5 +62,5 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }

frontend/components/dashboard/projectCard/index.tsx

@@ -7,25 +7,31 @@ import ProjectCardDropdown from "./dropdown";
 import { Clock, Globe, Lock } from "lucide-react";
 import { Sandbox } from "@/lib/types";
 import { Card } from "@/components/ui/card";
+import { useRouter } from "next/navigation";
 
 export default function ProjectCard({
   children,
   sandbox,
   onVisibilityChange,
   onDelete,
+  deletingId,
 }: {
   children?: React.ReactNode;
   sandbox: Sandbox;
   onVisibilityChange: (sandbox: Sandbox) => void;
   onDelete: (sandbox: Sandbox) => void;
+  deletingId: string;
 }) {
   const [hovered, setHovered] = useState(false);
+  const router = useRouter();
 
   return (
     <Card
+      tabIndex={0}
+      onClick={() => router.push(`/code/${sandbox.id}`)}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      className="group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all relative overflow-hidden"
+      className={`group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-muted-foreground relative overflow-hidden transition-all`}
     >
       <AnimatePresence>
         {hovered && (

frontend/components/dashboard/projects.tsx

@@ -9,7 +9,7 @@ import Link from "next/link";
 import { Card } from "../ui/card";
 import { deleteSandbox, updateSandbox } from "@/lib/actions";
 import { toast } from "sonner";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CanvasRevealEffect } from "./projectCard/revealEffect";
 
 const colors = {
@@ -30,19 +30,20 @@ export default function DashboardProjects({
   sandboxes: Sandbox[];
   q: string | null;
 }) {
-  const [focusedId, setFocusedId] = useState<string | null>(null);
   const [deletingId, setDeletingId] = useState<string>("");
 
   const onDelete = async (sandbox: Sandbox) => {
     setDeletingId(sandbox.id);
     toast(`Project ${sandbox.name} deleted.`);
     await deleteSandbox(sandbox.id);
-    setTimeout(() => {
-      // timeout to wait for revalidatePath and avoid flashing
-      setDeletingId("");
-    }, 200);
   };
 
+  useEffect(() => {
+    if (deletingId) {
+      setDeletingId("");
+    }
+  }, [sandboxes]);
+
   const onVisibilityChange = async (sandbox: Sandbox) => {
     const newVisibility =
       sandbox.visibility === "public" ? "private" : "public";
@@ -71,17 +72,17 @@ export default function DashboardProjects({
                 <Link
                   key={sandbox.id}
                   href={`/code/${sandbox.id}`}
-                  onFocus={() => setFocusedId(sandbox.id)}
                   className={`${
                     deletingId === sandbox.id
-                      ? "pointer-events-none opacity-50"
+                      ? "pointer-events-none opacity-50 cursor-events-none"
-                      : ""
+                      : "cursor-pointer"
-                  } 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`}
+                  } 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`}
                 >
                   <ProjectCard
                     sandbox={sandbox}
                     onVisibilityChange={onVisibilityChange}
                     onDelete={onDelete}
+                    deletingId={deletingId}
                   >
                     <CanvasRevealEffect
                       animationSpeed={3}