Migrate most remainging things

src/components/images/Gallery/index.tsx

@@ -9,8 +9,6 @@ import {
   isValidElement,
 } from 'react'
 import {FlatList, Pressable, useWindowDimensions, View} from 'react-native'
-import {DrawerGestureContext} from 'react-native-drawer-layout'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {type AppBskyEmbedImages} from '@atproto/api'
@@ -102,6 +100,9 @@ export function Gallery({
       return 200
     }
   }, [bps])
+  const isWithinQuote =
+    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+  const hideBadges = isWithinQuote
 
   /*
    * Container overflow styles
@@ -205,6 +206,8 @@ export function Gallery({
           renderItem={({item, index}) => {
             return (
               <GalleryImage
+                hideBadges={hideBadges}
+                largeAltBadge={largeAltBadge}
                 image={item}
                 contentHeight={contentHeight}
                 index={index}
@@ -310,6 +313,8 @@ function GalleryImage({
   index,
   onWidthChange,
   itemRef,
+  hideBadges,
+  largeAltBadge,
   onContainerRef,
   onThumbDims,
   onPress,
@@ -320,12 +325,15 @@ function GalleryImage({
   index: number
   onWidthChange: (index: number, width: number) => void
   itemRef: (node: View | null) => void
+  hideBadges?: boolean
+  largeAltBadge?: boolean
   onContainerRef: (index: number, ref: AnimatedRef<any>) => void
   onThumbDims: (index: number, dims: Dimensions) => void
   onPress?: () => void
   onPressIn?: () => void
 }) {
   const t = useTheme()
+  const {t: l} = useLingui()
   const containerRef = useAnimatedRef()
   const [aspectRatio, setAspectRatio] = useState(() =>
     getAspectRatio(image.aspectRatio),
@@ -347,8 +355,14 @@ function GalleryImage({
         onPress={onPress}
         onPressIn={onPressIn}
         accessibilityRole="button"
-        accessibilityLabel={image.alt || undefined}
-        accessibilityHint=""
+        accessibilityLabel={
+          image.alt || l`Image ${index + 1}`
+        }
+        accessibilityHint={l`Opens full image`}
+        android_ripple={{
+          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+          foreground: true,
+        }}
         style={[a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25]}>
         <Image
           source={{uri: image.thumb}}
@@ -357,7 +371,7 @@ function GalleryImage({
           accessibilityLabel={image.alt}
           accessibilityHint=""
           accessibilityIgnoresInvertColors
-          loading="eager"
+          loading={index === 0 ? 'eager' : 'lazy'}
           style={[dims]}
           onLoad={e => {
             const ar = getAspectRatio(e.source)
@@ -370,6 +384,39 @@ function GalleryImage({
             })
           }}
         />
+
+        {image.alt && !hideBadges ? (
+          <View
+            accessible={false}
+            style={[
+              a.absolute,
+              a.flex_row,
+              a.align_center,
+              a.rounded_xs,
+              t.atoms.bg_contrast_25,
+              {
+                gap: 3,
+                padding: 3,
+                bottom: a.p_xs.padding,
+                right: a.p_xs.padding,
+                opacity: 0.8,
+              },
+              largeAltBadge && {
+                gap: 4,
+                padding: 5,
+              },
+            ]}>
+            <Text
+              style={[
+                a.font_bold,
+                largeAltBadge ? a.text_xs : {fontSize: 8},
+              ]}>
+              <Trans>ALT</Trans>
+            </Text>
+          </View>
+        ) : null}
+
+        <MediaInsetBorder />
       </Pressable>
     </Animated.View>
   )