From 2217a92651ec0a54650096674c91afcf3e45a5c8 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 22 Sep 2025 19:36:54 -0500
Subject: [PATCH] Simpler add a column button

---
 app/assets/stylesheets/card-columns.css         | 17 +++++++++++++++--
 app/views/cards/index/_add_card_button.html.erb | 17 +++++++++++++----
 app/views/cards/index/_columns.html.erb         |  5 -----
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 8c84f7bbd..ad0227d67 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -172,7 +172,7 @@
     }
 
     .progress {
-      --max-height: 480px;
+      --max-height: 540px;
 
       background-color: var(--column-color);
       border-radius: 0 0 2em 2em;
@@ -425,12 +425,25 @@
           margin-block-start: 0.1em;
         }
 
-        &:not(.btn--link) {
+        &:not(.btn--link, .btn--circle) {
           border: 0;
           color: var(--color-link);
         }
       }
 
+      .column--new {
+        position: relative;
+
+        &:after {
+          border-inline-start: 1px solid var(--color-ink-light);
+          content: "";
+          block-size: calc(var(--btn-size) * 0.5);
+          inset: var(--btn-size) 0 0 0;
+          position: absolute;
+          transform: translateX(50%);
+        }
+      }
+
       footer {
         font-size: var(--text-x-small);
         margin-block-end: calc(var(--block-space-half) * -1);
diff --git a/app/views/cards/index/_add_card_button.html.erb b/app/views/cards/index/_add_card_button.html.erb
index a8de2f165..83829af0d 100644
--- a/app/views/cards/index/_add_card_button.html.erb
+++ b/app/views/cards/index/_add_card_button.html.erb
@@ -1,9 +1,18 @@
 <% if collection = user_filtering.single_collection %>
   <div class="card card--new flex flex-column gap-half">
-    <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } } do %>
-      <%= icon_tag "add" %>
-      <span>Add a card</span>
-    <% end %>
+    <div class="flex align-center gap justify-space-between">
+      <div class="btn btn--circle txt-x-small" style="visibility: hidden"><!-- layout placeholder --></div>
+
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } } do %>
+        <%= icon_tag "add" %>
+        <span>Add a card</span>
+      <% end %>
+
+      <button class="btn btn--circle txt-x-small column--new" style="margin-block: var(--cards-gap);">
+        <%= icon_tag "add" %>
+        <span class="for-screen-reader">Add a new column</span>
+      </button>
+    </div>
 
     <hr class="separator--horizontal full-width" aria-hidden="true">
 
diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb
index 76a911121..c382a2383 100644
--- a/app/views/cards/index/_columns.html.erb
+++ b/app/views/cards/index/_columns.html.erb
@@ -10,11 +10,6 @@
         <% end %>
       <% end %>
 
-      <button class="btn btn--circle txt-x-small" style="margin-block: var(--cards-gap);">
-        <%= icon_tag "add" %>
-        <span class="for-screen-reader">Add a new stage</span>
-      </button>
-
       <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
     </div>
   <% end %>