From 20bec57bccbede4a11d6ef1583252502edf63484 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Tue, 10 Feb 2026 19:39:15 -0500
Subject: [PATCH] fix: add missing delete button to table and list tree views

The onDeleteTree prop was accepted but never used in TreeTableView and
TreeListView. Now both views show a trash icon (permission-gated) matching
the existing grid view behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/library/TreeListView.tsx   | 39 +++++++++++++------
 .../src/components/library/TreeTableView.tsx  | 39 +++++++++++++------
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index 0916843f..5ecc154a 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, GitBranch, FileText } from 'lucide-react'
+import { Pencil, Globe, Lock, GitBranch, FileText, Trash2 } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { AddToFolderMenu } from './AddToFolderMenu'
@@ -19,6 +19,7 @@ export function TreeListView({
   trees,
   onStartSession,
   onTagClick,
+  onDeleteTree,
   onFolderCreated,
   onForkTree,
 }: TreeListViewProps) {
@@ -94,17 +95,31 @@ export function TreeListView({
                 </button>
               )}
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
-                <Link
-                  to={`/trees/${tree.id}/edit`}
-                  className={cn(
-                    'rounded-md border border-white/10 p-1.5 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
-                  )}
-                  title="Edit tree"
-                  aria-label="Edit tree"
-                >
-                  <Pencil className="h-4 w-4" />
-                </Link>
+                <>
+                  <Link
+                    to={`/trees/${tree.id}/edit`}
+                    className={cn(
+                      'rounded-md border border-white/10 p-1.5 text-white/60',
+                      'hover:bg-white/10 hover:text-white'
+                    )}
+                    title="Edit tree"
+                    aria-label="Edit tree"
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => onDeleteTree(tree)}
+                    className={cn(
+                      'rounded-md border border-white/10 p-1.5 text-white/60',
+                      'hover:bg-red-500/20 hover:text-red-400'
+                    )}
+                    title="Delete tree"
+                    aria-label="Delete tree"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </>
               )}
               <button
                 type="button"
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index cd23f5a5..469108f0 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText } from 'lucide-react'
+import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2 } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { AddToFolderMenu } from './AddToFolderMenu'
@@ -24,6 +24,7 @@ export function TreeTableView({
   onStartSession,
   onTagClick,
   onFolderCreated,
+  onDeleteTree,
   onSortChange,
   onForkTree,
 }: TreeTableViewProps) {
@@ -198,17 +199,31 @@ export function TreeTableView({
                     </button>
                   )}
                   {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
-                    <Link
-                      to={`/trees/${tree.id}/edit`}
-                      className={cn(
-                        'rounded-md border border-white/10 p-1.5 text-white/60',
-                        'hover:bg-white/10 hover:text-white'
-                      )}
-                      title="Edit tree"
-                      aria-label="Edit tree"
-                    >
-                      <Pencil className="h-3.5 w-3.5" />
-                    </Link>
+                    <>
+                      <Link
+                        to={`/trees/${tree.id}/edit`}
+                        className={cn(
+                          'rounded-md border border-white/10 p-1.5 text-white/60',
+                          'hover:bg-white/10 hover:text-white'
+                        )}
+                        title="Edit tree"
+                        aria-label="Edit tree"
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Link>
+                      <button
+                        type="button"
+                        onClick={() => onDeleteTree(tree)}
+                        className={cn(
+                          'rounded-md border border-white/10 p-1.5 text-white/60',
+                          'hover:bg-red-500/20 hover:text-red-400'
+                        )}
+                        title="Delete tree"
+                        aria-label="Delete tree"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    </>
                   )}
                   <button
                     type="button"