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

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>
-          <strong>${login}</strong>
-          <p class="meta-muted" style="margin-top:4px;">Пользователь сервера</p>
+        <div class="contact-search-result-main">
+          <strong class="dm-row-title">${login}</strong>
         </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');
-  searchButton.className = 'primary-btn dm-send-btn';
-  searchButton.type = 'button';
-  searchButton.textContent = 'Поиск';
-  searchButton.addEventListener('click', async () => {
+  const runSearch = 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;
 }