UI v4: новый стиль по макету V3/V4 и доводка экранов

Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий
с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки.
Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа
со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги),
сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов –
переключатель; уведомления – список как в чатах; фото – просмотр на весь экран.
Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода,
второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов),
иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса.

Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -16,8 +16,8 @@ import {
   animatePress,
   createSkeletonCard,
   dayKey,
-  formatClockTime,
   formatDayLabel,
+  formatPostStamp,
   formatRelativeTime,
   longPressFeel,
   shareOrCopyLink,
@@ -644,7 +644,7 @@ function openChannelMetaDetailsModal({
     : 'Не установлен';
   const changedAtLabel = changedAtMs
     ? new Date(Number(changedAtMs)).toLocaleString('ru-RU')
-    : '—';
+    : '–';
   const root = document.getElementById('modal-root');
   root.innerHTML = `
     <div class="modal" id="about-channel-modal">
@@ -658,7 +658,7 @@ function openChannelMetaDetailsModal({
           <span>Дата</span><strong>${escapeHtml(changedAtLabel)}</strong>
           <span>Владелец</span><strong>${escapeHtml(channel.ownerName || 'автор')}</strong>
           <span>Системное имя</span><code>${escapeHtml(channel.name || 'channel')}</code>
-          <span>Название</span><strong>${escapeHtml(channel.displayTitle || channel.displayName || channel.name || '—')}</strong>
+          <span>Название</span><strong>${escapeHtml(channel.displayTitle || channel.displayName || channel.name || '–')}</strong>
           <span>Описание</span><span>${escapeHtml(channel.description || 'Описание не задано.')}</span>
           <span>Аватар</span><span>${escapeHtml(avatarState)}</span>
         </div>
@@ -840,7 +840,7 @@ function openBlockchainDetailsModal(details, { isActive = () => true } = {}) {
           <span>Номер записи</span><code>${escapeHtml(details.blockNumber)}</code>
           <span>Хэш</span><code>${escapeHtml(details.blockHash)}</code>
           <span>Тип</span><code>${escapeHtml(details.msgSubType)}</code>
-          <span>Время</span><code>${escapeHtml(details.createdAtMs ? new Date(Number(details.createdAtMs)).toLocaleString('ru-RU') : '—')}</code>
+          <span>Время</span><code>${escapeHtml(details.createdAtMs ? new Date(Number(details.createdAtMs)).toLocaleString('ru-RU') : '–')}</code>
           <span>Public key</span><code>${escapeHtml(details.publicKey)}</code>
           <span>Подпись</span><code>${escapeHtml(details.signature)}</code>
         </div>
@@ -1079,7 +1079,7 @@ function openEntrypointHistoryModal({ channelTitle = '', posts = [], onSelect })
         item.className = 'ui-button entrypoint-history-item';
         item.innerHTML = `
           <strong>${escapeHtml(post.timestampMs ? new Date(post.timestampMs).toLocaleString('ru-RU') : 'Без даты')}</strong>
-          <span>#${escapeHtml(post.localNumber || '—')}</span>
+          <span>#${escapeHtml(post.localNumber || '–')}</span>
           <p>${escapeHtml(String(parsed.text || '').trim() || 'Без текста')}</p>
         `;
         item.addEventListener('click', () => {
@@ -1171,7 +1171,7 @@ function openRepostModal({ navigate, channels = [], onSubmit, isActive = () => t
   if (textEl) textEl.focus();
 }
 
-function openAddMessageModal({ channelName, onSubmit, navigate, isActive = () => true }) {
+function openAddMessageModal({ channelName, channelTitle = '', onSubmit, navigate, isActive = () => true }) {
   const typeWrap = document.createElement('label');
   typeWrap.className = 'channel-editor__type';
   typeWrap.innerHTML = '<span class="sr-only">Тип сообщения</span>';
@@ -1188,7 +1188,8 @@ function openAddMessageModal({ channelName, onSubmit, navigate, isActive = () =>
     id: 'channel-message-modal',
     title: 'Новая запись',
     submitLabel: 'Опубликовать',
-    placeholder: 'Напишите сообщение',
+    placeholder: 'Чем хотите поделиться?',
+    destination: channelTitle ? `В канал «${channelTitle}»` : '',
     key: `channel-post:${channelName}`,
     extraControl: typeWrap,
     isActive,
@@ -1223,7 +1224,7 @@ function openMessageHistoryModal({ versions = [], title = 'История изм
       const text = String(item?.text || '').trim() || 'удалено';
       row.innerHTML = `
         <strong>Версия ${index + 1}</strong>
-        <div class="meta-muted">${ts > 0 ? formatRelativeTime(ts) : '—'}</div>
+        <div class="meta-muted">${ts > 0 ? formatRelativeTime(ts) : '–'}</div>
         <p class="channel-message-body">${text}</p>
       `;
       list.append(row);
@@ -1275,6 +1276,8 @@ function mapApiMessageToPost(message, selector, localNumber) {
     primaryLikesCount: Number(message?.primaryLikesCount || 0),
     shiningLikesCount: Number(message?.shiningLikesCount || 0),
     repliesCount: Number(message?.repliesCount || 0),
+    // Кто недавно ответил — для миниатюр у счётчика обсуждения. Сервер пока не отдаёт (см. docs/UI-Design).
+    recentRepliers: Array.isArray(message?.recentRepliers) ? message.recentRepliers.slice(0, 2) : [],
     ratingsCount: Number(message?.ratingsCount || 0),
     timestampMs: resolveMessageTimestampMs(message),
     messageRef,
@@ -1507,6 +1510,7 @@ async function loadFromApi(route, channelId) {
       avaSha256: String(payload.channel?.avaSha256 || '').trim(),
       avaSize: Number(payload.channel?.avaSize || 0),
       metaUpdatedAtMs: Number(payload.channel?.metaUpdatedAtMs || 0),
+      subscribersCount: Number(payload.channel?.subscribersCount || 0),
       ownerName: ownerLogin || 'неизвестно',
     },
     posts,
@@ -1862,7 +1866,7 @@ function renderPostCard(post, {
 
   const timestamp = document.createElement('div');
   timestamp.className = 'channel-message-time';
-  timestamp.textContent = post.timestampMs ? formatRelativeTime(post.timestampMs) : '—';
+  timestamp.textContent = post.timestampMs ? formatRelativeTime(post.timestampMs) : '–';
   if (post.timestampMs) timestamp.title = new Date(post.timestampMs).toLocaleString('ru-RU');
   if (versionsTotal > 1) {
     const editedMarker = document.createElement('span');
@@ -2034,6 +2038,12 @@ function renderPostCard(post, {
     <span class="channel-action-label">Обсуждение</span>
     <span class="channel-action-counter">${post.repliesCount || ''}</span>
   `;
+  if (post.recentRepliers.length) {
+    const faces = document.createElement('span');
+    faces.className = 'channel-action-faces';
+    post.recentRepliers.forEach((login) => faces.append(renderUserAvatar({ login, size: 'xs', className: 'channel-action-face' })));
+    discussionButton.append(faces);
+  }
   setActionTitle(discussionButton, `Открыть обсуждение, ответов: ${post.repliesCount || 0}`);
   discussionButton.addEventListener('click', (event) => {
     event.stopPropagation();
@@ -2067,8 +2077,6 @@ function renderPostCard(post, {
   // Rating/opinion action is intentionally hidden from UI for now.
   // Backend/subtype/counters remain supported so the feature can be restored later.
 
-  actions.append(likeButton, discussionButton);
-
   const shareButton = document.createElement('button');
   shareButton.type = 'button';
   shareButton.className = 'ui-button channel-action-item channel-action-share';
@@ -2084,8 +2092,9 @@ function renderPostCard(post, {
     await onShare(route);
   });
 
-  actions.append(shareButton);
-  menuItems.unshift({ label: 'Ответить', action: () => replyButton.click() });
+  // Порядок как в макете V4: лайк → поделиться → обсуждение; дата и «⋯» — справа
+  actions.append(likeButton, shareButton, discussionButton);
+  menuItems.unshift({ label: 'Ответить', iconHtml: iconHtml('reply'), action: () => replyButton.click() });
   if (post.msgSubType === MSG_SUBTYPE_TEXT_REPOST && post.targetRef?.blockchainName && Number.isFinite(post.targetRef?.blockNumber) && post.targetRef?.blockHash) {
     const originalBtn = document.createElement('button');
     originalBtn.type = 'button';
@@ -2127,7 +2136,7 @@ function renderPostCard(post, {
       msgSubType: post.msgSubType,
     }), { isActive });
   });
-  menuItems.push({ label: 'Данные блокчейна', action: () => detailsButton.click() });
+  menuItems.push({ label: 'Данные публикации', iconHtml: iconHtml('info'), action: () => detailsButton.click() });
   if (post.isOwnMessage) {
     const editButton = document.createElement('button');
     editButton.type = 'button';
@@ -2149,8 +2158,9 @@ function renderPostCard(post, {
         onDelete: async () => onEdit(post.messageRef, '', { isDelete: true }),
       });
     });
-    menuItems.unshift({ label: 'Редактировать', action: () => editButton.click() });
-    menuItems.push({ label: 'Удалить', danger: true, action: async () => {
+    menuItems.unshift({ label: 'Редактировать', iconHtml: iconHtml('edit'), action: () => editButton.click() });
+    menuItems.push({ divider: true });
+    menuItems.push({ label: 'Удалить', danger: true, iconHtml: iconHtml('trash'), action: async () => {
       if (!await confirmDialog({
         title: 'Удалить сообщение?',
         text: 'Сообщение скроется из ленты. Предыдущие версии останутся в блокчейне и в истории изменений.',
@@ -2164,7 +2174,7 @@ function renderPostCard(post, {
   if (versionsTotal > 1) menuItems.push({ label: 'История изменений', action: () => openMessageHistoryModal({ versions: post.versions }) });
   attachMessageMenu(card, headRow, menuItems);
   if (isOwnerPost) {
-    if (post.timestampMs) timestamp.textContent = formatClockTime(post.timestampMs);
+    if (post.timestampMs) timestamp.textContent = formatPostStamp(post.timestampMs);
     const meta = document.createElement('div');
     meta.className = 'channel-message-meta';
     const moreButton = headRow.querySelector('.channel-message-more');
@@ -2193,13 +2203,12 @@ function renderBody(screen, navigate, routeKey, channelData, handlers) {
   const actionButton = document.createElement('button');
   actionButton.type = 'button';
   actionButton.className = 'primary-btn channel-main-action';
-  actionButton.textContent = state.session.isAuthorized ? 'Подписаться на канал' : 'Войти и подписаться';
+  actionButton.innerHTML = `${iconHtml('bell')}<span>${state.session.isAuthorized ? 'Подписаться' : 'Войти и подписаться'}</span>`;
 
   const addMessageButton = document.createElement('button');
   addMessageButton.type = 'button';
-  addMessageButton.className = 'channel-compose-bar';
-  addMessageButton.setAttribute('aria-label', 'Написать в канал');
-  addMessageButton.innerHTML = `<span class="channel-compose-bar__text">Написать в канал…</span><span class="channel-compose-bar__icon" aria-hidden="true">${iconHtml('plus')}</span>`;
+  addMessageButton.className = 'channel-new-post';
+  addMessageButton.innerHTML = `${iconHtml('compose')}<span>Новая запись</span>`;
   addMessageButton.addEventListener('click', (event) => {
     animatePress(event.currentTarget);
     handlers.onAddMessage();
@@ -2236,7 +2245,8 @@ function renderBody(screen, navigate, routeKey, channelData, handlers) {
       const itemDayKey = dayKey(item.timestampMs);
       const startsNewDay = !!itemDayKey && itemDayKey !== lastDayKey;
       if (startsNewDay) lastDayKey = itemDayKey;
-      if (startsNewDay && item.type !== 'meta') {
+      // В ленте канала дата стоит у каждой записи; плашки дней остаются только в дневнике
+      if (startsNewDay && item.type !== 'meta' && channelData.isDiary) {
         const separator = document.createElement('div');
         separator.className = 'channel-day-separator';
         separator.innerHTML = `<span>${escapeHtml(formatDayLabel(item.timestampMs))}</span>`;
@@ -2300,7 +2310,11 @@ function renderBody(screen, navigate, routeKey, channelData, handlers) {
     composer.append(addMessageButton);
     handlers.chrome?.setComposer(composer);
   } else if (!channelData.isSubscribed && !isStoriesChannel(channelData.channel)) {
-    screen.append(actionButton, feed);
+    screen.append(feed);
+    const composer = document.createElement('div');
+    composer.className = 'channel-composer';
+    composer.append(actionButton);
+    handlers.chrome?.setComposer(composer);
   } else {
     screen.append(feed);
   }
@@ -2412,17 +2426,18 @@ export function render({ navigate, route, chrome }) {
 
   let activeChannelData = null;
   let activeOpenEntrypointHistory = null;
+  let activeAddMessage = null;
 
   const channelHeaderButton = document.createElement('button');
   channelHeaderButton.type = 'button';
-  channelHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
-  channelHeaderButton.innerHTML = '<span class="channel-header-title">Канал</span><span class="channel-header-owner">Загрузка…</span>';
+  channelHeaderButton.className = 'topbar-identity channel-header-route-btn';
+  channelHeaderButton.innerHTML = '<span class="topbar-identity__text"><span class="topbar-identity__title">Канал</span><span class="topbar-identity__sub">Загрузка…</span></span>';
   channelHeaderButton.disabled = true;
 
   const header = createTopBar({
     center: channelHeaderButton,
     back: { onClick: () => navigate('channels-list') },
-    className: 'channel-view-topbar',
+    className: 'channel-view-topbar topbar--identity',
     actions: [
       {
         label: '⋮',
@@ -2442,16 +2457,20 @@ export function render({ navigate, route, chrome }) {
             const aboutRoute = makeShineChannelAboutRoute(routeArgs);
             const donateRoute = makeShineChannelDonateRoute(routeArgs);
             const items = [];
-            items.push({ label: 'О канале', action: () => { if (aboutRoute) navigate(aboutRoute); } });
+            items.push({ label: 'О канале', iconHtml: iconHtml('info'), action: () => { if (aboutRoute) navigate(aboutRoute); } });
+            if (apiData?.isOwnChannel && !apiData?.isDiary) {
+              items.push({ label: 'Новая запись', iconHtml: iconHtml('compose'), action: () => activeAddMessage?.() });
+            }
             items.push({
               label: 'Оглавление',
+              iconHtml: iconHtml('list'),
               action: () => {
                 if (activeOpenEntrypointHistory) activeOpenEntrypointHistory();
                 else showToast('В этом канале пока нет оглавления');
               },
             });
             if (!apiData?.isOwnChannel) {
-              items.push({ label: 'Поддержать автора', action: () => { if (donateRoute) navigate(donateRoute); } });
+              items.push({ label: 'Поддержать автора', iconHtml: iconHtml('gift'), action: () => { if (donateRoute) navigate(donateRoute); } });
             }
             if (!apiData?.isOwnChannel && !isStoriesChannel(apiData?.channel)) {
               if (apiData?.isSubscribed) {
@@ -2868,15 +2887,21 @@ export function render({ navigate, route, chrome }) {
       };
       activeOpenEntrypointHistory = openEntrypointHistory;
       if (channelHeaderButton) {
-        const ownerLabel = String(apiData?.channel?.ownerName || '').trim();
+        // Короткий адрес канала и число подписчиков; владелец и полный путь — в «О канале»
+        const slug = String(apiData?.channel?.name || '').trim();
+        const subs = Number(apiData?.channel?.subscribersCount || 0);
         channelHeaderButton.replaceChildren();
+        const text = document.createElement('span');
+        text.className = 'topbar-identity__text';
         const titleNode = document.createElement('span');
-        titleNode.className = 'channel-header-title';
+        titleNode.className = 'topbar-identity__title';
         titleNode.textContent = titleLabel;
-        const ownerNode = document.createElement('span');
-        ownerNode.className = 'channel-header-owner';
-        ownerNode.textContent = ownerLabel ? `@${ownerLabel}` : 'О канале';
-        channelHeaderButton.append(titleNode, ownerNode);
+        const subNode = document.createElement('span');
+        subNode.className = 'topbar-identity__sub';
+        subNode.textContent = apiData?.isDiary ? 'Только вам' : [slug ? `@${slug}` : '', subs ? String(subs) : ''].filter(Boolean).join(' · ');
+        text.append(titleNode, subNode);
+        channelHeaderButton.append(createChannelAvatarElement(apiData?.channel, 40), text);
+        channelHeaderButton.setAttribute('aria-label', `${titleLabel}. О канале`);
         channelHeaderButton.disabled = false;
         channelHeaderButton.onclick = (event) => {
           animatePress(event.currentTarget);
@@ -2910,9 +2935,10 @@ export function render({ navigate, route, chrome }) {
         restorePosition,
         showStatus,
         isActive: () => !disposed,
-        onAddMessage: () => {
+        onAddMessage: activeAddMessage = () => {
           openAddMessageModal({
             channelName: apiData?.channel?.name || '',
+            channelTitle: apiData?.channel?.displayTitle || '',
             navigate,
             isActive: () => !disposed,
             onSubmit: async ({ text: bodyText, msgSubType }) => {