[Clipclop] Input polish (#3819)

* tweak input styles + add min-shell mode

* android tweaks + hitslop

src/screens/Messages/Conversation/MessageInput.tsx

@@ -12,6 +12,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
 
@@ -60,13 +61,14 @@ export function MessageInput({
   )
 
   return (
+    <View style={a.p_sm}>
       <View
         style={[
+          a.w_full,
           a.flex_row,
           a.py_sm,
           a.px_sm,
           a.pl_md,
-        a.mt_sm,
           t.atoms.bg_contrast_25,
           {borderRadius: 23},
         ]}>
@@ -89,6 +91,9 @@ export function MessageInput({
         />
         <Pressable
           accessibilityRole="button"
+          accessibilityLabel={_(msg`Send message`)}
+          accessibilityHint=""
+          hitSlop={HITSLOP_10}
           style={[
             a.rounded_full,
             a.align_center,
@@ -99,5 +104,6 @@ export function MessageInput({
           <PaperPlane fill={t.palette.white} />
         </Pressable>
       </View>
+    </View>
   )
 }

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -45,13 +45,13 @@ export function MessageInput({
   )
 
   return (
+    <View style={a.p_sm}>
       <View
         style={[
           a.flex_row,
           a.py_sm,
           a.px_sm,
           a.pl_md,
-        a.mt_sm,
           t.atoms.bg_contrast_25,
           {borderRadius: 23},
         ]}>
@@ -64,7 +64,7 @@ export function MessageInput({
             {
               backgroundColor: 'transparent',
               resize: 'none',
-            paddingTop: 6,
+              paddingTop: 4,
             },
           ])}
           maxRows={12}
@@ -87,5 +87,6 @@ export function MessageInput({
           <PaperPlane fill={t.palette.white} />
         </Pressable>
       </View>
+    </View>
   )
 }

src/screens/Messages/Conversation/MessageItem.tsx

@@ -153,7 +153,7 @@ function Metadata({
           style={[
             t.atoms.text_contrast_medium,
             a.text_xs,
-            a.mt_xs,
+            a.mt_2xs,
             a.mb_lg,
             style,
           ]}>

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={a.flex_1}>
-      contentContainerStyle={{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="on-drag"
-        keyboardDismissMode="none"
       />
-
-      <View style={{paddingHorizontal: 10}}>
       <MessageInput
         onSendMessage={onSendMessage}
         onFocus={onInputFocus}
         onBlur={onInputBlur}
       />
-      </View>
     </KeyboardAvoidingView>
   )
 }