From 77323aa466f488449c0ed62990769ee403c6d401 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 4 Sep 2024 20:40:41 -0500
Subject: [PATCH] Adjust gap in small embed variant

---
 src/view/com/util/images/AutoSizedImage.tsx  |  4 +--
 src/view/com/util/images/Gallery.tsx         | 11 ++++---
 src/view/com/util/images/ImageLayoutGrid.tsx | 34 +++++++++++---------
 src/view/com/util/post-embeds/index.tsx      |  4 +--
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 1b4b8593cb..0e7684f26b 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -147,8 +147,8 @@ export function AutoSizedImage({
             {
               gap: 3,
               padding: 3,
-              bottom: a.p_sm.padding,
-              right: a.p_sm.padding,
+              bottom: a.p_xs.padding,
+              right: a.p_xs.padding,
               opacity: 0.8,
             },
             largeAlt && [
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 88e57052a3..080950ff31 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -6,6 +6,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
+import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
 import {atoms as a, useTheme} from '#/alf'
 import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
 import {Text} from '#/components/Typography'
@@ -19,7 +20,7 @@ interface GalleryItemProps {
   onLongPress?: EventFunction
   onPressIn?: EventFunction
   imageStyle: ComponentProps<typeof Image>['style']
-  hideBadges?: boolean
+  viewContext?: PostEmbedViewContext
 }
 
 export const GalleryItem: FC<GalleryItemProps> = ({
@@ -29,7 +30,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onPress,
   onPressIn,
   onLongPress,
-  hideBadges,
+  viewContext,
 }) => {
   const t = useTheme()
   const {_} = useLingui()
@@ -41,6 +42,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({
     const aspect = image.aspectRatio.width / image.aspectRatio.height
     return aspect !== 1
   }, [image.aspectRatio])
+  const hideBadges =
+    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
   return (
     <View style={a.flex_1}>
       <Pressable
@@ -78,8 +81,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({
             {
               gap: 3,
               padding: 3,
-              bottom: a.p_sm.padding,
-              right: a.p_sm.padding,
+              bottom: a.p_xs.padding,
+              right: a.p_xs.padding,
               opacity: 0.8,
             },
             largeAltBadge && [
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 927136b014..0c5cd2b509 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -3,6 +3,8 @@ import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {AppBskyEmbedImages} from '@atproto/api'
 
 import {isWeb} from 'platform/detection'
+import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
+import {atoms as a} from '#/alf'
 import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
@@ -11,13 +13,17 @@ interface ImageLayoutGridProps {
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
   style?: StyleProp<ViewStyle>
-  hideBadges?: boolean
+  viewContext?: PostEmbedViewContext
 }
 
 export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
+  const gap =
+    props.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+      ? a.gap_2xs
+      : a.gap_xs
   return (
     <View style={style}>
-      <View style={styles.container}>
+      <View style={[styles.container, gap]}>
         <ImageLayoutGridInner {...props} />
       </View>
     </View>
@@ -29,15 +35,20 @@ interface ImageLayoutGridInnerProps {
   onPress?: (index: number) => void
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
+  viewContext?: PostEmbedViewContext
 }
 
 function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
   const count = props.images.length
+  const gap =
+    props.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+      ? a.gap_2xs
+      : a.gap_xs
 
   switch (count) {
     case 2:
       return (
-        <View style={styles.flexRow}>
+        <View style={[a.flex_row, gap]}>
           <View style={styles.smallItem}>
             <GalleryItem {...props} index={0} imageStyle={styles.image} />
           </View>
@@ -49,11 +60,11 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
 
     case 3:
       return (
-        <View style={styles.flexRow}>
+        <View style={[a.flex_row, gap]}>
           <View style={styles.threeSingle}>
             <GalleryItem {...props} index={0} imageStyle={styles.image} />
           </View>
-          <View style={styles.threeDouble}>
+          <View style={[styles.threeDouble, gap]}>
             <View style={styles.smallItem}>
               <GalleryItem {...props} index={1} imageStyle={styles.image} />
             </View>
@@ -67,7 +78,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
     case 4:
       return (
         <>
-          <View style={styles.flexRow}>
+          <View style={[a.flex_row, gap]}>
             <View style={styles.smallItem}>
               <GalleryItem {...props} index={0} imageStyle={styles.image} />
             </View>
@@ -75,7 +86,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               <GalleryItem {...props} index={1} imageStyle={styles.image} />
             </View>
           </View>
-          <View style={styles.flexRow}>
+          <View style={[a.flex_row, gap]}>
             <View style={styles.smallItem}>
               <GalleryItem {...props} index={2} imageStyle={styles.image} />
             </View>
@@ -104,13 +115,7 @@ const styles = StyleSheet.create({
         marginHorizontal: -IMAGE_GAP / 2,
         marginVertical: -IMAGE_GAP / 2,
       }
-    : {
-        gap: IMAGE_GAP,
-      },
-  flexRow: {
-    flexDirection: 'row',
-    gap: isWeb ? undefined : IMAGE_GAP,
-  },
+    : {},
   smallItem: {flex: 1, aspectRatio: 1},
   image: isWeb
     ? {
@@ -123,6 +128,5 @@ const styles = StyleSheet.create({
   },
   threeDouble: {
     flex: 1,
-    gap: isWeb ? undefined : IMAGE_GAP,
   },
 })
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 10ebd400a6..08ac915adb 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -164,9 +164,7 @@ export function PostEmbeds({
               images={embed.images}
               onPress={_openLightbox}
               onPressIn={onPressIn}
-              hideBadges={
-                viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-              }
+              viewContext={viewContext}
             />
           </View>
         </ContentHider>