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/channel-about-view.js

@@ -1,7 +1,8 @@
+import { iconHtml } from '../components/ui-icon.js';
 import { createTopBar } from '../components/topbar.js';
 import { renderAvatar } from '../components/avatar-image.js';
 import { authService, setChannelsFeed, state } from '../state.js';
-import { navigateBack } from '../router.js';
+import { navigateBack, getPreviousTrackedPath } from '../router.js';
 import {
   extractLoginFromBlockchainName,
   makeProfileRoute,
@@ -251,7 +252,7 @@ function openSupportChannelModal({ ownerLogin, ownerUser, channelTitle }) {
 
     const login = String(state.session.login || '').trim();
     const storagePwd = String(state.session.storagePwdInMemory || '').trim();
-    if (!login || !storagePwd) throw new Error('Для перевода нужно войти в SHiNE.');
+    if (!login || !storagePwd) throw new Error('Для перевода нужно войти в Сиянии.');
 
     let wallet;
     if (keyId === 'root-key') {
@@ -410,12 +411,21 @@ function confirmUnsubscribeModal({ channelTitle }) {
   });
 }
 
+function subscribersWord(count) {
+  const n = Math.abs(Number(count) || 0) % 100;
+  const last = n % 10;
+  if (n > 10 && n < 20) return 'подписчиков';
+  if (last === 1) return 'подписчик';
+  if (last >= 2 && last <= 4) return 'подписчика';
+  return 'подписчиков';
+}
+
 export function render({ navigate, route, chrome }) {
   const screen = document.createElement('section');
   screen.className = 'stack channels-screen channels-screen--channel-about';
 
   const topbar = createTopBar({
-    title: '',
+    title: 'О канале',
     back: {
       label: '←',
       onClick: () => {
@@ -471,61 +481,66 @@ export function render({ navigate, route, chrome }) {
       channelRootBlockHash: selector?.channelRootBlockHash,
     });
     const serverLink = buildChannelLink(shortRoute);
+    const shortLink = String(serverLink || '').replace(/^https?:\/\//, '');
+    const cameFromChannel = !!shortRoute && (getPreviousTrackedPath() || '').replace(/^\//, '') === String(shortRoute).replace(/^\//, '');
     const ownerName = ownerDisplayName(ownerProfile, ownerLogin);
 
+    const subscriptionTile = isOwnChannel ? '' : `
+          <button class="channel-about-tile${isSubscribed ? ' is-active' : ''}" id="channel-about-subscription" type="button">
+            ${iconHtml(isSubscribed ? 'check' : 'plus')}<span>${isSubscribed ? 'Вы подписаны' : 'Подписаться'}</span>
+          </button>`;
+
     content.innerHTML = `
       <div class="channel-about-hero">
         <div class="channel-about-avatar-slot" id="channel-about-avatar-slot"></div>
         <h2 class="channel-about-title">${escapeHtml(cleanName)}</h2>
-        <div class="channel-about-technical">${escapeHtml(ownerLogin)} / ${escapeHtml(channelName)}</div>
-        <div class="channel-about-subscribers">${escapeHtml(statsText(subscribersCount))} подписчиков</div>
+        <div class="channel-about-subline">@${escapeHtml(ownerLogin)} · ${escapeHtml(statsText(subscribersCount))} ${escapeHtml(subscribersWord(subscribersCount))}</div>
       </div>
 
-      <section class="channel-about-section">
-        <h3>О канале</h3>
-        <p class="channel-about-description">${escapeHtml(description || 'Описание не задано.')}</p>
-      </section>
+      <div class="channel-about-tiles">
+        ${cameFromChannel ? '' : `<button class="channel-about-tile" id="channel-about-open" type="button">${iconHtml('open')}<span>Открыть</span></button>`}
+        ${subscriptionTile}
+        <button class="channel-about-tile" id="channel-about-support" type="button">${iconHtml('gift')}<span>Донат</span></button>
+      </div>
 
-      <section class="channel-about-section channel-about-owner-section">
-        <h3>Владелец канала</h3>
-        <button class="channel-about-owner-link" id="channel-about-owner" type="button">
-          <strong>${escapeHtml(ownerName)}</strong>
-          <span>@${escapeHtml(ownerLogin)}</span>
-        </button>
-        <button class="secondary-btn channel-about-support-btn" id="channel-about-support" type="button">Донат автору</button>
-      </section>
-
-
-      <section class="channel-about-section">
-        <h3>Ссылка на этом сервере</h3>
-        <div class="channel-about-link-box">
-          <a href="${escapeHtml(serverLink)}">${escapeHtml(serverLink)}</a>
-          <button class="icon-btn channel-about-copy-btn" id="channel-about-copy" type="button" aria-label="Скопировать ссылку" title="Скопировать ссылку">⧉</button>
+      <div class="channel-about-list">
+        <div class="channel-about-row channel-about-row--static">
+          <span class="channel-about-row-label">Описание</span>
+          <p class="channel-about-description">${escapeHtml(description || 'Описание не задано.')}</p>
         </div>
-      </section>
-
-      <button class="primary-btn channel-about-open-btn" id="channel-about-open" type="button">Открыть канал</button>
-      ${isOwnChannel ? '' : `
-        <button class="${isSubscribed ? 'destructive-btn is-unsubscribe' : 'secondary-btn'} channel-about-subscription-btn" id="channel-about-subscription" type="button">
-          ${isSubscribed ? 'Отписаться от канала' : 'Подписаться на канал'}
+        <button class="channel-about-row" id="channel-about-owner" type="button">
+          <span class="channel-about-owner-avatar" id="channel-about-owner-avatar"></span>
+          <span class="channel-about-row-main">
+            <strong>${escapeHtml(ownerName)}</strong>
+            <span class="channel-about-row-label">Владелец · @${escapeHtml(ownerLogin)}</span>
+          </span>
+          <span class="channel-about-row-chevron">${iconHtml('chevron')}</span>
         </button>
-      `}
+        <button class="channel-about-row" id="channel-about-copy-row" type="button">
+          <span class="channel-about-row-main">
+            <span class="channel-about-row-label">Ссылка</span>
+            <span class="channel-about-link">${escapeHtml(shortLink)}</span>
+          </span>
+          <span class="channel-about-row-chevron" aria-hidden="true">${iconHtml('link')}</span>
+        </button>
+      </div>
     `;
 
-    if (String(channel?.avaAr || '').trim()) {
-      const avatar = renderAvatar({
-        initials: cleanName.slice(0, 1).toUpperCase() || 'К',
-        avatar: { ar: String(channel.avaAr || '').trim() },
-        size: 'xl',
-        className: 'channel-about-avatar channel-profile-avatar',
-        title: cleanName,
-        alt: 'Аватар канала',
-      });
-      avatar.style.setProperty('--channel-avatar-size', '112px');
-      content.querySelector('#channel-about-avatar-slot')?.append(avatar);
-    } else {
-      content.querySelector('#channel-about-avatar-slot')?.remove();
-    }
+    const channelAvatar = renderAvatar({
+      initials: cleanName.slice(0, 1).toUpperCase() || 'К',
+      avatar: String(channel?.avaAr || '').trim() ? { ar: String(channel.avaAr || '').trim() } : null,
+      size: 'xl',
+      className: 'channel-about-avatar channel-profile-avatar',
+      title: cleanName,
+      alt: 'Аватар канала',
+    });
+    content.querySelector('#channel-about-avatar-slot')?.append(channelAvatar);
+    content.querySelector('#channel-about-owner-avatar')?.append(renderAvatar({
+      initials: ownerName.slice(0, 1).toUpperCase() || '?',
+      size: 'md',
+      className: 'channel-about-owner-avatar-img',
+      alt: '',
+    }));
 
     content.querySelector('#channel-about-owner')?.addEventListener('click', () => {
       const profileRoute = makeProfileRoute(ownerLogin);
@@ -537,7 +552,7 @@ export function render({ navigate, route, chrome }) {
     content.querySelector('#channel-about-open')?.addEventListener('click', () => {
       if (shortRoute) navigate(shortRoute);
     });
-    content.querySelector('#channel-about-copy')?.addEventListener('click', async () => {
+    const copyLink = async () => {
       if (!serverLink) return;
       try {
         await navigator.clipboard.writeText(serverLink);
@@ -545,7 +560,8 @@ export function render({ navigate, route, chrome }) {
       } catch (error) {
         showToast(toUserMessage(error, 'Не удалось скопировать ссылку'), { kind: 'error' });
       }
-    });
+    };
+    content.querySelector('#channel-about-copy-row')?.addEventListener('click', copyLink);
 
     const subscriptionButton = content.querySelector('#channel-about-subscription');
     subscriptionButton?.addEventListener('click', async () => {