From 6c1dc64d881f0f72c1a89f801ba8a120dfa329c3 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Thu, 4 Jun 2026 13:53:19 +0200
Subject: [PATCH] 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.
---
 .../in-app-notification-entry.component.html    | 17 ++++++++++++-----
 .../in-app-notification-entry.component.sass    |  1 -
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html
index f2e7243297e..8c5f3f140c9 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html
+++ b/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>
diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
index f4c21feca89..4cfd07e10f1 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
+++ b/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