Смерджить main в ветку расширения функционала каналов

shine-UI/js/pages/add-channel-view.js

@@ -10,7 +10,7 @@ import {
   openArweaveAttachmentManager,
   markArweaveAttachmentPlaced,
 } from '../components/arweave-attachment-manager.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
+import { renderAvatar } from '../components/avatar-image.js';
 import { makeShineChannelRoute } from '../services/shine-routes.js';
 
 export const pageMeta = { id: 'add-channel-view', title: 'Создание канала' };
@@ -40,17 +40,16 @@ function normalizeMetaText(value, max, label) {
 function renderAvatarPreview(slot, avatar, title) {
   if (!slot) return;
   slot.innerHTML = '';
-  const wrap = document.createElement('div');
-  wrap.className = 'channel-profile-avatar';
+  const label = String(title || 'К').trim() || 'К';
+  const wrap = renderAvatar({
+    initials: label.slice(0, 1).toUpperCase() || 'К',
+    avatar,
+    size: 'small',
+    className: 'channel-profile-avatar',
+    title: label,
+    alt: 'Аватар канала',
+  });
   wrap.style.setProperty('--channel-avatar-size', '104px');
-  if (avatar?.ar) {
-    const img = document.createElement('img');
-    img.alt = 'Аватар канала';
-    img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId: avatar.ar });
-    wrap.append(img);
-  } else {
-    wrap.textContent = String(title || 'К').trim().slice(0, 1).toUpperCase() || 'К';
-  }
   slot.append(wrap);
 }
 

shine-UI/js/pages/arweave-uploads-view.js

@@ -6,6 +6,7 @@ import {
   readArweaveAttachmentHistory,
 } from '../components/arweave-attachment-manager.js';
 import { formatBytes } from '../services/attachment-format.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { state } from '../state.js';
 
@@ -73,13 +74,14 @@ export function render({ navigate }) {
     <button class="secondary-btn arweave-uploads-back" type="button" data-action="back" aria-label="Назад">←</button>
     <div class="arweave-uploads-title">Загрузка файлов в блокчейн</div>
     <button class="primary-btn arweave-uploads-add" type="button" data-action="upload" aria-label="Добавить файл">+</button>
-    <button class="secondary-btn arweave-uploads-menu-btn" type="button" data-action="menu" aria-label="Меню">⋮</button>
+    <button class="secondary-btn arweave-uploads-menu-btn" type="button" data-action="menu" aria-label="Меню"></button>
     <div class="arweave-uploads-menu" data-menu="true" hidden>
       <button class="text-btn" type="button" data-action="upload-menu">Добавить файл</button>
       <button class="text-btn" type="button" data-action="clear">Очистить историю</button>
       <button class="text-btn" type="button" data-action="help">Справка</button>
     </div>
   `;
+  controls.querySelector('[data-action="menu"]')?.append(createOverflowDots());
 
   const statusLine = document.createElement('p');
   statusLine.className = 'meta-muted inline-error';

shine-UI/js/pages/channel-thread-view.js

@@ -1,4 +1,4 @@
-import { renderHeader } from '../components/header.js';
+import { renderHeader } from '../components/header.js';
 import { authService, getMessageReactionState, setMessageReactionState, state } from '../state.js';
 import { captureClientError } from '../services/client-error-reporter.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
@@ -1144,31 +1144,26 @@ export function render({ navigate, route, chrome }) {
   const appScreen = document.getElementById('app-screen');
   appScreen?.classList.add('channels-scroll-clean');
 
+  const threadHeaderButton = document.createElement('button');
+  threadHeaderButton.type = 'button';
+  threadHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
+  threadHeaderButton.textContent = 'Тред в канале: ...';
+  threadHeaderButton.disabled = true;
+
   const header = renderHeader({
-    title: '',
+    centerNode: threadHeaderButton,
     leftAction: { label: '<', onClick: () => navigate(resolveThreadPreviousInChannels(selector, activeResolvedChannelLabel)) },
-    rightActions: [],
+    rightActions: [
+      {
+        label: '↑',
+        title: 'К списку каналов',
+        ariaLabel: 'К списку каналов',
+        className: 'channel-thread-list-btn',
+        onClick: () => navigate('channels-list'),
+      },
+    ],
   });
   header.classList.add('channel-thread-topbar');
-  const headerLeft = header.querySelector('.header-left');
-  let threadHeaderButton = null;
-  if (headerLeft) {
-    const channelsListButton = document.createElement('button');
-    channelsListButton.type = 'button';
-    channelsListButton.className = 'icon-btn';
-    channelsListButton.textContent = '↑';
-    channelsListButton.title = 'К списку каналов';
-    channelsListButton.setAttribute('aria-label', 'К списку каналов');
-    channelsListButton.addEventListener('click', () => navigate('channels-list'));
-    headerLeft.append(channelsListButton);
-
-    threadHeaderButton = document.createElement('button');
-    threadHeaderButton.type = 'button';
-    threadHeaderButton.className = 'icon-btn channel-header-route-btn';
-    threadHeaderButton.textContent = 'Тред в канале: ...';
-    threadHeaderButton.disabled = true;
-    headerLeft.append(threadHeaderButton);
-  }
   chrome?.setTopbar(header);
 
   const statusBox = document.createElement('div');
@@ -1180,6 +1175,7 @@ export function render({ navigate, route, chrome }) {
       const current = document.querySelector('section.channels-screen--thread');
       if (!current) return;
       const next = render({ navigate, route });
+      current.cleanup?.();
       current.replaceWith(next);
     } catch (error) {
       logThreadRuntimeError('rerender', error, { routePath: window.location.pathname });
@@ -1352,6 +1348,9 @@ export function render({ navigate, route, chrome }) {
     invalid.className = 'card meta-muted';
     invalid.textContent = 'Некорректный идентификатор треда в адресе страницы.';
     screen.append(invalid);
+    screen.cleanup = () => {
+      appScreen?.classList.remove('channels-scroll-clean');
+    };
     return screen;
   }
 

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

@@ -1,4 +1,4 @@
-import { renderHeader } from '../components/header.js';
+import { renderHeader } from '../components/header.js';
 import {
   authService,
   getMessageReactionState,
@@ -16,7 +16,7 @@ import {
   showToast,
   softHaptic,
 } from '../services/channels-ux.js';
-import { renderUserAvatar } from '../components/avatar-image.js';
+import { renderAvatar, renderUserAvatar } from '../components/avatar-image.js';
 import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from '../components/arweave-attachment-manager.js';
 import {
   composeMessageWithAttachments,
@@ -31,7 +31,6 @@ import {
   makeProfileRoute,
   makeShineMessageRoute,
 } from '../services/shine-routes.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'channel-view', title: 'Канал' };
@@ -578,18 +577,17 @@ function getStatusActionOptionsForTarget(targetMsgSubType) {
 }
 
 function createChannelAvatarElement(channel, size = 72) {
-  const wrap = document.createElement('div');
-  wrap.className = 'channel-profile-avatar';
-  wrap.style.setProperty('--channel-avatar-size', `${size}px`);
   const txId = String(channel?.avaAr || '').trim();
-  if (txId) {
-    const img = document.createElement('img');
-    img.alt = 'Аватар канала';
-    img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId });
-    wrap.append(img);
-  } else {
-    wrap.textContent = String(channel?.displayTitle || channel?.name || 'К').trim().slice(0, 1).toUpperCase() || 'К';
-  }
+  const title = String(channel?.displayTitle || channel?.name || 'К').trim() || 'К';
+  const wrap = renderAvatar({
+    initials: title.slice(0, 1).toUpperCase() || 'К',
+    avatar: txId ? { ar: txId } : null,
+    size: 'small',
+    className: 'channel-profile-avatar',
+    title,
+    alt: 'Аватар канала',
+  });
+  wrap.style.setProperty('--channel-avatar-size', `${size}px`);
   return wrap;
 }
 
@@ -2271,19 +2269,20 @@ export function render({ navigate, route, chrome }) {
     statusBox.style.display = '';
   };
 
+  const channelHeaderButton = document.createElement('button');
+  channelHeaderButton.type = 'button';
+  channelHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
+  channelHeaderButton.textContent = 'Канал: ...';
+  channelHeaderButton.disabled = true;
+
   const header = renderHeader({
-    title: '',
+    centerNode: channelHeaderButton,
     leftAction: { label: '<', onClick: () => navigate('channels-list') },
     rightActions: [
-      { label: 'Канал: ...', className: 'channel-header-route-btn', onClick: () => {} },
       { label: 'Оглавление', className: 'channel-header-entrypoint-btn', onClick: () => {} },
     ],
   });
-  const channelHeaderButton = header.querySelector('.header-actions .channel-header-route-btn');
   const channelEntrypointButton = header.querySelector('.header-actions .channel-header-entrypoint-btn');
-  if (channelHeaderButton) {
-    channelHeaderButton.disabled = true;
-  }
   if (channelEntrypointButton) {
     channelEntrypointButton.disabled = true;
     channelEntrypointButton.hidden = true;
@@ -2294,6 +2293,7 @@ export function render({ navigate, route, chrome }) {
     const current = document.querySelector('section.channels-screen--channel');
     if (!current) return;
     const next = render({ navigate, route });
+    current.cleanup?.();
     current.replaceWith(next);
   };
   let activeSelector = null;

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

@@ -1,4 +1,4 @@
-import { channels as mockChannels } from '../mock-data.js';
+import { channels as mockChannels } from '../mock-data.js';
 import { authService, setChannelsFeed, state } from '../state.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { parseMessageAttachments } from '../services/attachment-format.js';
@@ -12,8 +12,8 @@ import {
   writeChannelNotificationsState,
 } from '../services/channels-ux.js';
 import { makeShineChannelRoute } from '../services/shine-routes.js';
-import { navigateBack } from '../router.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
+import { renderAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'channels-list', title: 'Каналы' };
@@ -90,6 +90,16 @@ function avatarLetterFromName(name = '') {
   return first.toUpperCase();
 }
 
+function createChannelAvatar(channel = {}) {
+  return renderAvatar({
+    initials: channel.avatar || channel.initials || avatarLetterFromName(channel.displayTitle || channel.title || channel.name),
+    avatar: channel.avaAr ? { ar: String(channel.avaAr || '').trim() } : null,
+    size: 'small',
+    title: channel.displayTitle || channel.title || channel.name || 'Канал',
+    alt: 'Аватар канала',
+  });
+}
+
 function allFeedSummaries() {
   const feed = state.channelsFeed || {};
   return [
@@ -885,7 +895,6 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
     const row = document.createElement('article');
     row.className = 'channel-row';
     row.innerHTML = `
-      <div class="avatar">${channel.avatar || channel.initials || '#'}</div>
       <div class="channel-row-main">
         <strong class="channel-row-title">${channel.title || channel.displayName || channel.name}</strong>
         <p class="channel-row-message">${channel.messagePreview || 'Ждем ваших начинаний'}</p>
@@ -894,6 +903,7 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
         <span class="channel-row-time">—</span>
       </div>
     `;
+    row.prepend(createChannelAvatar(channel));
     row.addEventListener('click', () => {
       const route = channel.route || makeShineChannelRoute({
       ownerLogin: String(channel.ownerName || 'channel'),
@@ -939,7 +949,6 @@ function openTopChannelsMenu({
   listState,
   anchorEl,
   navigate,
-  onSubscribeChannel,
   onFindChannel,
 }) {
   closeTopChannelsMenu(listState);
@@ -951,7 +960,7 @@ function openTopChannelsMenu({
   let left = rect.right - menuWidth;
   left = Math.max(12, Math.min(left, window.innerWidth - menuWidth - 12));
 
-  const estimatedHeight = 320;
+  const estimatedHeight = 250;
   let top = rect.bottom + 8;
   if (top + estimatedHeight > window.innerHeight - 10) {
     top = Math.max(12, rect.top - estimatedHeight - 8);
@@ -968,14 +977,12 @@ function openTopChannelsMenu({
   menu.style.width = `${Math.round(menuWidth)}px`;
 
   const items = [
+    { label: 'Поиск', action: () => onFindChannel?.() },
+    { label: 'Новый канал', action: () => navigate('add-channel-view') },
+    { divider: true },
     { label: 'Все каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_ALL)) },
     { label: 'Мои каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_OWNED)) },
     { label: 'Подписки', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_FOLLOWING)) },
-    { divider: true },
-    { label: 'Новый канал', action: () => navigate('add-channel-view') },
-    { divider: true },
-    { label: 'Добавить канал', action: () => onSubscribeChannel?.() },
-    { label: 'Просмотреть канал', action: () => onFindChannel?.() },
   ];
 
   items.forEach((item) => {
@@ -1206,16 +1213,7 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
     const countersVisible = listState.revealedCounters.has(channel.id);
     row.classList.toggle('is-counters-visible', countersVisible);
 
-    const avatar = document.createElement('div');
-    avatar.className = 'avatar';
-    if (channel.avaAr) {
-      const img = document.createElement('img');
-      img.alt = '';
-      img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId: channel.avaAr });
-      avatar.append(img);
-    } else {
-      avatar.textContent = channel.avatar;
-    }
+    const avatar = createChannelAvatar(channel);
 
     const main = renderChannelMain(channel);
 
@@ -1229,11 +1227,11 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
     const count = document.createElement('span');
     count.className = 'unread channel-row-count';
     const unreadCount = Number(channel.unreadCount || 0);
-    if (unreadCount > 0) {
-      count.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
-      controls.append(count);
-    }
-    controls.append(time);
+    count.hidden = unreadCount <= 0;
+    count.textContent = unreadCount > 0 ? String(unreadCount) : '';
+    count.classList.toggle('is-empty', unreadCount <= 0);
+
+    controls.append(time, count);
 
     row.append(avatar, main, controls);
     row.addEventListener('click', () => {
@@ -1250,6 +1248,14 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
   container.append(list);
 }
 
+function updateBottomCta({ button }) {
+  if (!button) return;
+  button.hidden = true;
+  button.textContent = '';
+  button.className = 'channels-bottom-action';
+  button.onclick = null;
+}
+
 async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
   closeChannelMenu(listState);
   renderSkeletonList(contentEl, 5);
@@ -1337,43 +1343,18 @@ export function render({ navigate, route, chrome }) {
   const topBarLeft = document.createElement('div');
   topBarLeft.className = 'channels-top-left';
 
-  const backBtn = document.createElement('button');
-  backBtn.type = 'button';
-  backBtn.className = 'icon-btn channels-top-back-btn';
-  backBtn.textContent = '←';
-  backBtn.setAttribute('aria-label', 'Назад');
-  backBtn.addEventListener('click', () => navigateBack());
-
   const topTitle = document.createElement('strong');
   topTitle.className = 'channels-top-title';
 
   const topBarRight = document.createElement('div');
   topBarRight.className = 'channels-top-right';
 
-  const findChannelBtn = document.createElement('button');
-  findChannelBtn.type = 'button';
-  findChannelBtn.className = 'icon-btn channels-top-search-btn';
-  findChannelBtn.setAttribute('aria-label', 'Найти канал');
-  findChannelBtn.title = 'Найти канал';
-  const findChannelIcon = document.createElement('span');
-  findChannelIcon.className = 'channels-search-icon';
-  findChannelIcon.setAttribute('aria-hidden', 'true');
-  findChannelBtn.append(findChannelIcon);
-  findChannelBtn.addEventListener('click', () => openChannelFinderModal({ navigate }));
-
-  const createInMyBtn = document.createElement('button');
-  createInMyBtn.type = 'button';
-  createInMyBtn.className = 'icon-btn channels-top-add-btn';
-  createInMyBtn.textContent = '+';
-  createInMyBtn.setAttribute('aria-label', 'Создать канал');
-  createInMyBtn.addEventListener('click', () => navigate('add-channel-view'));
-
   const topMenuBtn = document.createElement('button');
   topMenuBtn.type = 'button';
   topMenuBtn.className = 'icon-btn channels-top-more-btn';
   topMenuBtn.setAttribute('aria-label', 'Ещё действия');
   topMenuBtn.title = 'Ещё действия';
-  topMenuBtn.textContent = '⋮';
+  topMenuBtn.append(createOverflowDots());
   topMenuBtn.addEventListener('click', (event) => {
     event.stopPropagation();
     animatePress(topMenuBtn);
@@ -1382,18 +1363,14 @@ export function render({ navigate, route, chrome }) {
       anchorEl: topMenuBtn,
       navigate,
       onFindChannel: () => openChannelFinderModal({ navigate }),
-      onSubscribeChannel: () => openSimpleSubscribeModal({
-        kind: 'channel',
-        kindLabel: 'Добавить канал',
-        submitLabel: 'Добавить',
-        onSuccess: async () => loadFeedAndRender({ screen, listState, contentEl, navigate }),
-      }),
     });
   });
 
-  topBarLeft.append(backBtn, topTitle);
-  topBarRight.append(findChannelBtn, createInMyBtn, topMenuBtn);
-  topBarEl.append(topBarLeft, topBarRight);
+  topBarRight.append(topMenuBtn);
+  topBarEl.append(topBarLeft, topTitle, topBarRight);
+
+  const bottomCta = document.createElement('button');
+  bottomCta.type = 'button';
 
   const reloadFeed = async () => loadFeedAndRender({ screen, listState, contentEl, navigate });
 
@@ -1411,19 +1388,21 @@ export function render({ navigate, route, chrome }) {
     });
 
     topTitle.textContent = channelsViewTitle(listState.viewMode);
-    findChannelBtn.style.display = '';
-    createInMyBtn.style.display = '';
     topMenuBtn.style.display = '';
-    if (topTitle.parentElement !== topBarLeft) topBarLeft.append(topTitle);
+    if (topTitle.parentElement !== topBarEl) topBarEl.insertBefore(topTitle, topBarRight);
+
+    updateBottomCta({ button: bottomCta });
   };
 
   chrome?.setTopbar(topBarEl);
-  screen.append(contentEl);
+  screen.append(contentEl, bottomCta);
 
   if (createSuccessFlash) {
     showToast(createSuccessFlash);
   }
 
+  updateBottomCta({ button: bottomCta });
+
   // Применяем корректное состояние хедера сразу на первом рендере,
   // чтобы не показывать лишние кнопки до первой перерисовки.
   rerenderList();

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

@@ -1,4 +1,6 @@
 import { renderHeader } from '../components/header.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { directMessages } from '../mock-data.js';
 import {
   addAppLogEntry,
@@ -27,10 +29,55 @@ import {
 import { isTextToSpeechConfigured, speakTextBySettings } from '../services/speech-tools-service.js';
 import { showToast } from '../services/channels-ux.js';
 import { buildDmReplyTechBlock, parseDmTechBlocks, sanitizeUserDmTextForSend } from '../services/dm-tech-blocks.js';
+import { loadProfileSnapshot } from '../services/user-profile-params.js';
 
 export const pageMeta = { id: 'chat-view', title: 'Чат' };
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';
 
+function createChatHeaderParts(login) {
+  const cleanLogin = String(login || '').trim() || 'unknown';
+
+  const avatarSlot = document.createElement('span');
+  avatarSlot.className = 'chat-header-avatar-slot chat-header-avatar-slot--left';
+  const initialAvatar = renderUserAvatar({
+    login: cleanLogin,
+    size: 'small',
+    className: 'chat-header-avatar',
+    title: cleanLogin,
+  });
+  avatarSlot.append(initialAvatar);
+
+  const loginEl = document.createElement('span');
+  loginEl.className = 'chat-header-login';
+  loginEl.setAttribute('role', 'heading');
+  loginEl.setAttribute('aria-level', '1');
+  loginEl.setAttribute('aria-label', `Чат с ${cleanLogin}`);
+  loginEl.textContent = cleanLogin;
+
+  void loadProfileSnapshot(cleanLogin)
+    .then((snapshot) => {
+      if (!avatarSlot.isConnected) return;
+      const upgradedAvatar = renderUserAvatar({
+        login: cleanLogin,
+        firstName: String(snapshot?.firstName || '').trim(),
+        lastName: String(snapshot?.lastName || '').trim(),
+        avatar: snapshot?.avatar?.txId
+          ? {
+            ar: String(snapshot.avatar.txId || '').trim(),
+            sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
+          }
+          : null,
+        size: 'small',
+        className: 'chat-header-avatar',
+        title: cleanLogin,
+      });
+      avatarSlot.replaceChildren(upgradedAvatar);
+    })
+    .catch(() => {});
+
+  return { centerNode: loginEl, avatarSlot };
+}
+
 function truncatePreviewText(value, maxLen = 72) {
   const normalized = String(value || '').replace(/\s+/g, ' ').trim();
   if (!normalized) return '';
@@ -906,7 +953,6 @@ export function render({ navigate, route, chrome }) {
 
   const wrap = document.createElement('div');
   wrap.className = 'chat-wrap dm-chat-wrap';
-
   const historyLoader = document.createElement('div');
   historyLoader.className = 'dm-history-loader';
   historyLoader.hidden = true;
@@ -920,9 +966,9 @@ export function render({ navigate, route, chrome }) {
   const log = document.createElement('div');
   log.className = 'messages-log dm-messages-log';
 
-  chrome?.setTopbar(
-    renderHeader({
-      title: `Чат с ${contact.name}`,
+  const chatHeaderParts = createChatHeaderParts(chatId);
+  const chatHeader = renderHeader({
+      centerNode: chatHeaderParts.centerNode,
       leftAction: { label: '←', onClick: () => navigate('messages-list') },
       rightActions: [
         {
@@ -933,7 +979,7 @@ export function render({ navigate, route, chrome }) {
           onClick: () => handleStartCall('audio'),
         },
         {
-          label: '⋮',
+          iconNode: createOverflowDots(),
           title: 'Действия чата',
           ariaLabel: 'Открыть меню действий чата',
           className: 'chat-header-icon-btn chat-header-menu-btn',
@@ -990,8 +1036,9 @@ export function render({ navigate, route, chrome }) {
           },
         },
       ],
-    }),
-  );
+    });
+  chatHeader.querySelector('.header-left')?.append(chatHeaderParts.avatarSlot);
+  chrome?.setTopbar(chatHeader);
 
   if (!isKnownContact) {
     const card = document.createElement('div');

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

@@ -7,6 +7,7 @@ import {
   terminateCurrentSession,
 } from '../state.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';
 
@@ -44,13 +45,14 @@ async function loadDmAvatarSnapshot(login) {
   return pending;
 }
 
-function createDmAvatar(login) {
+function createDmAvatar(login, { className = '' } = {}) {
   const cleanLogin = String(login || '').trim();
   const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
   const avatarEl = renderUserAvatar({
     login: cleanLogin || 'unknown',
     size: 'small',
     title,
+    className,
   });
   if (!cleanLogin) return avatarEl;
   void loadDmAvatarSnapshot(cleanLogin).then((snapshot) => {
@@ -65,6 +67,7 @@ function createDmAvatar(login) {
         : null,
       size: 'small',
       title,
+      className,
     });
     upgraded.classList.add('avatar');
     avatarEl.replaceWith(upgraded);
@@ -160,13 +163,9 @@ function compareChatRows(a, b) {
   return nameA.localeCompare(nameB, 'ru');
 }
 
-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"/></svg>';
-
 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 = `
@@ -178,9 +177,7 @@ export function render({ navigate, chrome }) {
     </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">
-        <span class="dm-head-menu-dots" aria-hidden="true"><i></i><i></i><i></i></span>
-      </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">
@@ -192,11 +189,10 @@ export function render({ navigate, chrome }) {
       </div>
     </div>
   `;
-  const headName = head.querySelector('.dm-head-name');
-  if (headName) headName.textContent = login;
+  const menuButton = head.querySelector('.dm-head-menu-btn');
+  menuButton?.append(createOverflowDots());
 
   const menuWrap = head.querySelector('.dm-head-menu-wrap');
-  const menuButton = head.querySelector('.dm-head-menu-btn');
   const menuTemplate = head.querySelector('.dm-head-menu');
   // The header itself is mounted into chrome/topbar, whose hit-test area ends at the
   // header bounds. A dropdown overflowing below it can look visible but clicks may

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

@@ -215,7 +215,7 @@ function buildGraphModel(graph, centerLogin) {
 let persistedCenterLogin = '';
 let persistedCenterHistory = [];
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome } = {}) {
   const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
   const routeLogin = normalizeLogin(route?.params?.login || '');
   if (!keepHistory) {
@@ -282,10 +282,7 @@ export function render({ navigate, route }) {
     else window.history.replaceState({}, '', nextPath);
   }
 
-  function setBackButtonState(backBtn) {
-    if (!(backBtn instanceof HTMLButtonElement)) return;
-    backBtn.disabled = centerHistory.length === 0;
-  }
+
 
   function openSearchModal() {
     const root = document.getElementById('modal-root');
@@ -490,7 +487,6 @@ export function render({ navigate, route }) {
       if (engine && activeFilter !== 'all') engine.setFilter(FILTERS[activeFilter].pred);
 
       persistHistory();
-      setBackButtonState(backBtnEl);
     } catch (error) {
       if (requestId !== loadSeq) return;
       window.alert(`Ошибка загрузки связей: ${error?.message || 'unknown'}`);
@@ -499,24 +495,13 @@ export function render({ navigate, route }) {
 
   const header = renderHeader({
     title: 'Связи',
-    leftAction: {
-      label: '←',
-      onClick: () => {
-        if (!centerHistory.length) return;
-        const prev = centerHistory.pop();
-        if (!prev) {
-          setBackButtonState(backBtnEl);
-          return;
-        }
-        void load(prev, { pushHistory: false });
-      },
-    },
     rightActions: [
       { label: 'Найти', onClick: openSearchModal },
     ],
   });
-  const backBtnEl = header.querySelector('.header-left .icon-btn');
-  setBackButtonState(backBtnEl);
+  // «Связи» используют тот же общий topbar, что и остальные страницы.
+  // Отдельный класс нужен только для page-specific fade графа, не для геометрии header.
+  header.classList.add('network-topbar');
 
   // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
@@ -542,11 +527,10 @@ export function render({ navigate, route }) {
       window.setTimeout(() => openSearchModal(), 0);
     }
   }
-  setBackButtonState(backBtnEl);
 
   // Панель фильтров слоёв (оверлей под шапкой)
   const filterBar = document.createElement('div');
-  filterBar.className = 'fg-filter-bar';
+  filterBar.className = 'fg-filter-bar app-top-tabs';
   // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
   // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
   filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
@@ -560,8 +544,8 @@ export function render({ navigate, route }) {
     filterBar.append(chip);
   });
 
-  header.classList.add('network-header-overlay');
-  stage.append(board, header, filterBar);
+  chrome?.setTopbar(header);
+  stage.append(board, filterBar);
   screen.append(stage);
   return screen;
 }

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

@@ -1,56 +1,394 @@
 import { renderHeader } from '../components/header.js';
-import { state } from '../state.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
+import { authService, state } from '../state.js';
+import { loadProfileSnapshot } from '../services/user-profile-params.js';
+import { makeProfileRoute, makeShineMessageRoute } from '../services/shine-routes.js';
+
+const CONNECTION_CLOSE_FRIEND = 10;
+const profileSnapshotCache = new Map();
+const profileSnapshotPending = new Map();
+
+function connectionTypeLabel(typeCode) {
+  switch (Number(typeCode)) {
+    case CONNECTION_CLOSE_FRIEND:
+      return 'близкие друзья';
+    default:
+      return 'новую связь';
+  }
+}
 
 export const pageMeta = { id: 'notifications-view', title: 'Уведомления' };
 
-function renderList(container) {
-  const active = state.notificationsTab;
-  container.innerHTML = '';
-  const card = document.createElement('article');
-  card.className = 'card stack';
-
-  const title = document.createElement('strong');
-  title.textContent = active === 'events' ? 'События в разработке' : 'Ответы в разработке';
-
-  const description = document.createElement('p');
-  description.className = 'meta-muted';
-  description.textContent = active === 'events'
-    ? 'Здесь будут отображаться события: кто подписался на вас, куда вас добавили, кто поставил лайк и другие действия.'
-    : 'Здесь будут отображаться ответы и комментарии на ваши сообщения в публичных каналах.';
-
-  const note = document.createElement('p');
-  note.className = 'meta-muted';
-  note.textContent = 'Раздел находится в разработке. Функционал будет добавлен в следующих обновлениях.';
-
-  card.append(title, description, note);
-  container.append(card);
+function normalizeItem(item) {
+  return {
+    kind: String(item?.kind || ''),
+    createdAtMs: Number(item?.createdAtMs || 0),
+    sourceLogin: String(item?.sourceLogin || ''),
+    sourceBlockchainName: String(item?.sourceBlockchainName || ''),
+    sourceBlockNumber: Number(item?.sourceBlockNumber || 0),
+    sourceBlockHash: String(item?.sourceBlockHash || ''),
+    sourceMsgSubType: item?.sourceMsgSubType == null ? null : Number(item.sourceMsgSubType),
+    sourceText: String(item?.sourceText || ''),
+    connectionTypeCode: item?.connectionTypeCode == null ? null : Number(item.connectionTypeCode),
+    targetLogin: String(item?.targetLogin || ''),
+    targetBlockchainName: String(item?.targetBlockchainName || ''),
+    targetBlockNumber: item?.targetBlockNumber == null ? null : Number(item.targetBlockNumber),
+    targetBlockHash: String(item?.targetBlockHash || ''),
+    profile: null,
+    engagement: null,
+  };
 }
 
-export function render({ chrome } = {}) {
+function formatRelativeTime(value) {
+  const ts = Number(value || 0);
+  if (!Number.isFinite(ts) || ts <= 0) return '';
+
+  const diffMs = Math.max(0, Date.now() - ts);
+  const minute = 60 * 1000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const week = 7 * day;
+
+  if (diffMs < minute) return 'сейчас';
+  if (diffMs < hour) return `${Math.max(1, Math.floor(diffMs / minute))} мин.`;
+  if (diffMs < day) return `${Math.max(1, Math.floor(diffMs / hour))} ч.`;
+  if (diffMs < week) return `${Math.max(1, Math.floor(diffMs / day))} дн.`;
+  return `${Math.max(1, Math.floor(diffMs / week))} нед.`;
+}
+
+function profileField(snapshot, key) {
+  const row = (Array.isArray(snapshot?.fields) ? snapshot.fields : [])
+    .find((field) => String(field?.key || '') === key);
+  return String(row?.value || '').trim();
+}
+
+async function loadCachedProfileSnapshot(login) {
+  const cleanLogin = String(login || '').trim();
+  if (!cleanLogin) return null;
+  const key = cleanLogin.toLowerCase();
+  if (profileSnapshotCache.has(key)) return profileSnapshotCache.get(key);
+  if (profileSnapshotPending.has(key)) return profileSnapshotPending.get(key);
+
+  const pending = loadProfileSnapshot(cleanLogin)
+    .then((snapshot) => {
+      profileSnapshotCache.set(key, snapshot || null);
+      profileSnapshotPending.delete(key);
+      return snapshot || null;
+    })
+    .catch(() => {
+      profileSnapshotCache.set(key, null);
+      profileSnapshotPending.delete(key);
+      return null;
+    });
+
+  profileSnapshotPending.set(key, pending);
+  return pending;
+}
+
+function normalizeEngagement(source) {
+  if (!source || typeof source !== 'object') return null;
+  const likesCount = Math.max(0, Number(source.likesCount || 0));
+  const repliesCount = Math.max(0, Number(source.repliesCount || 0));
+  const ratingsCount = Math.max(0, Number(source.ratingsCount || 0));
+  const repostsCount = Math.max(0, Number(source.repostsCount ?? source.repostCount ?? 0));
+  const sharesCount = Math.max(0, Number(source.sharesCount ?? source.shareCount ?? 0));
+
+  const result = {
+    likesCount: Number.isFinite(likesCount) ? likesCount : 0,
+    repliesCount: Number.isFinite(repliesCount) ? repliesCount : 0,
+    ratingsCount: Number.isFinite(ratingsCount) ? ratingsCount : 0,
+    repostsCount: Number.isFinite(repostsCount) ? repostsCount : 0,
+    sharesCount: Number.isFinite(sharesCount) ? sharesCount : 0,
+  };
+
+  return Object.values(result).some((count) => count > 0) ? result : null;
+}
+
+async function loadSourceEngagement(item) {
+  const blockchainName = String(item?.sourceBlockchainName || '').trim();
+  const blockNumber = Number(item?.sourceBlockNumber);
+  const blockHash = String(item?.sourceBlockHash || '').trim();
+  if (!blockchainName || !Number.isFinite(blockNumber) || blockNumber < 0 || !blockHash) return null;
+
+  try {
+    const payload = await authService.getMessageThread(
+      { blockchainName, blockNumber, blockHash },
+      0,
+      0,
+      1,
+      String(state.session.login || '').trim(),
+    );
+    return normalizeEngagement(payload?.focus);
+  } catch {
+    return null;
+  }
+}
+
+async function enrichItem(item, activeTab) {
+  const [profile, engagement] = await Promise.all([
+    loadCachedProfileSnapshot(item.sourceLogin),
+    activeTab === 'replies' ? loadSourceEngagement(item) : Promise.resolve(null),
+  ]);
+  return { ...item, profile, engagement };
+}
+
+function renderEmpty(activeTab) {
+  const card = document.createElement('article');
+  card.className = 'card stack notification-empty-state';
+  const title = document.createElement('strong');
+  title.textContent = activeTab === 'events' ? 'Пока нет событий' : 'Пока нет ответов';
+  const text = document.createElement('p');
+  text.className = 'meta-muted';
+  text.textContent = activeTab === 'events'
+    ? 'Когда кто-то добавит новую связь с вами, событие появится здесь.'
+    : 'Когда кто-то ответит на ваше сообщение в канале или треде, ответ появится здесь.';
+  card.append(title, text);
+  return card;
+}
+
+function renderIdentity(item) {
+  const profile = item.profile;
+  const firstName = profileField(profile, 'first_name');
+  const lastName = profileField(profile, 'last_name');
+  const fullName = [firstName, lastName].filter(Boolean).join(' ') || item.sourceLogin || 'Пользователь';
+  const avatar = profile?.avatar?.txId
+    ? {
+      ar: String(profile.avatar.txId || '').trim(),
+      sha256Hex: String(profile.avatar.sha256Hex || '').trim().toLowerCase(),
+    }
+    : null;
+
+  const header = document.createElement('div');
+  header.className = 'notification-identity';
+  header.append(renderUserAvatar({
+    login: item.sourceLogin || 'unknown',
+    firstName,
+    lastName,
+    avatar,
+    size: 'small',
+    className: 'notification-avatar',
+  }));
+
+  const text = document.createElement('div');
+  text.className = 'notification-identity-text';
+
+  const primary = document.createElement('div');
+  primary.className = 'notification-identity-primary';
+  const name = document.createElement('strong');
+  name.className = 'notification-person-name';
+  name.textContent = fullName;
+  primary.append(name);
+
+  const login = String(item.sourceLogin || '').trim();
+  if (login) {
+    const loginEl = document.createElement('span');
+    loginEl.className = 'notification-login';
+    loginEl.textContent = `@${login}`;
+    primary.append(loginEl);
+  }
+
+  const relative = formatRelativeTime(item.createdAtMs);
+  if (relative) {
+    const separator = document.createElement('span');
+    separator.className = 'notification-time-separator';
+    separator.textContent = '·';
+    const time = document.createElement('span');
+    time.className = 'notification-time';
+    time.textContent = relative;
+    primary.append(separator, time);
+  }
+
+  text.append(primary);
+  header.append(text);
+  return header;
+}
+
+function renderEngagement(engagement) {
+  if (!engagement) return null;
+
+  const stats = [
+    { key: 'likesCount', icon: '♥', label: 'Лайки' },
+    { key: 'repliesCount', icon: '💬', label: 'Ответы' },
+    { key: 'ratingsCount', icon: '★', label: 'Оценки' },
+    { key: 'repostsCount', icon: '↻', label: 'Репосты' },
+    { key: 'sharesCount', icon: '↗', label: 'Отправки' },
+  ].filter(({ key }) => Number(engagement[key] || 0) > 0);
+
+  if (!stats.length) return null;
+
+  const row = document.createElement('div');
+  row.className = 'notification-engagement';
+  stats.forEach(({ key, icon, label }) => {
+    const stat = document.createElement('span');
+    stat.className = 'notification-engagement-item';
+    stat.title = label;
+
+    const iconEl = document.createElement('span');
+    iconEl.className = 'notification-engagement-icon';
+    iconEl.setAttribute('aria-hidden', 'true');
+    iconEl.textContent = icon;
+
+    const countEl = document.createElement('span');
+    countEl.className = 'notification-engagement-count';
+    countEl.textContent = String(engagement[key]);
+    stat.append(iconEl, countEl);
+    row.append(stat);
+  });
+
+  return row;
+}
+
+function notificationRoute(item, activeTab) {
+  if (activeTab === 'events') {
+    const login = String(item?.sourceLogin || '').trim();
+    return login ? makeProfileRoute(login) : '';
+  }
+
+  const blockchainName = String(item?.sourceBlockchainName || '').trim();
+  const blockNumber = Number(item?.sourceBlockNumber);
+  if (!blockchainName || !Number.isFinite(blockNumber) || blockNumber < 0) return '';
+
+  return makeShineMessageRoute({
+    messageBlockchainName: blockchainName,
+    messageBlockNumber: blockNumber,
+  });
+}
+
+function bindNotificationNavigation(row, routePath, navigate) {
+  if (!routePath || typeof navigate !== 'function') return;
+
+  row.classList.add('notification-card--clickable');
+  row.tabIndex = 0;
+  row.setAttribute('role', 'link');
+
+  const open = () => navigate(routePath);
+  row.addEventListener('click', open);
+  row.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    open();
+  });
+}
+
+function renderItem(item, activeTab, navigate) {
+  const row = document.createElement('article');
+  row.className = 'card stack notification-card';
+  bindNotificationNavigation(row, notificationRoute(item, activeTab), navigate);
+  row.append(renderIdentity(item));
+
+  const action = document.createElement('p');
+  action.className = 'notification-action';
+  if (activeTab === 'events') {
+    action.textContent = `Добавил(а) вас в ${connectionTypeLabel(item.connectionTypeCode)}.`;
+  } else {
+    action.textContent = 'Ответил(а) на ваше сообщение.';
+  }
+  row.append(action);
+
+  if (activeTab === 'replies') {
+    const body = document.createElement('p');
+    body.className = 'notification-content';
+    body.textContent = item.sourceText || 'Ответ без текста.';
+    row.append(body);
+
+    const engagement = renderEngagement(item.engagement);
+    if (engagement) row.append(engagement);
+  }
+
+  return row;
+}
+
+export function render({ navigate, chrome } = {}) {
   const screen = document.createElement('section');
   screen.className = 'stack notifications-screen';
   chrome?.setTopbar(renderHeader({ title: 'Уведомления' }));
 
   const tabs = document.createElement('div');
-  tabs.className = 'tabs';
+  tabs.className = 'notification-feed-tabs app-top-tabs';
   tabs.innerHTML = `
-    <button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
-    <button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
+    <button
+      type="button"
+      class="fg-filter-chip notification-tab-btn ${state.notificationsTab === 'replies' ? 'is-active' : ''}"
+      data-tab="replies"
+      data-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+    >Ответы</button>
+    <button
+      type="button"
+      class="fg-filter-chip notification-tab-btn ${state.notificationsTab === 'events' ? 'is-active' : ''}"
+      data-tab="events"
+      data-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+    >События</button>
   `;
 
   const list = document.createElement('div');
   list.className = 'stack notifications-list';
-  renderList(list);
 
-  tabs.querySelectorAll('.tab-btn').forEach((btn) => {
+  let requestSeq = 0;
+
+  async function load() {
+    const seq = ++requestSeq;
+    const activeTab = state.notificationsTab;
+    list.replaceChildren(renderEmpty(activeTab));
+
+    try {
+      const payload = await authService.getNotifications(50);
+      if (seq !== requestSeq) return;
+      const baseItems = (activeTab === 'events' ? payload.events : payload.replies)
+        .map(normalizeItem);
+      if (!baseItems.length) {
+        list.replaceChildren(renderEmpty(activeTab));
+        return;
+      }
+
+      const items = await Promise.all(baseItems.map((item) => enrichItem(item, activeTab)));
+      if (seq !== requestSeq) return;
+      list.replaceChildren(...items.map((item) => renderItem(item, activeTab, navigate)));
+    } catch (error) {
+      if (seq !== requestSeq) return;
+      const card = document.createElement('article');
+      card.className = 'card stack';
+      const title = document.createElement('strong');
+      title.textContent = 'Не удалось загрузить уведомления';
+      const text = document.createElement('p');
+      text.className = 'meta-muted';
+      text.textContent = error?.message || 'Ошибка запроса к серверу';
+      card.append(title, text);
+      list.replaceChildren(card);
+    }
+  }
+
+  function setActiveNotificationTab(nextTab) {
+    const normalizedTab = nextTab === 'events' ? 'events' : 'replies';
+    state.notificationsTab = normalizedTab;
+
+    tabs.querySelectorAll('.notification-tab-btn').forEach((node) => {
+      const selected = node.dataset.tab === normalizedTab;
+      node.classList.toggle('is-active', selected);
+      node.dataset.selected = selected ? 'true' : 'false';
+      node.setAttribute('aria-selected', selected ? 'true' : 'false');
+    });
+  }
+
+  // Активная кнопка остаётся визуально нажатой до выбора второй вкладки.
+  // При переключении класс active и aria-selected синхронно переходят на новую кнопку.
+  setActiveNotificationTab(state.notificationsTab);
+
+  tabs.querySelectorAll('.notification-tab-btn').forEach((btn) => {
     btn.addEventListener('click', () => {
-      state.notificationsTab = btn.dataset.tab;
-      tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
-      btn.classList.add('active');
-      renderList(list);
+      const nextTab = btn.dataset.tab === 'events' ? 'events' : 'replies';
+      if (state.notificationsTab === nextTab) {
+        setActiveNotificationTab(nextTab);
+        return;
+      }
+
+      setActiveNotificationTab(nextTab);
+      void load();
     });
   });
 
   screen.append(tabs, list);
+  void load();
   return screen;
 }

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

@@ -1,4 +1,4 @@
-import { profile } from '../mock-data.js';
+import { profile } from '../mock-data.js';
 import { state } from '../state.js';
 import {
   PROFILE_GENDER_FEMALE,
@@ -7,6 +7,7 @@ import {
 } from '../services/user-profile-params.js';
 import { buildIdentityLines } from '../services/user-connections.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 
 export const pageMeta = { id: 'profile-view', title: 'Профиль' };
 
@@ -101,22 +102,92 @@ export function render({ navigate, chrome }) {
   const topbar = document.createElement('header');
   topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
   topbar.innerHTML = `
-    <div class="header-actions profile-top-actions">
-      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="profile" aria-label="Редактировать профиль" title="Редактировать профиль">
-        <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
-      </button>
-      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="wallet" aria-label="Кошелёк" title="Кошелёк">
-        <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
-      </button>
-      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="settings" aria-label="Настройки" title="Настройки">
-        <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
+    <div class="header-left" aria-hidden="true"></div>
+    <div class="header-center"><h1 class="page-title">Профиль</h1></div>
+    <div class="header-actions profile-head-menu-wrap dm-head-menu-wrap">
+      <button type="button" class="dm-head-menu-btn profile-head-menu-btn" aria-label="Меню профиля" aria-haspopup="menu" aria-expanded="false">
       </button>
     </div>
   `;
-  const topActions = topbar.querySelector('.profile-top-actions');
-  topActions.querySelector('[data-top-action="profile"]')?.addEventListener('click', () => navigate('profile-edit-view'));
-  topActions.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => navigate('wallet-view'));
-  topActions.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => navigate('settings-view'));
+
+  const profileMenuWrap = topbar.querySelector('.profile-head-menu-wrap');
+  const profileMenuButton = topbar.querySelector('.profile-head-menu-btn');
+  profileMenuButton?.append(createOverflowDots());
+  let profileMenuPortal = null;
+
+  const closeProfileMenu = () => {
+    profileMenuPortal?.remove();
+    profileMenuPortal = null;
+    profileMenuButton?.setAttribute('aria-expanded', 'false');
+    profileMenuWrap?.classList.remove('is-open');
+  };
+
+  const positionProfileMenu = () => {
+    if (!profileMenuPortal || !profileMenuButton) return;
+    const rect = profileMenuButton.getBoundingClientRect();
+    const margin = 10;
+    const menuWidth = profileMenuPortal.offsetWidth || 224;
+    const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
+    profileMenuPortal.style.left = `${Math.round(left)}px`;
+    profileMenuPortal.style.top = `${Math.round(rect.bottom + 7)}px`;
+  };
+
+  const openProfileMenu = () => {
+    if (!profileMenuButton || profileMenuPortal) return;
+    const portal = document.createElement('div');
+    portal.className = 'dm-head-menu dm-head-menu--portal profile-head-menu';
+    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>
+    `;
+
+    const goTo = (route) => {
+      closeProfileMenu();
+      navigate(route);
+    };
+    portal.querySelector('[data-top-action="profile"]')?.addEventListener('click', () => goTo('profile-edit-view'));
+    portal.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => goTo('wallet-view'));
+    portal.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => goTo('settings-view'));
+    portal.addEventListener('click', (event) => event.stopPropagation());
+
+    document.body.append(portal);
+    profileMenuPortal = portal;
+    profileMenuButton.setAttribute('aria-expanded', 'true');
+    profileMenuWrap?.classList.add('is-open');
+    positionProfileMenu();
+  };
+
+  profileMenuButton?.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (profileMenuPortal) closeProfileMenu();
+    else openProfileMenu();
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!profileMenuPortal) return;
+    if (profileMenuPortal.contains(event.target) || profileMenuButton?.contains(event.target)) return;
+    closeProfileMenu();
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !profileMenuPortal) return;
+    closeProfileMenu();
+    profileMenuButton?.focus();
+  });
+  window.addEventListener('resize', positionProfileMenu, { passive: true });
+  window.addEventListener('scroll', positionProfileMenu, { passive: true, capture: true });
+
   chrome?.setTopbar(topbar);
 
   const card = document.createElement('div');