Дизайн Артёма

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

@@ -1,3 +1,6 @@
+import { iconHtml } from '../components/ui-icon.js';
+import { rememberChannelPosition, readChannelPosition, restoreChannelPosition } from '../services/channel-view-state.js';
+import { attachMessageMenu } from '../components/message-menu.js';
 import { createTopBar } from '../components/topbar.js';
 import {
   authService,
@@ -17,6 +20,7 @@ import {
   softHaptic,
 } from '../services/channels-ux.js';
 import { renderAvatar, renderUserAvatar } from '../components/avatar-image.js';
+import { openChannelEditor } from '../components/channel-editor.js';
 import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from '../components/arweave-attachment-manager.js';
 import {
   composeMessageWithAttachments,
@@ -35,7 +39,7 @@ import {
 } from '../services/shine-routes.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
-export const pageMeta = { id: 'channel-view', title: 'Канал', shellMode: { scrollbar: 'hidden' } };
+export const pageMeta = { id: 'channel-view', title: 'Канал', shellMode: { scrollbar: 'hidden', topFade: false, contentUnderTopbar: false, contentWidth: 'wide' } };
 const CHANNEL_TYPE_STORIES = 0;
 const CHANNEL_TYPE_PERSONAL = 100;
 const MSG_SUBTYPE_TEXT_RATING = 30;
@@ -88,7 +92,7 @@ function createMessageAvatar(login) {
   const avatarEl = renderUserAvatar({
     login: cleanLogin || 'unknown',
     size: 'sm',
-    className: 'channel-message-avatar',
+    className: 'channel-message-avatar avatar-plain',
     title,
   });
   if (!cleanLogin) return avatarEl;
@@ -103,7 +107,7 @@ function createMessageAvatar(login) {
         }
         : null,
       size: 'sm',
-      className: 'channel-message-avatar',
+      className: 'channel-message-avatar avatar-plain',
       title,
     });
     avatarEl.replaceWith(upgraded);
@@ -769,7 +773,7 @@ function bindSubmitOnPlainEnter(textarea, submit) {
   if (!(textarea instanceof HTMLTextAreaElement) || typeof submit !== 'function') return;
   textarea.addEventListener('keydown', (event) => {
     if (event.key !== 'Enter') return;
-    if (event.shiftKey || event.ctrlKey) return;
+    if (!(event.ctrlKey || event.metaKey) || event.isComposing) return;
     event.preventDefault();
     submit();
   });
@@ -880,101 +884,18 @@ function renderDraftAttachments(container, attachments) {
   });
 }
 
-function openReplyModal({ onSubmit, navigate, mode = 'reply', isActive = () => true }) {
+function openReplyModal({ onSubmit, mode = 'reply', isActive = () => true, context = null, draftKey = 'reply' }) {
   const isRating = mode === 'rating';
-  const title = isRating ? 'Оценка' : 'Ответ';
-  const placeholder = isRating ? 'Текст оценки' : 'Текст ответа';
-  const emptyError = isRating
-    ? 'Введите текст оценки или добавьте вложение.'
-    : 'Введите текст ответа или добавьте вложение.';
-  const submitError = isRating
-    ? 'Не удалось отправить оценку.'
-    : 'Не удалось отправить ответ.';
-  const root = document.getElementById('modal-root');
-  root.innerHTML = `
-    <div class="modal" id="reply-modal">
-      <div class="modal-card stack">
-        <h3 class="modal-title">${title}</h3>
-        <textarea id="reply-text" class="input" rows="5" maxlength="2000" placeholder="${placeholder}"></textarea>
-        <div class="draft-attachments" id="reply-attachments"></div>
-        <button class="secondary-btn attachment-trigger-btn" id="reply-attach" type="button" aria-label="Добавить вложение" title="Добавить вложение">▣ 📎</button>
-        <div class="meta-muted inline-error" id="reply-error"></div>
-        <div class="form-actions-grid">
-          <button class="secondary-btn" id="reply-cancel" type="button">Отмена</button>
-          <button class="primary-btn" id="reply-submit" type="button">Отправить</button>
-        </div>
-      </div>
-    </div>
-  `;
-
-  const textEl = root.querySelector('#reply-text');
-  const attachmentsEl = root.querySelector('#reply-attachments');
-  const errorEl = root.querySelector('#reply-error');
-  const submitEl = root.querySelector('#reply-submit');
-  const attachments = [];
-  let inFlight = false;
-
-  const setBusy = (busy) => {
-    inFlight = !!busy;
-    submitEl.disabled = inFlight;
-    if (textEl) textEl.disabled = inFlight;
-    root.querySelector('#reply-attach')?.toggleAttribute('disabled', inFlight);
-    submitEl.textContent = inFlight ? 'Отправляем...' : 'Отправить';
-  };
-
-  const close = () => {
-    root.innerHTML = '';
-  };
-
-  root.querySelector('#reply-cancel')?.addEventListener('click', close);
-  submitEl?.addEventListener('click', async () => {
-    if (inFlight) return;
-
-    const text = String(textEl?.value || '').trim();
-    if (!text && attachments.length === 0) {
-      errorEl.textContent = emptyError;
-      return;
-    }
-
-    setBusy(true);
-    errorEl.textContent = '';
-
-    try {
-      await onSubmit(composeMessageWithAttachments(text, attachments));
-      if (!isActive()) return;
-      attachments.forEach((attachment) => markArweaveAttachmentPlaced(state.session.login, attachment));
-      close();
-    } catch (error) {
-      if (!isActive()) return;
-      setBusy(false);
-      errorEl.textContent = toUserMessage(error, submitError);
-    }
+  return openChannelEditor({
+    id: 'reply-modal',
+    title: isRating ? 'Оценка' : 'Ответ',
+    submitLabel: isRating ? 'Отправить' : 'Ответить',
+    placeholder: isRating ? 'Напишите оценку' : 'Напишите ответ',
+    context,
+    key: `${draftKey}:${mode}`,
+    isActive,
+    onSubmit: ({ text }) => onSubmit(text),
   });
-
-  root.querySelector('#reply-attach')?.addEventListener('click', async () => {
-    try {
-      if (attachments.length >= MAX_MESSAGE_ATTACHMENTS) {
-        errorEl.textContent = `Можно прикрепить максимум ${MAX_MESSAGE_ATTACHMENTS} файлов.`;
-        return;
-      }
-      const item = await openArweaveAttachmentManager({
-        login: state.session.login,
-        storagePwd: state.session.storagePwdInMemory,
-        gateway: state.entrySettings.arweaveServer,
-        selectedTxIds: attachments.map((attachment) => attachment.ar),
-      });
-      if (!isActive() || !item) return;
-      attachments.push(item);
-      renderDraftAttachments(attachmentsEl, attachments);
-    } catch (error) {
-      if (!isActive()) return;
-      errorEl.textContent = toUserMessage(error, 'Не удалось добавить вложение.');
-    }
-  });
-
-  bindSubmitOnPlainEnter(textEl, () => submitEl?.click());
-
-  if (textEl) textEl.focus();
 }
 
 function openStatusActionCommentModal({ title, submitLabel, onSubmit, isActive = () => true }) {
@@ -1246,104 +1167,30 @@ function openRepostModal({ navigate, channels = [], onSubmit, isActive = () => t
 }
 
 function openAddMessageModal({ channelName, onSubmit, navigate, isActive = () => true }) {
-  const root = document.getElementById('modal-root');
-  root.innerHTML = `
-    <div class="modal" id="channel-message-modal">
-      <div class="modal-card stack">
-        <h3 class="modal-title">Новое сообщение в канале</h3>
-        <p class="meta-muted">${channelName}</p>
-        <textarea id="channel-message-text" class="input" rows="6" maxlength="2000" placeholder="Текст сообщения"></textarea>
-        <div class="draft-attachments" id="channel-message-attachments"></div>
-        <div class="channel-message-tools">
-          <select id="channel-message-type" class="input channel-message-type-select">
-            <option value="${10}">Пост</option>
-            <option value="${MSG_SUBTYPE_TEXT_ENTRYPOINT}">Оглавление канала</option>
-          </select>
-          <button class="secondary-btn attachment-trigger-btn" id="channel-message-attach" type="button" aria-label="Добавить вложение" title="Добавить вложение">▣ 📎</button>
-        </div>
-        <div class="meta-muted inline-error" id="channel-message-error"></div>
-        <div class="form-actions-grid">
-          <button class="secondary-btn" id="channel-message-cancel" type="button">Отмена</button>
-          <button class="primary-btn" id="channel-message-submit" type="button">Отправить</button>
-        </div>
-      </div>
-    </div>
+  const typeWrap = document.createElement('label');
+  typeWrap.className = 'channel-editor__type';
+  typeWrap.textContent = 'Тип сообщения';
+  const typeSelect = document.createElement('select');
+  typeSelect.className = 'select';
+  typeSelect.innerHTML = `
+    <option value="10">Публикация</option>
+    <option value="${MSG_SUBTYPE_TEXT_ENTRYPOINT}">Оглавление канала</option>
   `;
+  typeWrap.append(typeSelect);
 
-  const textEl = root.querySelector('#channel-message-text');
-  const typeEl = root.querySelector('#channel-message-type');
-  const attachmentsEl = root.querySelector('#channel-message-attachments');
-  const errorEl = root.querySelector('#channel-message-error');
-  const submitEl = root.querySelector('#channel-message-submit');
-  const attachments = [];
-  let inFlight = false;
-
-  const setBusy = (busy) => {
-    inFlight = !!busy;
-    submitEl.disabled = inFlight;
-    if (textEl) textEl.disabled = inFlight;
-    if (typeEl) typeEl.disabled = inFlight;
-    root.querySelector('#channel-message-attach')?.toggleAttribute('disabled', inFlight);
-    submitEl.textContent = inFlight ? 'Отправляем...' : 'Отправить';
-  };
-
-  const close = () => {
-    root.innerHTML = '';
-  };
-
-  root.querySelector('#channel-message-cancel')?.addEventListener('click', close);
-  submitEl?.addEventListener('click', async () => {
-    if (inFlight) return;
-
-    const body = String(textEl?.value || '').trim();
-    const msgSubType = Number(typeEl?.value || 10);
-    if (!body && attachments.length === 0) {
-      errorEl.textContent = 'Введите текст сообщения или добавьте вложение.';
-      return;
-    }
-
-    setBusy(true);
-    errorEl.textContent = '';
-
-    try {
-      await onSubmit({
-        text: composeMessageWithAttachments(body, attachments),
-        msgSubType,
-      });
-      if (!isActive()) return;
-      attachments.forEach((attachment) => markArweaveAttachmentPlaced(state.session.login, attachment));
-      close();
-    } catch (error) {
-      if (!isActive()) return;
-      setBusy(false);
-      errorEl.textContent = toUserMessage(error, 'Не удалось отправить сообщение.');
-    }
+  return openChannelEditor({
+    id: 'channel-message-modal',
+    title: 'Новое сообщение',
+    submitLabel: 'Опубликовать',
+    placeholder: 'Напишите сообщение',
+    key: `channel-post:${channelName}`,
+    extraControl: typeWrap,
+    isActive,
+    onSubmit: ({ text }) => onSubmit({
+      text,
+      msgSubType: Number(typeSelect.value || 10),
+    }),
   });
-
-  root.querySelector('#channel-message-attach')?.addEventListener('click', async () => {
-    try {
-      if (attachments.length >= MAX_MESSAGE_ATTACHMENTS) {
-        errorEl.textContent = `Можно прикрепить максимум ${MAX_MESSAGE_ATTACHMENTS} файлов.`;
-        return;
-      }
-      const item = await openArweaveAttachmentManager({
-        login: state.session.login,
-        storagePwd: state.session.storagePwdInMemory,
-        gateway: state.entrySettings.arweaveServer,
-        selectedTxIds: attachments.map((attachment) => attachment.ar),
-      });
-      if (!isActive() || !item) return;
-      attachments.push(item);
-      renderDraftAttachments(attachmentsEl, attachments);
-    } catch (error) {
-      if (!isActive()) return;
-      errorEl.textContent = toUserMessage(error, 'Не удалось добавить вложение.');
-    }
-  });
-
-  bindSubmitOnPlainEnter(textEl, () => submitEl?.click());
-
-  if (textEl) textEl.focus();
 }
 
 function openMessageHistoryModal({ versions = [], title = 'История изменений' }) {
@@ -1382,59 +1229,13 @@ function openMessageHistoryModal({ versions = [], title = 'История изм
   });
 }
 
-function openEditMessageModal({ initialText = '', allowEmptyText = false, onSave, onDelete, isActive = () => true }) {
-  const root = document.getElementById('modal-root');
-  root.innerHTML = `
-    <div class="modal" id="edit-message-modal">
-      <div class="modal-card stack">
-        <h3 class="modal-title">Редактировать сообщение</h3>
-        <textarea id="edit-message-text" class="input" rows="6" maxlength="2000"></textarea>
-        <div class="meta-muted inline-error" id="edit-message-error"></div>
-        <div class="form-actions-grid">
-          <button class="secondary-btn" id="edit-message-cancel" type="button">Отмена</button>
-          <button class="primary-btn" id="edit-message-save" type="button">ОК</button>
-        </div>
-        <button class="destructive-btn modal-danger-action" id="edit-message-delete" type="button">Удалить</button>
-      </div>
-    </div>
-  `;
-
-  const textEl = root.querySelector('#edit-message-text');
-  const errorEl = root.querySelector('#edit-message-error');
-  if (textEl) textEl.value = String(initialText || '');
-
-  const close = () => {
-    root.innerHTML = '';
-  };
-
-  root.querySelector('#edit-message-cancel')?.addEventListener('click', close);
-  root.querySelector('#edit-message-save')?.addEventListener('click', async () => {
-    const value = String(textEl?.value || '').trim();
-    if (!value && !allowEmptyText) {
-      errorEl.textContent = 'Введите текст сообщения.';
-      return;
-    }
-    try {
-      await onSave(value);
-      if (!isActive()) return;
-      close();
-    } catch (error) {
-      if (!isActive()) return;
-      errorEl.textContent = toUserMessage(error, 'Не удалось изменить сообщение.');
-    }
+function openEditMessageModal({ initialText = '', allowEmptyText = false, onSave, isActive = () => true, draftKey }) {
+  return openChannelEditor({
+    id: 'edit-message-modal', title: 'Редактирование', submitLabel: 'Сохранить',
+    placeholder: 'Текст сообщения', initialText, allowEmptyText,
+    key: draftKey, allowAttachments: false, rawText: true, isActive,
+    onSubmit: ({ text }) => onSave(text),
   });
-  root.querySelector('#edit-message-delete')?.addEventListener('click', async () => {
-    try {
-      await onDelete();
-      if (!isActive()) return;
-      close();
-    } catch (error) {
-      if (!isActive()) return;
-      errorEl.textContent = toUserMessage(error, 'Не удалось удалить сообщение.');
-    }
-  });
-  bindSubmitOnPlainEnter(textEl, () => root.querySelector('#edit-message-save')?.click());
-  if (textEl) textEl.focus();
 }
 
 function mapApiMessageToPost(message, selector, localNumber) {
@@ -1488,7 +1289,7 @@ function mapApiMessageToPost(message, selector, localNumber) {
     targetAuthorBlockchainName: String(message?.targetAuthorBlockchainName || '').trim(),
     targetCreatedAtMs: Number(message?.targetCreatedAtMs || 0),
     reactionState: messageRef ? getMessageReactionState(messageRef) : '',
-    isOwnMessage: String(message?.authorLogin || '').trim().toLowerCase() === String(state.session.login || '').trim().toLowerCase(),
+    isOwnMessage: Boolean(state.session.isAuthorized && state.session.login) && String(message?.authorLogin || '').trim().toLowerCase() === String(state.session.login).trim().toLowerCase(),
   };
 }
 
@@ -2034,6 +1835,7 @@ function renderPostCard(post, {
 
   const authorBlock = document.createElement('div');
   authorBlock.className = 'channel-message-author';
+  const menuItems = [];
   const headRow = document.createElement('div');
   headRow.className = 'channel-message-head-row';
 
@@ -2055,7 +1857,7 @@ function renderPostCard(post, {
   timestamp.className = 'channel-message-time';
   timestamp.textContent = post.timestampMs ? formatRelativeTime(post.timestampMs) : '—';
   if (versionsTotal > 1) {
-    const editedMarker = document.createElement('button');
+    const editedMarker = document.createElement('span');
     editedMarker.type = 'button';
     editedMarker.className = 'ui-button message-edited-marker';
     editedMarker.textContent = `изменено ${Math.max(1, versionsTotal - 1)}`;
@@ -2186,24 +1988,47 @@ function renderPostCard(post, {
   const isLiked = post.reactionState === 'liked';
   if (isLiked) likeButton.classList.add('is-liked');
   likeButton.innerHTML = `
-    <span class="channel-action-icon" aria-hidden="true">${isLiked ? '❤️' : '🤍'}</span>
+    <span class="channel-action-icon" aria-hidden="true">${iconHtml('heart', isLiked)}</span>
     <span class="channel-action-label">${isPending ? 'Лайк...' : 'Лайк'}</span>
-    <span class="channel-action-counter" title="Все / основные / сияющие">${post.likesCount || 0}/${post.primaryLikesCount || 0}/${post.shiningLikesCount || 0}</span>
+    <span class="channel-action-counter">${post.likesCount || 0}</span>
   `;
-  setActionTitle(likeButton, isPending ? 'Лайк...' : 'Лайк');
+  likeButton.setAttribute('aria-pressed', String(isLiked));
+  setActionTitle(likeButton, isPending ? 'Лайк…' : `${isLiked ? 'Убрать отметку «Нравится»' : 'Нравится'}, ${post.likesCount || 0}`);
   likeButton.disabled = isPending;
-  likeButton.addEventListener('click', (event) => {
+  likeButton.addEventListener('click', async (event) => {
     event.stopPropagation();
     animatePress(event.currentTarget);
     if (isPending) return;
-    openMessageLikePopup({ anchor: event.currentTarget, post, navigate, onToggleLike });
+    likeButton.disabled = true;
+    try {
+      await onToggleLike(post.messageRef, isLiked ? 'unlike' : 'like');
+    } catch (error) {
+      showToast(toUserMessage(error, 'Не удалось изменить лайк.'));
+    } finally {
+      if (likeButton.isConnected) likeButton.disabled = false;
+    }
+  });
+
+  const discussionButton = document.createElement('button');
+  discussionButton.type = 'button';
+  discussionButton.className = 'ui-button channel-action-item channel-action-discussion';
+  discussionButton.innerHTML = `
+    <span class="channel-action-icon" aria-hidden="true">${iconHtml('message')}</span>
+    <span class="channel-action-label">Обсуждение</span>
+    <span class="channel-action-counter">${post.repliesCount || 0}</span>
+  `;
+  setActionTitle(discussionButton, `Открыть обсуждение, ответов: ${post.repliesCount || 0}`);
+  discussionButton.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const route = buildThreadRoute(post.messageRef, selector);
+    if (route) navigate(route);
   });
 
   const replyButton = document.createElement('button');
   replyButton.type = 'button';
   replyButton.className = 'ui-button channel-action-item channel-action-reply';
   replyButton.innerHTML = `
-    <span class="channel-action-icon" aria-hidden="true">💬</span>
+    <span class="channel-action-icon" aria-hidden="true">${iconHtml('message')}</span>
     <span class="channel-action-label">Ответить</span>
     <span class="channel-action-counter">${post.repliesCount || 0}</span>
   `;
@@ -2212,21 +2037,26 @@ function renderPostCard(post, {
     event.stopPropagation();
     animatePress(event.currentTarget);
     openReplyModal({
-      navigate,
       onSubmit: async (text) => onReply(post.messageRef, text),
       isActive,
+      draftKey: `message:${refKey}`,
+      context: {
+        author: post.authorLogin,
+        text: parsedBody.text,
+        attachmentLabel: parsedBody.attachments[0]?.name || '',
+      },
     });
   });
   // 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, replyButton);
+  actions.append(likeButton, discussionButton);
 
   const shareButton = document.createElement('button');
   shareButton.type = 'button';
   shareButton.className = 'ui-button channel-action-item channel-action-share';
   shareButton.innerHTML = `
-    <span class="channel-action-icon" aria-hidden="true">↗</span>
+    <span class="channel-action-icon" aria-hidden="true">${iconHtml('share')}</span>
     <span class="channel-action-label">Отправить</span>
   `;
   setActionTitle(shareButton, 'Отправить');
@@ -2237,7 +2067,7 @@ function renderPostCard(post, {
     await onShare(route);
   });
 
-  actions.append(shareButton);
+  actions.append(shareButton, replyButton);
   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';
@@ -2259,7 +2089,7 @@ function renderPostCard(post, {
         messageBlockNumber: post.targetRef.blockNumber,
       }));
     });
-    actions.append(originalBtn);
+    menuItems.push({ label: 'Оригинал', action: () => originalBtn.click() });
   }
   const detailsButton = document.createElement('button');
   detailsButton.type = 'button';
@@ -2281,7 +2111,7 @@ function renderPostCard(post, {
       msgSubType: post.msgSubType,
     }), { isActive });
   });
-  actions.append(detailsButton);
+  menuItems.push({ label: 'Данные блокчейна', action: () => detailsButton.click() });
   if (post.isOwnMessage) {
     const editButton = document.createElement('button');
     editButton.type = 'button';
@@ -2295,19 +2125,24 @@ function renderPostCard(post, {
       event.stopPropagation();
       animatePress(event.currentTarget);
       openEditMessageModal({
+        isActive,
+        draftKey: `edit:${messageRefKey(post.messageRef)}`,
         initialText: String(post.body || '').trim() === 'удалено' ? '' : parsedBody.text,
         allowEmptyText: parsedBody.attachments.length > 0,
         onSave: async (nextText) => onEdit(post.messageRef, composeMessageWithAttachments(nextText, parsedBody.attachments), { isDelete: false }),
         onDelete: async () => onEdit(post.messageRef, '', { isDelete: true }),
       });
     });
-    actions.append(editButton);
+    menuItems.unshift({ label: 'Редактировать', action: () => editButton.click() });
+    menuItems.push({ label: 'Удалить', danger: true, action: async () => {
+      if (!window.confirm('Скрыть сообщение из ленты? Предыдущие версии останутся в блокчейне и истории изменений.')) return;
+      try { await onEdit(post.messageRef, '', { isDelete: true }); }
+      catch (error) { if (isActive()) showToast(toUserMessage(error, 'Не удалось удалить сообщение.')); }
+    } });
   }
+  if (versionsTotal > 1) menuItems.push({ label: 'История изменений', action: () => openMessageHistoryModal({ versions: post.versions }) });
+  attachMessageMenu(card, headRow, menuItems);
   card.append(actions);
-  card.addEventListener('click', () => {
-    const route = buildThreadRoute(post.messageRef, selector);
-    if (route) navigate(route);
-  });
   return card;
 }
 
@@ -2325,8 +2160,9 @@ function renderBody(screen, navigate, routeKey, channelData, handlers) {
   }
 
   const actionButton = document.createElement('button');
-  actionButton.className = 'destructive-btn channel-main-action';
-  actionButton.textContent = 'Подписаться на канал';
+  actionButton.type = 'button';
+  actionButton.className = 'primary-btn channel-main-action';
+  actionButton.textContent = state.session.isAuthorized ? 'Подписаться на канал' : 'Войти и подписаться';
 
   const addMessageButton = document.createElement('button');
   addMessageButton.type = 'button';
@@ -2416,16 +2252,22 @@ function renderBody(screen, navigate, routeKey, channelData, handlers) {
   if (channelData.isDiary) {
     screen.append(feed, backButton);
   } else if (channelData.isOwnChannel) {
-    screen.append(feed, addMessageButton);
+    screen.append(feed);
+    const composer = document.createElement('div');
+    composer.className = 'channel-composer';
+    composer.append(addMessageButton);
+    handlers.chrome?.setComposer(composer);
   } else if (!channelData.isSubscribed && !isStoriesChannel(channelData.channel)) {
-    screen.append(feed, actionButton);
+    screen.append(actionButton, feed);
   } else {
     screen.append(feed);
   }
 
   const hasPendingScrollTarget = pendingScrollByRoute.has(routeKey);
-  const pendingScrollTimer = applyPendingScroll(screen, routeKey, channelData.isOwnChannel || channelData.isDiary || unreadCount === 0);
-  const unreadScrollTimer = !hasPendingScrollTarget && unreadCount > 0 && !channelData.isOwnChannel && !channelData.isDiary
+  const restorePosition = handlers.restorePosition;
+  const pendingScrollTimer = Number.isFinite(restorePosition) && !hasPendingScrollTarget ? 0 : applyPendingScroll(screen, routeKey, channelData.isOwnChannel || channelData.isDiary || unreadCount === 0);
+  if (Number.isFinite(restorePosition) && !hasPendingScrollTarget) restoreChannelPosition(restorePosition);
+  const unreadScrollTimer = !Number.isFinite(restorePosition) && !hasPendingScrollTarget && unreadCount > 0 && !channelData.isOwnChannel && !channelData.isDiary
     ? window.setTimeout(() => scrollChannelToUnreadLine(screen, unreadCount, false), 40)
     : 0;
 
@@ -2500,6 +2342,7 @@ export function render({ navigate, route, chrome }) {
 
   const screen = document.createElement('section');
   screen.className = 'stack channels-screen channels-screen--channel';
+  const positionKey = `${state.session.login}:channel:${routeKey}`;
 
   let disposed = false;
   let refreshSeq = 0;
@@ -2526,11 +2369,12 @@ export function render({ navigate, route, chrome }) {
   };
 
   let activeChannelData = null;
+  let activeOpenEntrypointHistory = null;
 
   const channelHeaderButton = document.createElement('button');
   channelHeaderButton.type = 'button';
   channelHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
-  channelHeaderButton.textContent = 'Канал: ...';
+  channelHeaderButton.innerHTML = '<span class="channel-header-title">Канал</span><span class="channel-header-owner">Загрузка…</span>';
   channelHeaderButton.disabled = true;
 
   const header = createTopBar({
@@ -2538,7 +2382,6 @@ export function render({ navigate, route, chrome }) {
     back: { onClick: () => navigate('channels-list') },
     className: 'channel-view-topbar',
     actions: [
-      { label: 'Оглавление', className: 'channel-header-entrypoint-btn', onClick: () => {} },
       {
         label: '⋮',
         title: 'Действия канала',
@@ -2577,7 +2420,14 @@ export function render({ navigate, route, chrome }) {
                 },
               });
             }
-            items.push({ label: 'Описание канала', action: () => { if (aboutRoute) navigate(aboutRoute); } });
+            items.push({ label: 'О канале', action: () => { if (aboutRoute) navigate(aboutRoute); } });
+            items.push({
+              label: 'Оглавление',
+              action: () => {
+                if (activeOpenEntrypointHistory) activeOpenEntrypointHistory();
+                else showToast('В этом канале пока нет оглавления');
+              },
+            });
             if (!apiData?.isOwnChannel) {
               items.push({ label: 'Поддержать автора', action: () => { if (donateRoute) navigate(donateRoute); } });
             }
@@ -2595,6 +2445,8 @@ export function render({ navigate, route, chrome }) {
                 });
               }
             }
+            const aboutIndex = items.findIndex((item) => item.label === 'О канале');
+            if (aboutIndex > 0) items.unshift(...items.splice(aboutIndex, 2));
             return items;
           },
         },
@@ -2918,6 +2770,8 @@ export function render({ navigate, route, chrome }) {
   screen.append(statusBox);
 
   const clearContent = () => {
+    chrome?.setComposer(null);
+    screen.querySelectorAll('.channel-message-card').forEach((card) => card.cleanup?.());
     if (typeof cleanupSeenTracking === 'function') cleanupSeenTracking();
     cleanupSeenTracking = null;
     Array.from(screen.children).forEach((child) => {
@@ -2942,17 +2796,23 @@ export function render({ navigate, route, chrome }) {
       '#reply-modal',
       '#repost-modal',
     ].join(',');
-    if (modalRoot.querySelector(ownedSelector)) modalRoot.innerHTML = '';
+    if (modalRoot.querySelector(ownedSelector)) {
+      modalRoot.querySelectorAll('.channel-editor-overlay').forEach((editor) => editor.cleanup?.());
+      modalRoot.innerHTML = '';
+    }
   };
 
   refresh = async () => {
     if (disposed) return;
     const seq = ++refreshSeq;
-    clearContent();
+    const hadContent = !!screen.querySelector('.channel-feed');
+    const restorePosition = hadContent ? getChannelScrollRoot()?.scrollTop : readChannelPosition(positionKey);
+    if (!hadContent) clearContent();
     activeChannelData = null;
+    activeOpenEntrypointHistory = null;
     activeSelector = null;
     showStatus('');
-    channelHeaderButton.textContent = 'Канал: ...';
+    channelHeaderButton.innerHTML = '<span class="channel-header-title">Канал</span><span class="channel-header-owner">Загрузка…</span>';
     channelHeaderButton.disabled = true;
     channelHeaderButton.onclick = null;
     if (channelMoreButton) channelMoreButton.disabled = true;
@@ -2962,7 +2822,7 @@ export function render({ navigate, route, chrome }) {
       channelEntrypointButton.onclick = null;
     }
 
-    const skeleton = renderSkeleton(screen);
+    const skeleton = hadContent ? null : renderSkeleton(screen);
 
     try {
       const apiData = await loadFromApi(route, channelId);
@@ -2981,8 +2841,17 @@ export function render({ navigate, route, chrome }) {
           },
         });
       };
+      activeOpenEntrypointHistory = openEntrypointHistory;
       if (channelHeaderButton) {
-        channelHeaderButton.textContent = titleLabel;
+        const ownerLabel = String(apiData?.channel?.ownerName || '').trim();
+        channelHeaderButton.replaceChildren();
+        const titleNode = document.createElement('span');
+        titleNode.className = 'channel-header-title';
+        titleNode.textContent = titleLabel;
+        const ownerNode = document.createElement('span');
+        ownerNode.className = 'channel-header-owner';
+        ownerNode.textContent = ownerLabel ? `@${ownerLabel}` : 'О канале';
+        channelHeaderButton.append(titleNode, ownerNode);
         channelHeaderButton.disabled = false;
         channelHeaderButton.onclick = (event) => {
           animatePress(event.currentTarget);
@@ -3009,8 +2878,11 @@ export function render({ navigate, route, chrome }) {
           }
         };
       }
-      skeleton.remove();
+      skeleton?.remove();
+      clearContent();
       cleanupSeenTracking = renderBody(screen, navigate, routeKey, apiData, {
+        chrome,
+        restorePosition,
         showStatus,
         isActive: () => !disposed,
         onAddMessage: () => {
@@ -3094,7 +2966,8 @@ export function render({ navigate, route, chrome }) {
       });
     } catch (error) {
       if (disposed || seq !== refreshSeq) return;
-      skeleton.remove();
+      skeleton?.remove();
+      if (hadContent) { showStatus(toUserMessage(error, 'Не удалось обновить канал.')); return; }
       if (isChannelsDemoMode()) {
         renderDemoFallback(screen, navigate, error);
         return;
@@ -3108,6 +2981,7 @@ export function render({ navigate, route, chrome }) {
   screen.refresh = refresh;
   screen.cleanup = () => {
     if (disposed) return;
+    rememberChannelPosition(positionKey);
     disposed = true;
     refreshSeq += 1;
     clearContent();