feat: show reaction counts and hide top zap/likes in feed

src/components/NoteStats/LikeButton.tsx

@@ -5,7 +5,6 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { createReactionDraftEvent } from '@/lib/draft-event'
-import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -16,6 +15,7 @@ import { useTranslation } from 'react-i18next'
 import Emoji from '../Emoji'
 import EmojiPicker from '../EmojiPicker'
 import SuggestedEmojis from '../SuggestedEmojis'
+import { formatCount } from './utils'
 
 export default function LikeButton({ event }: { event: Event }) {
   const { t } = useTranslation()
@@ -25,10 +25,10 @@ export default function LikeButton({ event }: { event: Event }) {
   const [liking, setLiking] = useState(false)
   const [isEmojiReactionsOpen, setIsEmojiReactionsOpen] = useState(false)
   const [isPickerOpen, setIsPickerOpen] = useState(false)
-  const myLastEmoji = useMemo(() => {
+  const { myLastEmoji, likeCount } = useMemo(() => {
     const stats = noteStatsMap.get(event.id) || {}
     const like = stats.likes?.find((like) => like.pubkey === pubkey)
-    return like?.emoji
+    return { myLastEmoji: like?.emoji, likeCount: stats.likes?.length }
   }, [noteStatsMap, event, pubkey])
 
   const like = async (emoji: string) => {
@@ -58,10 +58,7 @@ export default function LikeButton({ event }: { event: Event }) {
 
   const trigger = (
     <button
-      className={cn(
-        'flex items-center enabled:hover:text-primary gap-1 px-3 h-full',
-        !myLastEmoji ? 'text-muted-foreground' : ''
-      )}
+      className="flex items-center enabled:hover:text-primary gap-1 px-3 h-full text-muted-foreground"
       title={t('Like')}
       onClick={() => {
         if (isSmallScreen) {
@@ -72,11 +69,17 @@ export default function LikeButton({ event }: { event: Event }) {
       {liking ? (
         <Loader className="animate-spin" />
       ) : myLastEmoji ? (
-        <div className="h-5 w-5 flex items-center justify-center">
-          <Emoji emoji={myLastEmoji} />
-        </div>
+        <>
+          <div className="h-5 w-5 flex items-center justify-center">
+            <Emoji emoji={myLastEmoji} />
+          </div>
+          {!!likeCount && <div className="text-sm">{formatCount(likeCount)}</div>}
+        </>
       ) : (
-        <SmilePlus />
+        <>
+          <SmilePlus />
+          {!!likeCount && <div className="text-sm">{formatCount(likeCount)}</div>}
+        </>
       )}
     </button>
   )

src/components/NoteStats/index.tsx

@@ -16,7 +16,8 @@ export default function NoteStats({
   event,
   className,
   classNames,
-  fetchIfNotExisting = false
+  fetchIfNotExisting = false,
+  displayTopZapsAndLikes = false
 }: {
   event: Event
   className?: string
@@ -24,6 +25,7 @@ export default function NoteStats({
     buttonBar?: string
   }
   fetchIfNotExisting?: boolean
+  displayTopZapsAndLikes?: boolean
 }) {
   const { isSmallScreen } = useScreenSize()
   const { fetchNoteStats } = useNoteStats()
@@ -38,8 +40,12 @@ export default function NoteStats({
   if (isSmallScreen) {
     return (
       <div className={cn('select-none', className)}>
-        <TopZaps event={event} />
-        <Likes event={event} />
+        {displayTopZapsAndLikes && (
+          <>
+            <TopZaps event={event} />
+            <Likes event={event} />
+          </>
+        )}
         <div
           className={cn(
             'flex justify-between items-center h-5 [&_svg]:size-5',
@@ -61,8 +67,12 @@ export default function NoteStats({
 
   return (
     <div className={cn('select-none', className)}>
-      <TopZaps event={event} />
-      <Likes event={event} />
+      {displayTopZapsAndLikes && (
+        <>
+          <TopZaps event={event} />
+          <Likes event={event} />
+        </>
+      )}
       <div className="flex justify-between h-5 [&_svg]:size-4">
         <div
           className={cn('flex items-center', loading ? 'animate-pulse' : '')}

src/components/ReplyNote/index.tsx

@@ -66,7 +66,7 @@ export default function ReplyNote({
         {show ? (
           <>
             <Content className="mt-2" event={event} />
-            <NoteStats className="mt-2" event={event} />
+            <NoteStats className="mt-2" event={event} displayTopZapsAndLikes />
           </>
         ) : (
           <Button

src/pages/secondary/NotePage/index.tsx

@@ -77,7 +77,7 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
           className="select-text"
           hideParentNotePreview
         />
-        <NoteStats className="mt-3" event={event} fetchIfNotExisting />
+        <NoteStats className="mt-3" event={event} fetchIfNotExisting displayTopZapsAndLikes />
       </div>
       <Separator className="mt-4" />
       {event.kind === kinds.ShortTextNote ? (