style(notifications): редизайн dropdown — иконки по типу, левый акцент у непрочитанных, sticky-шапка

js/notifications.js

@@ -3,6 +3,30 @@
   let _notifOpen = false;
   let _sse = null;
 
+  const _ICONS = {
+    achievement: { bg:'#FEF3C7', c:'#D97706',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>' },
+    assignment: { bg:'#DBEAFE', c:'#2563EB',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/></svg>' },
+    grade: { bg:'#DCFCE7', c:'#16A34A',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>' },
+    revision: { bg:'#FEE2E2', c:'#DC2626',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' },
+    submission: { bg:'#E0F2FE', c:'#0284C7',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' },
+    session: { bg:'rgba(155,93,229,.12)', c:'#9B5DE5',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>' },
+    join: { bg:'#F0FDF4', c:'#16A34A',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>' },
+    announcement: { bg:'#EDE9FE', c:'#7C3AED',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 11.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9a16 16 0 0 0 6.29 6.29l1.36-1.36a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>' },
+  };
+  function _icon(type) {
+    const t = _ICONS[type] || { bg:'rgba(155,93,229,.1)', c:'#9B5DE5',
+      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>' };
+    return `<div class="notif-icon" style="--ni:${t.bg};--nc:${t.c}">${t.svg}</div>`;
+  }
+
   function renderNotifDrop(data) {
     const drop  = document.getElementById('notif-drop');
     const badge = document.getElementById('notif-badge');
@@ -11,13 +35,19 @@
     else badge.style.display = 'none';
     drop.innerHTML = `
       <div class="notif-drop-header">
-        <span class="notif-drop-title">Уведомления</span>
+        <div class="notif-drop-header-left">
+          <span class="notif-drop-title">Уведомления</span>
+          ${data.unread > 0 ? `<span class="notif-unread-badge">${data.unread}</span>` : ''}
+        </div>
         ${data.unread > 0 ? `<button class="notif-read-all" onclick="LS.notif.markAllRead()">Отметить все прочитанными</button>` : ''}
       </div>
       ${data.notifications.length ? data.notifications.map(n => `
         <a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="LS.notif.click(event,${n.id},'${LS.safeHref(n.link)}')">
-          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
-          <div><div class="notif-msg">${LS.esc(n.message)}</div><div class="notif-time">${LS.fmtRelTime(n.created_at)}</div></div>
+          ${_icon(n.type)}
+          <div class="notif-body">
+            <div class="notif-msg">${LS.esc(n.message)}</div>
+            <div class="notif-time">${LS.fmtRelTime(n.created_at)}</div>
+          </div>
         </a>`).join('') : '<div class="notif-empty">Уведомлений нет</div>'}`;
   }