More fidelity for D&D cards

- Reload source frame with morphing. E.g: to deal with pagination or with the D&D placeholder
- Decrease source counter with JS

app/javascript/application.js

@@ -6,4 +6,3 @@ import "controllers"
 import "lexxy"
 import "@rails/actiontext"
 
-window.fetch = Turbo.fetch // TODO: We need to make @rails/request.js use Turbo's fetch when it's present.

app/javascript/controllers/drag_and_drop_controller.js

@@ -37,8 +37,10 @@ export default class extends Controller {
     if (!container || container === this.sourceContainer) { return }
 
     this.wasDropped = true
-
+    this.#decreaseCounter(this.sourceContainer)
+    const sourceContainer = this.sourceContainer
     await this.#submitDropRequest(this.dragItem, container)
+    this.#reloadSourceFrame(sourceContainer);
   }
 
   dragEnd() {
@@ -66,8 +68,6 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
-  // Private
-
   async #submitDropRequest(item, container) {
     const body = new FormData()
     const id = item.dataset.id
@@ -75,4 +75,31 @@ export default class extends Controller {
 
     return post(url, { body, headers: { Accept: "text/vnd.turbo-stream.html" } })
   }
+
+  #reloadSourceFrame(sourceContainer) {
+    const frame = sourceContainer.querySelector("[data-drag-and-drop-refresh]")
+    if (frame) {
+      frame.addEventListener("turbo:before-frame-render", ({ detail }) => {
+        detail.render = function (currentElement, newElement) {
+          Turbo.morphChildren(currentElement, newElement)
+        }
+      }, { once: true })
+
+      frame.reload()
+    }
+  }
+
+  #decreaseCounter(sourceContainer) {
+    const counterElement = sourceContainer.querySelector("[data-drag-and-drop-counter]")
+    if (counterElement) {
+      const currentValue = counterElement.textContent.trim()
+
+      if (!/^\d+$/.test(currentValue)) return
+
+      const count = parseInt(currentValue)
+      if (count > 0) {
+        counterElement.textContent = count - 1
+      }
+    }
+  }
 }