feat: distinguish between mention and reply notifications

src/components/NotificationList/NotificationItem/MentionNotification.tsx

@@ -1,13 +1,16 @@
+import { getEmbeddedPubkeys } from '@/lib/event'
 import { toNote } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
-import { MessageCircle } from 'lucide-react'
+import { useNostr } from '@/providers/NostrProvider'
+import { AtSign, MessageCircle } from 'lucide-react'
 import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
 import ContentPreview from '../../ContentPreview'
 import { FormattedTimestamp } from '../../FormattedTimestamp'
 import UserAvatar from '../../UserAvatar'
 
-export function CommentNotification({
+export function MentionNotification({
   notification,
   isNew = false
 }: {
@@ -15,6 +18,12 @@ export function CommentNotification({
   isNew?: boolean
 }) {
   const { push } = useSecondaryPage()
+  const { pubkey } = useNostr()
+  const isMention = useMemo(() => {
+    if (!pubkey) return false
+    const mentions = getEmbeddedPubkeys(notification)
+    return mentions.includes(pubkey)
+  }, [pubkey, notification])
 
   return (
     <div
@@ -22,7 +31,11 @@ export function CommentNotification({
       onClick={() => push(toNote(notification))}
     >
       <UserAvatar userId={notification.pubkey} size="small" />
-      <MessageCircle size={24} className="text-blue-400" />
+      {isMention ? (
+        <AtSign size={24} className="text-pink-400" />
+      ) : (
+        <MessageCircle size={24} className="text-blue-400" />
+      )}
       <ContentPreview
         className={cn('truncate flex-1 w-0', isNew ? 'font-semibold' : 'text-muted-foreground')}
         event={notification}

src/components/NotificationList/NotificationItem/ReplyNotification.tsx

@@ -1,34 +0,0 @@
-import { toNote } from '@/lib/link'
-import { cn } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
-import { MessageCircle } from 'lucide-react'
-import { Event } from 'nostr-tools'
-import ContentPreview from '../../ContentPreview'
-import { FormattedTimestamp } from '../../FormattedTimestamp'
-import UserAvatar from '../../UserAvatar'
-
-export function ReplyNotification({
-  notification,
-  isNew = false
-}: {
-  notification: Event
-  isNew?: boolean
-}) {
-  const { push } = useSecondaryPage()
-  return (
-    <div
-      className="flex gap-2 items-center cursor-pointer py-2"
-      onClick={() => push(toNote(notification))}
-    >
-      <UserAvatar userId={notification.pubkey} size="small" />
-      <MessageCircle size={24} className="text-blue-400" />
-      <ContentPreview
-        className={cn('truncate flex-1 w-0', isNew ? 'font-semibold' : 'text-muted-foreground')}
-        event={notification}
-      />
-      <div className="text-muted-foreground">
-        <FormattedTimestamp timestamp={notification.created_at} short />
-      </div>
-    </div>
-  )
-}

src/components/NotificationList/NotificationItem/index.tsx

@@ -1,10 +1,9 @@
 import { ExtendedKind } from '@/constants'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { Event, kinds } from 'nostr-tools'
-import { CommentNotification } from './CommentNotification'
+import { MentionNotification } from './MentionNotification'
 import { PollResponseNotification } from './PollResponseNotification'
 import { ReactionNotification } from './ReactionNotification'
-import { ReplyNotification } from './ReplyNotification'
 import { RepostNotification } from './RepostNotification'
 import { ZapNotification } from './ZapNotification'
 
@@ -22,8 +21,13 @@ export function NotificationItem({
   if (notification.kind === kinds.Reaction) {
     return <ReactionNotification notification={notification} isNew={isNew} />
   }
-  if (notification.kind === kinds.ShortTextNote) {
-    return <ReplyNotification notification={notification} isNew={isNew} />
+  if (
+    notification.kind === kinds.ShortTextNote ||
+    notification.kind === ExtendedKind.COMMENT ||
+    notification.kind === ExtendedKind.VOICE_COMMENT ||
+    notification.kind === ExtendedKind.POLL
+  ) {
+    return <MentionNotification notification={notification} isNew={isNew} />
   }
   if (notification.kind === kinds.Repost) {
     return <RepostNotification notification={notification} isNew={isNew} />
@@ -31,12 +35,6 @@ export function NotificationItem({
   if (notification.kind === kinds.Zap) {
     return <ZapNotification notification={notification} isNew={isNew} />
   }
-  if (
-    notification.kind === ExtendedKind.COMMENT ||
-    notification.kind === ExtendedKind.VOICE_COMMENT
-  ) {
-    return <CommentNotification notification={notification} isNew={isNew} />
-  }
   if (notification.kind === ExtendedKind.POLL_RESPONSE) {
     return <PollResponseNotification notification={notification} isNew={isNew} />
   }

src/components/NotificationList/index.tsx

@@ -39,7 +39,12 @@ const NotificationList = forwardRef((_, ref) => {
   const filterKinds = useMemo(() => {
     switch (notificationType) {
       case 'mentions':
-        return [kinds.ShortTextNote, ExtendedKind.COMMENT, ExtendedKind.VOICE_COMMENT]
+        return [
+          kinds.ShortTextNote,
+          ExtendedKind.COMMENT,
+          ExtendedKind.VOICE_COMMENT,
+          ExtendedKind.POLL
+        ]
       case 'reactions':
         return [kinds.Reaction, kinds.Repost, ExtendedKind.POLL_RESPONSE]
       case 'zaps':
@@ -52,7 +57,8 @@ const NotificationList = forwardRef((_, ref) => {
           kinds.Zap,
           ExtendedKind.COMMENT,
           ExtendedKind.POLL_RESPONSE,
-          ExtendedKind.VOICE_COMMENT
+          ExtendedKind.VOICE_COMMENT,
+          ExtendedKind.POLL
         ]
     }
   }, [notificationType])