make standardsiteembed peekable

eslint-suppressions.json

@@ -976,9 +976,6 @@
     }
   },
   "src/lib/hooks/useOpenLink.ts": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 2
-    },
     "@typescript-eslint/require-await": {
       "count": 1
     }

src/components/Post/Embed/StandardSiteEmbed/index.tsx

@@ -127,7 +127,6 @@ export const StandardSiteEmbed = ({
       style={[
         a.flex_col,
         a.rounded_lg,
-        a.overflow_hidden,
         a.w_full,
         a.border,
         t.atoms.bg,
@@ -135,28 +134,44 @@ export const StandardSiteEmbed = ({
         preview && a.pointer_events_none,
         style,
       ]}>
+      {/*
+       * The article is an in-flow `Link` wrapping the content so the iOS peek
+       * menu has something to lift. The publication footer below lives outside
+       * it - it has its own link (to the publication) and Subscribe button, so
+       * it can't be nested inside the article's peek.
+       */}
       <Link
+        peek
         shouldProxy
         to={view.uri}
         label={view.title || l`Open link to ${niceUrl}`}
         onPress={onPress}
         onLongPress={onLongPress}
-        style={[a.absolute, a.inset_0, a.z_10]}
+        style={[a.rounded_lg]}
         {...web({
           onMouseEnter: onInteract,
           onMouseLeave: onInteractOut,
         })}
         onFocus={onInteract}
         onBlur={onInteractOut}>
-        <></>
+        {() => (
-      </Link>
-
           <View
             style={[
               a.w_full,
-          a.z_10,
+              a.overflow_hidden,
-          a.pointer_events_none,
+              // The container can't clip (overflow_hidden there breaks the peek
-          interacted && [t.atoms.bg_contrast_25],
+              // lift animation), so each half rounds its own outer corners to
+              // match the container border. The article rounds the top, plus the
+              // bottom when there's no footer beneath it.
+              {
+                borderTopLeftRadius: a.rounded_lg.borderRadius,
+                borderTopRightRadius: a.rounded_lg.borderRadius,
+              },
+              !view.source && {
+                borderBottomLeftRadius: a.rounded_lg.borderRadius,
+                borderBottomRightRadius: a.rounded_lg.borderRadius,
+              },
+              interacted ? t.atoms.bg_contrast_25 : t.atoms.bg,
             ]}>
             {imageUri ? (
               <Image
@@ -208,7 +223,12 @@ export const StandardSiteEmbed = ({
 
                 {isStandard && (view.createdAt || view.readingTime) && (
                   <View
-                style={[a.flex_row, a.align_center, a.gap_md, {paddingTop: 2}]}>
+                    style={[
+                      a.flex_row,
+                      a.align_center,
+                      a.gap_md,
+                      {paddingTop: 2},
+                    ]}>
                     {view.createdAt && (
                       <Text
                         style={[
@@ -252,9 +272,11 @@ export const StandardSiteEmbed = ({
               </View>
             )}
           </View>
+        )}
+      </Link>
 
       {view.source && (
-        <View style={[a.z_20]}>
+        <View>
           <Divider />
           <PublicationFooter
             preview={preview}
@@ -629,6 +651,14 @@ export function PublicationFooter({
         a.justify_between,
         a.p_md,
         a.gap_md,
+        a.overflow_hidden,
+        // Rounds the bottom corners to match the container border, since the
+        // container itself can't clip (overflow_hidden there breaks the peek
+        // lift animation on the article above).
+        {
+          borderBottomLeftRadius: a.rounded_lg.borderRadius,
+          borderBottomRightRadius: a.rounded_lg.borderRadius,
+        },
         gtPhone && [a.flex_row, a.gap_sm],
         interactedOuter && t.atoms.bg_contrast_25,
         preview && a.pointer_events_none,

src/lib/hooks/useOpenLink.ts

@@ -66,12 +66,12 @@ export function useOpenLink() {
           }).catch(err => {
             if (__DEV__)
               logger.error('Could not open web browser', {message: err})
-            Linking.openURL(url)
+            void Linking.openURL(url)
           })
           return
         }
       }
-      Linking.openURL(url)
+      void Linking.openURL(url)
     },
     [ax, enabled, inAppBrowserConsentControl, t, dialogContext],
   )