feat: 💨

src/components/FavoriteRelaysSetting/TemporaryRelaySet.tsx

@@ -1,28 +0,0 @@
-import { useFeed } from '@/providers/FeedProvider'
-import RelayIcon from '../RelayIcon'
-import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
-
-export default function TemporaryRelaySet() {
-  const { temporaryRelayUrls } = useFeed()
-
-  if (!temporaryRelayUrls.length) {
-    return null
-  }
-
-  return (
-    <div className="w-full border border-dashed rounded-lg p-4 border-primary bg-primary/5 flex gap-4 justify-between">
-      <div className="flex-1 w-0">
-        <div className="flex justify-between items-center">
-          <div className="h-8 font-semibold">Temporary</div>
-        </div>
-        {temporaryRelayUrls.map((url) => (
-          <div className="flex gap-3 items-center">
-            <RelayIcon url={url} className="w-4 h-4" iconSize={10} />
-            <div className="text-muted-foreground text-sm truncate">{url}</div>
-          </div>
-        ))}
-      </div>
-      <SaveRelayDropdownMenu urls={temporaryRelayUrls} />
-    </div>
-  )
-}

src/components/FavoriteRelaysSetting/index.tsx

@@ -3,13 +3,11 @@ import AddNewRelaySet from './AddNewRelaySet'
 import FavoriteRelayList from './FavoriteRelayList'
 import { RelaySetsSettingComponentProvider } from './provider'
 import RelaySetList from './RelaySetList'
-import TemporaryRelaySet from './TemporaryRelaySet'
 
 export default function FavoriteRelaysSetting() {
   return (
     <RelaySetsSettingComponentProvider>
       <div className="space-y-4">
-        <TemporaryRelaySet />
         <RelaySetList />
         <AddNewRelaySet />
         <FavoriteRelayList />

src/components/FeedSwitcher/index.tsx

@@ -8,13 +8,12 @@ import { BookmarkIcon, UsersRound } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
 import RelaySetCard from '../RelaySetCard'
-import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
 
 export default function FeedSwitcher({ close }: { close?: () => void }) {
   const { t } = useTranslation()
   const { pubkey } = useNostr()
   const { relaySets, favoriteRelays } = useFavoriteRelays()
-  const { feedInfo, switchFeed, temporaryRelayUrls } = useFeed()
+  const { feedInfo, switchFeed } = useFeed()
 
   return (
     <div className="space-y-4">
@@ -54,20 +53,6 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
         </FeedSwitcherItem>
       )}
 
-      {temporaryRelayUrls.length > 0 && (
-        <FeedSwitcherItem
-          key="temporary"
-          isActive={feedInfo.feedType === 'temporary'}
-          temporary
-          onClick={() => {
-            switchFeed('temporary')
-            close?.()
-          }}
-          controls={<SaveRelayDropdownMenu urls={temporaryRelayUrls} />}
-        >
-          {temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : t('Temporary')}
-        </FeedSwitcherItem>
-      )}
       <div className="space-y-2">
         <div className="flex justify-end items-center text-sm">
           <SecondaryPageLink
@@ -115,19 +100,17 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
 function FeedSwitcherItem({
   children,
   isActive,
-  temporary = false,
   onClick,
   controls
 }: {
   children: React.ReactNode
   isActive: boolean
-  temporary?: boolean
   onClick: () => void
   controls?: React.ReactNode
 }) {
   return (
     <div
-      className={`w-full border rounded-lg p-4 ${isActive ? 'border-primary bg-primary/5' : 'clickable'} ${temporary ? 'border-dashed' : ''}`}
+      className={`w-full border rounded-lg p-4 ${isActive ? 'border-primary bg-primary/5' : 'clickable'}`}
       onClick={onClick}
     >
       <div className="flex justify-between items-center">

src/components/NotFound/index.tsx

@@ -0,0 +1,12 @@
+import { useTranslation } from 'react-i18next'
+
+export default function NotFound() {
+  const { t } = useTranslation()
+
+  return (
+    <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>
+  )
+}

src/components/Profile/index.tsx

@@ -20,6 +20,7 @@ import client from '@/services/client.service'
 import { Link, Zap } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import NotFound from '../NotFound'
 import FollowedBy from './FollowedBy'
 import Followings from './Followings'
 import ProfileFeed from './ProfileFeed'
@@ -98,7 +99,7 @@ export default function Profile({ id }: { id?: string }) {
       </>
     )
   }
-  if (!profile) return null
+  if (!profile) return <NotFound />
 
   const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
   return (

src/components/Relay/index.tsx

@@ -0,0 +1,50 @@
+import NormalFeed from '@/components/NormalFeed'
+import RelayInfo from '@/components/RelayInfo'
+import SearchInput from '@/components/SearchInput'
+import { useFetchRelayInfo } from '@/hooks'
+import { normalizeUrl } from '@/lib/url'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import NotFound from '../NotFound'
+
+export default function Relay({ url, className }: { url?: string; className?: string }) {
+  const { t } = useTranslation()
+  const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
+  const { relayInfo } = useFetchRelayInfo(normalizedUrl)
+  const [searchInput, setSearchInput] = useState('')
+  const [debouncedInput, setDebouncedInput] = useState(searchInput)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedInput(searchInput)
+    }, 1000)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [searchInput])
+
+  if (!normalizedUrl) {
+    return <NotFound />
+  }
+
+  return (
+    <div className={className}>
+      <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 } : {} }
+        ]}
+      />
+    </div>
+  )
+}

src/components/RelayList/index.tsx

@@ -1,5 +1,4 @@
-import { toRelay } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
+import { usePrimaryPage } from '@/PageManager'
 import relayInfoService from '@/services/relay-info.service'
 import { TNip66RelayInfo } from '@/types'
 import { useEffect, useRef, useState } from 'react'
@@ -9,7 +8,7 @@ import SearchInput from '../SearchInput'
 
 export default function RelayList() {
   const { t } = useTranslation()
-  const { push } = useSecondaryPage()
+  const { navigate } = usePrimaryPage()
   const [loading, setLoading] = useState(true)
   const [relays, setRelays] = useState<TNip66RelayInfo[]>([])
   const [showCount, setShowCount] = useState(20)
@@ -78,7 +77,7 @@ export default function RelayList() {
           className="clickable p-4 border-b"
           onClick={(e) => {
             e.stopPropagation()
-            push(toRelay(relay.url))
+            navigate('relay', { url: relay.url })
           }}
         />
       ))}

src/components/RelayPageControls/index.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@/components/ui/button'
+import { Check, Copy, Link } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
+
+export default 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 />
+    </>
+  )
+}