feat: ✨ added button to delete all pending notifications

client/src/components/Header/NotificationsStep.jsx

@@ -22,6 +22,12 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
     [onDelete],
   );
 
+  const handleDeleteAll = useCallback(() => {
+    items.forEach((item) => {
+      onDelete(item.id);
+    });
+  }, [items, onDelete]);
+
   const renderItemContent = useCallback(
     ({ activity, card }) => {
       switch (activity.type) {
@@ -85,6 +91,15 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
       <Popup.Content>
         {items.length > 0 ? (
           <div className={styles.wrapper}>
+            {items.length > 1 && (
+              <Button
+                type="button"
+                icon="trash alternate outline"
+                content={t('action.deleteNotifications')}
+                onClick={handleDeleteAll}
+                className={styles.deleteAllButton}
+              />
+            )}
             {items.map((item) => (
               <div key={item.id} className={styles.item}>
                 {item.card && item.activity ? (

client/src/components/Header/NotificationsStep.module.scss

@@ -62,4 +62,19 @@
       border-radius: 3px;
     }
   }
+
+  .deleteAllButton {
+    background: transparent;
+    box-shadow: none;
+    transition: background 0.3s ease;
+
+    display: block;
+    margin: 0 auto;
+    padding: 0.5em 1em;
+    font-size: 0.875em;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
 }