4 files changed, 99 insertions, 1 deletions
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 98d6bd371..95b02837d 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -14,6 +14,7 @@ import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../../lib/strings'
 import {useStores} from '../../../state'
 import {PostMeta} from '../util/PostMeta'
+import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
 
 const PARENT_REPLY_LINE_LENGTH = 8
@@ -151,6 +152,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               style={[styles.postText, styles.postTextLarge]}
             />
           </View>
+          <PostEmbeds entities={record.entities} />
           {item._isHighlightedPost && hasEngagement ? (
             <View style={styles.expandedInfo}>
               {item.repostCount ? (
@@ -252,6 +254,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 style={[styles.postText]}
               />
             </View>
+            <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
             <PostCtrls
               replyCount={item.replyCount}
               repostCount={item.repostCount}
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 7d28673bc..4063b2008 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -9,6 +9,7 @@ import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
+import {PostEmbeds} from '../util/PostEmbeds'
 import {RichText} from '../util/RichText'
 import Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -172,6 +173,7 @@ export const FeedItem = observer(function FeedItem({
               style={styles.postText}
             />
           </View>
+          <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
           <PostCtrls
             replyCount={item.replyCount}
             repostCount={item.repostCount}
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
new file mode 100644
index 000000000..ca02aba84
--- /dev/null
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -0,0 +1,93 @@
+import React, {useEffect, useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import {Link} from '../util/Link'
+import {
+  LinkMeta,
+  getLinkMeta,
+  getLikelyType,
+  LikelyType,
+} from '../../../lib/link-meta'
+import {colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+export function PostEmbeds({
+  entities,
+  style,
+}: {
+  entities?: Entity[]
+  style?: StyleProp<ViewStyle>
+}) {
+  const store = useStores()
+  const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
+  const link = entities?.find(
+    ent =>
+      ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
+  )
+
+  useEffect(() => {
+    let aborted = false
+    store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
+      if (!aborted) {
+        setLinkMeta(linkMeta)
+      }
+    })
+
+    return () => {
+      aborted = true
+    }
+  }, [link])
+
+  if (!link) {
+    return <View />
+  }
+
+  return (
+    <Link style={[styles.outer, style]} href={link.value}>
+      {linkMeta ? (
+        <>
+          <Text numberOfLines={1} style={styles.title}>
+            {linkMeta.title || linkMeta.url}
+          </Text>
+          <Text numberOfLines={1} style={styles.url}>
+            {linkMeta.url}
+          </Text>
+          {linkMeta.description ? (
+            <Text numberOfLines={2} style={styles.description}>
+              {linkMeta.description}
+            </Text>
+          ) : undefined}
+        </>
+      ) : (
+        <ActivityIndicator />
+      )}
+    </Link>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    borderWidth: 1,
+    borderColor: colors.gray2,
+    borderRadius: 8,
+    padding: 10,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  description: {
+    marginTop: 4,
+    fontSize: 15,
+  },
+  url: {
+    color: colors.gray4,
+  },
+})
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index d158418e9..80dde0e06 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'