UI: улучшить личные сообщения и поиск контактов

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

@@ -1,4 +1,3 @@
-import { renderHeader } from '../components/header.js';
 import { directMessages } from '../mock-data.js';
 import {
   getChatMessages,
@@ -66,7 +65,7 @@ function createDmAvatar(login) {
 
 function formatChatRowTime(ts) {
   const value = Number(ts || 0);
-  if (!Number.isFinite(value) || value <= 0) return '-';
+  if (!Number.isFinite(value) || value <= 0) return '';
   return new Intl.DateTimeFormat('ru-RU', {
     day: '2-digit',
     month: '2-digit',
@@ -75,17 +74,29 @@ function formatChatRowTime(ts) {
   }).format(new Date(value));
 }
 
+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 }) {
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-list-screen';
+  const login = String(state.session.login || '').trim();
 
-  screen.append(
-    renderHeader({
-      title: 'Личные сообщения',
-      leftLabel: String(state.session.login || '').trim(),
-      rightActions: [{ label: '+', onClick: () => navigate('contact-search-view') }],
-    }),
-  );
+  const head = document.createElement('header');
+  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">${login}</span>
+      </div>
+    </div>
+    <h1 class="dm-head-title">Контакты</h1>
+    <button type="button" class="dm-head-plus" aria-label="Новый диалог">+</button>
+  `;
+  head.querySelector('.dm-head-plus')?.addEventListener('click', () => navigate('contact-search-view'));
+
+  const divider = document.createElement('div');
+  divider.className = 'dm-divider';
 
   const list = document.createElement('div');
   list.className = 'stack dm-list';
@@ -95,20 +106,26 @@ export function render({ navigate }) {
     row.className = 'list-item dm-dialog-card';
     const avatarEl = createDmAvatar(item.id);
     avatarEl.classList.add('avatar');
+    const avatarWrap = document.createElement('div');
+    avatarWrap.className = 'dm-av dm-av--default';
+    avatarWrap.append(avatarEl);
     row.innerHTML = `
       <div class="dm-row-main">
-        <div class="dm-row-title-wrap">
+        <div class="dm-row-titleline dm-row-titlewrap">
           <strong class="dm-row-title">${item.name}</strong>
-          ${item.notInContacts ? '<span class="meta-muted">не в контактах</span>' : ''}
+          ${item.notInContacts ? '<span class="dm-contact-note">не в контактах</span>' : ''}
         </div>
-        <p class="meta-muted dm-row-last-message">${item.lastMessage}</p>
+        <p class="dm-row-last-message">${item.lastMessage}</p>
       </div>
       <div class="dm-row-meta-col">
-        ${item.unread ? `<span class="unread">${item.unread}</span>` : '<span></span>'}
-        <span class="meta-muted dm-row-time">${item.time}</span>
+        ${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">${item.time}</span>` : '<span class="dm-row-time dm-row-time--empty"></span>'}
+          <span class="dm-chevron">${SVG_CHEVRON}</span>
+        </div>
       </div>
     `;
-    row.prepend(avatarEl);
+    row.prepend(avatarWrap);
     row.addEventListener('click', () => navigate(`chat-view/${encodeURIComponent(item.id)}`));
     return row;
   }
@@ -206,7 +223,7 @@ export function render({ navigate }) {
     }
   }
 
-  screen.append(list);
+  screen.append(head, divider, list);
   loadList();
   return screen;
 }