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
bluesky-social · Nov 1, 2024 · 3eb531b · 3eb531b
1 parent 46004fb
commit 3eb531b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/view/com/composer/Composer.tsx b/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',

diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
@@ -44,6 +44,7 @@ interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   richtext: RichText
   placeholder: string
   webForceMinHeight: boolean
+  hasRightPadding: boolean
   isActive: boolean
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
@@ -61,6 +62,7 @@ export const TextInput = forwardRef(function TextInputImpl(
   {
     richtext,
     placeholder,
+    hasRightPadding,
     setRichText,
     onPhotoPasted,
     onNewLink,
@@ -232,7 +234,7 @@ export const TextInput = forwardRef(function TextInputImpl(
   }, [t, richtext, inputTextStyle])
 
   return (
-    <View style={[a.flex_1, a.pl_md]}>
+    <View style={[a.flex_1, a.pl_md, hasRightPadding && a.pr_4xl]}>
       <PasteInput
         testID="composerTextInput"
         ref={textInput}

diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -42,6 +42,7 @@ interface TextInputProps {
   placeholder: string
   suggestedLinks: Set<string>
   webForceMinHeight: boolean
+  hasRightPadding: boolean
   isActive: boolean
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
@@ -56,6 +57,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     richtext,
     placeholder,
     webForceMinHeight,
+    hasRightPadding,
     isActive,
     setRichText,
     onPhotoPasted,
@@ -307,7 +309,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
 
   return (
     <>
-      <View style={styles.container}>
+      <View style={[styles.container, hasRightPadding && styles.rightPadding]}>
         {/* @ts-ignore inputStyle is fine */}
         <EditorContent editor={editor} style={inputStyle} />
       </View>
@@ -373,6 +375,9 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     marginBottom: 10,
   },
+  rightPadding: {
+    paddingRight: 32,
+  },
   dropContainer: {
     backgroundColor: '#0007',
     pointerEvents: 'none',