Merge pull request #247 from EdouardVanbelle/fix/notification

fix(notification): correct bell animation + automatically close notif…

static/css/components/notifications.css

@@ -123,15 +123,17 @@
 
 @keyframes bellRing {
 	0%, 100% { transform: rotate(0deg); }
-	15% { transform: rotate(14deg); }
-	30% { transform: rotate(-14deg); }
-	45% { transform: rotate(8deg); }
-	60% { transform: rotate(-8deg); }
-	75% { transform: rotate(3deg); }
+	13% { transform: rotate(22deg); }
+	26% { transform: rotate(-22deg); }
+	39% { transform: rotate(14deg); }
+	52% { transform: rotate(-14deg); }
+	65% { transform: rotate(8deg); }
+	78% { transform: rotate(-8deg); }
+	91% { transform: rotate(3deg); }
 }
 
-.notif-bell-btn.ring i {
-	animation: bellRing 0.6s ease;
+.notif-bell-btn.ring {
+	animation: bellRing 1s ease;
 }
 
 .notif-panel {

static/js/core/notifications.js

@@ -47,8 +47,7 @@ const notifications = (() => {
         // Close on outside click
         document.addEventListener('click', (e) => {
             if (!wrapper.contains(e.target)) {
-                wrapper.classList.remove('open');
-                bellBtn.classList.remove('active');
+                close();
             }
         });
 
@@ -61,6 +60,13 @@ const notifications = (() => {
         }
     }
 
+    function close() {
+        const bellBtn  = $('notif-bell-btn');
+        const wrapper  = $('notif-wrapper');
+        wrapper.classList.remove('open');
+        bellBtn.classList.remove('active');
+    }
+
     /* ── badge helpers ──────────────────────────────────────── */
     function _incrementBadge() {
         _badgeCount++;
@@ -73,12 +79,13 @@ const notifications = (() => {
     }
     function _renderBadge() {
         const badge = $('notif-badge');
+        console.log(`badge`, badge);
         if (!badge) return;
         if (_badgeCount > 0) {
-            badge.style.display = '';
+            badge.classList.remove("hidden");
             badge.textContent = _badgeCount > 99 ? '99+' : _badgeCount;
         } else {
-            badge.style.display = 'none';
+            badge.classList.add("hidden");
         }
     }
     function _ringBell() {
@@ -93,7 +100,7 @@ const notifications = (() => {
     /* ── empty state ────────────────────────────────────────── */
     function _showEmptyIfNeeded() {
         const body  = $('notif-panel-body');
-        const empty = $('notif-empty');
+        const empty = $('notif-empty');       
         if (!body || !empty) return;
         // Any real items?
         const hasItems = body.querySelector('.notif-item') !== null;
@@ -312,6 +319,11 @@ const notifications = (() => {
         body.querySelectorAll('.notif-item').forEach(el => el.remove());
         _clearBadge();
         _showEmptyIfNeeded();
+        // automatically close notification center on clear
+        setTimeout(
+            ()=> { close(); }, 
+            600
+        );
     }
 
     /* ── util ───────────────────────────────────────────────── */