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

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

src/components/images/ImageLayoutGridItem.tsx

@@ -9,8 +9,9 @@ import {Trans} from '@lingui/react/macro'
 
 import {type Dimensions} from '#/lib/media/types'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {Text} from '#/components/Typography'
 
@@ -52,46 +53,63 @@ export function GalleryItem({
   const hasAlt = !!image.alt
   const hideBadges =
     viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+
+  const aspect =
+    image.aspectRatio && image.aspectRatio.height > 0
+      ? image.aspectRatio.width / image.aspectRatio.height
+      : undefined
+
+  // The tap handler and the peek-commit handler do the same thing: open the
+  // lightbox with this cell's ref + dims so the lightbox's return animation
+  // can target the original thumbnail.
+  const openLightboxAtIndex = onPress
+    ? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
+    : undefined
+
   return (
     <View style={a.flex_1} ref={containerRefs[index]} collapsable={false}>
-      <Pressable
-        onPress={
-          onPress
-            ? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
-            : undefined
-        }
-        onPressIn={onPressIn ? () => onPressIn(index) : undefined}
-        onLongPress={onLongPress ? () => onLongPress(index) : undefined}
-        android_ripple={{
-          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
-          foreground: true,
-        }}
-        style={[
-          a.flex_1,
-          a.overflow_hidden,
-          t.atoms.bg_contrast_25,
-          imageStyle,
-        ]}
-        accessibilityRole="button"
-        accessibilityLabel={image.alt || _(msg`Image`)}
-        accessibilityHint="">
-        <Image
-          source={{uri: image.thumb}}
-          style={[a.flex_1]}
-          accessible={true}
-          accessibilityLabel={image.alt}
-          accessibilityHint=""
-          accessibilityIgnoresInvertColors
-          onLoad={e => {
-            thumbDimsRef.current[index] = {
-              width: e.source.width,
-              height: e.source.height,
-            }
+      <ImageContextMenu
+        fullsizeUri={image.fullsize}
+        thumbUri={image.thumb}
+        aspectRatio={aspect}
+        borderRadius={tokens.borderRadius.md}
+        onPreviewPress={openLightboxAtIndex}
+        style={a.flex_1}>
+        <Pressable
+          onPress={openLightboxAtIndex}
+          onPressIn={onPressIn ? () => onPressIn(index) : undefined}
+          onLongPress={onLongPress ? () => onLongPress(index) : undefined}
+          android_ripple={{
+            color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+            foreground: true,
           }}
-          loading="lazy"
-        />
-        <MediaInsetBorder style={insetBorderStyle} />
-      </Pressable>
+          style={[
+            a.flex_1,
+            a.overflow_hidden,
+            t.atoms.bg_contrast_25,
+            imageStyle,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={image.alt || _(msg`Image`)}
+          accessibilityHint="">
+          <Image
+            source={{uri: image.thumb}}
+            style={[a.flex_1]}
+            accessible={true}
+            accessibilityLabel={image.alt}
+            accessibilityHint=""
+            accessibilityIgnoresInvertColors
+            onLoad={e => {
+              thumbDimsRef.current[index] = {
+                width: e.source.width,
+                height: e.source.height,
+              }
+            }}
+            loading="lazy"
+          />
+          <MediaInsetBorder style={insetBorderStyle} />
+        </Pressable>
+      </ImageContextMenu>
       {hasAlt && !hideBadges ? (
         <View
           accessible={false}