Browse Source

feat(47-01): add ControlPanel conditional hiding and ProjectSetupModal toggle

- Import useInlineParameters hook in ControlPanel and ProjectSetupModal
- Define GENERATION_NODE_TYPES constant for conditional hiding logic
- Hide ControlPanel for generation nodes when inline parameters enabled
- ControlPanel still shows for easeCurve and conditionalSwitch regardless of setting
- Add inline parameters toggle to ProjectSetupModal Project tab
- Toggle labeled 'Inline Parameters' with descriptive help text
- Setting persists to localStorage and applies immediately
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
f8cfa26e5b
  1. 21
      src/components/ProjectSetupModal.tsx
  2. 20
      src/components/nodes/ControlPanel.tsx

21
src/components/ProjectSetupModal.tsx

@ -8,6 +8,7 @@ import { EnvStatusResponse } from "@/app/api/env-status/route";
import { loadNodeDefaults, saveNodeDefaults } from "@/store/utils/localStorage"; import { loadNodeDefaults, saveNodeDefaults } from "@/store/utils/localStorage";
import { ProviderModel } from "@/lib/providers/types"; import { ProviderModel } from "@/lib/providers/types";
import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog"; import { ModelSearchDialog } from "@/components/modals/ModelSearchDialog";
import { useInlineParameters } from "@/hooks/useInlineParameters";
// LLM provider and model options (mirrored from LLMGenerateNode) // LLM provider and model options (mirrored from LLMGenerateNode)
const LLM_PROVIDERS: { value: LLMProvider; label: string }[] = [ const LLM_PROVIDERS: { value: LLMProvider; label: string }[] = [
@ -140,6 +141,9 @@ export function ProjectSetupModal({
updateCanvasNavigationSettings, updateCanvasNavigationSettings,
} = useWorkflowStore(); } = useWorkflowStore();
// Inline parameters hook
const { inlineParametersEnabled, setInlineParameters } = useInlineParameters();
// Tab state // Tab state
const [activeTab, setActiveTab] = useState<"project" | "providers" | "nodeDefaults" | "canvas">("project"); const [activeTab, setActiveTab] = useState<"project" | "providers" | "nodeDefaults" | "canvas">("project");
@ -479,6 +483,23 @@ export function ProjectSetupModal({
</label> </label>
</div> </div>
<div className="pt-2 border-t border-neutral-700">
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={inlineParametersEnabled}
onChange={(e) => setInlineParameters(e.target.checked)}
className="w-4 h-4 rounded border-neutral-600 bg-neutral-900 text-blue-500 focus:ring-blue-500 focus:ring-offset-neutral-800"
/>
<div>
<span className="text-sm text-neutral-200">Inline Parameters</span>
<p className="text-xs text-neutral-500">
Show model parameters inside generation nodes instead of the side panel
</p>
</div>
</label>
</div>
{error && <p className="text-sm text-red-400">{error}</p>} {error && <p className="text-sm text-red-400">{error}</p>}
</div> </div>
)} )}

20
src/components/nodes/ControlPanel.tsx

@ -14,6 +14,7 @@ import { evaluateRule } from "@/store/utils/ruleEvaluation";
import { EASING_PRESETS, getPresetBezier, getEasingBezier } from "@/lib/easing-presets"; import { EASING_PRESETS, getPresetBezier, getEasingBezier } from "@/lib/easing-presets";
import { getAllEasingNames, getEasingFunction } from "@/lib/easing-functions"; import { getAllEasingNames, getEasingFunction } from "@/lib/easing-functions";
import { getModelPageUrl, getProviderDisplayName } from "@/utils/providerUrls"; import { getModelPageUrl, getProviderDisplayName } from "@/utils/providerUrls";
import { useInlineParameters } from "@/hooks/useInlineParameters";
// List of node types that have configurable parameters // List of node types that have configurable parameters
const CONFIGURABLE_NODE_TYPES: NodeType[] = [ const CONFIGURABLE_NODE_TYPES: NodeType[] = [
@ -26,6 +27,15 @@ const CONFIGURABLE_NODE_TYPES: NodeType[] = [
"conditionalSwitch", "conditionalSwitch",
]; ];
// Generation node types that can use inline parameters
const GENERATION_NODE_TYPES: NodeType[] = [
"nanoBanana",
"generateVideo",
"generate3d",
"generateAudio",
"llmGenerate",
];
// Base 10 aspect ratios (all Gemini image models) // Base 10 aspect ratios (all Gemini image models)
const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"]; const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
@ -99,6 +109,7 @@ function generateEasingPolyline(
*/ */
export function ControlPanel() { export function ControlPanel() {
const nodes = useWorkflowStore((state) => state.nodes); const nodes = useWorkflowStore((state) => state.nodes);
const { inlineParametersEnabled } = useInlineParameters();
// Get the single selected node // Get the single selected node
const selectedNode = useMemo(() => { const selectedNode = useMemo(() => {
@ -115,6 +126,15 @@ export function ControlPanel() {
return null; return null;
} }
// Check if this is a generation node
const isGenerationNode = selectedNode &&
GENERATION_NODE_TYPES.includes(selectedNode.type as NodeType);
// Hide for generation nodes when inline parameters enabled
if (isGenerationNode && inlineParametersEnabled) {
return null;
}
return ( return (
<div className="fixed top-0 right-6 h-screen z-[90] flex items-center pointer-events-none"> <div className="fixed top-0 right-6 h-screen z-[90] flex items-center pointer-events-none">
<div <div

Loading…
Cancel
Save