feat(app): merge active node and graph settings panel

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>
 

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;

app/src/lib/sidebar/Panel.svelte

@@ -33,8 +33,8 @@
 {#if panelState.activePanel.value === id}
   <div class="wrapper" class:hidden>
     {#if title}
-      <header>
+      <header class="bg-layer-2">
-        <h3>{title}</h3>
+        <h3 class="font-bold">{title}</h3>
       </header>
     {/if}
     {@render children?.()}

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}

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}

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>