added a clear all button if at least two sticky notifications are visible

frontend/src/styles/notifications.scss

@@ -7,6 +7,9 @@
   right: 1rem;
   top: 1rem;
   transition: 0.125s opacity;
+  .clearAll.button {
+    font-size: 0.75em;
+  }
   &.focus .notif {
     visibility: hidden;
   }

frontend/src/ts/elements/notifications.ts

@@ -13,6 +13,7 @@ function updateMargin(): void {
   $("#notificationCenter").css("margin-top", height + "px");
 }
 
+let visibleStickyNotifications = 0;
 let id = 0;
 class Notification {
   id: number;
@@ -96,6 +97,10 @@ class Notification {
 
     if (this.type === "notification") {
       // moveCurrentToHistory();
+      if (this.duration === 0) {
+        visibleStickyNotifications++;
+        updateClearAllButton();
+      }
       const oldHeight = $("#notificationCenter .history").height() as number;
       $("#notificationCenter .history").prepend(`
           
@@ -141,6 +146,10 @@ class Notification {
             $(`#notificationCenter .notif[id='${this.id}']`).on("click", () => {
               this.hide();
               this.closeCallback();
+              if (this.duration === 0) {
+                visibleStickyNotifications--;
+              }
+              updateClearAllButton();
             });
           }
         );
@@ -239,6 +248,16 @@ class Notification {
   }
 }
 
+function updateClearAllButton(): void {
+  if (visibleStickyNotifications > 1) {
+    $("#notificationCenter .clearAll").removeClass("invisible");
+    $("#notificationCenter .clearAll").slideDown(125);
+  } else if (visibleStickyNotifications < 1) {
+    $("#notificationCenter .clearAll").addClass("invisible");
+    $("#notificationCenter .clearAll").slideUp(125);
+  }
+}
+
 interface AddNotificationOptions {
   important?: boolean;
   duration?: number;
@@ -300,3 +319,11 @@ const debouncedMarginUpdate = debounce(100, updateMargin);
 $(window).on("resize", () => {
   debouncedMarginUpdate();
 });
+
+$("#notificationCenter .clearAll").on("click", () => {
+  $("#notificationCenter .notif.bad").each((_, element) => {
+    $(element)[0].click();
+  });
+  visibleStickyNotifications = 0;
+  updateClearAllButton();
+});

frontend/static/main.html

@@ -9,6 +9,10 @@
     <div id="backgroundLoader" style="display: none"></div>
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
+      <div class="clearAll button invisible" style="display: none">
+        <i class="fas fa-times"></i>
+        Clear all
+      </div>
       <div class="history"></div>
     </div>
     <div id="timerWrapper">