= ({
hasMiniApp={user?.hasMainMiniApp}
topics={topics}
isSelected={isSelected}
+ transitionClassName="chat-badge-transition"
/>
)}
{shouldRenderTags && (
diff --git a/src/components/left/main/ChatBadge.module.scss b/src/components/left/main/ChatBadge.module.scss
new file mode 100644
index 000000000..494d104fe
--- /dev/null
+++ b/src/components/left/main/ChatBadge.module.scss
@@ -0,0 +1,120 @@
+.badge {
+ flex-shrink: 0;
+
+ min-width: 1.375rem;
+ height: 1.375rem;
+ margin-inline-start: 0.5rem;
+ padding: 0 0.4375rem;
+ border-radius: 0.75rem;
+
+ font-size: 0.875rem;
+ font-weight: var(--font-weight-medium);
+ line-height: 1.4375rem;
+ color: white;
+ text-align: center;
+
+ background: var(--color-gray);
+
+ :global(body.is-ios) &,
+ :global(body.is-macos) & {
+ line-height: 1.375rem;
+ }
+}
+
+.transition {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: 1.25rem;
+
+ opacity: 1;
+
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+ &:not(:global(.open)) {
+ transform: scale(0);
+ opacity: 0;
+ }
+
+ &:not(:global(.shown)) {
+ display: none;
+ }
+
+ &:global(.closing) {
+ transition:
+ transform 0.2s ease-out,
+ opacity 0.2s ease-out;
+ }
+}
+
+.wrapper {
+ display: flex;
+}
+
+.mention,
+.unread:not(.muted),
+.unopened:not(.muted) {
+ color: var(--color-white);
+ background: var(--color-green);
+}
+
+.unopened {
+ align-self: center;
+
+ width: 0.5rem;
+ min-width: auto;
+ height: 0.5rem;
+ min-height: auto;
+ padding: 0;
+}
+
+.pinned {
+ display: flex;
+ justify-content: flex-end;
+
+ padding: 0;
+
+ font-size: 1rem;
+ color: var(--color-list-icon);
+
+ background: transparent;
+}
+
+.reaction:not(.muted) {
+ background: #ed504f;
+}
+
+.round {
+ display: grid;
+ place-content: center;
+
+ width: 1.375rem;
+ height: 1.375rem;
+ padding: 0.25rem;
+
+ font-size: 1rem;
+}
+
+.miniapp {
+ z-index: calc(var(--z-chat-ripple) + 1);
+ height: auto !important;
+ padding: 0 0.4375rem !important;
+ font-size: 0.875rem !important;
+}
+
+.selected {
+ .badge:not(.pinned) {
+ color: var(--color-chat-active);
+ background: var(--color-white);
+
+ &.muted {
+ color: var(--color-white);
+ background: #ffffff33;
+ }
+ }
+}
+
+.onAvatar .badge {
+ box-shadow: 0 0 0 2px var(--outline-color);
+}
diff --git a/src/components/left/main/ChatBadge.scss b/src/components/left/main/ChatBadge.scss
deleted file mode 100644
index cbedb6e46..000000000
--- a/src/components/left/main/ChatBadge.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.ChatBadge-transition {
- opacity: 1;
- transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-
- &:not(.open) {
- transform: scale(0);
- opacity: 0;
- }
-
- &:not(.shown) {
- display: none;
- }
-
- &.closing {
- transition: transform 0.2s ease-out, opacity 0.2s ease-out;
- }
-
- body.is-macos & {
- height: 1.375rem;
- }
-}
-
-.ChatBadge-wrapper {
- display: flex;
-
- .ChatBadge {
- margin-inline-start: 0.5rem;
- }
-}
-
-.ChatBadge {
- flex-shrink: 0;
-
- min-width: 1.5rem;
- height: 1.5rem;
- padding: 0 0.4375rem;
- border-radius: 0.75rem;
-
- font-size: 0.875rem;
- font-weight: var(--font-weight-medium);
- line-height: 1.5625rem;
- color: white;
- text-align: center;
-
- background: var(--color-gray);
-
- body.is-macos & {
- line-height: 1.5rem;
- }
-
- body.is-ios &:not(.unopened) {
- min-width: 1.375rem;
- height: 1.375rem;
- padding: 0 0.375rem;
- line-height: 1.375rem;
- }
-
- body.is-ios,
- body.is-macos,
- &.miniapp {
- min-width: 1.5rem;
- height: 1.5rem !important;
- line-height: 1.5rem !important;
- }
-
- &.mention,
- &.unread:not(.muted),
- &.unopened:not(.muted) {
- color: var(--color-white);
- background: var(--color-green);
- }
-
- &.unopened {
- align-self: center;
-
- width: 0.5rem;
- min-width: auto;
- height: 0.5rem;
- min-height: auto;
- padding: 0;
- }
-
- &.pinned {
- width: 1.5rem;
- padding: 0;
- color: var(--color-list-icon);
- background: transparent;
-
- .icon {
- font-size: 1.5rem;
- }
- }
-
- &.reaction:not(.muted) {
- background: #ed504f;
- }
-
- &.mention, &.reaction {
- width: 1.5rem;
- padding: 0.25rem !important;
-
- .icon {
- font-size: 1rem;
- vertical-align: super;
- }
-
- body.is-ios & {
- width: 1.375rem;
- padding: 0.25rem;
-
- .icon {
- font-size: 0.875rem;
- }
- }
- }
-
- &.miniapp {
- z-index: calc(var(--z-chat-ripple) + 1);
- padding: 0 0.4375rem !important;
- font-size: 0.875rem !important;
- }
-}
diff --git a/src/components/left/main/ChatBadge.tsx b/src/components/left/main/ChatBadge.tsx
index dbe376f09..7b0ae62d1 100644
--- a/src/components/left/main/ChatBadge.tsx
+++ b/src/components/left/main/ChatBadge.tsx
@@ -1,5 +1,3 @@
-import type { FC } from '../../../lib/teact/teact';
-import type React from '../../../lib/teact/teact';
import { memo, useMemo } from '../../../lib/teact/teact';
import { getActions } from '../../../global';
@@ -15,14 +13,13 @@ import { extractCurrentThemeParams } from '../../../util/themeStyle';
import useDerivedState from '../../../hooks/useDerivedState';
import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
-import useOldLang from '../../../hooks/useOldLang';
import AnimatedCounter from '../../common/AnimatedCounter';
import Icon from '../../common/icons/Icon';
import Button from '../../ui/Button';
import ShowTransition from '../../ui/ShowTransition';
-import './ChatBadge.scss';
+import styles from './ChatBadge.module.scss';
type OwnProps = {
chat: ApiChat;
@@ -36,9 +33,12 @@ type OwnProps = {
forceHidden?: boolean | Signal
;
topics?: Record;
isSelected?: boolean;
+ isOnAvatar?: boolean;
+ transitionClassName?: string;
+ badgeClassName?: string;
};
-const ChatBadge: FC = ({
+const ChatBadge = ({
topic,
topics,
chat,
@@ -50,10 +50,12 @@ const ChatBadge: FC = ({
isSavedDialog,
hasMiniApp,
isSelected,
-}) => {
+ isOnAvatar,
+ transitionClassName,
+ badgeClassName,
+}: OwnProps) => {
const { requestMainWebView } = getActions();
- const oldLang = useOldLang();
const lang = useLang();
const {
@@ -101,14 +103,6 @@ const ChatBadge: FC = ({
|| isTopicUnopened || hasMiniApp,
);
- const isUnread = Boolean((unreadCount || hasUnreadMark) && !isSavedDialog);
- const className = buildClassName(
- 'ChatBadge',
- !shouldBeUnMuted && 'muted',
- !isUnread && isPinned && 'pinned',
- isUnread && 'unread',
- );
-
const handleOpenApp = useLastCallback((e: React.MouseEvent) => {
e.stopPropagation();
@@ -121,30 +115,32 @@ const ChatBadge: FC = ({
});
function renderContent() {
+ const baseClassName = buildClassName(styles.badge, !shouldBeUnMuted && styles.muted, badgeClassName);
+
const unreadReactionsElement = unreadReactionsCount && (
-
+
);
const unreadMentionsElement = unreadMentionsCount && (
-
+
);
const unopenedTopicElement = isTopicUnopened && (
-
+
);
const unreadCountElement = (hasUnreadMark || unreadCount) ? (
-
+
) : undefined;
const pinnedElement = isPinned && (
-
+
);
@@ -152,12 +148,12 @@ const ChatBadge: FC
= ({
const miniAppButton = hasMiniApp && (
);
@@ -185,14 +181,23 @@ const ChatBadge: FC = ({
}
return (
-
+
{elements}
);
}
return (
-
+
{renderContent()}
);
diff --git a/src/components/left/main/ChatTags.module.scss b/src/components/left/main/ChatTags.module.scss
index 5d47b1c16..d62c9d47f 100644
--- a/src/components/left/main/ChatTags.module.scss
+++ b/src/components/left/main/ChatTags.module.scss
@@ -1,13 +1,12 @@
.wrapper {
display: flex;
gap: 0.25rem;
- height: 0.875rem;
- margin-top: 0.125rem;
+ padding-top: 0.125rem;
}
.tag {
- --emoji-size: 0.75rem;
- --custom-emoji-size: 0.75rem;
+ --emoji-size: 0.875rem;
+ --custom-emoji-size: 0.875rem;
position: relative;
@@ -17,10 +16,11 @@
justify-content: center;
min-width: 1.5rem;
- padding: 0 0.25rem;
+ height: 1.125rem;
+ padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
- font-size: 0.6875rem;
+ font-size: 0.75rem;
font-weight: var(--font-weight-medium);
line-height: 1;
color: var(--accent-color);
diff --git a/src/components/left/main/ChatTags.tsx b/src/components/left/main/ChatTags.tsx
index ac1388869..471ce3f3e 100644
--- a/src/components/left/main/ChatTags.tsx
+++ b/src/components/left/main/ChatTags.tsx
@@ -3,21 +3,25 @@ import { memo } from '../../../lib/teact/teact';
import type { ApiChatFolder } from '../../../api/types';
import buildClassName from '../../../util/buildClassName';
+import { REM } from '../../common/helpers/mediaDimensions';
import { getApiPeerColorClass } from '../../common/helpers/peerColor';
import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
import styles from './ChatTags.module.scss';
const MAX_VISIBLE_TAGS = 3;
+const CUSTOM_EMOJI_SIZE = 0.875 * REM;
type OwnProps = {
orderedFolderIds?: number[];
chatFoldersById?: Record;
+ itemClassName?: string;
};
const ChatTags = ({
orderedFolderIds,
chatFoldersById,
+ itemClassName,
}: OwnProps) => {
if (!orderedFolderIds) {
return undefined;
@@ -34,22 +38,22 @@ const ChatTags = ({
{renderTextWithEntities({
text: folder.title.text,
entities: folder.title.entities,
noCustomEmojiPlayback: folder.noTitleAnimations,
- emojiSize: 12,
+ emojiSize: CUSTOM_EMOJI_SIZE,
})}
);
})}
{remainingCount > 0 && (
-
+
+
{remainingCount}
diff --git a/src/components/left/main/Topic.module.scss b/src/components/left/main/Topic.module.scss
index f40adc187..4c22c101d 100644
--- a/src/components/left/main/Topic.module.scss
+++ b/src/components/left/main/Topic.module.scss
@@ -14,7 +14,6 @@
:global(.LastMessageMeta) {
margin-top: -0.5rem;
- margin-right: 0 !important;
padding-top: 0;
}
}
diff --git a/src/components/left/main/Topic.tsx b/src/components/left/main/Topic.tsx
index 00d4a8571..b673d05a9 100644
--- a/src/components/left/main/Topic.tsx
+++ b/src/components/left/main/Topic.tsx
@@ -225,6 +225,7 @@ const Topic: FC
= ({
topic={topic}
wasTopicOpened={wasTopicOpened}
topics={topics}
+ isSelected={isSelected}
/>