Clean up the post controls UI (#2614)

* Hide zeros on post ctrls

* Align buttons between posts

* Update loading placeholders

* Remove unused

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -165,19 +165,21 @@ let PostCtrls = ({
           strokeWidth={3}
           size={big ? 20 : 15}
         />
-        {typeof post.replyCount !== 'undefined' ? (
+        {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
           <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
             {post.replyCount}
           </Text>
         ) : undefined}
       </TouchableOpacity>
-      <RepostButton
-        big={big}
-        isReposted={!!post.viewer?.repost}
-        repostCount={post.repostCount}
-        onRepost={onRepost}
-        onQuote={onQuote}
-      />
+      <View style={[styles.ctrl, !big && styles.ctrlPad]}>
+        <RepostButton
+          big={big}
+          isReposted={!!post.viewer?.repost}
+          repostCount={post.repostCount}
+          onRepost={onRepost}
+          onQuote={onQuote}
+        />
+      </View>
       <TouchableOpacity
         testID="likeBtn"
         style={[styles.ctrl, !big && styles.ctrlPad]}
@@ -199,7 +201,7 @@ let PostCtrls = ({
             size={big ? 20 : 16}
           />
         )}
-        {typeof post.likeCount !== 'undefined' ? (
+        {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
           <Text
             testID="likeCount"
             style={
@@ -237,6 +239,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   ctrl: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -53,7 +53,7 @@ let RepostButton = ({
       onPress={() => {
         requireAuth(() => onPressToggleRepostWrapper())
       }}
-      style={[styles.control, !big && styles.controlPad]}
+      style={[styles.container]}
       accessibilityRole="button"
       accessibilityLabel={`${
         isReposted
@@ -71,7 +71,7 @@ let RepostButton = ({
         strokeWidth={2.4}
         size={big ? 24 : 20}
       />
-      {typeof repostCount !== 'undefined' ? (
+      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
         <Text
           testID="repostCount"
           style={
@@ -89,13 +89,10 @@ RepostButton = memo(RepostButton)
 export {RepostButton}
 
 const styles = StyleSheet.create({
-  control: {
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  controlPad: {
-    padding: 5,
-  },
   reposted: {
     color: colors.green3,
   },

src/view/com/util/post-ctrls/RepostButton.web.tsx

@@ -69,19 +69,18 @@ export const RepostButton = ({
   const inner = (
     <View
       style={[
-        styles.control,
-        !big && styles.controlPad,
+        styles.container,
         (isReposted
           ? styles.reposted
           : defaultControlColor) as StyleProp<ViewStyle>,
       ]}>
       <RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
-      {typeof repostCount !== 'undefined' ? (
+      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
         <Text
           testID="repostCount"
           type={isReposted ? 'md-bold' : 'md'}
           style={styles.repostCount}>
-          {repostCount ?? 0}
+          {repostCount}
         </Text>
       ) : undefined}
     </View>
@@ -110,15 +109,11 @@ export const RepostButton = ({
 }
 
 const styles = StyleSheet.create({
-  control: {
-    display: 'flex',
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
   },
-  controlPad: {
-    padding: 5,
-  },
   reposted: {
     color: colors.green3,
   },