feat: explore (#85)

src/pages/primary/ExplorePage/index.tsx

@@ -0,0 +1,31 @@
+import RelayList from '@/components/RelayList'
+import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { Compass } from 'lucide-react'
+import { forwardRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const ExplorePage = forwardRef((_, ref) => {
+  return (
+    <PrimaryPageLayout
+      ref={ref}
+      pageName="explore"
+      titlebar={<ExplorePageTitlebar />}
+      displayScrollToTopButton
+    >
+      <RelayList />
+    </PrimaryPageLayout>
+  )
+})
+ExplorePage.displayName = 'ExplorePage'
+export default ExplorePage
+
+function ExplorePageTitlebar() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex gap-2 items-center h-full pl-3">
+      <Compass />
+      <div className="text-lg font-semibold">{t('Explore')}</div>
+    </div>
+  )
+}

src/pages/primary/NoteListPage/index.tsx

@@ -1,11 +1,14 @@
 import NoteList from '@/components/NoteList'
+import PostEditor from '@/components/PostEditor'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import { Button } from '@/components/ui/button'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { useFeed } from '@/providers/FeedProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { TPageRef } from '@/types'
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { PencilLine } from 'lucide-react'
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
 import SearchButton from './SearchButton'
@@ -59,15 +62,41 @@ NoteListPage.displayName = 'NoteListPage'
 export default NoteListPage
 
 function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
+  const { isSmallScreen } = useScreenSize()
+
   return (
     <div className="flex gap-1 items-center h-full justify-between">
       <FeedButton />
       <div>
-        <SearchButton />
         {temporaryRelayUrls.length > 0 && (
           <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
         )}
+        <SearchButton />
+        {isSmallScreen && <PostButton />}
       </div>
     </div>
   )
 }
+
+function PostButton() {
+  const { checkLogin } = useNostr()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="titlebar-icon"
+        onClick={(e) => {
+          e.stopPropagation()
+          checkLogin(() => {
+            setOpen(true)
+          })
+        }}
+      >
+        <PencilLine />
+      </Button>
+      <PostEditor open={open} setOpen={setOpen} />
+    </>
+  )
+}

src/pages/secondary/HomePage/index.tsx

@@ -1,13 +1,85 @@
+import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
+import RelaySimpleInfo from '@/components/RelaySimpleInfo'
+import { Button } from '@/components/ui/button'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { forwardRef } from 'react'
+import { toRelay } from '@/lib/link'
+import relayInfoService from '@/services/relay-info.service'
+import { TNip66RelayInfo } from '@/types'
+import { ArrowRight, RefreshCcw, Server } from 'lucide-react'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
+  const { navigate } = usePrimaryPage()
+  const { push } = useSecondaryPage()
+  const [randomRelayInfos, setRandomRelayInfos] = useState<TNip66RelayInfo[]>([])
+
+  const refresh = useCallback(async () => {
+    const relayInfos = await relayInfoService.getRandomRelayInfos(10)
+    const relayUrls = new Set<string>()
+    const uniqueRelayInfos = relayInfos.filter((relayInfo) => {
+      if (relayUrls.has(relayInfo.url)) {
+        return false
+      }
+      relayUrls.add(relayInfo.url)
+      return true
+    })
+    setRandomRelayInfos(uniqueRelayInfos)
+  }, [])
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  if (!randomRelayInfos.length) {
+    return (
+      <SecondaryPageLayout ref={ref} index={index} hideBackButton>
+        <div className="text-muted-foreground w-full h-screen flex items-center justify-center">
+          {t('Welcome! 🥳')}
+        </div>
+      </SecondaryPageLayout>
+    )
+  }
+
   return (
-    <SecondaryPageLayout ref={ref} index={index} hideBackButton>
-      <div className="text-muted-foreground w-full h-screen flex items-center justify-center">
-        {t('Welcome! 🥳')}
+    <SecondaryPageLayout
+      ref={ref}
+      index={index}
+      title={
+        <>
+          <Server />
+          <div>{t('Random Relays')}</div>
+        </>
+      }
+      controls={
+        <Button variant="ghost" className="h-10 [&_svg]:size-3" onClick={() => refresh()}>
+          <RefreshCcw />
+          <div>{t('randomRelaysRefresh')}</div>
+        </Button>
+      }
+      hideBackButton
+    >
+      <div className="px-4">
+        <div className="grid grid-cols-2 gap-3">
+          {randomRelayInfos.map((relayInfo) => (
+            <RelaySimpleInfo
+              key={relayInfo.url}
+              className="clickable h-auto p-3 rounded-lg border"
+              relayInfo={relayInfo}
+              onClick={(e) => {
+                e.stopPropagation()
+                push(toRelay(relayInfo.url))
+              }}
+            />
+          ))}
+        </div>
+        <div className="flex mt-2 justify-center">
+          <Button variant="ghost" onClick={() => navigate('explore')}>
+            <div>{t('Explore more')}</div>
+            <ArrowRight />
+          </Button>
+        </div>
       </div>
     </SecondaryPageLayout>
   )

src/pages/secondary/RelayPage/index.tsx

@@ -1,16 +1,33 @@
 import NoteList from '@/components/NoteList'
 import RelayInfo from '@/components/RelayInfo'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
+import SearchInput from '@/components/SearchInput'
 import { Button } from '@/components/ui/button'
+import { useFetchRelayInfo } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
 import { Check, Copy } from 'lucide-react'
-import { forwardRef, useMemo, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 
 const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
+  const { t } = useTranslation()
   const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
+  const { relayInfo } = useFetchRelayInfo(normalizedUrl)
   const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
+  const [searchInput, setSearchInput] = useState('')
+  const [debouncedInput, setDebouncedInput] = useState(searchInput)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedInput(searchInput)
+    }, 1000)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [searchInput])
 
   if (!normalizedUrl) {
     return <NotFoundPage ref={ref} />
@@ -25,7 +42,20 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
       displayScrollToTopButton
     >
       <RelayInfo url={normalizedUrl} />
-      <NoteList relayUrls={[normalizedUrl]} needCheckAlgoRelay />
+      {relayInfo?.supported_nips?.includes(50) && (
+        <div className="px-4 py-2">
+          <SearchInput
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder={t('Search')}
+          />
+        </div>
+      )}
+      <NoteList
+        relayUrls={[normalizedUrl]}
+        needCheckAlgoRelay
+        filter={debouncedInput ? { search: debouncedInput } : {}}
+      />
     </SecondaryPageLayout>
   )
 })