Доработать аватары и меню UI

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

@@ -12,8 +12,8 @@ import {
   writeChannelNotificationsState,
 } from '../services/channels-ux.js';
 import { makeShineChannelRoute } from '../services/shine-routes.js';
-import { navigateBack } from '../router.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
+import { renderAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'channels-list', title: 'Каналы' };
@@ -90,6 +90,16 @@ function avatarLetterFromName(name = '') {
   return first.toUpperCase();
 }
 
+function createChannelAvatar(channel = {}) {
+  return renderAvatar({
+    initials: channel.avatar || channel.initials || avatarLetterFromName(channel.displayTitle || channel.title || channel.name),
+    avatar: channel.avaAr ? { ar: String(channel.avaAr || '').trim() } : null,
+    size: 'small',
+    title: channel.displayTitle || channel.title || channel.name || 'Канал',
+    alt: 'Аватар канала',
+  });
+}
+
 function allFeedSummaries() {
   const feed = state.channelsFeed || {};
   return [
@@ -885,7 +895,6 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
     const row = document.createElement('article');
     row.className = 'channel-row';
     row.innerHTML = `
-      <div class="avatar">${channel.avatar || channel.initials || '#'}</div>
       <div class="channel-row-main">
         <strong class="channel-row-title">${channel.title || channel.displayName || channel.name}</strong>
         <p class="channel-row-message">${channel.messagePreview || 'Ждем ваших начинаний'}</p>
@@ -894,6 +903,7 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
         <span class="channel-row-time">—</span>
       </div>
     `;
+    row.prepend(createChannelAvatar(channel));
     row.addEventListener('click', () => {
       const route = channel.route || makeShineChannelRoute({
       ownerLogin: String(channel.ownerName || 'channel'),
@@ -1203,16 +1213,7 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
     const countersVisible = listState.revealedCounters.has(channel.id);
     row.classList.toggle('is-counters-visible', countersVisible);
 
-    const avatar = document.createElement('div');
-    avatar.className = 'avatar';
-    if (channel.avaAr) {
-      const img = document.createElement('img');
-      img.alt = '';
-      img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId: channel.avaAr });
-      avatar.append(img);
-    } else {
-      avatar.textContent = channel.avatar;
-    }
+    const avatar = createChannelAvatar(channel);
 
     const main = renderChannelMain(channel);
 
@@ -1234,7 +1235,7 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
       const menuButton = document.createElement('button');
       menuButton.type = 'button';
       menuButton.className = 'channel-menu-trigger';
-      menuButton.textContent = '…';
+      menuButton.append(createOverflowDots());
       menuButton.addEventListener('click', (event) => {
         event.stopPropagation();
         animatePress(menuButton);
@@ -1370,13 +1371,6 @@ export function render({ navigate, route, chrome }) {
   const topBarLeft = document.createElement('div');
   topBarLeft.className = 'channels-top-left';
 
-  const backBtn = document.createElement('button');
-  backBtn.type = 'button';
-  backBtn.className = 'icon-btn header-back-btn channels-top-back-btn';
-  backBtn.textContent = '←';
-  backBtn.setAttribute('aria-label', 'Назад');
-  backBtn.addEventListener('click', () => navigateBack());
-
   const topTitle = document.createElement('strong');
   topTitle.className = 'channels-top-title';
 
@@ -1388,7 +1382,7 @@ export function render({ navigate, route, chrome }) {
   topMenuBtn.className = 'icon-btn channels-top-more-btn';
   topMenuBtn.setAttribute('aria-label', 'Ещё действия');
   topMenuBtn.title = 'Ещё действия';
-  topMenuBtn.textContent = '⋮';
+  topMenuBtn.append(createOverflowDots());
   topMenuBtn.addEventListener('click', (event) => {
     event.stopPropagation();
     animatePress(topMenuBtn);
@@ -1400,7 +1394,6 @@ export function render({ navigate, route, chrome }) {
     });
   });
 
-  topBarLeft.append(backBtn);
   topBarRight.append(topMenuBtn);
   topBarEl.append(topBarLeft, topTitle, topBarRight);