From d28fbaa101595fb63269a1797e3223c9ad73bd59 Mon Sep 17 00:00:00 2001
From: Justin Starner <iroostmo@gmail.com>
Date: Thu, 4 Dec 2025 21:47:05 -0500
Subject: [PATCH] Refactor card deletion to use custom modal

Replaces the standard turbo_confirm attribute with a custom dialog modal for a better user experience.

- Removes `button_to_delete_card` helper in favor of inline markup.
- Implements `keydown.esc->dialog#close:stop` to prevent the Escape key from inadvertently closing selected card.
---
 app/helpers/cards_helper.rb        |  8 --------
 app/views/cards/_messages.html.erb | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index 581adc108..9b149b707 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -18,14 +18,6 @@ module CardsHelper
       &block
   end
 
-  def button_to_delete_card(card)
-    button_to card_path(card),
-        method: :delete, class: "btn txt-negative borderless txt-small", data: { turbo_frame: "_top", turbo_confirm: "Are you sure you want to permanently delete this card?" } do
-      concat(icon_tag("trash"))
-      concat(tag.span("Delete this card"))
-    end
-  end
-
   def card_title_tag(card)
     title = [
       card.title,
diff --git a/app/views/cards/_messages.html.erb b/app/views/cards/_messages.html.erb
index 402a39ec0..d4f6a6400 100644
--- a/app/views/cards/_messages.html.erb
+++ b/app/views/cards/_messages.html.erb
@@ -9,7 +9,22 @@
   <% if Current.user.can_administer_card?(card) %>
     <footer class="delete-card txt-align-center full-width flex flex-column margin-block-start-double">
       <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
-      <%= button_to_delete_card(card) %>
+      <div data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close:stop">
+        <button type="button" class="btn txt-negative borderless txt-small" data-action="dialog#open">
+          <%= icon_tag "trash" %>
+          <span>Delete this card</span>
+        </button>
+        <dialog class="dialog panel fill-white shadow gap flex-column" style="max-width: 40ch" data-dialog-target="dialog">
+          <h3 class="txt-large txt-bold">Delete this card?</h3>
+          <p class="txt-medium margin-block-half">Are you sure you want to permanently delete this card?</p>
+          <div class="flex gap-half justify-end margin-block-start">
+            <button type="button" class="btn" data-action="dialog#close">Cancel</button>
+            <%= button_to card_path(card), method: :delete, class: "btn txt-negative", data: { turbo_frame: "_top" } do %>
+              <span>Delete card</span>
+            <% end %>
+          </div>
+        </dialog>
+      </div>
     </footer>
   <% end %>
 <% end %>