Middle Header: Fix not updating unread counter

src/components/main/Main.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../config';
 import {
   selectChatMessage,
-  selectCountNotMutedUnread,
+  selectCountNotMutedUnreadOptimized,
   selectIsForwardModalOpen,
   selectIsMediaViewerOpen,
   selectIsRightColumnShown,
@@ -248,7 +248,7 @@ const Main: FC<StateProps> = ({
   const handleBlur = useCallback(() => {
     updateIsOnline(false);
 
-    const initialUnread = selectCountNotMutedUnread(getGlobal());
+    const initialUnread = selectCountNotMutedUnreadOptimized(getGlobal());
     let index = 0;
 
     clearInterval(notificationInterval);
@@ -259,7 +259,7 @@ const Main: FC<StateProps> = ({
       }
 
       if (index % 2 === 0) {
-        const newUnread = selectCountNotMutedUnread(getGlobal()) - initialUnread;
+        const newUnread = selectCountNotMutedUnreadOptimized(getGlobal()) - initialUnread;
         if (newUnread > 0) {
           updatePageTitle(`${newUnread} notification${newUnread > 1 ? 's' : ''}`);
           updateIcon(true);

src/components/middle/MiddleHeader.tsx

@@ -1,7 +1,7 @@
 import React, {
-  FC, memo, useCallback, useEffect, useMemo, useRef, useState,
+  FC, memo, useCallback, useEffect, useRef, useState,
 } from '../../lib/teact/teact';
-import { getDispatch, getGlobal, withGlobal } from '../../lib/teact/teactn';
+import { getDispatch, withGlobal } from '../../lib/teact/teactn';
 import cycleRestrict from '../../util/cycleRestrict';
 
 import { GlobalState, MessageListType } from '../../global/types';
@@ -26,7 +26,6 @@ import {
   selectChat,
   selectChatMessage,
   selectChatMessages,
-  selectCountNotMutedUnread,
   selectForwardedSender,
   selectIsChatWithBot,
   selectIsChatWithSelf,
@@ -41,7 +40,6 @@ import useEnsureMessage from '../../hooks/useEnsureMessage';
 import useWindowSize from '../../hooks/useWindowSize';
 import useShowTransition from '../../hooks/useShowTransition';
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
-import { formatIntegerCompact } from '../../util/textFormat';
 import buildClassName from '../../util/buildClassName';
 import useLang from '../../hooks/useLang';
 import useConnectionStatus from '../../hooks/useConnectionStatus';
@@ -54,6 +52,7 @@ import HeaderActions from './HeaderActions';
 import HeaderPinnedMessage from './HeaderPinnedMessage';
 import AudioPlayer from './AudioPlayer';
 import GroupCallTopPane from '../calls/group/GroupCallTopPane';
+import UnreadCount from './UnreadCount';
 
 import './MiddleHeader.scss';
 
@@ -221,14 +220,6 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
     openChat, toggleLeftColumn, exitMessageSelectMode, setBackButtonActive,
   ]);
 
-  const unreadCount = useMemo(() => {
-    if (!isLeftColumnHideable) {
-      return undefined;
-    }
-
-    return selectCountNotMutedUnread(getGlobal()) || undefined;
-  }, [isLeftColumnHideable]);
-
   const canToolsCollideWithChatInfo = (
     windowWidth >= MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN
     && windowWidth < SAFE_SCREEN_WIDTH_FOR_CHAT_INFO
@@ -367,11 +358,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
         >
           <div className={buildClassName('animated-close-icon', !asClose && 'state-back')} />
         </Button>
-        {withUnreadCount && unreadCount && (
+        {withUnreadCount && <UnreadCount />}
-          <div className="unread-count active">
-            {formatIntegerCompact(unreadCount)}
-          </div>
-        )}
       </div>
     );
   }

src/components/middle/UnreadCount.tsx

@@ -0,0 +1,31 @@
+import React, { FC, memo } from '../../lib/teact/teact';
+import { withGlobal } from '../../lib/teact/teactn';
+
+import { GlobalState } from '../../global/types';
+
+import { selectCountNotMutedUnreadOptimized } from '../../modules/selectors';
+import { formatIntegerCompact } from '../../util/textFormat';
+
+type StateProps = {
+  unreadCount: number;
+};
+
+const UnreadCount: FC<StateProps> = ({
+  unreadCount,
+}) => {
+  if (!unreadCount) {
+    return undefined;
+  }
+
+  return (
+    <div className="unread-count active">{formatIntegerCompact(unreadCount)}</div>
+  );
+};
+
+export default memo(withGlobal(
+  (global: GlobalState): StateProps => {
+    return {
+      unreadCount: selectCountNotMutedUnreadOptimized(global),
+    };
+  },
+)(UnreadCount));

src/modules/actions/api/sync.ts

@@ -34,7 +34,7 @@ import {
   selectDraft,
   selectChatMessage,
   selectThreadInfo,
-  selectCountNotMutedUnread,
+  selectCountNotMutedUnreadOptimized,
   selectLastServiceNotification,
 } from '../../selectors';
 import { isUserId } from '../../helpers';
@@ -102,7 +102,7 @@ async function afterSync() {
 
   await callApi('fetchCurrentUser');
 
-  updateAppBadge(selectCountNotMutedUnread(getGlobal()));
+  updateAppBadge(selectCountNotMutedUnreadOptimized(getGlobal()));
 
   if (DEBUG) {
     // eslint-disable-next-line no-console

src/modules/actions/apiUpdaters/chats.ts

@@ -19,7 +19,7 @@ import {
   selectIsChatListed,
   selectChatListType,
   selectCurrentMessageList,
-  selectCountNotMutedUnread,
+  selectCountNotMutedUnreadOptimized,
 } from '../../selectors';
 import { throttle } from '../../../util/schedulers';
 
@@ -40,7 +40,7 @@ addReducer('apiUpdate', (global, actions, update: ApiUpdate) => {
       const newGlobal = updateChat(global, update.id, update.chat, update.newProfilePhoto);
       setGlobal(newGlobal);
 
-      runThrottledForUpdateAppBadge(() => updateAppBadge(selectCountNotMutedUnread(getGlobal())));
+      runThrottledForUpdateAppBadge(() => updateAppBadge(selectCountNotMutedUnreadOptimized(getGlobal())));
 
       if (update.chat.id) {
         closeMessageNotifications({
@@ -77,7 +77,7 @@ addReducer('apiUpdate', (global, actions, update: ApiUpdate) => {
     case 'updateChatInbox': {
       setGlobal(updateChat(global, update.id, update.chat));
 
-      runThrottledForUpdateAppBadge(() => updateAppBadge(selectCountNotMutedUnread(getGlobal())));
+      runThrottledForUpdateAppBadge(() => updateAppBadge(selectCountNotMutedUnreadOptimized(getGlobal())));
 
       break;
     }
@@ -129,7 +129,7 @@ addReducer('apiUpdate', (global, actions, update: ApiUpdate) => {
         }));
       }
 
-      updateAppBadge(selectCountNotMutedUnread(getGlobal()));
+      updateAppBadge(selectCountNotMutedUnreadOptimized(getGlobal()));
       notifyAboutNewMessage({
         chat,
         message,

src/modules/selectors/chats.ts

@@ -9,6 +9,7 @@ import {
   ALL_FOLDER_ID, ARCHIVED_FOLDER_ID, MEMBERS_LOAD_SLICE, SERVICE_NOTIFICATIONS_USER_ID,
 } from '../../config';
 import { selectNotifyExceptions, selectNotifySettings } from './settings';
+import memoized from '../../util/memoized';
 
 export function selectChat(global: GlobalState, chatId: string): ApiChat | undefined {
   return global.chats.byId[chatId];
@@ -153,19 +154,14 @@ export function selectChatByUsername(global: GlobalState, username: string) {
   );
 }
 
-// Slow, not to be used in `withGlobal`
+const selectCountNotMutedUnreadMemo = memoized((
-export function selectCountNotMutedUnread(global: GlobalState) {
+  activeChatIds: GlobalState['chats']['listIds']['active'],
-  const activeChatIds = global.chats.listIds.active;
+  chatsById: GlobalState['chats']['byId'],
-  if (!activeChatIds) {
+  notifySettings: GlobalState['settings']['byKey'],
-    return 0;
+  notifyExceptions: GlobalState['settings']['notifyExceptions'],
-  }
+) => {
-
+  return activeChatIds?.reduce((acc, chatId) => {
-  const chats = global.chats.byId;
+    const chat = chatsById[chatId];
-  const notifySettings = selectNotifySettings(global);
-  const notifyExceptions = selectNotifyExceptions(global);
-
-  return activeChatIds.reduce((acc, chatId) => {
-    const chat = chats[chatId];
 
     if (
       chat
@@ -179,7 +175,17 @@ export function selectCountNotMutedUnread(global: GlobalState) {
     }
 
     return acc;
-  }, 0);
+  }, 0) || 0;
+});
+
+// Still slow but at least memoized
+export function selectCountNotMutedUnreadOptimized(global: GlobalState) {
+  return selectCountNotMutedUnreadMemo(
+    global.chats.listIds.active,
+    global.chats.byId,
+    selectNotifySettings(global),
+    selectNotifyExceptions(global),
+  );
 }
 
 export function selectIsServiceChatReady(global: GlobalState) {