feat: improve style of others relay list

src/components/OthersRelayList/index.tsx

@@ -1,12 +1,12 @@
 import { useSecondaryPage } from '@/PageManager'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { useFetchRelayList } from '@/hooks'
+import { useFetchRelayInfo, useFetchRelayList } from '@/hooks'
 import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
 import { simplifyUrl } from '@/lib/url'
 import { TMailboxRelay } from '@/types'
-import { ListPlus, Telescope } from 'lucide-react'
+import { ListPlus } from 'lucide-react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
@@ -22,7 +22,7 @@ export default function OthersRelayList({ userId }: { userId: string }) {
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-4">
       {relayList.originalRelays.map((relay, index) => (
         <RelayItem key={`read-${relay.url}-${index}`} relay={relay} />
       ))}
@@ -33,26 +33,30 @@ export default function OthersRelayList({ userId }: { userId: string }) {
 function RelayItem({ relay }: { relay: TMailboxRelay }) {
   const { t } = useTranslation()
   const { push } = useSecondaryPage()
+  const { relayInfo } = useFetchRelayInfo(relay.url)
   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(toRelay(url))}
-      >
-        <RelayIcon url={url} />
-        <div className="truncate">{simplifyUrl(url)}</div>
+    <div
+      className="flex items-center gap-2 justify-between p-4 rounded-lg border clickable"
+      onClick={() => push(toRelay(url))}
+    >
+      <div className="flex-1 w-0 space-y-2">
+        <div className="flex items-center gap-2 w-full">
+          <RelayIcon url={url} />
+          <div className="truncate font-semibold text-lg">{simplifyUrl(url)}</div>
+        </div>
+        {!!relayInfo?.description && <div className="line-clamp-2">{relayInfo.description}</div>}
+        <div className="flex gap-2">
+          {['both', 'read'].includes(scope) && (
+            <Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
+          )}
+          {['both', 'write'].includes(scope) && (
+            <Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
+          )}
+        </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(toRelay(url))}>
-          <Telescope />
-        </Button>
+      <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
         <SaveRelayDropdownMenu urls={[url]}>
           <Button variant="ghost" size="icon">
             <ListPlus />

src/components/RelayInfo/index.tsx

@@ -39,14 +39,14 @@ export default function RelayInfo({ url }: { url: string }) {
             <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" />
+              <Username userId={relayInfo.pubkey} className="font-semibold" />
             </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">
+            <div className="flex gap-2 items-center font-semibold">
               <Mail />
               {relayInfo.contact}
             </div>
@@ -55,7 +55,7 @@ export default function RelayInfo({ url }: { url: string }) {
         {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">
+            <div className="flex gap-2 items-center font-semibold">
               <SquareCode />
               {formatSoftware(relayInfo.software)}
             </div>
@@ -64,7 +64,7 @@ export default function RelayInfo({ url }: { url: string }) {
         {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">
+            <div className="flex gap-2 items-center font-semibold">
               <GitBranch />
               {relayInfo.version}
             </div>

src/hooks/useFetchRelayList.tsx

@@ -3,7 +3,11 @@ import { TRelayList } from '@/types'
 import { useEffect, useState } from 'react'
 
 export function useFetchRelayList(pubkey?: string | null) {
-  const [relayList, setRelayList] = useState<TRelayList>({ write: [], read: [] })
+  const [relayList, setRelayList] = useState<TRelayList>({
+    write: [],
+    read: [],
+    originalRelays: []
+  })
   const [isFetching, setIsFetching] = useState(true)
 
   useEffect(() => {

src/pages/secondary/ProfilePage/index.tsx

@@ -51,10 +51,6 @@ 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) {
@@ -128,7 +124,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
               to={isSelf ? toRelaySettings('mailbox') : toOthersRelaySettings(pubkey)}
               className="flex gap-1 hover:underline w-fit"
             >
-              {relayCount}
+              {relayList.originalRelays.length}
               <div className="text-muted-foreground">{t('Relays')}</div>
             </SecondaryPageLink>
           </div>

src/pages/secondary/RelayPage/index.tsx

@@ -4,8 +4,8 @@ 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 { Check, Copy, ListPlus } from 'lucide-react'
+import { useMemo, useState } from 'react'
 import NotFoundPage from '../NotFoundPage'
 
 export default function RelayPage({ url, index }: { url?: string; index?: number }) {
@@ -20,13 +20,7 @@ export default function RelayPage({ url, index }: { url?: string; index?: number
     <SecondaryPageLayout
       index={index}
       title={title}
-      controls={
-        <SaveRelayDropdownMenu urls={[normalizedUrl]} asChild>
-          <Button variant="ghost" size="titlebar-icon">
-            <ListPlus />
-          </Button>
-        </SaveRelayDropdownMenu>
-      }
+      controls={<RelayPageControls url={normalizedUrl} />}
       displayScrollToTopButton
     >
       <RelayInfo url={normalizedUrl} />
@@ -34,3 +28,25 @@ export default function RelayPage({ url, index }: { url?: string; index?: number
     </SecondaryPageLayout>
   )
 }
+
+function RelayPageControls({ url }: { url: string }) {
+  const [copied, setCopied] = useState(false)
+  const handleCopy = () => {
+    navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <>
+      <Button variant="ghost" size="titlebar-icon" onClick={handleCopy}>
+        {copied ? <Check /> : <Copy />}
+      </Button>
+      <SaveRelayDropdownMenu urls={[url]} asChild>
+        <Button variant="ghost" size="titlebar-icon">
+          <ListPlus />
+        </Button>
+      </SaveRelayDropdownMenu>
+    </>
+  )
+}