feat: allow users to delete projects

src/pages/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useAuthStore } from '../store/authStore';
 import { useNavigate, Link } from 'react-router-dom';
-import { LogOut, Plus, Folder, Loader2 } from 'lucide-react';
+import { LogOut, Plus, Folder, Loader2, Trash2 } from 'lucide-react';
 import { api } from '../lib/api';
 
 interface Project {
@@ -31,6 +31,18 @@ export default function Dashboard() {
     fetchProjects();
   }, [user]);
 
+  const handleDeleteProject = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation(); // prevent navigating to editor
+    if (!confirm('Are you sure you want to delete this project?')) return;
+    try {
+      await api.deleteProject(id);
+      setProjects(projects.filter(p => p.id !== id));
+    } catch (err) {
+      console.error('Error deleting project:', err);
+      alert('Failed to delete project');
+    }
+  };
+
   const handleSignOut = async () => {
     await signOut();
     navigate('/');
@@ -108,6 +120,13 @@ export default function Dashboard() {
                    <h3 className="font-semibold text-white truncate">{project.name}</h3>
                    <p className="text-xs text-zinc-500 mt-1">{new Date(project.created_at).toLocaleDateString()}</p>
                  </div>
+                 <button 
+                  onClick={(e) => handleDeleteProject(e, project.id)}
+                  className="absolute top-4 right-4 p-2 text-zinc-500 hover:text-red-500 bg-zinc-900/80 rounded-lg opacity-0 group-hover:opacity-100 transition-all hover:bg-zinc-800"
+                  title="Delete Project"
+                >
+                  <Trash2 size={16} />
+                </button>
                </div>
              ))}
           </div>