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>

shine-UI/js/pages/profile-view.js

@@ -1,104 +1,20 @@
 import { profile } from '../mock-data.js';
 import { state } from '../state.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
-import { createOverflowDots } from '../components/overflow-dots.js';
 import { createTopBar } from '../components/topbar.js';
 import { loadUserProfileCard } from '../services/user-connections.js';
+import { profileCardHtml, profileTileHtml } from '../components/profile-card.js';
 
 export const pageMeta = { id: 'profile-view', title: 'Профиль' };
 
-function escapeHtml(text) {
-  return String(text || '')
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
-}
-
-function metricHtml({ kind, label, value, glow = false, positionClass = '' }) {
-  const numericValue = Number(value || 0);
-  return `
-    <button
-      type="button"
-      class="user-profile-metric ${positionClass}${glow ? ' is-glowing' : ''}"
-      data-profile-list="${escapeHtml(kind)}"
-      aria-label="${escapeHtml(label)}: ${numericValue}"
-    >
-      <span class="user-profile-metric-circle">${numericValue}</span>
-      <span class="user-profile-metric-label">${escapeHtml(label)}</span>
-    </button>`;
-}
-
-function friendsMetricHtml(stats = {}) {
-  const friends = Number(stats.friendsCount || 0);
-  const closeFriends = Number(stats.closeFriendsCount || 0);
-  return `
-    <button
-      type="button"
-      class="user-profile-metric is-social-metric is-friends-combined"
-      data-profile-list="friends"
-      aria-label="Друзья: ${friends}; близкие друзья: ${closeFriends}"
-    >
-      <span class="user-profile-metric-value-combined">${closeFriends} / ${friends}</span>
-      <span class="user-profile-metric-label">Друзья</span>
-    </button>`;
-}
-
-function hasContacts(card) {
-  return [card?.web, card?.phone, card?.address].some((value) => String(value || '').trim());
-}
-
-function spiritualPathDetailHtml(card) {
-  const value = String(card?.spiritualPath || '').trim();
-  return `<div class="user-profile-detail-copy${value ? '' : ' is-muted'}">${escapeHtml(value || 'Не заполнено')}</div>`;
-}
-
-function contactsDetailHtml(card) {
-  const rows = [
-    ['Ссылки', card?.web],
-    ['Телефон', card?.phone],
-    ['Адрес', card?.address],
-  ].filter(([, value]) => String(value || '').trim());
-
-  if (!rows.length) {
-    return '<div class="user-profile-detail-copy is-muted">Не заполнено</div>';
-  }
-  return rows.map(([label, value]) => `
-    <div class="user-profile-contact-row">
-      <span>${escapeHtml(label)}</span>
-      <b>${escapeHtml(value)}</b>
-    </div>`).join('');
-}
-
 export function render({ navigate, chrome }) {
   const login = String(state.session.login || profile.login || '').trim();
   const screen = document.createElement('section');
   screen.className = 'stack user-profile-screen';
 
   const topbar = createTopBar({
-    title: login || 'Профиль',
-    className: 'topbar--profile user-profile-header',
-    actions: [
-      {
-        iconNode: createOverflowDots(),
-        title: 'Меню профиля',
-        ariaLabel: 'Меню профиля',
-        className: 'profile-head-menu-btn topbar-overflow-action--raised',
-        menu: {
-          className: 'profile-head-menu',
-          minWidth: 250,
-          items: [
-            { label: 'Редактировать профиль', iconSrc: '/assets/profile-icon-profile.svg', action: () => navigate('profile-edit-view') },
-            { label: 'Кошелёк', iconSrc: '/assets/profile-icon-wallet.svg', action: () => navigate('wallet-view') },
-            { label: 'Настройки', iconSrc: '/assets/profile-icon-settings.svg', action: () => navigate('settings-view') },
-            { label: 'Подтверждённые аккаунты', action: () => navigate(`SHiNE/${encodeURIComponent(login)}/list/primary_given`) },
-            { label: 'Подтверждённые сияющие', action: () => navigate(`SHiNE/${encodeURIComponent(login)}/list/shine_given`) },
-            { label: 'Сменить профиль', action: () => navigate('profiles-view') },
-          ],
-        },
-      },
-    ],
+    title: 'Профиль',
+    className: 'topbar--root user-profile-header',
   });
   chrome?.setTopbar(topbar);
 
@@ -114,57 +30,21 @@ export function render({ navigate, chrome }) {
 
   function renderProfile() {
     if (!card) return;
-    const stats = card.stats || {};
     const official = card.accountRole === 'primary';
     const shining = card.shineStatus === 'shining';
-    const fullName = [card.firstName, card.lastName]
-      .map((value) => String(value || '').trim())
-      .filter(Boolean)
-      .join(' ');
-    const displayName = fullName || card.login || login || 'Профиль';
-    const about = String(card.about || '').trim();
-    const spiritualPath = String(card.spiritualPath || '').trim();
-    const contactsVisible = hasContacts(card);
-
-    const title = topbar.querySelector('.topbar__title');
-    if (title) title.textContent = card.login || login || 'Профиль';
-
-    body.innerHTML = `
-      <div class="user-profile-hero" aria-label="Профиль ${escapeHtml(card.login)}">
-        ${metricHtml({ kind: 'primary_received', label: 'Официальный', value: stats.primaryReceivedCount, glow: official, positionClass: 'is-top-left' })}
-        ${metricHtml({ kind: 'shine_received', label: 'Сияющий', value: stats.shineReceivedCount, glow: shining, positionClass: 'is-top-right' })}
-        <div class="user-profile-avatar-slot"></div>
-      </div>
-
-      <div class="user-profile-identity">
-        <div class="user-profile-full-name">${escapeHtml(displayName)}</div>
-        <div class="user-profile-login">@${escapeHtml(card.login || login)}</div>
-      </div>
-
-      <div class="user-profile-social-metrics">
-        ${friendsMetricHtml(stats)}
-        ${metricHtml({ kind: 'channels_owned', label: 'Каналы', value: stats.ownedPublicChannelsCount, positionClass: 'is-social-metric' })}
-        ${metricHtml({ kind: 'channels_following', label: 'Подписки', value: stats.followingChannelsCount, positionClass: 'is-social-metric' })}
-      </div>
-
-      <section class="user-profile-about-card" aria-label="О себе">
-        <div class="user-profile-about-title">О себе</div>
-        <div class="user-profile-about-field${about ? '' : ' is-empty'}">${escapeHtml(about || 'Не заполнено')}</div>
-      </section>
-
-      ${(contactsVisible || spiritualPath) ? `
-        <div class="user-profile-detail-links user-profile-detail-links--below-about" aria-label="Дополнительная информация о профиле">
-          ${contactsVisible ? `<button type="button" class="ui-button" data-profile-detail="contacts" aria-pressed="false" aria-controls="profile-view-detail-panel"><span class="user-profile-detail-tab-label">Контакты</span></button>` : '<span></span>'}
-          ${spiritualPath ? `<button type="button" class="ui-button" data-profile-detail="spiritual-path" aria-pressed="false" aria-controls="profile-view-detail-panel"><span class="user-profile-detail-tab-label">Духовный путь</span></button>` : '<span></span>'}
-        </div>
-        <section class="user-profile-detail-panel" id="profile-view-detail-panel" aria-live="polite" hidden></section>` : ''}
-
-      <div class="user-profile-actions-wrap">
-        <div class="user-profile-actions" aria-label="Действия со своим профилем">
-          <button type="button" class="user-profile-action-btn" data-self-profile-action="edit" aria-label="Редактировать профиль" title="Редактировать профиль"><img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true"></button>
-          <button type="button" class="user-profile-action-btn" data-self-profile-action="wallet" aria-label="Кошелёк" title="Кошелёк"><img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true"></button>
-          <button type="button" class="user-profile-action-btn" data-self-profile-action="settings" aria-label="Настройки" title="Настройки"><img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true"></button>
-        </div>
+    body.innerHTML = profileCardHtml({
+      card,
+      login,
+      tilesHtml: [
+        profileTileHtml({ icon: 'edit', label: 'Редактировать', attrs: 'data-self-profile-action="edit"' }),
+        profileTileHtml({ icon: 'wallet', label: 'Кошелёк', attrs: 'data-self-profile-action="wallet"' }),
+        profileTileHtml({ icon: 'settings', label: 'Настройки', attrs: 'data-self-profile-action="settings"' }),
+      ].join(''),
+    }) + `
+      <div class="nav-list profile-more-list">
+        <button class="nav-row" type="button" data-profile-list="primary_given"><span class="nav-row__label">Подтверждённые мной аккаунты</span><span class="nav-row__hint">Аккаунты, за которые вы поручились</span></button>
+        <button class="nav-row" type="button" data-profile-list="shine_given"><span class="nav-row__label">Отмеченные мной как сияющие</span></button>
+        <button class="nav-row" type="button" data-self-profile-action="profiles"><span class="nav-row__label">Сменить профиль</span><span class="nav-row__hint">Другие аккаунты на этом устройстве</span></button>
       </div>`;
 
     const avatarSlot = body.querySelector('.user-profile-avatar-slot');
@@ -198,31 +78,10 @@ export function render({ navigate, chrome }) {
       if (action === 'edit') navigate('profile-edit-view');
       if (action === 'wallet') navigate('wallet-view');
       if (action === 'settings') navigate('settings-view');
+      if (action === 'profiles') navigate('profiles-view');
       return;
     }
 
-    const detailButton = event.target.closest('[data-profile-detail]');
-    if (!detailButton) return;
-    const detailKind = detailButton.dataset.profileDetail;
-    const detailPanel = body.querySelector('#profile-view-detail-panel');
-    if (!detailPanel) return;
-
-    body.querySelectorAll('[data-profile-detail]').forEach((button) => {
-      const active = button === detailButton;
-      button.classList.toggle('is-active', active);
-      button.setAttribute('aria-pressed', active ? 'true' : 'false');
-    });
-
-    if (detailKind === 'spiritual-path') {
-      detailPanel.innerHTML = spiritualPathDetailHtml(card);
-    } else if (detailKind === 'contacts') {
-      detailPanel.innerHTML = contactsDetailHtml(card);
-    } else {
-      return;
-    }
-
-    detailPanel.hidden = false;
-    detailPanel.dataset.activeDetail = detailKind;
   });
 
   async function refresh() {