Split composer into smaller components (#5941)

* Extract ComposerTopBar

* Rename state variables to align with props

* Extract ComposerEmbeds

* Extract ComposerPills

* Extract ComposerFooter

* Tweak condition to be simpler

* Extract ComposerPost

src/view/com/composer/Composer.tsx

@@ -42,6 +42,7 @@ import {
   AppBskyFeedDefs,
   AppBskyFeedGetPostThread,
   BskyAgent,
+  RichText,
 } from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
@@ -112,8 +113,11 @@ import * as Prompt from '#/components/Prompt'
 import {Text as NewText} from '#/components/Typography'
 import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
 import {
+  ComposerAction,
+  ComposerDraft,
   composerReducer,
   createComposerState,
+  EmbedDraft,
   MAX_IMAGES,
 } from './state/composer'
 import {NO_VIDEO, NoVideoState, processVideo, VideoState} from './state/video'
@@ -142,10 +146,7 @@ export const ComposePost = ({
   const agent = useAgent()
   const queryClient = useQueryClient()
   const currentDid = currentAccount!.did
-  const {data: currentProfile} = useProfileQuery({did: currentDid})
   const {closeComposer} = useComposerControls()
-  const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
   const {_} = useLingui()
   const requireAltTextEnabled = useRequireAltTextEnabled()
   const langPrefs = useLanguagePrefs()
@@ -154,11 +155,10 @@ export const ComposePost = ({
   const discardPromptControl = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
   const {closeAllModals} = useModalControls()
-  const t = useTheme()
 
   const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
-  const [isProcessing, setIsProcessing] = useState(false)
+  const [isPublishing, setIsPublishing] = useState(false)
-  const [processingState, setProcessingState] = useState('')
+  const [publishingStage, setPublishingStage] = useState('')
   const [error, setError] = useState('')
 
   const [draft, dispatch] = useReducer(
@@ -222,22 +222,6 @@ export const ComposePost = ({
     dispatch({type: 'embed_remove_video'})
   }, [videoState.abortController, dispatch])
 
-  const updateVideoDimensions = useCallback(
-    (width: number, height: number) => {
-      dispatch({
-        type: 'embed_update_video',
-        videoAction: {
-          type: 'update_dimensions',
-          width,
-          height,
-          signal: videoState.abortController.signal,
-        },
-      })
-    },
-    [videoState.abortController],
-  )
-
-  const hasVideo = Boolean(videoState.asset || videoState.video)
   const [publishOnUpload, setPublishOnUpload] = useState(false)
 
   const onClose = useCallback(() => {
@@ -299,32 +283,6 @@ export const ComposePost = ({
     }
   }, [onPressCancel, closeAllDialogs, closeAllModals])
 
-  const onNewLink = useCallback((uri: string) => {
-    dispatch({type: 'embed_add_uri', uri})
-  }, [])
-
-  const onImageAdd = useCallback(
-    (next: ComposerImage[]) => {
-      dispatch({
-        type: 'embed_add_images',
-        images: next,
-      })
-    },
-    [dispatch],
-  )
-
-  const onPhotoPasted = useCallback(
-    async (uri: string) => {
-      if (uri.startsWith('data:video/')) {
-        selectVideo({uri, type: 'video', height: 0, width: 0})
-      } else {
-        const res = await pasteImage(uri)
-        onImageAdd([res])
-      }
-    },
-    [selectVideo, onImageAdd],
-  )
-
   const isAltTextRequiredAndMissing = useMemo(() => {
     if (!requireAltTextEnabled) return false
 
@@ -336,8 +294,8 @@ export const ComposePost = ({
   }, [images, extGifAlt, extGif, requireAltTextEnabled])
 
   const onPressPublish = React.useCallback(
-    async (finishedUploading?: boolean) => {
+    async (finishedUploading: boolean) => {
-      if (isProcessing || graphemeLength > MAX_GRAPHEME_LENGTH) {
+      if (isPublishing || graphemeLength > MAX_GRAPHEME_LENGTH) {
         return
       }
 
@@ -368,7 +326,7 @@ export const ComposePost = ({
         return
       }
 
-      setIsProcessing(true)
+      setIsPublishing(true)
 
       let postUri
       try {
@@ -376,7 +334,7 @@ export const ComposePost = ({
           await apilib.post(agent, queryClient, {
             draft: draft,
             replyTo: replyTo?.uri,
-            onStateChange: setProcessingState,
+            onStateChange: setPublishingStage,
             langs: toPostLanguages(langPrefs.postLanguage),
           })
         ).uri
@@ -406,7 +364,7 @@ export const ComposePost = ({
           err = _(msg`This post's author has disabled quote posts.`)
         }
         setError(err)
-        setIsProcessing(false)
+        setIsPublishing(false)
         return
       } finally {
         if (postUri) {
@@ -456,7 +414,7 @@ export const ComposePost = ({
       images,
       graphemeLength,
       isAltTextRequiredAndMissing,
-      isProcessing,
+      isPublishing,
       langPrefs.postLanguage,
       onClose,
       onPost,
@@ -484,28 +442,11 @@ export const ComposePost = ({
     () => graphemeLength <= MAX_GRAPHEME_LENGTH && !isAltTextRequiredAndMissing,
     [graphemeLength, isAltTextRequiredAndMissing],
   )
-  const selectTextInputPlaceholder = replyTo
-    ? _(msg`Write your reply`)
-    : _(msg`What's up?`)
-
-  const canSelectImages =
-    images.length < MAX_IMAGES &&
-    videoState.status === 'idle' &&
-    !videoState.video
-  const hasMedia = images.length > 0 || Boolean(videoState.video)
 
   const onEmojiButtonPress = useCallback(() => {
     openEmojiPicker?.(textInput.current?.getCursorPosition())
   }, [openEmojiPicker])
 
-  const onSelectGif = useCallback((gif: Gif) => {
-    dispatch({type: 'embed_add_gif', gif})
-  }, [])
-
-  const handleChangeGifAltText = useCallback((altText: string) => {
-    dispatch({type: 'embed_update_gif', alt: altText})
-  }, [])
-
   const {
     scrollHandler,
     onScrollViewContentSizeChange,
@@ -527,86 +468,24 @@ export const ComposePost = ({
           style={[a.flex_1, viewStyles]}
           aria-modal
           accessibilityViewIsModal>
-          <Animated.View
+          <ComposerTopBar
-            style={topBarAnimatedStyle}
+            canPost={canPost}
-            layout={native(LinearTransition)}>
+            isReply={!!replyTo}
-            <View style={styles.topbarInner}>
+            isPublishQueued={videoState.status !== 'idle' && publishOnUpload}
-              <Button
+            isPublishing={isPublishing}
-                label={_(msg`Cancel`)}
+            publishingStage={publishingStage}
-                variant="ghost"
+            topBarAnimatedStyle={topBarAnimatedStyle}
-                color="primary"
+            onCancel={onPressCancel}
-                shape="default"
+            onPublish={() => onPressPublish(false)}>
-                size="small"
+            {isAltTextRequiredAndMissing && <AltTextReminder />}
-                style={[
-                  a.rounded_full,
-                  a.py_sm,
-                  {paddingLeft: 7, paddingRight: 7},
-                ]}
-                onPress={onPressCancel}
-                accessibilityHint={_(
-                  msg`Closes post composer and discards post draft`,
-                )}>
-                <ButtonText style={[a.text_md]}>
-                  <Trans>Cancel</Trans>
-                </ButtonText>
-              </Button>
-              <View style={a.flex_1} />
-              {isProcessing ? (
-                <>
-                  <Text style={pal.textLight}>{processingState}</Text>
-                  <View style={styles.postBtn}>
-                    <ActivityIndicator />
-                  </View>
-                </>
-              ) : canPost ? (
-                <Button
-                  testID="composerPublishBtn"
-                  label={replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)}
-                  variant="solid"
-                  color="primary"
-                  shape="default"
-                  size="small"
-                  style={[a.rounded_full, a.py_sm]}
-                  onPress={() => onPressPublish()}
-                  disabled={videoState.status !== 'idle' && publishOnUpload}>
-                  <ButtonText style={[a.text_md]}>
-                    {replyTo ? (
-                      <Trans context="action">Reply</Trans>
-                    ) : (
-                      <Trans context="action">Post</Trans>
-                    )}
-                  </ButtonText>
-                </Button>
-              ) : (
-                <View style={[styles.postBtn, pal.btn]}>
-                  <Text style={[pal.textLight, s.f16, s.bold]}>
-                    <Trans context="action">Post</Trans>
-                  </Text>
-                </View>
-              )}
-            </View>
-
-            {isAltTextRequiredAndMissing && (
-              <View style={[styles.reminderLine, pal.viewLight]}>
-                <View style={styles.errorIcon}>
-                  <FontAwesomeIcon
-                    icon="exclamation"
-                    style={{color: colors.red4}}
-                    size={10}
-                  />
-                </View>
-                <Text style={[pal.text, a.flex_1]}>
-                  <Trans>One or more images is missing alt text.</Trans>
-                </Text>
-              </View>
-            )}
             <ErrorBanner
               error={error}
               videoState={videoState}
               clearError={() => setError('')}
               clearVideo={clearVideo}
             />
-          </Animated.View>
+          </ComposerTopBar>
+
           <Animated.ScrollView
             layout={native(LinearTransition)}
             onScroll={scrollHandler}
@@ -615,7 +494,112 @@ export const ComposePost = ({
             onContentSizeChange={onScrollViewContentSizeChange}
             onLayout={onScrollViewLayout}>
             {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
+            <ComposerPost
+              draft={draft}
+              dispatch={dispatch}
+              textInput={textInput}
+              isReply={!!replyTo}
+              canRemoveQuote={!initQuote}
+              onSelectVideo={selectVideo}
+              onClearVideo={clearVideo}
+              onPublish={() => onPressPublish(false)}
+              onError={setError}
+            />
+          </Animated.ScrollView>
 
+          <SuggestedLanguage text={richtext.text} />
+
+          <ComposerPills
+            isReply={!!replyTo}
+            draft={draft}
+            dispatch={dispatch}
+            bottomBarAnimatedStyle={bottomBarAnimatedStyle}
+          />
+
+          <ComposerFooter
+            draft={draft}
+            graphemeLength={graphemeLength}
+            dispatch={dispatch}
+            onError={setError}
+            onEmojiButtonPress={onEmojiButtonPress}
+            onSelectVideo={selectVideo}
+          />
+        </View>
+
+        <Prompt.Basic
+          control={discardPromptControl}
+          title={_(msg`Discard draft?`)}
+          description={_(msg`Are you sure you'd like to discard this draft?`)}
+          onConfirm={onClose}
+          confirmButtonCta={_(msg`Discard`)}
+          confirmButtonColor="negative"
+        />
+      </KeyboardAvoidingView>
+    </BottomSheetPortalProvider>
+  )
+}
+
+function ComposerPost({
+  draft,
+  dispatch,
+  textInput,
+  isReply,
+  canRemoveQuote,
+  onClearVideo,
+  onSelectVideo,
+  onError,
+  onPublish,
+}: {
+  draft: ComposerDraft
+  dispatch: (action: ComposerAction) => void
+  textInput: React.Ref<TextInputRef>
+  isReply: boolean
+  canRemoveQuote: boolean
+  onClearVideo: () => void
+  onSelectVideo: (asset: ImagePickerAsset) => void
+  onError: (error: string) => void
+  onPublish: (richtext: RichText) => void
+}) {
+  const {currentAccount} = useSession()
+  const currentDid = currentAccount!.did
+  const {_} = useLingui()
+  const {data: currentProfile} = useProfileQuery({did: currentDid})
+  const richtext = draft.richtext
+  const selectTextInputPlaceholder = isReply
+    ? _(msg`Write your reply`)
+    : _(msg`What's up?`)
+
+  const onImageAdd = useCallback(
+    (next: ComposerImage[]) => {
+      dispatch({
+        type: 'embed_add_images',
+        images: next,
+      })
+    },
+    [dispatch],
+  )
+
+  const onNewLink = useCallback(
+    (uri: string) => {
+      dispatch({type: 'embed_add_uri', uri})
+    },
+    [dispatch],
+  )
+
+  const onPhotoPasted = useCallback(
+    async (uri: string) => {
+      if (uri.startsWith('data:video/')) {
+        onSelectVideo({uri, type: 'video', height: 0, width: 0})
+      } else {
+        const res = await pasteImage(uri)
+        onImageAdd([res])
+      }
+    },
+    [onSelectVideo, onImageAdd],
+  )
+
+  return (
+    <>
       <View
         style={[
           styles.textInputLayout,
@@ -635,9 +619,9 @@ export const ComposePost = ({
             dispatch({type: 'update_richtext', richtext: rt})
           }}
           onPhotoPasted={onPhotoPasted}
-                onPressPublish={() => onPressPublish()}
           onNewLink={onNewLink}
-                onError={setError}
+          onError={onError}
+          onPressPublish={onPublish}
           accessible={true}
           accessibilityLabel={_(msg`Write post`)}
           accessibilityHint={_(
@@ -646,77 +630,209 @@ export const ComposePost = ({
         />
       </View>
 
-            <Gallery images={images} dispatch={dispatch} />
+      <ComposerEmbeds
+        canRemoveQuote={canRemoveQuote}
+        embed={draft.embed}
+        dispatch={dispatch}
+        clearVideo={onClearVideo}
+      />
+    </>
+  )
+}
 
-            {extGif && (
+function ComposerTopBar({
-              <View style={a.relative} key={extGif.url}>
+  canPost,
+  isReply,
+  isPublishQueued,
+  isPublishing,
+  publishingStage,
+  onCancel,
+  onPublish,
+  topBarAnimatedStyle,
+  children,
+}: {
+  isPublishing: boolean
+  publishingStage: string
+  canPost: boolean
+  isReply: boolean
+  isPublishQueued: boolean
+  onCancel: () => void
+  onPublish: () => void
+  topBarAnimatedStyle: StyleProp<ViewStyle>
+  children?: React.ReactNode
+}) {
+  const pal = usePalette('default')
+  return (
+    <Animated.View
+      style={topBarAnimatedStyle}
+      layout={native(LinearTransition)}>
+      <View style={styles.topbarInner}>
+        <Button
+          label="Cancel"
+          variant="ghost"
+          color="primary"
+          shape="default"
+          size="small"
+          style={[a.rounded_full, a.py_sm, {paddingLeft: 7, paddingRight: 7}]}
+          onPress={onCancel}
+          accessibilityHint="Closes post composer and discards post draft">
+          <ButtonText style={[a.text_md]}>
+            <Trans>Cancel</Trans>
+          </ButtonText>
+        </Button>
+        <View style={a.flex_1} />
+        {isPublishing ? (
+          <>
+            <Text>{publishingStage}</Text>
+            <View style={styles.postBtn}>
+              <ActivityIndicator />
+            </View>
+          </>
+        ) : canPost ? (
+          <Button
+            testID="composerPublishBtn"
+            label={isReply ? 'Publish reply' : 'Publish post'}
+            variant="solid"
+            color="primary"
+            shape="default"
+            size="small"
+            style={[a.rounded_full, a.py_sm]}
+            onPress={onPublish}
+            disabled={isPublishQueued}>
+            <ButtonText style={[a.text_md]}>
+              {isReply ? (
+                <Trans context="action">Reply</Trans>
+              ) : (
+                <Trans context="action">Post</Trans>
+              )}
+            </ButtonText>
+          </Button>
+        ) : (
+          <View style={[styles.postBtn, pal.btn]}>
+            <Text style={[pal.textLight, s.f16, s.bold]}>
+              <Trans context="action">Post</Trans>
+            </Text>
+          </View>
+        )}
+      </View>
+      {children}
+    </Animated.View>
+  )
+}
+
+function AltTextReminder() {
+  const pal = usePalette('default')
+  return (
+    <View style={[styles.reminderLine, pal.viewLight]}>
+      <View style={styles.errorIcon}>
+        <FontAwesomeIcon
+          icon="exclamation"
+          style={{color: colors.red4}}
+          size={10}
+        />
+      </View>
+      <Text style={[pal.text, a.flex_1]}>
+        <Trans>One or more images is missing alt text.</Trans>
+      </Text>
+    </View>
+  )
+}
+
+function ComposerEmbeds({
+  embed,
+  dispatch,
+  clearVideo,
+  canRemoveQuote,
+}: {
+  embed: EmbedDraft
+  dispatch: (action: ComposerAction) => void
+  clearVideo: () => void
+  canRemoveQuote: boolean
+}) {
+  const video = embed.media?.type === 'video' ? embed.media.video : null
+  return (
+    <>
+      {embed.media?.type === 'images' && (
+        <Gallery images={embed.media.images} dispatch={dispatch} />
+      )}
+
+      {embed.media?.type === 'gif' && (
+        <View style={a.relative} key={embed.media.gif.url}>
           <ExternalEmbedGif
-                  gif={extGif}
+            gif={embed.media.gif}
-                  onRemove={() => {
+            onRemove={() => dispatch({type: 'embed_remove_gif'})}
-                    dispatch({type: 'embed_remove_gif'})
-                  }}
           />
           <GifAltTextDialog
-                  gif={extGif}
+            gif={embed.media.gif}
-                  altText={extGifAlt ?? ''}
+            altText={embed.media.alt ?? ''}
-                  onSubmit={handleChangeGifAltText}
+            onSubmit={(altText: string) => {
+              dispatch({type: 'embed_update_gif', alt: altText})
+            }}
           />
         </View>
       )}
 
-            {!draft.embed.media && extLink && (
+      {!embed.media && embed.link && (
-              <View style={a.relative} key={extLink}>
+        <View style={a.relative} key={embed.link.uri}>
           <ExternalEmbedLink
-                  uri={extLink}
+            uri={embed.link.uri}
-                  hasQuote={!!quote}
+            hasQuote={!!embed.quote}
-                  onRemove={() => {
+            onRemove={() => dispatch({type: 'embed_remove_link'})}
-                    dispatch({type: 'embed_remove_link'})
-                  }}
           />
         </View>
       )}
 
       <LayoutAnimationConfig skipExiting>
-              {hasVideo && (
+        {video && (
           <Animated.View
             style={[a.w_full, a.mt_lg]}
             entering={native(ZoomIn)}
             exiting={native(ZoomOut)}>
-                  {videoState.asset &&
+            {video.asset &&
-                    (videoState.status === 'compressing' ? (
+              (video.status === 'compressing' ? (
                 <VideoTranscodeProgress
-                        asset={videoState.asset}
+                  asset={video.asset}
-                        progress={videoState.progress}
+                  progress={video.progress}
                   clear={clearVideo}
                 />
-                    ) : videoState.video ? (
+              ) : video.video ? (
                 <VideoPreview
-                        asset={videoState.asset}
+                  asset={video.asset}
-                        video={videoState.video}
+                  video={video.video}
-                        setDimensions={updateVideoDimensions}
+                  setDimensions={(width: number, height: number) => {
+                    dispatch({
+                      type: 'embed_update_video',
+                      videoAction: {
+                        type: 'update_dimensions',
+                        width,
+                        height,
+                        signal: video.abortController.signal,
+                      },
+                    })
+                  }}
                   clear={clearVideo}
                 />
               ) : null)}
             <SubtitleDialogBtn
-                    defaultAltText={videoState.altText}
+              defaultAltText={video.altText}
               saveAltText={altText =>
                 dispatch({
                   type: 'embed_update_video',
                   videoAction: {
                     type: 'update_alt_text',
                     altText,
-                          signal: videoState.abortController.signal,
+                    signal: video.abortController.signal,
                   },
                 })
               }
-                    captions={videoState.captions}
+              captions={video.captions}
               setCaptions={updater => {
                 dispatch({
                   type: 'embed_update_video',
                   videoAction: {
                     type: 'update_captions',
                     updater,
-                          signal: videoState.abortController.signal,
+                    signal: video.abortController.signal,
                   },
                 })
               }}
@@ -724,25 +840,39 @@ export const ComposePost = ({
           </Animated.View>
         )}
       </LayoutAnimationConfig>
-            <View style={!hasVideo ? [a.mt_md] : []}>
+
-              {quote ? (
+      <View style={!video ? [a.mt_md] : []}>
+        {embed.quote?.uri ? (
           <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
             <View style={{pointerEvents: 'none'}}>
-                    <LazyQuoteEmbed uri={quote} />
+              <LazyQuoteEmbed uri={embed.quote.uri} />
             </View>
-                  {!initQuote && (
+            {canRemoveQuote && (
-                    <QuoteX
+              <QuoteX onRemove={() => dispatch({type: 'embed_remove_quote'})} />
-                      onRemove={() => {
-                        dispatch({type: 'embed_remove_quote'})
-                      }}
-                    />
             )}
           </View>
         ) : null}
       </View>
-          </Animated.ScrollView>
+    </>
-          <SuggestedLanguage text={richtext.text} />
+  )
+}
 
+function ComposerPills({
+  isReply,
+  draft,
+  dispatch,
+  bottomBarAnimatedStyle,
+}: {
+  isReply: boolean
+  draft: ComposerDraft
+  dispatch: (action: ComposerAction) => void
+  bottomBarAnimatedStyle: StyleProp<ViewStyle>
+}) {
+  const t = useTheme()
+  const media = draft.embed.media
+  const hasMedia = media?.type === 'images' || media?.type === 'video'
+  const hasLink = !!draft.embed.link
+  return (
     <Animated.View
       style={[a.flex_row, a.p_sm, t.atoms.bg, bottomBarAnimatedStyle]}>
       <ScrollView
@@ -750,7 +880,7 @@ export const ComposePost = ({
         horizontal={true}
         bounces={false}
         showsHorizontalScrollIndicator={false}>
-              {replyTo ? null : (
+        {isReply ? null : (
           <ThreadgateBtn
             postgate={draft.postgate}
             onChangePostgate={nextPostgate => {
@@ -771,10 +901,55 @@ export const ComposePost = ({
           onChange={nextLabels => {
             dispatch({type: 'update_labels', labels: nextLabels})
           }}
-                hasMedia={hasMedia || Boolean(extLink)}
+          hasMedia={hasMedia || hasLink}
         />
       </ScrollView>
     </Animated.View>
+  )
+}
+
+function ComposerFooter({
+  draft,
+  dispatch,
+  graphemeLength,
+  onEmojiButtonPress,
+  onError,
+  onSelectVideo,
+}: {
+  draft: ComposerDraft
+  dispatch: (action: ComposerAction) => void
+  graphemeLength: number
+  onEmojiButtonPress: () => void
+  onError: (error: string) => void
+  onSelectVideo: (asset: ImagePickerAsset) => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {isMobile} = useWebMediaQueries()
+
+  const media = draft.embed.media
+  const images = media?.type === 'images' ? media.images : []
+  const video = media?.type === 'video' ? media.video : null
+  const isMaxImages = images.length >= MAX_IMAGES
+
+  const onImageAdd = useCallback(
+    (next: ComposerImage[]) => {
+      dispatch({
+        type: 'embed_add_images',
+        images: next,
+      })
+    },
+    [dispatch],
+  )
+
+  const onSelectGif = useCallback(
+    (gif: Gif) => {
+      dispatch({type: 'embed_add_gif', gif})
+    },
+    [dispatch],
+  )
+
+  return (
     <View
       style={[
         a.flex_row,
@@ -787,25 +962,25 @@ export const ComposePost = ({
         a.justify_between,
       ]}>
       <View style={[a.flex_row, a.align_center]}>
-              {videoState.status !== 'idle' && videoState.status !== 'done' ? (
+        {video && video.status !== 'done' ? (
-                <VideoUploadToolbar state={videoState} />
+          <VideoUploadToolbar state={video} />
         ) : (
           <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
             <SelectPhotoBtn
               size={images.length}
-                    disabled={!canSelectImages}
+              disabled={media?.type === 'images' ? isMaxImages : !!media}
               onAdd={onImageAdd}
             />
             <SelectVideoBtn
-                    onSelectVideo={selectVideo}
+              onSelectVideo={onSelectVideo}
-                    disabled={!canSelectImages || images?.length > 0}
+              disabled={!!media}
-                    setError={setError}
+              setError={onError}
             />
             <OpenCameraBtn
-                    disabled={!canSelectImages}
+              disabled={media?.type === 'images' ? isMaxImages : !!media}
               onAdd={onImageAdd}
             />
-                  <SelectGifBtn onSelectGif={onSelectGif} disabled={hasMedia} />
+            <SelectGifBtn onSelectGif={onSelectGif} disabled={!!media} />
             {!isMobile ? (
               <Button
                 onPress={onEmojiButtonPress}
@@ -826,17 +1001,6 @@ export const ComposePost = ({
         <CharProgress count={graphemeLength} style={{width: 65}} />
       </View>
     </View>
-        </View>
-        <Prompt.Basic
-          control={discardPromptControl}
-          title={_(msg`Discard draft?`)}
-          description={_(msg`Are you sure you'd like to discard this draft?`)}
-          onConfirm={onClose}
-          confirmButtonCta={_(msg`Discard`)}
-          confirmButtonColor="negative"
-        />
-      </KeyboardAvoidingView>
-    </BottomSheetPortalProvider>
   )
 }
 

src/view/com/composer/text-input/TextInput.tsx

@@ -45,7 +45,7 @@ interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   placeholder: string
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
-  onPressPublish: (richtext: RichText) => Promise<void>
+  onPressPublish: (richtext: RichText) => void
   onNewLink: (uri: string) => void
   onError: (err: string) => void
 }

src/view/com/composer/text-input/TextInput.web.tsx

@@ -13,15 +13,15 @@ import {Text as TiptapText} from '@tiptap/extension-text'
 import {generateJSON} from '@tiptap/html'
 import {EditorContent, JSONContent, useEditor} from '@tiptap/react'
 
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {blobToDataUri, isUriImage} from '#/lib/media/util'
 import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {blobToDataUri, isUriImage} from 'lib/media/util'
-import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {
   LinkFacetMatch,
   suggestLinkCardUri,
-} from 'view/com/composer/text-input/text-input-util'
+} from '#/view/com/composer/text-input/text-input-util'
+import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a, useAlf} from '#/alf'
 import {Portal} from '#/components/Portal'
 import {normalizeTextStyles} from '#/components/Typography'
@@ -43,7 +43,7 @@ interface TextInputProps {
   suggestedLinks: Set<string>
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
-  onPressPublish: (richtext: RichText) => Promise<void>
+  onPressPublish: (richtext: RichText) => void
   onNewLink: (uri: string) => void
   onError: (err: string) => void
 }