From 76cdfee0183a2a04388d911298438621a080eac2 Mon Sep 17 00:00:00 2001
From: Max Richter <git@max-richter.dev>
Date: Tue, 3 Feb 2026 13:04:50 +0100
Subject: [PATCH] feat(app): merge active node and graph settings panel

---
 app/src/lib/node-store/DraggableNode.svelte          | 4 +++-
 app/src/lib/settings/NestedSettings.svelte           | 6 +++++-
 app/src/lib/sidebar/Panel.svelte                     | 4 ++--
 app/src/lib/sidebar/panels/ActiveNodeSelected.svelte | 2 +-
 app/src/lib/sidebar/panels/ActiveNodeSettings.svelte | 8 +++++---
 app/src/routes/+page.svelte                          | 6 ------
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/src/lib/node-store/DraggableNode.svelte b/app/src/lib/node-store/DraggableNode.svelte
index 87778dc..a47b753 100644
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -51,7 +51,9 @@
     tabindex="0"
     ondragstart={handleDragStart}
   >
-    <NodeHtml bind:node={nodeData} inView={true} position="relative" z={5} />
+    {#if nodeData}
+      <NodeHtml bind:node={nodeData} inView={true} position="relative" z={5} />
+    {/if}
   </div>
 </div>
 
diff --git a/app/src/lib/settings/NestedSettings.svelte b/app/src/lib/settings/NestedSettings.svelte
index c512c75..2945563 100644
--- a/app/src/lib/settings/NestedSettings.svelte
+++ b/app/src/lib/settings/NestedSettings.svelte
@@ -211,6 +211,11 @@
     padding-left: 1em;
     padding-right: 1em;
     padding-bottom: 1px;
+    gap: 3px;
+  }
+
+  .first-level.input-boolean {
+    gap: 10px;
   }
 
   button {
@@ -218,7 +223,6 @@
   }
 
   hr {
-    position: absolute;
     margin: 0;
     left: 0;
     right: 0;
diff --git a/app/src/lib/sidebar/Panel.svelte b/app/src/lib/sidebar/Panel.svelte
index 77cd354..603fe36 100644
--- a/app/src/lib/sidebar/Panel.svelte
+++ b/app/src/lib/sidebar/Panel.svelte
@@ -33,8 +33,8 @@
 {#if panelState.activePanel.value === id}
   <div class="wrapper" class:hidden>
     {#if title}
-      <header>
-        <h3>{title}</h3>
+      <header class="bg-layer-2">
+        <h3 class="font-bold">{title}</h3>
       </header>
     {/if}
     {@render children?.()}
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
index 52b8b04..ac53556 100644
--- a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
@@ -95,5 +95,5 @@
     type={nodeDefinition}
   />
 {:else}
-  <p class="mx-4">Node has no settings</p>
+  <p class="mx-4 mt-4">Node has no settings</p>
 {/if}
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
index fde457b..c3b76f8 100644
--- a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
@@ -11,14 +11,16 @@
   let { manager, node = $bindable() }: Props = $props();
 </script>
 
+<div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'>
+  <h3 class="font-bold">Node Settings</h3>
+</div>
+
 {#if node}
   {#key node.id}
     {#if node}
       <ActiveNodeSelected {manager} bind:node />
-    {:else}
-      <p class="mx-4">Active Node has no Settings</p>
     {/if}
   {/key}
 {:else}
-  <p class="mx-4">No node selected</p>
+  <p class="mx-4 mt-4">No node selected</p>
 {/if}
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index bbc71da..a7b3cb6 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -247,12 +247,6 @@
             type={graphSettingTypes}
             bind:value={graphSettings}
           />
-        </Panel>
-        <Panel
-          id="active-node"
-          title="Node Settings"
-          icon="i-[tabler--adjustments] bg-blue-400"
-        >
           <ActiveNodeSettings {manager} bind:node={activeNode} />
         </Panel>
       </Sidebar>