UI: обновлена шапка каналов, закрыты pending-задачи и обновлены версии

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

@@ -1173,34 +1173,52 @@ export function render({ navigate, route }) {
   const topBarEl = document.createElement('div');
   topBarEl.className = 'channels-top-bar';
 
-  const tabsEl = document.createElement('div');
-  tabsEl.className = 'channels-tabs';
-  const tabLabels = {
-    feed: 'Каналы',
-    my: 'Мои каналы',
-  };
-  TAB_ORDER.forEach((tabKey) => {
-    if (isGuest && tabKey === 'my') return;
-    const tabBtn = document.createElement('button');
-    tabBtn.type = 'button';
-    tabBtn.className = `channels-tab-btn${listState.activeTab === tabKey ? ' is-active' : ''}`;
-    tabBtn.textContent = tabLabels[tabKey] || tabKey;
-    tabBtn.addEventListener('click', () => {
-      if (listState.activeTab === tabKey) return;
-      listState.activeTab = tabKey;
-      rerenderList();
-    });
-    tabsEl.append(tabBtn);
+  const topBarLeft = document.createElement('div');
+  topBarLeft.className = 'channels-top-left';
+
+  const backToFeedBtn = document.createElement('button');
+  backToFeedBtn.type = 'button';
+  backToFeedBtn.className = 'icon-btn channels-top-back-btn';
+  backToFeedBtn.textContent = '←';
+  backToFeedBtn.setAttribute('aria-label', 'Назад');
+  backToFeedBtn.addEventListener('click', () => {
+    if (listState.activeTab === 'feed') return;
+    listState.activeTab = 'feed';
+    rerenderList();
   });
 
-  const topActionBtn = document.createElement('button');
-  topActionBtn.type = 'button';
-  topActionBtn.className = 'secondary-btn channels-top-action-btn';
-  topActionBtn.textContent = 'Создать канал';
-  topActionBtn.addEventListener('click', () => navigate('add-channel-view'));
-  if (isGuest) topActionBtn.style.display = 'none';
+  const allChannelsBtn = document.createElement('button');
+  allChannelsBtn.type = 'button';
+  allChannelsBtn.className = 'secondary-btn channels-top-switch-btn';
+  allChannelsBtn.textContent = 'Все каналы';
+  allChannelsBtn.addEventListener('click', () => {
+    if (listState.activeTab === 'feed') return;
+    listState.activeTab = 'feed';
+    rerenderList();
+  });
 
-  topBarEl.append(tabsEl, topActionBtn);
+  const topTitle = document.createElement('strong');
+  topTitle.className = 'channels-top-title';
+
+  const myChannelsBtn = document.createElement('button');
+  myChannelsBtn.type = 'button';
+  myChannelsBtn.className = 'secondary-btn channels-top-switch-btn';
+  myChannelsBtn.textContent = 'Мои каналы';
+  myChannelsBtn.addEventListener('click', () => {
+    if (listState.activeTab === 'my') return;
+    listState.activeTab = 'my';
+    rerenderList();
+  });
+
+  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'));
+
+  topBarLeft.append(backToFeedBtn, allChannelsBtn, topTitle, myChannelsBtn);
+  topBarEl.append(topBarLeft, createInMyBtn);
 
   const bottomCta = document.createElement('button');
   bottomCta.type = 'button';
@@ -1229,8 +1247,19 @@ export function render({ navigate, route }) {
       refreshFeed: reloadFeed,
     });
 
-    const showCreate = !isGuest && listState.activeTab === 'my';
-    topActionBtn.style.display = showCreate ? '' : 'none';
+    if (listState.activeTab === 'my' && !isGuest) {
+      backToFeedBtn.style.display = '';
+      allChannelsBtn.style.display = '';
+      myChannelsBtn.style.display = 'none';
+      topTitle.textContent = 'Мои каналы';
+      createInMyBtn.style.display = '';
+    } else {
+      backToFeedBtn.style.display = 'none';
+      allChannelsBtn.style.display = 'none';
+      myChannelsBtn.style.display = isGuest ? 'none' : '';
+      topTitle.textContent = 'Каналы';
+      createInMyBtn.style.display = 'none';
+    }
 
     updateBottomCta({
       button: bottomCta,
@@ -1238,10 +1267,6 @@ export function render({ navigate, route }) {
       navigate,
       isTabEmpty,
     });
-    tabsEl.querySelectorAll('.channels-tab-btn').forEach((btn, idx) => {
-      const key = TAB_ORDER[idx];
-      btn.classList.toggle('is-active', key === listState.activeTab);
-    });
   };
 
   let touchStartX = 0;
@@ -1262,6 +1287,7 @@ export function render({ navigate, route }) {
     if (index < 0) return;
     if (dx < 0 && index < TAB_ORDER.length - 1) listState.activeTab = TAB_ORDER[index + 1];
     if (dx > 0 && index > 0) listState.activeTab = TAB_ORDER[index - 1];
+    if (isGuest && listState.activeTab === 'my') listState.activeTab = 'feed';
     rerenderList();
   }, { passive: true });