diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss
index 7160c7547..3f292e668 100644
--- a/src/components/common/Composer.scss
+++ b/src/components/common/Composer.scss
@@ -691,6 +691,8 @@
.placeholder-star-icon {
line-height: 1;
+ margin-inline-end: 0.0625rem;
+ margin-inline-start: 0.25rem;
}
.forced-placeholder,
.placeholder-text {
diff --git a/src/components/left/settings/PrivacyLockedOption.module.scss b/src/components/left/settings/PrivacyLockedOption.module.scss
index 4806e4f52..6ad89150d 100644
--- a/src/components/left/settings/PrivacyLockedOption.module.scss
+++ b/src/components/left/settings/PrivacyLockedOption.module.scss
@@ -12,7 +12,5 @@
}
.checked .lock-icon {
- left: 1.25rem;
- font-size: 1rem;
color: var(--color-primary);
}
diff --git a/src/components/left/settings/PrivacyMessages.tsx b/src/components/left/settings/PrivacyMessages.tsx
index 835eeb972..8c94490dc 100644
--- a/src/components/left/settings/PrivacyMessages.tsx
+++ b/src/components/left/settings/PrivacyMessages.tsx
@@ -24,6 +24,7 @@ import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
import useOldLang from '../../../hooks/useOldLang';
+import Icon from '../../common/icons/Icon';
import ListItem from '../../ui/ListItem';
import RadioGroup from '../../ui/RadioGroup';
import RangeSlider from '../../ui/RangeSlider';
@@ -130,8 +131,13 @@ function PrivacyMessages({
}, [setChargeForMessages, updateGlobalPrivacySettingsWithDebounced]);
const renderValueForStarsRange = useCallback((value: number) => {
- return formatStarsAsText(lang, value);
- }, [lang]);
+ return (
+
+ {!canChangeChargeForMessages && ()}
+ {formatStarsAsText(lang, value)}
+
+ );
+ }, [lang, canChangeChargeForMessages]);
function renderSectionStarsAmountForPaidMessages() {
return (
@@ -146,6 +152,7 @@ function PrivacyMessages({
value={chargeForMessages}
onChange={handleChargeForMessagesChange}
renderValue={renderValueForStarsRange}
+ readOnly={!canChangeChargeForMessages}
/>
{lang('SectionDescriptionStarsForForMessages', {
@@ -219,8 +226,7 @@ function PrivacyMessages({
{privacyDescription}
- {canChangeChargeForMessages
- && selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()}
+ {selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()}
{canChangeChargeForMessages && selectedValue === 'charge_for_messages' && renderSectionNoPaidMessagesForUsers()}
{!isCurrentUserPremium && }
>
diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss
index 0122a48f7..c0afda18e 100644
--- a/src/components/left/settings/Settings.scss
+++ b/src/components/left/settings/Settings.scss
@@ -121,6 +121,12 @@
}
}
+.settings-range-value {
+ color: var(--color-primary);
+ display: inline-flex;
+ align-items: center;
+}
+
.settings-item-simple,
.settings-item {
text-align: initial;
diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index 4914f54ea..82269f837 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -226,6 +226,10 @@ const MessageList: FC = ({
const areMessagesLoaded = Boolean(messageIds);
+ const isPrivate = isUserId(chatId);
+ const withUsers = Boolean((!isPrivate && !isChannelChat)
+ || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars);
+
useSyncEffect(() => {
// We only need it first time when message list appears
if (areMessagesLoaded) {
@@ -329,9 +333,13 @@ const MessageList: FC = ({
memoUnreadDividerBeforeIdRef.current,
!isForum ? Number(threadId) : undefined,
isChatWithSelf,
+ withUsers,
)
: undefined;
- }, [messageIds, messagesById, type, isServiceNotificationsChat, isForum, threadId, isChatWithSelf, channelJoinInfo]);
+ }, [withUsers,
+ messageIds, messagesById, type,
+ isServiceNotificationsChat, isForum,
+ threadId, isChatWithSelf, channelJoinInfo]);
useInterval(() => {
if (!messageIds || !messagesById || type === 'scheduled') return;
@@ -635,9 +643,6 @@ const MessageList: FC = ({
}
}, [isSelectModeActive]);
- const isPrivate = isUserId(chatId);
- const withUsers = Boolean((!isPrivate && !isChannelChat)
- || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars);
const noAvatars = Boolean(!withUsers || (isChannelChat && !isChannelWithAvatars));
const shouldRenderGreeting = isUserId(chatId) && !isChatWithSelf && !isBot && !isAnonymousForwards
&& type === 'thread'
diff --git a/src/components/middle/helpers/groupMessages.ts b/src/components/middle/helpers/groupMessages.ts
index 57202548e..d6be99222 100644
--- a/src/components/middle/helpers/groupMessages.ts
+++ b/src/components/middle/helpers/groupMessages.ts
@@ -19,7 +19,7 @@ export function isAlbum(messageOrAlbum: ApiMessage | IAlbum): messageOrAlbum is
}
export function groupMessages(
- messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean,
+ messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean, withUsers?: boolean,
) {
const initDateGroup: MessageDateGroup = {
originalDate: messages[0].date,
@@ -90,7 +90,7 @@ export function groupMessages(
} else if (
nextMessage.id === firstUnreadId
|| message.senderId !== nextMessage.senderId
- || message.paidMessageStars
+ || (!withUsers && message.paidMessageStars)
|| message.isOutgoing !== nextMessage.isOutgoing
|| message.postAuthorTitle !== nextMessage.postAuthorTitle
|| (isActionMessage(message) && message.content.action?.type !== 'phoneCall')
diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss
index d26183bb8..aa114c0c4 100644
--- a/src/components/ui/RangeSlider.scss
+++ b/src/components/ui/RangeSlider.scss
@@ -25,6 +25,10 @@
--slider-color: var(--color-text-secondary);
}
+ &.readOnly {
+ pointer-events: none;
+ }
+
.slider-top-row {
display: flex;
justify-content: space-between;
diff --git a/src/components/ui/RangeSlider.tsx b/src/components/ui/RangeSlider.tsx
index 3cf0150f6..fef49a944 100644
--- a/src/components/ui/RangeSlider.tsx
+++ b/src/components/ui/RangeSlider.tsx
@@ -1,5 +1,5 @@
import type { ChangeEvent } from 'react';
-import type { FC } from '../../lib/teact/teact';
+import type { FC, TeactNode } from '../../lib/teact/teact';
import React, { memo, useCallback, useMemo } from '../../lib/teact/teact';
import buildClassName from '../../util/buildClassName';
@@ -16,9 +16,10 @@ type OwnProps = {
label?: string;
value: number;
disabled?: boolean;
+ readOnly?: boolean;
bold?: boolean;
className?: string;
- renderValue?: (value: number) => string;
+ renderValue?: (value: number) => TeactNode;
onChange: (value: number) => void;
isCenteredLayout?: boolean;
};
@@ -31,6 +32,7 @@ const RangeSlider: FC = ({
label,
value,
disabled,
+ readOnly,
bold,
className,
renderValue,
@@ -46,6 +48,7 @@ const RangeSlider: FC = ({
className,
'RangeSlider',
disabled && 'disabled',
+ readOnly && 'readOnly',
bold && 'bold',
);