From a9649de41293517e50a74f51a69608f9e23db472 Mon Sep 17 00:00:00 2001 From: zubiden <19638254+zubiden@users.noreply.github.com> Date: Sun, 29 Dec 2024 11:59:08 +0100 Subject: [PATCH] Search: Fix offset avatars (#5362) --- ...SelectedItem.scss => PeerChip.module.scss} | 51 +++++--------- .../PickerSelectedItem.tsx => PeerChip.tsx} | 69 ++++++++++--------- .../common/embedded/EmbeddedMessage.tsx | 8 +-- .../common/embedded/EmbeddedStory.tsx | 4 +- .../common/embedded/EmbeddedStoryForward.tsx | 4 +- src/components/common/pickers/PeerPicker.tsx | 11 +-- .../common/pickers/PickerStyles.module.scss | 4 ++ src/components/left/main/LeftMainHeader.scss | 5 ++ src/components/left/main/LeftMainHeader.tsx | 9 +-- src/components/left/search/ChatResults.tsx | 5 +- src/components/left/search/LeftSearch.scss | 5 +- .../left/search/helpers/getSenderName.ts | 4 +- src/components/mediaViewer/SenderInfo.tsx | 4 +- .../middle/message/Giveaway.module.scss | 1 - src/components/middle/message/Giveaway.tsx | 6 +- src/components/middle/message/Message.tsx | 8 +-- .../middle/message/StoryMention.tsx | 4 +- src/components/middle/panes/AudioPlayer.tsx | 4 +- .../middle/panes/HeaderPinnedMessage.tsx | 4 +- src/components/middle/search/MiddleSearch.tsx | 8 +-- .../collectible/CollectibleInfoModal.tsx | 4 +- .../modals/common/TableInfoModal.module.scss | 1 - .../modals/common/TableInfoModal.tsx | 4 +- .../modals/stars/StarsPaymentModal.tsx | 4 +- .../modals/stars/gift/StarsGiftModal.tsx | 4 +- .../subscription/StarsSubscriptionItem.tsx | 4 +- .../transaction/StarsTransactionItem.tsx | 4 +- .../suggestedStatus/SuggestedStatusModal.tsx | 4 +- src/components/story/Story.tsx | 12 ++-- src/components/story/StoryPreview.tsx | 4 +- src/components/story/StoryRibbonButton.tsx | 4 +- src/components/story/StorySettings.tsx | 4 +- src/global/actions/ui/messages.ts | 4 +- src/global/helpers/messages.ts | 10 ++- src/hooks/useMessageMediaMetadata.ts | 4 +- 35 files changed, 147 insertions(+), 142 deletions(-) rename src/components/common/{pickers/PickerSelectedItem.scss => PeerChip.module.scss} (78%) rename src/components/common/{pickers/PickerSelectedItem.tsx => PeerChip.tsx} (55%) diff --git a/src/components/common/pickers/PickerSelectedItem.scss b/src/components/common/PeerChip.module.scss similarity index 78% rename from src/components/common/pickers/PickerSelectedItem.scss rename to src/components/common/PeerChip.module.scss index 8d4997d38..cbe689b99 100644 --- a/src/components/common/pickers/PickerSelectedItem.scss +++ b/src/components/common/PeerChip.module.scss @@ -1,12 +1,10 @@ -.PickerSelectedItem { +.root { display: flex; align-items: center; background: var(--color-chat-hover); height: 2rem; min-width: 2rem; - margin-bottom: 0.5rem; - margin-left: 0.25rem; - margin-right: 0.25rem; + margin-inline: 0.25rem; padding-right: 1rem; border-radius: 1rem; cursor: var(--custom-cursor, pointer); @@ -28,48 +26,35 @@ &.closeable:hover { background-color: rgba(var(--color-error-rgb), 0.16); - .item-remove { + .remove { opacity: 1; } - - .Avatar, - .item-icon { - opacity: 0; - } } - &.search-date { - .item-remove { + &.nonDestructive { + .remove { background: var(--color-primary); } &:hover { background: var(--color-chat-hover); } - - .item-name { - font-size: 0.875rem; - } } &.fluid { max-width: unset; } - .Avatar, - .item-icon { + .avatar, + .iconWrapper { width: 2rem; height: 2rem; opacity: 1; flex-shrink: 0; transition: opacity 0.15s ease; - - .icon { - font-size: 1rem; - } } - .item-icon { + .iconWrapper { display: flex; align-items: center; justify-content: center; @@ -85,13 +70,13 @@ } } - .item-name { + .name { margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - .emoji.emoji-small { + :global(.emoji.emoji-small) { width: 1.125rem; height: 1.125rem; background-size: 1.125rem; @@ -99,7 +84,7 @@ } } - .item-remove { + .remove { position: absolute; left: 0; top: 0; @@ -114,14 +99,15 @@ color: white; opacity: 0; transition: opacity 0.15s ease; + z-index: 1; } - &.square-avatar { + &.squareAvatar { border-start-start-radius: 0.625rem; border-end-start-radius: 0.625rem; --border-radius-forum-avatar: 0.625rem; - &.minimized, .item-remove { + &.minimized, .remove { border-radius: 0.625rem; } } @@ -135,17 +121,12 @@ padding-left: 0; } - .SearchInput & { - left: auto; - right: -0.125rem; - } - - .item-name { + .name { margin-left: 0; margin-right: 0.5rem; } - .item-remove { + .remove { left: auto; right: 0; } diff --git a/src/components/common/pickers/PickerSelectedItem.tsx b/src/components/common/PeerChip.tsx similarity index 55% rename from src/components/common/pickers/PickerSelectedItem.tsx rename to src/components/common/PeerChip.tsx index b791e895b..a56ddab5f 100644 --- a/src/components/common/pickers/PickerSelectedItem.tsx +++ b/src/components/common/PeerChip.tsx @@ -1,23 +1,24 @@ -import type { TeactNode } from '../../../lib/teact/teact'; -import React, { memo } from '../../../lib/teact/teact'; -import { withGlobal } from '../../../global'; +import type { TeactNode } from '../../lib/teact/teact'; +import React, { memo } from '../../lib/teact/teact'; +import { withGlobal } from '../../global'; -import type { ApiPeer } from '../../../api/types'; -import type { CustomPeer } from '../../../types'; -import type { IconName } from '../../../types/icons'; +import type { ApiPeer } from '../../api/types'; +import type { CustomPeer } from '../../types'; +import type { IconName } from '../../types/icons'; -import { isApiPeerChat } from '../../../global/helpers/peers'; -import { selectPeer, selectUser } from '../../../global/selectors'; -import buildClassName from '../../../util/buildClassName'; -import { getPeerColorClass } from '../helpers/peerColor'; +import { getPeerTitle } from '../../global/helpers'; +import { isApiPeerChat } from '../../global/helpers/peers'; +import { selectPeer, selectUser } from '../../global/selectors'; +import buildClassName from '../../util/buildClassName'; +import { getPeerColorClass } from './helpers/peerColor'; -import useOldLang from '../../../hooks/useOldLang'; +import useOldLang from '../../hooks/useOldLang'; -import Avatar from '../Avatar'; -import FullNameTitle from '../FullNameTitle'; -import Icon from '../icons/Icon'; +import Avatar from './Avatar'; +import FullNameTitle from './FullNameTitle'; +import Icon from './icons/Icon'; -import './PickerSelectedItem.scss'; +import styles from './PeerChip.module.scss'; type OwnProps = { // eslint-disable-next-line react/no-unused-prop-types @@ -30,6 +31,7 @@ type OwnProps = { title?: string; isMinimized?: boolean; canClose?: boolean; + isCloseNonDestructive?: boolean; className?: string; fluid?: boolean; withPeerColors?: boolean; @@ -43,11 +45,12 @@ type StateProps = { }; // eslint-disable-next-line @typescript-eslint/comma-dangle -const PickerSelectedItem = ({ +const PeerChip = ({ icon, title, isMinimized, canClose, + isCloseNonDestructive, clickArg, peer, mockPeer, @@ -66,36 +69,40 @@ const PickerSelectedItem = ({ const chat = apiPeer && isApiPeerChat(apiPeer) ? apiPeer : undefined; let iconElement: TeactNode | undefined; - let titleText: any; + let titleElement: TeactNode | undefined; + let titleText: string | undefined; if (icon && title) { iconElement = ( -
- +
+
); - titleText = title; + titleElement = title; } else if (anyPeer) { iconElement = ( ); - titleText = title || ; + titleText = getPeerTitle(lang, anyPeer) || title; + titleElement = title || ; } const fullClassName = buildClassName( - 'PickerSelectedItem', - className, - (chat?.isForum || customPeer?.isAvatarSquare) && 'square-avatar', - isMinimized && 'minimized', - canClose && 'closeable', - fluid && 'fluid', + styles.root, + (chat?.isForum || customPeer?.isAvatarSquare) && styles.squareAvatar, + isMinimized && styles.minimized, + canClose && styles.closeable, + isCloseNonDestructive && styles.nonDestructive, + fluid && styles.fluid, withPeerColors && getPeerColorClass(customPeer || peer), + className, ); return ( @@ -107,12 +114,12 @@ const PickerSelectedItem = ({ > {iconElement} {!isMinimized && ( -
- {titleText} +
+ {titleElement}
)} {canClose && ( -
+
)} @@ -135,4 +142,4 @@ export default memo(withGlobal( isSavedMessages, }; }, -)(PickerSelectedItem)) as typeof PickerSelectedItem; +)(PeerChip)) as typeof PeerChip; diff --git a/src/components/common/embedded/EmbeddedMessage.tsx b/src/components/common/embedded/EmbeddedMessage.tsx index 9256e66b5..76493739e 100644 --- a/src/components/common/embedded/EmbeddedMessage.tsx +++ b/src/components/common/embedded/EmbeddedMessage.tsx @@ -14,7 +14,7 @@ import { getMessageIsSpoiler, getMessageMediaHash, getMessageRoundVideo, - getSenderTitle, + getPeerTitle, isActionMessage, isChatChannel, isChatGroup, @@ -120,10 +120,10 @@ const EmbeddedMessage: FC = ({ const lang = useOldLang(); - const senderTitle = sender ? getSenderTitle(lang, sender) + const senderTitle = sender ? getPeerTitle(lang, sender) : (replyForwardInfo?.hiddenUserName || message?.forwardInfo?.hiddenUserName); - const senderChatTitle = senderChat ? getSenderTitle(lang, senderChat) : undefined; - const forwardSenderTitle = forwardSender ? getSenderTitle(lang, forwardSender) + const senderChatTitle = senderChat ? getPeerTitle(lang, senderChat) : undefined; + const forwardSenderTitle = forwardSender ? getPeerTitle(lang, forwardSender) : message?.forwardInfo?.hiddenUserName; const areSendersSame = sender && sender.id === forwardSender?.id; diff --git a/src/components/common/embedded/EmbeddedStory.tsx b/src/components/common/embedded/EmbeddedStory.tsx index 49fd8c4d0..8d5a532ad 100644 --- a/src/components/common/embedded/EmbeddedStory.tsx +++ b/src/components/common/embedded/EmbeddedStory.tsx @@ -6,7 +6,7 @@ import type { ApiPeer, ApiTypeStory } from '../../../api/types'; import type { ObserveFn } from '../../../hooks/useIntersectionObserver'; import { - getSenderTitle, + getPeerTitle, getStoryMediaHash, } from '../../../global/helpers'; import buildClassName from '../../../util/buildClassName'; @@ -59,7 +59,7 @@ const EmbeddedStory: FC = ({ const mediaThumbnail = isVideoStory ? story.content.video!.thumbnail?.dataUri : undefined; const pictogramUrl = mediaBlobUrl || mediaThumbnail; - const senderTitle = sender ? getSenderTitle(lang, sender) : undefined; + const senderTitle = sender ? getPeerTitle(lang, sender) : undefined; const handleFastClick = useLastCallback(() => { if (story && !isExpiredStory) { onClick(); diff --git a/src/components/common/embedded/EmbeddedStoryForward.tsx b/src/components/common/embedded/EmbeddedStoryForward.tsx index 0148695e0..4bc008bac 100644 --- a/src/components/common/embedded/EmbeddedStoryForward.tsx +++ b/src/components/common/embedded/EmbeddedStoryForward.tsx @@ -10,7 +10,7 @@ import type { import type { IconName } from '../../../types/icons'; import { - getSenderTitle, + getPeerTitle, isUserId, } from '../../../global/helpers'; import { selectPeer, selectPeerStory } from '../../../global/selectors'; @@ -59,7 +59,7 @@ const EmbeddedStoryForward: FC = ({ } }, [forwardInfo, story]); - const senderTitle = sender ? getSenderTitle(lang, sender) : forwardInfo.fromName; + const senderTitle = sender ? getPeerTitle(lang, sender) : forwardInfo.fromName; const openOriginalStory = useLastCallback(() => { const { fromPeerId, storyId } = forwardInfo; diff --git a/src/components/common/pickers/PeerPicker.tsx b/src/components/common/pickers/PeerPicker.tsx index 3fe713c26..541c20e98 100644 --- a/src/components/common/pickers/PeerPicker.tsx +++ b/src/components/common/pickers/PeerPicker.tsx @@ -26,8 +26,8 @@ import Radio from '../../ui/Radio'; import Avatar from '../Avatar'; import FullNameTitle from '../FullNameTitle'; import Icon from '../icons/Icon'; +import PeerChip from '../PeerChip'; import PickerItem from './PickerItem'; -import PickerSelectedItem from './PickerSelectedItem'; import styles from './PickerStyles.module.scss'; @@ -335,7 +335,8 @@ const PeerPicker = ({ {isSearchable && (
{selectedCategories?.map((category) => ( - ))} {lockedSelectedIds?.map((id, i) => ( - ))} {unlockedSelectedIds.map((id, i) => ( - = ({ return ( <> {selectedSearchDate && ( - )} {globalSearchChatId && ( - = ({ ref={chatSelectionRef} > {localResults.map((id) => ( - diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index cd44f3c0b..2239eea32 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -230,7 +230,8 @@ justify-content: space-between; align-items: flex-end; - margin-bottom: 0.5rem; + padding-bottom: 0.5rem; + padding-inline: 0.25rem; box-shadow: inset 0 -1px 0 0 var(--color-borders); background-color: var(--color-background); @@ -238,7 +239,7 @@ overflow-x: auto; overflow-y: hidden; - > .PickerSelectedItem { + .left-search-local-suggestion { flex-shrink: 0; } diff --git a/src/components/left/search/helpers/getSenderName.ts b/src/components/left/search/helpers/getSenderName.ts index 716465da5..fd2757624 100644 --- a/src/components/left/search/helpers/getSenderName.ts +++ b/src/components/left/search/helpers/getSenderName.ts @@ -3,7 +3,7 @@ import type { OldLangFn } from '../../../../hooks/useOldLang'; import { getChatTitle, - getSenderTitle, + getPeerTitle, isChatGroup, isUserId, } from '../../../../global/helpers'; @@ -18,7 +18,7 @@ export function getSenderName( const sender = isUserId(senderId) ? usersById[senderId] : chatsById[senderId]; - let senderName = getSenderTitle(lang, sender); + let senderName = getPeerTitle(lang, sender); const chat = chatsById[message.chatId]; if (chat) { diff --git a/src/components/mediaViewer/SenderInfo.tsx b/src/components/mediaViewer/SenderInfo.tsx index a405cdd7d..ef654bc0b 100644 --- a/src/components/mediaViewer/SenderInfo.tsx +++ b/src/components/mediaViewer/SenderInfo.tsx @@ -6,7 +6,7 @@ import type { ApiChat, ApiPeer } from '../../api/types'; import type { MediaViewerItem } from './helpers/getViewableMedia'; import { - getSenderTitle, isChatChannel, isChatGroup, isUserId, + getPeerTitle, isChatChannel, isChatGroup, isUserId, } from '../../global/helpers'; import { selectSender, @@ -107,7 +107,7 @@ const SenderInfo: FC = ({ return undefined; } - const senderTitle = getSenderTitle(lang, owner); + const senderTitle = getPeerTitle(lang, owner); return (
diff --git a/src/components/middle/message/Giveaway.module.scss b/src/components/middle/message/Giveaway.module.scss index 54c60dbf1..3e7de5e1f 100644 --- a/src/components/middle/message/Giveaway.module.scss +++ b/src/components/middle/message/Giveaway.module.scss @@ -61,7 +61,6 @@ .peer { background-color: var(--accent-background-color); color: var(--accent-color); - margin: unset; &:hover, &:active, &:focus { background-color: var(--accent-background-active-color); diff --git a/src/components/middle/message/Giveaway.tsx b/src/components/middle/message/Giveaway.tsx index da45b0b07..91e1e09e7 100644 --- a/src/components/middle/message/Giveaway.tsx +++ b/src/components/middle/message/Giveaway.tsx @@ -30,7 +30,7 @@ import useOldLang from '../../../hooks/useOldLang'; import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker'; import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview'; -import PickerSelectedItem from '../../common/pickers/PickerSelectedItem'; +import PeerChip from '../../common/PeerChip'; import Button from '../../ui/Button'; import ConfirmDialog from '../../ui/ConfirmDialog'; import Separator from '../../ui/Separator'; @@ -160,7 +160,7 @@ const Giveaway = ({

{channelIds.map((peerId) => ( -
{winnerIds.map((peerId) => ( - = ({ scrollTargetPosition, ); - const viaBusinessBotTitle = viaBusinessBot ? getSenderTitle(lang, viaBusinessBot) : undefined; + const viaBusinessBotTitle = viaBusinessBot ? getPeerTitle(lang, viaBusinessBot) : undefined; const canShowPostAuthor = !message.senderId; const signature = viaBusinessBotTitle || (canShowPostAuthor && message.postAuthorTitle) @@ -1500,11 +1500,11 @@ const Message: FC = ({ let senderTitle; let senderColor; if (senderPeer && !(isCustomShape && viaBotId)) { - senderTitle = getSenderTitle(lang, senderPeer); + senderTitle = getPeerTitle(lang, senderPeer); } else if (forwardInfo?.hiddenUserName) { senderTitle = forwardInfo.hiddenUserName; } else if (storyData && originSender) { - senderTitle = getSenderTitle(lang, originSender!); + senderTitle = getPeerTitle(lang, originSender!); } const senderEmojiStatus = senderPeer && 'emojiStatus' in senderPeer && senderPeer.emojiStatus; const senderIsPremium = senderPeer && 'isPremium' in senderPeer && senderPeer.isPremium; diff --git a/src/components/middle/message/StoryMention.tsx b/src/components/middle/message/StoryMention.tsx index 3decf68d5..e84a6502a 100644 --- a/src/components/middle/message/StoryMention.tsx +++ b/src/components/middle/message/StoryMention.tsx @@ -5,7 +5,7 @@ import type { ApiMessage, ApiPeer, ApiTypeStory, ApiUser, } from '../../../api/types'; -import { getSenderTitle, getStoryMediaHash, getUserFirstOrLastName } from '../../../global/helpers'; +import { getPeerTitle, getStoryMediaHash, getUserFirstOrLastName } from '../../../global/helpers'; import { selectPeer, selectPeerStories, @@ -69,7 +69,7 @@ function StoryMention({ return isDeleted ? lang('ExpiredStoryMention') - : lang('StoryMentionedTitle', getSenderTitle(lang, peer!)); + : lang('StoryMentionedTitle', getPeerTitle(lang, peer!)); } return ( diff --git a/src/components/middle/panes/AudioPlayer.tsx b/src/components/middle/panes/AudioPlayer.tsx index a36d65e89..79aa403fc 100644 --- a/src/components/middle/panes/AudioPlayer.tsx +++ b/src/components/middle/panes/AudioPlayer.tsx @@ -9,7 +9,7 @@ import type { import { PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION } from '../../../config'; import { - getMediaDuration, getMessageContent, getMessageMediaHash, getSenderTitle, isMessageLocal, + getMediaDuration, getMessageContent, getMessageMediaHash, getPeerTitle, isMessageLocal, } from '../../../global/helpers'; import { selectChat, selectChatMessage, selectSender, selectTabState, @@ -98,7 +98,7 @@ const AudioPlayer: FC = ({ const { audio, voice, video } = renderingMessage ? getMessageContent(renderingMessage) : {} satisfies MediaContent; const isVoice = Boolean(voice || video); const shouldRenderPlaybackButton = isVoice || (audio?.duration || 0) > PLAYBACK_RATE_FOR_AUDIO_MIN_DURATION; - const senderName = sender ? getSenderTitle(lang, sender) : undefined; + const senderName = sender ? getPeerTitle(lang, sender) : undefined; const mediaHash = renderingMessage && getMessageMediaHash(renderingMessage, 'inline'); const mediaData = mediaHash && mediaLoader.getFromMemory(mediaHash); diff --git a/src/components/middle/panes/HeaderPinnedMessage.tsx b/src/components/middle/panes/HeaderPinnedMessage.tsx index 3341b66e5..ee328f8ff 100644 --- a/src/components/middle/panes/HeaderPinnedMessage.tsx +++ b/src/components/middle/panes/HeaderPinnedMessage.tsx @@ -12,7 +12,7 @@ import { getMessageMediaHash, getMessageSingleInlineButton, getMessageVideo, - getSenderTitle, + getPeerTitle, } from '../../../global/helpers'; import { selectAllowedMessageActionsSlow, @@ -110,7 +110,7 @@ const HeaderPinnedMessage = ({ ? pinnedMessageIds.length : (pinnedMessageIds ? 1 : 0); const pinnedMessageNumber = Math.max(pinnedMessagesCount - currentPinnedIndex, 1); - const topMessageTitle = topMessageSender ? getSenderTitle(lang, topMessageSender) : undefined; + const topMessageTitle = topMessageSender ? getPeerTitle(lang, topMessageSender) : undefined; const video = pinnedMessage && getMessageVideo(pinnedMessage); const gif = video?.isGif ? video : undefined; diff --git a/src/components/middle/search/MiddleSearch.tsx b/src/components/middle/search/MiddleSearch.tsx index 3e60285b4..399bbb53b 100644 --- a/src/components/middle/search/MiddleSearch.tsx +++ b/src/components/middle/search/MiddleSearch.tsx @@ -51,7 +51,7 @@ import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; import Icon from '../../common/icons/Icon'; -import PickerSelectedItem from '../../common/pickers/PickerSelectedItem'; +import PeerChip from '../../common/PeerChip'; import Button from '../../ui/Button'; import InfiniteScroll from '../../ui/InfiniteScroll'; import SearchInput from '../../ui/SearchInput'; @@ -519,7 +519,7 @@ const MiddleSearch: FC = ({ switch (type) { case 'chat': return ( - = ({ ); case 'myChats': return ( - = ({ ); case 'channels': return ( - = ({

{title && renderText(title, ['simple_markdown'])}

- {label}
}
{typeof value === 'object' && 'chatId' in value ? ( - {inviteCustomPeer ? oldLang('StarsSubscribeTitle') : oldLang('StarsConfirmPurchaseTitle')} - {canShowPeerItem && } + {canShowPeerItem && }
{renderText(descriptionText, ['simple_markdown', 'emoji'])}
diff --git a/src/components/modals/stars/gift/StarsGiftModal.tsx b/src/components/modals/stars/gift/StarsGiftModal.tsx index 26d01a2c7..3595ad248 100644 --- a/src/components/modals/stars/gift/StarsGiftModal.tsx +++ b/src/components/modals/stars/gift/StarsGiftModal.tsx @@ -10,7 +10,7 @@ import type { } from '../../../../api/types'; import type { TabState } from '../../../../global/types'; -import { getSenderTitle } from '../../../../global/helpers'; +import { getPeerTitle } from '../../../../global/helpers'; import { selectUser, } from '../../../../global/selectors'; @@ -194,7 +194,7 @@ const StarsGiftModal: FC = ({

{user ? renderText( - oldLang('ActionGiftStarsSubtitle', getSenderTitle(oldLang, user)), ['simple_markdown'], + oldLang('ActionGiftStarsSubtitle', getPeerTitle(oldLang, user)), ['simple_markdown'], ) : oldLang('Stars.Purchase.GetStarsInfo')}

diff --git a/src/components/modals/stars/subscription/StarsSubscriptionItem.tsx b/src/components/modals/stars/subscription/StarsSubscriptionItem.tsx index 919e30274..ce977b0c6 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionItem.tsx +++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.tsx @@ -6,7 +6,7 @@ import type { } from '../../../../api/types'; import type { GlobalState } from '../../../../global/types'; -import { getSenderTitle } from '../../../../global/helpers'; +import { getPeerTitle } from '../../../../global/helpers'; import { selectPeer } from '../../../../global/selectors'; import { formatDateToString } from '../../../../util/dates/dateFormat'; import { formatInteger } from '../../../../util/textFormat'; @@ -56,7 +56,7 @@ const StarsSubscriptionItem = ({ subscription }: OwnProps) => {
-

{getSenderTitle(lang, peer)}

+

{getPeerTitle(lang, peer)}

{title && (

{photo && } diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.tsx b/src/components/modals/stars/transaction/StarsTransactionItem.tsx index e99a0fadc..c311af471 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.tsx +++ b/src/components/modals/stars/transaction/StarsTransactionItem.tsx @@ -8,7 +8,7 @@ import type { import type { GlobalState } from '../../../../global/types'; import type { CustomPeer } from '../../../../types'; -import { getSenderTitle } from '../../../../global/helpers'; +import { getPeerTitle } from '../../../../global/helpers'; import { buildStarsTransactionCustomPeer, formatStarsTransactionAmount } from '../../../../global/helpers/payments'; import { selectPeer } from '../../../../global/selectors'; import buildClassName from '../../../../util/buildClassName'; @@ -62,7 +62,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { let avatarPeer: ApiPeer | CustomPeer | undefined; if (transaction.peer.type === 'peer') { - description = peer && getSenderTitle(oldLang, peer); + description = peer && getPeerTitle(oldLang, peer); avatarPeer = peer || CUSTOM_PEER_PREMIUM; } else { const customPeer = buildStarsTransactionCustomPeer(transaction.peer); diff --git a/src/components/modals/suggestedStatus/SuggestedStatusModal.tsx b/src/components/modals/suggestedStatus/SuggestedStatusModal.tsx index c342ad2db..18ede3a04 100644 --- a/src/components/modals/suggestedStatus/SuggestedStatusModal.tsx +++ b/src/components/modals/suggestedStatus/SuggestedStatusModal.tsx @@ -15,7 +15,7 @@ import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; import CustomEmoji from '../../common/CustomEmoji'; -import PickerSelectedItem from '../../common/pickers/PickerSelectedItem'; +import PeerChip from '../../common/PeerChip'; import Button from '../../ui/Button'; import Modal from '../../ui/Modal'; @@ -121,7 +121,7 @@ const SuggestedStatusModal = ({ modal, currentUser, bot }: OwnProps & StateProps

{description}

{mockPeerWithStatus && ( - )} diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx index 7cc627dcf..aaf5d7bec 100644 --- a/src/components/story/Story.tsx +++ b/src/components/story/Story.tsx @@ -14,7 +14,7 @@ import type { Signal } from '../../util/signals'; import { MAIN_THREAD_ID } from '../../api/types'; import { EDITABLE_STORY_INPUT_CSS_SELECTOR, EDITABLE_STORY_INPUT_ID } from '../../config'; -import { getSenderTitle, isChatChannel, isUserId } from '../../global/helpers'; +import { getPeerTitle, isChatChannel, isUserId } from '../../global/helpers'; import { selectChat, selectIsCurrentUserPremium, @@ -199,7 +199,7 @@ function Story({ isOut && (story!.date + viewersExpirePeriod) < getServerTime(), ); - const forwardSenderTitle = forwardSender ? getSenderTitle(lang, forwardSender) + const forwardSenderTitle = forwardSender ? getPeerTitle(lang, forwardSender) : (isLoadedStory && story.forwardInfo?.fromName); const canCopyLink = Boolean( @@ -492,7 +492,7 @@ function Story({ : story.isForContacts ? 'contacts' : (story.isForCloseFriends ? 'closeFriends' : 'nobody'); let message; - const myName = getSenderTitle(lang, peer); + const myName = getPeerTitle(lang, peer); switch (visibility) { case 'nobody': message = lang('StorySelectedContactsHint', myName); @@ -643,7 +643,7 @@ function Story({ />
- {renderText(getSenderTitle(lang, peer) || '')} + {renderText(getPeerTitle(lang, peer) || '')}
{forwardSenderTitle && ( @@ -668,7 +668,7 @@ function Story({ > - {renderText(getSenderTitle(lang, fromPeer) || '')} + {renderText(getPeerTitle(lang, fromPeer) || '')} )} @@ -853,7 +853,7 @@ function Story({ withStory storyViewerMode="disabled" /> -
{renderText(getSenderTitle(lang, peer) || '')}
+
{renderText(getPeerTitle(lang, peer) || '')}
)} diff --git a/src/components/story/StoryPreview.tsx b/src/components/story/StoryPreview.tsx index 648d0df56..025ad6be6 100644 --- a/src/components/story/StoryPreview.tsx +++ b/src/components/story/StoryPreview.tsx @@ -6,7 +6,7 @@ import type { } from '../../api/types'; import type { StoryViewerOrigin } from '../../types'; -import { getSenderTitle, getStoryMediaHash } from '../../global/helpers'; +import { getPeerTitle, getStoryMediaHash } from '../../global/helpers'; import { selectTabState } from '../../global/selectors'; import renderText from '../common/helpers/renderText'; @@ -86,7 +86,7 @@ function StoryPreview({ withStory storyViewerMode="disabled" /> -
{renderText(getSenderTitle(lang, peer) || '')}
+
{renderText(getPeerTitle(lang, peer) || '')}
diff --git a/src/components/story/StoryRibbonButton.tsx b/src/components/story/StoryRibbonButton.tsx index 4e86b497f..a505d6336 100644 --- a/src/components/story/StoryRibbonButton.tsx +++ b/src/components/story/StoryRibbonButton.tsx @@ -4,7 +4,7 @@ import { getActions } from '../../global'; import type { ApiPeer } from '../../api/types'; import { StoryViewerOrigin } from '../../types'; -import { getSenderTitle, isUserId } from '../../global/helpers'; +import { getPeerTitle, isUserId } from '../../global/helpers'; import buildClassName from '../../util/buildClassName'; import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur'; @@ -101,7 +101,7 @@ function StoryRibbonButton({ peer, isArchived }: OwnProps) { storyViewerMode="full" />
- {isSelf ? lang('MyStory') : getSenderTitle(lang, peer)} + {isSelf ? lang('MyStory') : getPeerTitle(lang, peer)}
{contextMenuAnchor !== undefined && ( { const sender = isChatChannel(chat) ? chat : selectSender(global, message); - const senderTitle = `> ${sender ? getSenderTitle(lang, sender) : message.forwardInfo?.hiddenUserName || ''}:`; + const senderTitle = `> ${sender ? getPeerTitle(lang, sender) : message.forwardInfo?.hiddenUserName || ''}:`; const statefulContent = getMessageStatefulContent(global, message); resultHtml.push(senderTitle); diff --git a/src/global/helpers/messages.ts b/src/global/helpers/messages.ts index 07989cdbc..5db9d32d6 100644 --- a/src/global/helpers/messages.ts +++ b/src/global/helpers/messages.ts @@ -10,7 +10,7 @@ import type { ApiPoll, MediaContainer, MediaContent, StatefulMediaContent, } from '../../api/types/messages'; import type { OldLangFn } from '../../hooks/useOldLang'; -import type { ThreadId } from '../../types'; +import type { CustomPeer, ThreadId } from '../../types'; import type { LangFn } from '../../util/localization'; import type { GlobalState } from '../types'; import { ApiMessageEntityTypes, MAIN_THREAD_ID } from '../../api/types'; @@ -209,8 +209,12 @@ export function isAnonymousOwnMessage(message: ApiMessage) { return Boolean(message.senderId) && !isUserId(message.senderId) && isOwnMessage(message); } -export function getSenderTitle(lang: OldLangFn | LangFn, sender: ApiPeer) { - return isPeerUser(sender) ? getUserFullName(sender) : getChatTitle(lang, sender); +export function getPeerTitle(lang: OldLangFn | LangFn, peer: ApiPeer | CustomPeer) { + if ('isCustomPeer' in peer) { + // TODO: Remove any after full migration to new lang + return peer.titleKey ? lang(peer.titleKey as any) : peer.title; + } + return isPeerUser(peer) ? getUserFullName(peer) : getChatTitle(lang, peer); } export function getSendingState(message: ApiMessage) { diff --git a/src/hooks/useMessageMediaMetadata.ts b/src/hooks/useMessageMediaMetadata.ts index 6d4e5a97d..9940a009f 100644 --- a/src/hooks/useMessageMediaMetadata.ts +++ b/src/hooks/useMessageMediaMetadata.ts @@ -6,7 +6,7 @@ import type { } from '../api/types'; import { - getAudioHasCover, getChatAvatarHash, getChatTitle, getMediaHash, getMessageContent, getSenderTitle, + getAudioHasCover, getChatAvatarHash, getChatTitle, getMediaHash, getMessageContent, getPeerTitle, } from '../global/helpers'; import { resizeImage, scaleImage } from '../util/imageResize'; import { buildMediaMetadata } from '../util/mediaSession'; @@ -28,7 +28,7 @@ const useMessageMediaMetadata = ( const { audio, voice } = message ? getMessageContent(message) : {} satisfies MediaContent; const title = audio ? (audio.title || audio.fileName) : voice ? 'Voice message' : ''; - const artist = audio?.performer || (sender && getSenderTitle(lang, sender)); + const artist = audio?.performer || (sender && getPeerTitle(lang, sender)); const album = (chat && getChatTitle(lang, chat)) || 'Telegram'; const audioCoverHash = (audio && getAudioHasCover(audio) && getMediaHash(audio, 'pictogram'));