From 52daf3958438211c2949f06c34329a9ea18e32fe Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Wed, 15 Jan 2025 17:10:57 +0800
Subject: [PATCH] feat: add like button on picture note card

---
 src/components/NoteStats/LikeButton.tsx   |  2 +-
 src/components/NoteStats/ReplyButton.tsx  |  2 +-
 src/components/NoteStats/RepostButton.tsx |  2 +-
 src/components/PictureNoteCard/index.tsx  | 10 +++++++---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/NoteStats/LikeButton.tsx b/src/components/NoteStats/LikeButton.tsx
index 8963a681..93efde62 100644
--- a/src/components/NoteStats/LikeButton.tsx
+++ b/src/components/NoteStats/LikeButton.tsx
@@ -83,7 +83,7 @@ export default function LikeButton({
       ) : (
         <Heart size={16} className={hasLiked ? 'fill-red-400' : ''} />
       )}
-      <div className="text-sm">{formatCount(likeCount)}</div>
+      {!!likeCount && <div className="text-sm">{formatCount(likeCount)}</div>}
     </button>
   )
 }
diff --git a/src/components/NoteStats/ReplyButton.tsx b/src/components/NoteStats/ReplyButton.tsx
index 4991567d..3e78f45b 100644
--- a/src/components/NoteStats/ReplyButton.tsx
+++ b/src/components/NoteStats/ReplyButton.tsx
@@ -23,7 +23,7 @@ export default function ReplyButton({ event }: { event: Event }) {
         title={t('Reply')}
       >
         <MessageCircle size={16} />
-        <div className="text-sm">{formatCount(replyCount)}</div>
+        {!!replyCount && <div className="text-sm">{formatCount(replyCount)}</div>}
       </button>
       <PostEditor parentEvent={event} open={open} setOpen={setOpen} />
     </>
diff --git a/src/components/NoteStats/RepostButton.tsx b/src/components/NoteStats/RepostButton.tsx
index 47397f42..c0b511cd 100644
--- a/src/components/NoteStats/RepostButton.tsx
+++ b/src/components/NoteStats/RepostButton.tsx
@@ -89,7 +89,7 @@ export default function RepostButton({
             title={t('Repost')}
           >
             {reposting ? <Loader className="animate-spin" size={16} /> : <Repeat size={16} />}
-            <div className="text-sm">{formatCount(repostCount)}</div>
+            {!!repostCount && <div className="text-sm">{formatCount(repostCount)}</div>}
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
diff --git a/src/components/PictureNoteCard/index.tsx b/src/components/PictureNoteCard/index.tsx
index ec9e1677..5b6724bf 100644
--- a/src/components/PictureNoteCard/index.tsx
+++ b/src/components/PictureNoteCard/index.tsx
@@ -15,6 +15,7 @@ import {
 import Image from '../Image'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
+import LikeButton from '../NoteStats/LikeButton'
 
 export default function PictureNoteCard({
   event,
@@ -45,9 +46,12 @@ export default function PictureNoteCard({
       )}
       <div className="p-2 space-y-1">
         <div className="line-clamp-2 font-semibold">{title}</div>
-        <div className="flex items-center gap-2">
-          <UserAvatar userId={event.pubkey} size="xSmall" />
-          <Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 flex-1 w-0">
+            <UserAvatar userId={event.pubkey} size="xSmall" />
+            <Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
+          </div>
+          <LikeButton event={event} />
         </div>
       </div>
     </div>