Пересобрать верхний UI-бар

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

@@ -1,4 +1,4 @@
-import { channels as mockChannels } from '../mock-data.js';
+import { channels as mockChannels } from '../mock-data.js';
 import { authService, setChannelsFeed, state } from '../state.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { parseMessageAttachments } from '../services/attachment-format.js';
@@ -939,7 +939,6 @@ function openTopChannelsMenu({
   listState,
   anchorEl,
   navigate,
-  onSubscribeChannel,
   onFindChannel,
 }) {
   closeTopChannelsMenu(listState);
@@ -951,7 +950,7 @@ function openTopChannelsMenu({
   let left = rect.right - menuWidth;
   left = Math.max(12, Math.min(left, window.innerWidth - menuWidth - 12));
 
-  const estimatedHeight = 320;
+  const estimatedHeight = 250;
   let top = rect.bottom + 8;
   if (top + estimatedHeight > window.innerHeight - 10) {
     top = Math.max(12, rect.top - estimatedHeight - 8);
@@ -968,14 +967,12 @@ function openTopChannelsMenu({
   menu.style.width = `${Math.round(menuWidth)}px`;
 
   const items = [
+    { label: 'Поиск', action: () => onFindChannel?.() },
+    { label: 'Новый канал', action: () => navigate('add-channel-view') },
+    { divider: true },
     { label: 'Все каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_ALL)) },
     { label: 'Мои каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_OWNED)) },
     { label: 'Подписки', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_FOLLOWING)) },
-    { divider: true },
-    { label: 'Новый канал', action: () => navigate('add-channel-view') },
-    { divider: true },
-    { label: 'Добавить канал', action: () => onSubscribeChannel?.() },
-    { label: 'Просмотреть канал', action: () => onFindChannel?.() },
   ];
 
   items.forEach((item) => {
@@ -1375,7 +1372,7 @@ export function render({ navigate, route, chrome }) {
 
   const backBtn = document.createElement('button');
   backBtn.type = 'button';
-  backBtn.className = 'icon-btn channels-top-back-btn';
+  backBtn.className = 'icon-btn header-back-btn channels-top-back-btn';
   backBtn.textContent = '←';
   backBtn.setAttribute('aria-label', 'Назад');
   backBtn.addEventListener('click', () => navigateBack());
@@ -1386,24 +1383,6 @@ export function render({ navigate, route, chrome }) {
   const topBarRight = document.createElement('div');
   topBarRight.className = 'channels-top-right';
 
-  const findChannelBtn = document.createElement('button');
-  findChannelBtn.type = 'button';
-  findChannelBtn.className = 'icon-btn channels-top-search-btn';
-  findChannelBtn.setAttribute('aria-label', 'Найти канал');
-  findChannelBtn.title = 'Найти канал';
-  const findChannelIcon = document.createElement('span');
-  findChannelIcon.className = 'channels-search-icon';
-  findChannelIcon.setAttribute('aria-hidden', 'true');
-  findChannelBtn.append(findChannelIcon);
-  findChannelBtn.addEventListener('click', () => openChannelFinderModal({ navigate }));
-
-  const createInMyBtn = document.createElement('button');
-  createInMyBtn.type = 'button';
-  createInMyBtn.className = 'icon-btn channels-top-add-btn';
-  createInMyBtn.textContent = '+';
-  createInMyBtn.setAttribute('aria-label', 'Создать канал');
-  createInMyBtn.addEventListener('click', () => navigate('add-channel-view'));
-
   const topMenuBtn = document.createElement('button');
   topMenuBtn.type = 'button';
   topMenuBtn.className = 'icon-btn channels-top-more-btn';
@@ -1418,18 +1397,12 @@ export function render({ navigate, route, chrome }) {
       anchorEl: topMenuBtn,
       navigate,
       onFindChannel: () => openChannelFinderModal({ navigate }),
-      onSubscribeChannel: () => openSimpleSubscribeModal({
-        kind: 'channel',
-        kindLabel: 'Добавить канал',
-        submitLabel: 'Добавить',
-        onSuccess: async () => loadFeedAndRender({ screen, listState, contentEl, navigate }),
-      }),
     });
   });
 
-  topBarLeft.append(backBtn, topTitle);
-  topBarRight.append(findChannelBtn, createInMyBtn, topMenuBtn);
-  topBarEl.append(topBarLeft, topBarRight);
+  topBarLeft.append(backBtn);
+  topBarRight.append(topMenuBtn);
+  topBarEl.append(topBarLeft, topTitle, topBarRight);
 
   const bottomCta = document.createElement('button');
   bottomCta.type = 'button';
@@ -1450,10 +1423,8 @@ export function render({ navigate, route, chrome }) {
     });
 
     topTitle.textContent = channelsViewTitle(listState.viewMode);
-    findChannelBtn.style.display = '';
-    createInMyBtn.style.display = '';
     topMenuBtn.style.display = '';
-    if (topTitle.parentElement !== topBarLeft) topBarLeft.append(topTitle);
+    if (topTitle.parentElement !== topBarEl) topBarEl.insertBefore(topTitle, topBarRight);
 
     updateBottomCta({ button: bottomCta });
   };