feat: canvas UX fixes — scroll, fullscreen, InfoTip tooltips, answer stub system #80

Merged
chihlasm merged 28 commits from feature/tree-editor-canvas into main 2026-02-18 17:52:08 +00:00
Showing only changes of commit d7580de070 - Show all commits

View File

@@ -4,6 +4,7 @@ import { NodePicker } from './NodePicker'
import { useTreeEditorStore } from '@/store/treeEditorStore'
import type { TreeStructure, TreeOption } from '@/types'
import { cn } from '@/lib/utils'
import { InfoTip } from '@/components/common/InfoTip'
interface NodeFormDecisionProps {
node: TreeStructure
@@ -86,11 +87,6 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
<label className="block text-sm font-medium text-foreground">
{isRootNode ? 'Starting Question' : 'Question'} <span className="text-red-400">*</span>
</label>
{isRootNode && (
<p className="mt-0.5 text-xs text-muted-foreground">
What's the main question to diagnose the issue?
</p>
)}
<input
type="text"
value={node.question || ''}
@@ -130,18 +126,12 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
{/* Options */}
<div>
<label className="block text-sm font-medium text-foreground">
<label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
{isRootNode ? 'Answer Options (Branches)' : 'Options'} <span className="text-red-400">*</span>
<InfoTip text={isRootNode
? "Add as many options as needed (A, B, C, D...). Each option leads to a different troubleshooting path."
: "Each option can branch to a different next step."} />
</label>
{isRootNode ? (
<p className="mt-0.5 text-xs text-muted-foreground">
Add as many options as needed (A, B, C, D...). Each option leads to a completely different troubleshooting path.
</p>
) : (
<p className="mt-0.5 text-xs text-muted-foreground">
Each option can branch to a different next step.
</p>
)}
{optionsError && (
<p className="mt-1 text-xs text-red-400">{optionsError.message}</p>
)}