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

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

@@ -1,5 +1,4 @@
-import { renderHeader } from '../components/header.js';
-import { createDropdownMenu } from '../components/dropdown-menu.js';
+import { createTopBar } from '../components/topbar.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
 import { authService, state } from '../state.js';
 import { makeProfileRoute } from '../services/shine-routes.js';
@@ -9,7 +8,18 @@ import { engineModelFromGraphModel } from './network/adapter.js';
 import { openNodeMenu } from './network/node-menu.js';
 import { userDisplayName } from '../services/user-display.js';
 
-export const pageMeta = { id: 'network-view', title: 'Связи' };
+export const pageMeta = {
+  id: 'network-view',
+  title: 'Связи',
+  shellMode: {
+    topFade: true,
+    bottomFade: true,
+    bottomFadeAnchor: 'toolbar',
+    fadeProfile: 'edge',
+    contentUnderTopbar: true,
+    scrollContainer: 'locked',
+  },
+};
 
 const GENDER_MALE = 'male';
 const GENDER_FEMALE = 'female';
@@ -202,8 +212,6 @@ export function render({ navigate, route, chrome } = {}) {
 
   const screen = document.createElement('section');
   screen.className = 'network-screen';
-  const appScreenEl = document.getElementById('app-screen');
-  appScreenEl?.classList.add('network-scroll-lock');
 
   const stage = document.createElement('div');
   stage.className = 'network-stage';
@@ -434,39 +442,34 @@ export function render({ navigate, route, chrome } = {}) {
     }
   }
 
-  const header = renderHeader({
-    title: 'Связи',
-    rightActions: [
-      {
-        iconNode: createOverflowDots(),
-        title: 'Меню связей',
-        ariaLabel: 'Открыть меню связей',
-        className: 'chat-header-icon-btn network-header-menu-btn',
-        onClick: () => {},
-      },
-    ],
-  });
-  const networkMenuButton = header.querySelector('.network-header-menu-btn');
   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 networkMenu = createDropdownMenu({
-    anchorEl: networkMenuButton,
-    minWidth: 220,
-    items: [
-      { label: 'Найти пользователя', iconHtml: searchIconHtml, action: openSearchModal },
+  const header = createTopBar({
+    title: 'Связи',
+    actions: [
+      {
+        iconNode: createOverflowDots(),
+        title: 'Меню связей',
+        ariaLabel: 'Открыть меню связей',
+        className: 'chat-header-icon-btn network-header-menu-btn',
+        menu: {
+          minWidth: 220,
+          items: [
+            { label: 'Найти пользователя', iconHtml: searchIconHtml, action: openSearchModal },
+          ],
+        },
+      },
     ],
   });
 
   // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
-    networkMenu.destroy();
     if (engine) engine.destroy();
     engine = null;
-    appScreenEl?.classList.remove('network-scroll-lock');
   };
 
   if (routeLogin) {