feat: following's favoriate relays

src/components/FollowingFavoriteRelayList/index.tsx

@@ -0,0 +1,96 @@
+import { toRelay } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import { useNostr } from '@/providers/NostrProvider'
+import client from '@/services/client.service'
+import relayInfoService from '@/services/relay-info.service'
+import { TNip66RelayInfo } from '@/types'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import RelaySimpleInfo, { RelaySimpleInfoSkeleton } from '../RelaySimpleInfo'
+
+const SHOW_COUNT = 10
+
+export default function FollowingFavoriteRelayList() {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const { pubkey } = useNostr()
+  const [loading, setLoading] = useState(true)
+  const [relays, setRelays] = useState<(TNip66RelayInfo & { users: string[] })[]>([])
+  const [showCount, setShowCount] = useState(SHOW_COUNT)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setLoading(true)
+
+    const init = async () => {
+      if (!pubkey) return
+
+      const relayMap =
+        (await client.fetchFollowingFavoriteRelays(pubkey)) ?? new Map<string, Set<string>>()
+      const relayUrls = Array.from(relayMap.keys())
+      const relayInfos = await relayInfoService.getRelayInfos(relayUrls ?? [])
+      setRelays(
+        (relayInfos.filter(Boolean) as TNip66RelayInfo[])
+          .map((relayInfo) => {
+            const users = Array.from(relayMap.get(relayInfo.url) ?? [])
+            return {
+              ...relayInfo,
+              users
+            }
+          })
+          .sort((a, b) => b.users.length - a.users.length)
+      )
+    }
+    init().finally(() => {
+      setLoading(false)
+    })
+  }, [pubkey])
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '10px',
+      threshold: 1
+    }
+
+    const observerInstance = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && showCount < relays.length) {
+        setShowCount((prev) => prev + SHOW_COUNT)
+      }
+    }, options)
+
+    const currentBottomRef = bottomRef.current
+    if (currentBottomRef) {
+      observerInstance.observe(currentBottomRef)
+    }
+
+    return () => {
+      if (observerInstance && currentBottomRef) {
+        observerInstance.unobserve(currentBottomRef)
+      }
+    }
+  }, [showCount, relays])
+
+  return (
+    <div>
+      {relays.slice(0, showCount).map((relay) => (
+        <RelaySimpleInfo
+          key={relay.url}
+          relayInfo={relay}
+          className="clickable p-4 border-b"
+          onClick={(e) => {
+            e.stopPropagation()
+            push(toRelay(relay.url))
+          }}
+        />
+      ))}
+      {showCount < relays.length && <div ref={bottomRef} />}
+      {loading && <RelaySimpleInfoSkeleton />}
+      {!loading && (
+        <div className="text-center text-muted-foreground text-sm mt-2">
+          {relays.length === 0 ? t('no relays found') : t('no more relays')}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/RelayList/index.tsx

@@ -1,11 +1,10 @@
-import { Skeleton } from '@/components/ui/skeleton'
 import { toRelay } from '@/lib/link'
 import { useSecondaryPage } from '@/PageManager'
 import relayInfoService from '@/services/relay-info.service'
 import { TNip66RelayInfo } from '@/types'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import RelaySimpleInfo from '../RelaySimpleInfo'
+import RelaySimpleInfo, { RelaySimpleInfoSkeleton } from '../RelaySimpleInfo'
 import SearchInput from '../SearchInput'
 
 export default function RelayList() {
@@ -69,7 +68,7 @@ export default function RelayList() {
 
   return (
     <div>
-      <div className="px-4 py-2 sticky top-12 bg-background z-30">
+      <div className="px-4 py-2">
         <SearchInput placeholder={t('Search relays')} value={input} onChange={handleInputChange} />
       </div>
       {relays.slice(0, showCount).map((relay) => (
@@ -84,22 +83,7 @@ export default function RelayList() {
         />
       ))}
       {showCount < relays.length && <div ref={bottomRef} />}
-      {loading && (
-        <div className="p-4 space-y-2">
-          <div className="flex items-start justify-between gap-2 w-full">
-            <div className="flex flex-1 w-0 items-center gap-2">
-              <Skeleton className="h-9 w-9 rounded-full" />
-              <div className="flex-1 w-0 space-y-1">
-                <Skeleton className="w-40 h-5" />
-                <Skeleton className="w-20 h-4" />
-              </div>
-            </div>
-            <Skeleton className="w-5 h-5 rounded-lg" />
-          </div>
-          <Skeleton className="w-full h-4" />
-          <Skeleton className="w-2/3 h-4" />
-        </div>
-      )}
+      {loading && <RelaySimpleInfoSkeleton />}
       {!loading && relays.length === 0 && (
         <div className="text-center text-muted-foreground text-sm">{t('no relays found')}</div>
       )}

src/components/RelaySimpleInfo/index.tsx

@@ -1,9 +1,12 @@
+import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
 import { TNip66RelayInfo } from '@/types'
+import { HTMLProps } from 'react'
+import { useTranslation } from 'react-i18next'
 import RelayBadges from '../RelayBadges'
 import RelayIcon from '../RelayIcon'
 import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
-import { HTMLProps } from 'react'
+import { SimpleUserAvatar } from '../UserAvatar'
 
 export default function RelaySimpleInfo({
   relayInfo,
@@ -11,9 +14,11 @@ export default function RelaySimpleInfo({
   className,
   ...props
 }: HTMLProps<HTMLDivElement> & {
-  relayInfo?: TNip66RelayInfo
+  relayInfo?: TNip66RelayInfo & { users?: string[] }
   hideBadge?: boolean
 }) {
+  const { t } = useTranslation()
+
   return (
     <div className={cn('space-y-1', className)} {...props}>
       <div className="flex items-start justify-between gap-2 w-full">
@@ -30,6 +35,37 @@ export default function RelaySimpleInfo({
       </div>
       {!hideBadge && relayInfo && <RelayBadges relayInfo={relayInfo} />}
       {!!relayInfo?.description && <div className="line-clamp-4">{relayInfo.description}</div>}
+      {!!relayInfo?.users?.length && (
+        <div className="flex items-center gap-2">
+          <div className="text-muted-foreground">{t('Favorited by')} </div>
+          <div className="flex items-center gap-1">
+            {relayInfo.users.slice(0, 10).map((user) => (
+              <SimpleUserAvatar key={user} userId={user} size="xSmall" />
+            ))}
+            {relayInfo.users.length > 10 && (
+              <div className="text-muted-foreground text-xs rounded-full bg-muted w-5 h-5 flex items-center justify-center">
+                +{relayInfo.users.length - 10}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function RelaySimpleInfoSkeleton() {
+  return (
+    <div className="p-4 space-y-2">
+      <div className="flex items-center gap-2 w-full">
+        <Skeleton className="h-9 w-9 rounded-full" />
+        <div className="flex-1 w-0 space-y-1">
+          <Skeleton className="w-40 h-5" />
+          <Skeleton className="w-20 h-4" />
+        </div>
+      </div>
+      <Skeleton className="w-full h-4" />
+      <Skeleton className="w-2/3 h-4" />
     </div>
   )
 }