Display non-post embeds in composer preview (#5647)

* Display non-post embeds in composer preview

* Remove starter pack special case from ExternalLinkEmbed

This should not be needed because starter pack composer preview now goes through the record preview codepath, just like in the feed/post view.

* Hide record ext links if quote is present

* Align remove buttons

Remove the implicit top padding in record embeds and make it conditional, which is similar to how we treat external link embeds. This makes the X button appear in the same place for record embeds as with links.

1 files changed, 35 insertions, 36 deletions

diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx
index 1f1feaf91..d819b28b7 100644
--- a/src/view/com/composer/ExternalEmbed.tsx
+++ b/src/view/com/composer/ExternalEmbed.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {AppBskyGraphStarterpack} from '@atproto/api'
 
-import {ResolvedLink} from '#/lib/api/resolve'
 import {cleanError} from '#/lib/strings/errors'
 import {
   useResolveGifQuery,
@@ -13,7 +11,9 @@ import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn
 import {ExternalLinkEmbed} from '#/view/com/util/post-embeds/ExternalLinkEmbed'
 import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
+import {Embed as StarterPackEmbed} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
+import {MaybeFeedCard, MaybeListCard} from '../util/post-embeds'
 
 export const ExternalEmbedGif = ({
   onRemove,
@@ -67,29 +67,48 @@ export const ExternalEmbedGif = ({
 
 export const ExternalEmbedLink = ({
   uri,
+  hasQuote,
   onRemove,
 }: {
   uri: string
+  hasQuote: boolean
   onRemove: () => void
 }) => {
   const t = useTheme()
   const {data, error} = useResolveLinkQuery(uri)
-  const linkInfo = React.useMemo(
-    () =>
-      data && {
-        title: getExternalLinkTitle(data) ?? uri,
-        uri,
-        description: data.type === 'external' ? data.description : '',
-        thumb: data.type === 'external' ? data.thumb?.source.path : undefined,
-      },
-    [data, uri],
-  )
+  const linkComponent = React.useMemo(() => {
+    if (data) {
+      if (data.type === 'external') {
+        return (
+          <ExternalLinkEmbed
+            link={{
+              title: data.title || uri,
+              uri,
+              description: data.description,
+              thumb: data.thumb?.source.path,
+            }}
+            hideAlt
+          />
+        )
+      } else if (data.kind === 'feed') {
+        return <MaybeFeedCard view={data.view} />
+      } else if (data.kind === 'list') {
+        return <MaybeListCard view={data.view} />
+      } else if (data.kind === 'starter-pack') {
+        return <StarterPackEmbed starterPack={data.view} />
+      }
+    }
+  }, [data, uri])
+
+  if (data?.type === 'record' && hasQuote) {
+    // This is not currently supported by the data model so don't preview it.
+    return null
+  }
+
   return (
     <View style={[a.mb_xl, a.overflow_hidden, t.atoms.border_contrast_medium]}>
-      {linkInfo ? (
-        <View style={{pointerEvents: 'none'}}>
-          <ExternalLinkEmbed link={linkInfo} hideAlt />
-        </View>
+      {linkComponent ? (
+        <View style={{pointerEvents: 'none'}}>{linkComponent}</View>
       ) : error ? (
         <Container style={[a.align_start, a.p_md, a.gap_xs]}>
           <Text numberOfLines={1} style={t.atoms.text_contrast_high}>
@@ -120,7 +139,6 @@ function Container({
   return (
     <View
       style={[
-        a.mt_sm,
         a.rounded_sm,
         a.border,
         a.align_center,
@@ -134,22 +152,3 @@ function Container({
     </View>
   )
 }
-
-function getExternalLinkTitle(link: ResolvedLink): string | undefined {
-  if (link.type === 'external') {
-    return link.title
-  }
-  switch (link.kind) {
-    // These are currently treated as external.
-    // TODO: Display them as embeds instead.
-    case 'feed':
-      return link.view.displayName
-    case 'list':
-      return link.view.name
-    case 'starter-pack':
-      const record = link.view.record
-      return AppBskyGraphStarterpack.isRecord(record)
-        ? record.name
-        : 'Starter Pack'
-  }
-}