Highlight Drag-and-Drop drop placement in the Sidebar/File-tree

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -33,8 +33,7 @@ const Wrapper = styled.div`
       overflow: hidden;
     }
 
-    &:hover,
-    &.item-hovered {
+    &:hover {
       background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
       .menu-icon {
         .dropdown {
@@ -45,6 +44,14 @@ const Wrapper = styled.div`
       }
     }
 
+    &.dnd-drag-over {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
+
+    &.dnd-hl-drop-after {
+      border-bottom: ${(props) => props.theme.sidebar.collection.item.dndPlacementHighlightBorder};
+    }
+
     &.item-focused-in-tab {
       background: ${(props) => props.theme.sidebar.collection.item.bg};
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -86,7 +86,10 @@ const CollectionItem = ({ item, collection, searchText }) => {
 
   const itemRowClassName = classnames('flex collection-item-name items-center', {
     'item-focused-in-tab': item.uid == activeTabUid,
-    'item-hovered': isOver
+    'dnd-drag-over': isOver,
+    // Show drop-placement-highlight unless the dragged-item can be dropped into
+    // folder, i.e. if this item happens to be a folder.
+    'dnd-hl-drop-after': isOver && item.type !== 'folder'
   });
 
   const handleRun = async () => {

packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js

@@ -12,15 +12,12 @@ const Wrapper = styled.div`
       transform: rotateZ(90deg);
     }
 
-    &.item-hovered {
+    &.dnd-drag-over {
       background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      .collection-actions {
-        .dropdown {
-          div[aria-expanded='false'] {
-            visibility: visible;
-          }
-        }
-      }
+    }
+
+    &.dnd-hl-drop-before {
+      border-top: ${(props) => props.theme.sidebar.collection.item.dndPlacementHighlightBorder};
     }
 
     .collection-actions {

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -140,7 +140,7 @@ const Collection = ({ collection, searchText }) => {
     }
   });
   
-  const [{ isOver }, drop] = useDrop({
+  const [{ isOver, draggedItemType }, drop] = useDrop({
     accept: ["collection", `collection-item-${collection.uid}`],
     drop: (draggedItem, monitor) => {
       const itemType = monitor.getItemType();
@@ -155,6 +155,7 @@ const Collection = ({ collection, searchText }) => {
     },
     collect: (monitor) => ({
       isOver: monitor.isOver(),
+      draggedItemType: monitor.getItem()?.type,
     }),
   });
 
@@ -167,8 +168,13 @@ const Collection = ({ collection, searchText }) => {
   }
 
   const collectionRowClassName = classnames('flex py-1 collection-name items-center', {
-      'item-hovered': isOver
-    });
+    'dnd-drag-over': isOver,
+    // Show drop-placement-highlight unless the item can be dropped into this collection.
+    // Anything other than another collection can be
+    // dropped into a collection(folder, request, etc.).
+    // Here, assuming if there is no `.type`, its not a collection.
+    'dnd-hl-drop-before': isOver && !draggedItemType
+  });
 
   // we need to sort request items by seq property
   const sortRequestItems = (items = []) => {

packages/bruno-app/src/themes/dark.js

@@ -61,7 +61,8 @@ const darkTheme = {
         indentBorder: 'solid 1px #585858',
         active: {
           indentBorder: 'solid 1px #4c4c4c'
-        }
+        },
+        dndPlacementHighlightBorder: "3px solid #4f4f4f"
       }
     },
 

packages/bruno-app/src/themes/light.js

@@ -61,7 +61,8 @@ const lightTheme = {
         indentBorder: 'solid 1px #e1e1e1',
         active: {
           indentBorder: 'solid 1px #d0d0d0'
-        }
+        },
+        dndPlacementHighlightBorder: "3px solid #c1c1c1"
       }
     },