Добавить состояние чтения каналов

2026-09-09 18:59:54 +03:00
parent 2d059e9ff5
commit 8e86872aa7
29 changed files with 2538 additions and 231 deletions
@@ -30,6 +30,25 @@ function metricHtml({ kind, label, value, glow = false, positionClass = '' }) {
    </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>`;
@@ -102,52 +121,51 @@ export function render({ navigate, chrome }) {
      .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 = `
-      ${fullName ? `<div class="user-profile-full-name">${escapeHtml(fullName)}</div>` : ''}
-
      <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>
-        ${metricHtml({ kind: 'friends', label: 'Друзья', value: stats.friendsCount, positionClass: 'is-bottom-left' })}
-        ${metricHtml({ kind: 'close_friends', label: 'Близкие друзья', value: stats.closeFriendsCount, positionClass: 'is-bottom-right' })}
      </div>

-      ${about ? `<div class="user-profile-about-inline">${escapeHtml(about)}</div>` : ''}
-
-      <div class="user-profile-channel-metrics">
-        ${metricHtml({ kind: 'channels_following', label: 'Подписки', value: stats.followingChannelsCount, positionClass: 'is-channel-metric' })}
-        ${metricHtml({ kind: 'channels_owned', label: 'Каналы', value: stats.ownedPublicChannelsCount, positionClass: 'is-channel-metric' })}
+      <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>
+          <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>
-      </div>
-
-      <div class="user-profile-detail-links" aria-label="Дополнительная информация о профиле">
-        <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>
-        <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>
-      </div>
-      <section class="user-profile-detail-panel" id="profile-view-detail-panel" aria-live="polite" hidden></section>`;
+      </div>`;

    const avatarSlot = body.querySelector('.user-profile-avatar-slot');
    avatarSlot?.append(renderUserAvatar({