ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stars: Show Stars item on the left sidebar (#5553)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-02-13 14:27:42 +01:00
parent a90522f7f9
commit ca65f8003a
3 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/left/settings/SettingsMain.tsx
View File

@ -35,7 +35,6 @@ type StateProps = {
canBuyPremium?: boolean; canBuyPremium?: boolean;
isGiveawayAvailable?: boolean; isGiveawayAvailable?: boolean;
starsBalance?: ApiStarsAmount; starsBalance?: ApiStarsAmount;
shouldDisplayStars?: boolean;
}; };
const SettingsMain: FC<OwnProps & StateProps> = ({ const SettingsMain: FC<OwnProps & StateProps> = ({
@ -45,7 +44,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
canBuyPremium, canBuyPremium,
isGiveawayAvailable, isGiveawayAvailable,
starsBalance, starsBalance,
shouldDisplayStars,
onScreenSelect, onScreenSelect,
onReset, onReset,
}) => { }) => {
@ -182,21 +180,19 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
{lang('TelegramPremium')} {lang('TelegramPremium')}
</ListItem> </ListItem>
)} )}
{shouldDisplayStars && ( <ListItem
<ListItem leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />}
leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />} narrow
narrow // eslint-disable-next-line react/jsx-no-bind
// eslint-disable-next-line react/jsx-no-bind onClick={() => openStarsBalanceModal({})}
onClick={() => openStarsBalanceModal({})} >
> {lang('MenuStars')}
{lang('MenuStars')} {Boolean(starsBalance) && (
{Boolean(starsBalance) && ( <span className="settings-item__current-value">
<span className="settings-item__current-value"> {formatStarsAmount(lang, starsBalance)}
{formatStarsAmount(lang, starsBalance)} </span>
</span> )}
)} </ListItem>
</ListItem>
)}
{isGiveawayAvailable && ( {isGiveawayAvailable && (
<ListItem <ListItem
icon="gift" icon="gift"
@ -250,7 +246,6 @@ export default memo(withGlobal<OwnProps>(
const { currentUserId } = global; const { currentUserId } = global;
const isGiveawayAvailable = selectIsGiveawayGiftsPurchaseAvailable(global); const isGiveawayAvailable = selectIsGiveawayGiftsPurchaseAvailable(global);
const starsBalance = global.stars?.balance; const starsBalance = global.stars?.balance;
const shouldDisplayStars = Boolean(global.stars?.history?.all?.transactions.length);
return { return {
sessionCount: global.activeSessions.orderedHashes.length, sessionCount: global.activeSessions.orderedHashes.length,
@ -258,7 +253,6 @@ export default memo(withGlobal<OwnProps>(
canBuyPremium: !selectIsPremiumPurchaseBlocked(global), canBuyPremium: !selectIsPremiumPurchaseBlocked(global),
isGiveawayAvailable, isGiveawayAvailable,
starsBalance, starsBalance,
shouldDisplayStars,
}; };
}, },
)(SettingsMain)); )(SettingsMain));

4
src/components/modals/stars/StarsBalanceModal.module.scss
View File

@ -13,6 +13,10 @@
max-width: 26.25rem; max-width: 26.25rem;
} }
.minimal :global(.modal-dialog) {
height: auto;
}
.root :global(.modal-dialog), .root :global(.modal-dialog),
.root :global(.modal-content), .root :global(.modal-content),
.transition { .transition {

12
src/components/modals/stars/StarsBalanceModal.tsx
View File

@ -51,10 +51,11 @@ export type OwnProps = {
type StateProps = { type StateProps = {
starsBalanceState?: GlobalState['stars']; starsBalanceState?: GlobalState['stars'];
canBuyPremium?: boolean; canBuyPremium?: boolean;
shouldForceHeight?: boolean;
}; };
const StarsBalanceModal = ({ const StarsBalanceModal = ({
modal, starsBalanceState, canBuyPremium, modal, starsBalanceState, canBuyPremium, shouldForceHeight,
}: OwnProps & StateProps) => { }: OwnProps & StateProps) => {
const { const {
closeStarsBalanceModal, loadStarsTransactions, loadStarsSubscriptions, openStarsGiftingPickerModal, openInvoice, closeStarsBalanceModal, loadStarsTransactions, loadStarsSubscriptions, openStarsGiftingPickerModal, openInvoice,
@ -179,7 +180,11 @@ const StarsBalanceModal = ({
}); });
return ( return (
<Modal className={styles.root} isOpen={isOpen} onClose={closeStarsBalanceModal}> <Modal
className={buildClassName(styles.root, !shouldForceHeight && styles.minimal)}
isOpen={isOpen}
onClose={closeStarsBalanceModal}
>
<div className={buildClassName(styles.main, 'custom-scroll')} onScroll={handleScroll}> <div className={buildClassName(styles.main, 'custom-scroll')} onScroll={handleScroll}>
<Button <Button
round round
@ -311,7 +316,10 @@ const StarsBalanceModal = ({
export default memo(withGlobal<OwnProps>( export default memo(withGlobal<OwnProps>(
(global): StateProps => { (global): StateProps => {
const shouldForceHeight = Boolean(global.stars?.history?.all?.transactions.length);
return { return {
shouldForceHeight,
starsBalanceState: global.stars, starsBalanceState: global.stars,
canBuyPremium: !selectIsPremiumPurchaseBlocked(global), canBuyPremium: !selectIsPremiumPurchaseBlocked(global),
}; };