From 539d3721dbaf85878033540e03195a0b25c45f02 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Thu, 4 Dec 2025 18:13:17 +0100
Subject: [PATCH] Keep the column color when D&D cards

---
 app/helpers/columns_helper.rb                 |  6 ++--
 .../controllers/drag_and_drop_controller.js   | 33 +++++++++++++++++++
 app/views/boards/show/_column.html.erb        |  3 +-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb
index 8a2e82e17..26a202e06 100644
--- a/app/helpers/columns_helper.rb
+++ b/app/helpers/columns_helper.rb
@@ -10,14 +10,16 @@ module ColumnsHelper
       data: { turbo_frame: "_top" }
   end
 
-  def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, data: {}, **properties, &block)
+  def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, card_color: "var(--color-card-default)", data: {}, **properties, &block)
     classes = token_list("cards", properties.delete(:class), "is-collapsed": collapsed)
 
     data = {
       drag_and_drop_target: "container",
       navigable_list_target: "item",
       column_name: name,
-      drag_and_drop_url: drop_url
+      drag_and_drop_url: drop_url,
+      drag_and_drop_css_variable_name: "--card-color",
+      drag_and_drop_css_variable_value: card_color
     }.merge(data)
 
     data[:action] = token_list(
diff --git a/app/javascript/controllers/drag_and_drop_controller.js b/app/javascript/controllers/drag_and_drop_controller.js
index 8c75b1ad2..88ad31ba2 100644
--- a/app/javascript/controllers/drag_and_drop_controller.js
+++ b/app/javascript/controllers/drag_and_drop_controller.js
@@ -16,11 +16,14 @@ export default class extends Controller {
     await nextFrame()
     this.dragItem = this.#itemContaining(event.target)
     this.sourceContainer = this.#containerContaining(this.dragItem)
+    this.originalDraggedItemCssVariable = this.#containerCssVariableFor(this.sourceContainer)
     this.dragItem.classList.add(this.draggedItemClass)
   }
 
   dragOver(event) {
     event.preventDefault()
+    if (!this.dragItem) { return }
+
     const container = this.#containerContaining(event.target)
     this.#clearContainerHoverClasses()
 
@@ -28,6 +31,9 @@ export default class extends Controller {
 
     if (container !== this.sourceContainer) {
       container.classList.add(this.hoverContainerClass)
+      this.#applyContainerCssVariable(container)
+    } else {
+      this.#restoreOriginalDraggedItemCssVariable()
     }
   }
 
@@ -50,9 +56,14 @@ export default class extends Controller {
     this.dragItem.classList.remove(this.draggedItemClass)
     this.#clearContainerHoverClasses()
 
+    if (!this.wasDropped) {
+      this.#restoreOriginalDraggedItemCssVariable()
+    }
+
     this.sourceContainer = null
     this.dragItem = null
     this.wasDropped = false
+    this.originalDraggedItemCssVariable = null
   }
 
   #itemContaining(element) {
@@ -67,6 +78,28 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
+  #applyContainerCssVariable(container) {
+    const cssVariable = this.#containerCssVariableFor(container)
+    if (cssVariable) {
+      this.dragItem.style.setProperty(cssVariable.name, cssVariable.value)
+    }
+  }
+
+  #restoreOriginalDraggedItemCssVariable() {
+    if (this.originalDraggedItemCssVariable) {
+      const { name, value } = this.originalDraggedItemCssVariable
+      this.dragItem.style.setProperty(name, value)
+    }
+  }
+
+  #containerCssVariableFor(container) {
+    const { dragAndDropCssVariableName, dragAndDropCssVariableValue } = container.dataset
+    if (dragAndDropCssVariableName && dragAndDropCssVariableValue) {
+      return { name: dragAndDropCssVariableName, value: dragAndDropCssVariableValue }
+    }
+    return null
+  }
+
   #increaseCounter(container) {
     this.#modifyCounter(container, count => count + 1)
   }
diff --git a/app/views/boards/show/_column.html.erb b/app/views/boards/show/_column.html.erb
index 35beb5338..b5bba3339 100644
--- a/app/views/boards/show/_column.html.erb
+++ b/app/views/boards/show/_column.html.erb
@@ -1,4 +1,5 @@
-<%= column_tag id: dom_id(column), name: column.name, drop_url: columns_card_drops_column_path("__id__", column_id: column.id), class: "cards--doing", style: "--card-color: #{column.color};",
+<%= column_tag id: dom_id(column), name: column.name, drop_url: columns_card_drops_column_path("__id__", column_id: column.id), card_color: column.color.to_s,
+      class: "cards--doing", style: "--card-color: #{column.color};",
   data: {
     drag_and_strum_target: "container",
     collapsible_columns_target: "column",