Add context to replies when appearing in the feed

src/view/com/posts/FeedItem.tsx

@@ -18,6 +18,7 @@ import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
 
 const TOP_REPLY_LINE_LENGTH = 12
+const REPLYING_TO_LINE_LENGTH = 8
 
 export const FeedItem = observer(function FeedItem({
   item,
@@ -129,6 +130,25 @@ export const FeedItem = observer(function FeedItem({
           </Text>
         </Link>
       )}
+      {item.additionalParentPost ? (
+        <View style={styles.replyingTo}>
+          <View style={styles.replyingToLine} />
+          <View style={styles.replyingToAvatar}>
+            <UserAvatar
+              handle={item.additionalParentPost?.thread?.author.handle}
+              displayName={
+                item.additionalParentPost?.thread?.author.displayName
+              }
+              size={32}
+            />
+          </View>
+          <View style={styles.replyingToTextContainer}>
+            <Text style={styles.replyingToText} numberOfLines={2}>
+              {item.additionalParentPost?.thread?.record.text}
+            </Text>
+          </View>
+        </View>
+      ) : undefined}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Link
@@ -237,6 +257,35 @@ const styles = StyleSheet.create({
     marginRight: 4,
     color: colors.gray4,
   },
+  replyingToLine: {
+    position: 'absolute',
+    left: 24,
+    bottom: -1 * REPLYING_TO_LINE_LENGTH + 6,
+    height: REPLYING_TO_LINE_LENGTH,
+    borderLeftWidth: 2,
+    borderLeftColor: colors.gray2,
+  },
+  replyingTo: {
+    flexDirection: 'row',
+    backgroundColor: colors.white,
+    paddingBottom: 8,
+    paddingRight: 24,
+  },
+  replyingToAvatar: {
+    marginLeft: 9,
+    marginRight: 19,
+    marginTop: 1,
+  },
+  replyingToTextContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    height: 34,
+    alignItems: 'center',
+  },
+  replyingToText: {
+    flex: 1,
+    color: colors.gray5,
+  },
   layout: {
     flexDirection: 'row',
   },

src/view/com/util/UserAvatar.tsx

@@ -21,7 +21,7 @@ export function UserAvatar({
   size: number
   handle: string
   displayName: string | undefined
-  userAvatar: string | null
+  userAvatar: string | null | undefined
   setUserAvatar?: React.Dispatch<React.SetStateAction<string | null>>
 }) {
   const initials = getInitials(displayName || handle)
@@ -92,7 +92,7 @@ export function UserAvatar({
   // setUserAvatar is only passed as prop on the EditProfile component
   return setUserAvatar != null && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditAvatar}>
-      {userAvatar != null ? (
+      {userAvatar ? (
         <Image style={styles.avatarImage} source={{uri: userAvatar}} />
       ) : (
         renderSvg(size, initials)
@@ -105,7 +105,7 @@ export function UserAvatar({
         />
       </View>
     </TouchableOpacity>
-  ) : userAvatar != null ? (
+  ) : userAvatar ? (
     <Image
       style={styles.avatarImage}
       resizeMode="stretch"

src/view/com/util/UserBanner.tsx

@@ -17,7 +17,7 @@ export function UserBanner({
   setUserBanner,
 }: {
   handle: string
-  userBanner: string | null
+  userBanner: string | null | undefined
   setUserBanner?: React.Dispatch<React.SetStateAction<string | null>>
 }) {
   const gradient = getGradient(handle)
@@ -81,7 +81,7 @@ export function UserBanner({
   // setUserBanner is only passed as prop on the EditProfile component
   return setUserBanner != null && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditBanner}>
-      {userBanner != null ? (
+      {userBanner ? (
         <Image style={styles.bannerImage} source={{uri: userBanner}} />
       ) : (
         renderSvg()
@@ -94,7 +94,7 @@ export function UserBanner({
         />
       </View>
     </TouchableOpacity>
-  ) : userBanner != null ? (
+  ) : userBanner ? (
     <Image
       style={styles.bannerImage}
       resizeMode="stretch"