Зафиксировали текущие изменения UI и документации

2026-08-28 12:55:28 +04:00
parent f6b95d94bc
commit ef1fd9f579
12 changed files with 522 additions and 54 deletions
@@ -200,14 +200,17 @@ let orientationLockInFlight = false;
 let currentChromeCleanup = null;
 const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1';
 const SCROLL_TO_BOTTOM_PAGE_IDS = new Set([
-  'messages-list',
  'chat-view',
-  'channels-list',
  'channel-view',
  'channel-thread-view',
  'notifications-view',
 ]);

+const FILLED_ACTION_BUTTON_PAGE_IDS = new Set([
+  ...PRE_AUTH_PAGES.filter((pageId) => pageId !== 'entry-settings-view'),
+  'settings-view',
+]);
+
 const GUEST_ALLOWED_PAGES = new Set([
  'start-view',
  'entry-settings-view',
@@ -1204,6 +1207,7 @@ function renderApp() {

    screenEl.classList.toggle('no-app-chrome', !showAppChrome);
    screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId));
+    screenEl.classList.toggle('filled-action-buttons', FILLED_ACTION_BUTTON_PAGE_IDS.has(pageId));

    toolbarEl.innerHTML = '';
    if (showAppChrome) {
@@ -31,6 +31,19 @@ const CHANNELS_VIEW_ALL = 'all';
 const CHANNELS_VIEW_OWNED = 'owned';
 const CHANNELS_VIEW_FOLLOWING = 'following';

+function channelMenuIcon(name) {
+  const paths = {
+    search: '<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4"/>',
+    add: '<path d="M12 5v14M5 12h14"/>',
+    all: '<rect x="4" y="4" width="6" height="6" rx="1"/><rect x="14" y="4" width="6" height="6" rx="1"/><rect x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/>',
+    mine: '<circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/>',
+    following: '<path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10Z"/>',
+    subscribe: '<path d="M12 3a6 6 0 0 0-6 6c0 7-3 7-3 9h18c0-2-3-2-3-9a6 6 0 0 0-6-6Z"/><path d="M10 21h4"/>',
+    notifications: '<path d="M12 3a6 6 0 0 0-6 6c0 7-3 7-3 9h18c0-2-3-2-3-9a6 6 0 0 0-6-6Z"/><path d="M10 21h4"/>',
+  };
+  return `<svg class="channel-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ''}</svg>`;
+}
+
 function cleanChannelMessagePreview(text) {
  const parsed = parseMessageAttachments(text);
  const dmParsed = parseDmTechBlocks(String(parsed.text || ''));
@@ -977,12 +990,12 @@ function openTopChannelsMenu({
  menu.style.width = `${Math.round(menuWidth)}px`;

  const items = [
-    { label: 'Поиск', action: () => onFindChannel?.() },
-    { label: 'Новый канал', action: () => navigate('add-channel-view') },
+    { label: 'Найти канал', icon: 'search', action: () => onFindChannel?.() },
+    { label: 'Новый канал', icon: 'add', action: () => navigate('add-channel-view') },
    { divider: true },
-    { label: 'Все каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_ALL)) },
-    { label: 'Мои каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_OWNED)) },
-    { label: 'Подписки', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_FOLLOWING)) },
+    { label: 'Все каналы', icon: 'all', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_ALL)) },
+    { label: 'Мои каналы', icon: 'mine', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_OWNED)) },
+    { label: 'Подписки', icon: 'following', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_FOLLOWING)) },
  ];

  items.forEach((item) => {
@@ -998,7 +1011,7 @@ function openTopChannelsMenu({
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'channel-menu-item';
-    btn.textContent = item.label;
+    btn.innerHTML = `${channelMenuIcon(item.icon)}<span>${item.label}</span>`;
    btn.addEventListener('click', () => {
      closeTopChannelsMenu(listState);
      item.action?.();
@@ -1054,8 +1067,11 @@ function openChannelMenu({ listState, channel, anchorEl, refreshFeed, rerenderLi
  actionBtn.type = 'button';
  actionBtn.className = `channel-menu-item ${channel.isSubscribed ? 'destructive' : ''}`.trim();

+  const actionLabel = document.createElement('span');
+  actionBtn.append(document.createRange().createContextualFragment(channelMenuIcon('subscribe')), actionLabel);
+
  if (canToggleSubscription) {
-    actionBtn.textContent = channel.pending
+    actionLabel.textContent = channel.pending
      ? 'Выполняется...'
      : channel.isSubscribed
        ? 'Отписаться'
@@ -1075,7 +1091,7 @@ function openChannelMenu({ listState, channel, anchorEl, refreshFeed, rerenderLi

      channel.pending = true;
      actionBtn.disabled = true;
-      actionBtn.textContent = 'Выполняется...';
+      actionLabel.textContent = 'Выполняется...';

      const nextSubscribed = !channel.isSubscribed;
      try {
@@ -1097,13 +1113,13 @@ function openChannelMenu({ listState, channel, anchorEl, refreshFeed, rerenderLi
      } catch (error) {
        channel.pending = false;
        actionBtn.disabled = false;
-        actionBtn.textContent = channel.isSubscribed ? 'Отписаться' : 'Подписаться';
+        actionLabel.textContent = channel.isSubscribed ? 'Отписаться' : 'Подписаться';
        showToast(toUserMessage(error, 'Не удалось изменить подписку.'), { kind: 'error' });
        rerenderList();
      }
    });
  } else {
-    actionBtn.textContent = 'Собственный канал';
+    actionLabel.textContent = 'Собственный канал';
    actionBtn.disabled = true;
  }

@@ -1111,7 +1127,8 @@ function openChannelMenu({ listState, channel, anchorEl, refreshFeed, rerenderLi
  toggleWrap.className = 'channel-menu-toggle';

  const toggleLabel = document.createElement('span');
-  toggleLabel.textContent = 'Уведомления';
+  toggleLabel.className = 'channel-menu-toggle-label';
+  toggleLabel.innerHTML = `${channelMenuIcon('notifications')}<span>Уведомления</span>`;

  const toggleBtn = document.createElement('button');
  toggleBtn.type = 'button';
@@ -1,7 +1,6 @@
 import { renderHeader } from '../components/header.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
-import { createShineConnectionsLogo } from '../components/shine-logo.js';
 import { directMessages } from '../mock-data.js';
 import {
  addAppLogEntry,
@@ -36,6 +35,72 @@ import { makeProfileLinksRoute, makeProfileRoute } from '../services/shine-route
 export const pageMeta = { id: 'chat-view', title: 'Чат' };
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';

+function menuIconSvg(name) {
+  const paths = {
+    reply: '<path d="M9 7 4 12l5 5"/><path d="M5 12h8a6 6 0 0 1 6 6"/>',
+    copy: '<rect x="8" y="8" width="10" height="10" rx="2"/><path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/>',
+    read: '<path d="M5 9v6h4l5 4V5L9 9H5Z"/><path d="M17 9a4 4 0 0 1 0 6"/>',
+    edit: '<path d="m4 20 4.4-1 9.9-9.9a2.1 2.1 0 0 0-3-3L5.4 16 4 20Z"/><path d="m13.8 7.2 3 3"/>',
+    delete: '<path d="M4 7h16"/><path d="M9 7V4h6v3"/><path d="m7 7 1 13h8l1-13"/>',
+    call: '<path d="M7.6 10.8a15 15 0 0 0 5.6 5.6l1.9-1.9a1 1 0 0 1 1-.2c1.1.4 2.3.6 3.5.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.6 21 3 13.4 3 4a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c0 1.2.2 2.4.6 3.5a1 1 0 0 1-.3 1l-1.1 1.3Z"/>',
+    video: '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/>',
+    clear: '<path d="M4 7h16"/><path d="M9 7V4h6v3"/><path d="m7 7 1 13h8l1-13"/>',
+  };
+  return `<svg class="dm-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ''}</svg>`;
+}
+
+function openUserIdentityMenu({ anchorEl, login, navigate }) {
+  const root = document.getElementById('modal-root');
+  if (!root || !anchorEl) return;
+  const cleanLogin = String(login || '').trim();
+  root.innerHTML = `
+    <div class="dm-floating-menu-layer dm-user-menu-layer" id="chat-user-menu-layer">
+      <div class="dm-head-menu dm-head-menu--portal dm-user-identity-menu" role="menu">
+        <button type="button" class="dm-head-menu-item" role="menuitem" data-user-action="connections">
+          <img class="dm-menu-image-icon" src="/assets/SHiNE_connections_blue.svg" alt="" aria-hidden="true" />
+          <span>Связи</span>
+        </button>
+        <button type="button" class="dm-head-menu-item" role="menuitem" data-user-action="profile">
+          <img class="dm-menu-image-icon" src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
+          <span>Профиль</span>
+        </button>
+      </div>
+    </div>
+  `;
+
+  const layer = root.querySelector('#chat-user-menu-layer');
+  const menu = root.querySelector('.dm-user-identity-menu');
+  const close = () => {
+    document.removeEventListener('keydown', onKeydown);
+    root.innerHTML = '';
+  };
+  const onKeydown = (event) => {
+    if (event.key === 'Escape') close();
+  };
+  const rect = anchorEl.getBoundingClientRect();
+
+  window.requestAnimationFrame(() => {
+    if (!menu) return;
+    const width = menu.offsetWidth || 190;
+    const left = Math.max(10, Math.min(window.innerWidth - width - 10, rect.left));
+    menu.style.left = `${Math.round(left)}px`;
+    menu.style.top = `${Math.round(rect.bottom + 7)}px`;
+  });
+
+  layer?.addEventListener('pointerdown', (event) => {
+    if (event.target === layer) close();
+  });
+  document.addEventListener('keydown', onKeydown);
+  root.querySelector('[data-user-action="connections"]')?.addEventListener('click', () => {
+    close();
+    navigate(makeProfileLinksRoute(cleanLogin));
+  });
+  root.querySelector('[data-user-action="profile"]')?.addEventListener('click', () => {
+    close();
+    navigate(makeProfileRoute(cleanLogin));
+  });
+}
+
 function createChatHeaderParts(login, navigate) {
  const cleanLogin = String(login || '').trim() || 'unknown';

@@ -52,12 +117,13 @@ function createChatHeaderParts(login, navigate) {
  const avatarButton = document.createElement('button');
  avatarButton.type = 'button';
  avatarButton.className = 'chat-header-avatar-btn';
-  avatarButton.title = `Профиль ${cleanLogin}`;
-  avatarButton.setAttribute('aria-label', `Открыть профиль ${cleanLogin}`);
+  avatarButton.title = `Меню ${cleanLogin}`;
+  avatarButton.setAttribute('aria-label', `Открыть меню пользователя ${cleanLogin}`);
  avatarButton.append(avatarSlot);

-  const loginEl = document.createElement('span');
-  loginEl.className = 'chat-header-login';
+  const loginEl = document.createElement('button');
+  loginEl.type = 'button';
+  loginEl.className = 'chat-header-login chat-header-login-btn';
  loginEl.setAttribute('role', 'heading');
  loginEl.setAttribute('aria-level', '1');
  loginEl.setAttribute('aria-label', `Чат с ${cleanLogin}`);
@@ -84,23 +150,14 @@ function createChatHeaderParts(login, navigate) {
    })
    .catch(() => {});

-  const connectionsButton = document.createElement('button');
-  connectionsButton.type = 'button';
-  connectionsButton.className = 'icon-btn chat-header-icon-btn chat-header-connections-btn';
-  connectionsButton.title = `Связи ${cleanLogin}`;
-  connectionsButton.setAttribute('aria-label', `Открыть связи ${cleanLogin}`);
-  connectionsButton.append(createShineConnectionsLogo({ className: 'chat-header-connections-logo' }));
-  connectionsButton.addEventListener('click', () => {
+  const openMenu = (event) => {
    if (!cleanLogin || cleanLogin === 'unknown') return;
-    navigate(makeProfileLinksRoute(cleanLogin));
-  });
+    openUserIdentityMenu({ anchorEl: event.currentTarget, login: cleanLogin, navigate });
+  };
+  avatarButton.addEventListener('click', openMenu);
+  loginEl.addEventListener('click', openMenu);

-  avatarButton.addEventListener('click', () => {
-    if (!cleanLogin || cleanLogin === 'unknown') return;
-    navigate(makeProfileRoute(cleanLogin));
-  });
-
-  return { centerNode: loginEl, avatarButton, connectionsButton };
+  return { centerNode: loginEl, avatarButton };
 }

 function truncatePreviewText(value, maxLen = 72) {
@@ -232,11 +289,11 @@ function openMessageActionsMenu({
  root.innerHTML = `
    <div class="dm-floating-menu-layer" id="chat-message-actions-layer">
      <div class="modal-card stack dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
-        ${canReply ? '<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-reply">Ответить</button>' : ''}
-        <button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-copy">Скопировать как текст</button>
-        ${showReadAloud ? '<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>' : ''}
-        ${canDelete ? '<button class="secondary-btn dm-message-action-btn dm-message-action-btn--danger" type="button" id="msg-action-delete">Удалить</button>' : ''}
+        ${canReply ? `<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-reply">${menuIconSvg('reply')}<span>Ответить</span></button>` : ''}
+        <button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-copy">${menuIconSvg('copy')}<span>Скопировать как текст</span></button>
+        ${showReadAloud ? `<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-read">${menuIconSvg('read')}<span>Прочесть</span></button>` : ''}
+        ${canEdit ? `<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-edit">${menuIconSvg('edit')}<span>Изменить</span></button>` : ''}
+        ${canDelete ? `<button class="secondary-btn dm-message-action-btn dm-message-action-btn--danger" type="button" id="msg-action-delete">${menuIconSvg('delete')}<span>Удалить</span></button>` : ''}
        ${String(infoText || '').trim() ? `<div class="meta-muted">${String(infoText || '').trim()}</div>` : ''}
      </div>
    </div>
@@ -328,10 +385,10 @@ function openChatActionsMenu({
  root.innerHTML = `
    <div class="dm-floating-menu-layer" id="chat-header-actions-layer">
      <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="chat-menu-call">Звонок</button>
-        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-video-call">Видеозвонок</button>
-        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-clear-history">Очистить историю</button>
-        <button class="secondary-btn dm-message-action-btn dm-message-action-btn--danger" type="button" id="chat-menu-delete-chat">Удалить чат</button>
+        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-call">${menuIconSvg('call')}<span>Звонок</span></button>
+        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-video-call">${menuIconSvg('video')}<span>Видеозвонок</span></button>
+        <button class="secondary-btn dm-message-action-btn" type="button" id="chat-menu-clear-history">${menuIconSvg('clear')}<span>Очистить историю</span></button>
+        <button class="secondary-btn dm-message-action-btn dm-message-action-btn--danger" type="button" id="chat-menu-delete-chat">${menuIconSvg('delete')}<span>Удалить чат</span></button>
      </div>
    </div>
  `;
@@ -1083,7 +1140,7 @@ export function render({ navigate, route, chrome }) {
      ],
    });
  const chatHeaderLeft = chatHeader.querySelector('.header-left');
-  chatHeaderLeft?.append(chatHeaderParts.connectionsButton, chatHeaderParts.avatarButton);
+  chatHeaderLeft?.append(chatHeaderParts.avatarButton);
  chrome?.setTopbar(chatHeader);

  if (!isKnownContact) {
@@ -1,5 +1,6 @@
 import {
  authService,
+  getChatMessages,
  isSessionInvalidError,
  normalizeDmChatId,
  setContacts,
@@ -106,6 +107,8 @@ function clipPreviewText(text, maxLen = PREVIEW_MAX_LEN) {
 }

 async function resolveDialogPreview(dialog) {
+  const localText = clipPreviewText(String(dialog?.lastMessageText || '').trim());
+  if (localText) return localText;
  const blobB64 = String(dialog?.lastMessageBlobB64 || '').trim();
  if (!blobB64) return 'Диалог пока пуст.';

@@ -145,6 +148,29 @@ async function resolveDialogPreview(dialog) {
  return pending;
 }

+function resolveLocalMessageTimeMs(message) {
+  const keys = [message?.baseKey, message?.messageKey];
+  for (const key of keys) {
+    const parts = String(key || '').split('|');
+    const timeMs = Number(parts[2] || 0);
+    if (parts.length >= 4 && Number.isFinite(timeMs) && timeMs > 0) return timeMs;
+  }
+  const tempParts = String(message?.tempId || '').split('-');
+  const tempTimeMs = Number(tempParts[1] || 0);
+  if (tempParts[0] === 'tmp' && Number.isFinite(tempTimeMs) && tempTimeMs > 0) return tempTimeMs;
+  const createdAtMs = Number(message?.createdAtMs || message?.ts || 0);
+  return Number.isFinite(createdAtMs) && createdAtMs > 0 ? createdAtMs : 0;
+}
+
+function latestLocalDialogMessage(peerLogin) {
+  const messages = getChatMessages(peerLogin);
+  const latest = [...messages].sort((a, b) => resolveLocalMessageTimeMs(b) - resolveLocalMessageTimeMs(a))[0];
+  if (!latest) return null;
+  const parsed = parseDmTechBlocks(String(latest?.text || ''));
+  const text = clipPreviewText(String(parsed.displayText || parsed.visibleText || '').trim()) || 'Сообщение';
+  return { text, timeMs: resolveLocalMessageTimeMs(latest) };
+}
+
 function formatChatRowTime(ts) {
  const value = Number(ts || 0);
  if (!Number.isFinite(value) || value <= 0) return '';
@@ -350,16 +376,23 @@ function renderRow(item) {
          unreadCount: Number(dialog?.unreadCount || 0),
          hasDialog: Boolean(dialog?.hasDialog),
        };
+        const localLatest = latestLocalDialogMessage(peerLogin);
+        if (localLatest && localLatest.timeMs >= next.lastMessageTimeMs) {
+          next.lastMessageText = localLatest.text;
+          next.lastMessageTimeMs = localLatest.timeMs;
+        }
        const current = byPeer.get(key);
        if (!current) {
          byPeer.set(key, next);
          return;
        }
-        const currentRank = relationOrder(current.relationFlag);
-        const nextRank = relationOrder(relationFlag);
-        if (nextRank < currentRank || (nextRank === currentRank && next.lastMessageTimeMs > current.lastMessageTimeMs)) {
-          byPeer.set(key, next);
-        }
+        const newest = next.lastMessageTimeMs > current.lastMessageTimeMs ? next : current;
+        newest.relationFlag = relationOrder(relationFlag) < relationOrder(current.relationFlag)
+          ? relationFlag
+          : current.relationFlag;
+        newest.unreadCount = Math.max(Number(current.unreadCount || 0), Number(next.unreadCount || 0));
+        newest.hasDialog = Boolean(current.hasDialog || next.hasDialog);
+        byPeer.set(key, newest);
      });

      const rows = Array.from(byPeer.values()).sort((a, b) => {