feat(folders): add the ability to create a folder within a folder in popover (#2287)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx

@@ -28,9 +28,13 @@ interface ContextMenuProps {
    */
   onRename?: () => void
   /**
-   * Callback when create is clicked (for folders)
+   * Callback when create workflow is clicked (for folders)
    */
   onCreate?: () => void
+  /**
+   * Callback when create folder is clicked (for folders)
+   */
+  onCreateFolder?: () => void
   /**
    * Callback when duplicate is clicked
    */
@@ -54,10 +58,15 @@ interface ContextMenuProps {
    */
   showRename?: boolean
   /**
-   * Whether to show the create option (default: false)
+   * Whether to show the create workflow option (default: false)
    * Set to true for folders to create workflows inside
    */
   showCreate?: boolean
+  /**
+   * Whether to show the create folder option (default: false)
+   * Set to true for folders to create sub-folders inside
+   */
+  showCreateFolder?: boolean
   /**
    * Whether to show the duplicate option (default: true)
    * Set to false for items that cannot be duplicated
@@ -89,10 +98,15 @@ interface ContextMenuProps {
    */
   disableDelete?: boolean
   /**
-   * Whether the create option is disabled (default: false)
+   * Whether the create workflow option is disabled (default: false)
    * Set to true when creation is in progress or user lacks permissions
    */
   disableCreate?: boolean
+  /**
+   * Whether the create folder option is disabled (default: false)
+   * Set to true when creation is in progress or user lacks permissions
+   */
+  disableCreateFolder?: boolean
 }
 
 /**
@@ -110,19 +124,22 @@ export function ContextMenu({
   onOpenInNewTab,
   onRename,
   onCreate,
+  onCreateFolder,
   onDuplicate,
   onExport,
   onDelete,
   showOpenInNewTab = false,
   showRename = true,
   showCreate = false,
+  showCreateFolder = false,
   showDuplicate = true,
   showExport = false,
   disableExport = false,
   disableRename = false,
   disableDuplicate = false,
   disableDelete = false,
   disableCreate = false,
+  disableCreateFolder = false,
 }: ContextMenuProps) {
   return (
     <Popover open={isOpen} onOpenChange={onClose} variant='primary'>
@@ -168,6 +185,17 @@ export function ContextMenu({
             Create workflow
           </PopoverItem>
         )}
+        {showCreateFolder && onCreateFolder && (
+          <PopoverItem
+            disabled={disableCreateFolder}
+            onClick={() => {
+              onCreateFolder()
+              onClose()
+            }}
+          >
+            Create folder
+          </PopoverItem>
+        )}
         {showDuplicate && onDuplicate && (
           <PopoverItem
             disabled={disableDuplicate}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -15,7 +15,7 @@ import {
   useItemRename,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { useDeleteFolder, useDuplicateFolder } from '@/app/workspace/[workspaceId]/w/hooks'
-import { useUpdateFolder } from '@/hooks/queries/folders'
+import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow } from '@/hooks/queries/workflows'
 import type { FolderTreeNode } from '@/stores/folders/store'
 import {
@@ -48,6 +48,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
   const workspaceId = params.workspaceId as string
   const updateFolderMutation = useUpdateFolder()
   const createWorkflowMutation = useCreateWorkflow()
+  const createFolderMutation = useCreateFolder()
   const userPermissions = useUserPermissionsContext()
 
   // Delete modal state
@@ -93,6 +94,22 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     }
   }, [createWorkflowMutation, workspaceId, folder.id, router])
 
+  /**
+   * Handle create sub-folder using React Query mutation.
+   * Creates a new folder inside the current folder.
+   */
+  const handleCreateFolderInFolder = useCallback(async () => {
+    try {
+      await createFolderMutation.mutateAsync({
+        workspaceId,
+        name: 'New Folder',
+        parentId: folder.id,
+      })
+    } catch (error) {
+      logger.error('Failed to create folder:', error)
+    }
+  }, [createFolderMutation, workspaceId, folder.id])
+
   // Folder expand hook
   const {
     isExpanded,
@@ -279,11 +296,14 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
         onClose={closeMenu}
         onRename={handleStartEdit}
         onCreate={handleCreateWorkflowInFolder}
+        onCreateFolder={handleCreateFolderInFolder}
         onDuplicate={handleDuplicateFolder}
         onDelete={() => setIsDeleteModalOpen(true)}
         showCreate={true}
+        showCreateFolder={true}
         disableRename={!userPermissions.canEdit}
         disableCreate={!userPermissions.canEdit || createWorkflowMutation.isPending}
+        disableCreateFolder={!userPermissions.canEdit || createFolderMutation.isPending}
         disableDuplicate={!userPermissions.canEdit}
         disableDelete={!userPermissions.canEdit}
       />