Обновить UI и документы личных сообщений

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

@@ -9,9 +9,11 @@ import {
 } from '../state.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
+import { createDropdownMenu } from '../components/dropdown-menu.js';
 import { createShineConnectionsLogo } from '../components/shine-logo.js';
 import { loadProfileSnapshot } from '../services/user-profile-params.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
+import { formatRelativeTime } from '../services/channels-ux.js';
 
 export const pageMeta = { id: 'messages-list', title: 'Личные сообщения' };
 const PREVIEW_MAX_LEN = 200;
@@ -172,14 +174,7 @@ function latestLocalDialogMessage(peerLogin) {
 }
 
 function formatChatRowTime(ts) {
-  const value = Number(ts || 0);
-  if (!Number.isFinite(value) || value <= 0) return '';
-  return new Intl.DateTimeFormat('ru-RU', {
-    day: '2-digit',
-    month: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(new Date(value));
+  return formatRelativeTime(ts);
 }
 
 function compareChatRows(a, b) {
@@ -200,7 +195,7 @@ export function render({ navigate, chrome }) {
     <div class="dm-head-brand">
       <span class="dm-head-logo-wrap" aria-hidden="true"></span>
     </div>
-    <h1 class="dm-head-title">Чаты</h1>
+    <button type="button" class="dm-head-title dm-head-filter-title" id="dm-chat-filter-title">Чаты</button>
     <div class="dm-head-menu-wrap">
       <button type="button" class="dm-head-menu-btn" aria-label="Меню чатов" aria-haspopup="menu" aria-expanded="false"></button>
       <div class="dm-head-menu" role="menu" hidden>
@@ -220,6 +215,27 @@ export function render({ navigate, chrome }) {
   const menuButton = head.querySelector('.dm-head-menu-btn');
   menuButton?.append(createOverflowDots());
 
+  let currentChatFilter = 'all';
+  const filterTitle = head.querySelector('#dm-chat-filter-title');
+  const filterLabels = {
+    all: 'Чаты',
+    close_friend: 'Близкие друзья',
+    contact: 'Контакты',
+    none: 'Новые',
+  };
+  let reloadForFilter = () => {};
+  const chatFilterMenu = createDropdownMenu({
+    anchorEl: filterTitle,
+    align: 'left',
+    minWidth: 225,
+    items: [
+      { label: 'Все чаты', action: () => { currentChatFilter = 'all'; filterTitle.textContent = filterLabels.all; reloadForFilter(); } },
+      { label: 'Близкие друзья', action: () => { currentChatFilter = 'close_friend'; filterTitle.textContent = filterLabels.close_friend; reloadForFilter(); } },
+      { label: 'Контакты', action: () => { currentChatFilter = 'contact'; filterTitle.textContent = filterLabels.contact; reloadForFilter(); } },
+      { label: 'Новые', action: () => { currentChatFilter = 'none'; filterTitle.textContent = filterLabels.none; reloadForFilter(); } },
+    ],
+  });
+
   const menuWrap = head.querySelector('.dm-head-menu-wrap');
   const menuTemplate = head.querySelector('.dm-head-menu');
   // The header itself is mounted into chrome/topbar, whose hit-test area ends at the
@@ -395,12 +411,14 @@ function renderRow(item) {
         byPeer.set(key, newest);
       });
 
-      const rows = Array.from(byPeer.values()).sort((a, b) => {
-        const orderA = relationOrder(a.relationFlag);
-        const orderB = relationOrder(b.relationFlag);
-        if (orderA !== orderB) return orderA - orderB;
-        return compareChatRows(a, b);
-      });
+      const rows = Array.from(byPeer.values())
+        .filter((item) => currentChatFilter === 'all' || normalizeRelationFlag(item.relationFlag) === currentChatFilter)
+        .sort((a, b) => {
+          const orderA = relationOrder(a.relationFlag);
+          const orderB = relationOrder(b.relationFlag);
+          if (orderA !== orderB) return orderA - orderB;
+          return compareChatRows(a, b);
+        });
 
       if (!rows.length) {
         const empty = document.createElement('div');
@@ -458,12 +476,15 @@ function renderRow(item) {
     }
   }
 
+  reloadForFilter = () => { void loadList(); };
+
   chrome?.setTopbar(head);
   screen.append(list);
   loadList();
 
   screen.cleanup = () => {
     closeHeadMenu();
+    chatFilterMenu.destroy();
     document.removeEventListener('click', onOutsideClick);
     document.removeEventListener('keydown', onMenuKeydown);
     window.removeEventListener('resize', onMenuViewportChange);