fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: eliminate $_SESSION drift in SessionProvider and add notification UI states

Browse Source 
Pass AppContainer to SessionProvider::clear() so all module providers use
SessionStoreInterface consistently instead of raw $_SESSION. Also add
loading and error states to the notification bell dropdown (GR-UI-014).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-03-20 22:49:03 +01:00
parent 5f37562796
commit 975651b183
12 changed files with 121 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
modules/notifications/web/js/components/app-notification-bell.js
View File

@@ -59,6 +59,8 @@ export function initNotificationBell(root = document, config = {}) {
const badge = details.querySelector('[data-notification-badge]');
const list = dropdown.querySelector('[data-notification-list]');
const emptyEl = list?.querySelector('.app-empty-state');
const loadingEl = list?.querySelector('[data-notification-loading]');
const errorEl = list?.querySelector('[data-notification-error]');
const markAllBtn = dropdown.querySelector('[data-notification-mark-all]');
const ac = new AbortController();
@@ -77,18 +79,25 @@ export function initNotificationBell(root = document, config = {}) {
}
}
// --- State management ---
function showState(state) {
if (loadingEl) loadingEl.style.display = state === 'loading' ? '' : 'none';
if (errorEl) errorEl.style.display = state === 'error' ? '' : 'none';
if (emptyEl) emptyEl.style.display = state === 'empty' ? '' : 'none';
}
// --- Render ---
function renderNotifications(notifications) {
if (!list) return;
// Remove rendered items, keep empty state partial
// Remove rendered items, keep state elements
list.querySelectorAll('.app-notification-item').forEach(el => el.remove());
if (notifications.length === 0) {
if (emptyEl) emptyEl.style.display = '';
showState('empty');
return;
}
if (emptyEl) emptyEl.style.display = 'none';
showState('success');
const frag = document.createDocumentFragment();
for (const n of notifications) {
@@ -161,14 +170,19 @@ export function initNotificationBell(root = document, config = {}) {
// --- API ---
async function loadNotifications() {
showState('loading');
list?.querySelectorAll('.app-notification-item').forEach(el => el.remove());
try {
const data = await fetchJson(endpoint('notifications/list-data'), { signal });
if (data.ok) {
renderNotifications(data.notifications || []);
updateBadge(data.unread_count ?? 0);
} else {
showState('error');
}
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') return;
showState('error');
telemetry.capture('warn_once', {
message: 'Notification bell: load failed',
meta: { module: 'notifications', component: 'notification-bell', action: 'load' },