Fix notification descriptions and render images for your own posts in notifs

3 files changed, 63 insertions, 13 deletions

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 739487859..ca3f3c571 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -11,6 +11,7 @@ import {ago, pluralize} from '../../../lib/strings'
 import {UpIconSolid} from '../../lib/icons'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
+import {ImageHorzList} from '../util/images/ImageHorzList'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Post} from '../post/Post'
 import {Link} from '../util/Link'
@@ -181,6 +182,7 @@ export const FeedItem = observer(function FeedItem({
                 </Text>
               </>
             ) : undefined}
+            <Text style={[styles.metaItem, pal.text]}>{action}</Text>
             <Text style={[styles.metaItem, pal.textLight]}>
               {ago(item.indexedAt)}
             </Text>
@@ -208,17 +210,21 @@ function AdditionalPostText({
   if (additionalPost.error) {
     return <ErrorMessage message={additionalPost.error} />
   }
-  const record = additionalPost.thread?.postRecord
-  let text = record.text
-  if (
-    AppBskyEmbedImages.isMain(record.embed) &&
-    AppBskyEmbedImages.validateMain(record.embed).success
-  ) {
-    for (let i = 0; i < record.embed.images.length; i++) {
-      text += ` [${record.embed.images[i].alt || `image${i + 1}`}]`
-    }
-  }
-  return <Text style={pal.textLight}>{text}</Text>
+  const text = additionalPost.thread?.postRecord.text
+  const images = (
+    additionalPost.thread.post.embed as AppBskyEmbedImages.Presented
+  )?.images
+  return (
+    <>
+      {text?.length > 0 && <Text style={pal.textLight}>{text}</Text>}
+      {images && images?.length > 0 && (
+        <ImageHorzList
+          uris={images?.map(img => img.thumb)}
+          style={styles.additionalPostImages}
+        />
+      )}
+    </>
+  )
 }
 
 const styles = StyleSheet.create({
@@ -264,6 +270,11 @@ const styles = StyleSheet.create({
     paddingBottom: 5,
     color: colors.black,
   },
+  additionalPostImages: {
+    marginTop: 5,
+    marginLeft: 2,
+    opacity: 0.8,
+  },
 
   addedContainer: {
     paddingTop: 4,
diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx
new file mode 100644
index 000000000..366424308
--- /dev/null
+++ b/src/view/com/util/images/ImageHorzList.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+  Image,
+  StyleProp,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+export function ImageHorzList({
+  uris,
+  onPress,
+  style,
+}: {
+  uris: string[]
+  onPress?: (index: number) => void
+  style?: StyleProp<ViewStyle>
+}) {
+  return (
+    <View style={[styles.flexRow, style]}>
+      {uris.map((uri, i) => (
+        <TouchableWithoutFeedback key={i} onPress={() => onPress?.(i)}>
+          <Image source={{uri}} style={styles.image} />
+        </TouchableWithoutFeedback>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  flexRow: {flexDirection: 'row'},
+  image: {
+    width: 100,
+    height: 100,
+    borderRadius: 4,
+    marginRight: 5,
+  },
+})
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index cb560dd35..5eb5b3c54 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -24,7 +24,7 @@ export function ImageLayoutGrid({
   style,
 }: {
   type: ImageLayoutGridType
-  uris: string
+  uris: string[]
   onPress?: (index: number) => void
   style?: StyleProp<ViewStyle>
 }) {
@@ -58,7 +58,7 @@ function ImageLayoutGridInner({
   containerInfo,
 }: {
   type: ImageLayoutGridType
-  uris: string
+  uris: string[]
   onPress?: (index: number) => void
   containerInfo: Dim
 }) {