feat: optimize notifications

src/components/NotificationList/NotificationItem/ZapNotification.tsx

@@ -1,17 +1,11 @@
 import { useFetchEvent } from '@/hooks'
 import { getZapInfoFromEvent } from '@/lib/event-metadata'
 import { formatAmount } from '@/lib/lightning'
-import { toNote, toProfile } from '@/lib/link'
-import { cn } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
-import { useNostr } from '@/providers/NostrProvider'
 import { Zap } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import ContentPreview from '../../ContentPreview'
-import { FormattedTimestamp } from '../../FormattedTimestamp'
-import UserAvatar from '../../UserAvatar'
+import Notification from './Notification'
 
 export function ZapNotification({
   notification,
@@ -21,38 +15,28 @@ export function ZapNotification({
   isNew?: boolean
 }) {
   const { t } = useTranslation()
-  const { push } = useSecondaryPage()
-  const { pubkey } = useNostr()
   const { senderPubkey, eventId, amount, comment } = useMemo(
     () => getZapInfoFromEvent(notification) ?? ({} as any),
     [notification]
   )
-  const { event, isFetching } = useFetchEvent(eventId)
+  const { event } = useFetchEvent(eventId)
 
   if (!senderPubkey || !amount) return null
 
   return (
-    <div
-      className="flex items-center justify-between cursor-pointer py-2"
-      onClick={() => (eventId ? push(toNote(eventId)) : pubkey ? push(toProfile(pubkey)) : null)}
-    >
-      <div className="flex gap-2 items-center flex-1 w-0">
-        <UserAvatar userId={senderPubkey} size="small" />
-        <Zap size={24} className="text-yellow-400 shrink-0" />
+    <Notification
+      notificationId={notification.id}
+      icon={<Zap size={24} className="text-yellow-400 shrink-0" />}
+      sender={senderPubkey}
+      sentAt={notification.created_at}
+      targetEvent={event}
+      middle={
         <div className="font-semibold text-yellow-400 shrink-0">
-          {formatAmount(amount)} {t('sats')}
+          {formatAmount(amount)} {t('sats')} {comment}
         </div>
-        {comment && <div className="text-yellow-400 truncate">{comment}</div>}
-        {eventId && !isFetching && (
-          <ContentPreview
-            className={cn('truncate flex-1 w-0', isNew ? 'font-semibold' : 'text-muted-foreground')}
-            event={event}
-          />
-        )}
-      </div>
-      <div className="text-muted-foreground shrink-0">
-        <FormattedTimestamp timestamp={notification.created_at} short />
-      </div>
-    </div>
+      }
+      description={event ? t('zapped your note') : t('zapped you')}
+      isNew={isNew}
+    />
   )
 }