fix: prevent pipeline step settings from resetting on collapse

The settings panel used conditional rendering ({isExpanded && ...})
which unmounted the Controls component on collapse, losing all state.
Switch to CSS hidden class so the component stays mounted and settings
persist when the panel is collapsed and re-expanded.
This commit is contained in:
Siddharth Kumar Sah
2026-03-28 16:17:39 +08:00
parent 1c05bc76e5
commit 9acbedf4b7
@@ -284,17 +284,19 @@ export function PipelineBuilder({
</div>
</div>
{/* Expanded settings */}
{isExpanded && (
<div className="border-t border-border p-3 bg-muted/10 space-y-3">
<p className="text-xs text-muted-foreground">{tool.description}</p>
<PipelineStepSettings
toolId={step.toolId}
settings={step.settings}
onChange={(s) => updateStepSettings(step.id, s)}
/>
</div>
)}
{/* Settings panel - hidden when collapsed, never unmounted so state persists */}
<div
className={
isExpanded ? "border-t border-border p-3 bg-muted/10 space-y-3" : "hidden"
}
>
<p className="text-xs text-muted-foreground">{tool.description}</p>
<PipelineStepSettings
toolId={step.toolId}
settings={step.settings}
onChange={(s) => updateStepSettings(step.id, s)}
/>
</div>
</div>
);
})