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

src/lib/link.ts

@@ -6,20 +6,11 @@ export const toNote = (eventOrId: Pick<Event, 'id' | 'pubkey'> | string) => {
   const nevent = nip19.neventEncode({ id: eventOrId.id, author: eventOrId.pubkey })
   return `/notes/${nevent}`
 }
-export const toNoteList = ({
-  hashtag,
-  search,
-  relay
-}: {
-  hashtag?: string
-  search?: string
-  relay?: string
-}) => {
+export const toNoteList = ({ hashtag, search }: { hashtag?: string; search?: string }) => {
   const path = '/notes'
   const query = new URLSearchParams()
   if (hashtag) query.set('t', hashtag.toLowerCase())
   if (search) query.set('s', search)
-  if (relay) query.set('relay', relay)
   return `${path}?${query.toString()}`
 }
 export const toProfile = (pubkeyOrNpub: string) => {
@@ -44,6 +35,7 @@ export const toOthersRelaySettings = (pubkey: string) => {
 export const toRelaySettings = () => '/relay-settings'
 export const toSettings = () => '/settings'
 export const toProfileEditor = () => '/profile-editor'
+export const toRelay = (url: string) => `/relays/${encodeURIComponent(url)}`
 
 export const toNoStrudelProfile = (id: string) => `https://nostrudel.ninja/#/u/${id}`
 export const toNoStrudelNote = (id: string) => `https://nostrudel.ninja/#/n/${id}`

src/pages/secondary/NoteListPage/index.tsx

@@ -1,12 +1,8 @@
 import NoteList from '@/components/NoteList'
-import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
-import { Button } from '@/components/ui/button'
 import { SEARCHABLE_RELAY_URLS } from '@/constants'
 import { useFetchRelayInfos, useSearchParams } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
 import { useFeed } from '@/providers/FeedProvider'
-import { ListPlus } from 'lucide-react'
 import { Filter } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,17 +12,14 @@ export default function NoteListPage({ index }: { index?: number }) {
   const { relayUrls } = useFeed()
   const { searchableRelayUrls } = useFetchRelayInfos(relayUrls)
   const { searchParams } = useSearchParams()
-  const relayUrlsString = JSON.stringify(relayUrls)
   const {
     title = '',
     filter,
-    urls,
-    type
+    urls
   } = useMemo<{
     title?: string
     filter?: Filter
     urls: string[]
-    type?: 'search' | 'hashtag' | 'relay'
   }>(() => {
     const hashtag = searchParams.get('t')
     if (hashtag) {
@@ -46,28 +39,11 @@ export default function NoteListPage({ index }: { index?: number }) {
         type: 'search'
       }
     }
-    const relayUrl = searchParams.get('relay')
-    if (relayUrl && isWebsocketUrl(relayUrl)) {
-      return { title: simplifyUrl(relayUrl), urls: [relayUrl], type: 'relay' }
-    }
     return { urls: relayUrls }
-  }, [searchParams, relayUrlsString])
+  }, [searchParams, JSON.stringify(relayUrls)])
 
   return (
-    <SecondaryPageLayout
-      index={index}
-      title={title}
-      controls={
-        type === 'relay' && (
-          <SaveRelayDropdownMenu urls={urls} asChild>
-            <Button variant="ghost" size="titlebar-icon">
-              <ListPlus />
-            </Button>
-          </SaveRelayDropdownMenu>
-        )
-      }
-      displayScrollToTopButton
-    >
+    <SecondaryPageLayout index={index} title={title} displayScrollToTopButton>
       <NoteList key={title} filter={filter} relayUrls={urls} />
     </SecondaryPageLayout>
   )

src/pages/secondary/RelayPage/index.tsx

@@ -0,0 +1,36 @@
+import NoteList from '@/components/NoteList'
+import RelayInfo from '@/components/RelayInfo'
+import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
+import { Button } from '@/components/ui/button'
+import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { normalizeUrl, simplifyUrl } from '@/lib/url'
+import { ListPlus } from 'lucide-react'
+import { useMemo } from 'react'
+import NotFoundPage from '../NotFoundPage'
+
+export default function RelayPage({ url, index }: { url?: string; index?: number }) {
+  const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
+  const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
+
+  if (!normalizedUrl) {
+    return <NotFoundPage />
+  }
+
+  return (
+    <SecondaryPageLayout
+      index={index}
+      title={title}
+      controls={
+        <SaveRelayDropdownMenu urls={[normalizedUrl]} asChild>
+          <Button variant="ghost" size="titlebar-icon">
+            <ListPlus />
+          </Button>
+        </SaveRelayDropdownMenu>
+      }
+      displayScrollToTopButton
+    >
+      <RelayInfo url={normalizedUrl} />
+      <NoteList relayUrls={[normalizedUrl]} />
+    </SecondaryPageLayout>
+  )
+}

src/routes.tsx

@@ -8,6 +8,7 @@ import OthersRelaySettingsPage from './pages/secondary/OthersRelaySettingsPage'
 import ProfileEditorPage from './pages/secondary/ProfileEditorPage'
 import ProfileListPage from './pages/secondary/ProfileListPage'
 import ProfilePage from './pages/secondary/ProfilePage'
+import RelayPage from './pages/secondary/RelayPage'
 import RelaySettingsPage from './pages/secondary/RelaySettingsPage'
 import SettingsPage from './pages/secondary/SettingsPage'
 
@@ -21,7 +22,8 @@ const ROUTES = [
   { path: '/users/:id/relays', element: <OthersRelaySettingsPage /> },
   { path: '/relay-settings', element: <RelaySettingsPage /> },
   { path: '/settings', element: <SettingsPage /> },
-  { path: '/profile-editor', element: <ProfileEditorPage /> }
+  { path: '/profile-editor', element: <ProfileEditorPage /> },
+  { path: '/relays/:url', element: <RelayPage /> }
 ]
 
 export const routes = ROUTES.map(({ path, element }) => ({

src/types.ts

@@ -17,8 +17,19 @@ export type TRelayList = {
 }
 
 export type TRelayInfo = {
+  name?: string
+  description?: string
+  icon?: string
+  pubkey?: string
+  contact?: string
   supported_nips?: number[]
   software?: string
+  version?: string
+  tags?: string[]
+  limitation?: {
+    auth_required?: boolean
+    payment_required?: boolean
+  }
 }
 
 export type TWebMetadata = {