Tune up the custom feed card rendering

4 files changed, 44 insertions, 54 deletions

diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 2137081f3..edadada9c 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -16,21 +16,21 @@ import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useStores} from 'state/index'
-import {HeartIconSolid} from 'lib/icons'
+import {HeartIcon, HeartIconSolid} from 'lib/icons'
 import {pluralize} from 'lib/strings/helpers'
 import {AtUri} from '@atproto/api'
 import {isWeb} from 'platform/detection'
 
-const CustomFeed = observer(
+export const CustomFeed = observer(
   ({
     item,
     style,
-    showBottom = true,
+    showLikes = false,
     reloadOnFocus = false,
   }: {
     item: CustomFeedModel
     style?: StyleProp<ViewStyle>
-    showBottom?: boolean
+    showLikes?: boolean
     reloadOnFocus?: boolean
   }) => {
     const store = useStores()
@@ -67,52 +67,43 @@ const CustomFeed = observer(
             <Text style={[pal.text, s.bold]}>
               {item.data.displayName ?? 'Feed name'}
             </Text>
-            <Text style={[pal.textLight, styles.description]} numberOfLines={5}>
-              {item.data.description ??
-                "Explore our Feed for the latest updates and insights! Dive into a world of intriguing articles, trending news, and exciting stories that cover a wide range of topics. From technology breakthroughs to lifestyle tips, there's something here for everyone. Stay informed and get inspired with us. Join the conversation now!"}
-            </Text>
+            <Text style={[pal.textLight]}>by @{item.data.creator.handle}</Text>
+          </View>
+          <View>
+            <Button
+              type={item.isSaved ? 'default' : 'inverted'}
+              onPress={() => {
+                if (item.data.viewer?.saved) {
+                  store.me.savedFeeds.unsave(item)
+                } else {
+                  store.me.savedFeeds.save(item)
+                }
+              }}
+              label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
+            />
           </View>
         </View>
 
-        {showBottom ? (
+        {item.data.description ? (
+          <Text style={[pal.textLight, styles.description]} numberOfLines={3}>
+            {item.data.description}
+          </Text>
+        ) : null}
+
+        {showLikes ? (
           <View style={styles.bottomContainer}>
             <View style={styles.likedByContainer}>
-              {/* <View style={styles.likedByAvatars}>
-              <UserAvatar size={24} avatar={item.data.avatar} />
-              <UserAvatar size={24} avatar={item.data.avatar} />
-              <UserAvatar size={24} avatar={item.data.avatar} />
-            </View> */}
-
-              <HeartIconSolid size={16} style={[s.mr2, {color: colors.red3}]} />
-              <Text style={[pal.text, pal.textLight]}>
-                {item.data.likeCount && item.data.likeCount > 0
-                  ? `Liked by ${item.data.likeCount} ${pluralize(
-                      item.data.likeCount,
-                      'other',
-                    )}`
-                  : 'Be the first to like this'}
+              <Text type="sm-medium" style={[pal.text, pal.textLight]}>
+                Liked by {item.data.likeCount || 0}{' '}
+                {pluralize(item.data.likeCount || 0, 'user')}
               </Text>
             </View>
-            <View>
-              <Button
-                type={item.isSaved ? 'default' : 'inverted'}
-                onPress={() => {
-                  if (item.data.viewer?.saved) {
-                    store.me.savedFeeds.unsave(item)
-                  } else {
-                    store.me.savedFeeds.save(item)
-                  }
-                }}
-                label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
-              />
-            </View>
           </View>
         ) : null}
       </TouchableOpacity>
     )
   },
 )
-export default CustomFeed
 
 const styles = StyleSheet.create({
   container: {
@@ -122,7 +113,7 @@ const styles = StyleSheet.create({
     flex: 1,
     borderTopWidth: 1,
     borderTopColor: '#E5E5E5',
-    gap: 18,
+    gap: 14,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -146,8 +137,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 2,
   },
-  likedByAvatars: {
-    flexDirection: 'row',
-    gap: -12,
-  },
 })
diff --git a/src/view/com/feeds/SavedFeedItem.tsx b/src/view/com/feeds/SavedFeedItem.tsx
index b93cebe1e..9ebededc4 100644
--- a/src/view/com/feeds/SavedFeedItem.tsx
+++ b/src/view/com/feeds/SavedFeedItem.tsx
@@ -5,7 +5,7 @@ import {colors} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
-import CustomFeed from './CustomFeed'
+import {CustomFeed} from './CustomFeed'
 
 export const SavedFeedItem = observer(
   ({
@@ -19,12 +19,7 @@ export const SavedFeedItem = observer(
 
     return (
       <View style={styles.itemContainer}>
-        <CustomFeed
-          key={item.data.uri}
-          item={item}
-          showBottom={false}
-          style={styles.item}
-        />
+        <CustomFeed key={item.data.uri} item={item} style={styles.item} />
         <TouchableOpacity
           accessibilityRole="button"
           onPress={() => {
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 1f8e48810..ed2f8feba 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -25,7 +25,7 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {getYoutubeVideoId} from 'lib/strings/url-helpers'
 import QuoteEmbed from './QuoteEmbed'
 import {AutoSizedImage} from '../images/AutoSizedImage'
-import CustomFeed from 'view/com/feeds/CustomFeed'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 
 type Embed =
@@ -173,8 +173,9 @@ export function PostEmbeds({
     return (
       <CustomFeed
         item={new CustomFeedModel(store, embed.record)}
-        style={[pal.view, pal.border, styles.extOuter]}
-        reloadOnFocus={true}
+        style={[pal.view, pal.border, styles.customFeedOuter]}
+        reloadOnFocus
+        showLikes
       />
     )
   }
@@ -198,6 +199,13 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginTop: 4,
   },
+  customFeedOuter: {
+    borderWidth: 1,
+    borderRadius: 8,
+    marginTop: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
   alt: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index a80e36237..9224a5967 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -25,7 +25,7 @@ import {FAB} from '../com/util/fab/FAB'
 import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
-import CustomFeed from 'view/com/feeds/CustomFeed'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {combinedDisplayName} from 'lib/strings/display-names'
@@ -189,7 +189,7 @@ export const ProfileScreen = withAuthRequired(
               <FeedSlice slice={item} ignoreMuteFor={uiState.profile.did} />
             )
           } else if (item instanceof CustomFeedModel) {
-            return <CustomFeed item={item} />
+            return <CustomFeed item={item} showLikes />
           }
         }
         return <View />