feat: add like button on picture note card

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>
   )
 }

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} />
     </>

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

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>