updated to use brand tertiary color, allow worfklows to be dropped above/below folders at the same level

Author: waleedlatif1

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

@@ -29,6 +29,10 @@ 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=='
+
 interface FolderItemProps {
   folder: FolderTreeNode
   level: number
@@ -150,6 +154,10 @@ export function FolderItem({
         return
       }
 
+      if (EMPTY_DRAG_IMAGE.complete) {
+        e.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0)
+      }
+
       e.dataTransfer.setData('folder-id', folder.id)
       e.dataTransfer.effectAllowed = 'move'
       onDragStartProp?.()

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

@@ -24,6 +24,10 @@ 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=='
+
 interface WorkflowItemProps {
   workflow: WorkflowMetadata
   active: boolean
@@ -227,6 +231,10 @@ export function WorkflowItem({
         return
       }
 
+      if (EMPTY_DRAG_IMAGE.complete) {
+        e.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0)
+      }
+
       const currentSelection = useFolderStore.getState().selectedWorkflows
       const isCurrentlySelected = currentSelection.has(workflow.id)
       const workflowIds =

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

@@ -30,10 +30,10 @@ function DropIndicatorLine({ show, level = 0 }: { show: boolean; level?: number
   if (!show) return null
   return (
     <div
-      className='pointer-events-none absolute left-0 right-0 z-20 flex items-center'
+      className='pointer-events-none absolute right-0 left-0 z-20 flex items-center'
       style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
     >
-      <div className='h-[2px] flex-1 rounded-full bg-gray-400/60' />
+      <div className='h-[2px] flex-1 rounded-full bg-[#33b4ff]/70' />
     </div>
   )
 }
@@ -228,7 +228,7 @@ export function WorkflowList({
           <div
             className={clsx(
               'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-              showInside && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+              showInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
             )}
           />
           <div
@@ -324,7 +324,7 @@ export function WorkflowList({
         <div
           className={clsx(
             'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-            showRootInside && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+            showRootInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
           )}
         />
         <div className='space-y-[2px]'>

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

@@ -423,7 +423,6 @@ export function useDragDrop() {
             const position = calculateDropPosition(e, e.currentTarget)
             setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
           } else {
-            // Cross-container: highlight this folder (drop into it)
             setNormalizedDropIndicator({
               targetId: folderId,
               position: 'inside',
@@ -432,12 +431,18 @@ export function useDragDrop() {
             setHoverFolderId(folderId)
           }
         } else {
-          setNormalizedDropIndicator({
-            targetId: folderId,
-            position: 'inside',
-            folderId: parentFolderId,
-          })
-          setHoverFolderId(folderId)
+          const isSameParent = draggedSourceFolderRef.current === parentFolderId
+          if (isSameParent) {
+            const position = calculateDropPosition(e, e.currentTarget)
+            setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+          } else {
+            setNormalizedDropIndicator({
+              targetId: folderId,
+              position: 'inside',
+              folderId: parentFolderId,
+            })
+            setHoverFolderId(folderId)
+          }
         }
       },
       onDragLeave: (e: React.DragEvent<HTMLElement>) => {