${escapeHtml(details.authorBlockchainName)}
Номер записи${escapeHtml(details.blockNumber)}
Хэш${escapeHtml(details.blockHash)}
Тип${escapeHtml(details.msgSubType)}
Время${escapeHtml(details.createdAtMs ? new Date(Number(details.createdAtMs)).toLocaleString('ru-RU') : '—')}
Public key${escapeHtml(details.publicKey)}
Подпись${escapeHtml(details.signature)}
${escapeHtml(rawText)}
${escapeHtml(String(parsed.text || '').trim() || 'Без текста')}
`; item.addEventListener('click', () => { root.innerHTML = ''; if (typeof onSelect === 'function') onSelect(post); }); list.append(item); }); } } root.querySelector('#entrypoint-history-close')?.addEventListener('click', () => { root.innerHTML = ''; }); } function openRepostModal({ navigate, channels = [], onSubmit }) { const root = document.getElementById('modal-root'); const options = (Array.isArray(channels) ? channels : []) .filter((item) => item?.selector?.ownerBlockchainName && Number.isFinite(Number(item?.selector?.channelRootBlockNumber))) .filter((item) => !isStoriesChannel(item)) .map((item, index) => { const owner = String(item?.ownerLogin || '').trim(); const name = String(item?.channelName || '').trim(); const label = `${owner || 'my'}/${name || 'channel'}`; return ``; }) .join(''); root.innerHTML = `${escapeHtml(targetText || 'Без текста')}
`; card.append(targetPreview); } } const body = document.createElement('p'); body.className = 'channel-message-body'; body.textContent = parsedBody.text; card.append(body); } const refKey = messageRefKey(post.messageRef); if (refKey) { card.dataset.messageKey = refKey; } card.classList.add('is-counters-visible'); if (!post.messageRef || !selector) return card; const actions = document.createElement('div'); actions.className = 'channel-message-actions'; const actionKey = makeReactionActionKey(post.messageRef); const isPending = actionKey ? pendingReactionActions.has(actionKey) : false; const likeButton = document.createElement('button'); likeButton.type = 'button'; likeButton.className = 'channel-action-item channel-action-like'; const isLiked = post.reactionState === 'liked'; if (isLiked) likeButton.classList.add('is-liked'); likeButton.innerHTML = ` ${isPending ? 'Лайк...' : 'Лайк'} ${post.likesCount || 0} `; setActionTitle(likeButton, isPending ? 'Лайк...' : 'Лайк'); likeButton.disabled = isPending; likeButton.addEventListener('click', async (event) => { event.stopPropagation(); animatePress(event.currentTarget); if (isPending) return; if (!isLiked) { const ok = window.confirm('Поставить лайк?'); if (!ok) return; } await longPressFeel(event.currentTarget, 130); likeButton.disabled = true; setActionTitle(likeButton, 'Лайк...'); await onToggleLike(post.messageRef, isLiked ? 'unlike' : 'like', { likeButton }); }); const replyButton = document.createElement('button'); replyButton.type = 'button'; replyButton.className = 'channel-action-item channel-action-reply'; replyButton.innerHTML = ` Ответить ${post.repliesCount || 0} `; setActionTitle(replyButton, 'Ответить'); replyButton.addEventListener('click', (event) => { event.stopPropagation(); animatePress(event.currentTarget); openReplyModal({ navigate, onSubmit: async (text) => onReply(post.messageRef, text), }); }); const ratingButton = document.createElement('button'); ratingButton.type = 'button'; ratingButton.className = 'channel-action-item channel-action-rating'; ratingButton.innerHTML = ` Оценка ${post.ratingsCount || 0} `; setActionTitle(ratingButton, 'Оценка'); ratingButton.addEventListener('click', (event) => { event.stopPropagation(); animatePress(event.currentTarget); openReplyModal({ navigate, mode: 'rating', onSubmit: async (text) => onRating(post.messageRef, text), }); }); // Репосты временно отключены до будущей реализации. // Точка возврата: docs/Future_Features/2026-05-24_1140_репосты_в_каналах_и_тредах.md actions.append(likeButton, replyButton, ratingButton); const shareButton = document.createElement('button'); shareButton.type = 'button'; shareButton.className = 'channel-action-item channel-action-share'; shareButton.innerHTML = ` Отправить `; setActionTitle(shareButton, 'Отправить'); shareButton.addEventListener('click', async (event) => { event.stopPropagation(); animatePress(event.currentTarget); const route = buildThreadRoute(post.messageRef, selector); await onShare(route); }); actions.append(shareButton); 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'; originalBtn.className = 'channel-action-item'; originalBtn.innerHTML = ` Оригинал `; setActionTitle(originalBtn, 'Оригинал'); originalBtn.addEventListener('click', (event) => { event.stopPropagation(); const ownerLogin = extractLoginFromBlockchainName(post.targetRef.blockchainName); if (!ownerLogin) return; const ok = window.confirm('Перейти к оригинальному сообщению?'); if (!ok) return; navigate(makeShineMessageRoute({ ownerLogin, messageBlockchainName: post.targetRef.blockchainName, messageBlockNumber: post.targetRef.blockNumber, })); }); actions.append(originalBtn); } const detailsButton = document.createElement('button'); detailsButton.type = 'button'; detailsButton.className = 'channel-action-item'; detailsButton.innerHTML = ` Данные блокчейна `; setActionTitle(detailsButton, 'Данные блокчейна'); detailsButton.addEventListener('click', (event) => { event.stopPropagation(); openBlockchainDetailsModal(buildBlockchainDetails({ messageRef: post.messageRef, authorLogin: post.authorLogin, timestampMs: post.timestampMs, text: post.body, raw: post.rawMessage, localNumber: post.localNumber, msgSubType: post.msgSubType, })); }); actions.append(detailsButton); if (post.isOwnMessage) { const editButton = document.createElement('button'); editButton.type = 'button'; editButton.className = 'channel-action-item'; editButton.setAttribute('aria-label', 'Редактировать'); editButton.title = 'Редактировать'; editButton.innerHTML = ` `; editButton.addEventListener('click', (event) => { event.stopPropagation(); animatePress(event.currentTarget); openEditMessageModal({ 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); } card.append(actions); card.addEventListener('click', () => { const route = buildThreadRoute(post.messageRef, selector); if (route) navigate(route); }); return card; } function renderBody(screen, navigate, routeKey, channelData, handlers) { if (channelData.reverseChannelMissingWarning) { const reverseWarning = document.createElement('p'); reverseWarning.className = 'channel-head-meta'; reverseWarning.textContent = channelData.reverseChannelMissingWarning; screen.append(reverseWarning); } if (Number(channelData.unreadCount || 0) > 0) { const unreadLine = document.createElement('div'); unreadLine.className = 'card channel-unread-line'; unreadLine.textContent = `Не прочитано: ${channelData.unreadCount}`; screen.append(unreadLine); } const actionButton = document.createElement('button'); actionButton.className = 'destructive-btn channel-main-action'; actionButton.textContent = 'Подписаться на канал'; const addMessageButton = document.createElement('button'); addMessageButton.type = 'button'; addMessageButton.className = 'primary-btn channel-main-action channel-main-action--compose'; addMessageButton.textContent = 'Добавить сообщение'; addMessageButton.addEventListener('click', (event) => { animatePress(event.currentTarget); handlers.onAddMessage(); }); const feed = document.createElement('div'); feed.className = 'stack channel-feed'; const postsByKey = new Map(); const metaEvents = (Array.isArray(channelData.metaEvents) ? channelData.metaEvents : []) .map((event) => mapChannelMetaEvent(event, channelData.channel)); const feedItems = [ ...metaEvents.map((event) => ({ type: 'meta', timestampMs: event.timestampMs, blockNumber: Number(event?.messageRef?.blockNumber || 0), event, })), ...channelData.posts.map((post) => ({ type: 'post', timestampMs: post.timestampMs, blockNumber: Number(post?.messageRef?.blockNumber || 0), post, })), ].sort((a, b) => { const byTime = Number(a.timestampMs || 0) - Number(b.timestampMs || 0); if (byTime !== 0) return byTime; return Number(a.blockNumber || 0) - Number(b.blockNumber || 0); }); if (feedItems.length) { feedItems.forEach((item) => { if (item.type === 'meta') { feed.append(renderChannelMetaEventCard(item.event)); return; } const row = renderPostCard(item.post, { navigate, selector: channelData.selector, onToggleLike: handlers.onToggleLike, onReply: handlers.onReply, onRating: handlers.onRating, onStatusAction: handlers.onStatusAction, onOpenEntrypointMenu: handlers.onOpenEntrypointMenu, onRepost: handlers.onRepost, onShare: handlers.onShare, onEdit: handlers.onEdit, }); const key = messageRefKey(item.post.messageRef); if (key) { postsByKey.set(key, item.post); } feed.append(row); }); } else { const empty = document.createElement('div'); empty.className = 'card meta-muted'; empty.textContent = channelData.isDiary ? 'К сожалению, у вас пока еще ничего нет в Дневнике.' : 'Ждем ваших начинаний'; feed.append(empty); } if (!channelData.isSubscribed) { actionButton.addEventListener('click', handlers.onSubscribeChannel); } const backButton = document.createElement('button'); backButton.className = 'secondary-btn channel-back-btn'; backButton.textContent = 'Назад к каналам'; backButton.addEventListener('click', () => navigate('channels-list')); if (channelData.isDiary) { screen.append(feed, backButton); } else if (channelData.isOwnChannel) { screen.append(feed, addMessageButton); } else if (!channelData.isSubscribed && !isStoriesChannel(channelData.channel)) { screen.append(actionButton, feed, backButton); } else { screen.append(feed, backButton); } applyPendingScroll(screen, routeKey, channelData.isOwnChannel || channelData.isDiary || Number(channelData.unreadCount || 0) === 0); return () => { // noop }; } function renderSkeleton(screen) { const wrap = document.createElement('div'); wrap.className = 'stack'; wrap.append(createSkeletonCard(), createSkeletonCard(), createSkeletonCard()); screen.append(wrap); return wrap; } export function render({ navigate, route, chrome }) { const channelId = route.params.channelId || ''; const routeSelector = buildSelectorFromRoute(route, channelId); const routeKey = `${routeSelector?.ownerBlockchainName || ''}:${routeSelector?.channelRootBlockNumber || ''}:${routeSelector?.channelRootBlockHash || ''}`; const screen = document.createElement('section'); screen.className = 'stack channels-screen channels-screen--channel'; const appScreen = document.getElementById('app-screen'); appScreen?.classList.add('channels-scroll-clean'); const scrollToBottomControl = attachScrollToBottomButton({ scrollContainer: appScreen }); const statusBox = document.createElement('div'); statusBox.className = 'card status-line is-unavailable channels-status'; statusBox.style.display = 'none'; const showStatus = (message) => { if (!message) { statusBox.style.display = 'none'; statusBox.textContent = ''; return; } statusBox.textContent = message; statusBox.style.display = ''; }; const header = renderHeader({ title: '', leftAction: { label: '<', onClick: () => navigate('channels-list') }, rightActions: [ { label: 'Канал: ...', className: 'channel-header-route-btn', onClick: () => {} }, { label: 'Оглавление', className: 'channel-header-entrypoint-btn', onClick: () => {} }, ], }); const channelHeaderButton = header.querySelector('.header-actions .channel-header-route-btn'); const channelEntrypointButton = header.querySelector('.header-actions .channel-header-entrypoint-btn'); if (channelHeaderButton) { channelHeaderButton.disabled = true; } if (channelEntrypointButton) { channelEntrypointButton.disabled = true; channelEntrypointButton.hidden = true; } chrome?.setTopbar(header); const rerender = () => { const current = document.querySelector('section.channels-screen--channel'); if (!current) return; const next = render({ navigate, route }); current.cleanup?.(); current.replaceWith(next); }; let activeSelector = null; const requireSigningSession = () => { const login = state.session.login; const storagePwd = state.session.storagePwdInMemory; if (!login || !storagePwd) { state.authReturnHash = window.location.pathname || '/channels'; navigate('login-view'); throw new Error('Для этого действия нужно войти'); } return { login, storagePwd }; }; const onToggleLike = async (messageRef, action) => { const actionKey = makeReactionActionKey(messageRef); if (!actionKey) { throw new Error('Некорректная ссылка на сообщение для реакции.'); } if (pendingReactionActions.has(actionKey)) return; const previousReaction = getMessageReactionState(messageRef); const nextReaction = action === 'unlike' ? 'unliked' : 'liked'; pendingReactionActions.add(actionKey); try { const { login, storagePwd } = requireSigningSession(); if (action === 'unlike') { await authService.addBlockUnlike({ login, storagePwd, message: messageRef }); } else { await authService.addBlockLike({ login, storagePwd, message: messageRef }); } setMessageReactionState(messageRef, nextReaction); softHaptic(10); rerender(); } catch (error) { setMessageReactionState(messageRef, previousReaction || 'unliked'); rerender(); throw error; } finally { pendingReactionActions.delete(actionKey); } }; const onReply = async (messageRef, text) => { const { login, storagePwd } = requireSigningSession(); await authService.addBlockReply({ login, storagePwd, message: messageRef, text }); const scrollTarget = messageRefKey(messageRef); if (scrollTarget) pendingScrollByRoute.set(routeKey, scrollTarget); softHaptic(15); showToast('Ответ отправлен'); rerender(); }; const onRating = async (messageRef, text) => { const { login, storagePwd } = requireSigningSession(); await authService.addBlockRating({ login, storagePwd, message: messageRef, text }); const scrollTarget = messageRefKey(messageRef); if (scrollTarget) pendingScrollByRoute.set(routeKey, scrollTarget); softHaptic(15); showToast('Оценка отправлена'); rerender(); }; const onStatusAction = async (post) => { const options = getStatusActionOptionsForTarget(post?.msgSubType); const typeMeta = getChannelMessageTypeMeta(post?.msgSubType); if (!options.length || !typeMeta || !post?.messageRef) return; openStatusActionMenuModal({ targetLabel: typeMeta.label, options, onSelect: async (option) => { openStatusActionCommentModal({ title: option.modalTitle, submitLabel: option.label, onSubmit: async (text) => { const { login, storagePwd } = requireSigningSession(); await authService.addBlockStatusAction({ login, storagePwd, message: post.messageRef, text, statusSubType: option.subType, }); softHaptic(14); showToast(`${option.label} сохранено`); rerender(); }, }); }, }); }; const loadOwnedChannelsForRepost = async (login) => { const feed = await authService.listSubscriptionsFeed(login, 1000); const rows = Array.isArray(feed?.ownedChannels) ? feed.ownedChannels : []; return rows .map((row) => { const selector = { ownerBlockchainName: String(row?.channel?.ownerBlockchainName || '').trim(), channelRootBlockNumber: Number(row?.channel?.channelRoot?.blockNumber), channelRootBlockHash: normalizeRouteHash(row?.channel?.channelRoot?.blockHash), }; if (!selector.ownerBlockchainName || !Number.isFinite(selector.channelRootBlockNumber) || selector.channelRootBlockNumber < 0) { return null; } return { ownerLogin: String(row?.channel?.ownerLogin || '').trim(), channelName: String(row?.channel?.channelName || '').trim(), channelTypeCode: Number(row?.channel?.channelTypeCode ?? 1), selector, }; }) .filter(Boolean) .filter((item) => !isStoriesChannel(item)); }; const isSameChannelSelector = (a, b) => ( String(a?.ownerBlockchainName || '').trim() === String(b?.ownerBlockchainName || '').trim() && Number(a?.channelRootBlockNumber) === Number(b?.channelRootBlockNumber) && normalizeRouteHash(a?.channelRootBlockHash) === normalizeRouteHash(b?.channelRootBlockHash) ); const onRepost = async (messageRef) => { const { login, storagePwd } = requireSigningSession(); const channels = await loadOwnedChannelsForRepost(login); if (!channels.length) throw new Error('У вас пока нет каналов для репоста.'); openRepostModal({ navigate, channels, onSubmit: async ({ channel, text }) => { await authService.addBlockRepost({ login, storagePwd, channel, message: messageRef, text, }); if (isSameChannelSelector(channel, activeSelector)) { pendingScrollByRoute.set(routeKey, '__LAST__'); rerender(); } softHaptic(12); showToast('Репост опубликован'); }, }); }; const onShare = async (routePath) => { try { const routeToShare = String(routePath || '').trim(); if (!routeToShare) throw new Error('Не удалось подготовить ссылку на сообщение.'); const result = await shareOrCopyLink({ title: 'SHiNE · Каналы', text: 'Тред из канала SHiNE', url: buildAbsoluteRouteUrl(routeToShare), }); if (result === 'copied') showToast('Ссылка скопирована'); if (result === 'shared') showToast('Ссылка передана'); if (result === 'shared' || result === 'copied') softHaptic(10); } catch (error) { showStatus(toUserMessage(error, 'Не удалось отправить ссылку.')); } }; const onAddPost = async (bodyText, msgSubType = 10) => { const { login, storagePwd } = requireSigningSession(); if (!activeSelector?.ownerBlockchainName || activeSelector.channelRootBlockNumber == null) { throw new Error('Идентификатор канала не готов.'); } await authService.addBlockTextPost({ login, storagePwd, channel: activeSelector, text: bodyText, msgSubType, }); pendingScrollByRoute.set(routeKey, '__LAST__'); softHaptic(15); showToast('Сообщение отправлено'); rerender(); }; const onEditPost = async (messageRef, text) => { const { login, storagePwd } = requireSigningSession(); const isDiaryEdit = isDiarySelector(activeSelector); if (!isDiaryEdit && (!activeSelector?.ownerBlockchainName || activeSelector.channelRootBlockNumber == null)) { throw new Error('Идентификатор канала не готов.'); } await authService.addBlockEditMessage({ login, storagePwd, message: messageRef, text, isChannelPost: !isDiaryEdit, channel: isDiaryEdit ? null : activeSelector, }); softHaptic(12); showToast('Сообщение обновлено'); rerender(); }; const onEditChannelMeta = async ({ title, description, avatar }) => { const { login, storagePwd } = requireSigningSession(); if (!activeSelector?.ownerBlockchainName || activeSelector.channelRootBlockNumber == null) { throw new Error('Идентификатор канала не готов.'); } await authService.addBlockChannelMeta({ login, storagePwd, channel: activeSelector, title, description, avatar, }); if (avatar?.ar) markArweaveAttachmentPlaced(login, avatar); softHaptic(12); showToast('Профиль канала обновлён'); rerender(); }; screen.append(statusBox); const skeleton = renderSkeleton(screen); let cleanupSeenTracking = null; (async () => { try { const apiData = await loadFromApi(route, channelId); activeSelector = apiData?.selector || null; const lastSeenCount = Number(apiData?.messagesCount || (Array.isArray(apiData?.posts) ? apiData.posts.length : 0) || 0); const settingKey = buildChannelSettingsKey(apiData?.channel?.ownerBlockchainName, apiData?.channel?.name); if (settingKey && state.session.login && state.session.storagePwdInMemory) { void authService.upsertUserSetting({ login: state.session.login, settingType: 1, settingKey, timeMs: Date.now(), valueText: '', valueNum: lastSeenCount, storagePwd: state.session.storagePwdInMemory, }).catch(() => {}); } const titleLabel = apiData?.channel?.displayTitle || apiData?.channel?.name || 'channel'; const entrypointPosts = getEntrypointPosts(apiData?.posts); const openEntrypointHistory = () => { openEntrypointHistoryModal({ channelTitle: titleLabel, posts: apiData?.posts, onSelect: (post) => { if (!flashAndScrollToMessage(post?.messageRef)) { showToast('Не удалось найти запись оглавления в ленте'); } }, }); }; if (channelHeaderButton) { channelHeaderButton.textContent = titleLabel; channelHeaderButton.disabled = false; channelHeaderButton.onclick = (event) => { animatePress(event.currentTarget); openAboutChannelModal(apiData.channel, { canEdit: apiData?.isOwnChannel === true && !apiData?.isDiary && !isStoriesChannel(apiData?.channel), onEdit: () => openEditChannelModal({ channel: apiData.channel, onSave: onEditChannelMeta, }), }); }; } if (channelEntrypointButton) { const canShowEntrypointButton = !apiData?.isDiary && entrypointPosts.length > 0; channelEntrypointButton.hidden = !canShowEntrypointButton; channelEntrypointButton.disabled = !canShowEntrypointButton; channelEntrypointButton.onclick = () => { const latestEntrypoint = entrypointPosts[0]; if (!latestEntrypoint?.messageRef || !flashAndScrollToMessage(latestEntrypoint.messageRef)) { showToast('Не удалось найти актуальное оглавление'); } }; } skeleton.remove(); cleanupSeenTracking = renderBody(screen, navigate, routeKey, apiData, { onAddMessage: () => { openAddMessageModal({ channelName: apiData?.channel?.name || '', navigate, onSubmit: async ({ text: bodyText, msgSubType }) => { try { await onAddPost(bodyText, msgSubType); showStatus(''); } catch (error) { throw new Error(toUserMessage(error, 'Не удалось добавить сообщение.')); } }, }); }, onToggleLike: async (messageRef, action) => { try { await onToggleLike(messageRef, action); showStatus(''); } catch (error) { showStatus(toUserMessage(error, action === 'unlike' ? 'Не удалось убрать лайк.' : 'Не удалось поставить лайк.')); } }, onReply: async (messageRef, text) => { try { await onReply(messageRef, text); showStatus(''); } catch (error) { throw new Error(toUserMessage(error, 'Не удалось отправить ответ.')); } }, onRating: async (messageRef, text) => { try { await onRating(messageRef, text); showStatus(''); } catch (error) { throw new Error(toUserMessage(error, 'Не удалось отправить оценку.')); } }, onStatusAction: async (post) => { try { await onStatusAction(post); showStatus(''); } catch (error) { showStatus(toUserMessage(error, 'Не удалось записать действие.')); } }, onOpenEntrypointMenu: () => { openEntrypointMenuModal({ onShowHistory: openEntrypointHistory, }); }, onRepost: async (messageRef) => { try { await onRepost(messageRef); showStatus(''); } catch (error) { showStatus(toUserMessage(error, 'Не удалось сделать репост.')); } }, onAddPost: async (bodyText) => { try { await onAddPost(bodyText); showStatus(''); } catch (error) { throw new Error(toUserMessage(error, 'Не удалось добавить сообщение.')); } }, onShare: onShare, onEdit: async (messageRef, text) => { try { await onEditPost(messageRef, text); showStatus(''); } catch (error) { throw new Error(toUserMessage(error, 'Не удалось изменить сообщение.')); } }, onSubscribeChannel: async (event) => { animatePress(event?.currentTarget); try { const { login, storagePwd } = requireSigningSession(); if (!apiData.selector) throw new Error('Не удалось определить канал для подписки.'); const targetName = `${apiData.channel?.ownerName || 'user'}/${apiData.channel?.name || 'channel'}`; const ok = window.confirm(`Подписаться на канал ${targetName}?`); if (!ok) return; await authService.addBlockFollowChannel({ login, storagePwd, targetBlockchainName: apiData.selector.ownerBlockchainName, targetBlockNumber: apiData.selector.channelRootBlockNumber, targetBlockHashHex: apiData.selector.channelRootBlockHash, unfollow: false, }); const feed = await authService.listSubscriptionsFeed(login, 200); setChannelsFeed(feed, state.channelsIndex); softHaptic(15); showToast('Подписка на канал выполнена'); rerender(); } catch (error) { showStatus(toUserMessage(error, 'Не удалось подписаться на канал.')); } }, }); } catch (error) { skeleton.remove(); if (isChannelsDemoMode()) { renderDemoFallback(screen, navigate, error); return; } renderLoadError(screen, navigate, toUserMessage(error, 'Не удалось загрузить канал.'), rerender); } })(); screen.cleanup = () => { scrollToBottomControl.cleanup(); appScreen?.classList.remove('channels-scroll-clean'); if (typeof cleanupSeenTracking === 'function') cleanupSeenTracking(); }; return screen; }