optimized

Author: waleedlatif1

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo } from 'react'
 import clsx from 'clsx'
 import { useParams, usePathname } from 'next/navigation'
 import { FolderItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item'
@@ -26,7 +26,13 @@ interface WorkflowListProps {
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }
 
-function DropIndicatorLine({ show, level = 0 }: { show: boolean; level?: number }) {
+const DropIndicatorLine = memo(function DropIndicatorLine({
+  show,
+  level = 0,
+}: {
+  show: boolean
+  level?: number
+}) {
   if (!show) return null
   return (
     <div
@@ -36,7 +42,7 @@ function DropIndicatorLine({ show, level = 0 }: { show: boolean; level?: number
       <div className='h-[2px] flex-1 rounded-full bg-[#33b4ff]/70' />
     </div>
   )
-}
+})
 
 export function WorkflowList({
   regularWorkflows,

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

@@ -506,11 +506,10 @@ export function useDragDrop() {
     (folderId: string) => ({
       onDragOver: (e: React.DragEvent<HTMLElement>) => {
         e.preventDefault()
-        e.stopPropagation() // Prevent bubbling to root when in gaps between items
+        e.stopPropagation()
         lastDragYRef.current = e.clientY
         setIsDragging(true)
-        // Only set folder highlight if dragging from a different folder
-        if (draggedSourceFolderRef.current !== folderId) {
+        if (e.target === e.currentTarget && draggedSourceFolderRef.current !== folderId) {
           setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId: null })
         }
       },
@@ -523,7 +522,9 @@ export function useDragDrop() {
     () => ({
       onDragOver: (e: React.DragEvent<HTMLElement>) => {
         initDragOver(e, false)
-        setNormalizedDropIndicator({ targetId: 'root', position: 'inside', folderId: null })
+        if (e.target === e.currentTarget) {
+          setNormalizedDropIndicator({ targetId: 'root', position: 'inside', folderId: null })
+        }
       },
       onDragLeave: (e: React.DragEvent<HTMLElement>) => {
         if (isLeavingElement(e)) setNormalizedDropIndicator(null)