Add iOS peek long-press context menu for image embeds (#10300)

Co-authored-by: Claude <noreply@anthropic.com>

src/components/Post/Embed/ImageContextMenu.tsx

@@ -0,0 +1,79 @@
+import {type ReactNode} from 'react'
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
+
+import {shareImageModal} from '#/lib/media/manip'
+import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
+import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
+import * as PeekMenu from '#/components/PeekMenu'
+import {IS_IOS} from '#/env'
+
+/**
+ * Wraps an image embed with the iOS peek-and-menu interaction. On non-iOS
+ * platforms this renders children unchanged.
+ *
+ * The aspect ratio is consumed by the native side to size the preview
+ * viewController correctly — which is what makes the lift animation clean
+ * for portrait/panorama images.
+ */
+export function ImageContextMenu({
+  fullsizeUri,
+  thumbUri,
+  aspectRatio,
+  borderRadius,
+  onPreviewPress,
+  style,
+  children,
+}: {
+  fullsizeUri: string
+  /** Thumbnail URL. Used as an instant placeholder in the native preview
+   *  while the fullsize loads, so there's no black flash on first peek. */
+  thumbUri?: string
+  /** width / height; defaults to 1 if missing. */
+  aspectRatio: number | undefined
+  borderRadius?: number
+  onPreviewPress?: () => void
+  style?: StyleProp<ViewStyle>
+  children: ReactNode
+}) {
+  const {t: l} = useLingui()
+  const saveImage = useSaveImageToMediaLibrary()
+
+  if (!IS_IOS) {
+    return children
+  }
+
+  const handleSave = () => {
+    void saveImage(fullsizeUri)
+  }
+  const handleShare = () => {
+    void shareImageModal({uri: fullsizeUri})
+  }
+
+  return (
+    <PeekMenu.Root style={style}>
+      <PeekMenu.Trigger
+        preview={{
+          type: 'image',
+          uri: fullsizeUri,
+          thumbUri,
+          aspectRatio: aspectRatio && aspectRatio > 0 ? aspectRatio : 1,
+        }}
+        borderRadius={borderRadius}
+        onPreviewPress={onPreviewPress}>
+        {children}
+      </PeekMenu.Trigger>
+      <PeekMenu.Menu>
+        <PeekMenu.MenuItem id="save" onSelect={handleSave}>
+          <PeekMenu.MenuItemIcon icon={DownloadIcon} />
+          <PeekMenu.MenuItemText>{l`Save image`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+        <PeekMenu.MenuItem id="share" onSelect={handleShare}>
+          <PeekMenu.MenuItemIcon icon={ShareIcon} />
+          <PeekMenu.MenuItemText>{l`Share`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+      </PeekMenu.Menu>
+    </PeekMenu.Root>
+  )
+}

src/components/Post/Embed/ImageEmbed.tsx

@@ -1,3 +1,4 @@
+import {useRef} from 'react'
 import {InteractionManager, View} from 'react-native'
 import {type AnimatedRef} from 'react-native-reanimated'
 import {Image} from 'expo-image'
@@ -8,6 +9,7 @@ import {Gallery} from '#/components/images/Gallery'
 import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid'
 import {useLightboxControls} from '#/components/Lightbox/state'
 import {type Dimensions} from '#/components/Lightbox/types'
+import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {useAnalytics} from '#/analytics'
 import {type EmbedType} from '#/types/bsky/post'
@@ -24,6 +26,11 @@ export function ImageEmbed({
   const {images} = embed.view
   const galleryEnabled = ax.features.enabled(ax.features.PostGalleryEmbedEnable)
 
+  // Captured from AutoSizedImage so the peek-commit handler can reuse the same
+  // ref + dims that a tap would — keeps the lightbox's return animation intact.
+  const singleContainerRef = useRef<AnimatedRef<any> | null>(null)
+  const singleDimsRef = useRef<Dimensions | null>(null)
+
   if (images.length > 0) {
     const items = images.map(img => ({
       uri: img.fullsize,
@@ -59,24 +66,49 @@ export function ImageEmbed({
 
     if (images.length === 1) {
       const image = images[0]
+      const aspect =
+        image.aspectRatio && image.aspectRatio.height > 0
+          ? image.aspectRatio.width / image.aspectRatio.height
+          : undefined
+      const openFromSingle = () => {
+        if (singleContainerRef.current) {
+          onPress(0, [singleContainerRef.current], [singleDimsRef.current])
+        }
+      }
       return (
         <View style={[a.mt_sm, rest.style]}>
-          <AutoSizedImage
-            crop={
-              rest.viewContext === PostEmbedViewContext.ThreadHighlighted
-                ? 'none'
-                : rest.viewContext ===
-                    PostEmbedViewContext.FeedEmbedRecordWithMedia
-                  ? 'square'
-                  : 'constrained'
-            }
-            image={image}
-            onPress={(containerRef, dims) => onPress(0, [containerRef], [dims])}
-            onPressIn={() => onPressIn(0)}
-            hideBadge={
-              rest.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-            }
-          />
+          <ImageContextMenu
+            fullsizeUri={image.fullsize}
+            thumbUri={image.thumb}
+            aspectRatio={aspect}
+            borderRadius={tokens.borderRadius.md}
+            onPreviewPress={openFromSingle}>
+            <AutoSizedImage
+              crop={
+                rest.viewContext === PostEmbedViewContext.ThreadHighlighted
+                  ? 'none'
+                  : rest.viewContext ===
+                      PostEmbedViewContext.FeedEmbedRecordWithMedia
+                    ? 'square'
+                    : 'constrained'
+              }
+              image={image}
+              onContainerRef={ref => {
+                singleContainerRef.current = ref
+              }}
+              onDimsChange={dims => {
+                singleDimsRef.current = dims
+              }}
+              onPress={(containerRef, dims) =>
+                onPress(0, [containerRef], [dims])
+              }
+              onPressIn={() => onPressIn(0)}
+              hideBadge={
+                rest.viewContext ===
+                PostEmbedViewContext.FeedEmbedRecordWithMedia
+              }
+            />
+          </ImageContextMenu>
         </View>
       )
     }