Profile: Expand on avatar click (#6334)

src/components/common/profile/ProfileInfo.tsx

@@ -76,6 +76,7 @@ type OwnProps = {
   isForSettings?: boolean;
   canPlayVideo: boolean;
   isForMonoforum?: boolean;
+  onExpand?: NoneToVoidFunction;
 };
 
 type StateProps = {
@@ -130,6 +131,7 @@ const ProfileInfo = ({
   theme,
   isPlain,
   savedGifts,
+  onExpand,
 }: OwnProps & StateProps) => {
   const {
     openMediaViewer,
@@ -279,6 +281,15 @@ const ProfileInfo = ({
     }
   });
 
+  const handleMinimizedAvatarClick = useLastCallback(() => {
+    if (isForSettings) {
+      handleProfilePhotoClick();
+      return;
+    }
+
+    onExpand?.();
+  });
+
   function handleSelectFallbackPhoto() {
     if (!isFirst) return;
     setHasSlideAnimation(true);
@@ -565,7 +576,7 @@ const ProfileInfo = ({
           size="jumbo"
           peer={peer}
           style={createVtnStyle('avatar', true)}
-          onClick={isForSettings ? handleProfilePhotoClick : undefined}
+          onClick={handleMinimizedAvatarClick}
         />
       )}
 

src/components/left/main/ChatList.tsx

@@ -215,7 +215,12 @@ const ChatList: FC<OwnProps> = ({
     toggleStoryRibbon({ isShown: false, isArchived });
   });
 
-  useTopOverscroll(containerRef, handleShowStoryRibbon, handleHideStoryRibbon, isSaved);
+  useTopOverscroll({
+    containerRef,
+    onOverscroll: handleShowStoryRibbon,
+    onReset: handleHideStoryRibbon,
+    isDisabled: isSaved,
+  });
 
   function renderChats() {
     const viewportOffset = orderedIds!.indexOf(viewportIds![0]);

src/components/right/Profile.tsx

@@ -627,9 +627,13 @@ const Profile = ({
     resetGiftProfileFilter({ peerId: chatId });
   });
 
-  useTopOverscroll(
+  useTopOverscroll({
-    containerRef, handleExpandProfile, handleCollapseProfile, !hasAvatar || !shouldRenderProfileInfo,
+    containerRef,
-  );
+    onOverscroll: handleExpandProfile,
+    onReset: handleCollapseProfile,
+    isOverscrolled: isProfileExpanded,
+    isDisabled: !hasAvatar || !shouldRenderProfileInfo,
+  });
 
   useEffect(() => {
     if (!transitionRef.current || !IS_TOUCH_ENV) {
@@ -1055,6 +1059,7 @@ const Profile = ({
           peerId={peerId}
           canPlayVideo={isReady}
           isForMonoforum={Boolean(monoforumChannel)}
+          onExpand={handleExpandProfile}
         />
         <ChatExtra
           chatOrUserId={profileId}

src/hooks/scroll/useTopOverscroll.tsx

@@ -30,11 +30,19 @@ const initialActiveScrollContext: ActiveScrollContext = {
   timeout: undefined,
 };
 
-export default function useTopOverscroll(
+export default function useTopOverscroll({
-  containerRef: ElementRef<HTMLDivElement>,
+  containerRef,
-  onOverscroll?: AnyToVoidFunction,
+  isOverscrolled,
-  onReset?: AnyToVoidFunction,
+  isDisabled,
-  isDisabled?: boolean,
+  onOverscroll,
+  onReset,
+}: {
+  containerRef: ElementRef<HTMLDivElement>;
+  isOverscrolled?: boolean;
+  onOverscroll?: AnyToVoidFunction;
+  onReset?: AnyToVoidFunction;
+  isDisabled?: boolean;
+},
 ) {
   const [getState, setState] = useSignal<State>('normal');
   const activeScrollRef = useRef<ActiveScrollContext>({ ...initialActiveScrollContext });
@@ -197,6 +205,10 @@ export default function useTopOverscroll(
     };
   }, [containerRef, isDisabled, getState]);
 
+  useEffect(() => {
+    setState(isOverscrolled ? 'overscroll' : 'normal');
+  }, [isOverscrolled, setState]);
+
   useEffect(() => {
     const container = containerRef.current;
     if (isDisabled || !container) {