Rework the composer to a less buggy solution

src/view/com/composer/ComposePost.tsx

@@ -1,28 +1,28 @@
 import React, {useEffect, useMemo, useState} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import {BottomSheetTextInput} from '@gorhom/bottom-sheet'
+import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as GetUserFollows from '../../../third-party/api/src/types/app/bsky/getUserFollows'
-import * as Post from '../../../third-party/api/src/types/app/bsky/post'
-import {Autocomplete} from './composer/Autocomplete'
+import {Autocomplete} from './Autocomplete'
 import Toast from '../util/Toast'
 import ProgressCircle from '../util/ProgressCircle'
 import {useStores} from '../../../state'
 import * as apilib from '../../../state/lib/api'
+import {ComposerOpts} from '../../../state/models/shell'
 import {s, colors, gradients} from '../../lib/styles'
 
 const MAX_TEXT_LENGTH = 256
 const WARNING_TEXT_LENGTH = 200
 const DANGER_TEXT_LENGTH = 255
-export const snapPoints = ['100%']
 
-export function Component({
+export function ComposePost({
   replyTo,
   onPost,
+  onClose,
 }: {
-  replyTo?: Post.PostRef
-  onPost?: () => void
+  replyTo?: ComposerOpts['replyTo']
+  onPost?: ComposerOpts['onPost']
+  onClose: () => void
 }) {
   const store = useStores()
   const [error, setError] = useState('')
@@ -67,7 +67,7 @@ export function Component({
     }
   }
   const onPressCancel = () => {
-    store.shell.closeModal()
+    onClose()
   }
   const onPressPublish = async () => {
     setError('')
@@ -85,7 +85,7 @@ export function Component({
       return
     }
     onPost?.()
-    store.shell.closeModal()
+    onClose()
     Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`, {
       duration: Toast.durations.LONG,
       position: Toast.positions.TOP,
@@ -148,7 +148,7 @@ export function Component({
           <Text style={s.red4}>{error}</Text>
         </View>
       )}
-      <BottomSheetTextInput
+      <TextInput
         multiline
         scrollEnabled
         autoFocus
@@ -156,7 +156,7 @@ export function Component({
         placeholder={replyTo ? 'Write your reply' : "What's new?"}
         style={styles.textInput}>
         {textDecorated}
-      </BottomSheetTextInput>
+      </TextInput>
       <View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
         <View style={s.flex1} />
         <View>

src/view/com/modals/Modal.tsx

@@ -9,7 +9,6 @@ import * as models from '../../../state/models/shell'
 
 import * as LinkActionsModal from './LinkActions'
 import * as SharePostModal from './SharePost.native'
-import * as ComposePostModal from './ComposePost'
 import * as EditProfile from './EditProfile'
 
 const CLOSED_SNAPPOINTS = ['10%']
@@ -51,13 +50,6 @@ export const Modal = observer(function Modal() {
         {...(store.shell.activeModal as models.SharePostModel)}
       />
     )
-  } else if (store.shell.activeModal?.name === 'compose-post') {
-    snapPoints = ComposePostModal.snapPoints
-    element = (
-      <ComposePostModal.Component
-        {...(store.shell.activeModal as models.ComposePostModel)}
-      />
-    )
   } else if (store.shell.activeModal?.name === 'edit-profile') {
     snapPoints = EditProfile.snapPoints
     element = (

src/view/com/post-thread/PostThreadItem.tsx

@@ -6,7 +6,6 @@ import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/types/app/bsky/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
-import {ComposePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
 import {RichText} from '../util/RichText'
 import {PostDropdownBtn} from '../util/DropdownBtn'
@@ -49,12 +48,10 @@ export const PostThreadItem = observer(function PostThreadItem({
   const repostsTitle = 'Reposts of this post'
 
   const onPressReply = () => {
-    store.shell.openModal(
-      new ComposePostModel({
-        replyTo: {uri: item.uri, cid: item.cid},
-        onPost: onPostReply,
-      }),
-    )
+    store.shell.openComposer({
+      replyTo: {uri: item.uri, cid: item.cid},
+      onPost: onPostReply,
+    })
   }
   const onPressToggleRepost = () => {
     item

src/view/com/post/Post.tsx

@@ -11,7 +11,6 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewModel} from '../../../state/models/post-thread-view'
-import {ComposePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {RichText} from '../util/RichText'
@@ -71,9 +70,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
     replyHref = `/profile/${urip.hostname}/post/${urip.rkey}`
   }
   const onPressReply = () => {
-    store.shell.openModal(
-      new ComposePostModel({replyTo: {uri: item.uri, cid: item.cid}}),
-    )
+    store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}})
   }
   const onPressToggleRepost = () => {
     item

src/view/com/posts/FeedItem.tsx

@@ -5,7 +5,7 @@ import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/types/app/bsky/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedItemModel} from '../../../state/models/feed-view'
-import {ComposePostModel, SharePostModel} from '../../../state/models/shell'
+import {SharePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import {UserInfoText} from '../util/UserInfoText'
@@ -40,9 +40,7 @@ export const FeedItem = observer(function FeedItem({
   }, [record.reply])
 
   const onPressReply = () => {
-    store.shell.openModal(
-      new ComposePostModel({replyTo: {uri: item.uri, cid: item.cid}}),
-    )
+    store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}})
   }
   const onPressToggleRepost = () => {
     item