diff --git a/Dev_Docs/Pending_Features/2026-05-19_0046_навигация-по-тредам-и-история-сообщения.md b/Dev_Docs/Pending_Features/2026-05-19_0046_навигация-по-тредам-и-история-сообщения.md new file mode 100644 index 0000000..c0a0365 --- /dev/null +++ b/Dev_Docs/Pending_Features/2026-05-19_0046_навигация-по-тредам-и-история-сообщения.md @@ -0,0 +1,19 @@ +# Навигация по тредам и история сообщения + +Статус: `pending` + +## Краткое описание +В экране треда добавлен явный переход `🧵 В тред` для каждого сообщения (включая ответы), чтобы можно было углубляться в любую ветку обсуждения. +Также уточнены заголовки блоков: сверху история сообщений, отдельно текущее сообщение. + +## Что проверять +1. Открыть любой канал и перейти в тред сообщения. +2. Нажать `🧵 В тред` у одного из ответов. +3. Убедиться, что открывается тред выбранного ответа, а не исходного сообщения. +4. Проверить, что в новом треде сверху показывается блок истории (`История выше...`), затем блок `Текущее сообщение`, затем `Ответы`. +5. Проверить на мобильной ширине, что кнопки действий в карточке не ломают верстку. + +## Ожидаемый результат +- Переход в тред ответа работает стабильно для всех узлов дерева. +- Пользователь видит структуру треда в логичном порядке: предки → текущее сообщение → потомки. +- UI остаётся читаемым на мобильных экранах. diff --git a/VERSION.properties b/VERSION.properties index 2d94d32..4990d6e 100644 --- a/VERSION.properties +++ b/VERSION.properties @@ -1,2 +1,2 @@ -client.version=1.2.62 -server.version=1.2.56 +client.version=1.2.63 +server.version=1.2.57 diff --git a/shine-UI/js/pages/channel-thread-view.js b/shine-UI/js/pages/channel-thread-view.js index b55b047..45977fc 100644 --- a/shine-UI/js/pages/channel-thread-view.js +++ b/shine-UI/js/pages/channel-thread-view.js @@ -391,7 +391,17 @@ function renderNodeCard(node, heading, handlers, localNumber) { await handlers.onShare(target); }); - actions.append(likeButton, replyButton, changedButton, shareButton); + const openThreadButton = document.createElement('button'); + openThreadButton.type = 'button'; + openThreadButton.className = 'secondary-btn thread-open-btn'; + openThreadButton.textContent = '🧵 В тред'; + openThreadButton.addEventListener('click', (event) => { + event.stopPropagation(); + animatePress(event.currentTarget); + handlers.onOpenThread(target); + }); + + actions.append(likeButton, replyButton, changedButton, shareButton, openThreadButton); card.append(actions); return card; } @@ -559,6 +569,14 @@ export function render({ navigate, route }) { showStatus(toUserMessage(error, 'Не удалось транслировать ссылку.')); } }, + onOpenThread: (target) => { + const routePath = buildThreadRouteFromTarget(target, selector); + if (!routePath) { + showStatus('Не удалось определить путь до треда.'); + return; + } + navigate(routePath); + }, onActionError: (error, action) => { const fallback = action === 'unlike' ? 'Не удалось убрать лайк.' @@ -683,7 +701,7 @@ export function render({ navigate, route }) { ancestorsWrap.className = 'stack thread-block thread-block--ancestors'; const title = document.createElement('h3'); title.className = 'section-title'; - title.textContent = 'Предыдущие сообщения'; + title.textContent = 'История выше (на что это ответ)'; ancestorsWrap.append(title); ancestors.forEach((node, index) => { ancestorsWrap.append(renderNodeCard(node, `Предок ${index + 1}`, handlers, nextNumber())); @@ -694,6 +712,10 @@ export function render({ navigate, route }) { if (focus) { const focusWrap = document.createElement('div'); focusWrap.className = 'stack thread-block thread-block--focus'; + const focusTitle = document.createElement('h3'); + focusTitle.className = 'section-title'; + focusTitle.textContent = 'Текущее сообщение'; + focusWrap.append(focusTitle); focusWrap.append(renderNodeCard(focus, '', handlers, nextNumber())); screen.append(focusWrap); } diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css index 330bec3..4307b2a 100644 --- a/shine-UI/styles/components.css +++ b/shine-UI/styles/components.css @@ -2356,7 +2356,7 @@ textarea.input { .thread-node-actions { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @@ -2439,6 +2439,10 @@ textarea.input { color: rgba(255, 255, 255, 0.55); } +.thread-open-btn { + color: rgba(255, 255, 255, 0.62); +} + @media (max-width: 430px) { .channels-screen .page-title { font-size: 26px;