Исправить обновление непрочитанных в UI

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

@@ -729,7 +729,7 @@ function mapApiChannelRow(summary, bucketKey, idx, index, notificationsState) {
   const channelTypeVersion = Number(summary?.channel?.channelTypeVersion ?? 1);
   const isOwn = bucketKey === 'own';
   const title = displayTitle || channelName;
-  const technicalLabel = `${ownerLogin} / ${channelName}`;
+  const technicalLabel = `@${ownerLogin}/${channelName}`;
   const lastMessage = resolveChannelLastMessage(summary);
 
   return {
@@ -948,13 +948,21 @@ function renderChannelMain(channel) {
   const main = document.createElement('div');
   main.className = 'channel-row-main';
 
+  const titleLine = document.createElement('div');
+  titleLine.className = 'channel-row-title-line';
+
   const title = document.createElement('strong');
   title.className = 'channel-row-title';
   title.textContent = channel.title;
 
+  const time = document.createElement('span');
+  time.className = 'channel-row-time';
+  time.textContent = channel.lastMessageAt ? formatRelativeTime(channel.lastMessageAt) : '';
+  titleLine.append(title, time);
+
   const technical = document.createElement('p');
   technical.className = 'channel-row-technical';
-  technical.textContent = channel.technicalLabel || `${channel.ownerName || ''} / ${channel.channelName || ''}`;
+  technical.textContent = channel.technicalLabel || `@${channel.ownerName || ''}/${channel.channelName || ''}`;
 
   if (channel.channelDescription) {
     const desc = document.createElement('p');
@@ -970,16 +978,13 @@ function renderChannelMain(channel) {
   preview.className = 'channel-row-message';
   preview.textContent = channel.messagePreview || 'Ждем ваших начинаний';
 
-  const time = document.createElement('span');
-  time.className = 'channel-row-time';
-  time.textContent = channel.lastMessageAt ? formatRelativeTime(channel.lastMessageAt) : '';
-  previewLine.append(preview, time);
+  previewLine.append(preview);
 
   const meta = document.createElement('p');
   meta.className = 'channel-row-owner channel-counter-meta';
   meta.textContent = `Сообщений: ${channel.messagesCount || 0}`;
 
-  main.prepend(title, technical);
+  main.prepend(titleLine, technical);
   main.append(previewLine, meta);
   return main;
 }
@@ -1041,8 +1046,8 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
   container.append(list);
 }
 
-async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
-  renderSkeletonList(contentEl, 5);
+async function loadFeedAndRender({ screen, listState, contentEl, navigate, silent = false }) {
+  if (!silent) renderSkeletonList(contentEl, 5);
 
   if (!state.session.isAuthorized) {
     setChannelsFeed(null, {});
@@ -1092,6 +1097,7 @@ async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
       refreshFeed: async () => loadFeedAndRender({ screen, listState, contentEl, navigate }),
     });
   } catch (error) {
+    if (silent) return;
     setChannelsFeed(null, {});
     contentEl.innerHTML = '';
 
@@ -1161,6 +1167,20 @@ export function render({ navigate, route, chrome }) {
 
   const reloadFeed = async () => loadFeedAndRender({ screen, listState, contentEl, navigate });
 
+  let countersRefreshTimer = null;
+  let lastChannelsUnreadCount = Math.max(0, Number(state.userCounters?.channelsUnreadCount || 0) || 0);
+  const unsubscribeCountersChanged = authService.onEvent('UserCountersChanged', (event) => {
+    const nextChannelsUnreadCount = Math.max(0, Number(event?.payload?.channelsUnreadCount || 0) || 0);
+    if (nextChannelsUnreadCount === lastChannelsUnreadCount) return;
+    lastChannelsUnreadCount = nextChannelsUnreadCount;
+
+    if (countersRefreshTimer) window.clearTimeout(countersRefreshTimer);
+    countersRefreshTimer = window.setTimeout(() => {
+      countersRefreshTimer = null;
+      void loadFeedAndRender({ screen, listState, contentEl, navigate, silent: true });
+    }, 120);
+  });
+
   const rerenderList = () => {
     listState.viewMode = normalizeChannelsViewMode({ params: route?.params || {} });
   
@@ -1190,7 +1210,9 @@ export function render({ navigate, route, chrome }) {
   loadFeedAndRender({ screen, listState, contentEl, navigate });
 
   screen.cleanup = () => {
-      channelsFilterMenu.destroy();
+    if (countersRefreshTimer) window.clearTimeout(countersRefreshTimer);
+    unsubscribeCountersChanged();
+    channelsFilterMenu.destroy();
   };
 
   return screen;