From e4c6514d9df82eae80dc51b06a6c0973753d216c Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Mon, 1 Sep 2025 18:08:06 -0700
Subject: [PATCH] Minimal  subgraph widget ui framework

Displays all widgets poorly and allows re ordering
---
 src/components/selectionbar/SubgraphNode.vue  | 42 +++++++++++++++++++
 .../sidebarTabs/useSubgraphNodeTab.ts         | 20 +++++++++
 src/stores/workspace/sidebarTabStore.ts       |  2 +
 3 files changed, 64 insertions(+)
 create mode 100644 src/components/selectionbar/SubgraphNode.vue
 create mode 100644 src/composables/sidebarTabs/useSubgraphNodeTab.ts

diff --git a/src/components/selectionbar/SubgraphNode.vue b/src/components/selectionbar/SubgraphNode.vue
new file mode 100644
index 000000000..608f1859e
--- /dev/null
+++ b/src/components/selectionbar/SubgraphNode.vue
@@ -0,0 +1,42 @@
+<template>
+  <SidebarTabTemplate
+    :title="'Subgraph Node'"
+    class="workflows-sidebar-tab bg-[var(--p-tree-background)]"
+  >
+  <template #body>
+        <OrderList v-model="items" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
+            <template #option="{ option }">
+                {{ option }}
+            </template>
+        </OrderList>
+  </template>
+  </SidebarTabTemplate>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import OrderList from 'primevue/orderlist';
+
+import { useI18n } from 'vue-i18n'
+
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import { useCanvasStore } from '@/stores/graphStore'
+const { t } = useI18n()
+
+const canvasStore = useCanvasStore()
+
+const items = ref(null)
+
+watch(() => canvasStore.selectedItems,
+(selectedItems) => {
+  const node = selectedItems[0] ?? {}
+  const interiorNodes = node?.subgraph?.nodes ?? []
+  if (!interiorNodes) {
+    items.value = null
+    return
+  }
+  const intn =  interiorNodes.map((n) => 
+    n.widgets.map((w) => [n.title, w.name])).flat(1)
+  items.value = intn
+})
+</script>
diff --git a/src/composables/sidebarTabs/useSubgraphNodeTab.ts b/src/composables/sidebarTabs/useSubgraphNodeTab.ts
new file mode 100644
index 000000000..218d0dab8
--- /dev/null
+++ b/src/composables/sidebarTabs/useSubgraphNodeTab.ts
@@ -0,0 +1,20 @@
+
+import { markRaw } from 'vue'
+
+import SubgraphNode from '@/components/selectionbar/SubgraphNode.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useSubgraphNodeTab = (): SidebarTabExtension => {
+  return {
+    id: 'sgn',
+    icon: 'pi pi-history',
+    iconBadge: () => {
+      return null
+    },
+    title: 'sideToolbar.queue',
+    tooltip: 'sideToolbar.queue',
+    label: 'sideToolbar.labels.queue',
+    component: markRaw(SubgraphNode),
+    type: 'vue'
+  }
+}
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index b316aa605..2bade5782 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -5,6 +5,7 @@ import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLib
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
 import { useWorkflowsSidebarTab } from '@/composables/sidebarTabs/useWorkflowsSidebarTab'
+import { useSubgraphNodeTab } from '@/composables/sidebarTabs/useSubgraphNodeTab'
 import { t, te } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
@@ -92,6 +93,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
     registerSidebarTab(useNodeLibrarySidebarTab())
     registerSidebarTab(useModelLibrarySidebarTab())
     registerSidebarTab(useWorkflowsSidebarTab())
+    registerSidebarTab(useSubgraphNodeTab())
 
     const menuStore = useMenuItemStore()