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

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>

modules/notifications/web/css/components/app-notification-dropdown.css

@@ -156,4 +156,33 @@
     color: var(--app-notification-text);
     background: var(--app-notification-border);
   }
+
+  .app-notification-loading,
+  .app-notification-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 24px 16px;
+    font-size: 13px;
+    color: var(--app-notification-muted);
+  }
+
+  .app-notification-error {
+    color: var(--app-danger, #c0392b);
+  }
+
+  .app-notification-loading__spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--app-notification-border);
+    border-top-color: var(--app-primary);
+    border-radius: 50%;
+    animation: app-notification-spin 0.6s linear infinite;
+  }
+
+  @keyframes app-notification-spin {
+    to { transform: rotate(360deg); }
+  }
 }

modules/notifications/web/js/components/app-notification-bell.js

@@ -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' },