diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 65d6f5d4b..8cb0eea1a 100644 --- a/src/components/left/main/Chat.scss +++ b/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; } } } diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index 55149786d..67423c513 100644 --- a/src/components/left/main/Chat.tsx +++ b/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; - activeChatFolder?: number; areTagsEnabled?: boolean; }; @@ -168,10 +167,9 @@ const Chat: FC = ({ isSynced, onDragEnter, isAccountFrozen, - folderIds, - orderedIds, + chatFolderIds, + orderedFolderIds, chatFoldersById, - activeChatFolder, areTagsEnabled, withTags, }) => { @@ -202,7 +200,23 @@ const Chat: FC = ({ 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 = ({ 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 = ({ )} -
+
= ({
{shouldRenderTags && ( )}
@@ -506,7 +518,7 @@ export default memo(withGlobal( } as Complete; } - const folderIds = getChatFolderIds(chatId); + const chatFolderIds = getChatFolderIds(chatId); const { areTagsEnabled } = global.chatFolders; const isPremium = selectIsCurrentUserPremium(global); @@ -542,8 +554,6 @@ export default memo(withGlobal( 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( lastMessageStory, isAccountFrozen, monoforumChannel, - folderIds, - orderedIds: global.chatFolders.orderedIds, - activeChatFolder, + chatFolderIds, + orderedFolderIds: global.chatFolders.orderedIds, chatFoldersById: global.chatFolders.byId, areTagsEnabled: areTagsEnabled && isPremium, }; diff --git a/src/components/left/main/ChatTags.module.scss b/src/components/left/main/ChatTags.module.scss index 4de26fd0d..5d47b1c16 100644 --- a/src/components/left/main/ChatTags.module.scss +++ b/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; diff --git a/src/components/left/main/ChatTags.tsx b/src/components/left/main/ChatTags.tsx index 3b5f85c83..ac1388869 100644 --- a/src/components/left/main/ChatTags.tsx +++ b/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; - 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; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 4313d469e..073f62fcc 100644 --- a/src/components/ui/ListItem.scss +++ b/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; } }