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() {