From 2583b470b28a9737fae1b9ee9059a00d5caa5cae Mon Sep 17 00:00:00 2001
From: Paul Vrn <78180340+Paul-vrn@users.noreply.github.com>
Date: Mon, 30 Oct 2023 04:53:15 +0100
Subject: [PATCH] [MM-54599] Fix Servers bottom sheet (#7609)

---
 app/screens/home/channel_list/servers/index.tsx   | 15 +++++++++++----
 .../channel_list/servers/servers_list/index.tsx   |  7 ++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/screens/home/channel_list/servers/index.tsx b/app/screens/home/channel_list/servers/index.tsx
index a1135ce4f..307c9a5af 100644
--- a/app/screens/home/channel_list/servers/index.tsx
+++ b/app/screens/home/channel_list/servers/index.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {StyleSheet} from 'react-native';
+import {Dimensions, StyleSheet} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import ServerIcon from '@components/server_icon';
@@ -27,7 +27,8 @@ export type ServersRef = {
     openServers: () => void;
 }
 
-export const SERVER_ITEM_HEIGHT = 72;
+export const SERVER_ITEM_HEIGHT = 75;
+export const PUSH_ALERT_TEXT_HEIGHT = 42;
 const subscriptions: Map<string, UnreadSubscription> = new Map();
 
 const styles = StyleSheet.create({
@@ -116,12 +117,18 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
                     <ServerList servers={registeredServers.current!}/>
                 );
             };
+            const maxScreenHeight = Math.ceil(0.6 * Dimensions.get('window').height);
+            const maxSnapPoint = Math.min(
+                maxScreenHeight,
+                bottomSheetSnapPoint(registeredServers.current.length, SERVER_ITEM_HEIGHT, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT +
+                    (registeredServers.current.filter((s: ServersModel) => s.lastActiveAt).length * PUSH_ALERT_TEXT_HEIGHT),
+            );
 
             const snapPoints: BottomSheetProps['snapPoints'] = [
                 1,
-                bottomSheetSnapPoint(Math.min(2.5, registeredServers.current.length), 72, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT,
+                maxSnapPoint,
             ];
-            if (registeredServers.current.length > 1) {
+            if (maxSnapPoint === maxScreenHeight) {
                 snapPoints.push('80%');
             }
 
diff --git a/app/screens/home/channel_list/servers/servers_list/index.tsx b/app/screens/home/channel_list/servers/servers_list/index.tsx
index 22cac4f22..ead1bf96d 100644
--- a/app/screens/home/channel_list/servers/servers_list/index.tsx
+++ b/app/screens/home/channel_list/servers/servers_list/index.tsx
@@ -4,11 +4,12 @@
 import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {FlatList, type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {FlatList, StyleSheet, View, type ListRenderItemInfo} from 'react-native';
 
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
+import {BUTTON_HEIGHT} from '@screens/bottom_sheet';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {addNewServer} from '@utils/server';
 
@@ -29,6 +30,9 @@ const styles = StyleSheet.create({
     contentContainer: {
         marginVertical: 4,
     },
+    serverList: {
+        marginBottom: BUTTON_HEIGHT,
+    },
 });
 
 const keyExtractor = (item: ServersModel) => item.url;
@@ -68,6 +72,7 @@ const ServerList = ({servers}: Props) => {
             <View style={[styles.container, {marginTop: isTablet ? 12 : 0}]}>
                 <List
                     data={servers}
+                    style={styles.serverList}
                     renderItem={renderServer}
                     keyExtractor={keyExtractor}
                     contentContainerStyle={styles.contentContainer}