feat: 💨

src/pages/secondary/NotFoundPage/index.tsx

@@ -1,16 +1,11 @@
+import NotFound from '@/components/NotFound'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { forwardRef } from 'react'
-import { useTranslation } from 'react-i18next'
 
 const NotFoundPage = forwardRef(({ index }: { index?: number }, ref) => {
-  const { t } = useTranslation()
-
   return (
     <SecondaryPageLayout ref={ref} index={index} hideBackButton>
-      <div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
-        <div>{t('Lost in the void')} 🌌</div>
-        <div>(404)</div>
-      </div>
+      <NotFound />
     </SecondaryPageLayout>
   )
 })

src/pages/secondary/RelayPage/index.tsx

@@ -1,34 +1,13 @@
-import NormalFeed from '@/components/NormalFeed'
-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 Relay from '@/components/Relay'
+import RelayPageControls from '@/components/RelayPageControls'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
-import { Check, Copy, Link } from 'lucide-react'
-import { forwardRef, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
+import { forwardRef, useMemo } from 'react'
 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} />
@@ -42,54 +21,9 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
       controls={<RelayPageControls url={normalizedUrl} />}
       displayScrollToTopButton
     >
-      <div className="h-3 w-full" />
-      <RelayInfo url={normalizedUrl} />
-      {relayInfo?.supported_nips?.includes(50) && (
-        <div className="px-4 py-2">
-          <SearchInput
-            value={searchInput}
-            onChange={(e) => setSearchInput(e.target.value)}
-            placeholder={t('Search')}
-          />
-        </div>
-      )}
-      <NormalFeed
-        subRequests={[
-          { urls: [normalizedUrl], filter: debouncedInput ? { search: debouncedInput } : {} }
-        ]}
-      />
+      <Relay url={normalizedUrl} className="pt-3" />
     </SecondaryPageLayout>
   )
 })
 RelayPage.displayName = 'RelayPage'
 export default RelayPage
-
-function RelayPageControls({ url }: { url: string }) {
-  const [copiedUrl, setCopiedUrl] = useState(false)
-  const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
-
-  const handleCopyUrl = () => {
-    navigator.clipboard.writeText(url)
-    setCopiedUrl(true)
-    setTimeout(() => setCopiedUrl(false), 2000)
-  }
-
-  const handleCopyShareableUrl = () => {
-    navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
-    setCopiedShareableUrl(true)
-    toast.success('Shareable URL copied to clipboard')
-    setTimeout(() => setCopiedShareableUrl(false), 2000)
-  }
-
-  return (
-    <>
-      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyShareableUrl}>
-        {copiedShareableUrl ? <Check /> : <Link />}
-      </Button>
-      <Button variant="ghost" size="titlebar-icon" onClick={handleCopyUrl}>
-        {copiedUrl ? <Check /> : <Copy />}
-      </Button>
-      <SaveRelayDropdownMenu urls={[url]} atTitlebar />
-    </>
-  )
-}