Make StandardSiteEmbed peekable (#10866)

eslint-suppressions.json

@@ -617,11 +617,6 @@
       "count": 3
     }
   },
-  "src/components/dialogs/InAppBrowserConsent.tsx": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 2
-    }
-  },
   "src/components/dialogs/LanguageSelectDialog.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
@@ -629,7 +624,7 @@
   },
   "src/components/dialogs/LinkWarning.tsx": {
     "@typescript-eslint/no-floating-promises": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/dialogs/MutedWords.tsx": {
@@ -848,11 +843,6 @@
       "count": 1
     }
   },
-  "src/features/liveNow/components/LiveStatusDialog.tsx": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 1
-    }
-  },
   "src/features/liveNow/index.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 3
@@ -975,14 +965,6 @@
       "count": 4
     }
   },
-  "src/lib/hooks/useOpenLink.ts": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 2
-    },
-    "@typescript-eslint/require-await": {
-      "count": 1
-    }
-  },
   "src/lib/hooks/usePermissions.ts": {
     "@typescript-eslint/no-misused-promises": {
       "count": 1
@@ -2394,9 +2376,6 @@
   "src/view/com/util/Link.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2
-    },
-    "@typescript-eslint/no-misused-promises": {
-      "count": 2
     }
   },
   "src/view/com/util/LoadingPlaceholder.tsx": {

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/useGoogleTranslate.ts

@@ -50,10 +50,10 @@ export function useGoogleTranslate() {
         } catch (err) {
           if (__DEV__) console.error(err)
           // most likely means they don't have the translate app
-          await openLink(translateUrl)
+          openLink(translateUrl)
         }
       } else {
-        await openLink(translateUrl)
+        openLink(translateUrl)
       }
     },
     [openLink],

src/lib/hooks/useOpenLink.ts

@@ -26,7 +26,7 @@ export function useOpenLink() {
   const {inAppBrowserConsentControl} = useGlobalDialogsControlContext()
 
   const openLink = useCallback(
-    async (url: string, override?: boolean, shouldProxy?: boolean) => {
+    (url: string, override?: boolean, shouldProxy?: boolean) => {
       if (isBskyRSSUrl(url) && isRelativeUrl(url)) {
         url = createBskyAppAbsoluteUrl(url)
       }
@@ -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],
   )