UI: улучшить превью и файлы вложений

This commit is contained in:
AidarKC
2026-07-31 17:22:48 +04:00
parent 05bd9f57d6
commit d640dd66e2
5 changed files with 37 additions and 21 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
client.version=1.4.7
client.version=1.4.8
server.version=1.4.0
+4
View File
@@ -1,5 +1,9 @@
# История изменений документации блокчейна
## 2026-07-31 17:22:07 +0400
- Базовый коммит-ориентир: `05bd9f5`.
- Уточнён UI вложений: превью последнего сообщения в списке каналов скрывает технические attach-блоки, карусель не показывает неактивные стрелки на краях, обычный файл отображается компактной кликабельной полоской без `txId`; формат attach-блока не изменён.
## 2026-07-31 17:13:26 +0400
- Базовый коммит-ориентир: `60ab476`.
- Уточнён UI журнала загрузок Arweave: статус доступности перенесён в начало второй строки плитки, верхняя панель закреплена как fixed-полоса вне прокрутки, в меню добавлен пункт `Добавить файл`, меню закрывается при клике вне него; формат attach-блока не изменён.
+8 -2
View File
@@ -1,6 +1,7 @@
import { channels as mockChannels } from '../mock-data.js';
import { authService, setChannelsFeed, state } from '../state.js';
import { toUserMessage } from '../services/ui-error-texts.js';
import { parseMessageAttachments } from '../services/attachment-format.js';
import {
animatePress,
createSkeletonCard,
@@ -20,6 +21,11 @@ const MENU_OVERLAY_ID = 'channels-context-menu-overlay';
const CHANNEL_TYPE_STORIES = 0;
const CHANNEL_TYPE_PERSONAL = 100;
function cleanChannelMessagePreview(text) {
const parsed = parseMessageAttachments(text);
return String(parsed.text || '').trim() || (parsed.attachments.length ? 'Вложение' : 'Ждем ваших начинаний');
}
function isChannelsDemoMode() {
try {
const qs = new URLSearchParams(window.location.search);
@@ -610,7 +616,7 @@ function mapMockGroups() {
ownerBlockchainName: String(channel.ownerName || ''),
channelName: String(channel.channelName || channel.title || channel.id),
}),
messagePreview: channel.lastMessage || 'Ждем ваших начинаний',
messagePreview: cleanChannelMessagePreview(channel.lastMessage),
isSubscribed: channel.kind !== 'own' && channel.kind !== 'own-personal',
isOwnChannel: channel.kind === 'own' || channel.kind === 'own-personal',
notificationsEnabled: false,
@@ -665,7 +671,7 @@ function mapApiChannelRow(summary, bucketKey, idx, index, notificationsState) {
channelDescription,
channelTypeCode,
channelTypeVersion,
messagePreview: summary?.lastMessage?.text || 'Ждем ваших начинаний',
messagePreview: cleanChannelMessagePreview(summary?.lastMessage?.text),
messagesCount: Number(summary?.messagesCount || 0),
unreadCount: Number(summary?.unreadCount || 0),
lastMessageAt: Number(summary?.lastMessage?.createdAtMs || 0),
+4 -6
View File
@@ -206,17 +206,16 @@ function replaceWithUnavailable(slide, messageTimestampMs) {
}
function createFileCard({ item, url, messageTimestampMs, slide }) {
const ext = getAttachmentExtension(item.name).toUpperCase() || 'FILE';
const card = document.createElement('div');
card.className = 'message-attachment-file-card';
card.role = 'button';
card.tabIndex = 0;
card.title = 'Скачать файл';
card.innerHTML = `
<div class="message-attachment-file-ext">${escapeHtml(ext)}</div>
<div class="message-attachment-file-ext">Файл</div>
<div class="message-attachment-file-main">
<div class="message-attachment-name">${escapeHtml(item.name)}</div>
<div class="message-attachment-meta">${escapeHtml(formatBytes(item.size))} · ${escapeHtml(item.ar)}</div>
<div class="message-attachment-meta">${escapeHtml(formatBytes(item.size))}</div>
</div>
`;
const openFile = () => window.open(url, '_blank', 'noopener');
@@ -229,7 +228,6 @@ function createFileCard({ item, url, messageTimestampMs, slide }) {
event.preventDefault();
openFile();
});
card.append(createDownloadLink(url));
void fetch(url, { method: 'HEAD', cache: 'no-store' })
.then((response) => {
if (!response.ok) replaceWithUnavailable(slide, messageTimestampMs);
@@ -327,8 +325,8 @@ export function createAttachmentCarouselElement(attachments = [], { gateway = ''
slide.append(kind === 'file'
? createFileCard({ item, url, messageTimestampMs, slide })
: createMediaSlide({ item, url, kind, messageTimestampMs, slide }));
prev.disabled = index <= 0;
next.disabled = index >= items.length - 1;
prev.hidden = items.length <= 1 || index <= 0;
next.hidden = items.length <= 1 || index >= items.length - 1;
counter.textContent = `${index + 1} из ${items.length}`;
};
+20 -12
View File
@@ -2301,34 +2301,42 @@ textarea.input {
.message-attachment-file-card {
align-items: center;
background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(239, 246, 255, 0.95));
color: #0f172a;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.94));
border: 1px solid rgba(20, 184, 166, 0.28);
border-radius: 0.8rem;
color: #f8fafc;
cursor: pointer;
display: grid;
gap: 0.7rem;
grid-template-columns: auto minmax(0, 1fr) auto;
padding: 1rem;
gap: 0.55rem;
grid-template-columns: auto minmax(0, 1fr);
min-height: 3.25rem;
padding: 0.55rem 0.7rem;
}
.message-attachment-file-ext {
align-items: center;
background: #0f766e;
border-radius: 0.9rem;
background: rgba(20, 184, 166, 0.95);
border-radius: 999px;
color: #fff;
display: inline-flex;
font-size: 0.8rem;
font-size: 0.72rem;
font-weight: 800;
height: 3rem;
height: 1.7rem;
justify-content: center;
max-width: 4rem;
min-width: 3rem;
padding: 0 0.45rem;
min-width: 3.25rem;
padding: 0 0.55rem;
}
.message-attachment-file-main {
display: grid;
gap: 0.08rem;
min-width: 0;
}
.message-attachment-file-main .message-attachment-meta {
color: #cbd5e1;
}
.message-attachment-unavailable {
align-items: center;
background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(255, 247, 237, 0.96));