From 7a97d978f5346d53c0bb3ff03443b91882713815 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Sun, 28 Sep 2025 11:06:40 +0200
Subject: [PATCH] Rename columns

---
 .../collections/columns_controller.rb         | 11 +++++---
 .../controllers/clicker_controller.js         | 11 ++++++++
 .../controllers/dialog_controller.js          |  6 ++---
 app/views/collections/show/_column.html.erb   | 15 ++++++++++-
 app/views/collections/show/_columns.html.erb  |  2 +-
 app/views/collections/show/_expander.html.erb | 27 +++++--------------
 .../collections/show/menu/_column.html.erb    | 22 +++++++++++++++
 .../_columns.html.erb}                        |  0
 8 files changed, 66 insertions(+), 28 deletions(-)
 create mode 100644 app/javascript/controllers/clicker_controller.js
 create mode 100644 app/views/collections/show/menu/_column.html.erb
 rename app/views/collections/show/{_columns_menu.html.erb => menu/_columns.html.erb} (100%)

diff --git a/app/controllers/collections/columns_controller.rb b/app/controllers/collections/columns_controller.rb
index 8fe6a796b..f9a746d41 100644
--- a/app/controllers/collections/columns_controller.rb
+++ b/app/controllers/collections/columns_controller.rb
@@ -1,11 +1,16 @@
 class Collections::ColumnsController < ApplicationController
-  include CollectionScoped
+  include ActionView::RecordIdentifier, CollectionScoped
 
-  before_action :set_column, only: :show
+  before_action :set_column, only: [:show, :update]
 
   def create
     @column = @collection.columns.create!(column_params)
-    render turbo_stream: turbo_stream.before("closed-cards", partial: "collections/show/column", locals: { column: @column })
+    render turbo_stream: turbo_stream.before("closed-cards", partial: "collections/show/column", method: :morph, locals: { column: @column })
+  end
+
+  def update
+    @column.update!(column_params)
+    render turbo_stream: turbo_stream.replace(dom_id(@column), partial: "collections/show/column", method: :morph, locals: { column: @column })
   end
 
   def show
diff --git a/app/javascript/controllers/clicker_controller.js b/app/javascript/controllers/clicker_controller.js
new file mode 100644
index 000000000..d09cb9ede
--- /dev/null
+++ b/app/javascript/controllers/clicker_controller.js
@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+import { nextFrame } from "helpers/timing_helpers";
+
+export default class extends Controller {
+  static targets = [ "clickable" ]
+
+  async click() {
+    await nextFrame()
+    this.clickableTarget.click()
+  }
+}
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 9341f4c25..44876b231 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -8,7 +8,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.dialogTarget.setAttribute('aria-hidden', 'true')
+    this.dialogTarget.setAttribute("aria-hidden", "true")
   }
 
   open() {
@@ -21,7 +21,7 @@ export default class extends Controller {
       orient(this.dialogTarget)
     }
 
-    this.dialogTarget.setAttribute('aria-hidden', 'false')
+    this.dialogTarget.setAttribute("aria-hidden", "false")
     this.dispatch("show")
   }
 
@@ -35,7 +35,7 @@ export default class extends Controller {
 
   close() {
     this.dialogTarget.close()
-    this.dialogTarget.setAttribute('aria-hidden', 'true')
+    this.dialogTarget.setAttribute("aria-hidden", "true")
     this.dialogTarget.blur()
     orient(this.dialogTarget, false)
   }
diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb
index 1e21449fb..421343d58 100644
--- a/app/views/collections/show/_column.html.erb
+++ b/app/views/collections/show/_column.html.erb
@@ -3,10 +3,23 @@
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"
   data-collapsible-columns-target="column"
+  data-controller="clicker"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
   data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
 >
-  <%= render "collections/show/expander", title: column.name, count: column.cards.active.count %>
+  <%= render "collections/show/expander", title: column.name, count: column.cards.active.count do %>
+    <%= render "collections/show/menu/column", column: column %>
+  <% end %>
+
+  <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
+    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+      <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
+        <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
+        <%= form.submit "Rename column", class: "btn btn--link" %>
+      <% end %>
+    </dialog>
+  </div>
 
   <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %>
 </section>
diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb
index 267a7a5c0..e4c872b50 100644
--- a/app/views/collections/show/_columns.html.erb
+++ b/app/views/collections/show/_columns.html.erb
@@ -11,7 +11,7 @@
       <%= render partial: "collections/show/column", collection: collection.columns, cached: true %>
       <%= render "collections/show/closed", collection: collection %>
 
-      <%= render  "collections/show/columns_menu", collection: collection %>
+      <%= render  "collections/show/menu/columns", collection: collection %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/collections/show/_expander.html.erb b/app/views/collections/show/_expander.html.erb
index d046ae528..b8e94cac3 100644
--- a/app/views/collections/show/_expander.html.erb
+++ b/app/views/collections/show/_expander.html.erb
@@ -1,20 +1,7 @@
-<header class="cards__expander" data-action="click->collapsible-columns#toggle" style="--card-count: <%= [count, 20].min %>" aria-role="button">
-  <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
-  <h2 class="cards__expander-title"><%= title %></h2>
-  <div class="cards__expander-menu position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-    <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop">
-      <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
-      <span class="for-screen-reader">Column options</span>
-    </button>
-    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
-      <ul class="popup__list">
-        <li class="popup__item">
-          <button class="popup__btn btn">Rename column</button>
-        </li>
-        <li class="popup__item">
-          <button class="popup__btn btn">Delete column</button>
-        </li>
-      </ul>
-    </dialog>
-  </div>
-</header>
\ No newline at end of file
+<div>
+  <header class="cards__expander" data-action="click->collapsible-columns#toggle" style="--card-count: <%= [count, 20].min %>" aria-role="button">
+    <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
+    <h2 class="cards__expander-title"><%= title %></h2>
+  </header>
+  <%= yield if block_given? %>
+</div>
diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
new file mode 100644
index 000000000..bc0484dd7
--- /dev/null
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -0,0 +1,22 @@
+<div class="cards__expander-menu position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open">
+    <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
+    <span class="for-screen-reader">Column options</span>
+  </button>
+  <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+    <ul class="popup__list">
+      <li class="popup__item">
+        <button class="popup__btn btn" data-action="click->clicker#click">Rename column</button>
+        <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+          <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
+            <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
+            <%= form.submit "Rename column", class: "btn btn--link" %>
+          <% end %>
+        </dialog>
+      </li>
+      <li class="popup__item">
+        <button class="popup__btn btn">Delete column</button>
+      </li>
+    </ul>
+  </dialog>
+</div>
\ No newline at end of file
diff --git a/app/views/collections/show/_columns_menu.html.erb b/app/views/collections/show/menu/_columns.html.erb
similarity index 100%
rename from app/views/collections/show/_columns_menu.html.erb
rename to app/views/collections/show/menu/_columns.html.erb