UI: общий верхний и нижний тулбар

shine-UI/js/pages/channel-thread-view.js

@@ -1114,7 +1114,7 @@ function renderSkeleton(screen) {
   return wrap;
 }
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome }) {
   const selector = parseThreadSelector(route);
   const channelDisplayName = resolveChannelDisplayName(selector?.channel);
   const routeKey = `${selector?.message?.blockchainName || ''}:${selector?.message?.blockNumber || ''}:${selector?.message?.blockHash || ''}`;
@@ -1134,6 +1134,7 @@ export function render({ navigate, route }) {
     threadHeaderButton.classList.add('channel-header-route-btn');
     threadHeaderButton.disabled = true;
   }
+  chrome?.setTopbar(header);
 
   const statusBox = document.createElement('div');
   statusBox.className = 'card status-line is-unavailable channels-status';
@@ -1309,7 +1310,7 @@ export function render({ navigate, route }) {
     },
   };
 
-  screen.append(header, statusBox);
+  screen.append(statusBox);
 
   if (!selector) {
     const invalid = document.createElement('div');

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

@@ -2008,7 +2008,7 @@ function renderSkeleton(screen) {
   return wrap;
 }
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome }) {
   const channelId = route.params.channelId || '';
   const routeSelector = buildSelectorFromRoute(route, channelId);
   const routeKey = `${routeSelector?.ownerBlockchainName || ''}:${routeSelector?.channelRootBlockNumber || ''}:${routeSelector?.channelRootBlockHash || ''}`;
@@ -2049,6 +2049,7 @@ export function render({ navigate, route }) {
     channelEntrypointButton.disabled = true;
     channelEntrypointButton.hidden = true;
   }
+  chrome?.setTopbar(header);
 
   const rerender = () => {
     const current = document.querySelector('section.channels-screen--channel');
@@ -2282,7 +2283,6 @@ export function render({ navigate, route }) {
     rerender();
   };
 
-  screen.append(header);
   screen.append(statusBox);
 
   const skeleton = renderSkeleton(screen);

shine-UI/js/pages/channels-list.js

@@ -1213,7 +1213,7 @@ async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
   }
 }
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome }) {
   const screen = document.createElement('section');
   screen.className = 'stack channels-screen channels-screen--list';
   const appScreen = document.getElementById('app-screen');
@@ -1310,7 +1310,8 @@ export function render({ navigate, route }) {
     updateBottomCta({ button: bottomCta });
   };
 
-  screen.append(topBarEl, contentEl, bottomCta);
+  chrome?.setTopbar(topBarEl);
+  screen.append(contentEl, bottomCta);
 
   if (createSuccessFlash) {
     showToast(createSuccessFlash);

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

@@ -785,7 +785,7 @@ function setChatKeyboardOpen(isOpen) {
   document.body.classList.toggle('chat-keyboard-open', !!isOpen);
 }
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome }) {
   const routeChatId = route.params.chatId || 'u1';
   const chatId = normalizeDmChatId(routeChatId) || 'u1';
   const contact = directMessages.find((d) => normalizeDmChatId(d.id) === chatId) || {
@@ -871,7 +871,7 @@ export function render({ navigate, route }) {
   const log = document.createElement('div');
   log.className = 'messages-log dm-messages-log';
 
-  screen.append(
+  chrome?.setTopbar(
     renderHeader({
       title: `Чат с ${contact.name}`,
       leftAction: { label: '←', onClick: () => navigate('messages-list') },
@@ -941,7 +941,7 @@ export function render({ navigate, route }) {
           },
         },
       ],
-    })
+    }),
   );
 
   if (!isKnownContact) {
@@ -1490,7 +1490,8 @@ export function render({ navigate, route }) {
   window.visualViewport?.addEventListener('resize', syncKeyboardUi);
   window.addEventListener('resize', syncKeyboardUi);
 
-  wrap.append(historyLoader, log, form);
+  chrome?.setComposer(form);
+  wrap.append(historyLoader, log);
   screen.append(wrap);
   renderLog(log, chatId, {
     onOpenActions: handleOpenActions,

shine-UI/js/pages/messages-list.js

@@ -84,7 +84,7 @@ function formatChatRowTime(ts) {
 
 const SVG_CHEVRON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>';
 
-export function render({ navigate }) {
+export function render({ navigate, chrome }) {
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-list-screen';
   const login = String(state.session.login || '').trim();
@@ -248,7 +248,8 @@ export function render({ navigate }) {
     }
   }
 
-  screen.append(head, divider, list);
+  chrome?.setTopbar(head);
+  screen.append(divider, list);
   loadList();
   return screen;
 }

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

@@ -87,13 +87,13 @@ function escapeHtml(text) {
     .replaceAll("'", ''');
 }
 
-export function render({ navigate }) {
+export function render({ navigate, chrome }) {
   const login = state.session.login || profile.login;
 
   const screen = document.createElement('section');
   screen.className = 'stack profile-screen';
 
-  screen.append(
+  chrome?.setTopbar(
     renderHeader({
       title: 'Редактирование профиля',
       leftAction: { label: '←', onClick: () => navigate('profile-view') },

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

@@ -92,28 +92,34 @@ function shineInfoText() {
     + '5) сияющие заботятся о мире: о людях, гармонии и общем благе.';
 }
 
-export function render({ navigate }) {
+export function render({ navigate, chrome }) {
   const login = state.session.login || profile.login;
 
   const screen = document.createElement('section');
   screen.className = 'stack profile-screen';
 
-  const topActions = document.createElement('div');
-  topActions.className = 'profile-top-actions';
-  topActions.innerHTML = `
-    <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="profile" aria-label="Редактировать профиль" title="Редактировать профиль">
-      <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
-    </button>
-    <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="wallet" aria-label="Кошелёк" title="Кошелёк">
-      <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
-    </button>
-    <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="settings" aria-label="Настройки" title="Настройки">
-      <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
-    </button>
+  const topbar = document.createElement('header');
+  topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
+  topbar.innerHTML = `
+    <div class="header-left"></div>
+    <h1 class="page-title">Профиль пользователя</h1>
+    <div class="header-actions profile-top-actions">
+      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="profile" aria-label="Редактировать профиль" title="Редактировать профиль">
+        <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
+      </button>
+      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="wallet" aria-label="Кошелёк" title="Кошелёк">
+        <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
+      </button>
+      <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="settings" aria-label="Настройки" title="Настройки">
+        <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
+      </button>
+    </div>
   `;
+  const topActions = topbar.querySelector('.profile-top-actions');
   topActions.querySelector('[data-top-action="profile"]')?.addEventListener('click', () => navigate('profile-edit-view'));
-  topActions.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => navigate('wallet'));
+  topActions.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => navigate('wallet-view'));
   topActions.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => navigate('settings-view'));
+  chrome?.setTopbar(topbar);
 
   const card = document.createElement('div');
   card.className = 'card stack profile-main-card';
@@ -264,7 +270,7 @@ export function render({ navigate }) {
     }
   }
 
-  card.append(topActions, topRow, badgesRow, listWrap);
+  card.append(topRow, badgesRow, listWrap);
   screen.append(card);
 
   updateAvatarUi();