From e65f655530757218de2fb78f99d78365d90345f0 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 9 Mar 2026 21:10:27 +1300
Subject: [PATCH] fix(47-02): add Settings label to chevron, remove bg when
 collapsed, remove bottom rounding on expanded preview

Chevron toggle now shows "Settings" text and has no background when
collapsed so it floats below the node edge. Solid bg only appears on
the expanded content area. Preview container switches from rounded-lg
to rounded-t-lg when parameters are expanded so the settings area
connects seamlessly to the image above.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/GenerateImageNode.tsx    |  2 +-
 src/components/nodes/GenerateVideoNode.tsx    |  2 +-
 src/components/nodes/InlineParameterPanel.tsx | 11 ++++++-----
 src/components/nodes/LLMGenerateNode.tsx      |  2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index ce026212..9d57fa88 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -601,7 +601,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         Image
       </div>
 
-      <div className="relative w-full h-full min-h-0 overflow-hidden rounded-lg">
+      <div className={`relative w-full h-full min-h-0 overflow-hidden ${inlineParametersEnabled && isParamsExpanded ? "rounded-t-lg" : "rounded-lg"}`}>
         {/* Preview area */}
         {nodeData.outputImage ? (
           <>
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index ce958f72..d1d8a5eb 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -659,7 +659,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
         Video
       </div>
 
-      <div className="relative w-full h-full min-h-0 overflow-hidden rounded-lg">
+      <div className={`relative w-full h-full min-h-0 overflow-hidden ${inlineParametersEnabled && isParamsExpanded ? "rounded-t-lg" : "rounded-lg"}`}>
         {/* Preview area */}
         {nodeData.outputVideo ? (
           <>
diff --git a/src/components/nodes/InlineParameterPanel.tsx b/src/components/nodes/InlineParameterPanel.tsx
index 1ae809ce..46c32208 100644
--- a/src/components/nodes/InlineParameterPanel.tsx
+++ b/src/components/nodes/InlineParameterPanel.tsx
@@ -20,18 +20,19 @@ export function InlineParameterPanel({
   nodeId,
 }: InlineParameterPanelProps) {
   return (
-    <div className="w-full bg-[#1a1a1a]">
-      {/* Chevron toggle button */}
+    <div className="w-full">
+      {/* Settings toggle button — no background when collapsed, floats below node edge */}
       <button
         type="button"
         onClick={onToggle}
-        className="nodrag nopan w-full flex items-center justify-center py-1 text-neutral-500 hover:text-neutral-300 transition-colors"
+        className="nodrag nopan w-full flex items-center justify-center gap-1 py-1 text-neutral-500 hover:text-neutral-300 transition-colors"
         aria-label={expanded ? "Collapse parameters" : "Expand parameters"}
         aria-expanded={expanded}
         aria-controls={`params-${nodeId}`}
       >
+        <span className="text-[10px]">Settings</span>
         <svg
-          className="w-3.5 h-3.5 transition-transform duration-200"
+          className="w-3 h-3 transition-transform duration-200"
           style={{ transform: expanded ? "rotate(180deg)" : "rotate(0deg)" }}
           viewBox="0 0 24 24"
           fill="none"
@@ -53,7 +54,7 @@ export function InlineParameterPanel({
           opacity: expanded ? 1 : 0,
         }}
       >
-        <div className="nodrag nopan nowheel px-3 pb-3 rounded-b-lg">
+        <div className="nodrag nopan nowheel bg-[#1a1a1a] px-3 pt-2 pb-3 rounded-b-lg">
           <div className="space-y-1.5 max-w-[280px] mx-auto">{children}</div>
         </div>
       </div>
diff --git a/src/components/nodes/LLMGenerateNode.tsx b/src/components/nodes/LLMGenerateNode.tsx
index b1174415..190c3d6f 100644
--- a/src/components/nodes/LLMGenerateNode.tsx
+++ b/src/components/nodes/LLMGenerateNode.tsx
@@ -150,7 +150,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
         data-handletype="text"
       />
 
-      <div className="relative w-full h-full min-h-0 overflow-hidden rounded-lg">
+      <div className={`relative w-full h-full min-h-0 overflow-hidden ${inlineParametersEnabled && isParamsExpanded ? "rounded-t-lg" : "rounded-lg"}`}>
         {nodeData.status === "loading" ? (
           <div className="w-full h-full bg-neutral-900/40 flex items-center justify-center">
             <svg