feat: make group input/output node work

app/src/lib/sidebar/panels/ActiveNodeSelected.svelte

@@ -96,6 +96,4 @@
     bind:value={store}
     type={nodeDefinition}
   />
-{:else}
-  <p class="mx-4 mt-4">Node has no settings</p>
 {/if}

app/src/lib/sidebar/panels/ActiveNodeSettings.svelte

@@ -11,97 +11,11 @@
   let { manager, node = $bindable() }: Props = $props();
 
   const isGroupInstance = $derived(node?.type === '__internal/group/instance');
-  const activeGroup = $derived(
-    isGroupInstance ? manager.getGroup(node!.props?.groupId as number) : undefined
-  );
-
-  const groupName = $derived(activeGroup?.name ?? '');
-
-  function handleRename(e: Event) {
-    const name = (e.target as HTMLInputElement).value;
-    if (activeGroup) manager.renameGroup(activeGroup.id, name);
-  }
 </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>Node Settings</h3>
-</div>
-
-{#if node}
-  {#key node.id}
-    {#if isGroupInstance && activeGroup}
-      <div class="group-settings">
-        <label for="group-name">Group name</label>
-        <input
-          id="group-name"
-          type="text"
-          placeholder="Group {activeGroup.id}"
-          value={groupName}
-          oninput={handleRename}
-        />
-      </div>
-    {:else if node}
-      <ActiveNodeSelected {manager} bind:node />
-    {/if}
-  {/key}
-{:else}
-  <p class="mx-4 mt-4">No node selected</p>
-{/if}
-
-{#if manager?.graph.groups.length}
-  <div class="group-actions">
-    <button onclick={() => manager.removeUnusedGroups()}>
-      Remove unused groups
-    </button>
+{#if node && !isGroupInstance}
+  <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 />
 {/if}
-
-<style>
-  .group-settings {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4em;
-    padding: 1em;
-  }
-
-  .group-settings label {
-    font-size: 0.8em;
-    opacity: 0.7;
-  }
-
-  .group-settings input {
-    background: var(--color-layer-1);
-    border: 1px solid var(--color-outline);
-    border-radius: 4px;
-    color: var(--color-text);
-    font-family: var(--font-family);
-    font-size: 0.9em;
-    padding: 0.4em 0.6em;
-  }
-
-  .group-settings input:focus {
-    outline: 1px solid var(--color-active);
-  }
-
-  .group-actions {
-    padding: 0.75em 1em;
-    border-top: 1px solid var(--color-outline);
-    margin-top: auto;
-  }
-
-  .group-actions button {
-    width: 100%;
-    padding: 0.4em 0.8em;
-    background: var(--color-layer-1);
-    border: 1px solid var(--color-outline);
-    border-radius: 4px;
-    color: var(--color-text);
-    font-family: var(--font-family);
-    font-size: 0.85em;
-    cursor: pointer;
-  }
-
-  .group-actions button:hover {
-    border-color: var(--color-active);
-  }
-</style>

app/src/lib/sidebar/panels/GroupSettings.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
+  import type { NodeInstance } from '@nodarium/types';
+
+  type Props = {
+    manager: GraphManager;
+    node?: NodeInstance;
+  };
+
+  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);
+      }
+    }
+
+    if (node?.type === '__internal/group/instance') {
+      return manager.getGroup(node.props?.groupId as number);
+    }
+  });
+
+  const groupName = $derived(activeGroup?.name ?? '');
+  function handleRename(e: Event) {
+    const name = (e.target as HTMLInputElement).value;
+    if (activeGroup) manager.renameGroup(activeGroup.id, name);
+  }
+
+  const hasUnusedGroups = $derived.by(() => {
+    if (!manager) return false;
+    if (manager.isInsideGroup) return false;
+    if (manager.graph.groups.length === 0) return false;
+    return manager.graph.groups.filter(g => {
+      return !manager.graph.nodes.find(n => n.props?.groupId === g.id);
+    }).length;
+  });
+</script>
+
+{#if activeGroup || hasUnusedGroups}
+  <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>Group Settings</h3>
+  </div>
+{/if}
+
+{#if activeGroup}
+  {#key activeGroup.id}
+    <div class="group-settings">
+      <label for="group-name">Group name</label>
+      <input
+        id="group-name"
+        type="text"
+        placeholder="Group {activeGroup.id}"
+        value={groupName}
+        oninput={handleRename}
+      />
+    </div>
+  {/key}
+{/if}
+
+{#if hasUnusedGroups}
+  <div class="group-actions">
+    <button onclick={() => manager.removeUnusedGroups()}>
+      Remove ({hasUnusedGroups}) orphaned groups
+    </button>
+  </div>
+{/if}
+
+<style>
+  .group-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4em;
+    padding: 1em;
+  }
+
+  .group-settings label {
+    font-size: 0.8em;
+    opacity: 0.7;
+  }
+
+  .group-settings input {
+    background: var(--color-layer-1);
+    border: 1px solid var(--color-outline);
+    border-radius: 4px;
+    color: var(--color-text);
+    font-family: var(--font-family);
+    font-size: 0.9em;
+    padding: 0.4em 0.6em;
+  }
+
+  .group-settings input:focus {
+    outline: 1px solid var(--color-active);
+  }
+
+  .group-actions {
+    padding: 0.75em 1em;
+    border-bottom: 1px solid var(--color-outline);
+    margin-top: auto;
+  }
+
+  .group-actions button {
+    width: 100%;
+    padding: 0.4em 0.8em;
+    background: var(--color-layer-1);
+    border: 1px solid var(--color-outline);
+    border-radius: 4px;
+    color: var(--color-text);
+    font-family: var(--font-family);
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+
+  .group-actions button:hover {
+    border-color: var(--color-active);
+  }
+</style>