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

VERSION.properties

@@ -1,2 +1,2 @@
-client.version=1.5.31
+client.version=1.5.32
 server.version=1.4.10

shine-UI/index.html

@@ -40,7 +40,9 @@ window.__SHINE_BUILD_HASH__ = '20260806223040';
       <div class="initial-splash__brand">Сияние</div>
     </div>
     <div class="app-shell">
+      <div id="topbar-slot" class="topbar-slot" hidden></div>
       <main id="app-screen" class="screen-content"></main>
+      <div id="composer-slot" class="composer-slot" hidden></div>
       <div id="toolbar-slot" class="toolbar-slot"></div>
     </div>
     <div id="modal-root"></div>

shine-UI/js/app.js

@@ -151,6 +151,8 @@ const routes = {
 };
 
 const screenEl = document.getElementById('app-screen');
+const topbarEl = document.getElementById('topbar-slot');
+const composerEl = document.getElementById('composer-slot');
 const toolbarEl = document.getElementById('toolbar-slot');
 const appShellEl = document.querySelector('.app-shell');
 const initialSplashEl = document.getElementById('initial-splash');
@@ -181,6 +183,7 @@ let hiddenDmAudioContext = null;
 let hiddenDmAudioUnlocked = false;
 let initialConnectionCompleted = false;
 let orientationLockInFlight = false;
+let currentChromeCleanup = null;
 const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1';
 const GUEST_ALLOWED_PAGES = new Set([
   'start-view',
@@ -204,6 +207,86 @@ initPwaInstallPromptHandling();
 initCallUiOverlay();
 setCallDebugReporter((payload) => authService.reportClientDebug(payload));
 
+function setShellMetricVar(name, valuePx) {
+  if (!appShellEl) return;
+  appShellEl.style.setProperty(name, `${Math.max(0, Math.ceil(Number(valuePx || 0)))}px`);
+}
+
+function attachSlotHeightObserver(slotEl, cssVarName) {
+  if (!slotEl || typeof ResizeObserver !== 'function') return null;
+  const sync = () => {
+    const visible = !slotEl.hidden && slotEl.childElementCount > 0;
+    setShellMetricVar(cssVarName, visible ? slotEl.offsetHeight : 0);
+  };
+  const observer = new ResizeObserver(sync);
+  observer.observe(slotEl);
+  sync();
+  return { observer, sync };
+}
+
+const topbarHeightObserver = attachSlotHeightObserver(topbarEl, '--topbar-height');
+const composerHeightObserver = attachSlotHeightObserver(composerEl, '--composer-height');
+const toolbarHeightObserver = attachSlotHeightObserver(toolbarEl, '--toolbar-height');
+
+function clearSlot(slotEl, cssVarName) {
+  if (!slotEl) return;
+  slotEl.innerHTML = '';
+  slotEl.hidden = true;
+  setShellMetricVar(cssVarName, 0);
+}
+
+function mountSlot(slotEl, cssVarName, node) {
+  if (!slotEl) return;
+  slotEl.innerHTML = '';
+  if (node instanceof Node) {
+    slotEl.append(node);
+    slotEl.hidden = false;
+  } else {
+    slotEl.hidden = true;
+  }
+  setShellMetricVar(cssVarName, !slotEl.hidden ? slotEl.offsetHeight : 0);
+}
+
+function createChromeController(showAppChrome) {
+  let topbarNode = null;
+  let composerNode = null;
+  let disposed = false;
+
+  const apply = () => {
+    if (disposed) return;
+    if (!showAppChrome) {
+      clearSlot(topbarEl, '--topbar-height');
+      clearSlot(composerEl, '--composer-height');
+      return;
+    }
+    mountSlot(topbarEl, '--topbar-height', topbarNode);
+    mountSlot(composerEl, '--composer-height', composerNode);
+    topbarHeightObserver?.sync?.();
+    composerHeightObserver?.sync?.();
+  };
+
+  return {
+    setTopbar(node = null) {
+      topbarNode = node instanceof Node ? node : null;
+      apply();
+    },
+    setComposer(node = null) {
+      composerNode = node instanceof Node ? node : null;
+      apply();
+    },
+    clear() {
+      topbarNode = null;
+      composerNode = null;
+      apply();
+    },
+    dispose() {
+      disposed = true;
+      clearSlot(topbarEl, '--topbar-height');
+      clearSlot(composerEl, '--composer-height');
+    },
+  };
+}
+
 async function unlockHiddenDmAudio() {
   try {
     const Ctx = window.AudioContext || window.webkitAudioContext;
@@ -908,7 +991,14 @@ function renderPageFailureFallback(pageId, error) {
   screenEl.append(wrap);
 
   screenEl.classList.toggle('no-app-chrome', false);
+  if (typeof currentChromeCleanup === 'function') {
+    currentChromeCleanup();
+    currentChromeCleanup = null;
+  }
+  clearSlot(topbarEl, '--topbar-height');
+  clearSlot(composerEl, '--composer-height');
   toolbarEl.innerHTML = '';
+  toolbarHeightObserver?.sync?.();
   refreshConnectionUi();
 }
 
@@ -932,10 +1022,17 @@ function renderApp() {
     currentCleanup();
     currentCleanup = null;
   }
+  if (typeof currentChromeCleanup === 'function') {
+    currentChromeCleanup();
+    currentChromeCleanup = null;
+  }
 
   try {
     screenEl.innerHTML = '';
-    const screen = page.render({ route, navigate });
+    const showAppChrome = page.pageMeta?.showAppChrome !== false;
+    const chrome = createChromeController(showAppChrome);
+    currentChromeCleanup = () => chrome.dispose();
+    const screen = page.render({ route, navigate, chrome });
     if (!(screen instanceof Node)) {
       throw new Error('Page render returned invalid node');
     }
@@ -943,7 +1040,6 @@ function renderApp() {
     screenEl.append(screen);
     currentCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null;
 
-    const showAppChrome = page.pageMeta?.showAppChrome !== false;
     screenEl.classList.toggle('no-app-chrome', !showAppChrome);
     screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId));
 
@@ -951,6 +1047,7 @@ function renderApp() {
     if (showAppChrome) {
       toolbarEl.append(renderToolbar(page.pageMeta.id, navigate));
     }
+    toolbarHeightObserver?.sync?.();
     refreshConnectionUi();
   } catch (error) {
     console.error('[renderApp] controlled fallback', error);
@@ -968,6 +1065,7 @@ function refreshToolbarOnly() {
   if (showAppChrome) {
     toolbarEl.append(renderToolbar(page.pageMeta.id, navigate));
   }
+  toolbarHeightObserver?.sync?.();
   refreshConnectionUi();
 }
 

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,15 +92,18 @@ 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');
+  const topbar = document.createElement('header');
-  topActions.className = 'profile-top-actions';
+  topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
-  topActions.innerHTML = `
+  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>
@@ -110,10 +113,13 @@ export function render({ navigate }) {
       <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();

shine-UI/styles/components.css

@@ -13,6 +13,37 @@
   padding-top: max(0px, env(safe-area-inset-top));
 }
 
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  margin-bottom: 0;
+  border-radius: 18px;
+  background: rgba(14, 21, 35, 0.92);
+  border: 1px solid rgba(212, 175, 55, 0.18);
+  box-shadow: 0 10px 26px rgba(4, 8, 16, 0.28);
+  backdrop-filter: blur(14px);
+}
+
+.topbar-slot .page-header {
+  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
+}
+
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  padding-top: calc(10px + env(safe-area-inset-top));
+  padding-bottom: 10px;
+}
+
+.app-topbar-shell .page-title {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.app-topbar-shell .header-left,
+.app-topbar-shell .header-actions {
+  min-width: 92px;
+}
+
 .page-title {
   font-size: 22px;
   font-weight: 700;
@@ -1561,7 +1592,7 @@
 }
 
 .toolbar-btn-profile .toolbar-label-wrap {
-  padding-bottom: 6px;
+  padding-bottom: 0;
 }
 
 .toolbar-btn-profile .toolbar-connection-indicator {

shine-UI/styles/layout.css

@@ -25,6 +25,9 @@ body::before {
   height: 100dvh;
   position: relative;
   --call-minimized-bar-height: 0px;
+  --topbar-height: 0px;
+  --composer-height: 0px;
+  --toolbar-height: 78px;
   background: transparent;
   border-left: 1px solid rgba(211, 170, 86, 0.2);
   border-right: 1px solid rgba(211, 170, 86, 0.2);
@@ -33,6 +36,8 @@ body::before {
 }
 
 .screen-content,
+.topbar-slot,
+.composer-slot,
 .toolbar-slot,
 .connection-retry-banner {
   z-index: 1;
@@ -40,15 +45,16 @@ body::before {
 
 .screen-content {
   position: absolute;
-  top: var(--call-minimized-bar-height, 0px);
+  top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px));
   left: 0;
   right: 0;
-  bottom: 62px;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
   overflow-y: auto;
   padding: 14px 14px 24px;
 }
 
 .screen-content.no-app-chrome {
+  top: var(--call-minimized-bar-height, 0px);
   bottom: 0;
   padding-bottom: calc(24px + env(safe-area-inset-bottom));
 }
@@ -62,6 +68,36 @@ body::before {
   padding: 0;
 }
 
+.topbar-slot[hidden],
+.composer-slot[hidden] {
+  display: none;
+}
+
+.topbar-slot {
+  position: absolute;
+  top: var(--call-minimized-bar-height, 0px);
+  left: 0;
+  right: 0;
+  padding: 0 12px;
+  pointer-events: none;
+}
+
+.topbar-slot > * {
+  pointer-events: auto;
+}
+
+.composer-slot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
+  padding: 0 12px 8px;
+  pointer-events: none;
+}
+
+.composer-slot > * {
+  pointer-events: auto;
+}
 
 .toolbar-slot {
   position: absolute;
@@ -74,10 +110,15 @@ body::before {
 }
 
 body.chat-keyboard-open .screen-content {
-  bottom: 0;
+  bottom: var(--composer-height, 0px);
   padding-bottom: calc(14px + env(safe-area-inset-bottom));
 }
 
+body.chat-keyboard-open .composer-slot {
+  bottom: 0;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom));
+}
+
 body.chat-keyboard-open .toolbar-slot {
   opacity: 0;
   pointer-events: none;