Исправить профиль и список каналов

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

@@ -38,31 +38,12 @@ function metricHtml({ kind, label, value, glow = false, positionClass = '' }) {
     </button>`;
 }
 
-function openProfileSheet(title, html) {
-  const root = document.getElementById('modal-root');
-  if (!root) return;
-  root.innerHTML = `
-    <div class="user-profile-sheet-backdrop" id="user-profile-sheet-backdrop">
-      <section class="user-profile-sheet" role="dialog" aria-modal="true" aria-label="${escapeHtml(title)}">
-        <div class="user-profile-sheet-handle" aria-hidden="true"></div>
-        <div class="user-profile-sheet-title">${escapeHtml(title)}</div>
-        <div class="user-profile-sheet-content">${html}</div>
-      </section>
-    </div>`;
-
-  const close = () => {
-    if (root.querySelector('#user-profile-sheet-backdrop')) root.innerHTML = '';
-  };
-  root.querySelector('#user-profile-sheet-backdrop')?.addEventListener('click', (event) => {
-    if (event.target?.id === 'user-profile-sheet-backdrop') close();
-  });
+function spiritualPathDetailHtml(card) {
+  const value = String(card?.spiritualPath || '').trim();
+  return `<div class="user-profile-detail-copy${value ? '' : ' is-muted'}">${escapeHtml(value || 'Не заполнено')}</div>`;
 }
 
-function spiritualPathSheetHtml(card) {
-  return `<div class="user-profile-sheet-copy">${escapeHtml(card?.spiritualPath || 'Не заполнено')}</div>`;
-}
-
-function contactsSheetHtml(card) {
+function contactsDetailHtml(card) {
   const rows = [
     ['Ссылки', card?.web],
     ['Телефон', card?.phone],
@@ -70,7 +51,7 @@ function contactsSheetHtml(card) {
   ].filter(([, value]) => String(value || '').trim());
 
   if (!rows.length) {
-    return '<div class="user-profile-sheet-copy is-muted">Не заполнено</div>';
+    return '<div class="user-profile-detail-copy is-muted">Не заполнено</div>';
   }
   return rows.map(([label, value]) => `
     <div class="user-profile-contact-row">
@@ -232,10 +213,15 @@ export function render({ navigate, route, chrome }) {
           </div>
         </div>` : ''}
 
-      <div class="user-profile-detail-links">
-        <button type="button" data-profile-detail="spiritual-path">Духовный путь</button>
-        <button type="button" data-profile-detail="contacts">Контакты</button>
-      </div>`;
+      <div class="user-profile-detail-links" aria-label="Дополнительная информация о пользователе">
+        <button type="button" data-profile-detail="spiritual-path" aria-pressed="false" aria-controls="user-profile-detail-panel">
+          <span class="user-profile-detail-tab-label">Духовный путь</span>
+        </button>
+        <button type="button" data-profile-detail="contacts" aria-pressed="false" aria-controls="user-profile-detail-panel">
+          <span class="user-profile-detail-tab-label">Контакты</span>
+        </button>
+      </div>
+      <section class="user-profile-detail-panel" id="user-profile-detail-panel" aria-live="polite" hidden></section>`;
 
     const avatarSlot = body.querySelector('.user-profile-avatar-slot');
     avatarSlot?.append(renderUserAvatar({
@@ -268,12 +254,27 @@ export function render({ navigate, route, chrome }) {
     }
 
     const detailButton = event.target.closest('[data-profile-detail]');
-    if (detailButton?.dataset.profileDetail === 'spiritual-path') {
-      openProfileSheet('Духовный путь', spiritualPathSheetHtml(card));
-      return;
-    }
-    if (detailButton?.dataset.profileDetail === 'contacts') {
-      openProfileSheet('Контакты', contactsSheetHtml(card));
+    if (detailButton) {
+      const detailKind = detailButton.dataset.profileDetail;
+      const detailPanel = body.querySelector('#user-profile-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;
       return;
     }
 
@@ -340,8 +341,6 @@ export function render({ navigate, route, chrome }) {
 
   screen.cleanup = () => {
     document.removeEventListener('pointerdown', handleOutsidePointer);
-    const root = document.getElementById('modal-root');
-    if (root?.querySelector('#user-profile-sheet-backdrop')) root.innerHTML = '';
   };
 
   return screen;