Move the watchers list into the turbo frame

Passes around a param to opt-out of rendering the watchers on the
notification settings screen

app/helpers/accesses_helper.rb

@@ -15,17 +15,44 @@ module AccessesHelper
       cached: ->(user) { [ user, selected ] }
   end
 
-  def access_involvement_advance_button(collection, user)
+  def access_involvement_advance_button(collection, user, show_watchers: true)
     access = collection.access_for(user)
+    involvement_label_id = dom_id(collection, :involvement_label)
 
     turbo_frame_tag dom_id(collection, :involvement_button) do
-      button_to collection_involvement_path(collection), method: :put,
-          aria: { labelledby: dom_id(collection, :involvement_label) },
-          class: "btn",
-          params: { involvement: next_involvement(access.involvement) } do
-        icon_tag("notification-bell-#{access.involvement.dasherize}") +
-          tag.span(involvement_access_label(collection, access.involvement), class: "txt-nowrap txt-uppercase", id: dom_id(collection, :involvement_label))
-      end
+      concat collection_watchers_list(collection) if show_watchers
+      concat involvement_button(collection, access, involvement_label_id, show_watchers)
+    end
+  end
+
+  def involvement_button(collection, access, involvement_label_id, show_watchers)
+    button_to(
+      collection_involvement_path(collection),
+      method: :put,
+      aria: { labelledby: involvement_label_id },
+      class: "btn",
+      params: { show_watchers: show_watchers, involvement: next_involvement(access.involvement) }
+    ) do
+      safe_join([
+        icon_tag("notification-bell-#{access.involvement.dasherize}"),
+        tag.span(
+          involvement_access_label(collection, access.involvement),
+          class: "txt-nowrap txt-uppercase",
+          id: involvement_label_id
+        )
+      ])
+    end
+  end
+
+  def collection_watchers_list(collection)
+    tag.div(class: "flex flex-wrap gap-half justify-center") do
+      safe_join(
+        collection.users
+                  .without(User.system)
+                  .where(accesses: { involvement: :watching })
+                  .distinct
+                  .map { |watcher| avatar_tag(watcher) }
+      )
     end
   end
 

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

@@ -8,13 +8,8 @@
     <hr class="separator--horizontal full-width" aria-hidden="true">
 
     <footer class="flex flex-column gap-half">
-      <div><strong class="txt-uppercase">Watching for new cards</strong></div>
-      <div class="flex flex-wrap gap-half justify-center">
-        <% collection.users.without(User.system).where(accesses: { involvement: :watching }).each do | user | %>
-          <%= avatar_tag user %>
-        <% end %>
-      </div>
-      <%= access_involvement_advance_button collection, Current.user %>
+      <strong class="txt-uppercase">Watching for new cards</strong>
+      <%= access_involvement_advance_button(collection, Current.user, show_watchers: true) %>
     </footer>
   </div>
 <% end %>

app/views/collections/involvements/update.html.erb

@@ -1 +1 @@
-<%= access_involvement_advance_button(@collection, Current.user) %>
+<%= access_involvement_advance_button(@collection, Current.user, show_watchers: params[:show_watchers] == 'true') %>

app/views/notifications/settings/_collection.html.erb

@@ -7,7 +7,7 @@
     <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
 
     <label class="flex-item-no-shrink txt-small">
-      <%= access_involvement_advance_button(collection, user) %>
+      <%= access_involvement_advance_button(collection, user, show_watchers: false) %>
     </label>
   </div>
 <% end %>