Обновить UI-ветку

build.gradle

@@ -1,3 +1,5 @@
+import org.bouncycastle.util.Properties
+
 plugins {
     id 'java'
     id 'application'

shine-UI/index.html

@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="./img/logo.jpg" />
     <title>СИЯНИЕ</title>
     <script>
-window.__SHINE_BUILD_HASH__ = '20260822132200';
+window.__SHINE_BUILD_HASH__ = '20260823123601';
       window.__SHINE_CLIENT_VERSION__ = '1.2.10';
     </script>
     <script>

shine-UI/js/app.js

@@ -91,7 +91,7 @@ import * as channelThreadView from './pages/channel-thread-view.js';
 import * as addChannelView from './pages/add-channel-view.js';
 import * as addPersonalPublicChatView from './pages/add-personal-public-chat-view.js';
 import * as networkView from './pages/network-view.js?v=202608221226';
-import * as notificationsView from './pages/notifications-view.js?v=202608221226';
+import * as notificationsView from './pages/notifications-view.js?v=202608221354';
 
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';
 const DM_UNSUPPORTED_FORMAT_TEXT = 'Формат сообщения не поддерживается';

shine-UI/js/pages/channels-list.js

@@ -938,6 +938,9 @@ function closeTopChannelsMenu(listState) {
     listState.topMenuCleanup();
   }
   listState.topMenuCleanup = null;
+  listState.topMenuAnchor?.setAttribute('aria-expanded', 'false');
+  listState.topMenuAnchor?.classList.remove('menu-open-pressed');
+  listState.topMenuAnchor = null;
   const root = document.getElementById('modal-root');
   if (root) {
     const overlay = root.querySelector(`#${TOP_MENU_OVERLAY_ID}`);
@@ -989,9 +992,6 @@ function openTopChannelsMenu({
     if (item.divider) {
       const divider = document.createElement('div');
       divider.className = 'channel-menu-divider';
-      divider.style.height = '1px';
-      divider.style.background = 'rgba(255,255,255,0.08)';
-      divider.style.margin = '6px 0';
       menu.append(divider);
       return;
     }
@@ -1008,6 +1008,9 @@ function openTopChannelsMenu({
 
   overlay.append(menu);
   root.append(overlay);
+  anchorEl.setAttribute('aria-expanded', 'true');
+  anchorEl.classList.add('menu-open-pressed');
+  listState.topMenuAnchor = anchorEl;
 
   const onOverlayClick = (event) => {
     if (event.target === overlay) closeTopChannelsMenu(listState);
@@ -1355,6 +1358,7 @@ export function render({ navigate, route, chrome }) {
   const listState = {
     openMenuId: null,
     topMenuCleanup: null,
+    topMenuAnchor: null,
     notificationsState,
     revealedCounters: new Set(),
     channels: [],
@@ -1381,11 +1385,16 @@ export function render({ navigate, route, chrome }) {
   topMenuBtn.type = 'button';
   topMenuBtn.className = 'icon-btn channels-top-more-btn';
   topMenuBtn.setAttribute('aria-label', 'Ещё действия');
+  topMenuBtn.setAttribute('aria-haspopup', 'menu');
+  topMenuBtn.setAttribute('aria-expanded', 'false');
   topMenuBtn.title = 'Ещё действия';
   topMenuBtn.append(createOverflowDots());
   topMenuBtn.addEventListener('click', (event) => {
     event.stopPropagation();
-    animatePress(topMenuBtn);
+    if (listState.topMenuAnchor === topMenuBtn) {
+      closeTopChannelsMenu(listState);
+      return;
+    }
     openTopChannelsMenu({
       listState,
       anchorEl: topMenuBtn,

shine-UI/js/pages/messages-list.js

@@ -1,22 +1,34 @@
-import { directMessages } from '../mock-data.js';
 import {
-  getChatMessages,
+  authService,
   isSessionInvalidError,
   normalizeDmChatId,
   setContacts,
   state,
   terminateCurrentSession,
 } from '../state.js';
-import { loadCurrentRelations } from '../services/user-connections.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
 import { loadProfileSnapshot } from '../services/user-profile-params.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'messages-list', title: 'Личные сообщения' };
+const PREVIEW_MAX_LEN = 200;
+const SVG_CHEVRON = `
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M9 6l6 6-6 6"></path>
+  </svg>
+`;
+const DM_BLOB_PREVIEW_CACHE = new Map();
+const DM_BLOB_PREVIEW_PENDING = new Map();
 const dmAvatarSnapshotCache = new Map();
 const dmAvatarPendingByLogin = new Map();
 
+const RELATION_ORDER = new Map([
+  ['close_friend', 0],
+  ['contact', 1],
+  ['none', 2],
+]);
+
 async function loadDmAvatarSnapshot(login) {
   const cleanLogin = String(login || '').trim();
   if (!cleanLogin) return null;
@@ -68,10 +80,72 @@ function createDmAvatar(login, { className = '' } = {}) {
   return avatarEl;
 }
 
-function resolveLastMessagePreview(text = '') {
-  const parsed = parseDmTechBlocks(String(text || ''));
-  const display = String(parsed.displayText || '').trim();
-  return display || '';
+function normalizeRelationFlag(value) {
+  const clean = String(value || '').trim().toLowerCase();
+  if (clean === 'close_friend' || clean === 'contact') return clean;
+  return 'none';
+}
+
+function relationOrder(flag) {
+  return RELATION_ORDER.get(normalizeRelationFlag(flag)) ?? 99;
+}
+
+function relationLabel(flag) {
+  switch (normalizeRelationFlag(flag)) {
+    case 'close_friend':
+      return 'близкий друг';
+    case 'contact':
+      return 'контакт';
+    default:
+      return 'не в контактах';
+  }
+}
+
+function clipPreviewText(text, maxLen = PREVIEW_MAX_LEN) {
+  const normalized = String(text || '').replace(/\s+/g, ' ').trim();
+  if (!normalized) return '';
+  if (normalized.length <= maxLen) return normalized;
+  return `${normalized.slice(0, maxLen - 1)}…`;
+}
+
+async function resolveDialogPreview(dialog) {
+  const blobB64 = String(dialog?.lastMessageBlobB64 || '').trim();
+  if (!blobB64) return 'Диалог пока пуст.';
+
+  const cacheKey = [
+    blobB64,
+    String(state.session.login || '').trim().toLowerCase(),
+    String(state.session.storagePwdInMemory || '').trim(),
+  ].join('|');
+
+  if (DM_BLOB_PREVIEW_CACHE.has(cacheKey)) return DM_BLOB_PREVIEW_CACHE.get(cacheKey);
+  if (DM_BLOB_PREVIEW_PENDING.has(cacheKey)) return DM_BLOB_PREVIEW_PENDING.get(cacheKey);
+
+  const pending = (async () => {
+    try {
+      const parsed = authService.parseSignedMessageBlob(blobB64);
+      const decrypted = await authService.decryptSignedMessageContent({
+        parsed,
+        blobB64,
+        login: state.session.login,
+        storagePwd: state.session.storagePwdInMemory,
+      });
+      const parsedText = parseDmTechBlocks(String(decrypted?.text || ''));
+      const display = clipPreviewText(String(parsedText.displayText || '').trim());
+      const result = display || 'Сообщение';
+      DM_BLOB_PREVIEW_CACHE.set(cacheKey, result);
+      return result;
+    } catch {
+      const fallback = 'Сообщение недоступно';
+      DM_BLOB_PREVIEW_CACHE.set(cacheKey, fallback);
+      return fallback;
+    } finally {
+      DM_BLOB_PREVIEW_PENDING.delete(cacheKey);
+    }
+  })();
+
+  DM_BLOB_PREVIEW_PENDING.set(cacheKey, pending);
+  return pending;
 }
 
 function formatChatRowTime(ts) {
@@ -86,44 +160,35 @@ function formatChatRowTime(ts) {
 }
 
 function compareChatRows(a, b) {
-  const timeA = Number(a?.lastTimeMs || 0);
-  const timeB = Number(b?.lastTimeMs || 0);
+  const timeA = Number(a?.lastMessageTimeMs || 0);
+  const timeB = Number(b?.lastMessageTimeMs || 0);
   if (timeA !== timeB) return timeB - timeA;
-  const nameA = String(a?.name || '').toLowerCase();
-  const nameB = String(b?.name || '').toLowerCase();
+  const nameA = String(a?.peerLogin || '').toLowerCase();
+  const nameB = String(b?.peerLogin || '').toLowerCase();
   return nameA.localeCompare(nameB, 'ru');
 }
 
 export function render({ navigate, chrome }) {
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-list-screen';
-  const login = String(state.session.login || '').trim();
-
   const head = document.createElement('header');
   head.className = 'dm-head';
   head.innerHTML = `
-    <div class="dm-head-brand">
-      <div class="dm-head-avatar-slot"></div>
-    </div>
-    <h1 class="dm-head-title">Контакты</h1>
+    <div class="dm-head-brand" aria-hidden="true"></div>
+    <h1 class="dm-head-title">Чаты</h1>
     <div class="dm-head-menu-wrap">
-      <button type="button" class="dm-head-menu-btn" aria-label="Меню контактов" aria-haspopup="menu" aria-expanded="false">
-      </button>
+      <button type="button" class="dm-head-menu-btn" aria-label="Меню чатов" aria-haspopup="menu" aria-expanded="false"></button>
       <div class="dm-head-menu" role="menu" hidden>
         <button type="button" class="dm-head-menu-item" role="menuitem" data-action="search-contacts">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="11" cy="11" r="6.5"></circle>
             <path d="M16 16l4 4"></path>
           </svg>
-          <span>Поиск контактов</span>
+          <span>Поиск пользователей</span>
         </button>
       </div>
     </div>
   `;
-  const headAvatarSlot = head.querySelector('.dm-head-avatar-slot');
-  if (headAvatarSlot) {
-    headAvatarSlot.append(createDmAvatar(login, { className: 'dm-head-avatar' }));
-  }
   const menuButton = head.querySelector('.dm-head-menu-btn');
   menuButton?.append(createOverflowDots());
 
@@ -135,11 +200,15 @@ export function render({ navigate, chrome }) {
   menuTemplate?.remove();
 
   let menuPortal = null;
+  let menuBackdrop = null;
 
   const closeHeadMenu = () => {
     menuPortal?.remove();
+    menuBackdrop?.remove();
     menuPortal = null;
+    menuBackdrop = null;
     menuButton?.setAttribute('aria-expanded', 'false');
+    menuButton?.classList.remove('menu-open-pressed');
     menuWrap?.classList.remove('is-open');
   };
 
@@ -147,10 +216,16 @@ export function render({ navigate, chrome }) {
     if (!menuPortal || !menuButton) return;
     const rect = menuButton.getBoundingClientRect();
     const margin = 10;
-    const menuWidth = menuPortal.offsetWidth || 206;
+    const menuRect = menuPortal.getBoundingClientRect();
+    const menuWidth = menuRect.width || menuPortal.offsetWidth || 190;
+    const menuHeight = menuRect.height || menuPortal.offsetHeight || 56;
     const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
+    const below = rect.bottom + 7;
+    const top = below + menuHeight <= window.innerHeight - margin
+      ? below
+      : Math.max(margin, rect.top - menuHeight - 7);
     menuPortal.style.left = `${Math.round(left)}px`;
-    menuPortal.style.top = `${Math.round(rect.bottom + 7)}px`;
+    menuPortal.style.top = `${Math.round(top)}px`;
   };
 
   const openHeadMenu = () => {
@@ -160,11 +235,7 @@ export function render({ navigate, chrome }) {
     portal.setAttribute('role', 'menu');
     portal.innerHTML = `
       <button type="button" class="dm-head-menu-item" role="menuitem" data-action="search-contacts">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <circle cx="11" cy="11" r="6.5"></circle>
-          <path d="M16 16l4 4"></path>
-        </svg>
-        <span>Поиск контактов</span>
+        <span>Поиск пользователей</span>
       </button>
     `;
 
@@ -176,11 +247,17 @@ export function render({ navigate, chrome }) {
     });
     portal.addEventListener('click', (event) => event.stopPropagation());
 
-    document.body.append(portal);
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-menu-dim-layer';
+    backdrop.addEventListener('click', closeHeadMenu);
+    document.body.append(backdrop, portal);
+    menuBackdrop = backdrop;
     menuPortal = portal;
     menuButton.setAttribute('aria-expanded', 'true');
+    menuButton.classList.add('menu-open-pressed');
     menuWrap?.classList.add('is-open');
     positionHeadMenu();
+    requestAnimationFrame(positionHeadMenu);
   };
 
   menuButton?.addEventListener('click', (event) => {
@@ -209,10 +286,14 @@ export function render({ navigate, chrome }) {
   const list = document.createElement('div');
   list.className = 'stack dm-list';
 
-  function renderRow(item) {
+function renderRow(item) {
     const row = document.createElement('article');
     row.className = 'list-item dm-dialog-card';
-    const avatarEl = createDmAvatar(item.id);
+    const relationFlag = normalizeRelationFlag(item.relationFlag);
+    const relationBadge = relationFlag === 'none'
+      ? 'не в контактах'
+      : relationLabel(relationFlag);
+    const avatarEl = createDmAvatar(item.peerLogin);
     avatarEl.classList.add('avatar');
     const avatarWrap = document.createElement('div');
     avatarWrap.className = 'dm-av dm-av--default';
@@ -221,25 +302,30 @@ export function render({ navigate, chrome }) {
       <div class="dm-row-main">
         <div class="dm-row-titleline dm-row-titlewrap">
           <strong class="dm-row-title"></strong>
-          ${item.notInContacts ? '<span class="dm-contact-note">не в контактах</span>' : ''}
+          <span class="dm-contact-note">${relationBadge}</span>
         </div>
         <p class="dm-row-last-message"></p>
       </div>
       <div class="dm-row-meta-col">
-        ${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
+        ${item.unreadCount ? `<span class="dm-unread-badge">${item.unreadCount > 99 ? '99+' : item.unreadCount}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
         <div class="dm-row-meta-line">
-          ${item.time ? '<span class="dm-row-time"></span>' : '<span class="dm-row-time dm-row-time--empty"></span>'}
+          ${item.lastMessageTimeMs ? '<span class="dm-row-time"></span>' : '<span class="dm-row-time dm-row-time--empty"></span>'}
+          <span class="dm-chevron">${SVG_CHEVRON}</span>
         </div>
       </div>
     `;
     const titleEl = row.querySelector('.dm-row-title');
     const previewEl = row.querySelector('.dm-row-last-message');
     const timeEl = row.querySelector('.dm-row-time');
-    if (titleEl) titleEl.textContent = String(item.name || '');
-    if (previewEl) previewEl.textContent = resolveLastMessagePreview(item.lastMessage) || 'Диалог пока пуст.';
-    if (timeEl) timeEl.textContent = String(item.time || '');
+    if (titleEl) titleEl.textContent = String(item.peerLogin || '');
+    if (previewEl) previewEl.textContent = 'Загрузка…';
+    if (timeEl) timeEl.textContent = formatChatRowTime(item.lastMessageTimeMs);
     row.prepend(avatarWrap);
-    row.addEventListener('click', () => navigate(`chat/${encodeURIComponent(normalizeDmChatId(item.id))}`));
+    void resolveDialogPreview(item).then((text) => {
+      if (!previewEl?.isConnected) return;
+      previewEl.textContent = String(text || '').trim() || 'Диалог пока пуст.';
+    });
+    row.addEventListener('click', () => navigate(`chat/${encodeURIComponent(normalizeDmChatId(item.peerLogin))}`));
     return row;
   }
 
@@ -253,62 +339,64 @@ export function render({ navigate, chrome }) {
     }
 
     try {
-      const relations = await loadCurrentRelations();
-      const contacts = relations.outContacts || [];
+      const payload = await authService.listContacts();
+      const dialogs = Array.isArray(payload?.dialogs) ? payload.dialogs : [];
+      const contacts = Array.isArray(payload?.contacts) ? payload.contacts : [];
       setContacts(contacts);
       list.innerHTML = '';
 
-      const contactRows = contacts.map((login) => {
-        const preview = directMessages.find((item) => item.id.toLowerCase() === login.toLowerCase());
-        const canonicalLogin = normalizeDmChatId(login);
-        const chat = getChatMessages(canonicalLogin);
-        const lastChat = chat[chat.length - 1];
-        const unread = chat.filter((m) => m?.from === 'in' && m?.unread).length;
-        const lastTimeMs = Number(lastChat?.createdAtMs || 0);
-        return {
-          id: canonicalLogin,
-          name: preview?.name || login,
-          lastMessage: lastChat?.text || preview?.lastMessage || 'Диалог пока пуст.',
-          time: formatChatRowTime(lastTimeMs),
-          unread,
-          notInContacts: false,
-          lastTimeMs,
+      const byPeer = new Map();
+      dialogs.forEach((dialog) => {
+        const peerLogin = String(dialog?.peerLogin || '').trim();
+        if (!peerLogin) return;
+        const key = peerLogin.toLowerCase();
+        const relationFlag = normalizeRelationFlag(dialog?.relationFlag);
+        const next = {
+          id: peerLogin,
+          peerLogin,
+          relationFlag,
+          lastMessageBlobB64: String(dialog?.lastMessageBlobB64 || ''),
+          lastMessageTimeMs: Number(dialog?.lastMessageTimeMs || 0),
+          unreadCount: Number(dialog?.unreadCount || 0),
+          hasDialog: Boolean(dialog?.hasDialog),
         };
+        const current = byPeer.get(key);
+        if (!current) {
+          byPeer.set(key, next);
+          return;
+        }
+        const currentRank = relationOrder(current.relationFlag);
+        const nextRank = relationOrder(relationFlag);
+        if (nextRank < currentRank || (nextRank === currentRank && next.lastMessageTimeMs > current.lastMessageTimeMs)) {
+          byPeer.set(key, next);
+        }
       });
 
-      const allChatIds = Object.keys(state.chats || {})
-        .filter((id) => id && id.toLowerCase() !== String(state.session.login || '').toLowerCase())
-        .filter((id) => (getChatMessages(id) || []).length > 0);
+      const rows = Array.from(byPeer.values()).sort((a, b) => {
+        const orderA = relationOrder(a.relationFlag);
+        const orderB = relationOrder(b.relationFlag);
+        if (orderA !== orderB) return orderA - orderB;
+        return compareChatRows(a, b);
+      });
 
-      const contactKeys = new Set(contacts.map((x) => String(x || '').toLowerCase()));
-      const extraRows = allChatIds
-        .filter((login) => !contactKeys.has(String(login || '').toLowerCase()))
-        .map((login) => {
-          const chat = getChatMessages(login);
-          const lastChat = chat[chat.length - 1];
-          const unread = chat.filter((m) => m?.from === 'in' && m?.unread).length;
-          const lastTimeMs = Number(lastChat?.createdAtMs || 0);
-          return {
-            id: login,
-            name: login,
-            lastMessage: lastChat?.text || 'Диалог пока пуст.',
-            time: formatChatRowTime(lastTimeMs),
-            unread,
-            notInContacts: true,
-            lastTimeMs,
-          };
-        });
-
-      const rows = [...contactRows, ...extraRows].sort(compareChatRows);
       if (!rows.length) {
         const empty = document.createElement('div');
         empty.className = 'card meta-muted';
-        empty.textContent = 'Пока нет ни контактов, ни сообщений';
+        empty.textContent = 'Пока нет диалогов';
         list.append(empty);
         return;
       }
 
-      rows.forEach((item) => list.append(renderRow(item)));
+      let dividerInserted = false;
+      rows.forEach((item) => {
+        if (!dividerInserted && normalizeRelationFlag(item.relationFlag) === 'none' && list.childNodes.length > 0) {
+          const divider = document.createElement('div');
+          divider.className = 'dm-divider';
+          list.append(divider);
+          dividerInserted = true;
+        }
+        list.append(renderRow(item));
+      });
     } catch (error) {
       if (isSessionInvalidError(error)) {
         list.innerHTML = '';

shine-UI/js/pages/network-view.js

@@ -1,4 +1,5 @@
 import { renderHeader } from '../components/header.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { authService, state } from '../state.js';
 import { makeProfileRoute } from '../services/shine-routes.js';
 import { makeProfileLinksRoute } from '../services/shine-routes.js';
@@ -493,15 +494,113 @@ export function render({ navigate, route, chrome } = {}) {
     }
   }
 
+  let topMenuPortal = null;
+  let topMenuBackdrop = null;
+  let topMenuButton = null;
+
+  const closeTopMenu = () => {
+    topMenuPortal?.remove();
+    topMenuBackdrop?.remove();
+    topMenuPortal = null;
+    topMenuBackdrop = null;
+    topMenuButton?.setAttribute('aria-expanded', 'false');
+    topMenuButton?.classList.remove('menu-open-pressed');
+  };
+
+  const positionTopMenu = () => {
+    if (!topMenuPortal || !topMenuButton) return;
+    const rect = topMenuButton.getBoundingClientRect();
+    const margin = 10;
+    const menuRect = topMenuPortal.getBoundingClientRect();
+    const menuWidth = menuRect.width || topMenuPortal.offsetWidth || 190;
+    const menuHeight = menuRect.height || topMenuPortal.offsetHeight || 56;
+    const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
+    const below = rect.bottom + 7;
+    const top = below + menuHeight <= window.innerHeight - margin
+      ? below
+      : Math.max(margin, rect.top - menuHeight - 7);
+    topMenuPortal.style.left = `${Math.round(left)}px`;
+    topMenuPortal.style.top = `${Math.round(top)}px`;
+  };
+
+  const openTopMenu = () => {
+    if (!topMenuButton || topMenuPortal) return;
+    const portal = document.createElement('div');
+    portal.className = 'dm-head-menu dm-head-menu--portal network-head-menu';
+    portal.setAttribute('role', 'menu');
+    portal.innerHTML = `
+      <button type="button" class="dm-head-menu-item network-head-menu-item" role="menuitem" data-action="find-person">
+        <span>Найти человека</span>
+      </button>
+    `;
+    portal.querySelector('[data-action="find-person"]')?.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closeTopMenu();
+      openSearchModal();
+    });
+    portal.addEventListener('click', (event) => event.stopPropagation());
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-menu-dim-layer';
+    backdrop.addEventListener('click', closeTopMenu);
+    document.body.append(backdrop, portal);
+    topMenuBackdrop = backdrop;
+    topMenuPortal = portal;
+    topMenuButton.setAttribute('aria-expanded', 'true');
+    topMenuButton.classList.add('menu-open-pressed');
+    positionTopMenu();
+    requestAnimationFrame(positionTopMenu);
+  };
+
+  const toggleTopMenu = (event) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    if (topMenuPortal) closeTopMenu();
+    else openTopMenu();
+  };
+
   const header = renderHeader({
     title: 'Связи',
     rightActions: [
-      { label: 'Найти', onClick: openSearchModal },
+      {
+        iconNode: createOverflowDots(),
+        className: 'network-top-more-btn',
+        title: 'Ещё действия',
+        ariaLabel: 'Меню связей',
+        onClick: toggleTopMenu,
+      },
     ],
   });
+  // «Связи» используют тот же общий topbar, что и остальные страницы.
+  // Отдельный класс нужен только для page-specific fade графа, не для геометрии header.
+  header.classList.add('network-topbar');
+  topMenuButton = header.querySelector('.network-top-more-btn');
+  topMenuButton?.setAttribute('aria-haspopup', 'menu');
+  topMenuButton?.setAttribute('aria-expanded', 'false');
+
+  const onTopMenuOutsideClick = (event) => {
+    if (!topMenuPortal) return;
+    if (topMenuPortal.contains(event.target) || topMenuButton?.contains(event.target)) return;
+    closeTopMenu();
+  };
+  const onTopMenuKeydown = (event) => {
+    if (event.key !== 'Escape' || !topMenuPortal) return;
+    closeTopMenu();
+    topMenuButton?.focus();
+  };
+  const onTopMenuViewportChange = () => positionTopMenu();
+  document.addEventListener('click', onTopMenuOutsideClick);
+  document.addEventListener('keydown', onTopMenuKeydown);
+  window.addEventListener('resize', onTopMenuViewportChange, { passive: true });
+  window.addEventListener('scroll', onTopMenuViewportChange, { passive: true, capture: true });
 
   // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
+    closeTopMenu();
+    document.removeEventListener('click', onTopMenuOutsideClick);
+    document.removeEventListener('keydown', onTopMenuKeydown);
+    window.removeEventListener('resize', onTopMenuViewportChange);
+    window.removeEventListener('scroll', onTopMenuViewportChange, true);
     if (engine) engine.destroy();
     engine = null;
     appScreenEl?.classList.remove('network-scroll-lock');

shine-UI/js/pages/notifications-view.js

@@ -134,7 +134,7 @@ async function enrichItem(item, activeTab) {
 
 function renderEmpty(activeTab) {
   const card = document.createElement('article');
-  card.className = 'card stack';
+  card.className = 'card stack notification-empty-state';
   const title = document.createElement('strong');
   title.textContent = activeTab === 'events' ? 'Пока нет событий' : 'Пока нет ответов';
   const text = document.createElement('p');

shine-UI/js/pages/profile-view.js

@@ -114,11 +114,15 @@ export function render({ navigate, chrome }) {
   const profileMenuButton = topbar.querySelector('.profile-head-menu-btn');
   profileMenuButton?.append(createOverflowDots());
   let profileMenuPortal = null;
+  let profileMenuBackdrop = null;
 
   const closeProfileMenu = () => {
     profileMenuPortal?.remove();
+    profileMenuBackdrop?.remove();
     profileMenuPortal = null;
+    profileMenuBackdrop = null;
     profileMenuButton?.setAttribute('aria-expanded', 'false');
+    profileMenuButton?.classList.remove('menu-open-pressed');
     profileMenuWrap?.classList.remove('is-open');
   };
 
@@ -126,10 +130,16 @@ export function render({ navigate, chrome }) {
     if (!profileMenuPortal || !profileMenuButton) return;
     const rect = profileMenuButton.getBoundingClientRect();
     const margin = 10;
-    const menuWidth = profileMenuPortal.offsetWidth || 224;
+    const menuRect = profileMenuPortal.getBoundingClientRect();
+    const menuWidth = menuRect.width || profileMenuPortal.offsetWidth || 210;
+    const menuHeight = menuRect.height || profileMenuPortal.offsetHeight || 144;
     const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
+    const below = rect.bottom + 7;
+    const top = below + menuHeight <= window.innerHeight - margin
+      ? below
+      : Math.max(margin, rect.top - menuHeight - 7);
     profileMenuPortal.style.left = `${Math.round(left)}px`;
-    profileMenuPortal.style.top = `${Math.round(rect.bottom + 7)}px`;
+    profileMenuPortal.style.top = `${Math.round(top)}px`;
   };
 
   const openProfileMenu = () => {
@@ -139,15 +149,12 @@ export function render({ navigate, chrome }) {
     portal.setAttribute('role', 'menu');
     portal.innerHTML = `
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="profile">
-        <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
         <span>Редактировать профиль</span>
       </button>
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="wallet">
-        <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
         <span>Кошелёк</span>
       </button>
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="settings">
-        <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
         <span>Настройки</span>
       </button>
     `;
@@ -161,11 +168,17 @@ export function render({ navigate, chrome }) {
     portal.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => goTo('settings-view'));
     portal.addEventListener('click', (event) => event.stopPropagation());
 
-    document.body.append(portal);
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-menu-dim-layer';
+    backdrop.addEventListener('click', closeProfileMenu);
+    document.body.append(backdrop, portal);
+    profileMenuBackdrop = backdrop;
     profileMenuPortal = portal;
     profileMenuButton.setAttribute('aria-expanded', 'true');
+    profileMenuButton.classList.add('menu-open-pressed');
     profileMenuWrap?.classList.add('is-open');
     positionProfileMenu();
+    requestAnimationFrame(positionProfileMenu);
   };
 
   profileMenuButton?.addEventListener('click', (event) => {

shine-UI/styles/buttons-white.css

@@ -221,3 +221,289 @@
     0 0 12px rgba(72, 145, 255, 0.34) !important;
   filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
 }
+
+/* ===== Dropdown menu polish: persistent overflow press + text-only glowing rows ===== */
+/* Menu rows stay visually transparent in every interaction state. The menu panel itself
+ * remains translucent, while each action is represented only by its glowing label. */
+:root .dm-head-menu-item,
+:root .dm-head-menu-item:hover,
+:root .dm-head-menu-item:focus,
+:root .dm-head-menu-item:focus-visible,
+:root .dm-head-menu-item:active,
+:root .channel-menu-item,
+:root .channel-menu-item:hover,
+:root .channel-menu-item:focus,
+:root .channel-menu-item:focus-visible,
+:root .channel-menu-item:active,
+:root .channel-menu-item.destructive,
+:root .channel-menu-item.destructive:hover,
+:root .channel-menu-item.destructive:focus-visible,
+:root .channel-menu-item.destructive:active {
+  color: #F7FBFF !important;
+  background: transparent !important;
+  background-image: none !important;
+  border: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  transform: none !important;
+  text-shadow:
+    0 0 5px rgba(92, 190, 255, 0.72),
+    0 0 12px rgba(72, 145, 255, 0.34) !important;
+  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.34)) !important;
+}
+
+/* Hover/focus is expressed only by a slightly stronger glyph glow, never a row plate. */
+:root .dm-head-menu-item:hover,
+:root .dm-head-menu-item:focus-visible,
+:root .channel-menu-item:hover,
+:root .channel-menu-item:focus-visible {
+  color: #FFFFFF !important;
+  text-shadow:
+    0 0 6px rgba(110, 205, 255, 0.86),
+    0 0 15px rgba(72, 145, 255, 0.46) !important;
+  filter: drop-shadow(0 0 5px rgba(92, 190, 255, 0.46)) !important;
+}
+
+/* Keep the overflow trigger visibly pressed for exactly as long as its menu is open. */
+:root .topbar-slot .dm-head-menu-btn[aria-expanded='true'],
+:root .topbar-slot .channels-top-more-btn[aria-expanded='true'],
+:root .topbar-slot .network-top-more-btn[aria-expanded='true'],
+:root .network-header-overlay .network-top-more-btn[aria-expanded='true'] {
+  color: #FFFFFF !important;
+  background: rgba(0, 0, 0, 0.12) !important;
+  border: 0 !important;
+  box-shadow:
+    inset 0 3px 8px rgba(0, 0, 0, 0.58),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
+  transform: translateY(1px) scale(0.97) !important;
+  text-shadow:
+    0 0 5px rgba(92, 190, 255, 0.72),
+    0 0 12px rgba(72, 145, 255, 0.34) !important;
+  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
+}
+
+
+/* ===== Authoritative open-menu trigger state (2026-08-23) =====
+ * A dedicated JS class, not :active/:focus, owns the pressed state while a menu is open.
+ * Kept at the very end of the stylesheet so older compatibility rules cannot cancel it. */
+:root .dm-head-menu-btn.menu-open-pressed,
+:root .channels-top-more-btn.menu-open-pressed,
+:root .network-top-more-btn.menu-open-pressed,
+:root .topbar-slot .dm-head-menu-btn.menu-open-pressed,
+:root .topbar-slot .channels-top-more-btn.menu-open-pressed,
+:root .topbar-slot .network-top-more-btn.menu-open-pressed,
+:root .network-header-overlay .network-top-more-btn.menu-open-pressed {
+  color: #FFFFFF !important;
+  background: rgba(0, 0, 0, 0.14) !important;
+  border: 0 !important;
+  box-shadow:
+    inset 0 3px 8px rgba(0, 0, 0, 0.62),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.09) !important;
+  transform: translateY(1px) scale(0.97) !important;
+  text-shadow:
+    0 0 5px rgba(92, 190, 255, 0.76),
+    0 0 12px rgba(72, 145, 255, 0.38) !important;
+  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
+  animation: none !important;
+}
+
+/* ===== Final dropdown behavior: truly transparent menu + persistent pressed trigger =====
+ * The dropdown itself has no visual surface. Only the global dim layer affects content
+ * behind it. The overflow trigger gets its own inset pseudo-layer so the pressed state
+ * cannot be cancelled by the generic button reset after pointer release. */
+:root .dm-head-menu,
+:root .dm-head-menu--portal,
+:root .channel-menu-wrap,
+:root .channel-menu-wrap--portal {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+}
+
+:root .dm-head-menu::before,
+:root .dm-head-menu::after,
+:root .channel-menu-wrap::before,
+:root .channel-menu-wrap::after,
+:root .channel-menu-wrap--portal::before,
+:root .channel-menu-wrap--portal::after {
+  content: none !important;
+  display: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* No separator or hover plate: the dropdown is literally labels over faded content. */
+:root .channel-menu-divider {
+  display: none !important;
+}
+
+:root .dm-head-menu-item,
+:root .dm-head-menu-item:hover,
+:root .dm-head-menu-item:focus,
+:root .dm-head-menu-item:focus-visible,
+:root .dm-head-menu-item:active,
+:root .channel-menu-item,
+:root .channel-menu-item:hover,
+:root .channel-menu-item:focus,
+:root .channel-menu-item:focus-visible,
+:root .channel-menu-item:active,
+:root .channel-menu-item.destructive,
+:root .channel-menu-item.destructive:hover,
+:root .channel-menu-item.destructive:focus-visible,
+:root .channel-menu-item.destructive:active {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Keep the channels backdrop out of the toolbar itself, matching the other pages. */
+:root .channels-menu-overlay {
+  top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px)) !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  background: rgba(0, 0, 0, 0.49) !important;
+}
+
+/* Authoritative pressed well. It is independent from :active/:focus and survives until
+ * JS removes menu-open-pressed / aria-expanded=true on actual menu close. */
+:root .dm-head-menu-btn,
+:root .channels-top-more-btn,
+:root .network-top-more-btn {
+  position: relative !important;
+  isolation: isolate;
+}
+
+:root .dm-head-menu-btn.menu-open-pressed::before,
+:root .channels-top-more-btn.menu-open-pressed::before,
+:root .network-top-more-btn.menu-open-pressed::before,
+:root .dm-head-menu-btn[aria-expanded='true']::before,
+:root .channels-top-more-btn[aria-expanded='true']::before,
+:root .network-top-more-btn[aria-expanded='true']::before {
+  content: '' !important;
+  display: block !important;
+  position: absolute !important;
+  inset: 2px !important;
+  z-index: 0 !important;
+  pointer-events: none !important;
+  border: 0 !important;
+  border-radius: 10px !important;
+  background: rgba(0, 0, 0, 0.18) !important;
+  background-image: none !important;
+  box-shadow:
+    inset 0 4px 10px rgba(0, 0, 0, 0.72),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important;
+  opacity: 1 !important;
+  transform: none !important;
+  filter: none !important;
+}
+
+:root .dm-head-menu-btn.menu-open-pressed,
+:root .channels-top-more-btn.menu-open-pressed,
+:root .network-top-more-btn.menu-open-pressed,
+:root .dm-head-menu-btn[aria-expanded='true'],
+:root .channels-top-more-btn[aria-expanded='true'],
+:root .network-top-more-btn[aria-expanded='true'] {
+  background: transparent !important;
+  box-shadow: none !important;
+  transform: translateY(1px) scale(0.97) !important;
+  filter: brightness(0.90) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
+  animation: none !important;
+}
+
+:root .dm-head-menu-btn.menu-open-pressed > *,
+:root .channels-top-more-btn.menu-open-pressed > *,
+:root .network-top-more-btn.menu-open-pressed > *,
+:root .dm-head-menu-btn[aria-expanded='true'] > *,
+:root .channels-top-more-btn[aria-expanded='true'] > *,
+:root .network-top-more-btn[aria-expanded='true'] > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ===== Definitive open overflow state + lighter menu dim (2026-08-23) =====
+ * The generic button reset above has specificity 0,4,1, so the persistent
+ * menu state must beat it directly on the real button (not on ::before).
+ * Keep this visually identical to the physical :active press until JS closes the menu. */
+:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
+:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
+:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
+:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
+:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
+:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
+:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
+:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
+  color: #ffffff !important;
+  background: rgba(0, 0, 0, 0.12) !important;
+  background-image: none !important;
+  border: 0 !important;
+  box-shadow:
+    inset 0 3px 8px rgba(0, 0, 0, 0.58),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
+  transform: translateY(1px) scale(0.97) !important;
+  filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
+  animation: none !important;
+}
+
+/* The menu itself is still fully transparent; only the content below is dimmed.
+ * Previous alpha was ~0.49. Reduce it by about 20% relatively -> ~0.39. */
+:root body .ui-menu-dim-layer,
+:root body .dm-head-menu-backdrop,
+:root body .channels-menu-overlay {
+  background: rgba(0, 0, 0, 0.39) !important;
+}
+
+/* ===== Round persistent overflow press + subtle background depth (2026-08-23) =====
+ * The open overflow control is a circular recessed well. While a topbar menu is
+ * present, only the content plane below the toolbar recedes slightly; the toolbar
+ * and the fully transparent menu stay at full size. */
+:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
+:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
+:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
+:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
+:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
+:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
+:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
+:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
+  border-radius: 50% !important;
+}
+
+:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed::before,
+:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true']::before,
+:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed::before,
+:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true']::before,
+:root body .topbar-slot button.network-top-more-btn.menu-open-pressed::before,
+:root body .topbar-slot button.network-top-more-btn[aria-expanded='true']::before,
+:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed::before,
+:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true']::before {
+  border-radius: 50% !important;
+}
+
+/* Depth cue: the feed/graph plane gently recedes while a topbar overflow menu is open.
+ * Keep the scale small enough that opening the menu does not feel like a page jump. */
+@supports selector(body:has(*)) {
+  :root body .app-shell > .screen-content {
+    transform-origin: 50% 50%;
+    transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 180ms ease;
+  }
+
+  :root body:has(> .ui-menu-dim-layer) .app-shell > .screen-content,
+  :root body:has(> #modal-root #channels-top-menu-overlay) .app-shell > .screen-content {
+    transform: scale(0.975);
+    filter: brightness(0.97) saturate(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root body .app-shell > .screen-content {
+    transition: none !important;
+  }
+}

shine-UI/styles/components.css

@@ -9075,7 +9075,7 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
 /* ===== DM + Channels polish (2026-08-22 13:22) ===== */
 /* «Личные»: аватар основной вкладки стоит ровно на той же горизонтальной позиции,
  * что и аватар собеседника в открытом чате: после 40px back-slot + 8px gap. */
-.topbar-slot .dm-list-screen .dm-head-brand {
+.topbar-slot .dm-head .dm-head-brand {
   margin-left: 48px;
 }
 
@@ -9132,3 +9132,726 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
     0 0 5px var(--app-topbar-blue-glow),
     0 0 12px var(--app-topbar-blue-glow-soft);
 }
+
+
+/* ===== DM avatar + channel row visual alignment fix (2026-08-22 13:29) ===== */
+/* Шапка «Личных» переносится в topbar-slot отдельно от .dm-list-screen,
+ * поэтому позиционируем аватар по реальной DOM-структуре. 48px = back 40px + gap 8px
+ * в открытом чате, что даёт одинаковую абсолютную X-позицию. */
+.topbar-slot .dm-head .dm-head-brand {
+  margin-left: 48px;
+}
+
+/* Троеточие внутри строки канала использует тот же чистый overflow-стиль:
+ * без рамки/подложки, белые точки с мягким голубым свечением. */
+.channels-screen--list .channel-menu-trigger {
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--app-topbar-gold);
+  text-shadow: none;
+}
+
+.channels-screen--list .channel-menu-trigger .app-overflow-dots i {
+  background: var(--app-topbar-gold);
+  box-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 10px var(--app-topbar-blue-glow-soft);
+}
+
+/* Название канала и техническая строка (login / channel) — одна типографическая
+ * система с основным интерфейсом: белый текст + голубое свечение. */
+.channels-screen--list .channel-row-title,
+.channels-screen--list .channel-row-technical {
+  font-family: var(--font-main);
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+.channels-screen--list .channel-row-title {
+  font-weight: 700;
+}
+
+/* ===== Channels: final overflow + unread polish (2026-08-22 13:34) ===== */
+/* Внутреннее троеточие карточки канала должно выглядеть ровно как остальные
+ * overflow-кнопки интерфейса. Более высокая специфичность намеренно перекрывает
+ * старые локальные стили .channel-menu-trigger. */
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger {
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px !important;
+  min-height: 40px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #F7FBFF !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font: inherit !important;
+  line-height: 1 !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+}
+
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:hover,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus-visible,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:active {
+  border: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots {
+  width: 8px !important;
+  height: 24px !important;
+  margin: 0 !important;
+  color: #F7FBFF !important;
+  filter:
+    drop-shadow(0 0 3px rgba(92, 190, 255, 0.72))
+    drop-shadow(0 0 7px rgba(72, 145, 255, 0.34));
+}
+
+.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots > i {
+  width: 4px !important;
+  height: 4px !important;
+  flex-basis: 4px !important;
+  border: 0 !important;
+  background: #F7FBFF !important;
+  box-shadow: none !important;
+}
+
+/* Счётчик непрочитанных: без видимой границы. Сам овал — светящийся синий объём,
+ * цифра остаётся обычной белой. */
+.channels-screen--list .channel-row-count,
+.channels-screen--list .unread.channel-row-count {
+  border: 0 !important;
+  outline: 0 !important;
+  background: rgba(74, 169, 255, 0.36) !important;
+  color: #FFFFFF !important;
+  box-shadow:
+    0 0 8px rgba(92, 190, 255, 0.82),
+    0 0 18px rgba(72, 145, 255, 0.54),
+    0 0 30px rgba(72, 145, 255, 0.24) !important;
+  text-shadow: none !important;
+}
+
+
+/* ===== Transparent topbar + scroll fade (2026-08-22 13:40) =====
+ * Верхняя шапка не рисует отдельную плашку. Контент прокручивается под ней и
+ * постепенно исчезает по alpha-mask: у самого верхнего края полностью прозрачен,
+ * к нижней кромке topbar — полностью видим. */
+:root {
+  --app-topbar-fade-end: var(--topbar-height, 64px);
+}
+
+.topbar-slot {
+  z-index: 20;
+  background: transparent !important;
+  isolation: isolate;
+}
+
+/* Лёгкое затемнение только для читаемости текста шапки, без видимой границы. */
+.topbar-slot::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    rgba(5, 7, 10, 0.32) 0%,
+    rgba(5, 7, 10, 0.16) 52%,
+    rgba(5, 7, 10, 0) 100%
+  );
+}
+
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+/* Обычные прокручиваемые экраны начинаются физически от верхнего края app-shell.
+ * В исходном положении padding держит первый элемент под шапкой; при прокрутке
+ * этот padding уезжает, и контент проходит под прозрачным topbar. */
+.screen-content:not(.no-app-chrome):not(.network-scroll-lock):not(:has(> .dm-chat-screen)) {
+  top: var(--call-minimized-bar-height, 0px);
+  padding-top: calc(var(--topbar-height, 64px) + 14px);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+}
+
+/* DM-чат скроллится не через .screen-content, а через .dm-chat-wrap.
+ * Расширяем его до верхнего края и переносим безопасный отступ внутрь самого
+ * scroll-контейнера — так сообщения реально заходят под шапку и затухают. */
+body.chat-topbar-overlay .screen-content:has(> .dm-chat-screen) {
+  top: var(--call-minimized-bar-height, 0px) !important;
+  padding-top: 0 !important;
+}
+
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  box-sizing: border-box;
+  padding-top: calc(var(--topbar-height, 64px) + 12px);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+}
+
+/* «Контакты»: верхняя аватарка убрана полностью. Пустая левая колонка сохраняет
+ * строгий центр заголовка относительно правого overflow-меню. */
+.topbar-slot .dm-head .dm-head-brand {
+  margin-left: 0 !important;
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+}
+
+/* ===== Robust topbar fade overlay (2026-08-22 13:44) =====
+ * Mask-image on scrolling containers is not consistently composited by every
+ * Chromium/WebView path used by the app. The fade is therefore rendered as a
+ * dedicated overlay layer above scrolled content and below topbar controls.
+ * Content remains physically scrollable under the header and visually dissolves
+ * into the app background before reaching the very top edge. */
+.topbar-slot {
+  overflow: visible !important;
+  isolation: isolate;
+}
+
+.topbar-slot::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -12px;
+  right: -12px;
+  height: calc(100% + 48px);
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 1) 0%,
+    rgba(5, 7, 10, 0.98) 16%,
+    rgba(5, 7, 10, 0.88) 32%,
+    rgba(5, 7, 10, 0.66) 52%,
+    rgba(5, 7, 10, 0.38) 70%,
+    rgba(5, 7, 10, 0.15) 84%,
+    rgba(5, 7, 10, 0) 100%
+  );
+}
+
+.topbar-slot > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* The overlay above is the source of truth for the fade. Disable the previous
+ * alpha masks so browser-specific mask compositing cannot cancel the effect. */
+.screen-content:not(.no-app-chrome):not(.network-scroll-lock):not(:has(> .dm-chat-screen)),
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+}
+
+/* ===== Bottom chat fade + Connections topbar fade + Notifications borderless cards (2026-08-22 13:49) ===== */
+/* Личный чат: область сообщений продолжается под composer. Внутренний нижний
+ * padding сохраняет последнее сообщение над полем ввода в конечной позиции,
+ * но во время прокрутки сообщения могут проходить под нижним fade-слоем. */
+body.chat-topbar-overlay .app-shell:not(.keyboard-open) .screen-content:has(> .dm-chat-screen) {
+  bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom)) !important;
+}
+
+body.chat-topbar-overlay .app-shell.keyboard-open .screen-content:has(> .dm-chat-screen) {
+  bottom: var(--keyboard-offset, 0px) !important;
+}
+
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  padding-bottom: calc(var(--composer-height, 0px) + 52px);
+}
+
+/* Нижнее затухание — зеркальная версия верхнего эффекта. Слой находится над
+ * сообщениями и под самим composer, поэтому текст плавно исчезает перед полем ввода. */
+body.chat-topbar-overlay .composer-slot {
+  isolation: isolate;
+  overflow: visible !important;
+}
+
+body.chat-topbar-overlay .composer-slot::before {
+  content: '';
+  position: absolute;
+  left: -12px;
+  right: -12px;
+  top: -52px;
+  bottom: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 0) 0%,
+    rgba(5, 7, 10, 0.14) 18%,
+    rgba(5, 7, 10, 0.38) 38%,
+    rgba(5, 7, 10, 0.66) 58%,
+    rgba(5, 7, 10, 0.88) 76%,
+    rgba(5, 7, 10, 0.98) 90%,
+    rgba(5, 7, 10, 1) 100%
+  );
+}
+
+body.chat-topbar-overlay .composer-slot > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* «Связи»: граф теперь физически продолжается под общей верхней шапкой.
+ * Глобальный .topbar-slot::before даёт тот же fade, что и на лентах. */
+.screen-content.network-scroll-lock {
+  top: var(--call-minimized-bar-height, 0px) !important;
+}
+
+/* Верхние фильтры графа остаются ниже шапки и не попадают в зону затухания. */
+.network-stage > .fg-filter-bar.app-top-tabs {
+  top: calc(var(--topbar-height, 64px) + var(--app-primary-tabs-top-gap, 14px)) !important;
+}
+
+/* Уведомления: информационные блоки без рамок. Hover/focus не возвращает
+ * обводку — различение сохраняется фоном и лёгкой реакцией на нажатие. */
+.notifications-screen .notifications-list > .notification-card,
+.notifications-screen .notifications-list > .notification-card:hover,
+.notifications-screen .notifications-list > .notification-card:focus,
+.notifications-screen .notifications-list > .notification-card:focus-visible,
+.notifications-screen .notifications-list > .notification-card:active {
+  border: 0 !important;
+  outline: 0 !important;
+}
+
+
+/* ===== Connections: shared topbar fade + edge fade (2026-08-23) =====
+ * Header geometry stays canonical, but the graph itself now continues under the
+ * shared topbar exactly like scrollable message content. The generic topbar
+ * overlay is therefore the source of the upper fade. */
+.topbar-slot:has(> .network-topbar)::before {
+  height: calc(100% + 48px) !important;
+}
+
+.screen-content.network-scroll-lock {
+  top: var(--call-minimized-bar-height, 0px) !important;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
+  padding: 0 !important;
+}
+
+.screen-content.network-scroll-lock .network-screen,
+.screen-content.network-scroll-lock .network-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+
+/* Filters stay below the visible topbar while the movable graph runs beneath it. */
+.network-stage > .fg-filter-bar.app-top-tabs {
+  top: calc(var(--topbar-height, 64px) + var(--app-primary-tabs-top-gap, 14px)) !important;
+}
+
+/* The graph can be panned in every direction, so its side and bottom edges fade
+ * into the app canvas as well. The top edge is intentionally omitted here: it
+ * is handled by .topbar-slot::before, matching messages/chats. */
+.network-stage::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  pointer-events: none;
+  background:
+    linear-gradient(to right,
+      rgba(5, 7, 10, 0.98) 0%,
+      rgba(5, 7, 10, 0.58) 3%,
+      rgba(5, 7, 10, 0) 10%) left / 50% 100% no-repeat,
+    linear-gradient(to left,
+      rgba(5, 7, 10, 0.98) 0%,
+      rgba(5, 7, 10, 0.58) 3%,
+      rgba(5, 7, 10, 0) 10%) right / 50% 100% no-repeat,
+    linear-gradient(to top,
+      rgba(5, 7, 10, 1) 0%,
+      rgba(5, 7, 10, 0.72) 4%,
+      rgba(5, 7, 10, 0.28) 8%,
+      rgba(5, 7, 10, 0) 14%) bottom / 100% 50% no-repeat;
+}
+
+/* Explicitly keep the Connections header on the canonical shared topbar contract. */
+.topbar-slot > .page-header.app-topbar-shell.network-topbar {
+  position: relative !important;
+  inset: auto !important;
+  width: 100% !important;
+  height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  max-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  margin: 0 !important;
+  padding: env(safe-area-inset-top) 0 0 !important;
+  display: grid !important;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr) !important;
+  align-items: center !important;
+  gap: 8px !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+/* Уведомления: без рамки должны быть не только реальные Ответы/События, но и
+ * пустые/ошибочные состояния, потому что все они являются прямыми card-детьми списка. */
+.notifications-screen .notifications-list > .card,
+.notifications-screen .notifications-list > .card:hover,
+.notifications-screen .notifications-list > .card:focus,
+.notifications-screen .notifications-list > .card:focus-visible,
+.notifications-screen .notifications-list > .card:active {
+  border: 0 !important;
+  outline: 0 !important;
+}
+
+/* ===== Connections: unified graph fade without overlay seams (2026-08-23) =====
+ * Side/bottom fade is applied to the graph itself (including its nebula glow),
+ * instead of painting dark gradients above it. This keeps the center glow and
+ * the edge attenuation in one composited image, so no visible fade stripe can
+ * cut through the nebula while the graph is panned. */
+.network-stage::before {
+  content: none !important;
+  display: none !important;
+}
+
+.screen-content.network-scroll-lock .network-board--full.fg-stage {
+  -webkit-mask-image: radial-gradient(
+    ellipse 62% 118% at 50% -4%,
+    #000 0%,
+    #000 68%,
+    rgba(0, 0, 0, 0.96) 75%,
+    rgba(0, 0, 0, 0.78) 82%,
+    rgba(0, 0, 0, 0.48) 89%,
+    rgba(0, 0, 0, 0.18) 95%,
+    transparent 100%
+  );
+  mask-image: radial-gradient(
+    ellipse 62% 118% at 50% -4%,
+    #000 0%,
+    #000 68%,
+    rgba(0, 0, 0, 0.96) 75%,
+    rgba(0, 0, 0, 0.78) 82%,
+    rgba(0, 0, 0, 0.48) 89%,
+    rgba(0, 0, 0, 0.18) 95%,
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+/* Connections uses the same compact overflow trigger as Contacts, Channels and Profile. */
+.topbar-slot .network-top-more-btn {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0;
+  display: inline-grid;
+  place-items: center;
+}
+
+
+/* ===== Unified top/dropdown menus (2026-08-23) ===== */
+.ui-menu-dim-layer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px));
+  bottom: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.51);
+  border: 0;
+  pointer-events: auto;
+}
+
+.dm-head-menu,
+.channel-menu-wrap,
+.channel-menu-wrap--portal {
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+}
+
+.dm-head-menu {
+  min-width: 0;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(5, 7, 10, 0.92);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.dm-head-menu::before { content: none !important; display: none !important; }
+
+.dm-head-menu--portal { z-index: 10000; }
+
+.dm-head-menu-item,
+.channel-menu-item {
+  width: 100%;
+  min-height: 40px;
+  padding: 7px 10px;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: rgba(255, 255, 255, 0.95) !important;
+  font-family: var(--font-main);
+  font-size: var(--app-topbar-title-size, 18px);
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dm-head-menu-item svg,
+.dm-head-menu-item img { display: none !important; }
+
+.dm-head-menu-item:hover,
+.dm-head-menu-item:focus-visible,
+.dm-head-menu-item:active,
+.channel-menu-item:hover,
+.channel-menu-item:focus-visible,
+.channel-menu-item:active {
+  background: transparent !important;
+  color: #fff !important;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
+}
+
+.channel-menu-wrap {
+  width: max-content;
+  min-width: 180px;
+  max-width: calc(100vw - 24px);
+  padding: 8px 10px;
+  gap: 0;
+  background: rgba(5, 7, 10, 0.92);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.channels-menu-overlay {
+  background: rgba(0, 0, 0, 0.51) !important;
+}
+
+.channel-menu-divider {
+  border: 0 !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+
+/* ===== Unified topbar dropdown menus cleanup (2026-08-23) =====
+ * - no menu outline/contour
+ * - dim lower layers ~51% while menu is open
+ * - menu rows are text-only using the same core type rhythm as the topbar
+ * - shared positioning helpers clamp menus to the viewport */
+.dm-head-menu-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px));
+  bottom: 0;
+  z-index: 9998;
+  background: rgba(5, 7, 10, 0.51);
+  pointer-events: auto;
+}
+
+.channels-menu-overlay {
+  background: rgba(5, 7, 10, 0.51);
+}
+
+.dm-head-menu,
+.channel-menu-wrap {
+  border: 0 !important;
+  outline: none !important;
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
+}
+
+.dm-head-menu {
+  min-width: 164px;
+  max-width: min(240px, calc(100vw - 20px));
+  padding: 8px 10px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(12, 16, 24, 0.96), rgba(8, 11, 18, 0.96));
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.dm-head-menu::before {
+  content: none !important;
+  display: none !important;
+}
+
+.dm-head-menu-item,
+.channel-menu-item {
+  width: 100%;
+  min-height: 42px;
+  padding: 10px 12px;
+  border: 0 !important;
+  border-radius: 10px;
+  background: transparent !important;
+  box-shadow: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0;
+  font-family: var(--font-main);
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 700;
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+.dm-head-menu-item > svg,
+.dm-head-menu-item > img {
+  display: none !important;
+}
+
+.dm-head-menu-item > span {
+  display: inline;
+}
+
+.dm-head-menu-item:hover,
+.dm-head-menu-item:focus-visible,
+.dm-head-menu-item:active,
+.channel-menu-item:hover,
+.channel-menu-item:focus-visible,
+.channel-menu-item:active {
+  outline: none;
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.channel-menu-item.destructive {
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px rgba(255, 124, 156, 0.35),
+    0 0 12px rgba(255, 124, 156, 0.2);
+}
+
+.channel-menu-divider {
+  background: rgba(255, 255, 255, 0.08) !important;
+  margin: 4px 0 !important;
+}
+
+.dm-head-menu-wrap.is-open .dm-head-menu-btn,
+.dm-head-menu-btn:focus-visible,
+.topbar-slot .channels-top-more-btn:focus-visible,
+.topbar-slot .channels-top-more-btn[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.04);
+  box-shadow: none !important;
+}
+
+
+/* ===== Transparent topbar-like dropdown surface (2026-08-23) =====
+ * The lower UI stays visible through the menu, just dimmed by the backdrop.
+ * No opaque card/contour: labels float over the same faded content language as the top toolbar. */
+.ui-menu-dim-layer,
+.dm-head-menu-backdrop {
+  background: rgba(0, 0, 0, 0.39) !important;
+}
+
+.channels-menu-overlay {
+  background: rgba(0, 0, 0, 0.39) !important;
+}
+
+.dm-head-menu,
+.dm-head-menu--portal,
+.channel-menu-wrap,
+.channel-menu-wrap--portal {
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+  background: rgba(5, 7, 10, 0.10) !important;
+  background-image: none !important;
+  -webkit-backdrop-filter: blur(8px) brightness(0.82) !important;
+  backdrop-filter: blur(8px) brightness(0.82) !important;
+}
+
+/* The panel itself must never become an opaque plate through legacy pseudo-elements. */
+.dm-head-menu::before,
+.channel-menu-wrap::before,
+.channel-menu-wrap--portal::before {
+  content: none !important;
+  display: none !important;
+}
+
+.dm-head-menu-item,
+.channel-menu-item,
+.dm-head-menu-item:hover,
+.dm-head-menu-item:focus,
+.dm-head-menu-item:focus-visible,
+.dm-head-menu-item:active,
+.channel-menu-item:hover,
+.channel-menu-item:focus,
+.channel-menu-item:focus-visible,
+.channel-menu-item:active {
+  background: transparent !important;
+  background-image: none !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+}

shine-UI/styles/layout.css

@@ -34,8 +34,8 @@ body::before {
   --toolbar-height: 78px;
   --keyboard-offset: 0px;
   background: transparent;
-  border-left: 1px solid rgba(211, 170, 86, 0.2);
-  border-right: 1px solid rgba(211, 170, 86, 0.2);
+  border-left: 0;
+  border-right: 0;
   box-shadow: var(--shadow);
   overflow: hidden;
 }