Move involvement toggle and display all the watchers

app/assets/images/notification-bell-access-only.svg

@@ -1 +0,0 @@
-<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.9 19.5-11-11c-.3.8-.4 1.7-.4 2.6v4.9c0 .8-.7 1.5-1.5 1.5-.6 0-1 .4-1 1s.4 1 1 1z"/><path d="m9.5 21.2v.3c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0-.1 0-.2 0-.3s-.1-.2-.2-.2h-4.5c-.2 0-.3.1-.3.2z"/><path d="m23.7 23.7c.4-.4.4-1 0-1.4l-2.8-2.8h.1c.6 0 1-.4 1-1s-.4-1-1-1c-.8 0-1.5-.7-1.5-1.5v-4.9c.1-3.9-2.6-7.4-6.5-8.1v-2c0-.6-.4-1-1-1s-1 .4-1 1v2.1c-1.6.3-3.1 1-4.3 2.3l-5-5c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l22 22c.2.2.4.3.7.3.3-.1.5-.2.7-.4z"/></svg>

app/assets/images/notification-bell-watching.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21 17.5a1.5 1.5 0 0 1 -1.5-1.5v-4.862a7.957 7.957 0 0 0 -6.5-8.065v-2.073a1 1 0 0 0 -2 0v2.073a7.957 7.957 0 0 0 -6.5 8.065v4.862a1.5 1.5 0 0 1 -1.5 1.5 1 1 0 0 0 0 2h18a1 1 0 0 0 0-2z"/><path d="m14.236 21h-4.472a.25.25 0 0 0 -.248.222 2.319 2.319 0 0 0 -.016.278 2.5 2.5 0 1 0 5 0 2.319 2.319 0 0 0 -.016-.278.248.248 0 0 0 -.248-.222z"/></svg>

app/assets/stylesheets/card-columns.css

@@ -262,16 +262,26 @@
     }
 
     .card--new {
-      --card-padding-block: var(--block-space-double);
+      --border-color: var(--color-selected-dark);
+      --border-size: 1px;
+      --card-padding-block: calc(var(--block-space) * 1.5) var(--block-space);
 
       border: 1px solid var(--color-selected-dark);
-      font-size: 0.8rem !important;
-      rotate: 0 !important;
       text-align: center;
 
       .btn {
-        border: 0;
-        color: var(--color-considering);
+        &.btn--link {
+          font-size: 1.2em;
+        }
+
+        &:not(.btn--link) {
+          border: 0;
+          color: var(--color-link);
+        }
+      }
+
+      footer {
+        font-size: var(--text-x-small);
       }
     }
 

app/assets/stylesheets/icons.css

@@ -60,8 +60,8 @@
   .icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg "); }
   .icon--minus { --svg: url("minus.svg "); }
   .icon--move { --svg: url("move.svg "); }
-  .icon--notification-bell-access-only { --svg: url("notification-bell-access-only.svg "); }
-  .icon--notification-bell-watching { --svg: url("notification-bell-watching.svg "); }
+  .icon--notification-bell-access-only { --svg: url("bell.svg "); }
+  .icon--notification-bell-watching { --svg: url("bell-off.svg "); }
   .icon--password { --svg: url("password.svg "); }
   .icon--pencil { --svg: url("pencil.svg "); }
   .icon--person { --svg: url("person.svg "); }

app/helpers/accesses_helper.rb

@@ -21,10 +21,10 @@ module AccessesHelper
     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 tooltip", { "btn--reversed": access.involvement == "watching" } ],
+          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: "for-screen-reader", id: dom_id(collection, :involvement_label))
+          tag.span(involvement_access_label(collection, access.involvement), class: "txt-nowrap txt-uppercase", id: dom_id(collection, :involvement_label))
       end
     end
   end
@@ -38,9 +38,9 @@ module AccessesHelper
     def involvement_access_label(collection, involvement)
       case involvement
       when "access_only"
-        "Not watching #{collection.name}"
+        "Watch this"
       when "watching"
-        "Watching #{collection.name}"
+        "Stop Watching"
       end
     end
 end

app/views/cards/index.html.erb

@@ -11,11 +11,7 @@
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
 
-  <div class="header__actions header__actions--start">
-    <% if collection = @filter.single_collection %>
-      <%= access_involvement_advance_button collection, Current.user %>
-    <% end %>
-  </div>
+  <div class="header__actions header__actions--start"></div>
 
   <h1 class="header__title overflow-ellipsis" style="view-transistion-name: card-collection-title">
     <%= @user_filtering.selected_collections_label %>

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

@@ -1,8 +1,20 @@
 <% if collection = user_filtering.single_collection %>
-  <div class="card card--new">
-    <%= button_to collection_cards_path(collection), method: :post, class: "btn" do %>
+  <div class="card card--new flex flex-column gap">
+    <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
       <%= icon_tag "add" %>
       <span>Add a card</span>
     <% end %>
+    
+    <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 %>
+    </footer>
   </div>
 <% end %>