[Clipclop] Input polish (#3819)

* tweak input styles + add min-shell mode

* android tweaks + hitslop

src/screens/Messages/Conversation/MessagesList.tsx

@@ -6,14 +6,18 @@ import {
   View,
 } from 'react-native'
 import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
 
+import {isIOS} from '#/platform/detection'
 import {useChat} from '#/state/messages'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
-import {isWeb} from 'platform/detection'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageItem} from '#/screens/Messages/Conversation/MessageItem'
+import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -112,13 +116,24 @@ export function MessagesList() {
     [],
   )
 
+  const setMinShellMode = useSetMinimalShellMode()
+  useFocusEffect(
+    useCallback(() => {
+      setMinShellMode(true)
+      return () => setMinShellMode(false)
+    }, [setMinShellMode]),
+  )
+
+  const {bottom: bottomInset} = useSafeAreaInsets()
+
   return (
     <KeyboardAvoidingView
-      style={{flex: 1, marginBottom: isWeb ? 20 : 85}}
+      style={[a.flex_1, {marginBottom: bottomInset}]}
+      keyboardVerticalOffset={isIOS ? 60 : 25}
       behavior="padding"
-      keyboardVerticalOffset={70}
-      contentContainerStyle={{flex: 1}}>
+      contentContainerStyle={a.flex_1}>
       <FlatList
+        ref={flatListRef}
         data={
           chat.state.status === ConvoStatus.Ready ? chat.state.items : undefined
         }
@@ -150,17 +165,13 @@ export function MessagesList() {
           />
         }
         removeClippedSubviews={true}
-        ref={flatListRef}
-        keyboardDismissMode="none"
+        keyboardDismissMode="on-drag"
+      />
+      <MessageInput
+        onSendMessage={onSendMessage}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
       />
-
-      <View style={{paddingHorizontal: 10}}>
-        <MessageInput
-          onSendMessage={onSendMessage}
-          onFocus={onInputFocus}
-          onBlur={onInputBlur}
-        />
-      </View>
     </KeyboardAvoidingView>
   )
 }