fix: Powiadomienia znikają po przeczytaniu

- Lista pokazuje tylko nieprzeczytane (unread_only=true)
- Po kliknięciu powiadomienie znika z animacją
- "Oznacz wszystkie" usuwa wszystkie z listy
- Animacja fadeOut dla płynnego usuwania

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/base.html

@@ -991,6 +991,17 @@
             }
         }
 
+        @keyframes fadeOut {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(20px);
+            }
+        }
+
         @keyframes scaleIn {
             from {
                 opacity: 0;
@@ -1553,7 +1564,7 @@
         async function loadNotifications() {
             const listEl = document.getElementById('notificationsList');
             try {
-                const response = await fetch('{{ url_for("api_notifications") }}?limit=10');
+                const response = await fetch('{{ url_for("api_notifications") }}?limit=10&unread_only=true');
                 const data = await response.json();
 
                 if (!data.success) {
@@ -1620,12 +1631,18 @@
                     }
                 });
 
-                // Update UI
+                // Remove item from list (only show unread)
                 const item = document.querySelector(`.notification-item[data-id="${notificationId}"]`);
                 if (item) {
-                    item.classList.remove('unread');
+                    item.style.animation = 'fadeOut 0.3s ease forwards';
-                    const dot = item.querySelector('.notification-dot');
+                    setTimeout(() => {
-                    if (dot) dot.remove();
+                        item.remove();
+                        // Check if list is empty
+                        const listEl = document.getElementById('notificationsList');
+                        if (listEl && !listEl.querySelector('.notification-item')) {
+                            listEl.innerHTML = '<div class="notifications-empty">Brak powiadomien</div>';
+                        }
+                    }, 300);
                 }
 
                 // Refresh badge count
@@ -1650,12 +1667,16 @@
 
                 const data = await response.json();
                 if (data.success) {
-                    // Update all items in UI
+                    // Remove all items from list (only show unread)
-                    document.querySelectorAll('.notification-item.unread').forEach(item => {
+                    const listEl = document.getElementById('notificationsList');
-                        item.classList.remove('unread');
+                    const items = listEl.querySelectorAll('.notification-item');
-                        const dot = item.querySelector('.notification-dot');
+                    items.forEach((item, index) => {
-                        if (dot) dot.remove();
+                        item.style.animation = 'fadeOut 0.3s ease forwards';
+                        item.style.animationDelay = `${index * 0.05}s`;
                     });
+                    setTimeout(() => {
+                        listEl.innerHTML = '<div class="notifications-empty">Brak powiadomien</div>';
+                    }, 300 + items.length * 50);
 
                     // Update badge
                     updateNotificationBadge(0);