feat: relay info

src/components/Embedded/EmbeddedWebsocketUrl.tsx

@@ -1,5 +1,5 @@
 import { useSecondaryPage } from '@/PageManager'
-import { toNoteList } from '@/lib/link'
+import { toRelay } from '@/lib/link'
 import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedWebsocketUrl({ url }: { url: string }) {
@@ -9,7 +9,7 @@ export function EmbeddedWebsocketUrl({ url }: { url: string }) {
       className="cursor-pointer px-1 text-highlight hover:bg-highlight/20"
       onClick={(e) => {
         e.stopPropagation()
-        push(toNoteList({ relay: url }))
+        push(toRelay(url))
       }}
     >
       [ {url} ]

src/components/MailboxSetting/MailboxRelay.tsx

@@ -1,3 +1,4 @@
+import { useSecondaryPage } from '@/PageManager'
 import {
   Select,
   SelectContent,
@@ -5,6 +6,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
+import { toRelay } from '@/lib/link'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
 import { CircleX } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -20,10 +22,14 @@ export default function MailboxRelay({
   removeMailboxRelay: (url: string) => void
 }) {
   const { t } = useTranslation()
+  const { push } = useSecondaryPage()
 
   return (
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-2 flex-1 w-0">
+      <div
+        className="flex items-center gap-2 flex-1 w-0 cursor-pointer"
+        onClick={() => push(toRelay(mailboxRelay.url))}
+      >
         <RelayIcon url={mailboxRelay.url} />
         <div className="truncate">{mailboxRelay.url}</div>
       </div>

src/components/OthersRelayList/index.tsx

@@ -1,7 +1,8 @@
 import { useSecondaryPage } from '@/PageManager'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { useFetchRelayList } from '@/hooks/useFetchRelayList'
-import { toNoteList } from '@/lib/link'
+import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
 import { relayListToMailboxRelay } from '@/lib/relay'
 import { simplifyUrl } from '@/lib/url'
@@ -11,7 +12,6 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
 import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
-import { Badge } from '../ui/badge'
 
 export default function OthersRelayList({ userId }: { userId: string }) {
   const { t } = useTranslation()
@@ -41,7 +41,7 @@ function RelayItem({ relay }: { relay: TMailboxRelay }) {
     <div className="flex items-center gap-2 justify-between">
       <div
         className="flex items-center gap-2 cursor-pointer flex-1 w-0"
-        onClick={() => push(toNoteList({ relay: url }))}
+        onClick={() => push(toRelay(url))}
       >
         <RelayIcon url={url} />
         <div className="truncate">{simplifyUrl(url)}</div>
@@ -52,7 +52,7 @@ function RelayItem({ relay }: { relay: TMailboxRelay }) {
         ) : scope === 'write' ? (
           <Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
         ) : null}
-        <Button variant="ghost" size="icon" onClick={() => push(toNoteList({ relay: url }))}>
+        <Button variant="ghost" size="icon" onClick={() => push(toRelay(url))}>
           <Telescope />
         </Button>
         <SaveRelayDropdownMenu urls={[url]}>

src/components/RelayInfo/index.tsx

@@ -0,0 +1,95 @@
+import { Badge } from '@/components/ui/badge'
+import { useFetchRelayInfos } from '@/hooks'
+import { TRelayInfo } from '@/types'
+import { GitBranch, Mail, SquareCode } from 'lucide-react'
+import RelayIcon from '../RelayIcon'
+import UserAvatar from '../UserAvatar'
+import Username from '../Username'
+
+export default function RelayInfo({ url }: { url: string }) {
+  const {
+    relayInfos: [relayInfo],
+    isFetching
+  } = useFetchRelayInfos([url])
+  if (isFetching || !relayInfo) {
+    return null
+  }
+
+  return (
+    <div className="px-4 space-y-4 mb-2">
+      <div className="space-y-2">
+        <div className="flex gap-2 items-center">
+          <RelayIcon url={url} />
+          {relayInfo.name && <div className="text-xl font-semibold">{relayInfo.name}</div>}
+        </div>
+        <RelayBadges relayInfo={relayInfo} />
+        {!!relayInfo.tags?.length &&
+          relayInfo.tags.map((tag) => <Badge variant="secondary">{tag}</Badge>)}
+        {relayInfo.description && (
+          <div className="text-wrap break-words whitespace-pre-wrap mt-2">
+            {relayInfo.description}
+          </div>
+        )}
+      </div>
+      <div className="flex flex-wrap gap-4">
+        {relayInfo.pubkey && (
+          <div className="space-y-2 flex-1">
+            <div className="text-sm font-semibold text-muted-foreground">Operator</div>
+            <div className="flex gap-2 items-center">
+              <UserAvatar userId={relayInfo.pubkey} size="small" />
+              <Username userId={relayInfo.pubkey} className="font-semibold whitespace-nowrap" />
+            </div>
+          </div>
+        )}
+        {relayInfo.contact && (
+          <div className="space-y-2 flex-1">
+            <div className="text-sm font-semibold text-muted-foreground">Contact</div>
+            <div className="flex gap-2 items-center font-semibold whitespace-nowrap">
+              <Mail />
+              {relayInfo.contact}
+            </div>
+          </div>
+        )}
+        {relayInfo.software && (
+          <div className="space-y-2 flex-1">
+            <div className="text-sm font-semibold text-muted-foreground">Software</div>
+            <div className="flex gap-2 items-center font-semibold whitespace-nowrap">
+              <SquareCode />
+              {formatSoftware(relayInfo.software)}
+            </div>
+          </div>
+        )}
+        {relayInfo.version && (
+          <div className="space-y-2 flex-1">
+            <div className="text-sm font-semibold text-muted-foreground">Version</div>
+            <div className="flex gap-2 items-center font-semibold whitespace-nowrap">
+              <GitBranch />
+              {relayInfo.version}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function formatSoftware(software: string) {
+  const parts = software.split('/')
+  return parts[parts.length - 1]
+}
+
+function RelayBadges({ relayInfo }: { relayInfo: TRelayInfo }) {
+  return (
+    <div className="flex gap-2">
+      {relayInfo.supported_nips?.includes(42) && (
+        <Badge className="bg-green-400 hover:bg-green-400/80">Auth</Badge>
+      )}
+      {relayInfo.supported_nips?.includes(50) && (
+        <Badge className="bg-pink-400 hover:bg-pink-400/80">Search</Badge>
+      )}
+      {relayInfo.limitation?.payment_required && (
+        <Badge className="bg-orange-400 hover:bg-orange-400/80">Payment</Badge>
+      )}
+    </div>
+  )
+}