UI: обновить экран канала и треда

This commit is contained in:
AidarKC
2026-08-09 21:26:08 +04:00
parent 735bb55b78
commit 3552e05e4c
5 changed files with 99 additions and 26 deletions
+21 -6
View File
@@ -209,6 +209,24 @@ function resolveChannelDisplayName(channelSelector) {
return `${found.channel?.ownerLogin || 'неизвестно'}/${found.channel?.channelName || 'канал'}`;
}
function resolveChannelHeadingFromNode(node) {
const info = node?.channelInfo;
const ownerBch = String(info?.ownerBlockchainName || '').trim();
const rootBlockNumber = Number(info?.channelRoot?.blockNumber);
if (!ownerBch || !Number.isFinite(rootBlockNumber) || rootBlockNumber < 0) return '';
if (rootBlockNumber === 0) return 'История пользователя';
const label = resolveChannelDisplayName({
ownerBlockchainName: ownerBch,
channelRootBlockNumber: rootBlockNumber,
channelRootBlockHash: '0',
});
const slashIndex = label.indexOf('/');
const channelName = slashIndex >= 0 ? label.slice(slashIndex + 1).trim() : label.trim();
if (!channelName) return 'Сообщение в канале';
return `Сообщение в канале ${channelName}`;
}
function extractChannelContextFromThreadPayload(payload) {
const focusInfo = payload?.focus?.channelInfo;
if (focusInfo?.ownerBlockchainName && focusInfo?.channelRoot?.blockNumber != null) {
@@ -706,7 +724,7 @@ function renderNodeCard(node, heading, handlers, localNumber) {
const isOwnMessage = String(node?.authorLogin || '').trim().toLowerCase() === String(state.session.login || '').trim().toLowerCase();
const isChannelPost = Number(node?.channelInfo?.channelRoot?.blockNumber) >= 0;
const msgSubType = Number(node?.msgSubType || 0);
const repostTarget = msgSubType === 30 ? buildRepostTargetFromNode(node) : null;
const repostTarget = msgSubType === 50 ? buildRepostTargetFromNode(node) : null;
const parsedText = parseMessageAttachments(text);
const headingText = String(heading || '').trim();
@@ -1326,12 +1344,9 @@ export function render({ navigate, route }) {
if (ancestors.length) {
ancestorsWrap = document.createElement('div');
ancestorsWrap.className = 'stack thread-block thread-block--ancestors';
const title = document.createElement('h3');
title.className = 'section-title';
title.textContent = 'История выше (на что это ответ)';
ancestorsWrap.append(title);
ancestors.forEach((node, index) => {
ancestorsWrap.append(renderNodeCard(node, `Предок ${index + 1}`, handlers, nextNumber()));
const heading = index === 0 ? resolveChannelHeadingFromNode(node) : '';
ancestorsWrap.append(renderNodeCard(node, heading, handlers, nextNumber()));
});
}
+30 -11
View File
@@ -37,6 +37,7 @@ import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
export const pageMeta = { id: 'channel-view', title: 'Канал' };
const CHANNEL_TYPE_STORIES = 0;
const CHANNEL_TYPE_PERSONAL = 100;
const MSG_SUBTYPE_TEXT_REPOST = 50;
const pendingReactionActions = new Set();
const pendingScrollByRoute = new Map();
@@ -303,7 +304,19 @@ function createChannelAvatarElement(channel, size = 72) {
return wrap;
}
function openChannelMetaDetailsModal({ title = 'Данные канала', channel = {}, canEdit = false, onEdit = null } = {}) {
function openChannelMetaDetailsModal({
title = 'Данные канала',
channel = {},
canEdit = false,
onEdit = null,
changedAtMs = 0,
} = {}) {
const avatarState = String(channel.avaAr || '').trim()
? 'Установлен'
: 'Не установлен';
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">
@@ -313,9 +326,14 @@ function openChannelMetaDetailsModal({ title = 'Данные канала', chan
${canEdit ? '<button class="secondary-btn channel-profile-edit-btn" id="about-channel-edit" type="button" title="Изменить">✏️</button>' : ''}
</div>
<div id="about-channel-avatar-slot"></div>
<p><strong>${escapeHtml(channel.displayTitle || channel.displayName || channel.name)}</strong></p>
<p class="meta-muted">${escapeHtml(`${channel.ownerName || 'автор'} / ${channel.name || 'channel'}`)}</p>
<p class="meta-muted">${escapeHtml(channel.description || 'Описание не задано.')}</p>
<div class="channel-meta-details-grid">
<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><span>${escapeHtml(channel.description || 'Описание не задано.')}</span>
<span>Аватар</span><span>${escapeHtml(avatarState)}</span>
</div>
<button class="secondary-btn" id="about-channel-close" type="button">Закрыть</button>
</div>
</div>
@@ -337,6 +355,7 @@ function openAboutChannelModal(channel, options = {}) {
channel,
canEdit: options.canEdit === true,
onEdit: options.onEdit,
changedAtMs: Number(channel?.metaUpdatedAtMs || 0),
});
}
@@ -1181,15 +1200,14 @@ function renderChannelMetaEventCard(event) {
const card = document.createElement('article');
card.className = 'card channel-system-event-card';
const label = event.kind === 'created'
? `Создан канал ${event.title || event.name || ''}`.trim()
: 'Изменён профиль канала';
? 'Создан канал'
: 'Изменено описание канала';
card.innerHTML = `
<span>${escapeHtml(label)}</span>
<small>${escapeHtml(event.timestampMs ? new Date(event.timestampMs).toLocaleString('ru-RU') : '')}</small>
<span class="channel-system-event-card__label">${escapeHtml(label)}</span>
`;
card.addEventListener('click', () => {
openChannelMetaDetailsModal({
title: event.kind === 'created' ? 'Канал создан' : 'Профиль канала изменён',
title: label,
channel: {
name: event.name,
displayTitle: event.title,
@@ -1199,6 +1217,7 @@ function renderChannelMetaEventCard(event) {
avaSize: event.avaSize,
ownerName: event.ownerName,
},
changedAtMs: event.timestampMs,
});
});
return card;
@@ -1377,7 +1396,7 @@ function renderPostCard(post, {
});
actions.append(shareButton);
if (post.msgSubType === 30 && post.targetRef?.blockchainName && Number.isFinite(post.targetRef?.blockNumber) && post.targetRef?.blockHash) {
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';
@@ -1797,7 +1816,7 @@ export function render({ navigate, route }) {
channelHeaderButton.onclick = (event) => {
animatePress(event.currentTarget);
openAboutChannelModal(apiData.channel, {
canEdit: apiData?.isOwnChannel === true,
canEdit: apiData?.isOwnChannel === true && !isStoriesChannel(apiData?.channel),
onEdit: () => openEditChannelModal({
channel: apiData.channel,
onSave: onEditChannelMeta,