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>
This commit is contained in:
Maciej Pienczyn 2026-01-30 20:43:26 +01:00
parent 69c0d7fc72
commit 2158c409a6

View File

@ -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');
const dot = item.querySelector('.notification-dot');
if (dot) dot.remove();
item.style.animation = 'fadeOut 0.3s ease forwards';
setTimeout(() => {
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
document.querySelectorAll('.notification-item.unread').forEach(item => {
item.classList.remove('unread');
const dot = item.querySelector('.notification-dot');
if (dot) dot.remove();
// Remove all items from list (only show unread)
const listEl = document.getElementById('notificationsList');
const items = listEl.querySelectorAll('.notification-item');
items.forEach((item, index) => {
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);