feat: finalize channels fixes and runtime stability

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

@@ -1,11 +1,169 @@
 import { renderHeader } from '../components/header.js';
 import { channelPosts, channels } from '../mock-data.js';
-import { addLocalChannelPost, authService, getLocalChannelPosts, state } from '../state.js';
+import {
+  addLocalChannelPost,
+  authService,
+  getLocalChannelPosts,
+  getMessageReactionState,
+  setMessageReactionState,
+  state,
+} from '../state.js';
+import { toUserMessage } from '../services/ui-error-texts.js';
 
 export const pageMeta = { id: 'channel-view', title: 'Канал' };
 
+const ZERO64 = '0'.repeat(64);
+const pendingReactionActions = new Set();
+
+function isChannelsDemoMode() {
+  try {
+    const qs = new URLSearchParams(window.location.search);
+    if (qs.get('channelsDemo') === '1') return true;
+    return localStorage.getItem('shine-channels-demo') === '1';
+  } catch {
+    return false;
+  }
+}
+
+function encodeRoutePart(value = '') {
+  return encodeURIComponent(String(value));
+}
+
+function normalizeRouteHash(hash) {
+  const normalized = String(hash || '').trim().toLowerCase();
+  return normalized || '0';
+}
+
+function normalizeMessageHash(hash) {
+  const normalized = String(hash || '').trim().toLowerCase();
+  if (!/^[0-9a-f]{64}$/.test(normalized)) return '';
+  if (/^0+$/.test(normalized)) return '';
+  return normalized;
+}
+
+function toSafeInt(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function makeReactionActionKey(messageRef) {
+  const login = String(state.session.login || '').trim().toLowerCase();
+  const blockchainName = String(messageRef?.blockchainName || '').trim();
+  const blockNumber = Number(messageRef?.blockNumber);
+  const blockHash = normalizeMessageHash(messageRef?.blockHash);
+  if (!login || !blockchainName || !Number.isFinite(blockNumber) || blockNumber < 0 || !blockHash) return '';
+  return `${login}|${blockchainName}|${blockNumber}|${blockHash}`;
+}
+
+function buildSelectorFromRoute(route, channelId) {
+  const params = route?.params || {};
+
+  if (params.ownerBlockchainName) {
+    const rootBlockNumber = toSafeInt(params.channelRootBlockNumber);
+    if (rootBlockNumber != null) {
+      return {
+        ownerBlockchainName: String(params.ownerBlockchainName),
+        channelRootBlockNumber: rootBlockNumber,
+        channelRootBlockHash: normalizeRouteHash(params.channelRootBlockHash),
+      };
+    }
+  }
+
+  const summary = channelId ? state.channelsIndex[channelId] : null;
+  if (!summary) return null;
+  return {
+    ownerBlockchainName: summary.channel?.ownerBlockchainName,
+    channelRootBlockNumber: summary.channel?.channelRoot?.blockNumber,
+    channelRootBlockHash: normalizeRouteHash(summary.channel?.channelRoot?.blockHash),
+  };
+}
+
+function localPostsKey(selector, channelId) {
+  if (selector?.ownerBlockchainName && selector?.channelRootBlockNumber != null) {
+    return `${selector.ownerBlockchainName}:${selector.channelRootBlockNumber}`;
+  }
+  return channelId || '';
+}
+
+function buildThreadRoute(messageRef, selector) {
+  if (!messageRef || !selector) return '';
+  return [
+    'channel-thread-view',
+    encodeRoutePart(messageRef.blockchainName),
+    messageRef.blockNumber,
+    normalizeRouteHash(messageRef.blockHash),
+    encodeRoutePart(selector.ownerBlockchainName),
+    selector.channelRootBlockNumber,
+    normalizeRouteHash(selector.channelRootBlockHash),
+  ].join('/');
+}
+
+function firstNonEmptyText(...candidates) {
+  for (const candidate of candidates) {
+    if (typeof candidate !== 'string') continue;
+    const trimmed = candidate.trim();
+    if (trimmed.length > 0) return candidate;
+  }
+  return '';
+}
+
+function latestVersionText(versions) {
+  if (!Array.isArray(versions)) return '';
+  for (let i = versions.length - 1; i >= 0; i -= 1) {
+    const version = versions[i];
+    const value = firstNonEmptyText(version?.text, version?.message, version?.body);
+    if (value) return value;
+  }
+  return '';
+}
+
+function resolveMessageText(message) {
+  return firstNonEmptyText(
+    message?.text,
+    message?.message,
+    message?.body,
+    latestVersionText(message?.versions),
+  );
+}
+
+function mapApiMessageToPost(message, selector) {
+  const blockNumber = toSafeInt(message?.messageRef?.blockNumber);
+  const blockHash = normalizeMessageHash(message?.messageRef?.blockHash);
+  const messageBch = String(message?.authorBlockchainName || selector?.ownerBlockchainName || '').trim();
+  const hasRef = !!(messageBch && blockNumber != null && blockHash);
+  const resolvedText = resolveMessageText(message);
+  const messageRef = hasRef
+    ? {
+        blockchainName: messageBch,
+        blockNumber,
+        blockHash,
+      }
+    : null;
+
+  if (messageRef) {
+    setMessageReactionState(messageRef, message?.likedByMe === true ? 'liked' : 'unliked');
+  }
+
+  return {
+    title: `${message?.authorLogin || 'автор'} - #${blockNumber ?? '?'}`,
+    body: resolvedText || '(пусто)',
+    likesCount: Number(message?.likesCount || 0),
+    repliesCount: Number(message?.repliesCount || 0),
+    messageRef,
+    reactionState: messageRef ? getMessageReactionState(messageRef) : '',
+  };
+}
+
 function findMockChannel(channelId) {
-  const channel = channels.find((c) => c.id === channelId) || channels[0];
+  const fallback = channels[0] || {
+    id: 'ch0',
+    name: 'Неизвестный канал',
+    description: 'Описание отсутствует',
+    ownerName: 'неизвестно',
+    ownerLogin: '',
+    displayName: 'неизвестно/Неизвестный канал',
+  };
+  const channel = channels.find((c) => c.id === channelId) || fallback;
   return {
     channel,
     posts: [
@@ -13,33 +171,62 @@ function findMockChannel(channelId) {
       ...getLocalChannelPosts(channelId),
     ],
     isOwnChannel: channel.ownerLogin === '@shine.alex',
+    selector: null,
+    localKey: channelId,
   };
 }
 
-function mapApiMessageToPost(message) {
-  return {
-    title: `${message.authorLogin || 'author'} • #${message.messageRef?.blockNumber ?? '?'}`,
-    body: message.text || '(пусто)',
+function openReplyModal({ onSubmit }) {
+  const root = document.getElementById('modal-root');
+  root.innerHTML = `
+    <div class="modal" id="reply-modal">
+      <div class="modal-card stack">
+        <h3 class="modal-title">Ответ</h3>
+        <textarea id="reply-text" class="input" rows="5" maxlength="2000" placeholder="Текст ответа"></textarea>
+        <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 errorEl = root.querySelector('#reply-error');
+  const close = () => {
+    root.innerHTML = '';
   };
+
+  root.querySelector('#reply-cancel').addEventListener('click', close);
+  root.querySelector('#reply-submit').addEventListener('click', async () => {
+    const text = String(textEl?.value || '').trim();
+    if (!text) {
+      errorEl.textContent = 'Введите текст ответа.';
+      return;
+    }
+
+    try {
+      await onSubmit(text);
+      close();
+    } catch (error) {
+      errorEl.textContent = toUserMessage(error, 'Не удалось отправить ответ.');
+    }
+  });
+
+  if (textEl) textEl.focus();
 }
 
-function renderPostCard(post) {
-  const card = document.createElement('article');
-  card.className = 'card stack';
-  card.innerHTML = `<strong>${post.title}</strong><p class="meta-muted">${post.body}</p>`;
-  return card;
-}
-
-function openAddMessageModal({ channelId, channelName, onSubmit }) {
+function openAddMessageModal({ channelName, onSubmit }) {
   const root = document.getElementById('modal-root');
   root.innerHTML = `
     <div class="modal" id="channel-message-modal">
       <div class="modal-card stack">
-        <h3 style="font-size:18px;">Новое сообщение в канал</h3>
+        <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="meta-muted" id="channel-message-error" style="min-height:18px;"></div>
-        <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
+        <textarea id="channel-message-text" class="input" rows="6" maxlength="2000" placeholder="Текст сообщения"></textarea>
+        <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>
@@ -54,110 +241,314 @@ function openAddMessageModal({ channelId, channelName, onSubmit }) {
   };
 
   root.querySelector('#channel-message-cancel').addEventListener('click', close);
-  root.querySelector('#channel-message-submit').addEventListener('click', () => {
-    const body = textEl.value.trim();
+  root.querySelector('#channel-message-submit').addEventListener('click', async () => {
+    const body = String(textEl?.value || '').trim();
     if (!body) {
       errorEl.textContent = 'Введите текст сообщения.';
       return;
     }
 
-    onSubmit({
-      title: `${state.session.login || 'Вы'} • сейчас`,
-      body,
-    });
-    close();
+    try {
+      await onSubmit({
+        title: `${state.session.login || 'вы'} - сейчас`,
+        body,
+      });
+      close();
+    } catch (error) {
+      errorEl.textContent = toUserMessage(error, 'Не удалось отправить сообщение.');
+    }
   });
 
   if (textEl) textEl.focus();
 }
 
-function renderBody(screen, navigate, channelId, channelData) {
+function renderPostCard(post, { navigate, selector, onToggleLike, onReply }) {
+  const card = document.createElement('article');
+  card.className = 'card stack channel-message-card';
+
+  const stats = document.createElement('p');
+  stats.className = 'channel-message-stats';
+  stats.textContent = `Лайки: ${post.likesCount || 0}, ответы: ${post.repliesCount || 0}`;
+
+  card.innerHTML = `<strong class="channel-message-title">${post.title}</strong><p class="channel-message-body">${post.body}</p>`;
+  card.append(stats);
+
+  if (!post.messageRef || !selector) return card;
+
+  const actionKey = makeReactionActionKey(post.messageRef);
+  const isPending = actionKey ? pendingReactionActions.has(actionKey) : false;
+
+  const actions = document.createElement('div');
+  actions.className = 'channel-message-actions';
+
+  const likeButton = document.createElement('button');
+  likeButton.type = 'button';
+  likeButton.className = 'secondary-btn channel-action-like';
+  const isLiked = post.reactionState === 'liked';
+  if (isLiked) likeButton.classList.add('is-liked');
+  likeButton.textContent = isPending ? 'Выполняется...' : (isLiked ? 'Убрать лайк' : 'Лайк');
+  likeButton.disabled = isPending;
+  likeButton.addEventListener('click', async () => {
+    if (isPending) return;
+    await onToggleLike(post.messageRef, isLiked ? 'unlike' : 'like');
+  });
+
+  const replyButton = document.createElement('button');
+  replyButton.type = 'button';
+  replyButton.className = 'secondary-btn channel-action-reply';
+  replyButton.textContent = 'Ответить';
+  replyButton.addEventListener('click', () => {
+    openReplyModal({
+      onSubmit: async (text) => onReply(post.messageRef, text),
+    });
+  });
+
+  const openThreadButton = document.createElement('button');
+  openThreadButton.type = 'button';
+  openThreadButton.className = 'secondary-btn channel-action-thread';
+  openThreadButton.textContent = 'Открыть тред';
+  openThreadButton.addEventListener('click', () => {
+    const route = buildThreadRoute(post.messageRef, selector);
+    if (route) navigate(route);
+  });
+
+  actions.append(likeButton, replyButton, openThreadButton);
+  card.append(actions);
+  return card;
+}
+
+function renderBody(screen, navigate, channelData, handlers) {
   const head = document.createElement('div');
-  head.className = 'card';
+  head.className = 'card channel-head-card';
   head.innerHTML = `
-    <strong># ${channelData.channel.name}</strong>
-    <p class="meta-muted" style="margin-top:4px;">${channelData.channel.description}</p>
-    <p class="meta-muted" style="margin-top:8px;">Владелец: ${channelData.channel.ownerName}</p>
+    <strong class="channel-head-title">${channelData.channel.displayName || channelData.channel.name}</strong>
+    <p class="channel-head-meta">${channelData.channel.description}</p>
+    <p class="channel-head-meta">Владелец: ${channelData.channel.ownerName}</p>
+    <p class="channel-note">Состояние лайка обновляется после подтверждённого reread с сервера.</p>
   `;
 
   const actionButton = document.createElement('button');
-  actionButton.className = channelData.isOwnChannel ? 'primary-btn' : 'secondary-btn';
-  actionButton.textContent = channelData.isOwnChannel ? 'Добавить сообщение в канал' : 'Отписаться от канала';
+  actionButton.className = channelData.isOwnChannel
+    ? 'primary-btn channel-main-action'
+    : 'destructive-btn channel-main-action';
+  actionButton.textContent = channelData.isOwnChannel ? 'Добавить сообщение' : 'Отписаться от канала';
+  let followLimit = null;
 
   const feed = document.createElement('div');
-  feed.className = 'stack';
+  feed.className = 'stack channel-feed';
 
   channelData.posts.forEach((post) => {
-    feed.append(renderPostCard(post));
+    feed.append(renderPostCard(post, {
+      navigate,
+      selector: channelData.selector,
+      onToggleLike: handlers.onToggleLike,
+      onReply: handlers.onReply,
+    }));
   });
 
   if (channelData.isOwnChannel) {
     actionButton.addEventListener('click', () => {
       openAddMessageModal({
-        channelId,
         channelName: channelData.channel.name,
-        onSubmit: (post) => {
-          addLocalChannelPost(channelId, post);
-          channelData.posts.push(post);
-          feed.append(renderPostCard(post));
-        },
+        onSubmit: async (post) => handlers.onAddPost(post),
       });
     });
+  } else {
+    followLimit = document.createElement('p');
+    followLimit.className = 'channel-note';
+    followLimit.textContent = 'Отписка удаляет только эту подписку на канал.';
+    actionButton.addEventListener('click', handlers.onUnfollowChannel);
   }
 
   const backButton = document.createElement('button');
-  backButton.className = 'secondary-btn';
-  backButton.textContent = 'Назад к списку';
+  backButton.className = 'secondary-btn channel-back-btn';
+  backButton.textContent = 'Назад к каналам';
   backButton.addEventListener('click', () => navigate('channels-list'));
 
+  if (followLimit) {
+    screen.append(head, followLimit, actionButton, feed, backButton);
+    return;
+  }
   screen.append(head, actionButton, feed, backButton);
 }
 
-async function loadFromApi(channelId) {
-  const summary = state.channelsIndex[channelId];
-  if (!summary) return null;
+async function loadFromApi(route, channelId) {
+  const selector = buildSelectorFromRoute(route, channelId);
+  if (!selector?.ownerBlockchainName || selector.channelRootBlockNumber == null) {
+    throw new Error('Не удалось определить канал из адреса страницы.');
+  }
 
-  const selector = {
-    ownerBlockchainName: summary.channel?.ownerBlockchainName,
-    channelRootBlockNumber: summary.channel?.channelRoot?.blockNumber,
-    channelRootBlockHash: summary.channel?.channelRoot?.blockHash,
-  };
-
-  if (!selector.ownerBlockchainName || selector.channelRootBlockNumber == null) return null;
-
-  const payload = await authService.getChannelMessages(selector, 200, 'asc');
+  const payload = await authService.getChannelMessages(selector, 200, 'asc', state.session.login);
+  const localKey = localPostsKey(selector, channelId);
   const posts = [
-    ...(payload.messages || []).map(mapApiMessageToPost),
-    ...getLocalChannelPosts(channelId),
+    ...(payload.messages || []).map((message) => mapApiMessageToPost(message, selector)),
+    ...getLocalChannelPosts(localKey),
   ];
 
   return {
     channel: {
-      name: payload.channel?.channelName || summary.channel?.channelName || 'unknown',
+      name: payload.channel?.channelName || 'неизвестный канал',
+      displayName: `${payload.channel?.ownerLogin || 'неизвестно'}/${payload.channel?.channelName || 'неизвестный канал'}`,
       description: `bch=${payload.channel?.ownerBlockchainName || selector.ownerBlockchainName}`,
-      ownerName: payload.channel?.ownerLogin || summary.channel?.ownerLogin || 'unknown',
+      ownerName: payload.channel?.ownerLogin || 'неизвестно',
     },
     posts,
     isOwnChannel: (payload.channel?.ownerLogin || '').toLowerCase() === (state.session.login || '').toLowerCase(),
+    selector,
+    localKey,
   };
 }
 
+function renderLoadError(screen, navigate, message, onRetry) {
+  const card = document.createElement('div');
+  card.className = 'card stack channels-status';
+  card.innerHTML = `
+    <strong>Не удалось загрузить канал</strong>
+    <p class="meta-muted">${message || 'Проверьте подключение к серверу и повторите попытку.'}</p>
+  `;
+
+  const retry = document.createElement('button');
+  retry.type = 'button';
+  retry.className = 'primary-btn';
+  retry.textContent = 'Повторить';
+  retry.addEventListener('click', onRetry);
+
+  const back = document.createElement('button');
+  back.type = 'button';
+  back.className = 'secondary-btn';
+  back.textContent = 'Назад к каналам';
+  back.addEventListener('click', () => navigate('channels-list'));
+
+  card.append(retry, back);
+  screen.append(card);
+}
+
+function renderDemoFallback(screen, navigate, channelId, error) {
+  const info = document.createElement('div');
+  info.className = 'card stack';
+  info.innerHTML = `
+    <strong>Включен демо-режим</strong>
+    <p class="meta-muted">Данные канала с сервера недоступны. Показан мок-канал, потому что включен channelsDemo.</p>
+    <p class="meta-muted">${toUserMessage(error, 'Ошибка API/WS')}</p>
+  `;
+  screen.append(info);
+
+  renderBody(screen, navigate, findMockChannel(channelId || 'ch1'), {
+    onToggleLike: async () => {},
+    onReply: async () => {},
+    onAddPost: async (post) => {
+      addLocalChannelPost(channelId || 'ch1', post);
+    },
+    onUnfollowChannel: () => {},
+  });
+}
+
 export function render({ navigate, route }) {
-  const channelId = route.params.channelId || 'ch1';
+  const channelId = route.params.channelId || '';
+  const routeSelector = buildSelectorFromRoute(route, channelId);
 
   const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack channels-screen channels-screen--channel';
 
-  const headerTitle = state.channelsIndex[channelId]?.channel?.channelName
-    ? `Канал: ${state.channelsIndex[channelId].channel.channelName}`
-    : `Канал: ${(channels.find((c) => c.id === channelId) || channels[0]).name}`;
+  const fallbackName = channels.find((c) => c.id === channelId)?.name || 'Канал';
+  const titleFromIndex = state.channelsIndex[channelId]?.channel?.channelName;
+  const ownerFromIndex = state.channelsIndex[channelId]?.channel?.ownerLogin;
+  const titleFromIndexDisplay = (ownerFromIndex && titleFromIndex) ? `${ownerFromIndex}/${titleFromIndex}` : titleFromIndex;
+  const titleFromRoute = route.params.ownerBlockchainName ? String(route.params.ownerBlockchainName) : '';
+  const headerTitle = `Канал: ${titleFromIndexDisplay || titleFromRoute || fallbackName}`;
+
+  const userIndicator = document.createElement('div');
+  userIndicator.className = 'card channels-user-chip';
+  userIndicator.textContent = `Вы вошли как @${state.session.login || 'неизвестно'}`;
+
+  const statusBox = document.createElement('div');
+  statusBox.className = 'card status-line is-unavailable channels-status';
+  statusBox.style.display = 'none';
+
+  const rerender = () => {
+    const current = document.querySelector('section.channels-screen--channel');
+    if (!current) return;
+    const next = render({ navigate, route });
+    current.replaceWith(next);
+  };
+
+  const showStatus = (message) => {
+    if (!message) {
+      statusBox.style.display = 'none';
+      statusBox.textContent = '';
+      return;
+    }
+    statusBox.textContent = message;
+    statusBox.style.display = '';
+  };
+
+  const requireSigningSession = () => {
+    const login = state.session.login;
+    const storagePwd = state.session.storagePwdInMemory;
+    if (!login || !storagePwd) {
+      throw new Error('Сессия недействительна. Выполните вход заново.');
+    }
+    return { login, storagePwd };
+  };
+
+  const rereadChannel = async () => {
+    await loadFromApi(route, channelId);
+  };
+
+  const onToggleLike = async (messageRef, action) => {
+    const actionKey = makeReactionActionKey(messageRef);
+    if (!actionKey) {
+      throw new Error('Некорректная ссылка на сообщение для реакции.');
+    }
+    if (pendingReactionActions.has(actionKey)) return;
+
+    pendingReactionActions.add(actionKey);
+    rerender();
+    try {
+      const { login, storagePwd } = requireSigningSession();
+      if (action === 'unlike') {
+        await authService.addBlockUnlike({ login, storagePwd, message: messageRef });
+      } else {
+        await authService.addBlockLike({ login, storagePwd, message: messageRef });
+      }
+      await rereadChannel();
+      showStatus('');
+    } finally {
+      pendingReactionActions.delete(actionKey);
+      rerender();
+    }
+  };
+
+  const onReply = async (messageRef, text) => {
+    const { login, storagePwd } = requireSigningSession();
+    await authService.addBlockReply({ login, storagePwd, message: messageRef, text });
+    await rereadChannel();
+    rerender();
+  };
+
+  const onAddPost = async (post) => {
+    const { login, storagePwd } = requireSigningSession();
+    if (!routeSelector?.ownerBlockchainName || routeSelector.channelRootBlockNumber == null) {
+      throw new Error('Идентификатор канала не готов.');
+    }
+
+    await authService.addBlockTextPost({
+      login,
+      storagePwd,
+      channel: routeSelector,
+      text: post?.body || '',
+    });
+    await rereadChannel();
+    rerender();
+  };
 
   screen.append(
     renderHeader({
       title: headerTitle,
-      leftAction: { label: '←', onClick: () => navigate('channels-list') },
+      leftAction: { label: '<', onClick: () => navigate('channels-list') },
     })
   );
+  screen.append(userIndicator, statusBox);
 
   const loading = document.createElement('div');
   loading.className = 'card meta-muted';
@@ -166,18 +557,60 @@ export function render({ navigate, route }) {
 
   (async () => {
     try {
-      const apiData = await loadFromApi(channelId);
+      const apiData = await loadFromApi(route, channelId);
       loading.remove();
-      if (apiData) {
-        renderBody(screen, navigate, channelId, apiData);
+      renderBody(screen, navigate, apiData, {
+        onToggleLike: async (messageRef, action) => {
+          try {
+            await onToggleLike(messageRef, action);
+          } catch (error) {
+            showStatus(toUserMessage(error, action === 'unlike' ? 'Не удалось убрать лайк.' : 'Не удалось поставить лайк.'));
+          }
+        },
+        onReply: async (messageRef, text) => {
+          try {
+            await onReply(messageRef, text);
+            showStatus('');
+          } catch (error) {
+            throw new Error(toUserMessage(error, 'Не удалось отправить ответ.'));
+          }
+        },
+        onAddPost: async (post) => {
+          try {
+            await onAddPost(post);
+            showStatus('');
+          } catch (error) {
+            throw new Error(toUserMessage(error, 'Не удалось добавить сообщение.'));
+          }
+        },
+        onUnfollowChannel: async () => {
+          try {
+            const { login, storagePwd } = requireSigningSession();
+            if (!apiData.selector) throw new Error('Не удалось определить канал для отписки.');
+
+            await authService.addBlockFollowChannel({
+              login,
+              storagePwd,
+              targetBlockchainName: apiData.selector.ownerBlockchainName,
+              targetBlockNumber: apiData.selector.channelRootBlockNumber,
+              targetBlockHashHex: apiData.selector.channelRootBlockHash,
+              unfollow: true,
+            });
+
+            navigate('channels-list');
+          } catch (error) {
+            showStatus(toUserMessage(error, 'Не удалось отписаться от канала.'));
+          }
+        },
+      });
+    } catch (error) {
+      loading.remove();
+      if (isChannelsDemoMode()) {
+        renderDemoFallback(screen, navigate, channelId, error);
         return;
       }
-    } catch {
-      // fallback to mock below
+      renderLoadError(screen, navigate, toUserMessage(error, 'Не удалось загрузить канал.'), rerender);
     }
-
-    loading.remove();
-    renderBody(screen, navigate, channelId, findMockChannel(channelId));
   })();
 
   return screen;