feat: explore

src/components/Explore/index.tsx

@@ -0,0 +1,85 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import { useFetchRelayInfo } from '@/hooks'
+import { toRelay } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import relayInfoService from '@/services/relay-info.service'
+import { TAwesomeRelayCollection } from '@/types'
+import { useEffect, useState } from 'react'
+import RelaySimpleInfo, { RelaySimpleInfoSkeleton } from '../RelaySimpleInfo'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
+import { cn } from '@/lib/utils'
+
+export default function Explore() {
+  const [collections, setCollections] = useState<TAwesomeRelayCollection[] | null>(null)
+
+  useEffect(() => {
+    relayInfoService.getAwesomeRelayCollections().then(setCollections)
+  }, [])
+
+  if (!collections) {
+    return (
+      <div>
+        <div className="p-4 max-md:border-b">
+          <Skeleton className="h-6 w-20" />
+        </div>
+        <div className="grid md:px-4 md:grid-cols-2 md:gap-2">
+          <RelaySimpleInfoSkeleton className="h-auto px-4 py-3 md:rounded-lg md:border" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {collections.map((collection) => (
+        <RelayCollection key={collection.id} collection={collection} />
+      ))}
+    </div>
+  )
+}
+
+function RelayCollection({ collection }: { collection: TAwesomeRelayCollection }) {
+  const { deepBrowsing } = useDeepBrowsing()
+  return (
+    <div>
+      <div
+        className={cn(
+          'sticky bg-background z-20 px-4 py-3 text-2xl font-semibold max-md:border-b',
+          deepBrowsing ? 'top-12' : 'top-24'
+        )}
+      >
+        {collection.name}
+      </div>
+      <div className="grid md:px-4 md:grid-cols-2 md:gap-3">
+        {collection.relays.map((url) => (
+          <RelayItem key={url} url={url} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RelayItem({ url }: { url: string }) {
+  const { push } = useSecondaryPage()
+  const { relayInfo, isFetching } = useFetchRelayInfo(url)
+
+  if (isFetching) {
+    return <RelaySimpleInfoSkeleton className="h-auto px-4 py-3 border-b md:rounded-lg md:border" />
+  }
+
+  if (!relayInfo) {
+    return null
+  }
+
+  return (
+    <RelaySimpleInfo
+      key={relayInfo.url}
+      className="clickable h-auto px-4 py-3 border-b md:rounded-lg md:border"
+      relayInfo={relayInfo}
+      onClick={(e) => {
+        e.stopPropagation()
+        push(toRelay(relayInfo.url))
+      }}
+    />
+  )
+}

src/components/FollowingFavoriteRelayList/index.tsx

@@ -62,7 +62,7 @@ export default function FollowingFavoriteRelayList() {
         <RelayItem key={url} url={url} users={users} />
       ))}
       {showCount < relays.length && <div ref={bottomRef} />}
-      {loading && <RelaySimpleInfoSkeleton />}
+      {loading && <RelaySimpleInfoSkeleton className="p-4" />}
       {!loading && (
         <div className="text-center text-muted-foreground text-sm mt-2">
           {relays.length === 0 ? t('no relays found') : t('no more relays')}

src/components/RelayList/index.tsx

@@ -1,6 +1,6 @@
 import { usePrimaryPage } from '@/PageManager'
 import relayInfoService from '@/services/relay-info.service'
-import { TNip66RelayInfo } from '@/types'
+import { TRelayInfo } from '@/types'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelaySimpleInfo, { RelaySimpleInfoSkeleton } from '../RelaySimpleInfo'
@@ -10,7 +10,7 @@ export default function RelayList() {
   const { t } = useTranslation()
   const { navigate } = usePrimaryPage()
   const [loading, setLoading] = useState(true)
-  const [relays, setRelays] = useState<TNip66RelayInfo[]>([])
+  const [relays, setRelays] = useState<TRelayInfo[]>([])
   const [showCount, setShowCount] = useState(20)
   const [input, setInput] = useState('')
   const [debouncedInput, setDebouncedInput] = useState(input)
@@ -82,7 +82,7 @@ export default function RelayList() {
         />
       ))}
       {showCount < relays.length && <div ref={bottomRef} />}
-      {loading && <RelaySimpleInfoSkeleton />}
+      {loading && <RelaySimpleInfoSkeleton className="p-4" />}
       {!loading && relays.length === 0 && (
         <div className="text-center text-muted-foreground text-sm">{t('no relays found')}</div>
       )}

src/components/RelaySimpleInfo/index.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
-import { TNip66RelayInfo } from '@/types'
+import { TRelayInfo } from '@/types'
 import { HTMLProps } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayBadges from '../RelayBadges'
@@ -15,7 +15,7 @@ export default function RelaySimpleInfo({
   className,
   ...props
 }: HTMLProps<HTMLDivElement> & {
-  relayInfo?: TNip66RelayInfo
+  relayInfo?: TRelayInfo
   users?: string[]
   hideBadge?: boolean
 }) {
@@ -36,7 +36,7 @@ export default function RelaySimpleInfo({
         {relayInfo && <SaveRelayDropdownMenu urls={[relayInfo.url]} />}
       </div>
       {!hideBadge && relayInfo && <RelayBadges relayInfo={relayInfo} />}
-      {!!relayInfo?.description && <div className="line-clamp-4">{relayInfo.description}</div>}
+      {!!relayInfo?.description && <div className="line-clamp-3">{relayInfo.description}</div>}
       {!!users?.length && (
         <div className="flex items-center gap-2">
           <div className="text-muted-foreground">{t('Favorited by')} </div>
@@ -56,9 +56,9 @@ export default function RelaySimpleInfo({
   )
 }
 
-export function RelaySimpleInfoSkeleton() {
+export function RelaySimpleInfoSkeleton({ className }: { className?: string }) {
   return (
-    <div className="p-4 space-y-2">
+    <div className={cn('space-y-1', className)}>
       <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">