Chat: Fix height with folder tags (#6262)

src/components/left/main/Chat.scss

@@ -336,8 +336,11 @@
 
     &.has-tags {
       line-height: 1.375rem;
-      .info-row {
-        height: 1.25rem;
+
+      .ChatBadge {
+        min-width: 1.375rem;
+        height: 1.375rem;
+        line-height: 1.5rem;
       }
     }
   }

src/components/left/main/Chat.tsx

@@ -20,7 +20,7 @@ import type { ChatAnimationTypes } from './hooks';
 import { MAIN_THREAD_ID } from '../../../api/types';
 import { StoryViewerOrigin } from '../../../types';
 
-import { UNMUTE_TIMESTAMP } from '../../../config';
+import { ALL_FOLDER_ID, UNMUTE_TIMESTAMP } from '../../../config';
 import {
   groupStatefulContent,
   isUserOnline,
@@ -124,10 +124,9 @@ type StateProps = {
   currentUserId: string;
   isSynced?: boolean;
   isAccountFrozen?: boolean;
-  folderIds?: number[];
-  orderedIds?: number[];
+  chatFolderIds?: number[];
+  orderedFolderIds?: number[];
   chatFoldersById?: Record<number, ApiChatFolder>;
-  activeChatFolder?: number;
   areTagsEnabled?: boolean;
 };
 
@@ -168,10 +167,9 @@ const Chat: FC<OwnProps & StateProps> = ({
   isSynced,
   onDragEnter,
   isAccountFrozen,
-  folderIds,
-  orderedIds,
+  chatFolderIds,
+  orderedFolderIds,
   chatFoldersById,
-  activeChatFolder,
   areTagsEnabled,
   withTags,
 }) => {
@@ -202,7 +200,23 @@ const Chat: FC<OwnProps & StateProps> = ({
 
   useEnsureMessage(isSavedDialog ? currentUserId : chatId, lastMessageId, lastMessage);
 
-  const shouldRenderTags = areTagsEnabled && withTags && folderIds && folderIds.length > 1;
+  const tagFolderIds = useMemo(() => {
+    const chatFolderIdsSet = new Set(chatFolderIds);
+
+    return orderedFolderIds?.filter((id) => {
+      if (!chatFolderIdsSet.has(id)) return undefined;
+
+      const isActive = id === folderId;
+      const isAll = id === ALL_FOLDER_ID;
+
+      const folder = chatFoldersById?.[id];
+      const hasColor = folder?.color !== undefined && folder.color !== -1;
+
+      return !isActive && !isAll && hasColor;
+    });
+  }, [orderedFolderIds, folderId, chatFoldersById, chatFolderIds]);
+
+  const shouldRenderTags = areTagsEnabled && withTags && Boolean(tagFolderIds?.length);
 
   const { renderSubtitle, ref } = useChatListEntry({
     chat,
@@ -372,7 +386,7 @@ const Chat: FC<OwnProps & StateProps> = ({
     isSelected && 'selected',
     isSelectedForum && 'selected-forum',
     isPreview && 'standalone',
-    shouldRenderTags && 'chat-item-with-tags',
+    areTagsEnabled && withTags && 'chat-item-with-tags',
     className,
   );
 
@@ -420,7 +434,7 @@ const Chat: FC<OwnProps & StateProps> = ({
           <ChatCallStatus isMobile={isMobile} isSelected={isSelected} isActive={withInterfaceAnimations} />
         )}
       </div>
-      <div className={buildClassName('info', shouldRenderTags && 'has-tags')}>
+      <div className={buildClassName('info', areTagsEnabled && withTags && 'has-tags')}>
         <div className="info-row">
           <FullNameTitle
             peer={isMonoforum ? monoforumChannel! : peer}
@@ -458,10 +472,8 @@ const Chat: FC<OwnProps & StateProps> = ({
         </div>
         {shouldRenderTags && (
           <ChatTags
-            folderIds={folderIds}
-            orderedIds={orderedIds}
+            orderedFolderIds={tagFolderIds}
             chatFoldersById={chatFoldersById}
-            activeChatFolder={activeChatFolder}
           />
         )}
       </div>
@@ -506,7 +518,7 @@ export default memo(withGlobal<OwnProps>(
       } as Complete<StateProps>;
     }
 
-    const folderIds = getChatFolderIds(chatId);
+    const chatFolderIds = getChatFolderIds(chatId);
     const { areTagsEnabled } = global.chatFolders;
     const isPremium = selectIsCurrentUserPremium(global);
 
@@ -542,8 +554,6 @@ export default memo(withGlobal<OwnProps>(
 
     const monoforumChannel = selectMonoforumChannel(global, chatId);
 
-    const activeChatFolder = selectTabState(global).activeChatFolder;
-
     return {
       chat,
       isMuted: getIsChatMuted(chat, selectNotifyDefaults(global), selectNotifyException(global, chat.id)),
@@ -569,9 +579,8 @@ export default memo(withGlobal<OwnProps>(
       lastMessageStory,
       isAccountFrozen,
       monoforumChannel,
-      folderIds,
-      orderedIds: global.chatFolders.orderedIds,
-      activeChatFolder,
+      chatFolderIds,
+      orderedFolderIds: global.chatFolders.orderedIds,
       chatFoldersById: global.chatFolders.byId,
       areTagsEnabled: areTagsEnabled && isPremium,
     };

src/components/left/main/ChatTags.module.scss

@@ -1,7 +1,8 @@
 .wrapper {
   display: flex;
   gap: 0.25rem;
-  padding-top: 0.25rem;
+  height: 0.875rem;
+  margin-top: 0.125rem;
 }
 
 .tag {
@@ -16,12 +17,12 @@
   justify-content: center;
 
   min-width: 1.5rem;
-  padding: 0.0625rem 0.25rem;
+  padding: 0 0.25rem;
   border-radius: 0.25rem;
 
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: var(--font-weight-medium);
-  line-height: 0.75rem;
+  line-height: 1;
   color: var(--accent-color);
   text-align: center;
   text-transform: uppercase;

src/components/left/main/ChatTags.tsx

@@ -1,8 +1,7 @@
-import { memo, useMemo } from '../../../lib/teact/teact';
+import { memo } from '../../../lib/teact/teact';
 
 import type { ApiChatFolder } from '../../../api/types';
 
-import { ALL_FOLDER_ID } from '../../../config';
 import buildClassName from '../../../util/buildClassName';
 import { getApiPeerColorClass } from '../../common/helpers/peerColor';
 import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
@@ -12,30 +11,17 @@ import styles from './ChatTags.module.scss';
 const MAX_VISIBLE_TAGS = 3;
 
 type OwnProps = {
-  folderIds?: number[];
-  orderedIds?: number[];
+  orderedFolderIds?: number[];
   chatFoldersById?: Record<number, ApiChatFolder>;
-  activeChatFolder?: number;
 };
 
 const ChatTags = ({
-  folderIds,
-  orderedIds,
+  orderedFolderIds,
   chatFoldersById,
-  activeChatFolder,
 }: OwnProps) => {
-  const activeFolderId = activeChatFolder !== undefined && orderedIds ? orderedIds[activeChatFolder] : undefined;
-
-  const orderedFolderIds = useMemo(() => orderedIds?.filter((id) => {
-    const isFolder = folderIds?.includes(id);
-    const isActive = id === activeFolderId;
-    const isAll = id === ALL_FOLDER_ID;
-
-    const folder = chatFoldersById?.[id];
-    const hasColor = folder?.color !== undefined && folder.color !== -1;
-
-    return isFolder && !isActive && !isAll && hasColor;
-  }) || [], [orderedIds, folderIds, activeFolderId, chatFoldersById]);
+  if (!orderedFolderIds) {
+    return undefined;
+  }
 
   const visibleFolderIds = orderedFolderIds.slice(0, MAX_VISIBLE_TAGS);
   const remainingCount = orderedFolderIds.length - visibleFolderIds.length;

src/components/ui/ListItem.scss

@@ -225,7 +225,9 @@
 
     &.chat-item-with-tags {
       .ListItem-button {
+        height: 72px;
         padding: 0.375rem 0.5625rem;
+        align-items: flex-start;
       }
     }