Append dropped cards instantly instead of relying on server-side rendering to refresh the columns

This also replaces sorting by "created at" with sorting by "updated at" for the Not now column. Cards will
drop at the top by default, respecting golden cards.

Author: jorgemanrubia

app/assets/stylesheets/card-columns.css

@@ -426,6 +426,10 @@
     }
   }
 
+  .cards__list:has(> :not(.blank-slate--card)) .card--hide-unless-empty {
+    display: none;
+  }
+
   /* TODO: I think this is legacy now? */
   .cards__heading {
     display: flex;

app/controllers/boards/columns/not_nows_controller.rb

@@ -2,7 +2,7 @@ class Boards::Columns::NotNowsController < ApplicationController
   include BoardScoped
 
   def show
-    set_page_and_extract_portion_from @board.cards.postponed.reverse_chronologically.with_golden_first.preloaded
+    set_page_and_extract_portion_from @board.cards.postponed.latest.preloaded
     fresh_when etag: @page.records
   end
 end

app/controllers/public/boards/columns/not_nows_controller.rb

@@ -1,5 +1,5 @@
 class Public::Boards::Columns::NotNowsController < Public::BaseController
   def show
-    set_page_and_extract_portion_from @board.cards.postponed.reverse_chronologically.with_golden_first
+    set_page_and_extract_portion_from @board.cards.postponed.latest
   end
 end

app/helpers/cards_helper.rb

@@ -1,16 +1,19 @@
 module CardsHelper
-  def card_article_tag(card, id: dom_id(card, :article), **options, &block)
+  def card_article_tag(card, id: dom_id(card, :article), data: {}, **options, &block)
     classes = [
       options.delete(:class),
       ("golden-effect" if card.golden?),
       ("card--postponed" if card.postponed?),
       ("card--active" if card.active?)
     ].compact.join(" ")
 
+    data[:drag_and_drop_top] = true if card.golden? && !card.closed? && !card.postponed?
+
     tag.article \
       id: id,
       style: "--card-color: #{card.color}; view-transition-name: #{id}",
       class: classes,
+      data: data,
       **options,
       &block
   end

app/javascript/controllers/drag_and_drop_controller.js

@@ -39,6 +39,7 @@ export default class extends Controller {
     this.wasDropped = true
     this.#decreaseCounter(this.sourceContainer)
     const sourceContainer = this.sourceContainer
+    this.#insertDraggedItem(container, this.dragItem)
     await this.#submitDropRequest(this.dragItem, container)
     this.#reloadSourceFrame(sourceContainer);
   }
@@ -47,10 +48,6 @@ export default class extends Controller {
     this.dragItem.classList.remove(this.draggedItemClass)
     this.#clearContainerHoverClasses()
 
-    if (this.wasDropped) {
-      this.dragItem.remove()
-    }
-
     this.sourceContainer = null
     this.dragItem = null
     this.wasDropped = false
@@ -68,19 +65,6 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
-  async #submitDropRequest(item, container) {
-    const body = new FormData()
-    const id = item.dataset.id
-    const url = container.dataset.dragAndDropUrl.replaceAll("__id__", id)
-
-    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.reload()
-  }
-
   #decreaseCounter(sourceContainer) {
     const counterElement = sourceContainer.querySelector("[data-drag-and-drop-counter]")
     if (counterElement) {
@@ -94,4 +78,30 @@ export default class extends Controller {
       }
     }
   }
+
+  #insertDraggedItem(container, item) {
+    const itemContainer = container.querySelector("[data-drag-drop-item-container]")
+    const topItems = itemContainer.querySelectorAll("[data-drag-and-drop-top]")
+    const lastTopItem = topItems[topItems.length - 1]
+
+    if (lastTopItem) {
+      console.debug("INSERTING AFTER", lastTopItem);
+      lastTopItem.after(item)
+    } else {
+      itemContainer.prepend(item)
+    }
+  }
+
+  async #submitDropRequest(item, container) {
+    const body = new FormData()
+    const id = item.dataset.id
+    const url = container.dataset.dragAndDropUrl.replaceAll("__id__", id)
+
+    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.reload()
+  }
 }

app/views/boards/columns/_empty_placeholder.html.erb

@@ -0,0 +1,6 @@
+<div class="cards__list" data-drag-drop-item-container>
+  <div class="card blank-slate blank-slate--card card--hide-unless-empty">
+    <p class="txt-align-center card--hide-unless-empty">Drag cards here</p>
+    <p class="txt-align-center blank-slate-for-grid card--hide-unless-empty">Nothing here</p>
+  </div>
+</div>

app/views/boards/columns/_list.html.erb

@@ -1,3 +1,3 @@
-<div class="cards__list">
+<div class="cards__list" data-drag-drop-item-container >
   <%= render "cards/display/previews", cards: cards, draggable: draggable %>
 </div>

app/views/boards/columns/closeds/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>

app/views/boards/columns/not_nows/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>

app/views/boards/columns/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>