style(ui): уплотнить профиль и растянуть экран связей

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

@@ -513,7 +513,10 @@ export function render({ navigate, route }) {
   }
 
   const screen = document.createElement('section');
-  screen.className = 'stack network-screen';
+  screen.className = 'network-screen';
+
+  const stage = document.createElement('div');
+  stage.className = 'network-stage';
 
   const board = document.createElement('div');
   board.className = 'network-board network-board--full';
@@ -843,6 +846,8 @@ export function render({ navigate, route }) {
   }
   setBackButtonState(backBtnEl);
 
-  screen.append(header, board);
+  header.classList.add('network-header-overlay');
+  stage.append(board, header);
+  screen.append(stage);
   return screen;
 }

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

@@ -1,5 +1,4 @@
-import { renderHeader } from '../components/header.js';
-import { profile } from '../mock-data.js';
+import { profile } from '../mock-data.js';
 import { state } from '../state.js';
 import {
   PROFILE_GENDER_FEMALE,
@@ -36,23 +35,20 @@ export function render({ navigate }) {
   const screen = document.createElement('section');
   screen.className = 'stack profile-screen';
 
-  const status = document.createElement('div');
-  status.className = 'status-line';
-  status.textContent = 'Загрузка параметров...';
-
-  screen.append(
-    renderHeader({
-      title: '',
-      leftAction: { label: 'Изменить профиль', onClick: () => navigate('profile-edit-view') },
-      rightActions: [
-        { label: 'Кошелёк', onClick: () => navigate('wallet-view') },
-        { label: 'Настройки', onClick: () => navigate('settings-view') },
-      ],
-    }),
-  );
+  const topActions = document.createElement('div');
+  topActions.className = 'profile-top-actions';
+  topActions.innerHTML = `
+    <button class="ghost-btn profile-top-action-btn" type="button" data-top-action="edit">Изменить профиль</button>
+    <button class="ghost-btn profile-top-action-btn" type="button" data-top-action="wallet">Кошелёк</button>
+    <button class="ghost-btn profile-top-action-btn" type="button" data-top-action="settings">Настройки</button>
+  `;
+  topActions.querySelector('[data-top-action="edit"]')?.addEventListener('click', () => navigate('profile-edit-view'));
+  topActions.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => navigate('wallet-view'));
+  topActions.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => navigate('settings-view'));
+  screen.append(topActions);
 
   const card = document.createElement('div');
-  card.className = 'card stack';
+  card.className = 'card stack profile-main-card';
 
   const topRow = document.createElement('div');
   topRow.className = 'row';
@@ -63,7 +59,13 @@ export function render({ navigate }) {
         <div class="profile-identity-line profile-identity-login">${String(login || '').trim() || 'unknown'}</div>
       </div>
     </div>
-    <button class="primary-btn" type="button" data-reload="true">Обновить</button>
+  `;
+
+  const statusRow = document.createElement('div');
+  statusRow.className = 'row profile-status-row';
+  statusRow.innerHTML = `
+    <div class="status-line" data-profile-status-line="true">Загрузка параметров...</div>
+    <button class="ghost-btn profile-refresh-btn" type="button" data-reload="true">Обновить</button>
   `;
 
   const badgesRow = document.createElement('div');
@@ -76,7 +78,8 @@ export function render({ navigate }) {
   const listWrap = document.createElement('div');
   listWrap.className = 'stack profile-param-list';
 
-  const reloadBtn = topRow.querySelector('[data-reload="true"]');
+  const reloadBtn = statusRow.querySelector('[data-reload="true"]');
+  const statusLineEl = statusRow.querySelector('[data-profile-status-line="true"]');
   const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
   const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
   const identityEl = topRow.querySelector('[data-profile-identity="true"]');
@@ -150,8 +153,10 @@ export function render({ navigate }) {
 
   async function refreshProfileSnapshot() {
     try {
-      status.className = 'status-line';
-      status.textContent = 'Загрузка параметров...';
+      if (statusLineEl instanceof HTMLElement) {
+        statusLineEl.className = 'status-line';
+        statusLineEl.textContent = 'Загрузка параметров...';
+      }
       const snapshot = await loadProfileSnapshot(login);
       currentFields = Array.isArray(snapshot.fields) ? snapshot.fields : [];
       currentToggles = Array.isArray(snapshot.toggles) ? snapshot.toggles : [];
@@ -161,11 +166,15 @@ export function render({ navigate }) {
       updateAvatarUi();
       updateTogglesUi();
       renderFields(currentFields);
-      status.className = 'status-line is-available';
-      status.textContent = 'Профиль обновлён.';
+      if (statusLineEl instanceof HTMLElement) {
+        statusLineEl.className = 'status-line is-available';
+        statusLineEl.textContent = 'Профиль обновлён.';
+      }
     } catch (error) {
-      status.className = 'status-line is-unavailable';
-      status.textContent = `Ошибка загрузки профиля: ${error?.message || 'unknown'}`;
+      if (statusLineEl instanceof HTMLElement) {
+        statusLineEl.className = 'status-line is-unavailable';
+        statusLineEl.textContent = `Ошибка загрузки профиля: ${error?.message || 'unknown'}`;
+      }
     }
   }
 
@@ -174,13 +183,14 @@ export function render({ navigate }) {
     const isEnabled = Boolean(item?.enabled);
     if (toggleKey === 'official') {
       status.className = 'status-line is-available';
-      status.textContent = isEnabled
+      if (statusLineEl instanceof HTMLElement) statusLineEl.className = 'status-line is-available';
+      if (statusLineEl instanceof HTMLElement) statusLineEl.textContent = isEnabled
         ? 'Аккаунт является официальным.'
         : 'Аккаунт не является официальным.';
       return;
     }
-    status.className = 'status-line is-available';
-    status.textContent = isEnabled
+    if (statusLineEl instanceof HTMLElement) statusLineEl.className = 'status-line is-available';
+    if (statusLineEl instanceof HTMLElement) statusLineEl.textContent = isEnabled
       ? 'Аккаунт является сияющим.'
       : 'Аккаунт не является сияющим.';
   };
@@ -189,7 +199,7 @@ export function render({ navigate }) {
   officialBtn?.addEventListener('click', () => showToggleInfo('official'));
   shineBtn?.addEventListener('click', () => showToggleInfo('shine'));
 
-  card.append(topRow, badgesRow, status, listWrap);
+  card.append(topRow, badgesRow, statusRow, listWrap);
   screen.append(card);
 
   updateAvatarUi();