From d9958d01d008cc9ef17e571edd3896665410180e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 24 Sep 2025 15:38:01 -0500
Subject: [PATCH] Stub out column menus

---
 app/assets/stylesheets/card-columns.css | 24 ++++++++++++++++++++++--
 app/helpers/cards_helper.rb             | 16 ++++++++++++++++
 app/views/cards/index/_columns.html.erb | 14 ++++++++++----
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 145dbb5d4..cae621091 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -106,10 +106,13 @@
     font-size: var(--text-x-small);
     font-weight: 600;
     gap: 0.5ch;
-    line-height: var(--column-width-collapsed);
     position: relative;
     text-transform: uppercase;
 
+    > * {
+      grid-area: unset !important;
+    }
+
     .cards.is-collapsed & {
       block-size: 100%;
       flex-direction: column;
@@ -145,6 +148,9 @@
     }
 
     .cards:not(.is-collapsed) & {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      inline-size: 100%;
       margin-block-end: calc(-0.5 * var(--cards-gap));
 
       &:hover {
@@ -155,20 +161,34 @@
   }
 
   .cards__expander-count {
+    line-height: var(--column-width-collapsed);
+
     .cards:not(.is-collapsed) & {
-      display: none;
+      opacity: 0;
     }
   }
 
   .cards__expander-title {
     font-weight: inherit;
     font-size: inherit;
+    grid-column: 2;
+    line-height: var(--column-width-collapsed);
 
     .cards.is-collapsed & {
       writing-mode: vertical-rl;
     }
   }
 
+  .cards__expander-menu {
+    .panel {
+      --panel-padding: 1ch;
+    }
+
+    .cards.is-collapsed & {
+      display: none;
+    }
+  }
+
   .blank-slate--card {
     box-shadow: none !important;
     border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index bfa9c46c8..fd37dafab 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -74,6 +74,22 @@ module CardsHelper
     tag.header class: "cards__expander btn btn--plain", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[ count, 20 ].min}", aria: { role: "button" } do
       concat(tag.span count > 99 ? "99+" : count, class: "cards__expander-count")
       concat(tag.h2 title, class: "cards__expander-title")
+      concat(tag.div class: "cards__expander-menu position-relative", data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" } do
+        concat(tag.button class: "btn btn--circle txt-x-small borderless", data: { action: "click->dialog#open:stop" } do
+          concat(icon_tag "menu-dots-horizontal", class: "translucent")
+          concat(tag.span "Column options", class: "for-screen-reader")
+        end)
+        concat(tag.dialog class: "popup panel flex-column gap fill-white shadow txt-small margin-block-double", data: { dialog_target: "dialog" } do
+          concat(tag.ul class: "popup__list" do
+            concat(tag.li class: "popup__item" do
+              concat(tag.button "Rename column", class: "popup__btn btn")
+            end)
+            concat(tag.li class: "popup__item" do
+              concat(tag.button "Delete column", class: "popup__btn btn")
+            end)
+          end)
+        end)
+      end)
     end
   end
 end
diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb
index afc8a9555..73a0b7b79 100644
--- a/app/views/cards/index/_columns.html.erb
+++ b/app/views/cards/index/_columns.html.erb
@@ -18,10 +18,16 @@
 
         <%= render "cards/index/engagement/closed", column: columns.closed %>
 
-        <button class="btn btn--circle txt-x-small borderless">
-          <%= icon_tag "menu-dots-horizontal" %>
-          <span class="for-screen-reader">Add a new column, etc.</span>
-        </button>
+        <div class="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 "add", class: "translucent" %>
+            <span class="for-screen-reader">Add a new column, etc.</span>
+          </button>
+          <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+            <input class="input" placeholder="Column name" />
+            <button class="btn btn--link">Add a column</button>
+          </dialog>
+        </div>
       </div>
     </div>
   <% end %>