feat: others relays

src/components/MailboxSetting/MailboxRelay.tsx

@@ -1,4 +1,3 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   Select,
   SelectContent,
@@ -7,9 +6,9 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
-import { CircleX, Server } from 'lucide-react'
+import { CircleX } from 'lucide-react'
-import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import RelayIcon from '../RelayIcon'
 
 export default function MailboxRelay({
   mailboxRelay,
@@ -21,20 +20,11 @@ export default function MailboxRelay({
   removeMailboxRelay: (url: string) => void
 }) {
   const { t } = useTranslation()
-  const relayIcon = useMemo(() => {
-    const url = new URL(mailboxRelay.url)
-    return `${url.protocol === 'wss:' ? 'https:' : 'http:'}//${url.host}/favicon.ico`
-  }, [mailboxRelay.url])
 
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2 flex-1 w-0">
-        <Avatar className="w-6 h-6">
+        <RelayIcon url={mailboxRelay.url} />
-          <AvatarImage src={relayIcon} />
-          <AvatarFallback>
-            <Server size={14} />
-          </AvatarFallback>
-        </Avatar>
         <div className="truncate">{mailboxRelay.url}</div>
       </div>
       <div className="flex items-center gap-4">

src/components/MailboxSetting/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button'
+import { relayListToMailboxRelay } from '@/lib/relay'
 import { normalizeUrl } from '@/lib/url'
 import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
@@ -17,16 +18,7 @@ export default function MailboxSetting() {
   useEffect(() => {
     if (!relayList) return
 
-    const mailboxRelays: TMailboxRelay[] = relayList.read.map((url) => ({ url, scope: 'read' }))
+    setRelays(relayListToMailboxRelay(relayList))
-    relayList.write.forEach((url) => {
-      const item = mailboxRelays.find((r) => r.url === url)
-      if (item) {
-        item.scope = 'both'
-      } else {
-        mailboxRelays.push({ url, scope: 'write' })
-      }
-    })
-    setRelays(mailboxRelays)
   }, [relayList])
 
   if (!pubkey) {

src/components/OthersRelayList/index.tsx

@@ -0,0 +1,66 @@
+import { useSecondaryPage } from '@/PageManager'
+import { Button } from '@/components/ui/button'
+import { useFetchRelayList } from '@/hooks/useFetchRelayList'
+import { toNoteList } from '@/lib/link'
+import { userIdToPubkey } from '@/lib/pubkey'
+import { relayListToMailboxRelay } from '@/lib/relay'
+import { simplifyUrl } from '@/lib/url'
+import { TMailboxRelay } from '@/types'
+import { ListPlus, Telescope } from 'lucide-react'
+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()
+  const pubkey = useMemo(() => userIdToPubkey(userId), [userId])
+  const { relayList, isFetching } = useFetchRelayList(pubkey)
+  const mailboxRelays = useMemo(() => relayListToMailboxRelay(relayList), [relayList])
+
+  if (isFetching) {
+    return <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
+  }
+
+  return (
+    <div className="space-y-2">
+      {mailboxRelays.map((relay, index) => (
+        <RelayItem key={`read-${relay.url}-${index}`} relay={relay} />
+      ))}
+    </div>
+  )
+}
+
+function RelayItem({ relay }: { relay: TMailboxRelay }) {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const { url, scope } = relay
+
+  return (
+    <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 }))}
+      >
+        <RelayIcon url={url} />
+        <div className="truncate">{simplifyUrl(url)}</div>
+      </div>
+      <div className="flex items-center gap-1 shrink-0">
+        {scope === 'read' ? (
+          <Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
+        ) : 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 }))}>
+          <Telescope />
+        </Button>
+        <SaveRelayDropdownMenu urls={[url]}>
+          <Button variant="ghost" size="icon">
+            <ListPlus />
+          </Button>
+        </SaveRelayDropdownMenu>
+      </div>
+    </div>
+  )
+}

src/components/RelayIcon/index.tsx

@@ -0,0 +1,27 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Server } from 'lucide-react'
+import { useMemo } from 'react'
+
+export default function RelayIcon({
+  url,
+  className = 'w-6 h-6',
+  iconSize = 14
+}: {
+  url: string
+  className?: string
+  iconSize?: number
+}) {
+  const icon = useMemo(() => {
+    const u = new URL(url)
+    return `${u.protocol === 'wss:' ? 'https:' : 'http:'}//${u.host}/favicon.ico`
+  }, [url])
+
+  return (
+    <Avatar className={className}>
+      <AvatarImage src={icon} />
+      <AvatarFallback>
+        <Server size={iconSize} />
+      </AvatarFallback>
+    </Avatar>
+  )
+}

src/i18n/en.ts

@@ -48,6 +48,7 @@ export default {
     'switch to system theme': 'switch to system theme',
     Note: 'Note',
     "username's following": "{{username}}'s following",
+    "username's used relays": "{{username}}'s used relays",
     Login: 'Login',
     'Follows you': 'Follows you',
     'Relay Settings': 'Relay Settings',

src/i18n/zh.ts

@@ -48,6 +48,7 @@ export default {
     'switch to system theme': '切换到系统主题',
     Note: '笔记',
     "username's following": '{{username}} 的关注',
+    "username's used relays": '{{username}} 使用的服务器',
     Login: '登录',
     'Follows you': '关注了你',
     'Relay Settings': '服务器设置',

src/lib/event.ts

@@ -90,10 +90,10 @@ export function getRelayListFromRelayListEvent(event?: Event) {
 
     const normalizedUrl = normalizeUrl(url)
     switch (type) {
-      case 'w':
+      case 'write':
         relayList.write.push(normalizedUrl)
         break
-      case 'r':
+      case 'read':
         relayList.read.push(normalizedUrl)
         break
       default:
@@ -102,8 +102,8 @@ export function getRelayListFromRelayListEvent(event?: Event) {
     }
   })
   return {
-    write: relayList.write.length ? relayList.write.slice(0, 10) : BIG_RELAY_URLS,
+    write: relayList.write.length ? relayList.write : BIG_RELAY_URLS,
-    read: relayList.read.length ? relayList.read.slice(0, 10) : BIG_RELAY_URLS
+    read: relayList.read.length ? relayList.read : BIG_RELAY_URLS
   }
 }
 

src/lib/link.ts

@@ -37,6 +37,10 @@ export const toFollowingList = (pubkey: string) => {
   const npub = nip19.npubEncode(pubkey)
   return `/users/${npub}/following`
 }
+export const toOthersRelaySettings = (pubkey: string) => {
+  const npub = nip19.npubEncode(pubkey)
+  return `/users/${npub}/relays`
+}
 export const toRelaySettings = () => '/relay-settings'
 export const toSettings = () => '/settings'
 export const toProfileEditor = () => '/profile-editor'

src/lib/relay.ts

@@ -1,4 +1,4 @@
-import { TRelayInfo } from '@/types'
+import { TMailboxRelay, TRelayInfo, TRelayList } from '@/types'
 
 export function checkAlgoRelay(relayInfo: TRelayInfo | undefined) {
   return relayInfo?.software === 'https://github.com/bitvora/algo-relay' // hardcode for now
@@ -7,3 +7,16 @@ export function checkAlgoRelay(relayInfo: TRelayInfo | undefined) {
 export function checkSearchRelay(relayInfo: TRelayInfo | undefined) {
   return relayInfo?.supported_nips?.includes(50)
 }
+
+export function relayListToMailboxRelay(relayList: TRelayList): TMailboxRelay[] {
+  const mailboxRelays: TMailboxRelay[] = relayList.read.map((url) => ({ url, scope: 'read' }))
+  relayList.write.forEach((url) => {
+    const item = mailboxRelays.find((r) => r.url === url)
+    if (item) {
+      item.scope = 'both'
+    } else {
+      mailboxRelays.push({ url, scope: 'write' })
+    }
+  })
+  return mailboxRelays
+}

src/pages/secondary/OthersRelaySettingsPage/index.tsx

@@ -0,0 +1,24 @@
+import OthersRelayList from '@/components/OthersRelayList'
+import { useFetchProfile } from '@/hooks'
+import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { useTranslation } from 'react-i18next'
+
+export default function RelaySettingsPage({ id, index }: { id?: string; index?: number }) {
+  const { t } = useTranslation()
+  const { profile } = useFetchProfile(id)
+
+  if (!id || !profile) {
+    return null
+  }
+
+  return (
+    <SecondaryPageLayout
+      index={index}
+      title={t("username's used relays", { username: profile.username })}
+    >
+      <div className="px-4">
+        <OthersRelayList userId={id} />
+      </div>
+    </SecondaryPageLayout>
+  )
+}

src/pages/secondary/ProfilePage/index.tsx

@@ -11,7 +11,12 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchFollowings, useFetchProfile } from '@/hooks'
 import { useFetchRelayList } from '@/hooks/useFetchRelayList'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { toFollowingList, toProfileEditor } from '@/lib/link'
+import {
+  toFollowingList,
+  toOthersRelaySettings,
+  toProfileEditor,
+  toRelaySettings
+} from '@/lib/link'
 import { generateImageByPubkey } from '@/lib/pubkey'
 import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
 import { useFeed } from '@/providers/FeedProvider'
@@ -46,6 +51,10 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
     () => (profile?.pubkey ? generateImageByPubkey(profile?.pubkey) : ''),
     [profile]
   )
+  const relayCount = useMemo(
+    () => new Set(relayList.write.concat(relayList.read)).size,
+    [relayList]
+  )
   const isSelf = accountPubkey === profile?.pubkey
 
   if (!profile && isFetching) {
@@ -107,13 +116,22 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
             <QrCodePopover pubkey={pubkey} />
           </div>
           <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
+          <div className="flex gap-4 items-center mt-2 text-sm">
             <SecondaryPageLink
               to={toFollowingList(pubkey)}
-            className="mt-2 flex gap-1 hover:underline text-sm w-fit"
+              className="flex gap-1 hover:underline w-fit"
             >
               {isSelf ? selfFollowings.length : followings.length}
               <div className="text-muted-foreground">{t('Following')}</div>
             </SecondaryPageLink>
+            <SecondaryPageLink
+              to={isSelf ? toRelaySettings() : toOthersRelaySettings(pubkey)}
+              className="flex gap-1 hover:underline w-fit"
+            >
+              {relayCount}
+              <div className="text-muted-foreground">{t('Relays')}</div>
+            </SecondaryPageLink>
+          </div>
         </div>
       </div>
       {!isFetchingRelayInfo && (

src/routes.tsx

@@ -4,6 +4,7 @@ import FollowingListPage from './pages/secondary/FollowingListPage'
 import HomePage from './pages/secondary/HomePage'
 import NoteListPage from './pages/secondary/NoteListPage'
 import NotePage from './pages/secondary/NotePage'
+import OthersRelaySettingsPage from './pages/secondary/OthersRelaySettingsPage'
 import ProfileEditorPage from './pages/secondary/ProfileEditorPage'
 import ProfileListPage from './pages/secondary/ProfileListPage'
 import ProfilePage from './pages/secondary/ProfilePage'
@@ -17,6 +18,7 @@ const ROUTES = [
   { path: '/users', element: <ProfileListPage /> },
   { path: '/users/:id', element: <ProfilePage /> },
   { path: '/users/:id/following', element: <FollowingListPage /> },
+  { path: '/users/:id/relays', element: <OthersRelaySettingsPage /> },
   { path: '/relay-settings', element: <RelaySettingsPage /> },
   { path: '/settings', element: <SettingsPage /> },
   { path: '/profile-editor', element: <ProfileEditorPage /> }