Доработать аватары и меню UI

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

@@ -9,6 +9,7 @@ import {
 } from '../state.js';
 import { loadCurrentRelations } from '../services/user-connections.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';
 
@@ -37,13 +38,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) => {
@@ -58,6 +60,7 @@ function createDmAvatar(login) {
         : null,
       size: 'small',
       title,
+      className,
     });
     upgraded.classList.add('avatar');
     avatarEl.replaceWith(upgraded);
@@ -91,8 +94,6 @@ 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';
@@ -102,15 +103,11 @@ export function render({ navigate, chrome }) {
   head.className = 'dm-head';
   head.innerHTML = `
     <div class="dm-head-brand">
-      <div class="dm-head-hex">${(login[0] || 'A').toUpperCase()}</div>
-      <div class="dm-head-id">
-        <span class="dm-head-name"></span>
-      </div>
+      <div class="dm-head-avatar-slot"></div>
     </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>
       <div class="dm-head-menu" role="menu" hidden>
         <button type="button" class="dm-head-menu-item" role="menuitem" data-action="search-contacts">
@@ -123,11 +120,14 @@ export function render({ navigate, chrome }) {
       </div>
     </div>
   `;
-  const headName = head.querySelector('.dm-head-name');
-  if (headName) headName.textContent = login;
+  const headAvatarSlot = head.querySelector('.dm-head-avatar-slot');
+  if (headAvatarSlot) {
+    headAvatarSlot.append(createDmAvatar(login, { className: 'dm-head-avatar' }));
+  }
+  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
@@ -229,7 +229,6 @@ export function render({ navigate, chrome }) {
         ${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
         <div class="dm-row-meta-line">
           ${item.time ? '<span class="dm-row-time"></span>' : '<span class="dm-row-time dm-row-time--empty"></span>'}
-          <span class="dm-chevron">${SVG_CHEVRON}</span>
         </div>
       </div>
     `;