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

VERSION.properties

@@ -1,2 +1,2 @@
-client.version=1.2.221
+client.version=1.2.222
-server.version=1.2.209
+server.version=1.2.210

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

@@ -71,7 +71,7 @@ function openMessageActionsMenu({
   const menuId = `chat-message-actions-menu-${Date.now()}`;
   root.innerHTML = `
     <div class="dm-floating-menu-layer" id="chat-message-actions-layer">
-      <div class="modal-card stack dm-dialog-card dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
+      <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="msg-action-copy">Скопировать как текст</button>
         <button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-read">Прочесть</button>
         ${canEdit ? '<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-edit">Изменить</button>' : ''}
@@ -579,6 +579,10 @@ export function render({ navigate, route }) {
       }
 
       renderLog(log, chatId, { onOpenActions: handleOpenActions });
+      scrollToLatestMessage(log);
+      window.requestAnimationFrame(() => scrollToLatestMessage(log));
+      window.setTimeout(() => scrollToLatestMessage(log), 90);
+      window.setTimeout(() => scrollToLatestMessage(log), 220);
       addAppLogEntry({
         level: 'info',
         source: 'outgoing-dm',

shine-UI/js/pages/contact-search-view.js

@@ -61,9 +61,11 @@ function createSearchAvatar(login) {
 export function render({ navigate }) {
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-search-screen';
+  let searchTimer = 0;
+  let searchSeq = 0;
 
   const input = document.createElement('input');
-  input.className = 'input dm-input';
+  input.className = 'input dm-input contact-search-input';
   input.type = 'text';
   input.name = 'contact';
   input.placeholder = 'Введите начало логина';
@@ -71,26 +73,28 @@ export function render({ navigate }) {
   input.maxLength = 80;
 
   const resultsCard = document.createElement('section');
-  resultsCard.className = 'card stack dm-dialog-card';
+  resultsCard.className = 'card stack contact-search-results-card';
   resultsCard.hidden = true;
 
   const status = document.createElement('p');
-  status.className = 'meta-muted';
+  status.className = 'contact-search-results-title';
 
   const resultsList = document.createElement('div');
   resultsList.className = 'stack dm-list';
 
   const renderResults = (matches, query) => {
     resultsList.innerHTML = '';
-    resultsCard.hidden = false;
 
     if (!query.trim()) {
-      status.textContent = 'Введите начало логина пользователя.';
+      status.textContent = '';
+      resultsCard.hidden = true;
       return;
     }
 
+    resultsCard.hidden = false;
+
     if (!matches.length) {
-      status.textContent = 'Совпадений не найдено.';
+      status.textContent = 'Найдено пользователей: 0';
       return;
     }
 
@@ -101,11 +105,10 @@ export function render({ navigate }) {
       row.className = 'list-item dm-dialog-card';
       const avatarEl = createSearchAvatar(login);
       row.innerHTML = `
-        <div>
+        <div class="contact-search-result-main">
-          <strong>${login}</strong>
+          <strong class="dm-row-title">${login}</strong>
-          <p class="meta-muted" style="margin-top:4px;">Пользователь сервера</p>
         </div>
-        <div class="meta-muted">Профиль</div>
+        <span class="dm-chevron" aria-hidden="true">›</span>
       `;
       row.prepend(avatarEl);
       row.addEventListener('click', () => {
@@ -115,12 +118,9 @@ export function render({ navigate }) {
     });
   };
 
-  const searchButton = document.createElement('button');
+  const runSearch = async () => {
-  searchButton.className = 'primary-btn dm-send-btn';
-  searchButton.type = 'button';
-  searchButton.textContent = 'Поиск';
-  searchButton.addEventListener('click', async () => {
     const query = input.value.trim();
+    const seq = ++searchSeq;
     if (!query) {
       renderResults([], '');
       return;
@@ -128,11 +128,38 @@ export function render({ navigate }) {
 
     try {
       const logins = await authService.searchUsers(query);
+      if (seq !== searchSeq) return;
       renderResults((logins || []).slice(0, 5), query);
     } catch (e) {
+      if (seq !== searchSeq) return;
       status.textContent = `Ошибка поиска: ${e.message || 'unknown'}`;
       resultsCard.hidden = false;
+      resultsList.innerHTML = '';
     }
+  };
+
+  const scheduleSearch = () => {
+    if (searchTimer) window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      searchTimer = 0;
+      void runSearch();
+    }, 2000);
+  };
+
+  const searchButton = document.createElement('button');
+  searchButton.className = 'primary-btn dm-send-btn';
+  searchButton.type = 'button';
+  searchButton.textContent = 'Поиск';
+  searchButton.addEventListener('click', async () => {
+    if (searchTimer) {
+      window.clearTimeout(searchTimer);
+      searchTimer = 0;
+    }
+    await runSearch();
+  });
+
+  input.addEventListener('input', () => {
+    scheduleSearch();
   });
 
   const controls = document.createElement('div');
@@ -140,7 +167,7 @@ export function render({ navigate }) {
   controls.append(searchButton);
 
   const formCard = document.createElement('section');
-  formCard.className = 'card stack dm-dialog-card';
+  formCard.className = 'card stack contact-search-form-card';
   formCard.append(input, controls);
 
   resultsCard.append(status, resultsList);
@@ -154,5 +181,9 @@ export function render({ navigate }) {
     resultsCard,
   );
 
+  screen.cleanup = () => {
+    if (searchTimer) window.clearTimeout(searchTimer);
+  };
+
   return screen;
 }

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(
+  const head = document.createElement('header');
-    renderHeader({
+  head.className = 'dm-head';
-      title: 'Личные сообщения',
+  head.innerHTML = `
-      leftLabel: String(state.session.login || '').trim(),
+    <div class="dm-head-brand">
-      rightActions: [{ label: '+', onClick: () => navigate('contact-search-view') }],
+      <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>'}
+        ${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
-        <span class="meta-muted dm-row-time">${item.time}</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;
 }

shine-UI/styles/components.css

@@ -1168,6 +1168,35 @@
   gap: 8px;
 }
 
+.contact-search-form-card,
+.contact-search-results-card {
+  margin: 0 6px;
+  padding: 14px;
+  border-radius: 24px;
+  background: rgba(7, 10, 18, 0.88);
+  border: 1px solid rgba(140, 99, 255, 0.24);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
+}
+
+.contact-search-input {
+  min-height: 48px;
+  border-radius: 16px;
+  padding: 0 14px;
+}
+
+.contact-search-results-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: rgba(252, 234, 192, 0.92);
+  text-align: center;
+}
+
+.contact-search-result-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
 .input {
   border: 1px solid var(--line);
   border-radius: 12px;
@@ -3573,8 +3602,8 @@ textarea.input {
   grid-template-columns: 60px minmax(0, 1fr) auto;
   gap: 12px;
   align-items: center;
-  min-height: 92px;                      /* карточки не ужимаем; тап-зона ≥44px */
+  min-height: 74px;
-  padding: 14px 16px 14px 14px;
+  padding: 10px 12px 10px 10px;
   border-radius: 26px;
   background: rgba(7, 10, 18, 0.88);
   backdrop-filter: blur(24px);
@@ -3636,6 +3665,7 @@ textarea.input {
 .dm-head-name { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-head-sub { font-size: 11px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-head-title { font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; text-align: center; padding: 0 6px; }
+.dm-list-screen .dm-head-title { color: #FCEAC0; text-shadow: 0 0 6px rgba(240, 184, 46, 0.32), 0 0 14px rgba(240, 184, 46, 0.12); }
 /* Центр шапки — светящийся бренд «Shine» */
 .dm-head-shine {
   font-size: 21px; letter-spacing: 0.6px; color: #FCEAC0;
@@ -3648,7 +3678,7 @@ textarea.input {
 }
 @media (prefers-reduced-motion: reduce) { .dm-head-shine { animation: none; } }
 .dm-head-plus {
-  justify-self: end; width: 48px; height: 48px; border-radius: 15px;
+  justify-self: end; width: 48px; height: 48px; border-radius: 50%;
   display: grid; place-items: center; font-size: 24px; line-height: 1; font-weight: 300;
   color: #FFD98A; border: 1.5px solid rgba(240, 184, 46, 0.6);
   background: rgba(12, 12, 16, 0.66);
@@ -3660,20 +3690,34 @@ textarea.input {
 .dm-divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: var(--rel-family); box-shadow: 0 0 8px var(--rel-family-glow); }
 
 /* список: скролл внутри контента, карточки не ужимаем, отступ снизу под bottom nav (86px) + 16px */
-.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; padding-bottom: calc(86px + 16px); }
+.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; padding-bottom: calc(86px + 16px); }
 
 /* текст карточки */
 .dm-row-main { min-width: 0; }
 .dm-row-titleline { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.dm-row-titlewrap { flex-wrap: wrap; row-gap: 6px; }
 .dm-dialog-card .dm-row-title { font-size: 16px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-dialog-card .dm-row-last-message { font-size: 14px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dm-contact-note {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(244, 246, 255, 0.62);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
 /* галочка-подтверждён у имени (золотая, без слова «Подтверждён») */
 .dm-name-check { display: inline-flex; flex: 0 0 auto; color: var(--rel-family); }
 .dm-name-check svg { width: 16px; height: 16px; }
 
 /* AvatarRing — обод/свечение по тону (адаптация орбов «Связей», без тяжёлой магии) */
-.dm-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; position: relative; }
+.dm-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
-.dm-av .avatar { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border: none; box-shadow: none; }
+.dm-av .avatar { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border: none; box-shadow: none; }
 /* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
 .dm-av--default { box-shadow: none; }
 .dm-av--family  { box-shadow: none; }
@@ -3697,10 +3741,35 @@ textarea.input {
   .dm-av--shining::before { animation: none; }
 }
 
-/* правая зона: один статус сверху, ниже [unread + chevron] */
+.dm-row-meta-col {
-/* правая зона: один горизонтальный ряд [статус][unread][chevron] на общей оси */
+  display: inline-flex;
-.dm-dialog-card .dm-row-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
+  min-width: 0;
-.dm-dialog-card .dm-row-meta .dm-chevron { margin-left: 4px; } /* отступ бейдж→chevron ≈ 12px */
+  align-self: stretch;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 4px;
+}
+.dm-row-meta-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+}
+.dm-row-meta-spacer {
+  width: 24px;
+  height: 24px;
+}
+.dm-row-time {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(244, 246, 255, 0.44);
+}
+.dm-row-time--empty {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+}
 /* непрочитанные — отдельная violet-сфера (НЕ изумруд) */
 .dm-unread-badge {
   min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
@@ -3711,6 +3780,17 @@ textarea.input {
 .dm-chevron { display: inline-flex; color: rgba(244, 246, 255, 0.32); }
 .dm-chevron svg { width: 16px; height: 16px; }
 
+@media (max-width: 380px) {
+  .dm-dialog-card {
+    grid-template-columns: 60px minmax(0, 1fr);
+    row-gap: 10px;
+  }
+  .dm-row-meta-col {
+    grid-column: 2;
+    justify-self: end;
+  }
+}
+
 /* Значок «связь через кого» — ТОЛЬКО иконка (кликабельная); детали пути в попапе ниже */
 .dm-via {
   display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
@@ -3894,9 +3974,14 @@ html, body { overflow-x: hidden; }
 }
 
 .dm-message-actions-menu {
-  width: min(52vw, 240px);
+  width: min(72vw, 220px);
-  padding: 8px;
+  padding: 10px;
-  gap: 6px;
+  gap: 8px;
+  border-radius: 16px;
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  background: rgba(10, 12, 18, 0.96);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
 }
 
 .dm-floating-menu-layer {
@@ -3925,7 +4010,10 @@ html, body { overflow-x: hidden; }
 
 .dm-message-action-btn {
   width: 100%;
+  min-height: 42px;
   justify-content: flex-start;
+  padding: 0 14px;
+  border-radius: 12px;
 }
 
 .dm-message-action-btn--danger {