feat: seen on button

src/components/NoteCard/RepostNoteCard.tsx

@@ -21,6 +21,13 @@ export default function RepostNoteCard({
         return null
       }
       client.addEventToCache(targetEvent)
+      const targetSeenOn = client.getSeenEventRelays(targetEvent.id)
+      if (targetSeenOn.length === 0) {
+        const seenOn = client.getSeenEventRelays(event.id)
+        seenOn.forEach((relay) => {
+          client.trackEventSeenOn(targetEvent.id, relay)
+        })
+      }
     } catch {
       return null
     }

src/components/NoteStats/SeenOnButton.tsx

@@ -0,0 +1,51 @@
+import { useSecondaryPage } from '@/PageManager'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { toRelay } from '@/lib/link'
+import { simplifyUrl } from '@/lib/url'
+import client from '@/services/client.service'
+import { Server } from 'lucide-react'
+import { Event } from 'nostr-tools'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function SeenOnButton({ event }: { event: Event }) {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const [relays, setRelays] = useState<string[]>([])
+
+  useEffect(() => {
+    const seenOn = client.getSeenEventRelayUrls(event.id)
+    setRelays(seenOn)
+  }, [])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary"
+          title={t('Seen on')}
+          disabled={relays.length === 0}
+        >
+          <Server size={16} />
+          {relays.length > 0 && <div className="text-sm">{relays.length}</div>}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent collisionPadding={8}>
+        <DropdownMenuLabel>Seen on</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {relays.map((relay) => (
+          <DropdownMenuItem key={relay} onClick={() => push(toRelay(relay))}>
+            {simplifyUrl(relay)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/NoteStats/index.tsx

@@ -4,6 +4,7 @@ import LikeButton from './LikeButton'
 import NoteOptions from './NoteOptions'
 import ReplyButton from './ReplyButton'
 import RepostButton from './RepostButton'
+import SeenOnButton from './SeenOnButton'
 
 export default function NoteStats({
   event,
@@ -23,7 +24,10 @@ export default function NoteStats({
         <RepostButton event={event} canFetch={fetchIfNotExisting} />
         <LikeButton event={event} canFetch={fetchIfNotExisting} />
       </div>
-      <NoteOptions event={event} />
+      <div className="flex gap-5 h-4 items-center" onClick={(e) => e.stopPropagation()}>
+        <SeenOnButton event={event} />
+        <NoteOptions event={event} />
+      </div>
     </div>
   )
 }

src/services/client.service.ts

@@ -204,6 +204,9 @@ class ClientService extends EventTarget {
       function startSub() {
         startedCount++
         return relay.subscribe([since ? { ...filter, since } : filter], {
+          receivedEvent: (relay, id) => {
+            that.trackEventSeenOn(id, relay)
+          },
           alreadyHaveEvent: (id: string) => {
             const have = _knownIds.has(id)
             if (have) {
@@ -214,7 +217,6 @@ class ClientService extends EventTarget {
           },
           onevent: (evt: NEvent) => {
             that.eventDataLoader.prime(evt.id, Promise.resolve(evt))
-            that.trackEventSeenOn(evt.id, relay)
             // not eosed yet, push to events
             if (eosedCount < startedCount) {
               return events.push(evt)
@@ -549,8 +551,21 @@ class ClientService extends EventTarget {
     }
   }
 
+  getSeenEventRelays(eventId: string) {
+    return Array.from(this.pool.seenOn.get(eventId)?.values() || [])
+  }
+
   getSeenEventRelayUrls(eventId: string) {
-    return Array.from(this.pool.seenOn.get(eventId)?.values() || []).map((relay) => relay.url)
+    return this.getSeenEventRelays(eventId).map((relay) => relay.url)
+  }
+
+  trackEventSeenOn(eventId: string, relay: AbstractRelay) {
+    let set = this.pool.seenOn.get(eventId)
+    if (!set) {
+      set = new Set()
+      this.pool.seenOn.set(eventId, set)
+    }
+    set.add(relay)
   }
 
   private async fetchEventById(relayUrls: string[], id: string): Promise<NEvent | undefined> {
@@ -756,15 +771,6 @@ class ClientService extends EventTarget {
 
     return followListEvents.sort((a, b) => b.created_at - a.created_at)[0]
   }
-
-  private trackEventSeenOn(eventId: string, relay: AbstractRelay) {
-    let set = this.pool.seenOn.get(eventId)
-    if (!set) {
-      set = new Set()
-      this.pool.seenOn.set(eventId, set)
-    }
-    set.add(relay)
-  }
 }
 
 const instance = ClientService.getInstance()