From 5c23e962eb11b9ecff4e0b2f984ac72343520c0b Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Tue, 30 Sep 2025 08:33:56 +0200
Subject: [PATCH] Extract partial for column form and add HTML5 blank
 validation

https://fizzy.37signals.com/5986089/cards/2046/edit
---
 app/views/collections/show/menu/_column.html.erb      | 11 +----------
 app/views/collections/show/menu/_column_form.html.erb |  5 +++++
 app/views/collections/show/menu/_columns.html.erb     |  5 +----
 3 files changed, 7 insertions(+), 14 deletions(-)
 create mode 100644 app/views/collections/show/menu/_column_form.html.erb

diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
index 9b27bc2a0..2b5f0b4db 100644
--- a/app/views/collections/show/menu/_column.html.erb
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -7,12 +7,6 @@
     <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, autocomplete: "off" %>
-            <%= form.submit "Rename column", class: "btn btn--link" %>
-          <% end %>
-        </dialog>
       </li>
       <li class="popup__item">
         <%= button_to "Delete column", collection_column_path(column.collection, column),
@@ -27,10 +21,7 @@
   <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-half 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 %>
+      <%= render "collections/show/menu/column_form", collection: column.collection, column: column %>
     </dialog>
   </div>
 </div>
diff --git a/app/views/collections/show/menu/_column_form.html.erb b/app/views/collections/show/menu/_column_form.html.erb
new file mode 100644
index 000000000..84a3bc731
--- /dev/null
+++ b/app/views/collections/show/menu/_column_form.html.erb
@@ -0,0 +1,5 @@
+<%= form_with model: [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, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank" %>
+  <%= form.submit "Rename column", class: "btn btn--link" %>
+<% end %>
diff --git a/app/views/collections/show/menu/_columns.html.erb b/app/views/collections/show/menu/_columns.html.erb
index 0acc0e952..881c8448b 100644
--- a/app/views/collections/show/menu/_columns.html.erb
+++ b/app/views/collections/show/menu/_columns.html.erb
@@ -3,9 +3,6 @@
     <%= icon_tag "add", class: "translucent", "aria-hidden": true %>
   </button>
   <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
-    <%= form_with model: [ collection, Column.new ], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
-      <%= form.text_field :name, class: "input", placeholder: "Column name", required: true, autocomplete: "off" %>
-      <%= form.submit "Add a column", class: "btn btn--link" %>
-    <% end %>
+    <%= render "collections/show/menu/column_form", collection: collection, column: Column.new %>
   </dialog>
 </div>