UI: упростить профиль и обновить UX чатов/шапок

This commit is contained in:
AidarKC
2026-05-19 15:34:46 +03:00
parent 83892d5093
commit c6d310184b
8 changed files with 414 additions and 131 deletions
+3 -43
View File
@@ -38,7 +38,7 @@ export function render({ navigate }) {
const topActions = document.createElement('div');
topActions.className = 'profile-top-actions';
topActions.innerHTML = `
<button class="ghost-btn profile-top-action-btn" type="button" data-top-action="edit">Изменить профиль</button>
<button class="ghost-btn profile-top-action-btn" type="button" data-top-action="edit">Редактировать профиль</button>
<button class="ghost-btn profile-top-action-btn" type="button" data-top-action="wallet">Кошелёк</button>
<button class="ghost-btn profile-top-action-btn" type="button" data-top-action="settings">Настройки</button>
`;
@@ -61,13 +61,6 @@ export function render({ navigate }) {
</div>
`;
const statusRow = document.createElement('div');
statusRow.className = 'row profile-status-row';
statusRow.innerHTML = `
<div class="status-line" data-profile-status-line="true">Загрузка параметров...</div>
<button class="ghost-btn profile-refresh-btn" type="button" data-reload="true">Обновить</button>
`;
const badgesRow = document.createElement('div');
badgesRow.className = 'row';
badgesRow.innerHTML = `
@@ -78,8 +71,6 @@ export function render({ navigate }) {
const listWrap = document.createElement('div');
listWrap.className = 'stack profile-param-list';
const reloadBtn = statusRow.querySelector('[data-reload="true"]');
const statusLineEl = statusRow.querySelector('[data-profile-status-line="true"]');
const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
const identityEl = topRow.querySelector('[data-profile-identity="true"]');
@@ -155,10 +146,6 @@ export function render({ navigate }) {
async function refreshProfileSnapshot() {
try {
if (statusLineEl instanceof HTMLElement) {
statusLineEl.className = 'status-line';
statusLineEl.textContent = 'Загрузка параметров...';
}
const snapshot = await loadProfileSnapshot(login);
currentFields = Array.isArray(snapshot.fields) ? snapshot.fields : [];
currentToggles = Array.isArray(snapshot.toggles) ? snapshot.toggles : [];
@@ -168,39 +155,12 @@ export function render({ navigate }) {
updateAvatarUi();
updateTogglesUi();
renderFields(currentFields);
if (statusLineEl instanceof HTMLElement) {
statusLineEl.className = 'status-line is-available';
statusLineEl.textContent = 'Профиль обновлён.';
}
} catch (error) {
if (statusLineEl instanceof HTMLElement) {
statusLineEl.className = 'status-line is-unavailable';
statusLineEl.textContent = `Ошибка загрузки профиля: ${error?.message || 'unknown'}`;
}
// ignore status row in profile-view
}
}
const showToggleInfo = (toggleKey) => {
const item = currentToggles.find((entry) => entry.key === toggleKey);
const isEnabled = Boolean(item?.enabled);
if (toggleKey === 'official') {
if (statusLineEl instanceof HTMLElement) statusLineEl.className = 'status-line is-available';
if (statusLineEl instanceof HTMLElement) statusLineEl.textContent = isEnabled
? 'Аккаунт является официальным.'
: 'Аккаунт не является официальным.';
return;
}
if (statusLineEl instanceof HTMLElement) statusLineEl.className = 'status-line is-available';
if (statusLineEl instanceof HTMLElement) statusLineEl.textContent = isEnabled
? 'Аккаунт является сияющим.'
: 'Аккаунт не является сияющим.';
};
reloadBtn?.addEventListener('click', refreshProfileSnapshot);
officialBtn?.addEventListener('click', () => showToggleInfo('official'));
shineBtn?.addEventListener('click', () => showToggleInfo('shine'));
card.append(topRow, badgesRow, listWrap, statusRow);
card.append(topRow, badgesRow, listWrap);
screen.append(card);
updateAvatarUi();