Composer UI fixes (#6065)

* Fix close button overlap

* Make footer actually sticky on web

* Special toast for thread

* Only stick to bottom for last post

src/view/com/composer/Composer.tsx

@@ -443,7 +443,9 @@ export const ComposePost = ({
     }
     onClose()
     Toast.show(
-      replyTo
+      thread.posts.length > 1
+        ? _(msg`Your posts have been published`)
+        : replyTo
         ? _(msg`Your reply has been published`)
         : _(msg`Your post has been published`),
     )
@@ -523,6 +525,7 @@ export const ComposePost = ({
     }
   }, [composerState])
 
+  const isLastThreadedPost = thread.posts.length > 1 && nextPost === undefined
   const {
     scrollHandler,
     onScrollViewContentSizeChange,
@@ -531,7 +534,7 @@ export const ComposePost = ({
     bottomBarAnimatedStyle,
   } = useScrollTracker({
     scrollViewRef,
-    stickyBottom: true,
+    stickyBottom: isLastThreadedPost,
   })
 
   const keyboardVerticalOffset = useKeyboardVerticalOffset()
@@ -564,7 +567,7 @@ export const ComposePost = ({
     </>
   )
 
-  const isFooterSticky = !isNative && thread.posts.length > 1
+  const isWebFooterSticky = !isNative && thread.posts.length > 1
   return (
     <BottomSheetPortalProvider>
       <KeyboardAvoidingView
@@ -615,6 +618,7 @@ export const ComposePost = ({
                   dispatch={composerDispatch}
                   textInput={post.id === activePost.id ? textInput : null}
                   isFirstPost={index === 0}
+                  isPartOfThread={thread.posts.length > 1}
                   isReply={index > 0 || !!replyTo}
                   isActive={post.id === activePost.id}
                   canRemovePost={thread.posts.length > 1}
@@ -624,11 +628,13 @@ export const ComposePost = ({
                   onPublish={onComposerPostPublish}
                   onError={setError}
                 />
-                {isFooterSticky && post.id === activePost.id && footer}
+                {isWebFooterSticky && post.id === activePost.id && (
+                  <View style={styles.stickyFooterWeb}>{footer}</View>
+                )}
               </React.Fragment>
             ))}
           </Animated.ScrollView>
-          {!isFooterSticky && footer}
+          {!isWebFooterSticky && footer}
         </View>
 
         <Prompt.Basic
@@ -651,6 +657,7 @@ let ComposerPost = React.memo(function ComposerPost({
   isActive,
   isReply,
   isFirstPost,
+  isPartOfThread,
   canRemovePost,
   canRemoveQuote,
   onClearVideo,
@@ -664,6 +671,7 @@ let ComposerPost = React.memo(function ComposerPost({
   isActive: boolean
   isReply: boolean
   isFirstPost: boolean
+  isPartOfThread: boolean
   canRemovePost: boolean
   canRemoveQuote: boolean
   onClearVideo: (postId: string) => void
@@ -743,6 +751,8 @@ let ComposerPost = React.memo(function ComposerPost({
           placeholder={selectTextInputPlaceholder}
           autoFocus
           webForceMinHeight={forceMinHeight}
+          // To avoid overlap with the close button:
+          hasRightPadding={isPartOfThread}
           isActive={isActive}
           setRichText={rt => {
             dispatchPost({type: 'update_richtext', richtext: rt})
@@ -1395,6 +1405,11 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     marginLeft: 12,
   },
+  stickyFooterWeb: {
+    // @ts-ignore web-only
+    position: 'sticky',
+    bottom: 0,
+  },
   errorLine: {
     flexDirection: 'row',
     alignItems: 'center',