From a60b4077ec7a231a7cd766ca7d1ba84d6fabfd13 Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 08:15:03 -0800
Subject: Add delete functionality for projects and sessions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add delete buttons (🗑️) next to project/session dropdowns
- Add confirmation dialogs before deletion
- Add onDeleteProject and onDeleteSession props to Header
- Implement delete handlers in App.tsx with error handling
- Clear selection and related state after deletion
- Add CSS styling for delete button with hover effect
---
 renderer/src/App.tsx               | 34 ++++++++++++++++++++++++++++++++++
 renderer/src/components/Header.tsx | 36 ++++++++++++++++++++++++++++++++++++
 renderer/src/styles/globals.css    | 12 ++++++++++++
 3 files changed, 82 insertions(+)

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index d5a2efd..26ac252 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -237,6 +237,38 @@ export function App() {
     setOriginalContent("");
   };
 
+  const handleDeleteProject = async (id: string) => {
+    try {
+      await api.deleteProject(id);
+      setProjects((prev) => prev.filter((p) => p.id !== id));
+      if (selectedProject?.id === id) {
+        setSelectedProject(null);
+        setSelectedSession(null);
+        setSessions([]);
+        setMessages([]);
+        setDocumentContent("");
+        setOriginalContent("");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete project");
+    }
+  };
+
+  const handleDeleteSession = async (id: string) => {
+    try {
+      await api.deleteSession(id);
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      if (selectedSession?.id === id) {
+        setSelectedSession(null);
+        setMessages([]);
+        setDocumentContent("");
+        setOriginalContent("");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete session");
+    }
+  };
+
   return (
     <div className="app">
       <Header
@@ -248,6 +280,8 @@ export function App() {
         onSelectSession={setSelectedSession}
         onCreateProject={handleCreateProject}
         onCreateSession={handleCreateSession}
+        onDeleteProject={handleDeleteProject}
+        onDeleteSession={handleDeleteSession}
       />
 
       <div className="main-content">
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index 3dcbba9..b6bed26 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -10,6 +10,8 @@ interface HeaderProps {
   onSelectSession: (session: Session | null) => void;
   onCreateProject: () => void;
   onCreateSession: () => void;
+  onDeleteProject?: (id: string) => void;
+  onDeleteSession?: (id: string) => void;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -29,7 +31,23 @@ export function Header({
   onSelectSession,
   onCreateProject,
   onCreateSession,
+  onDeleteProject,
+  onDeleteSession,
 }: HeaderProps) {
+  const handleDeleteProject = () => {
+    if (!selectedProject || !onDeleteProject) return;
+    if (confirm(`Delete project "${selectedProject.name}"? This cannot be undone.`)) {
+      onDeleteProject(selectedProject.id);
+    }
+  };
+
+  const handleDeleteSession = () => {
+    if (!selectedSession || !onDeleteSession) return;
+    if (confirm(`Delete session "${selectedSession.name}"? This cannot be undone.`)) {
+      onDeleteSession(selectedSession.id);
+    }
+  };
+
   return (
     <header className="header">
       <div className="header-left">
@@ -49,6 +67,15 @@ export function Header({
           ))}
         </select>
         <button onClick={onCreateProject}>+ Project</button>
+        {selectedProject && onDeleteProject && (
+          <button
+            onClick={handleDeleteProject}
+            className="btn-delete"
+            title="Delete project"
+          >
+            🗑️
+          </button>
+        )}
 
         {selectedProject && (
           <>
@@ -67,6 +94,15 @@ export function Header({
               ))}
             </select>
             <button onClick={onCreateSession}>+ Session</button>
+            {selectedSession && onDeleteSession && (
+              <button
+                onClick={handleDeleteSession}
+                className="btn-delete"
+                title="Delete session"
+              >
+                🗑️
+              </button>
+            )}
           </>
         )}
       </div>
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 809ff15..e1d945a 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -65,6 +65,18 @@ body {
   background: var(--border);
 }
 
+.header button.btn-delete {
+  background: transparent;
+  border: 1px solid var(--border);
+  padding: 6px 8px;
+  font-size: 14px;
+}
+
+.header button.btn-delete:hover {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+
 .phase-indicator {
   display: flex;
   gap: 4px;
-- 
cgit v1.2.3