feat: emoji reactions

src/components/NoteStats/TopZaps.tsx

@@ -1,16 +1,15 @@
-import { useSecondaryPage } from '@/PageManager'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { formatAmount } from '@/lib/lightning'
-import { toProfile } from '@/lib/link'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
 import { Zap } from 'lucide-react'
 import { Event } from 'nostr-tools'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { SimpleUserAvatar } from '../UserAvatar'
+import ZapDialog from '../ZapDialog'
 
 export default function TopZaps({ event }: { event: Event }) {
-  const { push } = useSecondaryPage()
   const { noteStatsMap } = useNoteStats()
+  const [zapIndex, setZapIndex] = useState(-1)
   const topZaps = useMemo(() => {
     const stats = noteStatsMap.get(event.id) || {}
     return stats.zaps?.slice(0, 10) || []
@@ -21,19 +20,35 @@ export default function TopZaps({ event }: { event: Event }) {
   return (
     <ScrollArea className="pb-2 mb-1">
       <div className="flex gap-1">
-        {topZaps.map((zap) => (
+        {topZaps.map((zap, index) => (
           <div
             key={zap.pr}
-            className="flex gap-1 py-1 pl-1 pr-2 text-sm rounded-full bg-muted items-center text-yellow-400 clickable"
+            className="flex gap-1 py-1 pl-1 pr-2 text-sm rounded-full bg-muted/80 items-center text-yellow-400 border border-yellow-400 hover:bg-yellow-400/20 cursor-pointer"
             onClick={(e) => {
               e.stopPropagation()
-              push(toProfile(zap.pubkey))
+              setZapIndex(index)
             }}
           >
             <SimpleUserAvatar userId={zap.pubkey} size="xSmall" />
             <Zap className="size-3 fill-yellow-400" />
             <div className="font-semibold">{formatAmount(zap.amount)}</div>
             <div className="truncate">{zap.comment}</div>
+            <div onClick={(e) => e.stopPropagation()}>
+              <ZapDialog
+                open={zapIndex === index}
+                setOpen={(open) => {
+                  if (open) {
+                    setZapIndex(index)
+                  } else {
+                    setZapIndex(-1)
+                  }
+                }}
+                pubkey={event.pubkey}
+                eventId={event.id}
+                defaultAmount={zap.amount}
+                defaultComment={zap.comment}
+              />
+            </div>
           </div>
         ))}
       </div>