Adjust unread indicator to include unread count

app/assets/stylesheets/cards.css

@@ -464,43 +464,31 @@
   }
 
   .card__notification-unread-indicator {
-    --btn-background: var(--color-canvas);
+    --btn-background: var(--color-marker);
     --btn-border-color: var(--color-canvas);
-    --btn-icon-size: 0.75em;
+    --btn-color: var(--color-ink-inverted);
+    --btn-icon-size: 0.5em;
     --btn-padding: 0;
-    --btn-size: 1.25em;
+    --btn-size: 1.6em;
 
+    font-size: var(--text-xx-small);
+    font-weight: 600;
+    margin: 2px;
     position: relative;
     z-index: 1;
 
-    &:before,
-    .icon {
-      transition: opacity 150ms ease;
-    }
-
-    /* The red dot */
-    &:before {
-      aspect-ratio: 1;
-      background-color: var(--color-marker);
-      border-radius: 50%;
-      content: "";
-      inline-size: 50%;
-      inset: 50% auto auto 50%;
-      position: absolute;
-      translate: -50% -50%;
-    }
-
-    /* The X */
     .icon {
       opacity: 0;
+      transition: opacity 150ms ease;
     }
 
     @media (hover: hover) {
       .card:hover & {
-        --btn-background: transparent;
+        --btn-background: var(--color-ink-lightest);
+        --btn-color: var(--color-ink);
 
-        &:before { opacity: 0; }
-           .icon { opacity: 1; }
+        .badge-count { opacity: 0; }
+               .icon { opacity: 1; }
       }
     }
   }

app/assets/stylesheets/notifications.css

@@ -29,10 +29,6 @@
       column-gap: var(--inline-space-half);
     }
 
-    .card__notification-unread-indicator {
-      font-size: var(--text-small);
-    }
-
     &:has(.card--notification) {
       .notifications-list__empty-message {
         display: none;
@@ -40,13 +36,6 @@
     }
   }
 
-  /* Grouped notifications
-  /* ------------------------------------------------------------------------ */
-
-  .notification--grouped {
-    border: 3px solid red;
-  }
-
   /* Read items
   /* ------------------------------------------------------------------------ */
 
@@ -61,12 +50,14 @@
 
     .card__notification-unread-indicator {
       --btn-background: transparent;
+      --btn-size: 1.8em;
 
-      &:before {
-        opacity: 0;
-      }
+      margin: 2px;
 
       .icon {
+        block-size: 1.7em;
+        color: var(--color-ink);
+        inline-size: 1.7em;
         opacity: 1;
       }
     }

app/assets/stylesheets/trays.css

@@ -550,11 +550,6 @@
       }
     }
 
-    .card__notification-unread-indicator {
-      --btn-icon-size: 1.25em;
-      --btn-size: 2em;
-    }
-
     /* On mobile… */
     @media (max-width: 799px) {
       /* …add a border */

app/helpers/notifications_helper.rb

@@ -43,7 +43,6 @@ module NotificationsHelper
           data: { action: "form#submit:stop badge#update:stop", form_target: "submit" },
           form: { data: { controller: "form" } } do
         concat(icon_tag("unseen"))
-        concat(tag.span("Mark as unread", class: "for-screen-reader"))
       end
     else
       button_to notification_reading_path(notification),
@@ -52,7 +51,7 @@ module NotificationsHelper
           data: { action: "form#submit:stop badge#update:stop", form_target: "submit" },
           form: { data: { controller: "form" } } do
         concat(icon_tag("remove"))
-        concat(tag.span("Mark as read", class: "for-screen-reader"))
+        concat(tag.span("1", class: "badge-count", data: { group_count: "" }))
       end
     end
   end

app/views/notifications/_notification.html.erb

@@ -3,7 +3,6 @@
 
     <header class="card__header">
       <%= render "notifications/notification/#{notification.source_type.underscore}/header", notification: notification %>
-      <span data-group-count></span>
     </header>
 
     <div class="card__body">