Improve drag and drop with indicator about the move

App/Sources/UI/Views/CommandView.swift

@@ -61,7 +61,7 @@ struct CommandView: View {
       )
       .compositingGroup()
       .draggable($command.wrappedValue.draggablePayload(prefix: "WC|", selections: selectionManager.selections))
-      .dropDestination(for: DropItem.self, action: { items, location in
+      .dropDestination(DropItem.self, color: .accentColor) { items, location in
         var urls = [URL]()
         for item in items {
           switch item {
@@ -72,7 +72,7 @@ struct CommandView: View {
             }
             guard let payload = item.draggablePayload(prefix: "WC|"),
                   let (from, destination) = publisher.data.commands.moveOffsets(for: $command.wrappedValue,
-                                                                                      with: payload) else {
+                                                                                with: payload) else {
               return false
             }
             withAnimation(WorkflowCommandListView.animation) {
@@ -92,9 +92,7 @@ struct CommandView: View {
           return true
         }
         return false
-      }, isTargeted: { newValue in
-        isTargeted = newValue
-      })
+      }
       .environmentObject(selectionManager)
       .animation(.none, value: command.meta.isEnabled)
       .grayscale(command.meta.isEnabled ? controlActiveState == .key ? 0 : 0.25 : 0.5)

App/Sources/UI/Views/ContentItemView.swift

@@ -62,7 +62,7 @@ struct ContentItemView: View {
     .padding(4)
     .background(FillBackgroundView(isSelected: .readonly(contentSelectionManager.selections.contains(workflow.id))))
     .draggable(getDraggable())
-    .dropDestination(for: String.self) { items, location in
+    .dropDestination(String.self, color: .accentColor) { items, location in
       guard let payload = items.draggablePayload(prefix: "W|"),
             let (from, destination) = publisher.data.moveOffsets(for: workflow, with: payload) else {
         return false
@@ -72,8 +72,6 @@ struct ContentItemView: View {
       }
       onAction(.reorderWorkflows(source: from, destination: destination))
       return true
-    } isTargeted: { newValue in
-      isTargeted = newValue
     }
   }
 

App/Sources/UI/Views/DropDestination/TargetedDropView.swift

@@ -0,0 +1,66 @@
+import SwiftUI
+
+extension View {
+  func dropDestination<T: Transferable>(_ type: T.Type, color: Color, onDrop: @escaping ([T], CGPoint) -> Bool) -> some View {
+    self
+      .modifier(TargetedDrop(type, color: color, onDrop: onDrop))
+  }
+}
+
+struct TargetedDrop<T: Transferable>: ViewModifier {
+  private let type: T.Type
+  private let color: Color
+  private let onDrop: ([T], CGPoint) -> Bool
+
+  init(_ type: T.Type, color: Color, onDrop: @escaping ([T], CGPoint) -> Bool) {
+    self.type = type
+    self.color = color
+    self.onDrop = onDrop
+  }
+
+  func body(content: Content) -> some View {
+    content
+      .overlay(TargetedDropView(type, color: color, onDrop: onDrop))
+  }
+}
+
+private struct TargetedDropView<T: Transferable>: View {
+  private let type: T.Type
+  private let color: Color
+  private let onDrop: ([T], CGPoint) -> Bool
+
+  init(_ type: T.Type, color: Color, onDrop: @escaping ([T], CGPoint) -> Bool) {
+    self.type = type
+    self.color = color
+    self.onDrop = onDrop
+  }
+
+  var body: some View {
+    VStack(spacing: 0) {
+      InternalTargetedDrop(type: type, alignment: .top, color: color, onDrop: onDrop)
+      InternalTargetedDrop(type: type, alignment: .bottom, color: color, onDrop: onDrop)
+    }
+  }
+}
+
+private struct InternalTargetedDrop<T: Transferable>: View {
+  @State var isTargeted: Bool = false
+  let type: T.Type
+  let alignment: Alignment
+  let color: Color
+  let onDrop: ([T], CGPoint) -> Bool
+
+  var body: some View {
+    Color
+      .clear
+      .overlay(alignment: alignment, content: {
+        Rectangle()
+          .fill(color)
+          .frame(height: 2)
+          .opacity(isTargeted ? 1 : 0)
+      })
+      .dropDestination(for: type, action: onDrop, isTargeted: {
+        isTargeted = $0
+      })
+  }
+}

App/Sources/UI/Views/GroupItemView.swift

@@ -40,22 +40,20 @@ struct GroupItemView: View {
     .contentShape(Rectangle())
     .background(FillBackgroundView(isSelected: .readonly(selectionManager.selections.contains(group.id))))
     .draggable(group.draggablePayload(prefix: "WG|", selections: selectionManager.selections))
-    .dropDestination(for: String.self, action: { items, location in
+    .dropDestination(String.self, color: .accentColor) { items, location in
       if let payload = items.draggablePayload(prefix: "WG|"),
-          let (from, destination) = groupsPublisher.data.moveOffsets(for: group, with: payload) {
-        withAnimation(.spring(response: 0.3, dampingFraction: 0.65, blendDuration: 0.2)) {
-          groupsPublisher.data.move(fromOffsets: IndexSet(from), toOffset: destination)
-        }
+           let (from, destination) = groupsPublisher.data.moveOffsets(for: group, with: payload) {
+          withAnimation(.spring(response: 0.3, dampingFraction: 0.65, blendDuration: 0.2)) {
+            groupsPublisher.data.move(fromOffsets: IndexSet(from), toOffset: destination)
+          }
 
-        onAction(.moveGroups(source: from, destination: destination))
-        return true
-      } else if let payload = items.draggablePayload(prefix: "W|") {
-        onAction(.moveWorkflows(workflowIds: Set(payload), groupId: group.id))
-      }
-      return false
-    }, isTargeted: { newValue in
-      isTargeted = newValue
-    })
+          onAction(.moveGroups(source: from, destination: destination))
+          return true
+        } else if let payload = items.draggablePayload(prefix: "W|") {
+          onAction(.moveWorkflows(workflowIds: Set(payload), groupId: group.id))
+        }
+        return false
+    }
   }
 
   @ViewBuilder

App/Sources/UI/Views/WorkflowApplicationTriggerItemView.swift

@@ -71,9 +71,7 @@ struct WorkflowApplicationTriggerItemView: View {
     .cornerRadius(8)
     .compositingGroup()
     .shadow(radius: 2)
-    .overlay(BorderedOverlayView(cornerRadius: 8))
-    .draggable(element.draggablePayload(prefix: "WAT|", selections: selectionManager.selections))
-    .dropDestination(for: String.self) { items, location in
+    .dropDestination(String.self, color: .accentColor) { items, location in
       guard let payload = items.draggablePayload(prefix: "WAT|"),
             let (from, destination) = data.moveOffsets(for: element,
                                                        with: payload) else {
@@ -84,8 +82,8 @@ struct WorkflowApplicationTriggerItemView: View {
       }
       onAction(.updateApplicationTriggers(data))
       return true
-    } isTargeted: { newValue in
-      isTargeted = newValue
     }
+    .overlay(BorderedOverlayView(cornerRadius: 8))
+    .draggable(element.draggablePayload(prefix: "WAT|", selections: selectionManager.selections))
   }
 }