Update the card perma to support bridge buttonsa and the edit form state

app/javascript/controllers/bridge/buttons_controller.js

@@ -5,10 +5,16 @@ export default class extends BridgeComponent {
   static component = "buttons"
   static targets = [ "button" ]
 
-  buttonTargetConnected(element) {
+  buttonTargetConnected() {
     this.notifyBridgeOfConnect()
   }
 
+  buttonTargetDisconnected() {
+    if (!this.#isControllerTearingDown()) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
   notifyBridgeOfConnect() {
     const buttons = this.#enabledButtonTargets
       .map((target, index) => {
@@ -30,4 +36,8 @@ export default class extends BridgeComponent {
     return this.buttonTargets
       .filter(target => !target.closest("[data-bridge-disabled]"))
   }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
 }

app/javascript/controllers/bridge/form_controller.js

@@ -17,6 +17,7 @@ export default class extends BridgeComponent {
 
   disconnect() {
     super.disconnect()
+    this.notifyBridgeOfDisonnect()
     this.submitObserver?.disconnect()
   }
 
@@ -29,6 +30,10 @@ export default class extends BridgeComponent {
     })
   }
 
+  notifyBridgeOfDisonnect() {
+    this.send("disconnect")
+  }
+
   observeSubmitTarget() {
     this.submitObserver = new MutationObserver(() => {
       this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")

app/javascript/controllers/bridge/overflow_menu_controller.js

@@ -9,6 +9,12 @@ export default class extends BridgeComponent {
     this.notifyBridgeOfConnect()
   }
 
+  itemTargetDisconnected() {
+    if (!this.#isControllerTearingDown) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
   notifyBridgeOfConnect() {
     const items = this.#enabledItemTargets
       .map((target, index) => {
@@ -30,4 +36,8 @@ export default class extends BridgeComponent {
     return this.itemTargets
       .filter(target => !target.closest("[data-bridge-disabled]"))
   }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
 }

app/views/cards/container/_closure_buttons.html.erb

@@ -1,12 +1,13 @@
 <div class="flex gap-half">
-  <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click", turbo_frame: dom_id(card, :edit) } do %>
+  <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless",
+        data: { controller: "hotkey", action: "keydown.e@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Edit", bridge_icon_url: bridge_icon("pencil"), turbo_frame: dom_id(card, :edit) } do %>
     <%= icon_tag "pencil", class: "icon--mobile-only" %>
     <span>Edit</span>
     <kbd class="txt-x-small hide-on-touch">e</kbd>
   <% end %>
 
   <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless",
-        data: { controller: "hotkey", form_target: "submit", action: "keydown.d@document->hotkey#click" },
+        data: { controller: "hotkey", form_target: "submit", bridge__buttons_target: "button", bridge_title: "Mark as Done", bridge_icon_url: bridge_icon("check"), action: "keydown.d@document->hotkey#click" },
         form: { data: { controller: "form" } } do %>
     <%= icon_tag "check", class: "icon--mobile-only" %>
     <span class="overflow-ellipsis">Mark as Done</span>

app/views/cards/container/_save_button.html.erb

@@ -1,7 +1,7 @@
-<div class="card-perma__notch card-perma__notch--bottom flex-column">
+<div class="card-perma__notch card-perma__notch--bottom flex-column" data-controller="bridge--form">
   <%= button_tag type: :submit, form: dom_id(card, :edit_form), class: "btn borderless",
         title: "Save changes (#{ hotkey_label(["ctrl", "enter"]) })",
-        data: { controller: "hotkey", action: "keydown.ctrl+enter@document->hotkey#click keydown.meta+enter@document->hotkey#click" } do %>
+        data: { controller: "hotkey", bridge__form_target: "submit", action: "keydown.ctrl+enter@document->hotkey#click keydown.meta+enter@document->hotkey#click" } do %>
     <span>Save changes</span>
   <% end %>
 </div>