update: test badge removal

src/menu-left.pug

@@ -1,6 +1,6 @@
 sib-widget(name='hd-counter')
   template
-    sib-badge(data-src="${value == 'badge' ? src : value}")
+    sib-fix-badge(data-src="${value == 'badge' ? src : value}")
 
 sib-widget(name='hd-create')
   template

src/scripts/index.js

@@ -178,6 +178,28 @@ async function checkForPostLeaveRedirect(event) {
   else if(resourceId.includes('project')) performRedirect('project-left');
 }
 
+//- Update badges from notifications list
+async function updateBadges(element) {
+  const unreadNotifications = new Map();
+  const notifications = element.component.resource;
+  if (!notifications) return;
+  // Generate unread map
+  for (let notification of notifications['ldp:contains']) {
+    if (await notification['unread']) {
+      const object = await notification['object'];
+      unreadNotifications.set(object['@id'], (unreadNotifications.get(object['@id']) || 0) + 1);
+    }
+  }
+  // update badges
+  unreadNotifications.forEach((notifNumber, objectId) => {
+    const badge = document.querySelector(`sib-fix-badge[data-src="${objectId}"]`);
+    if (badge) {
+      badge.innerText = notifNumber || '';
+      badge.style.display = notifNumber ? 'block' : 'none';
+    }
+  })
+}
+
 document.addEventListener("DOMContentLoaded", function(event) {
   const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
 
@@ -291,4 +313,32 @@ document.addEventListener("DOMContentLoaded", function(event) {
       closeRightMenu();
     }
   };
+
+  //- Fix badges performances
+  // on load time
+  document.getElementById('notifications-list').addEventListener('populate', (event) => {
+    const checkExist = setInterval(function () { // wait for left menus to exist
+      const subMenus = document.querySelectorAll('.sub-menu > sib-display > div');
+      if (subMenus.length >= 2) {
+        updateBadges(event.target);
+        clearInterval(checkExist);
+      }
+    }, 500);
+  }, { once: true });
+
+  // on refresh notification list
+  window.addEventListener('notificationsRefresh', () => {
+    document.getElementById('notifications-list').addEventListener('populate', () => {
+      updateBadges(notificationsList);
+    }, { once: true });
+  });
+
+  // on read notification
+  window.addEventListener('read', (event) => {
+    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
+      const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
+      if (badge) badge.style.display = "none";
+    }
+  });
+
 });

src/styles/base/menu-left.scss

@@ -225,3 +225,20 @@
     }
   }
 }
+
+// Temporary fix for badges
+sib-fix-badge {
+  display: none;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-size: 12px;
+  background-color: var(--sib-notifications-theme, gray);
+  color: #36383a;
+  border-radius: 50%;
+  line-height: 20px;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  font-weight: bold;
+  padding-bottom: 0;
+}