feat: aggregate multiple reposts to avoid duplicate posts in feed

src/components/NoteCard/MainNoteCard.tsx

@@ -12,14 +12,14 @@ import RepostDescription from './RepostDescription'
 export default function MainNoteCard({
   event,
   className,
-  reposter,
+  reposters,
   embedded,
   originalNoteId,
   pinned = false
 }: {
   event: Event
   className?: string
-  reposter?: string
+  reposters?: string[]
   embedded?: boolean
   originalNoteId?: string
   pinned?: boolean
@@ -37,7 +37,7 @@ export default function MainNoteCard({
       <div className={cn('clickable', embedded ? 'p-2 sm:p-3 border rounded-lg' : 'py-3')}>
         <Collapsible alwaysExpand={embedded}>
           {pinned && <PinnedButton event={event} />}
-          <RepostDescription className={embedded ? '' : 'px-4'} reposter={reposter} />
+          <RepostDescription className={embedded ? '' : 'px-4'} reposters={reposters} />
           <Note
             className={embedded ? '' : 'px-4'}
             size={embedded ? 'small' : 'normal'}

src/components/NoteCard/RepostDescription.tsx

@@ -1,23 +1,75 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import { cn } from '@/lib/utils'
 import { Repeat2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 
+/**
+ * - reposters.length === 1: show "Alice reposted"
+ * - reposters.length === 2: show "Alice, Bob reposted"
+ * - reposters.length === 3: show "Alice, Bob, Charlie reposted"
+ * - reposters.length > 3: show "Alice, Bob, and x others reposted" (with hover card showing avatars of others)
+ */
 export default function RepostDescription({
-  reposter,
+  reposters,
   className
 }: {
-  reposter?: string | null
+  reposters?: string[]
   className?: string
 }) {
   const { t } = useTranslation()
-  if (!reposter) return null
+  if (!reposters?.length) return null
 
   return (
     <div className={cn('flex gap-1 text-sm items-center text-muted-foreground mb-1', className)}>
       <Repeat2 size={16} className="shrink-0" />
-      <Username userId={reposter} className="font-semibold truncate" skeletonClassName="h-3" />
+      <Username
+        key={reposters[0]}
+        userId={reposters[0]}
+        className={cn('font-semibold truncate', reposters.length > 1 && 'after:content-[","]')}
+        skeletonClassName="h-3"
+      />
+      {reposters.length > 1 && (
+        <Username
+          key={reposters[1]}
+          userId={reposters[1]}
+          className={cn('font-semibold truncate', reposters.length === 3 && 'after:content-[","]')}
+          skeletonClassName="h-3"
+        />
+      )}
+      {reposters.length > 3 ? (
+        <AndXOthers reposters={reposters.slice(2)} />
+      ) : reposters.length === 3 ? (
+        <Username
+          key={reposters[2]}
+          userId={reposters[2]}
+          className={cn('font-semibold truncate')}
+          skeletonClassName="h-3"
+        />
+      ) : null}
       <div className="shrink-0">{t('reposted')}</div>
     </div>
   )
 }
+
+function AndXOthers({ reposters }: { reposters: string[] }) {
+  const { t } = useTranslation()
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <span className="shrink-0 hover:underline">
+          {t('and {{x}} others', { x: reposters.length })}
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-fit max-w-60 flex flex-wrap p-2">
+        {reposters.map((pubkey) => (
+          <div key={pubkey} className="p-2">
+            <UserAvatar key={pubkey} userId={pubkey} size="small" />
+          </div>
+        ))}
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

src/components/NoteCard/RepostNoteCard.tsx

@@ -1,9 +1,9 @@
 import { isMentioningMutedUsers } from '@/lib/event'
-import { tagNameEquals } from '@/lib/tag'
+import { generateBech32IdFromATag, generateBech32IdFromETag, tagNameEquals } from '@/lib/tag'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import client from '@/services/client.service'
-import { Event, kinds, nip19, verifyEvent } from 'nostr-tools'
+import { Event, kinds, verifyEvent } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
 import MainNoteCard from './MainNoteCard'
 
@@ -51,15 +51,20 @@ export default function RepostNoteCard({
           return
         }
 
-        const [, id, relay, , pubkey] = event.tags.find(tagNameEquals('e')) ?? []
-        if (!id) {
+        let targetEventId: string | undefined
+        const aTag = event.tags.find(tagNameEquals('a'))
+        if (aTag) {
+          targetEventId = generateBech32IdFromATag(aTag)
+        } else {
+          const eTag = event.tags.find(tagNameEquals('e'))
+          if (eTag) {
+            targetEventId = generateBech32IdFromETag(eTag)
+          }
+        }
+        if (!targetEventId) {
           return
         }
-        const targetEventId = nip19.neventEncode({
-          id,
-          relays: relay ? [relay] : [],
-          author: pubkey
-        })
+
         const targetEvent = await client.fetchEvent(targetEventId)
         if (targetEvent) {
           setTargetEvent(targetEvent)
@@ -76,7 +81,7 @@ export default function RepostNoteCard({
   return (
     <MainNoteCard
       className={className}
-      reposter={event.pubkey}
+      reposters={[event.pubkey]}
       event={targetEvent}
       pinned={pinned}
     />

src/components/NoteCard/index.tsx

@@ -11,12 +11,14 @@ export default function NoteCard({
   event,
   className,
   filterMutedNotes = true,
-  pinned = false
+  pinned = false,
+  reposters
 }: {
   event: Event
   className?: string
   filterMutedNotes?: boolean
   pinned?: boolean
+  reposters?: string[]
 }) {
   const { mutePubkeySet } = useMuteList()
   const { hideContentMentioningMutedUsers } = useContentPolicy()
@@ -41,7 +43,7 @@ export default function NoteCard({
       />
     )
   }
-  return <MainNoteCard event={event} className={className} pinned={pinned} />
+  return <MainNoteCard event={event} className={className} pinned={pinned} reposters={reposters} />
 }
 
 export function NoteCardLoadingSkeleton() {

src/components/NoteList/index.tsx

@@ -1,11 +1,12 @@
 import NewNotesButton from '@/components/NewNotesButton'
 import { Button } from '@/components/ui/button'
 import {
-  getReplaceableCoordinateFromEvent,
+  getEventKey,
+  getEventKeyFromTag,
   isMentioningMutedUsers,
-  isReplaceableEvent,
   isReplyNoteEvent
 } from '@/lib/event'
+import { tagNameEquals } from '@/lib/tag'
 import { isTouchDevice } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useDeletedEvent } from '@/providers/DeletedEventProvider'
@@ -15,7 +16,7 @@ import { useUserTrust } from '@/providers/UserTrustProvider'
 import client from '@/services/client.service'
 import { TFeedSubRequest } from '@/types'
 import dayjs from 'dayjs'
-import { Event } from 'nostr-tools'
+import { Event, kinds, verifyEvent } from 'nostr-tools'
 import { decode } from 'nostr-tools/nip19'
 import {
   forwardRef,
@@ -113,34 +114,95 @@ const NoteList = forwardRef(
       [hideReplies, hideUntrustedNotes, mutePubkeySet, pinnedEventIds, isEventDeleted, filterFn]
     )
 
-    const filteredEvents = useMemo(() => {
-      const idSet = new Set<string>()
+    const filteredNotes = useMemo(() => {
+      // Store processed event keys to avoid duplicates
+      const keySet = new Set<string>()
+      // Map to track reposters for each event key
+      const repostersMap = new Map<string, Set<string>>()
+      // Final list of filtered events
+      const filteredEvents: Event[] = []
 
-      return events.slice(0, showCount).filter((evt) => {
-        if (shouldHideEvent(evt)) return false
+      events.slice(0, showCount).forEach((evt) => {
+        const key = getEventKey(evt)
+        if (keySet.has(key)) return
+        keySet.add(key)
 
-        const id = isReplaceableEvent(evt.kind) ? getReplaceableCoordinateFromEvent(evt) : evt.id
-        if (idSet.has(id)) {
-          return false
+        if (shouldHideEvent(evt)) return
+        if (evt.kind !== kinds.Repost) {
+          filteredEvents.push(evt)
+          return
         }
-        idSet.add(id)
-        return true
+
+        const eventFromContent = evt.content ? (JSON.parse(evt.content) as Event) : null
+        if (eventFromContent && verifyEvent(eventFromContent)) {
+          if (eventFromContent.kind === kinds.Repost) {
+            return
+          }
+          if (shouldHideEvent(eventFromContent)) return
+
+          client.addEventToCache(eventFromContent)
+          const targetSeenOn = client.getSeenEventRelays(eventFromContent.id)
+          if (targetSeenOn.length === 0) {
+            const seenOn = client.getSeenEventRelays(evt.id)
+            seenOn.forEach((relay) => {
+              client.trackEventSeenOn(eventFromContent.id, relay)
+            })
+          }
+
+          const targetEventKey = getEventKey(eventFromContent)
+          const reposters = repostersMap.get(targetEventKey)
+          if (reposters) {
+            reposters.add(evt.pubkey)
+          } else {
+            repostersMap.set(targetEventKey, new Set([evt.pubkey]))
+          }
+          // If the target event is not already included, add it now
+          if (!keySet.has(targetEventKey)) {
+            filteredEvents.push(eventFromContent)
+            keySet.add(targetEventKey)
+          }
+          return
+        }
+
+        const targetTag = evt.tags.find(tagNameEquals('a')) ?? evt.tags.find(tagNameEquals('e'))
+        if (targetTag) {
+          const targetEventKey = getEventKeyFromTag(targetTag)
+          if (targetEventKey) {
+            // Add to reposters map
+            const reposters = repostersMap.get(targetEventKey)
+            if (reposters) {
+              reposters.add(evt.pubkey)
+            } else {
+              repostersMap.set(targetEventKey, new Set([evt.pubkey]))
+            }
+            // If the target event is already included, skip adding this repost
+            if (keySet.has(targetEventKey)) {
+              return
+            }
+          }
+        }
+        // If we can't find the original event, just show the repost itself
+        filteredEvents.push(evt)
+        return
+      })
+
+      return filteredEvents.map((evt) => {
+        const key = getEventKey(evt)
+        return { key, event: evt, reposters: Array.from(repostersMap.get(key) ?? []) }
       })
     }, [events, showCount, shouldHideEvent])
 
     const filteredNewEvents = useMemo(() => {
-      const idSet = new Set<string>()
+      const keySet = new Set<string>()
 
       return newEvents.filter((event: Event) => {
         if (shouldHideEvent(event)) return false
 
-        const id = isReplaceableEvent(event.kind)
-          ? getReplaceableCoordinateFromEvent(event)
-          : event.id
-        if (idSet.has(id)) {
+        const key = getEventKey(event)
+        if (keySet.has(key)) {
           return false
         }
-        idSet.add(id)
+        keySet.add(key)
         return true
       })
     }, [newEvents, shouldHideEvent])
@@ -306,12 +368,13 @@ const NoteList = forwardRef(
         {pinnedEventIds.map((id) => (
           <PinnedNoteCard key={id} eventId={id} className="w-full" />
         ))}
-        {filteredEvents.map((event) => (
+        {filteredNotes.map(({ key, event, reposters }) => (
           <NoteCard
-            key={event.id}
+            key={key}
             className="w-full"
             event={event}
             filterMutedNotes={filterMutedNotes}
+            reposters={reposters}
           />
         ))}
         {hasMore || loading ? (