accounts and email

apps/server/internal/httpserver/static/notification-bell.js

@@ -4,20 +4,28 @@
   const bell = document.querySelector('[data-notification-bell]');
   if (!bell) return;
 
+  const trigger = bell.querySelector('.notification-bell__trigger');
   const countEl = bell.querySelector('[data-unread-count]');
   const dropdown = bell.querySelector('[data-notification-dropdown]');
   let isOpen = false;
 
-  bell.addEventListener('click', () => {
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
     isOpen = !isOpen;
     dropdown.hidden = !isOpen;
+    trigger.setAttribute('aria-expanded', String(isOpen));
     if (isOpen) loadNotifications();
   });
 
-  document.addEventListener('click', (e) => {
-    if (!bell.contains(e.target)) {
+  dropdown.addEventListener('click', (e) => {
+    e.stopPropagation();
+  });
+
+  document.addEventListener('click', () => {
+    if (isOpen) {
       isOpen = false;
       dropdown.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
     }
   });
 
@@ -51,8 +59,17 @@
     if (!list) return;
     list.innerHTML = '';
 
+    // Header
+    const header = document.createElement('li');
+    header.className = 'notification-header';
+    header.textContent = 'Notifications';
+    list.appendChild(header);
+
     if (!notifications.length) {
-      list.innerHTML = '<li class="notification-empty">No notifications</li>';
+      const empty = document.createElement('li');
+      empty.className = 'notification-empty';
+      empty.textContent = 'No notifications';
+      list.appendChild(empty);
       return;
     }