#6861: Use available space to make focus on Composer TextInput easier (copy) (#7836)

* 6861: Use available space to make focus on Composer TextInput easier

* Undo web

* bluesky-social#6861: Adjust focus area for native platforms taking Embeds into consideration

* use atoms

* remove empty div

* remove debug atom, whoopsie

---------

Co-authored-by: GrizliK1988 <dgrachikov@gmail.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

3 files changed, 40 insertions, 27 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index e8fe1a7ce..e80b80449 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -657,6 +657,7 @@ export const ComposePost = ({
             ref={scrollViewRef}
             layout={native(LinearTransition)}
             onScroll={scrollHandler}
+            contentContainerStyle={a.flex_grow}
             style={a.flex_1}
             keyboardShouldPersistTaps="always"
             onContentSizeChange={onScrollViewContentSizeChange}
@@ -795,19 +796,22 @@ let ComposerPost = React.memo(function ComposerPost({
   )
 
   return (
-    <View style={[styles.post, !isActive && styles.inactivePost]}>
-      <View
-        style={[
-          styles.textInputLayout,
-          isNative && styles.textInputLayoutMobile,
-        ]}>
+    <View
+      style={[
+        a.mx_lg,
+        !isActive && styles.inactivePost,
+        isTextOnly && isNative && a.flex_grow,
+      ]}>
+      <View style={[a.flex_row, isNative && a.flex_1]}>
         <UserAvatar
           avatar={currentProfile?.avatar}
           size={50}
           type={currentProfile?.associated?.labeler ? 'labeler' : 'user'}
+          style={[a.mt_xs]}
         />
         <TextInput
           ref={textInput}
+          style={[a.pt_xs]}
           richtext={richtext}
           placeholder={selectTextInputPlaceholder}
           autoFocus
@@ -1077,9 +1081,8 @@ function ComposerEmbeds({
           </Animated.View>
         )}
       </LayoutAnimationConfig>
-
-      <View style={!video ? [a.mt_md] : []}>
-        {embed.quote?.uri ? (
+      {embed.quote?.uri ? (
+        <View style={!video ? [a.mt_md] : []}>
           <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
             <View style={{pointerEvents: 'none'}}>
               <LazyQuoteEmbed uri={embed.quote.uri} />
@@ -1088,8 +1091,8 @@ function ComposerEmbeds({
               <QuoteX onRemove={() => dispatch({type: 'embed_remove_quote'})} />
             )}
           </View>
-        ) : null}
-      </View>
+        </View>
+      ) : null}
     </>
   )
 }
@@ -1469,7 +1472,6 @@ const styles = StyleSheet.create({
     marginLeft: 12,
   },
   stickyFooterWeb: {
-    // @ts-ignore web-only
     position: 'sticky',
     bottom: 0,
   },
@@ -1503,19 +1505,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginRight: 5,
   },
-  post: {
-    marginHorizontal: 16,
-  },
   inactivePost: {
     opacity: 0.5,
   },
-  textInputLayout: {
-    flexDirection: 'row',
-    paddingTop: 4,
-  },
-  textInputLayoutMobile: {
-    flex: 1,
-  },
   addExtLinkBtn: {
     borderWidth: 1,
     borderRadius: 24,
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
index 55fd3650f..22d1f1d08 100644
--- a/src/view/com/composer/text-input/TextInput.tsx
+++ b/src/view/com/composer/text-input/TextInput.tsx
@@ -249,9 +249,11 @@ export const TextInput = forwardRef(function TextInputImpl(
         multiline
         scrollEnabled={false}
         numberOfLines={2}
+        {...props}
         style={[
           inputTextStyle,
           a.w_full,
+          a.h_full,
           {
             textAlignVertical: 'top',
             minHeight: 60,
@@ -261,8 +263,8 @@ export const TextInput = forwardRef(function TextInputImpl(
             borderWidth: 1,
             borderColor: 'transparent',
           },
-        ]}
-        {...props}>
+          props.style,
+        ]}>
         {textDecorated}
       </PasteInput>
       <Autocomplete
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 934e8f50c..5e66a0974 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,5 +1,12 @@
 import React, {memo, useMemo} from 'react'
-import {Image, Pressable, StyleSheet, View} from 'react-native'
+import {
+  Image,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import Svg, {Circle, Path, Rect} from 'react-native-svg'
 import {ModerationUI} from '@atproto/api'
@@ -48,6 +55,7 @@ interface UserAvatarProps extends BaseUserAvatarProps {
   moderation?: ModerationUI
   usePlainRNImage?: boolean
   onLoad?: () => void
+  style?: StyleProp<ViewStyle>
 }
 
 interface EditableUserAvatarProps extends BaseUserAvatarProps {
@@ -180,6 +188,7 @@ let UserAvatar = ({
   moderation,
   usePlainRNImage = false,
   onLoad,
+  style,
 }: UserAvatarProps): React.ReactNode => {
   const pal = usePalette('default')
   const backgroundColor = pal.colors.backgroundLight
@@ -217,9 +226,19 @@ let UserAvatar = ({
     )
   }, [moderation?.alert, size, pal])
 
+  const containerStyle = useMemo(() => {
+    return [
+      {
+        width: size,
+        height: size,
+      },
+      style,
+    ]
+  }, [size, style])
+
   return avatar &&
     !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
-    <View style={{width: size, height: size}}>
+    <View style={containerStyle}>
       {usePlainRNImage ? (
         <Image
           accessibilityIgnoresInvertColors
@@ -254,7 +273,7 @@ let UserAvatar = ({
       {alert}
     </View>
   ) : (
-    <View style={{width: size, height: size}}>
+    <View style={containerStyle}>
       <DefaultAvatar type={type} shape={finalShape} size={size} />
       {alert}
     </View>