feat: improve drag-and-drop UX with smoother reordering

- hide the original icon and replace its position with an empty container while dragging
- reorder items only when the drag position crosses a defined threshold: center of the target +- 4px
- the cursor's position is used to calculate the exact pickup offset
- reduce the drag threshold to 0 to ensure no drag events are skipped
- track the dragged item so that if it is removed during a drag and was previously active, it is automatically added to the active list

Author: edfloreshz

cosmic-app-list/src/app.rs

@@ -293,18 +293,19 @@ impl DockItem {
             icon_button.into()
         };
 
+        let icon_origin = iced::Vector::new(app_icon.padding.left, app_icon.padding.top);
         let path = desktop_info.path.clone();
         let icon_button = if dnd_source_enabled && interaction_enabled {
             dnd_source(icon_button)
                 .window(window_id)
-                .drag_icon(move |_| {
+                .drag_icon(move |pointer_offset| {
                     (
                         cosmic_icon.clone().into(),
                         iced::core::widget::tree::State::None,
-                        iced::Vector::ZERO,
+                        icon_origin - pointer_offset,
                     )
                 })
-                .drag_threshold(16.)
+                .drag_threshold(0.)
                 .drag_content(move || DndPathBuf(path.clone()))
                 .on_start(Some(Message::StartDrag(*id)))
                 .on_cancel(Some(Message::DragFinished))
@@ -319,6 +320,15 @@ impl DockItem {
             icon_button.into()
         }
     }
+
+    fn as_draged_item(&self, applet: &Context) -> Element<'_, Message> {
+        let app_icon = AppletIconData::new(applet);
+
+        container(horizontal_space())
+            .width(app_icon.icon_size as f32 + app_icon.padding.left + app_icon.padding.right)
+            .height(app_icon.icon_size as f32 + app_icon.padding.top + app_icon.padding.bottom)
+            .into()
+    }
 }
 
 #[derive(Debug, Clone, Default)]
@@ -344,6 +354,7 @@ struct CosmicAppList {
     desktop_entries: Vec<DesktopEntry>,
     active_list: Vec<DockItem>,
     pinned_list: Vec<DockItem>,
+    dragged_item: Option<DockItem>,
     dnd_source: Option<(window::Id, DockItem, DndAction, Option<usize>)>,
     config: AppListConfig,
     wayland_sender: Option<Sender<WaylandRequest>>,
@@ -404,40 +415,21 @@ enum Message {
 }
 
 fn index_in_list(
-    mut list_len: usize,
+    list_len: usize,
     item_size: f32,
-    divider_size: f32,
+    center_threshold: f32,
     existing_preview: Option<usize>,
     pos_in_list: f32,
 ) -> usize {
-    if existing_preview.is_some() {
-        list_len += 1;
-    }
+    let current_index = existing_preview.unwrap_or(0);
+    let current_center = current_index as f32 * item_size + item_size / 2.0;
 
-    let index = if (list_len == 0) || (pos_in_list < item_size / 2.0) {
-        0
+    if pos_in_list > current_center + item_size - center_threshold {
+        (current_index + 1).min(list_len)
+    } else if pos_in_list < current_center - item_size + center_threshold {
+        current_index.saturating_sub(1)
     } else {
-        let mut i = 1;
-        let mut pos = item_size / 2.0;
-        while i < list_len {
-            let next_pos = pos + item_size + divider_size;
-            if pos < pos_in_list && pos_in_list < next_pos {
-                break;
-            }
-            pos = next_pos;
-            i += 1;
-        }
-        i
-    };
-
-    if let Some(existing_preview) = existing_preview {
-        if index >= existing_preview {
-            index.saturating_sub(1)
-        } else {
-            index
-        }
-    } else {
-        index
+        current_index
     }
 }
 
@@ -1083,8 +1075,18 @@ impl cosmic::Application for CosmicAppList {
                     })
                 {
                     let icon_id = window::Id::unique();
+                    if let Some(pinned_pos) = pos {
+                        let entry = self.pinned_list.remove(pinned_pos);
+                        if !entry.toplevels.is_empty() {
+                            self.dragged_item = Some(entry);
+                        }
+                    }
                     self.dnd_source =
                         Some((icon_id, toplevel_group.clone(), DndAction::empty(), pos));
+                    self.dnd_offer = Some(DndOffer {
+                        dock_item: Some(toplevel_group),
+                        preview_index: pos.unwrap_or(self.pinned_list.len()),
+                    });
                 }
             }
             Message::DragFinished => {
@@ -1127,14 +1129,20 @@ impl cosmic::Application for CosmicAppList {
                 };
                 let num_pinned = self.pinned_list.len();
                 let index = index_in_list(num_pinned, item_size as f32, 4.0, None, pos_in_list);
-                self.dnd_offer = Some(DndOffer {
-                    preview_index: index,
-                    ..DndOffer::default()
-                });
                 if let Some(dnd_source) = self.dnd_source.as_ref() {
-                    self.dnd_offer.as_mut().unwrap().dock_item = Some(dnd_source.1.clone());
+                    let source_id = dnd_source.1.desktop_info.id().to_string();
+                    self.pinned_list
+                        .retain(|p| p.desktop_info.id() != source_id);
+
+                    self.dnd_offer = Some(DndOffer {
+                        preview_index: index,
+                        dock_item: Some(dnd_source.1.clone()),
+                    });
                 } else {
-                    // TODO dnd
+                    self.dnd_offer = Some(DndOffer {
+                        preview_index: index,
+                        ..DndOffer::default()
+                    });
                     return peek_dnd::<DndPathBuf>()
                         .map(Message::DndData)
                         .map(cosmic::Action::App);
@@ -1160,17 +1168,9 @@ impl cosmic::Application for CosmicAppList {
                 }
             }
             Message::DndLeave => {
-                if let Some((_, toplevel_group, _, pinned_pos)) = self.dnd_source.as_ref() {
-                    let mut pos = 0;
-                    self.pinned_list.retain_mut(|pinned| {
-                        let matched_id =
-                            pinned.desktop_info.id() == toplevel_group.desktop_info.id();
-                        let pinned_match = pinned_pos.is_some_and(|pinned_pos| pinned_pos == pos);
-                        let ret = !matched_id || pinned_match;
-
-                        pos += 1;
-                        ret
-                    });
+                if let Some(dragged_item) = self.dragged_item.take() {
+                    self.active_list.push(dragged_item);
+                    self.dragged_item = None;
                 }
                 self.dnd_offer = None;
             }
@@ -1768,18 +1768,7 @@ impl cosmic::Application for CosmicAppList {
         {
             favorites.insert(
                 index.min(favorites.len()),
-                item.as_icon(
-                    &self.core.applet,
-                    None,
-                    false,
-                    self.config.enable_drag_source,
-                    self.gpus.as_deref(),
-                    item.toplevels
-                        .iter()
-                        .any(|y| focused_item.contains(&y.0.foreign_toplevel)),
-                    dot_radius,
-                    self.core.main_window_id().unwrap(),
-                ),
+                item.as_draged_item(&self.core.applet),
             );
         } else if self.is_listening_for_dnd && self.pinned_list.is_empty() {
             // show star indicating pinned_list is drag target