Обновить DM, сеть и оффлайн-бандл

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

@@ -1,4 +1,6 @@
 import { renderHeader } from '../components/header.js';
+import { createDropdownMenu } from '../components/dropdown-menu.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';
@@ -25,32 +27,6 @@ function createDebounced(fn, delayMs = 2000) {
   };
 }
 
-function createHeaderSearchIcon() {
-  const ns = 'http://www.w3.org/2000/svg';
-  const svg = document.createElementNS(ns, 'svg');
-  svg.setAttribute('viewBox', '0 0 24 24');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.setAttribute('class', 'header-icon-svg header-icon-svg--search');
-
-  const circle = document.createElementNS(ns, 'circle');
-  circle.setAttribute('cx', '11');
-  circle.setAttribute('cy', '11');
-  circle.setAttribute('r', '6.5');
-  circle.setAttribute('fill', 'none');
-  circle.setAttribute('stroke', 'currentColor');
-  circle.setAttribute('stroke-width', '2');
-
-  const handle = document.createElementNS(ns, 'path');
-  handle.setAttribute('d', 'M16 16l4.5 4.5');
-  handle.setAttribute('fill', 'none');
-  handle.setAttribute('stroke', 'currentColor');
-  handle.setAttribute('stroke-width', '2');
-  handle.setAttribute('stroke-linecap', 'round');
-
-  svg.append(circle, handle);
-  return svg;
-}
-
 function normKey(value) {
   return normalizeLogin(value).toLowerCase();
 }
@@ -290,7 +266,7 @@ export function render({ navigate, route, chrome } = {}) {
       <div class="modal" id="network-search-modal">
         <div class="modal-card stack">
           <button class="icon-btn" type="button" id="network-search-close" style="justify-self:end;">✕</button>
-          <h3 class="modal-title">Найти человека</h3>
+          <h3 class="modal-title">Найти пользователя</h3>
           <div class="row" style="gap:8px;">
             <input class="input" id="network-search-input" type="text" maxlength="30" placeholder="Введите логин" />
             <button class="primary-btn" type="button" id="network-search-run">Искать</button>
@@ -462,17 +438,32 @@ export function render({ navigate, route, chrome } = {}) {
     title: 'Связи',
     rightActions: [
       {
-        iconNode: createHeaderSearchIcon(),
-        title: 'Найти пользователя',
-        ariaLabel: 'Найти пользователя',
-        className: 'chat-header-icon-btn',
-        onClick: openSearchModal,
+        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 },
+    ],
+  });
 
   // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
+    networkMenu.destroy();
     if (engine) engine.destroy();
     engine = null;
     appScreenEl?.classList.remove('network-scroll-lock');