From bbc39806fe96d15ffe10919108a44f0adb0e2b7e Mon Sep 17 00:00:00 2001
From: Caidan <me@caidan.dev>
Date: Tue, 22 Jul 2025 17:16:07 -0700
Subject: feat(ui): remove like count from trending videos (#8689)

* feat(ui): add showLikeCount flag to CompactVideoPostCard

Introduced a showLikeCount flag to control the display of like count in
the CompactVideoPostCard component. The like count is now only shown if
both likeCount > 0 and showLikeCount are true. This allows for more
flexible UI configurations and easier toggling of like count visibility.

* fix(ui): hide gradient shadow when hiding like count

* fix(ui): increase trending video profile pic size from 20 -> 24

* fix(ui): add small drop shadow to trending video profile pic

* fix(ui): a.shadow_sm -> t.atoms.shadow_sm based on PR feedback
---
 src/components/VideoPostCard.tsx | 63 ++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index c28adad8b..191c7b82a 100644
--- a/src/components/VideoPostCard.tsx
+++ b/src/components/VideoPostCard.tsx
@@ -390,6 +390,7 @@ export function CompactVideoPostCard({
   if (!AppBskyEmbedVideo.isView(embed)) return null
 
   const likeCount = post?.likeCount ?? 0
+  const showLikeCount = false
   const {thumbnail} = embed
   const black = getBlackColor(t)
 
@@ -475,47 +476,51 @@ export function CompactVideoPostCard({
             />
             <MediaInsetBorder />
 
-            <View style={[a.absolute, a.inset_0]}>
+            <View style={[a.absolute, a.inset_0, t.atoms.shadow_sm]}>
               <View style={[a.absolute, a.inset_0, a.p_sm, {bottom: 'auto'}]}>
                 <View
-                  style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
+                  style={[a.relative, a.rounded_full, {width: 24, height: 24}]}>
                   <UserAvatar
                     type="user"
-                    size={20}
+                    size={24}
                     avatar={post.author.avatar}
                   />
                   <MediaInsetBorder />
                 </View>
               </View>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.pt_2xl,
-                  {
-                    top: 'auto',
-                  },
-                ]}>
-                <LinearGradient
-                  colors={[black, 'rgba(0, 0, 0, 0)']}
-                  locations={[0.02, 1]}
-                  start={{x: 0, y: 1}}
-                  end={{x: 0, y: 0}}
-                  style={[a.absolute, a.inset_0, {opacity: 0.9}]}
-                />
 
+              {showLikeCount && (
                 <View
-                  style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
-                  {likeCount > 0 && (
-                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                      <Heart size="sm" fill="white" />
-                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
-                        {formatCount(i18n, likeCount)}
-                      </Text>
-                    </View>
-                  )}
+                  style={[
+                    a.absolute,
+                    a.inset_0,
+                    a.pt_2xl,
+                    {
+                      top: 'auto',
+                    },
+                  ]}>
+                  <LinearGradient
+                    colors={[black, 'rgba(0, 0, 0, 0)']}
+                    locations={[0.02, 1]}
+                    start={{x: 0, y: 1}}
+                    end={{x: 0, y: 0}}
+                    style={[a.absolute, a.inset_0, {opacity: 0.9}]}
+                  />
+
+                  <View
+                    style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
+                    {likeCount > 0 && (
+                      <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                        <Heart size="sm" fill="white" />
+                        <Text
+                          style={[a.text_sm, a.font_bold, {color: 'white'}]}>
+                          {formatCount(i18n, likeCount)}
+                        </Text>
+                      </View>
+                    )}
+                  </View>
                 </View>
-              </View>
+              )}
             </View>
           </View>
         </Hider.Content>
-- 
cgit 1.4.1