fix: added unread notification count

frontend/src/components/Layouts/AppSidebar.vue

@@ -14,8 +14,23 @@
           :icon="NotificationsIcon"
           :isCollapsed="isSidebarCollapsed"
           @click="() => toggleNotificationPanel()"
-          class="mx-2 my-0.5"
-        />
+          class="relative mx-2 my-0.5"
+        >
+          <template #right>
+            <Badge
+              v-if="
+                !isSidebarCollapsed &&
+                notificationsStore().unreadNotificationsCount
+              "
+              :label="notificationsStore().unreadNotificationsCount"
+              variant="subtle"
+            />
+            <div
+              v-else-if="notificationsStore().unreadNotificationsCount"
+              class="absolute z-20 top-0 left-0 h-1.5 w-1.5 translate-x-6 translate-y-1 rounded-full bg-gray-800"
+            />
+          </template>
+        </SidebarLink>
       </div>
       <div v-for="view in allViews" :key="view.label">
         <div

frontend/src/components/SidebarLink.vue

@@ -5,26 +5,29 @@
     @click="handleClick"
   >
     <div
-      class="flex items-center duration-300 ease-in-out"
+      class="flex w-full justify-between items-center duration-300 ease-in-out"
       :class="isCollapsed ? 'p-1' : 'px-2 py-1'"
     >
-      <Tooltip :text="label" placement="right">
-        <slot name="icon">
-          <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-            <component :is="icon" class="h-4 w-4 text-gray-700" />
-          </span>
-        </slot>
-      </Tooltip>
-      <span
-        class="flex-shrink-0 text-sm duration-300 ease-in-out"
-        :class="
-          isCollapsed
-            ? 'ml-0 w-0 overflow-hidden opacity-0'
-            : 'ml-2 w-auto opacity-100'
-        "
-      >
-        {{ label }}
-      </span>
+      <div class="flex items-center">
+        <Tooltip :text="label" placement="right">
+          <slot name="icon">
+            <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+              <component :is="icon" class="h-4 w-4 text-gray-700" />
+            </span>
+          </slot>
+        </Tooltip>
+        <span
+          class="flex-1 flex-shrink-0 text-sm duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'ml-0 w-0 overflow-hidden opacity-0'
+              : 'ml-2 w-auto opacity-100'
+          "
+        >
+          {{ label }}
+        </span>
+      </div>
+      <slot name="right" />
     </div>
   </button>
 </template>

frontend/src/stores/notifications.js

@@ -22,6 +22,9 @@ export const notificationsStore = defineStore('crm-notifications', () => {
   }
 
   const allNotifications = computed(() => notifications.data || [])
+  const unreadNotificationsCount = computed(
+    () => notifications.data?.filter((n) => !n.read).length || 0
+  )
 
   function mark_comment_as_read(comment) {
     mark_as_read.params = { comment: comment }
@@ -32,6 +35,7 @@ export const notificationsStore = defineStore('crm-notifications', () => {
   return {
     visible,
     allNotifications,
+    unreadNotificationsCount,
     mark_as_read,
     mark_comment_as_read,
     toggle,