feat: seen on button

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>
   )
 }