cahnged color, removed flicker on folder container

Author: waleedlatif1

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

@@ -29,9 +29,15 @@ import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'
 
 const logger = createLogger('FolderItem')
 
-const EMPTY_DRAG_IMAGE = new Image(1, 1)
-EMPTY_DRAG_IMAGE.src =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+let EMPTY_DRAG_IMAGE: HTMLImageElement | null = null
+function getEmptyDragImage(): HTMLImageElement {
+  if (!EMPTY_DRAG_IMAGE && typeof window !== 'undefined') {
+    EMPTY_DRAG_IMAGE = new Image(1, 1)
+    EMPTY_DRAG_IMAGE.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+  }
+  return EMPTY_DRAG_IMAGE!
+}
 
 interface FolderItemProps {
   folder: FolderTreeNode
@@ -154,8 +160,9 @@ export function FolderItem({
         return
       }
 
-      if (EMPTY_DRAG_IMAGE.complete) {
-        e.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0)
+      const emptyImg = getEmptyDragImage()
+      if (emptyImg?.complete) {
+        e.dataTransfer.setDragImage(emptyImg, 0, 0)
       }
 
       e.dataTransfer.setData('folder-id', folder.id)

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

@@ -24,9 +24,15 @@ import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
-const EMPTY_DRAG_IMAGE = new Image(1, 1)
-EMPTY_DRAG_IMAGE.src =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+let EMPTY_DRAG_IMAGE: HTMLImageElement | null = null
+function getEmptyDragImage(): HTMLImageElement {
+  if (!EMPTY_DRAG_IMAGE && typeof window !== 'undefined') {
+    EMPTY_DRAG_IMAGE = new Image(1, 1)
+    EMPTY_DRAG_IMAGE.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+  }
+  return EMPTY_DRAG_IMAGE!
+}
 
 interface WorkflowItemProps {
   workflow: WorkflowMetadata
@@ -231,8 +237,9 @@ export function WorkflowItem({
         return
       }
 
-      if (EMPTY_DRAG_IMAGE.complete) {
-        e.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0)
+      const emptyImg = getEmptyDragImage()
+      if (emptyImg?.complete) {
+        e.dataTransfer.setDragImage(emptyImg, 0, 0)
       }
 
       const currentSelection = useFolderStore.getState().selectedWorkflows

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

@@ -60,6 +60,7 @@ export function WorkflowList({
     createWorkflowDragHandlers,
     createFolderDragHandlers,
     createEmptyFolderDropZone,
+    createFolderContentDropZone,
     createRootDropZone,
     handleDragStart,
     handleDragEnd,
@@ -245,7 +246,7 @@ export function WorkflowList({
           <DropIndicatorLine show={showAfter} level={level} />
 
           {isExpanded && (hasChildren || isDragging) && (
-            <div className='relative'>
+            <div className='relative' {...createFolderContentDropZone(folder.id)}>
               <div
                 className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
                 style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
@@ -272,6 +273,7 @@ export function WorkflowList({
       isDragging,
       createFolderDragHandlers,
       createEmptyFolderDropZone,
+      createFolderContentDropZone,
       handleDragStart,
       handleDragEnd,
       renderWorkflowItem,

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

@@ -120,6 +120,19 @@ export function useDragDrop() {
     []
   )
 
+  const calculateFolderDropPosition = useCallback(
+    (e: React.DragEvent, element: HTMLElement): 'before' | 'inside' | 'after' => {
+      const rect = element.getBoundingClientRect()
+      const relativeY = e.clientY - rect.top
+      const height = rect.height
+      // Top 25% = before, middle 50% = inside, bottom 25% = after
+      if (relativeY < height * 0.25) return 'before'
+      if (relativeY > height * 0.75) return 'after'
+      return 'inside'
+    },
+    []
+  )
+
   type SiblingItem = { type: 'folder' | 'workflow'; id: string; sortOrder: number }
 
   const getDestinationFolderId = useCallback((indicator: DropIndicator): string | null => {
@@ -193,24 +206,34 @@ export function useDragDrop() {
 
   const setNormalizedDropIndicator = useCallback(
     (indicator: DropIndicator | null) => {
-      if (!indicator || indicator.position !== 'after' || indicator.targetId === 'root') {
-        setDropIndicator(indicator)
-        return
-      }
+      setDropIndicator((prev) => {
+        let next: DropIndicator | null = indicator
+
+        // Normalize 'after' to 'before' of next sibling
+        if (indicator && indicator.position === 'after' && indicator.targetId !== 'root') {
+          const siblings = getSiblingItems(indicator.folderId)
+          const currentIdx = siblings.findIndex((s) => s.id === indicator.targetId)
+          const nextSibling = siblings[currentIdx + 1]
+          if (nextSibling) {
+            next = {
+              targetId: nextSibling.id,
+              position: 'before',
+              folderId: indicator.folderId,
+            }
+          }
+        }
 
-      const siblings = getSiblingItems(indicator.folderId)
-      const currentIdx = siblings.findIndex((s) => s.id === indicator.targetId)
-      const nextSibling = siblings[currentIdx + 1]
-
-      if (nextSibling) {
-        setDropIndicator({
-          targetId: nextSibling.id,
-          position: 'before',
-          folderId: indicator.folderId,
-        })
-      } else {
-        setDropIndicator(indicator)
-      }
+        // Skip update if indicator hasn't changed
+        if (
+          prev?.targetId === next?.targetId &&
+          prev?.position === next?.position &&
+          prev?.folderId === next?.folderId
+        ) {
+          return prev
+        }
+
+        return next
+      })
     },
     [getSiblingItems]
   )
@@ -431,11 +454,19 @@ export function useDragDrop() {
             setHoverFolderId(folderId)
           }
         } else {
+          // Workflow being dragged over a folder
           const isSameParent = draggedSourceFolderRef.current === parentFolderId
           if (isSameParent) {
-            const position = calculateDropPosition(e, e.currentTarget)
+            // Same level - use three zones: top=before, middle=inside, bottom=after
+            const position = calculateFolderDropPosition(e, e.currentTarget)
             setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+            if (position === 'inside') {
+              setHoverFolderId(folderId)
+            } else {
+              setHoverFolderId(null)
+            }
           } else {
+            // Different container - drop into folder
             setNormalizedDropIndicator({
               targetId: folderId,
               position: 'inside',
@@ -450,7 +481,14 @@ export function useDragDrop() {
       },
       onDrop: handleDrop,
     }),
-    [initDragOver, calculateDropPosition, setNormalizedDropIndicator, isLeavingElement, handleDrop]
+    [
+      initDragOver,
+      calculateDropPosition,
+      calculateFolderDropPosition,
+      setNormalizedDropIndicator,
+      isLeavingElement,
+      handleDrop,
+    ]
   )
 
   const createEmptyFolderDropZone = useCallback(
@@ -464,6 +502,23 @@ export function useDragDrop() {
     [initDragOver, setNormalizedDropIndicator, handleDrop]
   )
 
+  const createFolderContentDropZone = useCallback(
+    (folderId: string) => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        e.preventDefault()
+        e.stopPropagation() // Prevent bubbling to root when in gaps between items
+        lastDragYRef.current = e.clientY
+        setIsDragging(true)
+        // Only set folder highlight if dragging from a different folder
+        if (draggedSourceFolderRef.current !== folderId) {
+          setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId: null })
+        }
+      },
+      onDrop: handleDrop,
+    }),
+    [setNormalizedDropIndicator, handleDrop]
+  )
+
   const createRootDropZone = useCallback(
     () => ({
       onDragOver: (e: React.DragEvent<HTMLElement>) => {
@@ -506,6 +561,7 @@ export function useDragDrop() {
     createWorkflowDragHandlers,
     createFolderDragHandlers,
     createEmptyFolderDropZone,
+    createFolderContentDropZone,
     createRootDropZone,
     handleDragStart,
     handleDragEnd,