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.

src/components/StarterPack/StarterPackCard.tsx

@@ -141,7 +141,6 @@ export function Embed({
   return (
     <View
       style={[
-        a.mt_xs,
         a.border,
         a.rounded_sm,
         a.overflow_hidden,

src/view/com/composer/Composer.tsx

@@ -668,6 +668,7 @@ export const ComposePost = ({
               <View style={a.relative} key={extLink}>
                 <ExternalEmbedLink
                   uri={extLink}
+                  hasQuote={!!quote}
                   onRemove={() => {
                     dispatch({type: 'embed_remove_link'})
                   }}

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(
+  const linkComponent = React.useMemo(() => {
-    () =>
+    if (data) {
-      data && {
+      if (data.type === 'external') {
-        title: getExternalLinkTitle(data) ?? uri,
+        return (
-        uri,
+          <ExternalLinkEmbed
-        description: data.type === 'external' ? data.description : '',
+            link={{
-        thumb: data.type === 'external' ? data.thumb?.source.path : undefined,
+              title: data.title || uri,
-      },
+              uri,
-    [data, 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 ? (
+      {linkComponent ? (
-        <View style={{pointerEvents: 'none'}}>
+        <View style={{pointerEvents: 'none'}}>{linkComponent}</View>
-          <ExternalLinkEmbed link={linkInfo} hideAlt />
-        </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'
-  }
-}

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -8,10 +8,6 @@ import {useLingui} from '@lingui/react'
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
 import {shareUrl} from '#/lib/sharing'
 import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player'
-import {
-  getStarterPackOgCard,
-  parseStarterPackUri,
-} from '#/lib/strings/starter-pack'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useExternalEmbedsPrefs} from '#/state/preferences'
@@ -39,10 +35,7 @@ export const ExternalLinkEmbed = ({
   const t = useTheme()
   const externalEmbedPrefs = useExternalEmbedsPrefs()
   const niceUrl = toNiceDomain(link.uri)
-  const starterPackParsed = parseStarterPackUri(link.uri)
+  const imageUri = link.thumb
-  const imageUri = starterPackParsed
-    ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey)
-    : link.thumb
   const embedPlayerParams = React.useMemo(() => {
     const params = parseEmbedPlayerFromUrl(link.uri)
 

src/view/com/util/post-embeds/index.tsx

@@ -89,17 +89,29 @@ export function PostEmbeds({
   if (AppBskyEmbedRecord.isView(embed)) {
     // custom feed embed (i.e. generator view)
     if (AppBskyFeedDefs.isGeneratorView(embed.record)) {
-      return <MaybeFeedCard view={embed.record} />
+      return (
+        <View style={a.mt_sm}>
+          <MaybeFeedCard view={embed.record} />
+        </View>
+      )
     }
 
     // list embed
     if (AppBskyGraphDefs.isListView(embed.record)) {
-      return <MaybeListCard view={embed.record} />
+      return (
+        <View style={a.mt_sm}>
+          <MaybeListCard view={embed.record} />
+        </View>
+      )
     }
 
     // starter pack embed
     if (AppBskyGraphDefs.isStarterPackViewBasic(embed.record)) {
-      return <StarterPackCard starterPack={embed.record} />
+      return (
+        <View style={a.mt_sm}>
+          <StarterPackCard starterPack={embed.record} />
+        </View>
+      )
     }
 
     // quote post
@@ -203,7 +215,7 @@ export function PostEmbeds({
   return <View />
 }
 
-function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) {
+export function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) {
   const pal = usePalette('default')
   const moderationOpts = useModerationOpts()
   const moderation = React.useMemo(() => {
@@ -223,7 +235,7 @@ function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) {
   )
 }
 
-function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
+export function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
   const moderationOpts = useModerationOpts()
   const moderation = React.useMemo(() => {
     return moderationOpts ? moderateUserList(view, moderationOpts) : undefined
@@ -238,7 +250,6 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
           t.atoms.border_contrast_medium,
           a.p_md,
           a.rounded_sm,
-          a.mt_sm,
         ]}>
         <ListCard.Default view={view} />
       </View>
@@ -264,7 +275,6 @@ const styles = StyleSheet.create({
   customFeedOuter: {
     borderWidth: StyleSheet.hairlineWidth,
     borderRadius: 8,
-    marginTop: 4,
     paddingHorizontal: 12,
     paddingVertical: 12,
   },