improvement(sidebar): dragging hover handler; closed folders by default minus active path

Author: emir-karabeg

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

@@ -10,16 +10,21 @@ import { useItemDrag } from '../../../../hooks/use-item-drag'
 interface FolderItemProps {
   folder: FolderTreeNode
   level: number
+  hoverHandlers?: {
+    onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
+    onDragLeave?: (e: React.DragEvent<HTMLElement>) => void
+  }
 }
 
 /**
  * FolderItem component displaying a single folder with drag and expand/collapse support.
  * Uses item drag and folder expand hooks for unified behavior.
+ * Supports hover-to-expand during drag operations via hoverHandlers.
  *
  * @param props - Component props
  * @returns Folder item with drag and expand support
  */
-export function FolderItem({ folder, level }: FolderItemProps) {
+export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
   // Folder expand hook
   const { isExpanded, handleToggleExpanded, handleKeyDown } = useFolderExpand({
     folderId: folder.id,
@@ -76,6 +81,7 @@ export function FolderItem({ folder, level }: FolderItemProps) {
       draggable
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      {...hoverHandlers}
     >
       <ChevronRight
         className={clsx(

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

@@ -69,6 +69,7 @@ export function WorkflowList({
     createFolderDragHandlers,
     createItemDragHandlers,
     createRootDragHandlers,
+    createFolderHeaderHoverHandlers,
   } = useDragDrop()
 
   // Workflow import hook
@@ -194,7 +195,11 @@ export function WorkflowList({
             style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
             {...createItemDragHandlers(folder.id)}
           >
-            <FolderItem folder={folder} level={level} />
+            <FolderItem
+              folder={folder}
+              level={level}
+              hoverHandlers={createFolderHeaderHoverHandlers(folder.id)}
+            />
           </div>
 
           {isExpanded && hasChildren && (
@@ -247,6 +252,7 @@ export function WorkflowList({
       isDragging,
       createFolderDragHandlers,
       createItemDragHandlers,
+      createFolderHeaderHoverHandlers,
       calculateVerticalLineHeight,
       renderWorkflowItem,
     ]

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts

@@ -11,20 +11,27 @@ const logger = createLogger('WorkflowList:DragDrop')
 const SCROLL_THRESHOLD = 60 // Distance from edge to trigger scroll
 const SCROLL_SPEED = 8 // Pixels per frame
 
+/**
+ * Constants for folder auto-expand on hover during drag
+ */
+const HOVER_EXPAND_DELAY = 400 // Milliseconds to wait before expanding folder
+
 /**
  * Custom hook for handling drag and drop operations for workflows and folders.
- * Includes auto-scrolling and drop target highlighting.
+ * Includes auto-scrolling, drop target highlighting, and hover-to-expand.
  *
  * @returns Drag and drop state and event handlers
  */
 export function useDragDrop() {
   const [dropTargetId, setDropTargetId] = useState<string | null>(null)
   const [isDragging, setIsDragging] = useState(false)
+  const [hoverFolderId, setHoverFolderId] = useState<string | null>(null)
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
   const scrollIntervalRef = useRef<number | null>(null)
+  const hoverExpandTimerRef = useRef<number | null>(null)
   const lastDragYRef = useRef<number>(0)
 
-  const { updateFolderAPI, getFolderPath } = useFolderStore()
+  const { updateFolderAPI, getFolderPath, setExpanded, expandedFolders } = useFolderStore()
   const { updateWorkflow } = useWorkflowRegistry()
 
   /**
@@ -85,6 +92,49 @@ export function useDragDrop() {
     }
   }, [isDragging, handleAutoScroll])
 
+  /**
+   * Handle hover folder changes - start/clear expand timer
+   */
+  useEffect(() => {
+    // Clear existing timer when hover folder changes
+    if (hoverExpandTimerRef.current) {
+      clearTimeout(hoverExpandTimerRef.current)
+      hoverExpandTimerRef.current = null
+    }
+
+    // Don't start timer if not dragging or no folder is hovered
+    if (!isDragging || !hoverFolderId) {
+      return
+    }
+
+    // Don't expand if folder is already expanded
+    if (expandedFolders.has(hoverFolderId)) {
+      return
+    }
+
+    // Start timer to expand folder after delay
+    hoverExpandTimerRef.current = window.setTimeout(() => {
+      setExpanded(hoverFolderId, true)
+      logger.info(`Auto-expanded folder ${hoverFolderId} during drag`)
+    }, HOVER_EXPAND_DELAY)
+
+    return () => {
+      if (hoverExpandTimerRef.current) {
+        clearTimeout(hoverExpandTimerRef.current)
+        hoverExpandTimerRef.current = null
+      }
+    }
+  }, [hoverFolderId, isDragging, expandedFolders, setExpanded])
+
+  /**
+   * Cleanup hover state when dragging stops
+   */
+  useEffect(() => {
+    if (!isDragging) {
+      setHoverFolderId(null)
+    }
+  }, [isDragging])
+
   /**
    * Moves one or more workflows to a target folder
    *
@@ -269,6 +319,32 @@ export function useDragDrop() {
     [handleFolderDrop]
   )
 
+  /**
+   * Creates drag event handlers for folder header (the clickable part)
+   * These handlers trigger folder expansion on hover during drag
+   *
+   * @param folderId - Folder ID to handle hover for
+   * @returns Object containing drag event handlers for folder header
+   */
+  const createFolderHeaderHoverHandlers = useCallback(
+    (folderId: string) => ({
+      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
+        if (isDragging) {
+          setHoverFolderId(folderId)
+        }
+      },
+      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
+        const relatedTarget = e.relatedTarget as HTMLElement | null
+        const currentTarget = e.currentTarget as HTMLElement
+        // Only clear if we're leaving the folder header completely
+        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+          setHoverFolderId(null)
+        }
+      },
+    }),
+    [isDragging]
+  )
+
   /**
    * Set the scroll container ref for auto-scrolling
    *
@@ -285,5 +361,6 @@ export function useDragDrop() {
     createFolderDragHandlers,
     createItemDragHandlers,
     createRootDragHandlers,
+    createFolderHeaderHoverHandlers,
   }
 }

apps/sim/stores/folders/store.ts

@@ -242,14 +242,8 @@ export const useFolderStore = create<FolderState>()(
 
           get().setFolders(processedFolders)
 
-          // Initialize expanded state from folder data
-          const expandedSet = new Set<string>()
-          processedFolders.forEach((folder: WorkflowFolder) => {
-            if (folder.isExpanded) {
-              expandedSet.add(folder.id)
-            }
-          })
-          set({ expandedFolders: expandedSet })
+          // Start with all folders collapsed - only active workflow path will be expanded by the UI
+          set({ expandedFolders: new Set() })
         } catch (error) {
           logger.error('Error fetching folders:', error)
         } finally {