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>
This commit is contained in:
Michael Chihlas
2026-02-10 19:39:15 -05:00
parent 0a157aa1a2
commit 20bec57bcc
2 changed files with 54 additions and 24 deletions

View File

@@ -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"

View File

@@ -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"