From c96d05bd9f06c6e68606c660ae3c07613b5683cf Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 8 Mar 2024 12:48:48 +0100
Subject: [PATCH] Topics: Show messages count in topic title (#4344)

---
 src/api/gramjs/methods/messages.ts      |  2 ++
 src/components/common/GroupChatInfo.tsx | 10 +++++++++-
 src/components/middle/MiddleHeader.scss |  4 ++++
 src/global/actions/api/messages.ts      |  8 +++++++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/api/gramjs/methods/messages.ts b/src/api/gramjs/methods/messages.ts
index ee4f6af94..b02562f04 100644
--- a/src/api/gramjs/methods/messages.ts
+++ b/src/api/gramjs/methods/messages.ts
@@ -165,12 +165,14 @@ export async function fetchMessages({
   const messages = result.messages.map(buildApiMessage).filter(Boolean);
   const users = result.users.map(buildApiUser).filter(Boolean);
   const chats = result.chats.map((c) => buildApiChatFromPreview(c)).filter(Boolean);
+  const count = !(result instanceof GramJs.messages.Messages) && result.count;
   dispatchThreadInfoUpdates(result.messages);
 
   return {
     messages,
     users,
     chats,
+    count,
   };
 }
 
diff --git a/src/components/common/GroupChatInfo.tsx b/src/components/common/GroupChatInfo.tsx
index dbb053cd6..e1aca8926 100644
--- a/src/components/common/GroupChatInfo.tsx
+++ b/src/components/common/GroupChatInfo.tsx
@@ -29,6 +29,7 @@ import renderText from './helpers/renderText';
 import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 
+import Transition from '../ui/Transition';
 import Avatar from './Avatar';
 import DotAnimation from './DotAnimation';
 import FullNameTitle from './FullNameTitle';
@@ -172,7 +173,14 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
     if (isTopic) {
       return (
         <span className="status" dir="auto">
-          {messagesCount ? lang('messages', messagesCount, 'i') : renderText(chat.title)}
+          <Transition
+            name="fade"
+            shouldRestoreHeight
+            activeKey={messagesCount !== undefined ? 1 : 2}
+            className="message-count-transition"
+          >
+            {messagesCount !== undefined && lang('messages', messagesCount, 'i')}
+          </Transition>
         </span>
       );
     }
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 3b25346c8..7b724b765 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@@ -275,6 +275,10 @@
       max-width: 2.625rem !important;
       max-height: 2.625rem !important;
     }
+
+    .message-count-transition {
+      height: 1.125rem;
+    }
   }
 
   .Avatar, .topic-header-icon {
diff --git a/src/global/actions/api/messages.ts b/src/global/actions/api/messages.ts
index a77438858..a1bd80321 100644
--- a/src/global/actions/api/messages.ts
+++ b/src/global/actions/api/messages.ts
@@ -1237,7 +1237,7 @@ async function loadViewportMessages<T extends GlobalState>(
   }
 
   const {
-    messages, users, chats,
+    messages, users, chats, count,
   } = result;
 
   global = getGlobal();
@@ -1284,6 +1284,12 @@ async function loadViewportMessages<T extends GlobalState>(
     }
   }
 
+  if (count) {
+    global = updateThreadInfo(global, chat.id, threadId, {
+      messagesCount: count,
+    });
+  }
+
   setGlobal(global);
   onLoaded?.();
 }