UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра

- styles/main.css: роли цветов (по умолчанию «Индиго»), шкала отступов/скруглений/шрифтов, цвета отношений для обеих тем; жёсткие цвета в стилях заменены на роли. - Палитра: пресеты и личные правки, «Оформление» Авто/День/Ночь, долгое нажатие — редактор цветов с экспортом/импортом. - Каналы: пузыри постов автора, плашки дней, строка «Написать в канал…», «О канале», создание канала с адресом из названия; лента открывается на свежих постах. - Чаты: плоский список, чипы-фильтры, пузыри, плашки дней; нижняя панель скрыта в переписке. - Корневые разделы — единая шапка; профиль и чужой профиль — общая карточка; настройки, кошелёк, сеансы — меню-списки. - Нижняя панель: иконки без подписей, бейджи на иконках. - confirmDialog вместо window.confirm/alert; на телефоне диалоги — шторки снизу. - docs/UI-Design/ISSUES-for-dev.md — найденные ошибки сервера/UI. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 10:05:26 +03:00
parent 6e5b57fd7c
commit f8900e531a
94 changed files with 3337 additions and 2432 deletions
@@ -434,20 +434,23 @@ export function openArweaveAttachmentManager({
      const solBalance = balanceInfo ? `${escapeHtml(String(balanceInfo.solBalance ?? 0))} SOL` : '—';
      const uploadPrice = priceInfo ? `${formatTurboCredits(priceInfo.credits, 6)} credits` : '—';
      const fileSize = selectedFile ? formatBytes(selectedFile.size) : '—';
-      const freeHint = selectedFile
-        ? (combinedUploadSize() <= getFreeTurboUploadBytesLimit() ? 'Да, бесплатно через Turbo' : 'Нет, нужен Turbo balance')
-        : `До ${formatBytes(getFreeTurboUploadBytesLimit())} бесплатно`;
-      const freeBadge = priceInfo?.isFree
-        ? ' <span style="color:#15803d;">(пока файлы до 100 KB бесплатно)</span>'
+      const isFreeSize = selectedFile && combinedUploadSize() <= getFreeTurboUploadBytesLimit();
+      const summary = selectedFile
+        ? `Размер ${escapeHtml(fileSize)} · ${isFreeSize
+          ? '<span class="ar-attachment-ok">бесплатно через Turbo</span>'
+          : `нужен баланс Turbo: ${escapeHtml(uploadPrice)}`}`
        : '';
      mainMetaEl.innerHTML = `
-        <div>Turbo-адрес: ${escapeHtml(shortAddress(turboAddress || '—'))}</div>
-        <div>Turbo balance: ${escapeHtml(turboCredits)}</div>
-        <div>SOL на этом ключе: ${solBalance}</div>
-        <div>Размер файла: ${escapeHtml(fileSize)}</div>
-        <div>SHA-256: ${escapeHtml(selectedSha256 || '—')}</div>
-        <div>Цена Turbo: ${escapeHtml(uploadPrice)}${freeBadge}</div>
-        <div>До ${escapeHtml(formatBytes(getFreeTurboUploadBytesLimit()))} бесплатно: ${escapeHtml(freeHint)}</div>
+        ${summary ? `<div class="ar-attachment-summary">${summary}</div>` : ''}
+        <details class="ar-attachment-details">
+          <summary>Подробнее</summary>
+          <div>Turbo-адрес: ${escapeHtml(shortAddress(turboAddress || '—'))}</div>
+          <div>Баланс Turbo: ${escapeHtml(turboCredits)}</div>
+          <div>SOL на этом ключе: ${solBalance}</div>
+          <div>SHA-256: ${escapeHtml(selectedSha256 || '—')}</div>
+          <div>Цена Turbo: ${escapeHtml(uploadPrice)}</div>
+          <div>Бесплатно до ${escapeHtml(formatBytes(getFreeTurboUploadBytesLimit()))}</div>
+        </details>
      `;
      previewMetaEl.innerHTML = '';
      if (selectedPreviewEnabled && selectedPreviewFile) {
@@ -628,28 +631,40 @@ export function openArweaveAttachmentManager({
      root.innerHTML = `
        <div class="modal" data-ar-attach-modal="true">
          <div class="modal-card stack ar-attachment-manager-card">
-            <h3 class="modal-title">${escapeHtml(titleText)}</h3>
-            <p class="meta-muted" style="margin-top:-6px; color:#15803d;">Маленькие файлы и аватары через Turbo пока загружаются бесплатно.</p>
-            <div class="form-actions-grid">
-              <button class="${turboMode ? 'secondary-btn' : 'primary-btn'}" type="button" data-action="switch-arweave">Загрузка используя свой Arweave кошелёк</button>
-              <button class="${turboMode ? 'primary-btn' : 'secondary-btn'}" type="button" data-action="switch-turbo">Загрузить через Turbo</button>
-              ${canShowHistory ? `<button class="secondary-btn" type="button" data-action="history-top">${isAvatarMode ? 'Выбрать из журнала' : 'Использовать журнал загрузок'}</button>` : ''}
-              ${canShowExisting ? `<button class="secondary-btn" type="button" data-action="existing-top">${isAvatarMode ? 'Ввести tx id' : 'Использовать существующий в Arweave файл'}</button>` : ''}
+            <div class="ar-attachment-manager-head">
+              <h3 class="modal-title">${escapeHtml(titleText)}</h3>
+              <button class="icon-btn ar-attachment-manager-close" type="button" data-action="cancel" aria-label="Закрыть">✕</button>
+            </div>
+            <div class="tabs tabs--auto" role="radiogroup" aria-label="Способ загрузки">
+              <button class="tab-btn" role="radio" aria-checked="${turboMode}" type="button" data-action="switch-turbo">Turbo</button>
+              <button class="tab-btn" role="radio" aria-checked="${!turboMode}" type="button" data-action="switch-arweave">Свой кошелёк Arweave</button>
            </div>
            ${turboMode
              ? `
-                <label class="meta-muted" for="turbo-key-source">Подписывать и пополнять через</label>
-                <select class="input ar-attachment-wallet-select" id="turbo-key-source"></select>
-                <p class="meta-muted">Turbo использует Solana-ключ пользователя. Маленькие файлы и аватары пока бесплатно. Если файл больше, пополните Turbo со своего SOL-кошелька.</p>
+                <p class="ar-attachment-note">Маленькие файлы и аватары через Turbo пока загружаются бесплатно. Для больших файлов пополните Turbo со своего SOL-кошелька.</p>
+                <div class="form-field">
+                  <label for="turbo-key-source">Подписывать и пополнять через</label>
+                  <select class="select ar-attachment-wallet-select" id="turbo-key-source"></select>
+                </div>
              `
              : `
-                <label class="meta-muted" for="ar-attach-wallet">Кошелёк оплаты Arweave</label>
-                <select class="input ar-attachment-wallet-select" id="ar-attach-wallet"></select>
-                <button class="ghost-btn" type="button" data-action="add-wallet">Добавить кошелёк</button>
-                ${isAvatarMode ? '<p class="meta-muted">Выберите изображение. Перед загрузкой оно будет сжато до 512×512 и сохранено в истории как аватар.</p>' : (historyOnly ? '' : '<p class="meta-muted">Для надёжности лучше сначала загрузить файл в Arweave, дождаться доступности в журнале, а потом добавить его из истории загрузок.</p>')}
+                <div class="form-field">
+                  <label for="ar-attach-wallet">Кошелёк оплаты Arweave</label>
+                  <select class="select ar-attachment-wallet-select" id="ar-attach-wallet"></select>
+                  <button class="text-btn ar-attachment-link" type="button" data-action="add-wallet">+ Добавить кошелёк</button>
+                </div>
+                ${isAvatarMode ? '<p class="ar-attachment-note">Выберите изображение. Перед загрузкой оно будет сжато до 512×512 и сохранено в истории как аватар.</p>' : (historyOnly ? '' : '<p class="ar-attachment-note">Для надёжности лучше сначала загрузить файл в Arweave, дождаться доступности в журнале, а потом добавить его из истории загрузок.</p>')}
              `}
-            ${fixedFile ? '' : '<label class="meta-muted" for="ar-attach-file">Файл для загрузки</label>'}
-            ${fixedFile ? '' : `<input class="input" id="ar-attach-file" type="file" ${isAvatarMode ? 'accept="image/*"' : ''} />`}
+            ${canShowHistory || canShowExisting ? `
+              <div class="ar-attachment-alt-sources">
+                ${canShowHistory ? `<button class="text-btn ar-attachment-link" type="button" data-action="history-top">${isAvatarMode ? 'Выбрать из журнала' : 'Из журнала загрузок'}</button>` : ''}
+                ${canShowExisting ? `<button class="text-btn ar-attachment-link" type="button" data-action="existing-top">${isAvatarMode ? 'Ввести tx id' : 'Уже есть в Arweave (tx id)'}</button>` : ''}
+              </div>` : ''}
+            ${fixedFile ? '' : `<label class="ar-attachment-file-picker">
+              <input class="ar-attachment-file-input" id="ar-attach-file" type="file" ${isAvatarMode ? 'accept="image/*"' : ''} />
+              <span class="ar-attachment-file-btn">Выбрать файл</span>
+              <span class="ar-attachment-file-name" data-file-name="true">Файл не выбран</span>
+            </label>`}
            <div class="ar-attachment-meta" data-meta-main="true"></div>
            <label class="meta-muted" data-preview-option="true" hidden>
              <input type="checkbox" data-preview-toggle="true" />
@@ -658,10 +673,9 @@ export function openArweaveAttachmentManager({
            <div class="ar-attachment-meta" data-meta-preview="true"></div>
            <p class="meta-muted inline-error" data-error="true"></p>
            <div class="form-actions-grid">
-              ${turboMode ? '<button class="secondary-btn" type="button" data-action="topup">Пополнить Turbo</button>' : ''}
+              ${turboMode ? '<button class="secondary-btn" type="button" data-action="topup">Пополнить Turbo</button>' : '<button class="secondary-btn" type="button" data-action="cancel">Отмена</button>'}
              <button class="primary-btn" type="button" data-action="upload" disabled>${escapeHtml(uploadText)}</button>
            </div>
-            <button class="secondary-btn" type="button" data-action="cancel">Отмена</button>
          </div>
        </div>
      `;
@@ -734,7 +748,7 @@ export function openArweaveAttachmentManager({
        }
      }

-      root.querySelector('[data-action="cancel"]')?.addEventListener('click', () => close(resolve, null));
+      root.querySelectorAll('[data-action="cancel"]').forEach((btn) => btn.addEventListener('click', () => close(resolve, null)));
      root.querySelector('[data-action="topup"]')?.addEventListener('click', async () => {
        await promptTurboTopUp(mainMetaEl, previewMetaEl, errorEl);
        if (turboMode && selectedFile && selectedSha256) {
@@ -745,6 +759,10 @@ export function openArweaveAttachmentManager({
        root.querySelector('[data-action="add-wallet"]')?.addEventListener('click', showAddWallet);
      }

+      fileEl?.addEventListener('change', () => {
+        const nameEl = root.querySelector('[data-file-name="true"]');
+        if (nameEl) nameEl.textContent = fileEl.files?.[0]?.name || 'Файл не выбран';
+      });
      fileEl?.addEventListener('change', async () => {
        selectedFile = fileEl.files?.[0] || null;
        selectedSha256 = '';
@@ -1041,7 +1059,7 @@ export function openArweaveAttachmentManager({
                      <span>${escapeHtml(formatArweaveHistoryTime(item.uploadedAtMs))}</span>
                      ${hasAttachmentPreview(item) ? '<span class="ar-attachment-placement-flag">С превью</span>' : ''}
                      <span class="ar-attachment-status ar-attachment-status--pending" data-status="${index}">Проверяем...</span>
-                      ${item.pendingPlacement ? '<span class="ar-attachment-placement-flag">Не добавлен в SHiNE</span>' : ''}
+                      ${item.pendingPlacement ? '<span class="ar-attachment-placement-flag">Ещё не прикреплён</span>' : ''}
                    </div>
                    <div class="mono-cell ar-attachment-history-txid">${escapeHtml(item.ar)}</div>
                    <button class="${isSelected ? 'secondary-btn' : 'ghost-btn'}" type="button" data-pick="${index}" ${isSelected ? 'disabled' : ''}>${isSelected ? 'Уже добавлен ✓' : 'Выбрать'}</button>
@@ -1,3 +1,4 @@
+import { iconHtml } from './ui-icon.js';
 import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from './arweave-attachment-manager.js';
 import { composeMessageWithAttachments, MAX_MESSAGE_ATTACHMENTS } from '../services/attachment-format.js';
 import { state } from '../state.js';
@@ -133,7 +134,6 @@ export function openChannelEditor({
  authorName.textContent = login || 'Гость';
  author.append(authorName);
  body.append(author);
-  if (extraControl instanceof Node) body.append(extraControl);
  body.append(textarea, attachmentsBox, error, clearButton);

  const footer = document.createElement('footer');
@@ -141,7 +141,8 @@ export function openChannelEditor({
  const attachButton = document.createElement('button');
  attachButton.type = 'button';
  attachButton.className = 'secondary-btn channel-editor__attach';
-  attachButton.textContent = 'Прикрепить';
+  attachButton.innerHTML = `${iconHtml('clip')}<span class="sr-only">Прикрепить</span>`;
+  attachButton.title = 'Прикрепить файл';
  attachButton.hidden = !allowAttachments;
  const counter = document.createElement('span');
  counter.className = 'channel-editor__counter';
@@ -151,6 +152,10 @@ export function openChannelEditor({
  submitButton.textContent = submitLabel;
  submitButton.title = 'Отправить · Ctrl+Enter / ⌘+Enter';
  footer.append(attachButton);
+  if (extraControl instanceof Node) {
+    footer.classList.add('has-extra');
+    footer.append(extraControl);
+  }
  footer.append(counter, submitButton);
  dialog.append(header, body, footer);
  overlay.append(dialog);
@@ -0,0 +1,48 @@
+// Возвращает Promise<boolean>: true — подтвердили, false — отмена, Escape или тап мимо.
+export function confirmDialog({
+  title = 'Подтвердите действие',
+  text = '',
+  confirmLabel = 'Да',
+  cancelLabel = 'Отмена',
+  danger = false,
+} = {}) {
+  return new Promise((resolve) => {
+    const opener = document.activeElement;
+    const modal = document.createElement('div');
+    modal.className = 'modal confirm-dialog';
+    modal.innerHTML = `
+      <div class="modal-card confirm-dialog__card" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title">
+        <h2 class="modal-title" id="confirm-dialog-title"></h2>
+        <p class="confirm-dialog__text"></p>
+        <div class="form-actions-grid">
+          <button type="button" class="secondary-btn" data-answer="no"></button>
+          <button type="button" class="${danger ? 'destructive-btn confirm-dialog__danger' : 'primary-btn'}" data-answer="yes"></button>
+        </div>
+      </div>
+    `;
+    modal.querySelector('.modal-title').textContent = title;
+    const textEl = modal.querySelector('.confirm-dialog__text');
+    textEl.textContent = text;
+    textEl.hidden = !text;
+    modal.querySelector('[data-answer="no"]').textContent = cancelLabel;
+    modal.querySelector('[data-answer="yes"]').textContent = confirmLabel;
+
+    const finish = (answer) => {
+      document.removeEventListener('keydown', onKeydown, true);
+      modal.remove();
+      opener?.focus?.();
+      resolve(answer);
+    };
+    const onKeydown = (event) => {
+      if (event.key === 'Escape') { event.stopPropagation(); finish(false); }
+    };
+    modal.addEventListener('click', (event) => {
+      if (event.target === modal) { finish(false); return; }
+      const answer = event.target.closest('[data-answer]')?.dataset.answer;
+      if (answer) finish(answer === 'yes');
+    });
+    document.addEventListener('keydown', onKeydown, true);
+    document.body.append(modal);
+    modal.querySelector('[data-answer="no"]').focus();
+  });
+}
@@ -0,0 +1,152 @@
+// Скрытый редактор палитры: открывается долгим нажатием на «День» или «Ночь» в настройках.
+import {
+  PALETTE_PRESETS,
+  PALETTE_ROLES,
+  exportPalette,
+  getPaletteSettings,
+  importPalette,
+  resolvePalette,
+  resolveThemeMode,
+  setPaletteSettings,
+} from '../services/theme-service.js';
+
+export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {}) {
+  let editTheme = theme === 'light' ? 'light' : 'dark';
+  const opener = document.activeElement;
+
+  const modal = document.createElement('div');
+  modal.className = 'modal palette-editor';
+  modal.innerHTML = `
+    <div class="modal-card palette-editor__card" role="dialog" aria-modal="true" aria-labelledby="palette-editor-title">
+      <div class="palette-editor__head">
+        <h2 class="modal-title" id="palette-editor-title">Цвета оформления</h2>
+        <button class="icon-btn palette-editor__close" type="button" aria-label="Закрыть">✕</button>
+      </div>
+      <div class="palette-editor__section">
+        <span class="palette-editor__label">Основа</span>
+        <div class="tabs tabs--auto palette-editor__presets" role="radiogroup" aria-label="Готовая палитра"></div>
+      </div>
+      <div class="palette-editor__section">
+        <span class="palette-editor__label">Настраиваемая тема</span>
+        <div class="tabs tabs--auto" role="radiogroup" aria-label="Тема для настройки">
+          <button type="button" class="tab-btn" role="radio" data-edit-theme="light">День</button>
+          <button type="button" class="tab-btn" role="radio" data-edit-theme="dark">Ночь</button>
+        </div>
+        <p class="palette-editor__hint">Правки видны сразу. Меняется только выбранная тема.</p>
+      </div>
+      <div class="palette-editor__roles"></div>
+      <details class="palette-editor__share">
+        <summary>Поделиться палитрой</summary>
+        <p class="palette-editor__hint">Скопируйте текст и отправьте команде или вставьте чужую палитру и нажмите «Применить».</p>
+        <textarea class="input palette-editor__json" rows="8" spellcheck="false"></textarea>
+        <p class="palette-editor__error" role="alert" hidden></p>
+        <div class="palette-editor__actions">
+          <button type="button" class="secondary-btn" data-action="copy">Скопировать</button>
+          <button type="button" class="secondary-btn" data-action="import">Применить</button>
+        </div>
+      </details>
+      <div class="palette-editor__actions">
+        <button type="button" class="secondary-btn" data-action="reset-theme">Сбросить эту тему</button>
+        <button type="button" class="primary-btn" data-action="done">Готово</button>
+      </div>
+    </div>
+  `;
+
+  const card = modal.querySelector('.palette-editor__card');
+  const presetsEl = modal.querySelector('.palette-editor__presets');
+  const rolesEl = modal.querySelector('.palette-editor__roles');
+  const jsonEl = modal.querySelector('.palette-editor__json');
+  const errorEl = modal.querySelector('.palette-editor__error');
+
+  for (const [id, preset] of Object.entries(PALETTE_PRESETS)) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'tab-btn';
+    btn.setAttribute('role', 'radio');
+    btn.dataset.preset = id;
+    btn.textContent = preset.label;
+    presetsEl.append(btn);
+  }
+
+  const update = (mutate) => {
+    const settings = getPaletteSettings();
+    const next = { preset: settings.preset, custom: { dark: { ...settings.custom.dark }, light: { ...settings.custom.light } } };
+    mutate(next);
+    setPaletteSettings(next);
+    render();
+  };
+
+  function render() {
+    const settings = getPaletteSettings();
+    const colors = resolvePalette(editTheme, settings);
+    const custom = settings.custom[editTheme];
+    modal.querySelectorAll('[data-preset]').forEach((btn) => {
+      btn.setAttribute('aria-checked', String(btn.dataset.preset === settings.preset));
+    });
+    modal.querySelectorAll('[data-edit-theme]').forEach((btn) => {
+      btn.setAttribute('aria-checked', String(btn.dataset.editTheme === editTheme));
+    });
+    rolesEl.replaceChildren(...PALETTE_ROLES.map((role) => {
+      const row = document.createElement('label');
+      row.className = 'palette-editor__role';
+      const changed = Boolean(custom[role.id]);
+      row.innerHTML = `
+        <input type="color" value="${colors[role.id]}" aria-label="${role.label}">
+        <span class="palette-editor__role-name">${role.label}${changed ? ' <span class="palette-editor__changed">изменён</span>' : ''}</span>
+        <code class="palette-editor__role-value">${colors[role.id]}</code>
+      `;
+      const input = row.querySelector('input');
+      input.addEventListener('input', () => {
+        document.documentElement.style.setProperty(`--${role.id}`, input.value);
+        row.querySelector('code').textContent = input.value;
+      });
+      input.addEventListener('change', () => update((next) => { next.custom[editTheme][role.id] = input.value; }));
+      return row;
+    }));
+    jsonEl.value = exportPalette();
+    errorEl.hidden = true;
+  }
+
+  const close = () => {
+    document.removeEventListener('keydown', onKeydown);
+    modal.remove();
+    opener?.focus?.();
+    onClose?.();
+  };
+  const onKeydown = (event) => { if (event.key === 'Escape') close(); };
+
+  modal.addEventListener('click', async (event) => {
+    if (event.target === modal) { close(); return; }
+    const presetBtn = event.target.closest('[data-preset]');
+    if (presetBtn) { update((next) => { next.preset = presetBtn.dataset.preset; }); return; }
+    // data-edit-theme, а не data-theme: data-theme стоит на <html>, и closest() находил бы его при любом клике.
+    const themeBtn = event.target.closest('[data-edit-theme]');
+    if (themeBtn) { editTheme = themeBtn.dataset.editTheme; render(); return; }
+    if (event.target.closest('.palette-editor__close')) { close(); return; }
+    const action = event.target.closest('[data-action]')?.dataset.action;
+    if (action === 'done') close();
+    if (action === 'reset-theme') update((next) => { next.custom[editTheme] = {}; });
+    if (action === 'copy') {
+      try {
+        await navigator.clipboard.writeText(jsonEl.value);
+      } catch {
+        jsonEl.select();
+      }
+    }
+    if (action === 'import') {
+      try {
+        importPalette(jsonEl.value);
+        render();
+      } catch {
+        errorEl.textContent = 'Не удалось прочитать палитру: проверьте, что текст скопирован целиком.';
+        errorEl.hidden = false;
+      }
+    }
+  });
+  document.addEventListener('keydown', onKeydown);
+
+  render();
+  document.body.append(modal);
+  card.querySelector('.palette-editor__close').focus();
+  return close;
+}
@@ -0,0 +1,110 @@
+// data-profile-list / data-self-profile-action / data-profile-action обрабатывают profile-view.js и user-profile-view.js.
+import { iconHtml } from './ui-icon.js';
+
+export function escapeProfileHtml(text) {
+  return String(text || '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+const esc = escapeProfileHtml;
+
+function statusChip({ kind, label, value, active }) {
+  const n = Number(value || 0);
+  return `
+    <button type="button" class="pf-status${active ? ' is-active' : ''}" data-profile-list="${esc(kind)}"
+      aria-label="${esc(label)}: подтверждений ${n}" title="Статус «${esc(label)}». Число — сколько людей его подтвердили. Нажмите, чтобы увидеть кто.">
+      <span class="pf-status-dot" aria-hidden="true"></span>${esc(label)}${n > 0 ? `<b>${n}</b>` : ''}
+    </button>`;
+}
+
+function statHtml({ kind, label, valueHtml, ariaLabel }) {
+  return `
+    <button type="button" class="pf-stat" data-profile-list="${esc(kind)}" aria-label="${esc(ariaLabel)}">
+      <span class="pf-stat-value">${valueHtml}</span>
+      <span class="pf-stat-label">${esc(label)}</span>
+    </button>`;
+}
+
+function contactRows(card) {
+  return [
+    ['Ссылки', card?.web],
+    ['Телефон', card?.phone],
+    ['Адрес', card?.address],
+  ]
+    .filter(([, value]) => String(value || '').trim())
+    .map(([label, value]) => `
+      <div class="pf-row">
+        <span class="pf-row-label">${esc(label)}</span>
+        <span class="pf-row-value">${esc(value)}</span>
+      </div>`)
+    .join('');
+}
+
+/**
+ * @param {object} opts
+ * @param {object} opts.card        карточка профиля (loadUserProfileCard)
+ * @param {string} opts.login       логин на случай, если в карточке его нет
+ * @param {string} opts.tilesHtml   плитки действий (свои/чужие)
+ * @param {string} [opts.tilesWrapClass] доп. класс обёртки плиток (для меню «Добавить»)
+ * @param {string} [opts.beforeTilesHtml] разметка внутри обёртки перед плитками
+ */
+export function profileCardHtml({ card, login = '', tilesHtml = '', tilesWrapClass = '', beforeTilesHtml = '', isSelf = true }) {
+  const stats = card?.stats || {};
+  const official = card?.accountRole === 'primary';
+  const shining = card?.shineStatus === 'shining';
+  const cardLogin = card?.login || login;
+  const fullName = [card?.firstName, card?.lastName].map((v) => String(v || '').trim()).filter(Boolean).join(' ');
+  const displayName = fullName || cardLogin || 'Профиль';
+  const about = String(card?.about || '').trim();
+  const spiritualPath = String(card?.spiritualPath || '').trim();
+  const contacts = contactRows(card);
+  const aboutRow = (about || isSelf) ? `
+      <div class="pf-row pf-row--block">
+        <span class="pf-row-label">О себе</span>
+        <p class="pf-row-text${about ? '' : ' is-empty'}">${esc(about || 'Не заполнено')}</p>
+      </div>` : '';
+  const pathRow = spiritualPath ? `
+      <div class="pf-row pf-row--block">
+        <span class="pf-row-label">Духовный путь</span>
+        <p class="pf-row-text">${esc(spiritualPath)}</p>
+      </div>` : '';
+  const listInner = aboutRow + contacts + pathRow;
+  const listHtml = listInner.trim() ? `<div class="pf-list">${listInner}</div>` : '';
+  const friends = Number(stats.friendsCount || 0);
+  const statusChips = [
+    (official || Number(stats.primaryReceivedCount || 0) > 0) && statusChip({ kind: 'primary_received', label: 'Официальный', value: stats.primaryReceivedCount, active: official }),
+    (shining || Number(stats.shineReceivedCount || 0) > 0) && statusChip({ kind: 'shine_received', label: 'Сияющий', value: stats.shineReceivedCount, active: shining }),
+  ].filter(Boolean);
+  const statusesHtml = statusChips.length ? `<div class="pf-statuses">${statusChips.join('')}</div>` : '';
+  const closeFriends = Number(stats.closeFriendsCount || 0);
+
+  return `
+    <div class="pf-hero${shining ? ' is-shining' : ''}" aria-label="Профиль ${esc(cardLogin)}">
+      <div class="pf-avatar user-profile-avatar-slot"></div>
+      <h2 class="pf-name">${esc(displayName)}</h2>
+      <div class="pf-login">@${esc(cardLogin)}</div>
+      ${statusesHtml}
+    </div>
+
+    <div class="pf-stats">
+      ${statHtml({ kind: 'friends', label: 'Друзья', valueHtml: closeFriends ? `${friends}<small> · ${closeFriends} близк.</small>` : String(friends), ariaLabel: `Друзья: ${friends}, близкие: ${closeFriends}` })}
+      ${statHtml({ kind: 'channels_owned', label: 'Каналы', valueHtml: String(Number(stats.ownedPublicChannelsCount || 0)), ariaLabel: `Каналы: ${Number(stats.ownedPublicChannelsCount || 0)}` })}
+      ${statHtml({ kind: 'channels_following', label: 'Подписки', valueHtml: String(Number(stats.followingChannelsCount || 0)), ariaLabel: `Подписки: ${Number(stats.followingChannelsCount || 0)}` })}
+    </div>
+
+    ${tilesHtml ? `
+      <div class="pf-tiles-wrap user-profile-actions-wrap ${esc(tilesWrapClass)}">
+        ${beforeTilesHtml}
+        <div class="pf-tiles user-profile-actions">${tilesHtml}</div>
+      </div>` : ''}
+
+    ${listHtml}`;
+}
+
+export function profileTileHtml({ icon, label, attrs = '', iconMarkup = '' }) {
+  return `<button type="button" class="pf-tile user-profile-action-btn" ${attrs}>${iconMarkup || iconHtml(icon)}<span>${esc(label)}</span></button>`;
+}
@@ -1,3 +1,4 @@
+import { iconHtml } from './ui-icon.js';
 function resolveElement(value) {
  return typeof value === 'function' ? value() : value;
 }
@@ -6,7 +7,7 @@ function buildArrowIcon() {
  const icon = document.createElement('span');
  icon.className = 'scroll-to-bottom-btn__icon';
  icon.setAttribute('aria-hidden', 'true');
-  icon.textContent = '↓';
+  icon.innerHTML = iconHtml('down');
  return icon;
 }

@@ -1,18 +1,28 @@
 import { resolveToolbarActive } from '../router.js';
 import { state, authService } from '../state.js';
 import { openAuthRequiredModal } from '../services/auth-required-modal.js';
-import { iconHtml as lineIcon } from './ui-icon.js';
+import { SHINE_CONNECTIONS_LOGO_SRC } from './shine-logo.js';
+
+const TOOLBAR_ICONS = {
+  'messages-list': '<g transform="translate(12 12) scale(.88) translate(-11.5 -13)"><path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5H4l-2 2v-9.5A8.5 8.5 0 0 1 10.5 4H13a8 8 0 0 1 8 7.5Z"/><circle cx="8" cy="12" r="1.05" class="toolbar-svg-dot"/><circle cx="11.7" cy="12" r="1.05" class="toolbar-svg-dot"/><circle cx="15.4" cy="12" r="1.05" class="toolbar-svg-dot"/></g>',
+  'channels-list': '<rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5"/>',
+  'notifications-view': '<path d="M6.2 16.8V11a5.8 5.8 0 0 1 11.6 0v5.8l1.7 1.7h-15Z"/><path d="M10.2 21a2 2 0 0 0 3.6 0"/>',
+  'profile-view': '<circle cx="12" cy="6.8" r="3.6"/><path d="M4.4 21v-2.1a5.6 5.6 0 0 1 5.6-5.6h4a5.6 5.6 0 0 1 5.6 5.6V21Z"/>',
+};
+
 const ITEMS = [
  { pageId: 'messages-list', label: 'Личные' },
  { pageId: 'channels-list', label: 'Каналы' },
-  { pageId: 'network-view', label: 'Связи' },
+  { pageId: 'network-view', label: 'Связи', mandala: true },
  { pageId: 'notifications-view', label: 'Уведомления' },
  { pageId: 'profile-view', label: 'Профиль' },
 ];

-function iconHtml(item) {
-  const names = { 'messages-list': 'message', 'channels-list': 'channels', 'network-view': 'network', 'notifications-view': 'bell', 'profile-view': 'profile' };
-  return lineIcon(names[item.pageId]);
+function iconHtml(item, extra = '') {
+  const glyph = item.mandala
+    ? `<img class="toolbar-mandala" src="${SHINE_CONNECTIONS_LOGO_SRC}" alt="" aria-hidden="true" />`
+    : `<svg class="toolbar-svg" viewBox="0 0 24 24" aria-hidden="true">${TOOLBAR_ICONS[item.pageId]}</svg>`;
+  return `<span class="toolbar-icon${item.mandala ? ' toolbar-icon--mandala' : ''}">${glyph}${extra}</span>`;
 }

 function normalizeCounters(payload = {}) {
@@ -44,7 +54,7 @@ function renderBadge(btn, count, ariaLabel, extraClass = '') {
  if (!badge) {
    badge = document.createElement('span');
    badge.className = `toolbar-unread-badge${extraClass ? ` ${extraClass}` : ''}`;
-    btn.append(badge);
+    (btn.querySelector('.toolbar-icon') || btn).append(badge);
  }
  badge.textContent = count > 99 ? '99+' : String(count);
  badge.setAttribute('aria-label', `${ariaLabel}: ${count}`);
@@ -127,21 +137,17 @@ export function renderToolbar(currentPageId, navigate) {
    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}${isMessages ? ' toolbar-btn-messages' : ''}${isNetwork ? ' toolbar-btn-network' : ''}${item.hero ? ' toolbar-btn-hero' : ''}`;
    if (isProfile) {
      btn.innerHTML = `
-        ${iconHtml(item)}
-        <span class="toolbar-label-wrap">
-          <span>${item.label}</span>
-          <span id="toolbar-connection-indicator" class="toolbar-connection-indicator is-unknown">
+        ${iconHtml(item, `<span id="toolbar-connection-indicator" class="toolbar-connection-indicator is-unknown">
            <span class="toolbar-connection-dot" aria-hidden="true"></span>
-          </span>
-        </span>
+          </span>`)}
+        <span class="sr-only">${item.label}</span>
      `;
    } else if (isNetwork) {
-      btn.innerHTML = `${iconHtml(item)}<span>${item.label}</span>`;
-      btn.setAttribute('aria-label', item.label);
-      btn.title = item.label;
+      btn.innerHTML = `${iconHtml(item)}<span class="sr-only">${item.label}</span>`;
    } else {
-      btn.innerHTML = `${iconHtml(item)}<span>${item.label}</span>`;
+      btn.innerHTML = `${iconHtml(item)}<span class="sr-only">${item.label}</span>`;
    }
+    btn.title = item.label;
    if (isMessages) renderBadge(btn, counters.dmUnreadCount, 'Непрочитанных личных сообщений');
    if (item.pageId === 'channels-list') renderBadge(btn, counters.channelsUnreadCount, 'Непрочитанных сообщений в каналах');
    if (isNotifications) renderBadge(btn, counters.notificationsUnreadCount, 'Новых уведомлений', 'notification-toolbar-badge');
@@ -1,3 +1,4 @@
+import { iconHtml } from './ui-icon.js';
 import { createDropdownMenu } from './dropdown-menu.js';

 function appendNode(target, node) {
@@ -15,6 +16,8 @@ function createActionButton(action = {}, cleanupFns) {

  if (action.iconNode instanceof Node) {
    button.append(action.iconNode);
+  } else if (action.icon) {
+    button.innerHTML = iconHtml(action.icon);
  } else {
    button.textContent = String(action.label ?? '');
  }
@@ -56,7 +59,7 @@ export function createTopBar({
    const button = document.createElement('button');
    button.type = 'button';
    button.className = `icon-btn topbar__back${backAction.className ? ` ${backAction.className}` : ''}`;
-    button.textContent = '←';
+    button.innerHTML = iconHtml('back');
    button.setAttribute('aria-label', backAction.ariaLabel || 'Назад');
    button.title = backAction.title || 'Назад';
    button.addEventListener('click', backAction.onClick);
@@ -7,6 +7,20 @@ const paths = {
  profile: '<circle cx="12" cy="7" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/>',
  share: '<path d="m8 12 8-8M9 4h7v7M20 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>',
  search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+  link: '<path d="M10 14a4.5 4.5 0 0 0 6.4 0l3.2-3.2a4.5 4.5 0 0 0-6.4-6.4L12 5.6"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3.2 3.2a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/>',
+  gift: '<rect x="3" y="8" width="18" height="5" rx="1"/><path d="M5 13v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7M12 8v13M12 8S10.5 3 8 3.5 7 8 12 8Zm0 0s1.5-5 4-4.5S17 8 12 8Z"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  check: '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
+  open: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  chevron: '<path d="m9 6 6 6-6 6"/>',
+  back: '<path d="M19 12H5M11 5l-7 7 7 7"/>',
+  down: '<path d="M12 5v14M5 12l7 7 7-7"/>',
+  edit: '<path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/>',
+  wallet: '<path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16" height="11" rx="2.5"/><circle cx="16" cy="13.5" r="1.2" fill="currentColor" stroke="none"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/>',
+  'user-plus': '<circle cx="10" cy="8" r="3.5"/><path d="M3.5 20a6.5 6.5 0 0 1 13 0M19 8v6M16 11h6"/>',
+  refresh: '<path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v4.4h-4.4"/>',
+  clip: '<path d="m20.5 11.5-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8"/>',
 };

 export function iconHtml(name, filled = false) {