added badge to notification icon that shows number of open notifications

base/static/index.html

@@ -12,8 +12,14 @@
 <nav id="sidebar">
     <div id="modules-group"></div>
     <div id="nav-buttons-group">
-        <button id="nav-button-reload" title="Refresh module content"><i class="fa-solid fa-rotate-right"></i></button>
-        <button id="nav-button-notifications" title="Notifications"><i class="fa-solid fa-bell"></i></button>
+        <button id="nav-button-reload" title="Refresh module content">
+            <i class="fa-solid fa-rotate-right"></i>
+            <span id="notification-badge" class="badge"></span>
+        </button>
+        <button id="nav-button-notifications" title="Notifications">
+            <i class="fa-solid fa-bell"></i>
+            <span id="notification-badge" class="badge"></span>
+        </button>
     </div>
 </nav>
 

base/static/shell.css

@@ -71,9 +71,6 @@ main {
 
 /* notification modal */ 
 
-.modal-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.82rem}
-.modal-row:last-child{border-bottom:none}
-
 .notification-title{
   display:flex;
   align-items:center;
@@ -118,3 +115,39 @@ main {
   padding:1rem 0;
   font-size:1.0rem;
 }
+
+#nav-button-notifications{
+  position:relative; /* anchor for the badge */
+}
+
+.badge{
+  position:absolute;
+  top:+4px;
+  right:+4px;
+  min-width:16px;
+  height:16px;
+  padding:0 4px;
+  border-radius:999px;
+  background:var(--okay);
+  color: var(--text);
+  font-size:.62rem;
+  font-weight:700;
+  line-height:16px;
+  text-align:center;
+  display: none;
+}
+
+.badge.visible{
+  display:block;
+}
+
+.badge.sync-requested{
+  display:block;
+}
+.badge.sync-okay{
+  display:block;
+}
+.badge.sync-error{
+  display:block;
+}
+

base/static/shell.js

@@ -87,6 +87,20 @@ async function deleteNotification(nid) {
 }
 
 function renderNotifications() {
+    const num_nots = Object.entries(notifications).length;
+    
+    // badge
+    const badge = document.getElementById("notification-badge");
+    if (num_nots < 1) {
+        badge.classList.remove("visible");
+        return;
+    }
+    else {
+        badge.classList.add("visible");
+        badge.innerHTML = num_nots.toString();
+    }
+
+    // modal 
     const box = document.getElementById("notification-container");
     if (!box) {return;}
     
@@ -112,12 +126,11 @@ function renderNotifications() {
         html += `<button id="notification-button-${nid}" class="notification-read-button" onclick="deleteNotification('${nid}')"><i class="fa-solid fa-fw fa-xmark"></i></button></p>`;
     });
 
-    if (Object.entries(notifications).length === 0) {
+
+    if (num_nots === 0) {
         html += `<p class="notification-empty">endless void</p>`;
     }
-
     box.innerHTML = html;
-
 }
 
 function openNotificationModal() {