From 184c2a88e86bf4f9059a69393aa2dc88a691952d Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Sun, 22 Feb 2026 23:42:41 +0100
Subject: [PATCH] Profile: Fix styles for status background (#6636)

---
 src/components/common/Avatar.tsx                     |  3 +++
 src/components/common/AvatarStoryCircle.tsx          |  5 ++++-
 .../common/profile/ProfileInfo.module.scss           | 12 ++++++++++++
 src/components/common/profile/ProfileInfo.tsx        |  1 +
 src/global/selectors/peers.ts                        | 11 +++++++----
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index dfda5aa32..607c597eb 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -88,6 +88,7 @@ type OwnProps = {
   loopIndefinitely?: boolean;
   noPersonalPhoto?: boolean;
   asMessageBubble?: boolean;
+  storyCircleStyle?: string;
   observeIntersection?: ObserveFn;
   onClick?: (e: ReactMouseEvent<HTMLDivElement, MouseEvent>, hasMedia: boolean) => void;
   onContextMenu?: (e: React.MouseEvent) => void;
@@ -118,6 +119,7 @@ const Avatar = ({
   loopIndefinitely,
   noPersonalPhoto,
   asMessageBubble,
+  storyCircleStyle,
   onClick,
   onContextMenu,
   onMouseMove,
@@ -334,6 +336,7 @@ const Avatar = ({
           size={pxSize}
           withExtraGap={withStoryGap}
           colors={storyColors}
+          style={storyCircleStyle}
         />
       )}
     </div>
diff --git a/src/components/common/AvatarStoryCircle.tsx b/src/components/common/AvatarStoryCircle.tsx
index c6b636b4c..a6eae8844 100644
--- a/src/components/common/AvatarStoryCircle.tsx
+++ b/src/components/common/AvatarStoryCircle.tsx
@@ -8,6 +8,7 @@ import type { ThemeKey } from '../../types';
 
 import { selectPeerStories, selectTheme } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
+import buildStyle from '../../util/buildStyle';
 import { REM } from './helpers/mediaDimensions';
 
 import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio';
@@ -18,6 +19,7 @@ interface OwnProps {
   size: number;
   withExtraGap?: boolean;
   colors?: string[];
+  style?: string;
 }
 
 interface StateProps {
@@ -52,6 +54,7 @@ function AvatarStoryCircle({
   withExtraGap,
   appTheme,
   colors,
+  style,
 }: OwnProps & StateProps) {
   const ref = useRef<HTMLCanvasElement>();
 
@@ -113,7 +116,7 @@ function AvatarStoryCircle({
     <canvas
       ref={ref}
       className={buildClassName('story-circle', className)}
-      style={`max-width: ${adaptedSize}px; max-height: ${adaptedSize}px;`}
+      style={buildStyle(`max-width: ${adaptedSize}px`, `max-height: ${adaptedSize}px`, style)}
     />
   );
 }
diff --git a/src/components/common/profile/ProfileInfo.module.scss b/src/components/common/profile/ProfileInfo.module.scss
index ea324625b..61a1a54cf 100644
--- a/src/components/common/profile/ProfileInfo.module.scss
+++ b/src/components/common/profile/ProfileInfo.module.scss
@@ -405,6 +405,10 @@
   grid-area: 1 / -1;
 
   @include mixins.with-vt-type('profileAvatar');
+
+  :global(.story-circle) {
+    @include mixins.with-vt-type('profileAvatar');
+  }
 }
 
 .activeProfilePhoto {
@@ -449,6 +453,14 @@
   &::view-transition-group(.photoDashes) {
     z-index: 1;
   }
+
+  &::view-transition-group(.avatarStoryCircle) {
+    z-index: -1;
+  }
+
+  &::view-transition-group(.profileInfo) {
+    z-index: -2;
+  }
 }
 
 @include mixins.on-active-vt('profileExpand') {
diff --git a/src/components/common/profile/ProfileInfo.tsx b/src/components/common/profile/ProfileInfo.tsx
index e774f49f2..4e4c2f45e 100644
--- a/src/components/common/profile/ProfileInfo.tsx
+++ b/src/components/common/profile/ProfileInfo.tsx
@@ -585,6 +585,7 @@ const ProfileInfo = ({
           size="jumbo"
           peer={peer}
           style={createVtnStyle('avatar', true)}
+          storyCircleStyle={createVtnStyle('avatarStoryCircle', true)}
           onClick={hasAvatar ? handleMinimizedAvatarClick : undefined}
         />
       )}
diff --git a/src/global/selectors/peers.ts b/src/global/selectors/peers.ts
index f90a46bd7..4ea0df1d0 100644
--- a/src/global/selectors/peers.ts
+++ b/src/global/selectors/peers.ts
@@ -8,6 +8,7 @@ import { getHasAdminRight, isChatAdmin, isChatChannel, isDeletedUser } from '../
 import { selectChat, selectChatFullInfo, selectIsMonoforumAdmin } from './chats';
 import { type ProfileCollectionKey } from './payments';
 import { selectTabState } from './tabs';
+import { selectPeerProfileColor } from './ui';
 import { selectBot, selectUser, selectUserFullInfo } from './users';
 
 export function selectPeer<T extends GlobalState>(global: T, peerId: string): ApiPeer | undefined {
@@ -72,10 +73,12 @@ export function selectPeerPaidMessagesStars<T extends GlobalState>(
 
 export function selectPeerHasProfileBackground<T extends GlobalState>(global: T, peerId: string) {
   const peer = selectPeer(global, peerId);
-  const profileColor = peer?.profileColor;
-  if (profileColor?.type === 'collectible') return true;
-  if (profileColor?.type === 'regular') return profileColor.color !== undefined;
-  return peer?.emojiStatus?.type === 'collectible';
+  if (!peer) return false;
+  const profileColor = selectPeerProfileColor(global, peer);
+
+  if (peer.profileColor?.type === 'collectible') return true;
+  if (peer.emojiStatus?.type === 'collectible') return true;
+  return Boolean(profileColor);
 }
 
 export function selectCanUpdateMainTab<T extends GlobalState>(global: T, peerId: string) {