Link cards (#5677)

* New link card styles

* Cleanup of consituent parts, add hover state

* Fix gif alt text view

* Fix alt text view more

* Remove dupe

* Update remove button

* Remove added margin on gif

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

@@ -6,8 +6,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {shareUrl} from '#/lib/sharing'
 import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player'
 import {
@@ -17,13 +15,14 @@ import {
 import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useExternalEmbedsPrefs} from '#/state/preferences'
-import {Link} from '#/view/com/util/Link'
 import {ExternalGifEmbed} from '#/view/com/util/post-embeds/ExternalGifEmbed'
 import {ExternalPlayer} from '#/view/com/util/post-embeds/ExternalPlayerEmbed'
 import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed'
 import {atoms as a, useTheme} from '#/alf'
-import {MediaInsetBorder} from '#/components/MediaInsetBorder'
-import {Text} from '../text/Text'
+import {Divider} from '#/components/Divider'
+import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
 
 export const ExternalLinkEmbed = ({
   link,
@@ -37,16 +36,13 @@ export const ExternalLinkEmbed = ({
   hideAlt?: boolean
 }) => {
   const {_} = useLingui()
-  const pal = usePalette('default')
   const t = useTheme()
-  const {isMobile} = useWebMediaQueries()
   const externalEmbedPrefs = useExternalEmbedsPrefs()
-
+  const niceUrl = toNiceDomain(link.uri)
   const starterPackParsed = parseStarterPackUri(link.uri)
   const imageUri = starterPackParsed
     ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey)
     : link.thumb
-
   const embedPlayerParams = React.useMemo(() => {
     const params = parseEmbedPlayerFromUrl(link.uri)
 
@@ -54,122 +50,131 @@ export const ExternalLinkEmbed = ({
       return params
     }
   }, [link.uri, externalEmbedPrefs])
+  const hasMedia = Boolean(imageUri || embedPlayerParams)
 
-  if (embedPlayerParams?.source === 'tenor') {
-    const parsedAlt = parseAltFromGIFDescription(link.description)
-    return (
-      <GifEmbed
-        params={embedPlayerParams}
-        thumb={link.thumb}
-        altText={parsedAlt.alt}
-        isPreferredAltText={parsedAlt.isPreferred}
-        hideAlt={hideAlt}
-      />
-    )
-  }
-
-  return (
-    <View style={[a.flex_col, a.rounded_md, a.w_full]}>
-      <LinkWrapper link={link} onOpen={onOpen} style={style}>
-        {imageUri && !embedPlayerParams ? (
-          <View>
-            <Image
-              style={{
-                aspectRatio: 1.91,
-                borderTopRightRadius: a.rounded_md.borderRadius,
-                borderTopLeftRadius: a.rounded_md.borderRadius,
-              }}
-              source={{uri: imageUri}}
-              accessibilityIgnoresInvertColors
-              accessibilityLabel={starterPackParsed ? link.title : undefined}
-              accessibilityHint={
-                starterPackParsed ? _(msg`Navigate to starter pack`) : undefined
-              }
-            />
-            <MediaInsetBorder
-              opaque
-              style={[
-                {
-                  borderBottomLeftRadius: 0,
-                  borderBottomRightRadius: 0,
-                },
-              ]}
-            />
-          </View>
-        ) : undefined}
-        {embedPlayerParams?.isGif ? (
-          <ExternalGifEmbed link={link} params={embedPlayerParams} />
-        ) : embedPlayerParams ? (
-          <ExternalPlayer link={link} params={embedPlayerParams} />
-        ) : undefined}
-        <View
-          style={[
-            a.border_b,
-            a.border_l,
-            a.border_r,
-            a.flex_1,
-            a.py_sm,
-            t.atoms.border_contrast_low,
-            {
-              borderBottomRightRadius: a.rounded_md.borderRadius,
-              borderBottomLeftRadius: a.rounded_md.borderRadius,
-              paddingHorizontal: isMobile ? 10 : 14,
-            },
-            !imageUri && !embedPlayerParams && [a.border, a.rounded_md],
-          ]}>
-          <Text
-            type="sm"
-            numberOfLines={1}
-            style={[pal.textLight, {marginVertical: 2}]}>
-            {toNiceDomain(link.uri)}
-          </Text>
-
-          {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
-            <Text emoji type="lg-bold" numberOfLines={3} style={[pal.text]}>
-              {link.title || link.uri}
-            </Text>
-          )}
-          {link.description ? (
-            <Text
-              emoji
-              type="md"
-              numberOfLines={link.thumb ? 2 : 4}
-              style={[pal.text, a.mt_xs]}>
-              {link.description}
-            </Text>
-          ) : undefined}
-        </View>
-      </LinkWrapper>
-    </View>
-  )
-}
-
-function LinkWrapper({
-  link,
-  onOpen,
-  style,
-  children,
-}: {
-  link: AppBskyEmbedExternal.ViewExternal
-  onOpen?: () => void
-  style?: StyleProp<ViewStyle>
-  children: React.ReactNode
-}) {
   const onShareExternal = useCallback(() => {
     if (link.uri && isNative) {
       shareUrl(link.uri)
     }
   }, [link.uri])
 
+  if (embedPlayerParams?.source === 'tenor') {
+    const parsedAlt = parseAltFromGIFDescription(link.description)
+    return (
+      <View style={style}>
+        <GifEmbed
+          params={embedPlayerParams}
+          thumb={link.thumb}
+          altText={parsedAlt.alt}
+          isPreferredAltText={parsedAlt.isPreferred}
+          hideAlt={hideAlt}
+        />
+      </View>
+    )
+  }
+
   return (
     <Link
-      asAnchor
-      anchorNoUnderline
-      href={link.uri}
-      style={[a.flex_1, a.rounded_sm, style]}
-      onBeforePress={onOpen}
+      label={link.title || _(msg`Open link to ${niceUrl}`)}
+      to={link.uri}
+      onPress={onOpen}
       onLongPress={onShareExternal}>
-      {children}
+      {({hovered}) => (
+        <View
+          style={[
+            a.transition_color,
+            a.flex_col,
+            a.rounded_md,
+            a.overflow_hidden,
+            a.w_full,
+            a.border,
+            style,
+            hovered
+              ? t.atoms.border_contrast_high
+              : t.atoms.border_contrast_low,
+          ]}>
+          {imageUri && !embedPlayerParams ? (
+            <Image
+              style={{
+                aspectRatio: 1.91,
+              }}
+              source={{uri: imageUri}}
+              accessibilityIgnoresInvertColors
+            />
+          ) : undefined}
+
+          {embedPlayerParams?.isGif ? (
+            <ExternalGifEmbed link={link} params={embedPlayerParams} />
+          ) : embedPlayerParams ? (
+            <ExternalPlayer link={link} params={embedPlayerParams} />
+          ) : undefined}
+
+          <View
+            style={[
+              a.flex_1,
+              a.pt_sm,
+              {gap: 3},
+              hasMedia && a.border_t,
+              hovered
+                ? t.atoms.border_contrast_high
+                : t.atoms.border_contrast_low,
+            ]}>
+            <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
+              {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
+                <Text
+                  emoji
+                  numberOfLines={3}
+                  style={[a.text_md, a.font_bold, a.leading_snug]}>
+                  {link.title || link.uri}
+                </Text>
+              )}
+              {link.description ? (
+                <Text
+                  emoji
+                  numberOfLines={link.thumb ? 2 : 4}
+                  style={[a.text_sm, a.leading_snug]}>
+                  {link.description}
+                </Text>
+              ) : undefined}
+            </View>
+            <View style={[a.px_md]}>
+              <Divider />
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.gap_2xs,
+                  a.pb_sm,
+                  {
+                    paddingTop: 6, // off menu
+                  },
+                ]}>
+                <Globe
+                  size="xs"
+                  style={[
+                    a.transition_color,
+                    hovered
+                      ? t.atoms.text_contrast_medium
+                      : t.atoms.text_contrast_low,
+                  ]}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    a.transition_color,
+                    a.text_xs,
+                    a.leading_tight,
+                    hovered
+                      ? t.atoms.text_contrast_high
+                      : t.atoms.text_contrast_medium,
+                  ]}>
+                  {toNiceDomain(link.uri)}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
     </Link>
   )
 }