aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: улучшить личные сообщения и поиск контактов

Browse Source
This commit is contained in:
AidarKC
2026-06-20 17:19:32 +04:00
parent 65fad993ad
commit 86eaf2139d
5 changed files with 188 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/js/pages/chat-view.js
+5 -1
View File
@@ -71,7 +71,7 @@ function openMessageActionsMenu({
const menuId = `chat-message-actions-menu-${Date.now()}`;
root.innerHTML = `
<div class="dm-floating-menu-layer" id="chat-message-actions-layer">
<div class="modal-card stack dm-dialog-card dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
<div class="modal-card stack dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-copy">Скопировать как текст</button>
<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-read">Прочесть</button>
${canEdit ? '<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-edit">Изменить</button>' : ''}
@@ -579,6 +579,10 @@ export function render({ navigate, route }) {
}
renderLog(log, chatId, { onOpenActions: handleOpenActions });
scrollToLatestMessage(log);
window.requestAnimationFrame(() => scrollToLatestMessage(log));
window.setTimeout(() => scrollToLatestMessage(log), 90);
window.setTimeout(() => scrollToLatestMessage(log), 220);
addAppLogEntry({
level: 'info',
source: 'outgoing-dm',
shine-UI/js/pages/contact-search-view.js
+47 -16
View File
@@ -61,9 +61,11 @@ function createSearchAvatar(login) {
export function render({ navigate }) {
const screen = document.createElement('section');
screen.className = 'stack dm-screen dm-search-screen';
let searchTimer = 0;
let searchSeq = 0;
const input = document.createElement('input');
input.className = 'input dm-input';
input.className = 'input dm-input contact-search-input';
input.type = 'text';
input.name = 'contact';
input.placeholder = 'Введите начало логина';
@@ -71,26 +73,28 @@ export function render({ navigate }) {
input.maxLength = 80;
const resultsCard = document.createElement('section');
resultsCard.className = 'card stack dm-dialog-card';
resultsCard.className = 'card stack contact-search-results-card';
resultsCard.hidden = true;
const status = document.createElement('p');
status.className = 'meta-muted';
status.className = 'contact-search-results-title';
const resultsList = document.createElement('div');
resultsList.className = 'stack dm-list';
const renderResults = (matches, query) => {
resultsList.innerHTML = '';
resultsCard.hidden = false;
if (!query.trim()) {
status.textContent = 'Введите начало логина пользователя.';
status.textContent = '';
resultsCard.hidden = true;
return;
}
resultsCard.hidden = false;
if (!matches.length) {
status.textContent = 'Совпадений не найдено.';
status.textContent = 'Найдено пользователей: 0';
return;
}
@@ -101,11 +105,10 @@ export function render({ navigate }) {
row.className = 'list-item dm-dialog-card';
const avatarEl = createSearchAvatar(login);
row.innerHTML = `
<div>
<strong>${login}</strong>
<p class="meta-muted" style="margin-top:4px;">Пользователь сервера</p>
<div class="contact-search-result-main">
<strong class="dm-row-title">${login}</strong>
</div>
<div class="meta-muted">Профиль</div>
<span class="dm-chevron" aria-hidden="true">›</span>
`;
row.prepend(avatarEl);
row.addEventListener('click', () => {
@@ -115,12 +118,9 @@ export function render({ navigate }) {
});
};
const searchButton = document.createElement('button');
searchButton.className = 'primary-btn dm-send-btn';
searchButton.type = 'button';
searchButton.textContent = 'Поиск';
searchButton.addEventListener('click', async () => {
const runSearch = async () => {
const query = input.value.trim();
const seq = ++searchSeq;
if (!query) {
renderResults([], '');
return;
@@ -128,11 +128,38 @@ export function render({ navigate }) {
try {
const logins = await authService.searchUsers(query);
if (seq !== searchSeq) return;
renderResults((logins || []).slice(0, 5), query);
} catch (e) {
if (seq !== searchSeq) return;
status.textContent = `Ошибка поиска: ${e.message || 'unknown'}`;
resultsCard.hidden = false;
resultsList.innerHTML = '';
}
};
const scheduleSearch = () => {
if (searchTimer) window.clearTimeout(searchTimer);
searchTimer = window.setTimeout(() => {
searchTimer = 0;
void runSearch();
}, 2000);
};
const searchButton = document.createElement('button');
searchButton.className = 'primary-btn dm-send-btn';
searchButton.type = 'button';
searchButton.textContent = 'Поиск';
searchButton.addEventListener('click', async () => {
if (searchTimer) {
window.clearTimeout(searchTimer);
searchTimer = 0;
}
await runSearch();
});
input.addEventListener('input', () => {
scheduleSearch();
});
const controls = document.createElement('div');
@@ -140,7 +167,7 @@ export function render({ navigate }) {
controls.append(searchButton);
const formCard = document.createElement('section');
formCard.className = 'card stack dm-dialog-card';
formCard.className = 'card stack contact-search-form-card';
formCard.append(input, controls);
resultsCard.append(status, resultsList);
@@ -154,5 +181,9 @@ export function render({ navigate }) {
resultsCard,
);
screen.cleanup = () => {
if (searchTimer) window.clearTimeout(searchTimer);
};
return screen;
}
shine-UI/js/pages/messages-list.js
+33 -16
View File
@@ -1,4 +1,3 @@
import { renderHeader } from '../components/header.js';
import { directMessages } from '../mock-data.js';
import {
getChatMessages,
@@ -66,7 +65,7 @@ function createDmAvatar(login) {
function formatChatRowTime(ts) {
const value = Number(ts || 0);
if (!Number.isFinite(value) || value <= 0) return '-';
if (!Number.isFinite(value) || value <= 0) return '';
return new Intl.DateTimeFormat('ru-RU', {
day: '2-digit',
month: '2-digit',
@@ -75,17 +74,29 @@ function formatChatRowTime(ts) {
}).format(new Date(value));
}
const SVG_CHEVRON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>';
export function render({ navigate }) {
const screen = document.createElement('section');
screen.className = 'stack dm-screen dm-list-screen';
const login = String(state.session.login || '').trim();
screen.append(
renderHeader({
title: 'Личные сообщения',
leftLabel: String(state.session.login || '').trim(),
rightActions: [{ label: '+', onClick: () => navigate('contact-search-view') }],
}),
);
const head = document.createElement('header');
head.className = 'dm-head';
head.innerHTML = `
<div class="dm-head-brand">
<div class="dm-head-hex">${(login[0] || 'A').toUpperCase()}</div>
<div class="dm-head-id">
<span class="dm-head-name">${login}</span>
</div>
</div>
<h1 class="dm-head-title">Контакты</h1>
<button type="button" class="dm-head-plus" aria-label="Новый диалог">+</button>
`;
head.querySelector('.dm-head-plus')?.addEventListener('click', () => navigate('contact-search-view'));
const divider = document.createElement('div');
divider.className = 'dm-divider';
const list = document.createElement('div');
list.className = 'stack dm-list';
@@ -95,20 +106,26 @@ export function render({ navigate }) {
row.className = 'list-item dm-dialog-card';
const avatarEl = createDmAvatar(item.id);
avatarEl.classList.add('avatar');
const avatarWrap = document.createElement('div');
avatarWrap.className = 'dm-av dm-av--default';
avatarWrap.append(avatarEl);
row.innerHTML = `
<div class="dm-row-main">
<div class="dm-row-title-wrap">
<div class="dm-row-titleline dm-row-titlewrap">
<strong class="dm-row-title">${item.name}</strong>
${item.notInContacts ? '<span class="meta-muted">не в контактах</span>' : ''}
${item.notInContacts ? '<span class="dm-contact-note">не в контактах</span>' : ''}
</div>
<p class="meta-muted dm-row-last-message">${item.lastMessage}</p>
<p class="dm-row-last-message">${item.lastMessage}</p>
</div>
<div class="dm-row-meta-col">
${item.unread ? `<span class="unread">${item.unread}</span>` : '<span></span>'}
<span class="meta-muted dm-row-time">${item.time}</span>
${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
<div class="dm-row-meta-line">
${item.time ? `<span class="dm-row-time">${item.time}</span>` : '<span class="dm-row-time dm-row-time--empty"></span>'}
<span class="dm-chevron">${SVG_CHEVRON}</span>
</div>
</div>
`;
row.prepend(avatarEl);
row.prepend(avatarWrap);
row.addEventListener('click', () => navigate(`chat-view/${encodeURIComponent(item.id)}`));
return row;
}
@@ -206,7 +223,7 @@ export function render({ navigate }) {
}
}
screen.append(list);
screen.append(head, divider, list);
loadList();
return screen;
}