Quote post legibility (#486)

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -1,5 +1,4 @@
-import {Dimensions} from 'lib/media/types'
-import React, {useState} from 'react'
+import React, {useMemo, useState} from 'react'
 import {
   LayoutChangeEvent,
   StyleProp,
@@ -9,10 +8,11 @@ import {
   ViewStyle,
 } from 'react-native'
 import {Image, ImageStyle} from 'expo-image'
+import {Dimensions} from 'lib/media/types'
 
 export const DELAY_PRESS_IN = 500
 
-export type ImageLayoutGridType = 'two' | 'three' | 'four'
+export type ImageLayoutGridType = number
 
 export function ImageLayoutGrid({
   type,
@@ -69,8 +69,8 @@ function ImageLayoutGridInner({
   onPressIn?: (index: number) => void
   containerInfo: Dimensions
 }) {
-  const size1 = React.useMemo<ImageStyle>(() => {
-    if (type === 'three') {
+  const size1 = useMemo<ImageStyle>(() => {
+    if (type === 3) {
       const size = (containerInfo.width - 10) / 3
       return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
     } else {
@@ -79,7 +79,7 @@ function ImageLayoutGridInner({
     }
   }, [type, containerInfo])
   const size2 = React.useMemo<ImageStyle>(() => {
-    if (type === 'three') {
+    if (type === 3) {
       const size = ((containerInfo.width - 10) / 3) * 2 + 5
       return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
     } else {
@@ -88,7 +88,7 @@ function ImageLayoutGridInner({
     }
   }, [type, containerInfo])
 
-  if (type === 'two') {
+  if (type === 2) {
     return (
       <View style={styles.flexRow}>
         <TouchableOpacity
@@ -109,7 +109,7 @@ function ImageLayoutGridInner({
       </View>
     )
   }
-  if (type === 'three') {
+  if (type === 3) {
     return (
       <View style={styles.flexRow}>
         <TouchableOpacity
@@ -140,7 +140,7 @@ function ImageLayoutGridInner({
       </View>
     )
   }
-  if (type === 'four') {
+  if (type === 4) {
     return (
       <View style={styles.flexRow}>
         <View>

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -35,7 +35,7 @@ export function QuoteEmbed({
   )
   return (
     <Link
-      style={[styles.container, pal.border, style]}
+      style={[styles.container, pal.borderDark, style]}
       href={itemHref}
       title={itemTitle}>
       <PostMeta
@@ -46,15 +46,11 @@ export function QuoteEmbed({
         postHref={itemHref}
         timestamp={quote.indexedAt}
       />
-      <Text type="post-text" style={pal.text} numberOfLines={6}>
-        {isEmpty ? (
-          <Text style={pal.link} lineHeight={1.5}>
-            View post
-          </Text>
-        ) : (
-          quote.text
-        )}
-      </Text>
+      {!isEmpty ? (
+        <Text type="post-text" style={pal.text} numberOfLines={6}>
+          {quote.text}
+        </Text>
+      ) : null}
       {AppBskyEmbedImages.isView(imagesEmbed) && (
         <PostEmbeds embed={imagesEmbed} />
       )}
@@ -70,7 +66,8 @@ export default QuoteEmbed
 const styles = StyleSheet.create({
   container: {
     borderRadius: 8,
-    paddingVertical: 8,
+    marginTop: 8,
+    paddingVertical: 12,
     paddingHorizontal: 12,
     borderWidth: 1,
   },

src/view/com/util/post-embeds/index.tsx

@@ -107,54 +107,31 @@ export function PostEmbeds({
         })
       }
 
-      if (embed.images.length === 4) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="four"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else if (embed.images.length === 3) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="three"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else if (embed.images.length === 2) {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <ImageLayoutGrid
-              type="two"
-              uris={embed.images.map(img => img.thumb)}
-              onPress={openLightbox}
-              onLongPress={onLongPress}
-              onPressIn={onPressIn}
-            />
-          </View>
-        )
-      } else {
-        return (
-          <View style={[styles.imagesContainer, style]}>
-            <AutoSizedImage
-              uri={embed.images[0].thumb}
-              onPress={() => openLightbox(0)}
-              onLongPress={() => onLongPress(0)}
-              onPressIn={() => onPressIn(0)}
-              style={styles.singleImage}
-            />
-          </View>
-        )
+      switch (embed.images.length) {
+        case 1:
+          return (
+            <View style={[styles.imagesContainer, style]}>
+              <AutoSizedImage
+                uri={embed.images[0].thumb}
+                onPress={() => openLightbox(0)}
+                onLongPress={() => onLongPress(0)}
+                onPressIn={() => onPressIn(0)}
+                style={styles.singleImage}
+              />
+            </View>
+          )
+        default:
+          return (
+            <View style={[styles.imagesContainer, style]}>
+              <ImageLayoutGrid
+                type={embed.images.length}
+                uris={embed.images.map(img => img.thumb)}
+                onPress={openLightbox}
+                onLongPress={onLongPress}
+                onPressIn={onPressIn}
+              />
+            </View>
+          )
       }
     }
   }
@@ -184,7 +161,7 @@ const styles = StyleSheet.create({
     gap: 6,
   },
   imagesContainer: {
-    marginTop: 4,
+    marginTop: 8,
   },
   singleImage: {
     borderRadius: 8,