From 83e0e47082ed0d9fbd60e67a6d6c9ed65a9f4f24 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Mon, 4 May 2026 23:47:03 +0200
Subject: [PATCH] refactor: only show group/node panel when selected

---
 .../graph-interface/graph-manager.svelte.ts   |  2 +-
 app/src/lib/node-registry/debugNode.ts        |  3 +-
 .../sidebar/panels/ActiveNodeSelected.svelte  | 99 -------------------
 .../sidebar/panels/ActiveNodeSettings.svelte  | 92 ++++++++++++++++-
 .../lib/sidebar/panels/GroupSettings.svelte   |  2 -
 app/src/routes/+page.svelte                   |  6 +-
 6 files changed, 94 insertions(+), 110 deletions(-)
 delete mode 100644 app/src/lib/sidebar/panels/ActiveNodeSelected.svelte

diff --git a/app/src/lib/graph-interface/graph-manager.svelte.ts b/app/src/lib/graph-interface/graph-manager.svelte.ts
index 9ec0566..006f9a0 100644
--- a/app/src/lib/graph-interface/graph-manager.svelte.ts
+++ b/app/src/lib/graph-interface/graph-manager.svelte.ts
@@ -556,7 +556,7 @@ export class GraphManager extends EventEmitter<{
       const inputs = {
         'groupId': {
           type: 'select',
-          label: 'Group',
+          label: '',
           value: node.props?.groupId,
           internal: true,
           options: this.graph.groups.map((g, i) => ({
diff --git a/app/src/lib/node-registry/debugNode.ts b/app/src/lib/node-registry/debugNode.ts
index 6ab2955..e2fcaf2 100644
--- a/app/src/lib/node-registry/debugNode.ts
+++ b/app/src/lib/node-registry/debugNode.ts
@@ -5,7 +5,8 @@ export const debugNode = {
   },
   inputs: {
     input: {
-      type: '*'
+      type: '*',
+      label: ''
     }
   },
   execute(_data: Int32Array): Int32Array {
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
deleted file mode 100644
index 4f253b5..0000000
--- a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script lang="ts">
-  import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
-  import NestedSettings from '$lib/settings/NestedSettings.svelte';
-  import type { NodeId, NodeInput, NodeInstance } from '@nodarium/types';
-
-  type InternalNodeInput = NodeInput & {
-    __node_type?: NodeId;
-    __node_input: string;
-  };
-
-  type Props = {
-    manager: GraphManager;
-    node: NodeInstance;
-  };
-
-  const { manager, node = $bindable() }: Props = $props();
-
-  function filterInputs(inputs?: Record<string, NodeInput>) {
-    const _inputs = $state.snapshot(
-      inputs as Record<string, InternalNodeInput>
-    );
-    return Object.fromEntries(
-      Object.entries(structuredClone(_inputs ?? {}))
-        .filter(([, value]) => {
-          return value.hidden === true;
-        })
-        .map(([key, value]) => {
-          value.__node_type = node.state.type?.id;
-          value.__node_input = key;
-          return [key, value];
-        })
-    );
-  }
-  const nodeDefinition = filterInputs(node.state.type?.inputs);
-
-  type Store = Record<string, number | number[]>;
-  let store = $state<Store>(createStore(node?.props, nodeDefinition));
-  function createStore(
-    props: NodeInstance['props'],
-    inputs: Record<string, NodeInput>
-  ): Store {
-    const store: Store = {};
-    Object.keys(inputs).forEach((key) => {
-      if (props) {
-        const value = props[key] !== undefined ? props[key] : inputs[key].value;
-        if (Array.isArray(value) || typeof value === 'number') {
-          store[key] = value;
-        } else if (typeof value === 'boolean') {
-          store[key] = value ? 1 : 0;
-        } else {
-          console.error('Wrong error', { value });
-        }
-      }
-    });
-    return store;
-  }
-
-  let lastPropsHash = '';
-  function updateNode() {
-    if (!node || !store) return;
-    let needsUpdate = false;
-    Object.keys(store).forEach((_key: string) => {
-      node.props = node.props || {};
-      const key = _key as keyof typeof store;
-      if (node && store) {
-        needsUpdate = true;
-        const value = store[key];
-        if (value !== undefined) {
-          node.props[key] = value;
-        }
-      }
-    });
-
-    let propsHash = JSON.stringify(node.props);
-    if (propsHash === lastPropsHash) {
-      return;
-    }
-    lastPropsHash = propsHash;
-
-    if (needsUpdate) {
-      manager.save();
-      manager.execute();
-    }
-  }
-
-  $effect(() => {
-    if (store) {
-      updateNode();
-    }
-  });
-</script>
-
-{#if Object.keys(nodeDefinition).length}
-  <NestedSettings
-    id="activeNodeSettings"
-    bind:value={store}
-    type={nodeDefinition}
-  />
-{/if}
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
index e5ece84..d32e847 100644
--- a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
@@ -1,21 +1,103 @@
 <script lang="ts">
   import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
-  import type { NodeInstance } from '@nodarium/types';
-  import ActiveNodeSelected from './ActiveNodeSelected.svelte';
+  import NestedSettings from '$lib/settings/NestedSettings.svelte';
+  import type { NodeId, NodeInput, NodeInstance } from '@nodarium/types';
+
+  type InternalNodeInput = NodeInput & {
+    __node_type?: NodeId;
+    __node_input: string;
+  };
 
   type Props = {
     manager: GraphManager;
     node: NodeInstance | undefined;
   };
 
-  let { manager, node = $bindable() }: Props = $props();
+  const { manager, node = $bindable() }: Props = $props();
+
+  function filterInputs(inputs?: Record<string, NodeInput>) {
+    if (!node) return {};
+    return Object.fromEntries(
+      Object.entries(inputs ?? {})
+        .filter(([, value]) => {
+          return value.hidden === true;
+        })
+        .map(([key, value]) => {
+          const v = value as InternalNodeInput;
+          v.__node_type = node.state.type?.id;
+          v.__node_input = key;
+          return [key, v];
+        })
+    );
+  }
+  const nodeDefinition = node ? filterInputs(node.state.type?.inputs) : {};
+
+  type Store = Record<string, number | number[]>;
+  let store = $state<Store>(createStore(node?.props, nodeDefinition));
+  function createStore(
+    props: NodeInstance['props'],
+    inputs: Record<string, NodeInput>
+  ): Store {
+    const store: Store = {};
+    Object.keys(inputs).forEach((key) => {
+      if (props) {
+        const value = props[key] !== undefined ? props[key] : inputs[key].value;
+        if (Array.isArray(value) || typeof value === 'number') {
+          store[key] = value;
+        } else if (typeof value === 'boolean') {
+          store[key] = value ? 1 : 0;
+        } else {
+          console.error('Wrong error', { value });
+        }
+      }
+    });
+    return store;
+  }
+
+  let lastPropsHash = '';
+  function updateNode() {
+    if (!node || !store) return;
+    let needsUpdate = false;
+    Object.keys(store).forEach((_key: string) => {
+      node.props = node.props || {};
+      const key = _key as keyof typeof store;
+      if (node && store) {
+        needsUpdate = true;
+        const value = store[key];
+        if (value !== undefined) {
+          node.props[key] = value;
+        }
+      }
+    });
+
+    let propsHash = JSON.stringify(node.props);
+    if (propsHash === lastPropsHash) {
+      return;
+    }
+    lastPropsHash = propsHash;
+
+    if (needsUpdate) {
+      manager.save();
+      manager.execute();
+    }
+  }
 
   const isGroupInstance = $derived(node?.type === '__internal/group/instance');
+
+  $effect(() => {
+    if (store) {
+      updateNode();
+    }
+  });
 </script>
 
-{#if node && !isGroupInstance}
+{#if !isGroupInstance && Object.keys(nodeDefinition).length}
   <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>Node Settings</h3>
   </div>
-  <ActiveNodeSelected {manager} bind:node />
+  <NestedSettings
+    id="activeNodeSettings"
+    bind:value={store}
+    type={nodeDefinition}
+  />
 {/if}
diff --git a/app/src/lib/sidebar/panels/GroupSettings.svelte b/app/src/lib/sidebar/panels/GroupSettings.svelte
index c285adb..1d5a7d1 100644
--- a/app/src/lib/sidebar/panels/GroupSettings.svelte
+++ b/app/src/lib/sidebar/panels/GroupSettings.svelte
@@ -10,10 +10,8 @@
   const { manager, node = $bindable() }: Props = $props();
 
   const activeGroup = $derived.by(() => {
-    console.log('isInsideGroup', manager?.isInsideGroup);
     if (manager?.isInsideGroup) {
       const activeGroupId = manager.graphStack?.at(-1)?.groupId;
-      console.log('activeGroupId', activeGroupId);
       if (activeGroupId !== undefined) {
         return manager.getGroup(activeGroupId);
       }
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 677b908..479b31b 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -343,8 +343,10 @@
             type={graphSettingTypes}
             bind:value={graphSettings}
           />
-          <ActiveNodeSettings {manager} bind:node={activeNode} />
-          <GroupSettings {manager} bind:node={activeNode} />
+          {#key activeNode}
+            <ActiveNodeSettings {manager} bind:node={activeNode} />
+            <GroupSettings {manager} bind:node={activeNode} />
+          {/key}
         </Panel>
         <Panel
           id="changelog"