From 2a445f3f94439f5661e7a38d172fbba895cf1114 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <hcl@comfy.org>
Date: Mon, 17 Mar 2025 14:49:21 -0400
Subject: [PATCH] workaround placeholder filename

---
 .../sidebar/tabs/WorkflowsSidebarTab.vue         | 16 ++++++++++------
 src/stores/workflowStore.ts                      |  9 ++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 72a853bdd..4b298b2bd 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -218,10 +218,7 @@ const renderTreeNode = (
   node: TreeNode,
   type: WorkflowTreeType
 ): TreeExplorerNode<ComfyWorkflow> => {
-  const children = node.children
-    ?.filter((child) => !child.data?.isFolderPlaceholder)
-    ?.map((child) => renderTreeNode(child, type))
-
+  const children = node.children?.map((child) => renderTreeNode(child, type))
   const workflow: ComfyWorkflow = node.data
 
   function handleClick(this: TreeExplorerNode<ComfyWorkflow>, e: MouseEvent) {
@@ -232,7 +229,7 @@ const renderTreeNode = (
     }
   }
 
-  const actions = node.leaf
+  const actions: Partial<TreeExplorerNode<ComfyWorkflow>> = node.leaf
     ? {
         handleClick,
         async handleRename(newName: string) {
@@ -262,7 +259,14 @@ const renderTreeNode = (
         },
         draggable: true
       }
-    : { handleClick }
+    : {
+        handleClick,
+        async handleAddFolder(folderName: string) {
+          const parentPath = this.key.replace(/^root\//, '')
+          const folderPath = parentPath + '/' + folderName
+          await workflowStore.createFolder(folderPath)
+        }
+      }
 
   return {
     key: node.key,
diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts
index 42e4a5217..ae345a1f4 100644
--- a/src/stores/workflowStore.ts
+++ b/src/stores/workflowStore.ts
@@ -13,6 +13,7 @@ import { UserFile } from './userFileStore'
 
 export class ComfyWorkflow extends UserFile {
   static readonly basePath = 'workflows/'
+  static readonly folderPlaceholderFilename = 'folder.index'
 
   /**
    * The change tracker for the workflow. Non-reactive raw object.
@@ -32,7 +33,9 @@ export class ComfyWorkflow extends UserFile {
   }
 
   get key() {
-    return this.path.substring(ComfyWorkflow.basePath.length)
+    const key = this.isFolderPlaceholder ? this.directory + '/' : this.path
+
+    return key.substring(ComfyWorkflow.basePath.length)
   }
 
   get activeState(): ComfyWorkflowJSON | null {
@@ -59,7 +62,7 @@ export class ComfyWorkflow extends UserFile {
    * Whether the workflow is a folder placeholder.
    */
   get isFolderPlaceholder(): boolean {
-    return this.filename === '.index'
+    return this.fullFilename === ComfyWorkflow.folderPlaceholderFilename
   }
 
   /**
@@ -441,7 +444,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
         : folderPath
 
       // Create the full path including the reserved index file
-      const indexFilePath = `${ComfyWorkflow.basePath}${normalizedPath}/.index`
+      const indexFilePath = `${ComfyWorkflow.basePath}${normalizedPath}/${ComfyWorkflow.folderPlaceholderFilename}`
 
       // Create an empty file to represent the folder
       const resp = await api.storeUserData(indexFilePath, '', {