Send icon urls with buttons and resolve duplicate bridge items on the board perma since there are duplicate hidden elements

app/helpers/accesses_helper.rb

@@ -48,7 +48,8 @@ module AccessesHelper
       params: { show_watchers: show_watchers, involvement: next_involvement(access.involvement), icon_only: icon_only },
       aria: { labelledby: dom_id(board, :involvement_label) },
       title: (label_text if icon_only),
-      class: class_names("btn", { "btn--reversed": access.watching? && icon_only })) do
+      class: class_names("btn", { "btn--reversed": access.watching? && icon_only }),
+      data: { bridge__overflow_menu_target: "item" }) do
         icon_tag("notification-bell-#{icon_only ? 'reverse-' : nil}#{access.involvement.dasherize}") +
         tag.span(label_text, class: class_names("txt-nowrap txt-uppercase", "for-screen-reader": icon_only), id: dom_id(board, :involvement_label))
     end

app/javascript/controllers/bridge/buttons_controller.js

@@ -5,26 +5,16 @@ export default class extends BridgeComponent {
   static component = "buttons"
   static targets = [ "button" ]
 
-  connect() {
-    super.connect()
-
-    if (this.hasButtonTarget) {
-      this.notifyBridgeOfConnect()
-    }
-  }
-
-  disconnect() {
-    super.disconnect()
-
-    if (this.hasButtonTarget) {
-      this.notifyBridgeOfDisconnect()
-    }
+  buttonTargetConnected(element) {
+    this.notifyBridgeOfConnect()
   }
 
   notifyBridgeOfConnect() {
-    const buttons = this.buttonTargets.map((target, index) => {
-      const element = new BridgeElement(target)
-      return { ...element.getButton(), index }
+    const buttons = this.buttonTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { ...element.getButton(), index }
     })
 
     this.send("connect", { buttons }, message => {
@@ -32,10 +22,6 @@ export default class extends BridgeComponent {
     })
   }
 
-  notifyBridgeOfDisconnect() {
-    this.send("disconnect")
-  }
-
   clickButton(message) {
     const selectedIndex = message.data.selectedIndex
     this.buttonTargets[selectedIndex].click()

app/javascript/controllers/bridge/overflow_menu_controller.js

@@ -5,37 +5,23 @@ export default class extends BridgeComponent {
   static component = "overflow-menu"
   static targets = [ "item" ]
 
-  connect() {
-    super.connect()
-
-    if (this.hasItemTarget) {
-      this.notifyBridgeOfConnect()
-    }
-  }
-
-  disconnect() {
-    super.disconnect()
-
-    if (this.hasItemTarget) {
-      this.notifyBridgeOfDisconnect()
-    }
+  itemTargetConnected() {
+    this.notifyBridgeOfConnect()
   }
 
   notifyBridgeOfConnect() {
-    const items = this.itemTargets.map((target, index) => {
-      const element = new BridgeElement(target)
-      return { title: element.title, index }
-    })
+    const items = this.itemTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { title: element.title, index }
+      })
 
     this.send("connect", { items }, message => {
       this.clickItem(message)
     })
   }
 
-  notifyBridgeOfDisconnect() {
-    this.send("disconnect")
-  }
-
   clickItem(message) {
     const selectedIndex = message.data.selectedIndex
     this.itemTargets[selectedIndex].click()

app/views/boards/show/_stream.html.erb

@@ -7,7 +7,9 @@
     <%= render "boards/show/expander", title: "Maybe?", count: board.cards.awaiting_triage.count, column_id: "maybe" %>
     <%= render "boards/show/menu/maximize", column_path: board_columns_stream_path(board) %>
   </header>
-  <%= render "columns/show/add_card_button", board: board %>
+  <div data-bridge-disabled="true">
+    <%= render "columns/show/add_card_button", board: board %>
+  </div>
   <div class="cards__list hide-scrollbar" data-drag-drop-item-container>
     <% if page.used? %>
       <%= with_automatic_pagination "maybe", @page do %>

app/views/events/index/_add_board_button.html.erb

@@ -1,6 +1,7 @@
 <div class="header__actions header__actions--end">
   <div>
-    <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %>
+    <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile",
+          data: { controller: "hotkey", action: "keydown.b@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a board", bridge_icon_url: bridge_icon("board") } do %>
       <%= icon_tag "board" %>
       <span class="overflow-ellipsis">Add a board</span>
       <kbd class="hide-on-touch">B</kbd>

app/views/events/index/_add_card_button.html.erb

@@ -1,6 +1,7 @@
 <div class="header__actions header__actions--start">
   <% if board = user_filtering.single_board_or_first %>
-    <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
+    <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile",
+          data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a card", bridge_icon_url: bridge_icon("add") } do %>
       <%= icon_tag "add" %>
       <span class="overflow-ellipsis">Add a card</span>
       <kbd class="hide-on-touch">C</kbd>

app/views/layouts/application.html.erb

@@ -3,10 +3,10 @@
   <%= render "layouts/shared/head" %>
 
   <body class="<%= @body_class %>"
-    data-controller="local-time timezone-cookie turbo-navigation theme bridge--page bridge--insets bridge--buttons bridge--overflow-menu"
+    data-controller="local-time timezone-cookie turbo-navigation theme bridge--page bridge--insets"
     data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation"
     data-platform="<%= platform.type %>" <%= "data-bridge--page-title-value=#{@page_title}" if @page_title %>>
-    <div id="global-container">
+    <div id="global-container" data-controller="bridge--buttons bridge--overflow-menu">
       <header class="header header--mobile-actions-stack <%= @header_class %>" id="header">
         <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
         <%= render "my/menu" if Current.user %>