Обновить UI профиля и навигации

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

@@ -10,6 +10,7 @@ import {
 import { renderUserAvatar } from '../components/avatar-image.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
 import { createDropdownMenu } from '../components/dropdown-menu.js';
+import { createTopBar } from '../components/topbar.js';
 import { createShineConnectionsLogo } from '../components/shine-logo.js';
 import { loadProfileSnapshot } from '../services/user-profile-params.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
@@ -200,34 +201,19 @@ export function render({ navigate, chrome }) {
   const login = String(state.session.login || '').trim();
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-list-screen';
-  const head = document.createElement('header');
-  head.className = 'dm-head';
-  head.innerHTML = `
-    <div class="dm-head-brand">
-      <span class="dm-head-logo-wrap" aria-hidden="true"></span>
-    </div>
-    <button type="button" class="dm-head-title dm-head-filter-title" id="dm-chat-filter-title">Чаты</button>
-    <div class="dm-head-menu-wrap">
-      <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>
-        </button>
-      </div>
-    </div>
-  `;
-  head.querySelector('.dm-head-logo-wrap')?.append(
-    createShineConnectionsLogo({ className: 'dm-head-logo' }),
-  );
-  const menuButton = head.querySelector('.dm-head-menu-btn');
-  menuButton?.append(createOverflowDots());
+  const brand = document.createElement('div');
+  brand.className = 'dm-head-brand';
+  const logoWrap = document.createElement('span');
+  logoWrap.className = 'dm-head-logo-wrap';
+  logoWrap.setAttribute('aria-hidden', 'true');
+  logoWrap.append(createShineConnectionsLogo({ className: 'dm-head-logo' }));
+  brand.append(logoWrap);
 
   let currentChatFilter = 'all';
-  const filterTitle = head.querySelector('#dm-chat-filter-title');
+  const filterTitle = document.createElement('button');
+  filterTitle.type = 'button';
+  filterTitle.className = 'dm-head-filter-title';
+  filterTitle.textContent = 'Чаты';
   const filterLabels = {
     all: 'Чаты',
     close_friend: 'Близкие друзья',
@@ -237,8 +223,9 @@ export function render({ navigate, chrome }) {
   };
   let reloadForFilter = () => {};
   const chatFilterMenu = createDropdownMenu({
+    transparent: true,
     anchorEl: filterTitle,
-    align: 'left',
+    placement: 'bottom-start',
     leftShift: 72,
     minWidth: 225,
     items: [
@@ -250,92 +237,31 @@ export function render({ navigate, chrome }) {
     ],
   });
 
-  const menuWrap = head.querySelector('.dm-head-menu-wrap');
-  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
-  // land on the content layer underneath. Render the open menu as a body portal.
-  menuTemplate?.remove();
-
-  let menuPortal = null;
-
-  const closeHeadMenu = () => {
-    menuPortal?.remove();
-    menuPortal = null;
-    menuButton?.setAttribute('aria-expanded', 'false');
-    menuWrap?.classList.remove('is-open');
-  };
-
-  const positionHeadMenu = () => {
-    if (!menuPortal || !menuButton) return;
-    const rect = menuButton.getBoundingClientRect();
-    const margin = 10;
-    const menuWidth = menuPortal.offsetWidth || 206;
-    const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
-    menuPortal.style.left = `${Math.round(left)}px`;
-    const titleRect = filterTitle?.getBoundingClientRect?.();
-    menuPortal.style.top = `${Math.round((titleRect?.bottom || rect.bottom) + 7)}px`;
-  };
-
-  const openHeadMenu = () => {
-    if (!menuButton || menuPortal) return;
-    document.dispatchEvent(new CustomEvent('shine:dropdown-open', { detail: { owner: menuButton } }));
-    const portal = document.createElement('div');
-    portal.className = 'dm-head-menu dm-head-menu--portal';
-    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>
-      </button>
-    `;
-
-    portal.querySelector('[data-action="search-contacts"]')?.addEventListener('click', (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      closeHeadMenu();
-      navigate('contact-search-view');
-    });
-    portal.addEventListener('click', (event) => event.stopPropagation());
-
-    document.body.append(portal);
-    menuPortal = portal;
-    menuButton.setAttribute('aria-expanded', 'true');
-    menuWrap?.classList.add('is-open');
-    positionHeadMenu();
-  };
-
-  menuButton?.addEventListener('click', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (menuPortal) closeHeadMenu();
-    else openHeadMenu();
+  const searchIconHtml = `
+    <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>
+  `;
+  const head = createTopBar({
+    left: brand,
+    center: filterTitle,
+    actions: [
+      {
+        iconNode: createOverflowDots(),
+        title: 'Меню чатов',
+        ariaLabel: 'Меню чатов',
+        className: 'messages-topbar-menu-btn',
+        menu: {
+          minWidth: 210,
+          items: [
+            { label: 'Поиск пользователей', iconHtml: searchIconHtml, action: () => navigate('contact-search-view') },
+          ],
+        },
+      },
+    ],
   });
 
-  const onOutsideClick = (event) => {
-    if (!menuPortal) return;
-    if (menuPortal.contains(event.target) || menuButton?.contains(event.target)) return;
-    closeHeadMenu();
-  };
-  const onPeerDropdownOpen = (event) => {
-    if (!menuPortal || event?.detail?.owner === menuButton) return;
-    closeHeadMenu();
-  };
-  const onMenuKeydown = (event) => {
-    if (event.key !== 'Escape' || !menuPortal) return;
-    closeHeadMenu();
-    menuButton?.focus();
-  };
-  const onMenuViewportChange = () => positionHeadMenu();
-  document.addEventListener('click', onOutsideClick);
-  document.addEventListener('keydown', onMenuKeydown);
-  document.addEventListener('shine:dropdown-open', onPeerDropdownOpen);
-  window.addEventListener('resize', onMenuViewportChange, { passive: true });
-  window.addEventListener('scroll', onMenuViewportChange, { passive: true, capture: true });
-
   const list = document.createElement('div');
   list.className = 'stack dm-list';
 
@@ -522,13 +448,7 @@ function renderRow(item) {
   loadList();
 
   screen.cleanup = () => {
-    closeHeadMenu();
     chatFilterMenu.destroy();
-    document.removeEventListener('click', onOutsideClick);
-    document.removeEventListener('keydown', onMenuKeydown);
-    document.removeEventListener('shine:dropdown-open', onPeerDropdownOpen);
-    window.removeEventListener('resize', onMenuViewportChange);
-    window.removeEventListener('scroll', onMenuViewportChange, true);
   };
 
   return screen;