Restore ALT badges in quoted posts (#10964)

Co-authored-by: Eric Bailey <git@esb.lol>
(cherry picked from commit 495d1fe9a7)

src/components/Post/Embed/ImageEmbed.tsx

@@ -142,7 +142,6 @@ export function ImageEmbed({
                 onPress(0, [containerRef], [dims])
               }
               onPressIn={() => onPressIn(0)}
-              hideBadge={rest.isWithinQuote}
             />
           </ImageContextMenu>
         </View>

src/components/images/AutoSizedImage.tsx

@@ -65,7 +65,6 @@ export function ConstrainedImage({
 export function AutoSizedImage({
   image,
   crop = 'constrained',
-  hideBadge,
   onPress,
   onLongPress,
   onPressIn,
@@ -74,7 +73,6 @@ export function AutoSizedImage({
 }: {
   image: AppBskyEmbedImages.ViewImage
   crop?: 'none' | 'square' | 'constrained'
-  hideBadge?: boolean
   onPress?: (
     containerRef: AnimatedRef<any>,
     fetchedDims: Dimensions | null,
@@ -146,7 +144,7 @@ export function AutoSizedImage({
       />
       <MediaInsetBorder />
 
-      {(hasAlt || isCropped) && !hideBadge ? (
+      {hasAlt || isCropped ? (
         <View
           accessible={false}
           style={[
@@ -165,8 +163,10 @@ export function AutoSizedImage({
           ]}>
           {isCropped && (
             <View
+              accessible={false}
               style={[
-                a.rounded_xs,
+                a.rounded_sm,
+                a.p_xs,
                 t.atoms.bg_contrast_25,
                 {
                   padding: 3,
@@ -186,17 +186,18 @@ export function AutoSizedImage({
           )}
           {hasAlt && (
             <View
+              accessible={false}
               style={[
                 a.justify_center,
-                a.rounded_xs,
+                a.rounded_sm,
+                a.p_xs,
                 t.atoms.bg_contrast_25,
                 {
-                  padding: 3,
                   opacity: 0.8,
                 },
                 largeAlt && [
                   {
-                    padding: 5,
+                    padding: 6,
                   },
                 ],
               ]}>

src/components/images/Gallery/index.tsx

@@ -115,7 +115,6 @@ export function Gallery({
   const bps = useBreakpoints()
   const window = useWindowDimensions()
   const isWithinChat = viewContext === PostEmbedViewContext.ChatMessage
-  const hideBadges = isWithinQuote
   const contentHeight = useMemo(() => {
     if (isWithinChat) {
       return 120
@@ -250,7 +249,6 @@ export function Gallery({
               onPress?.(index, [containerRef], [dims])
             }
             onPressIn={() => onPressIn?.(index)}
-            hideBadge={isWithinQuote}
           />
         ))}
       </View>
@@ -300,7 +298,6 @@ export function Gallery({
               : undefined
             return (
               <GalleryImage
-                hideBadges={hideBadges}
                 largeAltBadge={largeAltBadge}
                 image={item}
                 contentHeight={contentHeight}
@@ -396,7 +393,6 @@ function GalleryImage({
   imageCount,
   onWidthChange,
   itemRef,
-  hideBadges,
   largeAltBadge,
   onContainerRef,
   onThumbDims,
@@ -410,7 +406,6 @@ function GalleryImage({
   imageCount: 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
@@ -499,7 +494,7 @@ function GalleryImage({
             useAppleWebpCodec
           />
 
-          {!hideBadges && imageCount > 1 ? (
+          {imageCount > 1 ? (
             <View
               accessible={false}
               pointerEvents="none"
@@ -532,7 +527,7 @@ function GalleryImage({
             </View>
           ) : null}
 
-          {(hasAlt || isCropped) && !hideBadges ? (
+          {hasAlt || isCropped ? (
             <View
               accessible={false}
               style={[
@@ -549,6 +544,7 @@ function GalleryImage({
               ]}>
               {isCropped && (
                 <View
+                  accessible={false}
                   style={[
                     a.rounded_sm,
                     a.p_xs,
@@ -568,6 +564,7 @@ function GalleryImage({
               )}
               {hasAlt && (
                 <View
+                  accessible={false}
                   style={[
                     a.justify_center,
                     a.rounded_sm,

src/components/images/ImageLayoutGridItem.tsx

@@ -12,7 +12,7 @@ import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 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 {type PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {Text} from '#/components/Typography'
 
 type EventFunction = (index: number) => void
@@ -42,8 +42,6 @@ export function GalleryItem({
   onPress,
   onPressIn,
   onLongPress,
-  viewContext,
-  isWithinQuote,
   insetBorderStyle,
   containerRefs,
   thumbDimsRef,
@@ -53,9 +51,6 @@ export function GalleryItem({
   const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
   const hasAlt = !!image.alt
-  const hideBadges =
-    isWithinQuote ??
-    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
 
   const aspect =
     image.aspectRatio && image.aspectRatio.height > 0
@@ -114,26 +109,24 @@ export function GalleryItem({
           <MediaInsetBorder style={insetBorderStyle} />
         </Pressable>
       </ImageContextMenu>
-      {hasAlt && !hideBadges ? (
+      {hasAlt ? (
         <View
           accessible={false}
           style={[
             a.absolute,
             a.flex_row,
             a.align_center,
-            a.rounded_xs,
+            a.rounded_sm,
+            a.p_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: 6,
-                padding: 5,
               },
             ],
           ]}>