diff --git a/frontend/src/components/tree-editor/AnswerStubCard.tsx b/frontend/src/components/tree-editor/AnswerStubCard.tsx index dea56a01..1a630ad6 100644 --- a/frontend/src/components/tree-editor/AnswerStubCard.tsx +++ b/frontend/src/components/tree-editor/AnswerStubCard.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { HelpCircle, Zap, CheckCircle } from 'lucide-react' +import { HelpCircle, Zap, CheckCircle, Trash2 } from 'lucide-react' import { cn } from '@/lib/utils' import type { TreeStructure } from '@/types' @@ -7,28 +7,62 @@ interface AnswerStubCardProps { node: TreeStructure // type === 'answer' fromOption?: string onSelectType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void + onDelete: (nodeId: string) => void } -export function AnswerStubCard({ node, fromOption, onSelectType }: AnswerStubCardProps) { +export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: AnswerStubCardProps) { const [picking, setPicking] = useState(false) + const [confirming, setConfirming] = useState(false) const label = fromOption || node.title || 'Answer' return (
!picking && setPicking(true)} + onClick={() => !picking && !confirming && setPicking(true)} > + {/* Delete button — top-right corner */} + {!picking && !confirming && ( + + )} + {/* Label */}
{label}
- {/* Prompt / type picker */} - {!picking ? ( + {/* Confirm delete */} + {confirming ? ( +
+

Delete this stub?

+
+ + +
+
+ ) : !picking ? (
+ Choose Type
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx index b8f7bedf..255023bc 100644 --- a/frontend/src/components/tree-editor/TreeCanvas.tsx +++ b/frontend/src/components/tree-editor/TreeCanvas.tsx @@ -503,6 +503,7 @@ export function TreeCanvas() { node={node} fromOption={optionLabel} onSelectType={handleSelectAnswerType} + onDelete={handleDelete} /> ) : (