8c808ac8b5
Group the planning model selector and depth controls under a collapsible "Advanced planning settings" disclosure (defaultOpen) in the Planning Mode modal. Adds a defaultOpen prop to OnboardingDisclosure and tightens the node.capabilities readonly typing in NodeDetailModal. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { useState } from "react";
|
|
import { ChevronRight } from "lucide-react";
|
|
import "./OnboardingDisclosure.css";
|
|
|
|
interface OnboardingDisclosureProps {
|
|
summary: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
onToggle?: (isOpen: boolean) => void;
|
|
defaultOpen?: boolean;
|
|
}
|
|
|
|
export function OnboardingDisclosure({
|
|
summary,
|
|
children,
|
|
className = "",
|
|
onToggle,
|
|
defaultOpen = false,
|
|
}: OnboardingDisclosureProps) {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
|
|
return (
|
|
<div className={`onboarding-disclosure ${className}`.trim()}>
|
|
<button
|
|
className="onboarding-disclosure-trigger"
|
|
onClick={() => {
|
|
const next = !isOpen;
|
|
setIsOpen(next);
|
|
onToggle?.(next);
|
|
}}
|
|
aria-expanded={isOpen}
|
|
type="button"
|
|
>
|
|
<ChevronRight size={14} className="onboarding-disclosure-chevron" aria-hidden="true" />
|
|
<span>{summary}</span>
|
|
</button>
|
|
{isOpen ? <div className="onboarding-disclosure-content">{children}</div> : null}
|
|
</div>
|
|
);
|
|
}
|