From daa63205b273ea810c4c8b45166ebad9c4dd6e53 Mon Sep 17 00:00:00 2001
From: evm97 <j.m.n.90@bk.ru>
Date: Mon, 27 Nov 2023 14:17:17 +0300
Subject: [PATCH] feat: [TG-255] add ui adjustments

---
 src/components/left/main/ChatFolders.tsx                   | 6 ++++--
 .../UluChatFolders/TreeRenderers/TreeContainer.module.scss | 3 +++
 .../main/UluChatFolders/TreeRenderers/TreeContainer.tsx    | 7 ++++++-
 .../UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx   | 6 +++---
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.module.scss

diff --git a/src/components/left/main/ChatFolders.tsx b/src/components/left/main/ChatFolders.tsx
index d40654aa70..22e35748d8 100644
--- a/src/components/left/main/ChatFolders.tsx
+++ b/src/components/left/main/ChatFolders.tsx
@@ -74,6 +74,7 @@ const SAVED_MESSAGES_HOTKEY = '0';
 const FIRST_FOLDER_INDEX = 0;
 const INVISIBLE_CHAT_TREE_STYLES = 'max-height: 0' as CSSProperties;
 const RECALCULATE_TREE_HEIGHT_INTERVAL_MS = 300;
+const COMMON_PADDING = 16;
 
 const ChatFolders: FC<OwnProps & StateProps> = ({
   leftMainHeaderRef,
@@ -348,10 +349,11 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     let heightSubtractionPx = 0;
     heightSubtractionPx += leftMainHeaderRef.current.getBoundingClientRect().height;
     heightSubtractionPx += uluSystemFoldersRef.current.getBoundingClientRect().height;
+    heightSubtractionPx -= 2 * COMMON_PADDING;
 
-    // if for some reason modifier is still 0 we also hide the tree
+    // if for some reason modifier is still 0 or less we also hide the tree
     // for the same reasons as above
-    if (!heightSubtractionPx) {
+    if (heightSubtractionPx <= 0) {
       return INVISIBLE_CHAT_TREE_STYLES;
     }
 
diff --git a/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.module.scss b/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.module.scss
new file mode 100644
index 0000000000..655a5ffba8
--- /dev/null
+++ b/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.module.scss
@@ -0,0 +1,3 @@
+.container {
+	padding-bottom: 11rem;
+}
\ No newline at end of file
diff --git a/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.tsx b/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.tsx
index e61a01cf9a..74ffc7c0e9 100644
--- a/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.tsx
+++ b/src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.tsx
@@ -4,7 +4,10 @@ import React from 'react';
 import type { TreeInformation } from 'react-complex-tree';
 import type { FC } from '../../../../../lib/teact/teact';
 
+import buildClassName from '../../../../../util/buildClassName';
+
 import chatFoldersWrapperStyles from '../../UluChatFoldersWrapper.module.scss';
+import styles from './TreeContainer.module.scss';
 
 type OwnProps = {
   children: ReactNode;
@@ -13,9 +16,11 @@ type OwnProps = {
 };
 
 const TreeContainer: FC<OwnProps> = ({ children, containerProps }) => {
+  const className = buildClassName(chatFoldersWrapperStyles.wrapper, styles.container);
+
   return (
     // @ts-ignore
-    <div className={chatFoldersWrapperStyles.wrapper} {...containerProps} style={{ maxHeight: '100%' }}>
+    <div className={className} {...containerProps} style={{ maxHeight: '100%' }}>
       {children}
     </div>
   );
diff --git a/src/components/left/main/UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx b/src/components/left/main/UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx
index 225b50bf78..6cd9dcf000 100644
--- a/src/components/left/main/UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx
+++ b/src/components/left/main/UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx
@@ -25,6 +25,8 @@ import SvgFolderOpen from './SvgFolderOpen';
 import stylesUluChatFolder from '../../../UluChatFolder/UluChatFolder.module.scss';
 import styles from './ChatFolder.module.scss';
 
+const svgFill = 'var(--color-gray)';
+
 const ChatFolder: FC<{
   children: ReactNode;
   item: TreeItemChat<any>;
@@ -36,7 +38,7 @@ const ChatFolder: FC<{
   contextRootElementSelector?: string;
   onClick?: (arg: string | number) => void;
 }> = ({
-  children, active, expanded, title, shouldStressUnreadMessages, item, context, onClick, contextRootElementSelector,
+  children, expanded, title, shouldStressUnreadMessages, item, context, onClick, contextRootElementSelector,
 }) => {
   const {
     contextActions, index, unreadCount: messagesUnreadCount, ref,
@@ -44,10 +46,8 @@ const ChatFolder: FC<{
 
   const classNameWrapper = buildClassName(
     stylesUluChatFolder.wrapper,
-    active && stylesUluChatFolder.active,
     !!messagesUnreadCount && shouldStressUnreadMessages && stylesUluChatFolder['has-unread-messages'],
   );
-  const svgFill = active ? 'var(--color-white)' : 'var(--color-gray)';
   const [SvgComponent, svgComponentProps] = expanded
     ? [SvgFolderOpen, { height: 17, width: 20 }]
     : [SvgFolderClosed, { height: 17, width: 18 }];