Display Primer-like Counter for IAN entries

Aligns the look and behaviour of counters on the Notifications page by
rendering the aggregated-notification count badge with the new
`primer-counter-label` component in place of the bespoke
`indicator-bubble` span, so IAN entries inherit the shared limit and
delimiting behaviour.

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html

@@ -45,10 +45,12 @@
       }
     </div>
   @if (!notification.readIAN) {
-    <span
-      class="op-ian-item--reason-count"
-      [textContent]="aggregatedNotifications.length"
-    ></span>
+    <span class="op-ian-item--reason-count">
+      <primer-counter
+        [count]="aggregatedNotifications.length"
+        scheme="secondary"
+      ></primer-counter>
+    </span>
   }
   <div class="op-ian-item--buttons">
     @if (!notification.readIAN) {
@@ -118,7 +120,12 @@
         <svg:rect x="0" y="14" width="80%" height="5" rx="1" />
       </op-content-loader>
     }
-    <span class="op-ian-item--reason-count"></span>
+    <span class="op-ian-item--reason-count">
+      <primer-counter
+        [count]="null"
+        scheme="secondary"
+      ></primer-counter>
+    </span>
     <div class="op-ian-item--buttons">
       <i class="op-ian-item--button icon-mark-read">
       </i>

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass

@@ -103,7 +103,6 @@ $subject-font-size: 14px
 
   &--reason-count
     grid-area: count
-    @include indicator-bubble
     justify-self: flex-end
     margin-right: 5px