Show parent post in composer when replying (close #3)

src/state/models/shell-ui.ts

@@ -1,6 +1,5 @@
 import {makeAutoObservable} from 'mobx'
 import {ProfileViewModel} from './profile-view'
-import * as Post from '../../third-party/api/src/client/types/app/bsky/feed/post'
 
 export class ConfirmModel {
   name = 'confirm'
@@ -52,8 +51,17 @@ export class ServerInputModel {
   }
 }
 
+export interface ComposerOptsPostRef {
+  uri: string
+  cid: string
+  text: string
+  author: {
+    handle: string
+    displayName?: string
+  }
+}
 export interface ComposerOpts {
-  replyTo?: Post.PostRef
+  replyTo?: ComposerOptsPostRef
   onPost?: () => void
 }
 

src/view/com/composer/ComposePost.tsx

@@ -16,6 +16,7 @@ import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete
 import {Autocomplete} from './Autocomplete'
 import Toast from '../util/Toast'
 import ProgressCircle from '../util/ProgressCircle'
+import {TextLink} from '../util/Link'
 import {useStores} from '../../../state'
 import * as apilib from '../../../state/lib/api'
 import {ComposerOpts} from '../../../state/models/shell-ui'
@@ -163,6 +164,21 @@ export const ComposePost = observer(function ComposePost({
             <Text style={s.red4}>{error}</Text>
           </View>
         )}
+        {replyTo ? (
+          <View>
+            <Text style={s.gray4}>
+              Replying to{' '}
+              <TextLink
+                href={`/profile/${replyTo.author.handle}`}
+                text={'@' + replyTo.author.handle}
+                style={[s.bold, s.gray5]}
+              />
+            </Text>
+            <View style={styles.replyToPost}>
+              <Text style={s.gray5}>{replyTo.text}</Text>
+            </View>
+          </View>
+        ) : undefined}
         <TextInput
           multiline
           scrollEnabled
@@ -250,4 +266,13 @@ const styles = StyleSheet.create({
     padding: 5,
     fontSize: 21,
   },
+  replyToPost: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: colors.gray2,
+    borderRadius: 6,
+    marginTop: 5,
+    marginBottom: 10,
+  },
 })

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

@@ -50,7 +50,15 @@ export const PostThreadItem = observer(function PostThreadItem({
 
   const onPressReply = () => {
     store.shell.openComposer({
-      replyTo: {uri: item.uri, cid: item.cid},
+      replyTo: {
+        uri: item.uri,
+        cid: item.cid,
+        text: item.record.text as string,
+        author: {
+          handle: item.author.handle,
+          displayName: item.author.displayName,
+        },
+      },
       onPost: onPostReply,
     })
   }

src/view/com/post/Post.tsx

@@ -73,7 +73,17 @@ export const Post = observer(function Post({uri}: {uri: string}) {
     replyHref = `/profile/${urip.hostname}/post/${urip.rkey}`
   }
   const onPressReply = () => {
-    store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}})
+    store.shell.openComposer({
+      replyTo: {
+        uri: item.uri,
+        cid: item.cid,
+        text: item.record.text as string,
+        author: {
+          handle: item.author.handle,
+          displayName: item.author.displayName,
+        },
+      },
+    })
   }
   const onPressToggleRepost = () => {
     item

src/view/com/posts/FeedItem.tsx

@@ -43,7 +43,17 @@ export const FeedItem = observer(function FeedItem({
   }, [record.reply])
 
   const onPressReply = () => {
-    store.shell.openComposer({replyTo: {uri: item.uri, cid: item.cid}})
+    store.shell.openComposer({
+      replyTo: {
+        uri: item.uri,
+        cid: item.cid,
+        text: item.record.text as string,
+        author: {
+          handle: item.author.handle,
+          displayName: item.author.displayName,
+        },
+      },
+    })
   }
   const onPressToggleRepost = () => {
     item