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

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

@@ -1,4 +1,5 @@
-import { renderHeader } from '../components/header.js';
+import { createTopBar } from '../components/topbar.js';
+import { createDropdownMenu } from '../components/dropdown-menu.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
 import { directMessages } from '../mock-data.js';
@@ -32,7 +33,18 @@ import { buildDmReplyTechBlock, parseDmTechBlocks, sanitizeUserDmTextForSend } f
 import { loadProfileSnapshot } from '../services/user-profile-params.js';
 import { makeProfileLinksRoute, makeProfileRoute } from '../services/shine-routes.js';
 
-export const pageMeta = { id: 'chat-view', title: 'Чат' };
+export const pageMeta = {
+  id: 'chat-view',
+  title: 'Чат',
+  shellMode: {
+    topFade: true,
+    bottomFade: true,
+    bottomFadeAnchor: 'composer',
+    contentUnderTopbar: true,
+    contentUnderBottom: true,
+    scrollContainer: 'nested',
+  },
+};
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';
 
 function menuIconSvg(name) {
@@ -49,58 +61,6 @@ function menuIconSvg(name) {
   return `<svg class="dm-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ''}</svg>`;
 }
 
-function openUserIdentityMenu({ anchorEl, login, navigate }) {
-  const root = document.getElementById('modal-root');
-  if (!root || !anchorEl) return;
-  const cleanLogin = String(login || '').trim();
-  root.innerHTML = `
-    <div class="dm-floating-menu-layer dm-user-menu-layer" id="chat-user-menu-layer">
-      <div class="dm-head-menu dm-head-menu--portal dm-user-identity-menu" role="menu">
-        <button type="button" class="dm-head-menu-item" role="menuitem" data-user-action="connections">
-          <img class="dm-menu-image-icon" src="/assets/SHiNE_connections_blue.svg" alt="" aria-hidden="true" />
-          <span>Показать связи</span>
-        </button>
-        <button type="button" class="dm-head-menu-item" role="menuitem" data-user-action="profile">
-          <img class="dm-menu-image-icon" src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
-          <span>Показать профиль</span>
-        </button>
-      </div>
-    </div>
-  `;
-
-  const layer = root.querySelector('#chat-user-menu-layer');
-  const menu = root.querySelector('.dm-user-identity-menu');
-  const close = () => {
-    document.removeEventListener('keydown', onKeydown);
-    root.innerHTML = '';
-  };
-  const onKeydown = (event) => {
-    if (event.key === 'Escape') close();
-  };
-  const rect = anchorEl.getBoundingClientRect();
-
-  window.requestAnimationFrame(() => {
-    if (!menu) return;
-    const width = menu.offsetWidth || 190;
-    const left = Math.max(10, Math.min(window.innerWidth - width - 10, rect.left));
-    menu.style.left = `${Math.round(left)}px`;
-    menu.style.top = `${Math.round(rect.bottom + 7)}px`;
-  });
-
-  layer?.addEventListener('pointerdown', (event) => {
-    if (event.target === layer) close();
-  });
-  document.addEventListener('keydown', onKeydown);
-  root.querySelector('[data-user-action="connections"]')?.addEventListener('click', () => {
-    close();
-    navigate(makeProfileLinksRoute(cleanLogin));
-  });
-  root.querySelector('[data-user-action="profile"]')?.addEventListener('click', () => {
-    close();
-    navigate(makeProfileRoute(cleanLogin));
-  });
-}
-
 function normalizeChatRelationType(value) {
   const clean = String(value || '').trim().toLowerCase();
   if (clean === 'close_friend' || clean === 'friend' || clean === 'contact') return clean;
@@ -178,15 +138,30 @@ function createChatHeaderParts(login, navigate) {
   };
 
   renderPeer();
-  identityButton.addEventListener('click', (event) => {
-    if (!cleanLogin || cleanLogin === 'unknown') return;
-    openUserIdentityMenu({ anchorEl: event.currentTarget, login: cleanLogin, navigate });
+  const identityMenu = createDropdownMenu({
+    transparent: true,
+    anchorEl: identityButton,
+    placement: 'bottom-start',
+    minWidth: 210,
+    items: [
+      {
+        label: 'Показать связи',
+        iconSrc: '/assets/SHiNE_connections_blue.svg',
+        action: () => navigate(makeProfileLinksRoute(cleanLogin)),
+      },
+      {
+        label: 'Показать профиль',
+        iconSrc: '/assets/profile-icon-profile.svg',
+        action: () => navigate(makeProfileRoute(cleanLogin)),
+      },
+    ],
   });
 
   return {
-    centerNode: identityButton,
+    center: identityButton,
     updatePeer,
     getPeer: () => ({ ...currentPeer }),
+    cleanup: () => identityMenu.destroy(),
   };
 }
 
@@ -414,91 +389,6 @@ function openMessageActionsMenu({
   });
 }
 
-function openChatActionsMenu({
-  anchorX = 0,
-  anchorY = 0,
-  showAddContact = false,
-  onCall,
-  onVideoCall,
-  onAddContact,
-  onClearHistory,
-  onDeleteChat,
-}) {
-  const root = document.getElementById('modal-root');
-  if (!root) return;
-
-  const menuId = `chat-header-actions-menu-${Date.now()}`;
-  root.innerHTML = `
-    <div class="dm-floating-menu-layer" id="chat-header-actions-layer">
-      <div class="modal-card stack dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
-        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-call">${menuIconSvg('call')}<span>Звонок</span></button>
-        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-video-call">${menuIconSvg('video')}<span>Видеозвонок</span></button>
-        ${showAddContact ? `<button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-add-contact"><span class="dm-menu-icon" aria-hidden="true">＋</span><span>Добавить в контакты</span></button>` : ''}
-        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-clear-history">${menuIconSvg('clear')}<span>Очистить историю</span></button>
-        <button class="secondary-btn dm-message-action-btn dm-message-action-btn--danger" type="button" id="chat-menu-delete-chat">${menuIconSvg('delete')}<span>Удалить чат</span></button>
-      </div>
-    </div>
-  `;
-
-  const menu = root.querySelector(`#${menuId}`);
-  if (!menu) return;
-
-  const close = () => {
-    document.removeEventListener('pointerdown', onDocumentPointerDown, true);
-    window.removeEventListener('resize', close);
-    window.removeEventListener('scroll', close, true);
-    root.innerHTML = '';
-  };
-
-  const onDocumentPointerDown = (event) => {
-    if (menu.contains(event.target)) return;
-    close();
-  };
-
-  document.addEventListener('pointerdown', onDocumentPointerDown, true);
-  window.addEventListener('resize', close);
-  window.addEventListener('scroll', close, true);
-
-  window.requestAnimationFrame(() => {
-    const menuRect = menu.getBoundingClientRect();
-    const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-    const left = Math.min(
-      Math.max(12, Number(anchorX || 0) - menuRect.width + 8),
-      Math.max(12, viewportWidth - menuRect.width - 12)
-    );
-    const top = Math.min(
-      Math.max(12, Number(anchorY || 0) + 10),
-      Math.max(12, viewportHeight - menuRect.height - 12)
-    );
-    menu.style.left = `${left}px`;
-    menu.style.top = `${top}px`;
-    menu.style.transformOrigin = `${Math.round(Number(anchorX || left) - left)}px top`;
-    menu.classList.add('is-visible');
-  });
-
-  root.querySelector('#chat-menu-call')?.addEventListener('click', async () => {
-    close();
-    if (typeof onCall === 'function') await onCall();
-  });
-  root.querySelector('#chat-menu-video-call')?.addEventListener('click', async () => {
-    close();
-    if (typeof onVideoCall === 'function') await onVideoCall();
-  });
-  root.querySelector('#chat-menu-add-contact')?.addEventListener('click', async () => {
-    close();
-    if (typeof onAddContact === 'function') await onAddContact();
-  });
-  root.querySelector('#chat-menu-clear-history')?.addEventListener('click', async () => {
-    close();
-    if (typeof onClearHistory === 'function') await onClearHistory();
-  });
-  root.querySelector('#chat-menu-delete-chat')?.addEventListener('click', async () => {
-    close();
-    if (typeof onDeleteChat === 'function') await onDeleteChat();
-  });
-}
-
 function showTtsMissingConfigDialog() {
   const root = document.getElementById('modal-root');
   if (!root) return;
@@ -853,7 +743,7 @@ function renderLog(
         const replyParsed = parseDmTechBlocks(String(replyTarget?.text || ''));
         const replyBox = document.createElement('button');
         replyBox.type = 'button';
-        replyBox.className = 'bubble-reply-preview';
+        replyBox.className = 'ui-button bubble-reply-preview';
 
         const replyAuthor = document.createElement('div');
         replyAuthor.className = 'bubble-reply-preview-author';
@@ -998,7 +888,6 @@ async function mergeDirectMessagesPage(chatId, payloadMessages) {
 }
 
 export function render({ navigate, route, chrome }) {
-  document.body.classList.add('chat-topbar-overlay');
   const routeChatId = route.params.chatId || 'u1';
   const chatId = normalizeDmChatId(routeChatId) || 'u1';
   const contact = directMessages.find((d) => normalizeDmChatId(d.id) === chatId) || {
@@ -1140,10 +1029,10 @@ export function render({ navigate, route, chrome }) {
   log.className = 'messages-log dm-messages-log';
 
   const chatHeaderParts = createChatHeaderParts(chatId, navigate);
-  const chatHeader = renderHeader({
-      centerNode: chatHeaderParts.centerNode,
-      leftAction: { label: '←', onClick: () => navigate('messages-list') },
-      rightActions: [
+  const chatHeader = createTopBar({
+      center: chatHeaderParts.center,
+      back: { label: '←', onClick: () => navigate('messages-list') },
+      actions: [
         {
           title: 'Позвонить',
           ariaLabel: 'Позвонить',
@@ -1156,22 +1045,28 @@ export function render({ navigate, route, chrome }) {
           title: 'Действия чата',
           ariaLabel: 'Открыть меню действий чата',
           className: 'chat-header-icon-btn chat-header-menu-btn',
-          onClick: (event) => {
-            openChatActionsMenu({
-              anchorX: Number(event?.currentTarget?.getBoundingClientRect?.().right || event?.clientX || 0),
-              anchorY: Number(event?.currentTarget?.getBoundingClientRect?.().bottom || event?.clientY || 0),
-              showAddContact: normalizeChatRelationType(peerRelationType) === 'none',
-              onCall: () => handleStartCall('audio'),
-              onVideoCall: () => handleStartCall('video'),
-              onAddContact: async () => {
-                try {
-                  await addPeerToContacts();
-                } catch (error) {
-                  showToast(`Не удалось добавить в контакты: ${error?.message || 'unknown'}`, { kind: 'error', timeoutMs: 1600 });
+          menu: {
+            minWidth: 230,
+            items: () => [
+              { label: 'Звонок', iconHtml: menuIconSvg('call'), action: () => handleStartCall('audio') },
+              { label: 'Видеозвонок', iconHtml: menuIconSvg('video'), action: () => handleStartCall('video') },
+              normalizeChatRelationType(peerRelationType) === 'none'
+                ? {
+                  label: 'Добавить в контакты',
+                  iconHtml: '<span aria-hidden="true">＋</span>',
+                  action: async () => {
+                    try {
+                      await addPeerToContacts();
+                    } catch (error) {
+                      showToast(`Не удалось добавить в контакты: ${error?.message || 'unknown'}`, { kind: 'error', timeoutMs: 1600 });
+                    }
+                  },
                 }
-              },
-              onClearHistory: async () => {
-                openChatConfirmModal({
+                : null,
+              {
+                label: 'Очистить историю',
+                iconHtml: menuIconSvg('clear'),
+                action: () => openChatConfirmModal({
                   title: 'Очистить историю?',
                   text: `Добавить техническое сообщение очистки истории переписки с ${contact.name}?`,
                   confirmLabel: 'Очистить',
@@ -1184,55 +1079,54 @@ export function render({ navigate, route, chrome }) {
                       showToast(`Не удалось очистить историю: ${error?.message || 'unknown'}`, { kind: 'error', timeoutMs: 1600 });
                     }
                   },
-                });
+                }),
               },
-              onDeleteChat: async () => {
-                const relationBeforeDelete = normalizeChatRelationType(peerRelationType);
-                openDeleteChatConfirmModal({
-                  contactName: contact.name,
-                  relationType: relationBeforeDelete,
-                  onConfirm: async ({ deleteHistory }) => {
-                    try {
-                      if (deleteHistory) {
-                        await clearConversationHistory();
+              {
+                label: 'Удалить чат',
+                iconHtml: menuIconSvg('delete'),
+                danger: true,
+                action: () => {
+                  const relationBeforeDelete = normalizeChatRelationType(peerRelationType);
+                  openDeleteChatConfirmModal({
+                    contactName: contact.name,
+                    relationType: relationBeforeDelete,
+                    onConfirm: async ({ deleteHistory }) => {
+                      try {
+                        if (deleteHistory) await clearConversationHistory();
+                        const relationKinds = relationBeforeDelete === 'close_friend' || relationBeforeDelete === 'friend'
+                          ? ['close_friend', 'friend', 'contact']
+                          : ['contact'];
+                        for (const kind of relationKinds) {
+                          await authService.setUserRelation({
+                            login: state.session.login,
+                            toLogin: chatId,
+                            kind,
+                            enabled: false,
+                            storagePwd: state.session.storagePwdInMemory,
+                          });
+                        }
+                        const contactsPayload = await authService.listContacts();
+                        setContacts(
+                          contactsPayload?.contacts
+                          || contactsPayload?.dialogs?.filter((x) => x?.relationFlag !== 'none').map((x) => x.peerLogin)
+                          || [],
+                        );
+                        notifyUnreadStateUpdated();
+                        showToast('Чат удалён', { timeoutMs: 1200 });
+                        navigate('messages-list');
+                      } catch (error) {
+                        showToast(`Не удалось удалить чат: ${error?.message || 'unknown'}`, { kind: 'error', timeoutMs: 1600 });
                       }
-
-                      // Друг/близкий друг может иметь одновременно и более слабые флаги связи.
-                      // Для настоящего «удалить чат» снимаем весь социальный стек, иначе пустой чат
-                      // закономерно останется в списке из-за действующей связи.
-                      const relationKinds = relationBeforeDelete === 'close_friend' || relationBeforeDelete === 'friend'
-                        ? ['close_friend', 'friend', 'contact']
-                        : ['contact'];
-                      for (const kind of relationKinds) {
-                        await authService.setUserRelation({
-                          login: state.session.login,
-                          toLogin: chatId,
-                          kind,
-                          enabled: false,
-                          storagePwd: state.session.storagePwdInMemory,
-                        });
-                      }
-
-                      const contactsPayload = await authService.listContacts();
-                      setContacts(
-                        contactsPayload?.contacts
-                        || contactsPayload?.dialogs?.filter((x) => x?.relationFlag !== 'none').map((x) => x.peerLogin)
-                        || [],
-                      );
-                      notifyUnreadStateUpdated();
-                      showToast('Чат удалён', { timeoutMs: 1200 });
-                      navigate('messages-list');
-                    } catch (error) {
-                      showToast(`Не удалось удалить чат: ${error?.message || 'unknown'}`, { kind: 'error', timeoutMs: 1600 });
-                    }
-                  },
-                });
+                    },
+                  });
+                },
               },
-            });
+            ].filter(Boolean),
           },
         },
       ],
     });
+  chatHeader.addCleanup(chatHeaderParts.cleanup);
   chrome?.setTopbar(chatHeader);
 
 
@@ -1788,8 +1682,6 @@ export function render({ navigate, route, chrome }) {
     window.removeEventListener('shine-dm-delivery-updated', handleDeliveryRefresh);
     boundScrollContainer?.removeEventListener('scroll', handleHistoryScroll);
     clearUnreadSeparatorHideTimer();
-    document.body.classList.remove('chat-topbar-overlay');
-    chrome?.setComposer(null);
   };
   return screen;
 }