feat(ui): старт с личных сообщений и бейдж непрочитанных

shine-UI/js/components/toolbar.js

@@ -1,4 +1,5 @@
 import { resolveToolbarActive } from '../router.js';
+import { state } from '../state.js';
 
 const ITEMS = [
   { pageId: 'messages-list', label: 'Личные сообщения', icon: '💬' },
@@ -8,15 +9,29 @@ const ITEMS = [
   { pageId: 'profile-view', label: 'Профиль', icon: '👤' },
 ];
 
+function getTotalUnreadMessages() {
+  const chats = Object.values(state.chats || {});
+  let total = 0;
+  chats.forEach((messages) => {
+    if (!Array.isArray(messages)) return;
+    messages.forEach((msg) => {
+      if (msg?.from === 'in' && msg?.unread) total += 1;
+    });
+  });
+  return total;
+}
+
 export function renderToolbar(currentPageId, navigate) {
   const root = document.createElement('nav');
   root.className = 'toolbar';
   const active = resolveToolbarActive(currentPageId);
+  const unreadTotal = getTotalUnreadMessages();
 
   ITEMS.forEach((item) => {
     const btn = document.createElement('button');
     const isProfile = item.pageId === 'profile-view';
-    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}`;
+    const isMessages = item.pageId === 'messages-list';
+    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}${isMessages ? ' toolbar-btn-messages' : ''}`;
     if (isProfile) {
       btn.innerHTML = `
         <span>${item.icon}</span>
@@ -31,6 +46,13 @@ export function renderToolbar(currentPageId, navigate) {
     } else {
       btn.innerHTML = `<span>${item.icon}</span><span>${item.label}</span>`;
     }
+    if (isMessages && unreadTotal > 0) {
+      const badge = document.createElement('span');
+      badge.className = 'toolbar-unread-badge';
+      badge.textContent = unreadTotal > 99 ? '99+' : String(unreadTotal);
+      badge.setAttribute('aria-label', `Непрочитанных сообщений: ${badge.textContent}`);
+      btn.append(badge);
+    }
     btn.addEventListener('click', () => navigate(item.pageId));
     root.append(btn);
   });