[Refactor] Accept single root node in TreeExplorer (#3088)

src/components/common/TreeExplorer.vue

@@ -4,7 +4,7 @@
     :class="props.class"
     v-model:expandedKeys="expandedKeys"
     v-model:selectionKeys="selectionKeys"
-    :value="renderedRoots"
+    :value="renderedRoot.children"
     selectionMode="single"
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
@@ -57,7 +57,7 @@ provide('selectionKeys', selectionKeys)
 const storeSelectionKeys = selectionKeys.value !== undefined
 
 const props = defineProps<{
-  roots: TreeExplorerNode[]
+  root: TreeExplorerNode
   class?: string
 }>()
 const emit = defineEmits<{
@@ -65,8 +65,8 @@ const emit = defineEmits<{
   (e: 'nodeDelete', node: RenderedTreeExplorerNode): void
   (e: 'contextMenu', node: RenderedTreeExplorerNode, event: MouseEvent): void
 }>()
-const renderedRoots = computed<RenderedTreeExplorerNode[]>(() => {
-  return props.roots.map(fillNodeInfo)
+const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
+  return fillNodeInfo(props.root)
 })
 const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.getIcon) {
@@ -81,7 +81,7 @@ const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.leaf) {
     return 'pi pi-file'
   }
-  const isExpanded = expandedKeys.value[node.key]
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
 const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -32,7 +32,7 @@
 
       <TreeExplorer
         class="model-lib-tree-explorer"
-        :roots="renderedRoot.children"
+        :root="renderedRoot"
         v-model:expandedKeys="expandedKeys"
       >
         <template #node="{ node }">

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -49,7 +49,7 @@
       />
       <TreeExplorer
         class="node-lib-tree-explorer"
-        :roots="renderedRoot.children"
+        :root="renderedRoot"
         v-model:expandedKeys="expandedKeys"
       >
         <template #node="{ node }">

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -32,9 +32,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            :roots="
-              renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open).children
-            "
+            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
             :selectionKeys="selectionKeys"
           >
             <template #node="{ node }">
@@ -70,11 +68,11 @@
             class="ml-2"
           />
           <TreeExplorer
-            :roots="
+            :root="
               renderTreeNode(
                 bookmarkedWorkflowsTree,
                 WorkflowTreeType.Bookmarks
-              ).children
+              )
             "
             :selectionKeys="selectionKeys"
           >
@@ -90,9 +88,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            :roots="
-              renderTreeNode(workflowsTree, WorkflowTreeType.Browse).children
-            "
+            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
             v-model:expandedKeys="expandedKeys"
             :selectionKeys="selectionKeys"
             v-if="workflowStore.persistedWorkflows.length > 0"
@@ -111,9 +107,7 @@
       </div>
       <div class="comfyui-workflows-search-panel" v-else>
         <TreeExplorer
-          :roots="
-            renderTreeNode(filteredRoot, WorkflowTreeType.Browse).children
-          "
+          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
           v-model:expandedKeys="expandedKeys"
         >
           <template #node="{ node }">

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -2,7 +2,7 @@
   <TreeExplorer
     class="node-lib-bookmark-tree-explorer"
     ref="treeExplorerRef"
-    :roots="renderedBookmarkedRoot.children"
+    :root="renderedBookmarkedRoot"
     :expandedKeys="expandedKeys"
   >
     <template #folder="{ node }">