From 4aa7ffd9df300cb62c1991b69159b5e5dc01da62 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 4 Apr 2025 13:04:01 +0200
Subject: [PATCH] Left Sidebar: Move buttons in login confirmation message
 (#5784)

---
 src/components/left/main/ChatList.tsx                | 12 +++++++++++-
 .../left/main/UnconfirmedSession.module.scss         |  1 +
 src/components/left/main/UnconfirmedSession.tsx      | 12 ++++++------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx
index cc06cbb8c..0d96ccfe4 100644
--- a/src/components/left/main/ChatList.tsx
+++ b/src/components/left/main/ChatList.tsx
@@ -32,6 +32,7 @@ import { useHotkeys } from '../../../hooks/useHotkeys';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
 import useLastCallback from '../../../hooks/useLastCallback';
+import useShowTransition from '../../../hooks/useShowTransition';
 import useOrderDiff from './hooks/useOrderDiff';
 
 import InfiniteScroll from '../../ui/InfiniteScroll';
@@ -115,6 +116,14 @@ const ChatList: FC<OwnProps> = ({
     if (!shouldShowUnconfirmedSessions) setUnconfirmedSessionHeight(0);
   }, [shouldShowUnconfirmedSessions]);
 
+  const {
+    ref: sessionRef,
+    shouldRender,
+  } = useShowTransition({
+    isOpen: shouldShowUnconfirmedSessions,
+    withShouldRender: true,
+  });
+
   // Support <Alt>+<Up/Down> to navigate between chats
   useHotkeys(useMemo(() => (isActive && orderedIds?.length ? {
     'Alt+ArrowUp': (e: KeyboardEvent) => {
@@ -248,9 +257,10 @@ const ChatList: FC<OwnProps> = ({
       onLoadMore={getMore}
       onDragLeave={handleDragLeave}
     >
-      {shouldShowUnconfirmedSessions && (
+      {shouldRender && (
         <UnconfirmedSession
           key="unconfirmed"
+          sessionRef={sessionRef}
           sessions={sessions!}
           onHeightChange={setUnconfirmedSessionHeight}
         />
diff --git a/src/components/left/main/UnconfirmedSession.module.scss b/src/components/left/main/UnconfirmedSession.module.scss
index d5450fe4c..61b4a62a9 100644
--- a/src/components/left/main/UnconfirmedSession.module.scss
+++ b/src/components/left/main/UnconfirmedSession.module.scss
@@ -22,6 +22,7 @@
 
 .buttons {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-around;
   column-gap: 1rem;
 }
diff --git a/src/components/left/main/UnconfirmedSession.tsx b/src/components/left/main/UnconfirmedSession.tsx
index 6862ab463..7169933de 100644
--- a/src/components/left/main/UnconfirmedSession.tsx
+++ b/src/components/left/main/UnconfirmedSession.tsx
@@ -1,4 +1,5 @@
-import React, { memo, useMemo, useRef } from '../../../lib/teact/teact';
+import type { RefObject } from '../../../lib/teact/teact';
+import React, { memo, useMemo } from '../../../lib/teact/teact';
 import { getActions } from '../../../global';
 
 import type { ApiSession } from '../../../api/types';
@@ -14,15 +15,14 @@ import styles from './UnconfirmedSession.module.scss';
 type OwnProps = {
   sessions: Record<string, ApiSession>;
   onHeightChange: (height: number) => void;
+  sessionRef: RefObject<HTMLDivElement | null>;
 };
 
-const UnconfirmedSession = ({ sessions, onHeightChange } : OwnProps) => {
+const UnconfirmedSession = ({ sessionRef, sessions, onHeightChange } : OwnProps) => {
   const { changeSessionSettings, terminateAuthorization, showNotification } = getActions();
-  // eslint-disable-next-line no-null/no-null
-  const ref = useRef<HTMLDivElement>(null);
   const lang = useOldLang();
 
-  useResizeObserver(ref, (entry) => {
+  useResizeObserver(sessionRef, (entry) => {
     const height = entry.borderBoxSize?.[0]?.blockSize || entry.contentRect.height;
     onHeightChange(height);
   });
@@ -52,7 +52,7 @@ const UnconfirmedSession = ({ sessions, onHeightChange } : OwnProps) => {
   });
 
   return (
-    <div className={styles.root} ref={ref}>
+    <div className={styles.root} ref={sessionRef}>
       <h2 className={styles.title}>{lang('UnconfirmedAuthTitle')}</h2>
       <p className={styles.info}>
         {lang('UnconfirmedAuthSingle', locationString)}