From c9cfefb62409d9ba9efd5a252b36b01537eccf59 Mon Sep 17 00:00:00 2001
From: halfmexican <103920890+halfmexican@users.noreply.github.com>
Date: Mon, 27 Mar 2023 16:33:26 -0500
Subject: [PATCH 01/22] Add drag-and-drop ui file

---
 src/Library/demos/Drag and Drop/main.blp  | 64 +++++++++++++++++++++++
 src/Library/demos/Drag and Drop/main.json | 11 ++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/Library/demos/Drag and Drop/main.blp
 create mode 100644 src/Library/demos/Drag and Drop/main.json

diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp
new file mode 100644
index 000000000..a2fd589a8
--- /dev/null
+++ b/src/Library/demos/Drag and Drop/main.blp	
@@ -0,0 +1,64 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Drag and Drop";
+  description: _("user interaction pattern where users drag a UI element from one place to another");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    ListBox list {
+      styles ["boxed-list"]
+
+      Adw.ActionRow{
+        title: "row";
+        [prefix]
+        Image {
+          icon-name: "list-drag-handle-symbolic";
+        }
+      }
+
+      Adw.ActionRow{
+        title: "row2";
+        [prefix]
+        Image {
+          icon-name: "list-drag-handle-symbolic";
+        }
+      }
+
+      Adw.ActionRow{
+        title: "row3";
+        [prefix]
+        Image {
+          icon-name: "list-drag-handle-symbolic";
+        }
+      }
+
+      Adw.ActionRow{
+        title: "row4";
+        [prefix]
+        Image {
+          icon-name: "list-drag-handle-symbolic";
+        }
+
+      }
+
+      Adw.ActionRow{
+        title: "row5";
+        [prefix]
+        Image {
+          icon-name: "list-drag-handle-symbolic";
+        }
+
+      }
+    }
+
+    LinkButton {
+      label: "API Reference";
+      uri: "";
+    }
+  }
+}
+
diff --git a/src/Library/demos/Drag and Drop/main.json b/src/Library/demos/Drag and Drop/main.json
new file mode 100644
index 000000000..b5564f478
--- /dev/null
+++ b/src/Library/demos/Drag and Drop/main.json	
@@ -0,0 +1,11 @@
+{
+  "name": "Drag and Drop",
+  "category": "user_interface",
+  "description": "dnd",
+  "panels": [
+    "code",
+    "ui",
+    "preview"
+  ],
+  "autorun": false
+}

From 12ae1efa32256ca305e34cc9b6e1d845ed53ed03 Mon Sep 17 00:00:00 2001
From: halfmexican <wlhunter@go.olemiss.edu>
Date: Tue, 30 May 2023 17:39:18 -0500
Subject: [PATCH 02/22] implement drag

---
 src/Library/demos/Drag and Drop/main.js | 60 +++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/Library/demos/Drag and Drop/main.js

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
new file mode 100644
index 000000000..e2c65aee2
--- /dev/null
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -0,0 +1,60 @@
+import Gtk from "gi://Gtk";
+import Adw from "gi://Adw";
+import Gdk from "gi://Gdk";
+import GObject from "gi://GObject";
+
+const list = workbench.builder.get_object("list");
+
+// Calculate the length of our ListBox
+let last_row = list.get_last_child();
+let list_length = last_row.get_index() + 1;
+
+// Create a Dragsource and DropTarget for each row
+for (let i = 0; i < list_length; i++) {
+  let row = list.get_row_at_index(i);
+  row.selectable = false;
+  let _drag_x;
+  let _drag_y;
+
+  let allocation;
+  const drag = new Gtk.DragSource();
+  const drop = Gtk.DropTarget.new(row.constructor.$gtype, Gdk.DragAction.COPY);
+
+  row.add_controller(drag);
+  row.add_controller(drop);
+
+  // Drag controller
+  drag.connect("prepare", (source, _x, _y) => {
+    _drag_x = _x;
+    _drag_y = _y;
+
+    allocation = row.get_allocation();
+    let value = new GObject.Value();
+    value.init(GObject.TYPE_OBJECT);
+    value.set_object(row);
+    return Gdk.ContentProvider.new_for_value(value);
+  });
+
+  drag.connect("drag-begin", (drag) => {
+    list.remove(row);
+    row.set_state_flags(Gtk.StateFlags.DROP_ACTIVE, true);
+    let drag_widget = new Gtk.ListBox();
+    drag_widget.set_size_request(allocation.width, allocation.height);
+    drag_widget.add_css_class("boxed-list");
+
+    let drag_row = new Adw.ActionRow();
+    drag_row.title = row.title;
+    drag_row.add_css_class("boxed-list");
+
+    drag_widget.append(drag_row);
+    drag_widget.drag_highlight_row(drag_row);
+
+    let icon = Gtk.DragIcon.get_for_drag(drag.get_drag());
+    icon.child = drag_widget;
+  });
+
+  // Drop controller
+  drop.connect("drop", (drop, value, _x, _y) => {});
+
+  drop.connect("enter", (_x, _y) => {});
+}

From c9ae6684c3415bc09e18fbb6676f59b7c7ceb34c Mon Sep 17 00:00:00 2001
From: halfmexican <103920890+halfmexican@users.noreply.github.com>
Date: Wed, 31 May 2023 15:30:18 -0500
Subject: [PATCH 03/22] init value to Gtk.ListBoxRow

Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com>
---
 src/Library/demos/Drag and Drop/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index e2c65aee2..6f40876a7 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -30,7 +30,7 @@ for (let i = 0; i < list_length; i++) {
 
     allocation = row.get_allocation();
     let value = new GObject.Value();
-    value.init(GObject.TYPE_OBJECT);
+    value.init(Gtk.ListBoxRow);
     value.set_object(row);
     return Gdk.ContentProvider.new_for_value(value);
   });

From 973e634263fe976099632e54e75b18c23deee606 Mon Sep 17 00:00:00 2001
From: halfmexican <103920890+halfmexican@users.noreply.github.com>
Date: Wed, 31 May 2023 15:50:52 -0500
Subject: [PATCH 04/22] Update src/Library/demos/Drag and Drop/main.js

Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com>
---
 src/Library/demos/Drag and Drop/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 6f40876a7..bf1535883 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -42,8 +42,7 @@ for (let i = 0; i < list_length; i++) {
     drag_widget.set_size_request(allocation.width, allocation.height);
     drag_widget.add_css_class("boxed-list");
 
-    let drag_row = new Adw.ActionRow();
-    drag_row.title = row.title;
+    let drag_row = new Adw.ActionRow({ title: row.title });
     drag_row.add_css_class("boxed-list");
 
     drag_widget.append(drag_row);

From fea52f9c132848fadfd87de5a09c5db25336afb9 Mon Sep 17 00:00:00 2001
From: halfmexican <103920890+halfmexican@users.noreply.github.com>
Date: Wed, 31 May 2023 15:57:07 -0500
Subject: [PATCH 05/22] remove extra "add_css_class"

Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com>
---
 src/Library/demos/Drag and Drop/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index bf1535883..fa128fc9d 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -43,7 +43,6 @@ for (let i = 0; i < list_length; i++) {
     drag_widget.add_css_class("boxed-list");
 
     let drag_row = new Adw.ActionRow({ title: row.title });
-    drag_row.add_css_class("boxed-list");
 
     drag_widget.append(drag_row);
     drag_widget.drag_highlight_row(drag_row);

From 9ffecb2d0c495a0272ab62afd0abb0d1213712f2 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Wed, 31 May 2023 16:07:49 -0500
Subject: [PATCH 06/22] add entry description

---
 src/Library/demos/Drag and Drop/main.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.json b/src/Library/demos/Drag and Drop/main.json
index b5564f478..3f1e880c3 100644
--- a/src/Library/demos/Drag and Drop/main.json	
+++ b/src/Library/demos/Drag and Drop/main.json	
@@ -1,11 +1,7 @@
 {
   "name": "Drag and Drop",
   "category": "user_interface",
-  "description": "dnd",
-  "panels": [
-    "code",
-    "ui",
-    "preview"
-  ],
+  "description": "A User interaction pattern where users drag a UI element from one place to another",
+  "panels": ["code", "ui", "preview"],
   "autorun": false
 }

From 4cef352ff4dd162dc832139ecef44df561e7a725 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Wed, 31 May 2023 16:08:21 -0500
Subject: [PATCH 07/22] fix formatting errors and add link

---
 src/Library/demos/Drag and Drop/main.blp | 78 +++++++++++++-----------
 1 file changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp
index a2fd589a8..9589a5f63 100644
--- a/src/Library/demos/Drag and Drop/main.blp	
+++ b/src/Library/demos/Drag and Drop/main.blp	
@@ -3,62 +3,70 @@ using Adw 1;
 
 Adw.StatusPage {
   title: "Drag and Drop";
-  description: _("user interaction pattern where users drag a UI element from one place to another");
+  description: _("A User interaction pattern where users drag a UI element from one place to another");
 
   Box {
     orientation: vertical;
-    halign: center;
 
-    ListBox list {
-      styles ["boxed-list"]
+    Adw.Clamp {
+      maximum-size: 400;
 
-      Adw.ActionRow{
-        title: "row";
-        [prefix]
-        Image {
-          icon-name: "list-drag-handle-symbolic";
-        }
-      }
+      ListBox list {
+        styles ["boxed-list"]
+
+        Adw.ActionRow {
+          title: "row1";
 
-      Adw.ActionRow{
-        title: "row2";
-        [prefix]
-        Image {
-          icon-name: "list-drag-handle-symbolic";
+          [prefix]
+          Image {
+            icon-name: "list-drag-handle-symbolic";
+          }
         }
-      }
 
-      Adw.ActionRow{
-        title: "row3";
-        [prefix]
-        Image {
-          icon-name: "list-drag-handle-symbolic";
+        Adw.ActionRow {
+          title: "row2";
+
+          [prefix]
+          Image {
+            icon-name: "list-drag-handle-symbolic";
+          }
         }
-      }
 
-      Adw.ActionRow{
-        title: "row4";
-        [prefix]
-        Image {
-          icon-name: "list-drag-handle-symbolic";
+        Adw.ActionRow {
+          title: "row3";
+
+          [prefix]
+          Image {
+            icon-name: "list-drag-handle-symbolic";
+          }
         }
 
-      }
+        Adw.ActionRow {
+          title: "row4";
 
-      Adw.ActionRow{
-        title: "row5";
-        [prefix]
-        Image {
-          icon-name: "list-drag-handle-symbolic";
+          [prefix]
+          Image {
+            icon-name: "list-drag-handle-symbolic";
+          }
         }
 
+        Adw.ActionRow {
+          title: "row5";
+
+          [prefix]
+          Image {
+            icon-name: "list-drag-handle-symbolic";
+          }
+        }
       }
     }
 
     LinkButton {
       label: "API Reference";
-      uri: "";
+      uri: "https://docs.gtk.org/gtk4/drag-and-drop.html";
     }
   }
 }
 
+
+

From 80d466791be24721bc8e83b5c7d5044dfd79b8b7 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Wed, 31 May 2023 16:08:47 -0500
Subject: [PATCH 08/22] main.js: add requested changes

---
 src/Library/demos/Drag and Drop/main.js | 52 ++++++++++++++-----------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index fa128fc9d..0015d8906 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -5,54 +5,60 @@ import GObject from "gi://GObject";
 
 const list = workbench.builder.get_object("list");
 
-// Calculate the length of our ListBox
-let last_row = list.get_last_child();
-let list_length = last_row.get_index() + 1;
-
-// Create a Dragsource and DropTarget for each row
-for (let i = 0; i < list_length; i++) {
-  let row = list.get_row_at_index(i);
+// Iterate over ListBox children
+for (const row of list) {
   row.selectable = false;
   let _drag_x;
   let _drag_y;
 
-  let allocation;
-  const drag = new Gtk.DragSource();
-  const drop = Gtk.DropTarget.new(row.constructor.$gtype, Gdk.DragAction.COPY);
+  const drag_source = new Gtk.DragSource();
+  const drop_target = Gtk.DropTarget.new(
+    row.constructor.$gtype,
+    Gdk.DragAction.MOVE,
+  );
 
-  row.add_controller(drag);
-  row.add_controller(drop);
+  row.add_controller(drag_source);
+  row.add_controller(drop_target);
 
   // Drag controller
-  drag.connect("prepare", (source, _x, _y) => {
+  drag_source.connect("prepare", (source, _x, _y) => {
     _drag_x = _x;
     _drag_y = _y;
 
-    allocation = row.get_allocation();
-    let value = new GObject.Value();
+    const value = new GObject.Value();
     value.init(Gtk.ListBoxRow);
     value.set_object(row);
+
     return Gdk.ContentProvider.new_for_value(value);
   });
 
-  drag.connect("drag-begin", (drag) => {
-    list.remove(row);
-    row.set_state_flags(Gtk.StateFlags.DROP_ACTIVE, true);
-    let drag_widget = new Gtk.ListBox();
+  drag_source.connect("drag-begin", (_drag_source, drag) => {
+    const allocation = row.get_allocation();
+    const drag_widget = new Gtk.ListBox();
+
     drag_widget.set_size_request(allocation.width, allocation.height);
     drag_widget.add_css_class("boxed-list");
 
-    let drag_row = new Adw.ActionRow({ title: row.title });
+    const drag_row = new Adw.ActionRow({ title: row.title });
+    drag_row.add_prefix(
+      new Gtk.Image({ icon_name: "list-drag-handle-symbolic" }),
+    );
 
     drag_widget.append(drag_row);
     drag_widget.drag_highlight_row(drag_row);
 
-    let icon = Gtk.DragIcon.get_for_drag(drag.get_drag());
+    const icon = Gtk.DragIcon.get_for_drag(drag);
     icon.child = drag_widget;
+
+    drag.set_hotspot(_drag_x, _drag_y);
   });
 
   // Drop controller
-  drop.connect("drop", (drop, value, _x, _y) => {});
+  drop_target.connect("drop", (drop, value, _x, _y) => {
+    const value_row = value.get_object();
+    const target_index = list.get_row_at_y(_y).get_index() - 1;
 
-  drop.connect("enter", (_x, _y) => {});
+    list.remove(value_row);
+    list.insert(value_row, target_index);
+  });
 }

From d6a36fdd2764283902b0baf695b2b4f18cae368b Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Thu, 1 Jun 2023 21:31:04 -0500
Subject: [PATCH 09/22] Set drag_source actions to MOVE

---
 src/Library/demos/Drag and Drop/main.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 0015d8906..2ef312c59 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -11,7 +11,10 @@ for (const row of list) {
   let _drag_x;
   let _drag_y;
 
-  const drag_source = new Gtk.DragSource();
+  const drag_source = new Gtk.DragSource({
+    actions: Gdk.DragAction.MOVE,
+  });
+
   const drop_target = Gtk.DropTarget.new(
     row.constructor.$gtype,
     Gdk.DragAction.MOVE,
@@ -55,7 +58,7 @@ for (const row of list) {
 
   // Drop controller
   drop_target.connect("drop", (drop, value, _x, _y) => {
-    const value_row = value.get_object();
+    const value_row = value;
     const target_index = list.get_row_at_y(_y).get_index() - 1;
 
     list.remove(value_row);

From bd98980497a408dc44e4f7abc473325ccac4795e Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Sun, 4 Jun 2023 12:29:29 -0500
Subject: [PATCH 10/22] fix formatting

---
 src/Library/demos/Drag and Drop/main.blp | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp
index 9589a5f63..d360f0c6e 100644
--- a/src/Library/demos/Drag and Drop/main.blp	
+++ b/src/Library/demos/Drag and Drop/main.blp	
@@ -2,7 +2,7 @@ using Gtk 4.0;
 using Adw 1;
 
 Adw.StatusPage {
-  title: "Drag and Drop";
+  title: _("Drag and Drop");
   description: _("A User interaction pattern where users drag a UI element from one place to another");
 
   Box {
@@ -15,7 +15,7 @@ Adw.StatusPage {
         styles ["boxed-list"]
 
         Adw.ActionRow {
-          title: "row1";
+          title: _("Row 1");
 
           [prefix]
           Image {
@@ -24,7 +24,7 @@ Adw.StatusPage {
         }
 
         Adw.ActionRow {
-          title: "row2";
+          title: _("Row 2");
 
           [prefix]
           Image {
@@ -33,7 +33,7 @@ Adw.StatusPage {
         }
 
         Adw.ActionRow {
-          title: "row3";
+          title: _("Row 3");
 
           [prefix]
           Image {
@@ -42,7 +42,7 @@ Adw.StatusPage {
         }
 
         Adw.ActionRow {
-          title: "row4";
+          title: _("Row 4");
 
           [prefix]
           Image {
@@ -51,7 +51,7 @@ Adw.StatusPage {
         }
 
         Adw.ActionRow {
-          title: "row5";
+          title: _("Row 5");
 
           [prefix]
           Image {

From 70235a01fbb475e6d69efc7cbda72fc23611fdf1 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Sun, 4 Jun 2023 12:29:46 -0500
Subject: [PATCH 11/22] Move DropTarget to listbox

---
 src/Library/demos/Drag and Drop/main.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 2ef312c59..08acad377 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -4,6 +4,9 @@ import Gdk from "gi://Gdk";
 import GObject from "gi://GObject";
 
 const list = workbench.builder.get_object("list");
+const drop_target = Gtk.DropTarget.new(Gtk.ListBoxRow, Gdk.DragAction.MOVE);
+
+list.add_controller(drop_target);
 
 // Iterate over ListBox children
 for (const row of list) {
@@ -15,13 +18,7 @@ for (const row of list) {
     actions: Gdk.DragAction.MOVE,
   });
 
-  const drop_target = Gtk.DropTarget.new(
-    row.constructor.$gtype,
-    Gdk.DragAction.MOVE,
-  );
-
   row.add_controller(drag_source);
-  row.add_controller(drop_target);
 
   // Drag controller
   drag_source.connect("prepare", (source, _x, _y) => {
@@ -55,13 +52,13 @@ for (const row of list) {
 
     drag.set_hotspot(_drag_x, _drag_y);
   });
+}
 
-  // Drop controller
-  drop_target.connect("drop", (drop, value, _x, _y) => {
-    const value_row = value;
-    const target_index = list.get_row_at_y(_y).get_index() - 1;
+// Drop controller
+drop_target.connect("drop", (drop, value, _x, _y) => {
+  const value_row = value;
+  const target_index = list.get_row_at_y(_y).get_index() - 1;
 
-    list.remove(value_row);
-    list.insert(value_row, target_index);
-  });
-}
+  list.remove(value_row);
+  list.insert(value_row, target_index);
+});

From 24cbdec9324f91249935fbfdfaeb67bd454f7bf0 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Sun, 4 Jun 2023 13:24:18 -0500
Subject: [PATCH 12/22] add margins

---
 src/Library/demos/Drag and Drop/main.blp | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp
index d360f0c6e..dd2bc9135 100644
--- a/src/Library/demos/Drag and Drop/main.blp	
+++ b/src/Library/demos/Drag and Drop/main.blp	
@@ -64,6 +64,7 @@ Adw.StatusPage {
     LinkButton {
       label: "API Reference";
       uri: "https://docs.gtk.org/gtk4/drag-and-drop.html";
+      margin-top: 24;
     }
   }
 }

From 48fe7b4b7d14d9abcf7cdbe3bd2127c47f891d27 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Sun, 4 Jun 2023 13:24:28 -0500
Subject: [PATCH 13/22] fix index

---
 src/Library/demos/Drag and Drop/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 08acad377..d4c6df0ac 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -57,7 +57,7 @@ for (const row of list) {
 // Drop controller
 drop_target.connect("drop", (drop, value, _x, _y) => {
   const value_row = value;
-  const target_index = list.get_row_at_y(_y).get_index() - 1;
+  const target_index = list.get_row_at_y(_y).get_index();
 
   list.remove(value_row);
   list.insert(value_row, target_index);

From eaf70e36ad15339eccb5d15c67c146aa613afb9c Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Mon, 5 Jun 2023 17:59:22 -0500
Subject: [PATCH 14/22] add dim label style class

---
 src/Library/demos/Drag and Drop/main.blp | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp
index dd2bc9135..2f2a1dba4 100644
--- a/src/Library/demos/Drag and Drop/main.blp	
+++ b/src/Library/demos/Drag and Drop/main.blp	
@@ -19,6 +19,7 @@ Adw.StatusPage {
 
           [prefix]
           Image {
+            styles ["dim-label"]
             icon-name: "list-drag-handle-symbolic";
           }
         }
@@ -28,6 +29,7 @@ Adw.StatusPage {
 
           [prefix]
           Image {
+            styles ["dim-label"]
             icon-name: "list-drag-handle-symbolic";
           }
         }
@@ -37,6 +39,7 @@ Adw.StatusPage {
 
           [prefix]
           Image {
+            styles ["dim-label"]
             icon-name: "list-drag-handle-symbolic";
           }
         }
@@ -46,6 +49,7 @@ Adw.StatusPage {
 
           [prefix]
           Image {
+            styles ["dim-label"]
             icon-name: "list-drag-handle-symbolic";
           }
         }
@@ -55,6 +59,7 @@ Adw.StatusPage {
 
           [prefix]
           Image {
+            styles ["dim-label"]
             icon-name: "list-drag-handle-symbolic";
           }
         }

From d0474f18b5ec68e874dafced32c83f9451335815 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Mon, 5 Jun 2023 18:00:07 -0500
Subject: [PATCH 15/22] add drag highlight

---
 src/Library/demos/Drag and Drop/main.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index d4c6df0ac..95eb124e7 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -14,13 +14,16 @@ for (const row of list) {
   let _drag_x;
   let _drag_y;
 
+  const drop_controller = new Gtk.DropControllerMotion();
+
   const drag_source = new Gtk.DragSource({
     actions: Gdk.DragAction.MOVE,
   });
 
   row.add_controller(drag_source);
+  row.add_controller(drop_controller);
 
-  // Drag controller
+  // Drag handling
   drag_source.connect("prepare", (source, _x, _y) => {
     _drag_x = _x;
     _drag_y = _y;
@@ -52,13 +55,24 @@ for (const row of list) {
 
     drag.set_hotspot(_drag_x, _drag_y);
   });
+
+  drop_controller.connect("enter", (_x, _y) => {
+    row.set_state_flags(Gtk.StateFlags.DROP_ACTIVE, false);
+  });
+
+  drop_controller.connect("leave", (_x, _y) => {
+    row.set_state_flags(Gtk.StateFlags.NORMAL, true);
+  });
 }
 
-// Drop controller
+// Drop Handling
 drop_target.connect("drop", (drop, value, _x, _y) => {
   const value_row = value;
   const target_index = list.get_row_at_y(_y).get_index();
+  const target_row = list.get_row_at_index(target_index);
 
+  target_row.remove_css_class("drop-enter");
   list.remove(value_row);
   list.insert(value_row, target_index);
+  target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
 });

From fd70c1a2a8be90eb7a76bf6e6aa6e80c9dbfb0ae Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Mon, 5 Jun 2023 18:03:22 -0500
Subject: [PATCH 16/22] remove css

---
 src/Library/demos/Drag and Drop/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 95eb124e7..418c4f34e 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -10,7 +10,7 @@ list.add_controller(drop_target);
 
 // Iterate over ListBox children
 for (const row of list) {
-  row.selectable = false;
+  //row.selectable = false;
   let _drag_x;
   let _drag_y;
 
@@ -71,7 +71,6 @@ drop_target.connect("drop", (drop, value, _x, _y) => {
   const target_index = list.get_row_at_y(_y).get_index();
   const target_row = list.get_row_at_index(target_index);
 
-  target_row.remove_css_class("drop-enter");
   list.remove(value_row);
   list.insert(value_row, target_index);
   target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);

From 7cc9822a00ff6cd42e0db2d971f9cbf73bc00144 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Mon, 5 Jun 2023 18:09:24 -0500
Subject: [PATCH 17/22] add hover effect

---
 src/Library/demos/Drag and Drop/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 418c4f34e..d8e812ec6 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -10,7 +10,6 @@ list.add_controller(drop_target);
 
 // Iterate over ListBox children
 for (const row of list) {
-  //row.selectable = false;
   let _drag_x;
   let _drag_y;
 

From 9b47536488db2cc3079a84cdc90236b865ca8a89 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Tue, 6 Jun 2023 13:07:10 -0500
Subject: [PATCH 18/22] main.js: add boolean return value to "drop" signal

---
 src/Library/demos/Drag and Drop/main.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index d8e812ec6..f150f31dd 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -70,7 +70,15 @@ drop_target.connect("drop", (drop, value, _x, _y) => {
   const target_index = list.get_row_at_y(_y).get_index();
   const target_row = list.get_row_at_index(target_index);
 
+  // If value or the target row is null, do not accept the drop
+  if (!value || !target_row) {
+    return false;
+  }
+
   list.remove(value_row);
   list.insert(value_row, target_index);
   target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
+
+  // If everything is successful, return true to accept the drop
+  return true;
 });

From 494acdf4cd1a75762fad9ab58d3ea9205bd8359c Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Tue, 6 Jun 2023 13:14:04 -0500
Subject: [PATCH 19/22] add dim label to drag row

---
 src/Library/demos/Drag and Drop/main.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index f150f31dd..a713dae65 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -43,7 +43,10 @@ for (const row of list) {
 
     const drag_row = new Adw.ActionRow({ title: row.title });
     drag_row.add_prefix(
-      new Gtk.Image({ icon_name: "list-drag-handle-symbolic" }),
+      new Gtk.Image({
+        icon_name: "list-drag-handle-symbolic",
+        css_classes: "dim-label",
+      }),
     );
 
     drag_widget.append(drag_row);
@@ -55,6 +58,7 @@ for (const row of list) {
     drag.set_hotspot(_drag_x, _drag_y);
   });
 
+  // Update row visuals during DnD operation
   drop_controller.connect("enter", (_x, _y) => {
     row.set_state_flags(Gtk.StateFlags.DROP_ACTIVE, false);
   });

From 2fe3c9f641fb8240ef734cfc55dcea3a5938d4ad Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Tue, 6 Jun 2023 13:16:09 -0500
Subject: [PATCH 20/22] change str to strv

---
 src/Library/demos/Drag and Drop/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index a713dae65..ebf442778 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -45,7 +45,7 @@ for (const row of list) {
     drag_row.add_prefix(
       new Gtk.Image({
         icon_name: "list-drag-handle-symbolic",
-        css_classes: "dim-label",
+        css_classes: ["dim-label"],
       }),
     );
 

From 5b5b0812c5512c62e386308aaf406dc8514c6fc7 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Tue, 6 Jun 2023 21:20:57 -0500
Subject: [PATCH 21/22] Use drag_highlight methods and fix callback args

---
 src/Library/demos/Drag and Drop/main.js | 39 +++++++++++++------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index ebf442778..79518bdf1 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -10,8 +10,8 @@ list.add_controller(drop_target);
 
 // Iterate over ListBox children
 for (const row of list) {
-  let _drag_x;
-  let _drag_y;
+  let drag_x;
+  let drag_y;
 
   const drop_controller = new Gtk.DropControllerMotion();
 
@@ -23,9 +23,9 @@ for (const row of list) {
   row.add_controller(drop_controller);
 
   // Drag handling
-  drag_source.connect("prepare", (source, _x, _y) => {
-    _drag_x = _x;
-    _drag_y = _y;
+  drag_source.connect("prepare", (_source, x, y) => {
+    drag_x = x;
+    drag_y = y;
 
     const value = new GObject.Value();
     value.init(Gtk.ListBoxRow);
@@ -34,7 +34,7 @@ for (const row of list) {
     return Gdk.ContentProvider.new_for_value(value);
   });
 
-  drag_source.connect("drag-begin", (_drag_source, drag) => {
+  drag_source.connect("drag-begin", (_source, drag) => {
     const allocation = row.get_allocation();
     const drag_widget = new Gtk.ListBox();
 
@@ -55,33 +55,36 @@ for (const row of list) {
     const icon = Gtk.DragIcon.get_for_drag(drag);
     icon.child = drag_widget;
 
-    drag.set_hotspot(_drag_x, _drag_y);
+    drag.set_hotspot(drag_x, drag_y);
   });
 
   // Update row visuals during DnD operation
-  drop_controller.connect("enter", (_x, _y) => {
-    row.set_state_flags(Gtk.StateFlags.DROP_ACTIVE, false);
+  drop_controller.connect("enter", () => {
+    list.drag_highlight_row(row);
   });
 
-  drop_controller.connect("leave", (_x, _y) => {
-    row.set_state_flags(Gtk.StateFlags.NORMAL, true);
+  drop_controller.connect("leave", () => {
+    list.drag_unhighlight_row();
   });
 }
 
 // Drop Handling
-drop_target.connect("drop", (drop, value, _x, _y) => {
-  const value_row = value;
-  const target_index = list.get_row_at_y(_y).get_index();
-  const target_row = list.get_row_at_index(target_index);
+drop_target.connect("drop", (_drop, value, _x, y) => {
+  const target_row = list.get_row_at_y(y);
+  const target_index = target_row.get_index();
 
   // If value or the target row is null, do not accept the drop
   if (!value || !target_row) {
     return false;
   }
 
-  list.remove(value_row);
-  list.insert(value_row, target_index);
-  target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
+  try {
+    list.remove(value);
+    list.insert(value, target_index);
+    target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
+  } catch (error) {
+    return false;
+  }
 
   // If everything is successful, return true to accept the drop
   return true;

From 65a18dc9aebca81cf0b61f3764565aa7a0a3b2f7 Mon Sep 17 00:00:00 2001
From: halfmexican <halfmexicanhalfamazing@gmail.com>
Date: Tue, 6 Jun 2023 21:22:27 -0500
Subject: [PATCH 22/22] remove try catch

---
 src/Library/demos/Drag and Drop/main.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js
index 79518bdf1..ce96fe0a6 100644
--- a/src/Library/demos/Drag and Drop/main.js	
+++ b/src/Library/demos/Drag and Drop/main.js	
@@ -78,13 +78,9 @@ drop_target.connect("drop", (_drop, value, _x, y) => {
     return false;
   }
 
-  try {
-    list.remove(value);
-    list.insert(value, target_index);
-    target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
-  } catch (error) {
-    return false;
-  }
+  list.remove(value);
+  list.insert(value, target_index);
+  target_row.set_state_flags(Gtk.StateFlags.NORMAL, true);
 
   // If everything is successful, return true to accept the drop
   return true;