Always sort workflows tree (#1456)

* Always sort workflows tree

* nit

* nit

* Add tests

* nit

* nit

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -104,7 +104,7 @@ const searchQuery = ref<string>('')
 
 const root = computed(() => {
   const root = filteredRoot.value || nodeDefStore.nodeTree
-  return alphabeticalSort.value ? sortedTree(root) : root
+  return alphabeticalSort.value ? sortedTree(root, { groupLeaf: true }) : root
 })
 
 const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {

src/stores/workflowStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, markRaw, ref } from 'vue'
-import { buildTree } from '@/utils/treeUtil'
+import { buildTree, sortedTree } from '@/utils/treeUtil'
 import { api } from '@/scripts/api'
 import { UserFile } from './userFileStore'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -295,7 +295,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     )
   }
   const workflowsTree = computed(() =>
-    buildWorkflowTree(persistedWorkflows.value)
+    sortedTree(buildWorkflowTree(persistedWorkflows.value), { groupLeaf: true })
   )
   // Bookmarked workflows tree is flat.
   const bookmarkedWorkflowsTree = computed(() =>

src/utils/treeUtil.ts

@@ -50,21 +50,55 @@ export function flattenTree<T>(tree: TreeNode): T[] {
   return result
 }
 
-export function sortedTree(node: TreeNode): TreeNode {
-  // Create a new node with the same label and data
+/**
+ * Sort the children of the node recursively.
+ * @param node - The node to sort.
+ * @param options - The options for sorting.
+ * @param options.groupLeaf - Whether to group leaf nodes together.
+ * @returns The sorted node.
+ */
+export function sortedTree(
+  node: TreeNode,
+  {
+    groupLeaf = false
+  }: {
+    groupLeaf?: boolean
+  } = {}
+): TreeNode {
   const newNode: TreeNode = {
     ...node
   }
 
   if (node.children) {
-    // Sort the children of the current node
-    const sortedChildren = [...node.children].sort((a, b) =>
-      (a.label ?? '').localeCompare(b.label ?? '')
-    )
-    // Recursively sort the children and add them to the new node
-    newNode.children = []
-    for (const child of sortedChildren) {
-      newNode.children.push(sortedTree(child))
+    if (groupLeaf) {
+      // Split children into folders and files
+      const folders = node.children.filter((child) => !child.leaf)
+      const files = node.children.filter((child) => child.leaf)
+
+      // Sort folders and files separately by label
+      const sortedFolders = folders.sort((a, b) =>
+        (a.label ?? '').localeCompare(b.label ?? '')
+      )
+      const sortedFiles = files.sort((a, b) =>
+        (a.label ?? '').localeCompare(b.label ?? '')
+      )
+
+      // Recursively sort folder children
+      newNode.children = [
+        ...sortedFolders.map((folder) =>
+          sortedTree(folder, { groupLeaf: true })
+        ),
+        ...sortedFiles
+      ]
+    } else {
+      const sortedChildren = [...node.children].sort((a, b) =>
+        (a.label ?? '').localeCompare(b.label ?? '')
+      )
+      newNode.children = [
+        ...sortedChildren.map((child) =>
+          sortedTree(child, { groupLeaf: false })
+        )
+      ]
     }
   }