feat: 💨

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -71,11 +71,6 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
       if (feedInfo.feedType === 'relays') {
         return activeRelaySet?.name ?? activeRelaySet?.id
       }
-      if (feedInfo.feedType === 'temporary') {
-        return relayUrls.length === 1
-          ? simplifyUrl(relayUrls[0])
-          : (activeRelaySet?.name ?? t('Temporary'))
-      }
     }, [feedInfo, activeRelaySet])
 
     return (

src/pages/primary/NoteListPage/RelaysFeed.tsx

@@ -22,11 +22,7 @@ export default function RelaysFeed() {
     return null
   }
 
-  if (
-    feedInfo.feedType !== 'relay' &&
-    feedInfo.feedType !== 'relays' &&
-    feedInfo.feedType !== 'temporary'
-  ) {
+  if (feedInfo.feedType !== 'relay' && feedInfo.feedType !== 'relays') {
     return null
   }
 

src/pages/primary/NoteListPage/index.tsx

@@ -1,6 +1,5 @@
 import BookmarkList from '@/components/BookmarkList'
 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'
@@ -61,11 +60,7 @@ const NoteListPage = forwardRef((_, ref) => {
     <PrimaryPageLayout
       pageName="home"
       ref={layoutRef}
-      titlebar={
-        <NoteListPageTitlebar
-          temporaryRelayUrls={feedInfo.feedType === 'temporary' ? relayUrls : []}
-        />
-      }
+      titlebar={<NoteListPageTitlebar />}
       displayScrollToTopButton
     >
       {content}
@@ -75,16 +70,13 @@ const NoteListPage = forwardRef((_, ref) => {
 NoteListPage.displayName = 'NoteListPage'
 export default NoteListPage
 
-function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
+function NoteListPageTitlebar() {
   const { isSmallScreen } = useScreenSize()
 
   return (
     <div className="flex gap-1 items-center h-full justify-between">
       <FeedButton className="flex-1 max-w-fit w-0" />
       <div className="shrink-0 flex gap-1 items-center">
-        {temporaryRelayUrls.length > 0 && (
-          <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
-        )}
         <SearchButton />
         {isSmallScreen && <PostButton />}
       </div>

src/pages/primary/RelayPage/index.tsx

@@ -0,0 +1,37 @@
+import Relay from '@/components/Relay'
+import RelayPageControls from '@/components/RelayPageControls'
+import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { normalizeUrl, simplifyUrl } from '@/lib/url'
+import { Server } from 'lucide-react'
+import { forwardRef, useMemo } from 'react'
+
+const RelayPage = forwardRef(({ url }: { url?: string }, ref) => {
+  const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
+
+  return (
+    <PrimaryPageLayout
+      pageName="relay"
+      titlebar={<RelayPageTitlebar url={normalizedUrl} />}
+      displayScrollToTopButton
+      ref={ref}
+    >
+      <Relay url={normalizedUrl} className="pt-3" />
+    </PrimaryPageLayout>
+  )
+})
+RelayPage.displayName = 'RelayPage'
+export default RelayPage
+
+function RelayPageTitlebar({ url }: { url?: string }) {
+  return (
+    <div className="flex gap-2 items-center justify-between h-full">
+      <div className="flex items-center gap-2 pl-3 flex-1 w-0">
+        <Server />
+        <div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
+      </div>
+      <div className="flex items-center flex-shrink-0">
+        <RelayPageControls url={url ?? ''} />
+      </div>
+    </div>
+  )
+}

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 />
-    </>
-  )
-}