From d68ac251878ae77737ea473adfc7c22eef5dbaf4 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:55:09 +0530
Subject: [PATCH] feat: Display notification count in sidebar inbox item
 (#12324)

---
 .../components-next/sidebar/Sidebar.vue       |  2 +-
 .../sidebar/SidebarGroupHeader.vue            | 25 ++++++++++++++++---
 .../routes/dashboard/inbox/InboxList.vue      |  7 +-----
 .../store/modules/notifications/getters.js    |  3 +++
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 20139ed27..c4daaf519 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -128,7 +128,7 @@ const menuItems = computed(() => {
       to: accountScopedRoute('inbox_view'),
       activeOn: ['inbox_view', 'inbox_view_conversation'],
       getterKeys: {
-        badge: 'notifications/getHasUnreadNotifications',
+        count: 'notifications/getUnreadCount',
       },
     },
     {
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
index b0fd8fc69..2619f3100 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';
 
@@ -16,12 +17,16 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);
 
 const showBadge = useMapGetter(props.getterKeys.badge);
+const dynamicCount = useMapGetter(props.getterKeys.count);
+const count = computed(() =>
+  dynamicCount.value > 99 ? '99+' : dynamicCount.value
+);
 </script>
 
 <template>
   <component
     :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
     role="button"
     draggable="false"
     :to="to"
@@ -40,9 +45,21 @@ const showBadge = useMapGetter(props.getterKeys.badge);
         class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
       />
     </div>
-    <span class="text-sm font-medium leading-5 flex-grow">
-      {{ label }}
-    </span>
+    <div class="flex items-center gap-1.5 flex-grow min-w-0">
+      <span class="text-sm font-medium leading-5 truncate">
+        {{ label }}
+      </span>
+      <span
+        v-if="dynamicCount && !expandable"
+        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
+        :class="{
+          'text-n-blue-text outline-n-slate-6': isActive,
+          'text-n-slate-11 outline-n-strong': !isActive,
+        }"
+      >
+        {{ count }}
+      </span>
+    </div>
     <span
       v-if="expandable"
       v-show="isExpanded"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 6f6f6cad3..9828f9e17 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -94,12 +94,7 @@ const loadMoreNotifications = () => {
 const markNotificationAsRead = async notificationItem => {
   useTrack(INBOX_EVENTS.MARK_NOTIFICATION_AS_READ);
 
-  const {
-    id,
-    primary_actor_id: primaryActorId,
-    primary_actor_type: primaryActorType,
-  } = notificationItem;
-
+  const { id, primaryActorId, primaryActorType } = notificationItem;
   try {
     await store.dispatch('notifications/read', {
       id,
diff --git a/app/javascript/dashboard/store/modules/notifications/getters.js b/app/javascript/dashboard/store/modules/notifications/getters.js
index 4f4cafc9a..8af1d0360 100644
--- a/app/javascript/dashboard/store/modules/notifications/getters.js
+++ b/app/javascript/dashboard/store/modules/notifications/getters.js
@@ -38,4 +38,7 @@ export const getters = {
   getHasUnreadNotifications: $state => {
     return $state.meta.unreadCount > 0;
   },
+  getUnreadCount: $state => {
+    return $state.meta.unreadCount;
+  },
 };