feat: sync relay sets

2025-01-07 23:26:05 +08:00
parent 4343765aba
commit 7bd5b915eb
38 changed files with 1069 additions and 686 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,25 +8,25 @@ import { FeedProvider } from './providers/FeedProvider'
 import { FollowListProvider } from './providers/FollowListProvider'
 import { NostrProvider } from './providers/NostrProvider'
 import { NoteStatsProvider } from './providers/NoteStatsProvider'
-import { RelaySettingsProvider } from './providers/RelaySettingsProvider'
+import { RelaySetsProvider } from './providers/RelaySetsProvider'
 import { ScreenSizeProvider } from './providers/ScreenSizeProvider'

 export default function App(): JSX.Element {
  return (
    <ThemeProvider>
      <ScreenSizeProvider>
-        <FeedProvider>
-          <RelaySettingsProvider>
-            <NostrProvider>
+        <NostrProvider>
+          <RelaySetsProvider>
+            <FeedProvider>
              <FollowListProvider>
                <NoteStatsProvider>
                  <PageManager />
                  <Toaster />
                </NoteStatsProvider>
              </FollowListProvider>
-            </NostrProvider>
-          </RelaySettingsProvider>
-        </FeedProvider>
+            </FeedProvider>
+          </RelaySetsProvider>
+        </NostrProvider>
      </ScreenSizeProvider>
    </ThemeProvider>
  )
--- a/src/components/FeedSwitcher/index.tsx
+++ b/src/components/FeedSwitcher/index.tsx
@@ -3,15 +3,16 @@ import { simplifyUrl } from '@/lib/url'
 import { SecondaryPageLink } from '@/PageManager'
 import { useFeed } from '@/providers/FeedProvider'
 import { useNostr } from '@/providers/NostrProvider'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { Circle, CircleCheck } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import RelaySetCard from '../RelaySetCard'

 export default function FeedSwitcher({ close }: { close?: () => void }) {
  const { t } = useTranslation()
-  const { feedType, setFeedType } = useFeed()
+  const { feedType, switchFeed, activeRelaySetId, temporaryRelayUrls } = useFeed()
  const { pubkey } = useNostr()
-  const { relayGroups, temporaryRelayUrls, switchRelayGroup } = useRelaySettings()
+  const { relaySets } = useRelaySets()

  return (
    <div className="space-y-4">
@@ -20,14 +21,14 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
          itemName={t('Following')}
          isActive={feedType === 'following'}
          onClick={() => {
-            setFeedType('following')
+            switchFeed('following')
            close?.()
          }}
        />
      )}
      <div className="space-y-2">
        <div className="flex justify-between px-2">
-          <div className="text-muted-foreground text-sm font-semibold">{t('relay feeds')}</div>
+          <div className="text-muted-foreground text-sm font-semibold">{t('relay sets')}</div>
          <SecondaryPageLink
            to={toRelaySettings()}
            className="text-highlight text-sm font-semibold"
@@ -42,25 +43,25 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
            itemName={
              temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : t('Temporary')
            }
-            isActive={feedType === 'relays'}
+            isActive={feedType === 'temporary'}
            temporary
            onClick={() => {
-              setFeedType('relays')
+              switchFeed('temporary')
              close?.()
            }}
          />
        )}
-        {relayGroups
-          .filter((group) => group.relayUrls.length > 0)
-          .map((group) => (
-            <FeedSwitcherItem
-              key={group.groupName}
-              itemName={
-                group.relayUrls.length === 1 ? simplifyUrl(group.relayUrls[0]) : group.groupName
-              }
-              isActive={feedType === 'relays' && group.isActive && temporaryRelayUrls.length === 0}
-              onClick={() => {
-                switchRelayGroup(group.groupName)
+        {relaySets
+          .filter((set) => set.relayUrls.length > 0)
+          .map((set) => (
+            <RelaySetCard
+              key={set.id}
+              relaySet={set}
+              select={feedType === 'relays' && set.id === activeRelaySetId}
+              showConnectionStatus={feedType === 'relays' && set.id === activeRelaySetId}
+              onSelectChange={(select) => {
+                if (!select) return
+                switchFeed('relays', { activeRelaySetId: set.id })
                close?.()
              }}
            />
--- a/src/components/LoginDialog/index.tsx
+++ b/src/components/LoginDialog/index.tsx
@@ -22,12 +22,7 @@ export default function LoginDialog({
  if (isSmallScreen) {
    return (
      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerContent
-          className="max-h-[90vh]"
-          style={{
-            paddingBottom: 'env(safe-area-inset-bottom)'
-          }}
-        >
+        <DrawerContent className="max-h-[90vh]">
          <div className="flex flex-col p-4 gap-4 overflow-auto">
            <AccountManager close={() => setOpen(false)} />
          </div>
--- a/src/components/RelaySetCard/index.tsx
+++ b/src/components/RelaySetCard/index.tsx
@@ -0,0 +1,124 @@
+import client from '@/services/client.service'
+import { TRelaySet } from '@/types'
+import { ChevronDown, Circle, CircleCheck } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function RelaySetCard({
+  relaySet,
+  select,
+  onSelectChange,
+  showConnectionStatus = false
+}: {
+  relaySet: TRelaySet
+  select: boolean
+  onSelectChange: (select: boolean) => void
+  showConnectionStatus?: boolean
+}) {
+  const { t } = useTranslation()
+  const [expand, setExpand] = useState(false)
+
+  return (
+    <div
+      className={`w-full border rounded-lg p-4 ${select ? 'border-highlight bg-highlight/5' : ''}`}
+    >
+      <div className="flex justify-between items-center">
+        <div
+          className="flex space-x-2 items-center cursor-pointer"
+          onClick={() => onSelectChange(!select)}
+        >
+          <RelaySetActiveToggle select={select} />
+          <div className="h-8 font-semibold flex items-center select-none">{relaySet.name}</div>
+        </div>
+        <div className="flex gap-1">
+          <RelayUrlsExpandToggle expand={expand} onExpandChange={setExpand}>
+            {t('n relays', { n: relaySet.relayUrls.length })}
+          </RelayUrlsExpandToggle>
+        </div>
+      </div>
+      {expand && (
+        <RelayUrls urls={relaySet.relayUrls} showConnectionStatus={showConnectionStatus} />
+      )}
+    </div>
+  )
+}
+
+function RelaySetActiveToggle({ select }: { select: boolean }) {
+  return select ? (
+    <CircleCheck size={18} className="text-highlight shrink-0" />
+  ) : (
+    <Circle size={18} className="shrink-0" />
+  )
+}
+
+function RelayUrlsExpandToggle({
+  children,
+  expand,
+  onExpandChange
+}: {
+  children: React.ReactNode
+  expand: boolean
+  onExpandChange: (expand: boolean) => void
+}) {
+  return (
+    <div
+      className="text-sm text-muted-foreground flex items-center gap-1 cursor-pointer hover:text-foreground"
+      onClick={() => onExpandChange(!expand)}
+    >
+      <div className="select-none">{children}</div>
+      <ChevronDown
+        size={16}
+        className={`transition-transform duration-200 ${expand ? 'rotate-180' : ''}`}
+      />
+    </div>
+  )
+}
+
+function RelayUrls({
+  showConnectionStatus = false,
+  urls
+}: {
+  showConnectionStatus?: boolean
+  urls: string[]
+}) {
+  const [relays, setRelays] = useState<
+    {
+      url: string
+      isConnected: boolean
+    }[]
+  >(urls.map((url) => ({ url, isConnected: false })) ?? [])
+
+  useEffect(() => {
+    if (!showConnectionStatus || urls.length === 0) return
+
+    const interval = setInterval(() => {
+      const connectionStatusMap = client.listConnectionStatus()
+      setRelays((pre) => {
+        return pre.map((relay) => {
+          const isConnected = connectionStatusMap.get(relay.url) || false
+          return { ...relay, isConnected }
+        })
+      })
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [showConnectionStatus, urls])
+
+  if (!urls) return null
+
+  return (
+    <div>
+      {relays.map(({ url, isConnected: isConnected }, index) => (
+        <div key={index} className="flex items-center gap-2">
+          {showConnectionStatus &&
+            (isConnected ? (
+              <div className="text-green-500 text-xs">●</div>
+            ) : (
+              <div className="text-red-500 text-xs">●</div>
+            ))}
+          <div className="text-muted-foreground text-sm">{url}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
--- a/src/components/RelaySetsSetting/PullFromRelaysButton.tsx
+++ b/src/components/RelaySetsSetting/PullFromRelaysButton.tsx
@@ -0,0 +1,168 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from '@/components/ui/drawer'
+import { BIG_RELAY_URLS } from '@/constants'
+import { tagNameEquals } from '@/lib/tag'
+import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
+import { useNostr } from '@/providers/NostrProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import client from '@/services/client.service'
+import { TRelaySet } from '@/types'
+import { CloudDownload } from 'lucide-react'
+import { kinds } from 'nostr-tools'
+import { useEffect, useState } from 'react'
+import RelaySetCard from '../RelaySetCard'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
+
+export default function PullFromRelaysButton() {
+  const { pubkey } = useNostr()
+  const { isSmallScreen } = useScreenSize()
+  const [open, setOpen] = useState(false)
+
+  const trigger = (
+    <Button variant="secondary" className="w-full" disabled={!pubkey}>
+      <CloudDownload />
+      Pull from relays
+    </Button>
+  )
+
+  if (isSmallScreen) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[90vh]">
+          <div className="flex flex-col p-4 gap-4 overflow-auto">
+            <DrawerHeader>
+              <DrawerTitle>Select the relay sets you want to pull</DrawerTitle>
+              <DrawerDescription className="hidden" />
+            </DrawerHeader>
+            <RemoteRelaySets close={() => setOpen(false)} />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Select the relay sets you want to pull</DialogTitle>
+          <DialogDescription className="hidden" />
+        </DialogHeader>
+        <RemoteRelaySets close={() => setOpen(false)} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function RemoteRelaySets({ close }: { close?: () => void }) {
+  const { pubkey, relayList } = useNostr()
+  const { mergeRelaySets } = useRelaySets()
+  const [initialed, setInitialed] = useState(false)
+  const [relaySets, setRelaySets] = useState<TRelaySet[]>([])
+  const [selectedRelaySetIds, setSelectedRelaySetIds] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!pubkey) return
+
+    const init = async () => {
+      setInitialed(false)
+      const events = await client.fetchEvents(
+        (relayList?.write ?? []).concat(BIG_RELAY_URLS).slice(0, 4),
+        {
+          kinds: [kinds.Relaysets],
+          authors: [pubkey],
+          limit: 50
+        }
+      )
+      setRelaySets(
+        events
+          .map((evt) => {
+            const id = evt.tags.find(tagNameEquals('d'))?.[1]
+            if (!id) return null
+
+            const relayUrls = evt.tags
+              .filter(tagNameEquals('relay'))
+              .map((tag) => tag[1])
+              .filter((url) => url && isWebsocketUrl(url))
+            if (!relayUrls.length) return null
+
+            let title = evt.tags.find(tagNameEquals('title'))?.[1]
+            if (!title) {
+              title = relayUrls.length === 1 ? simplifyUrl(relayUrls[0]) : id
+            }
+            return { id, name: title, relayUrls }
+          })
+          .filter(Boolean) as TRelaySet[]
+      )
+      setInitialed(true)
+    }
+    init()
+  }, [pubkey])
+
+  if (!pubkey) return null
+  if (!initialed) return <div className="text-center text-muted-foreground">Loading...</div>
+  if (!relaySets.length) {
+    return <div className="text-center text-muted-foreground">No relay sets found</div>
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        {relaySets.map((relaySet) => (
+          <RelaySetCard
+            key={relaySet.id}
+            relaySet={relaySet}
+            select={selectedRelaySetIds.includes(relaySet.id)}
+            onSelectChange={(select) => {
+              if (select) {
+                setSelectedRelaySetIds([...selectedRelaySetIds, relaySet.id])
+              } else {
+                setSelectedRelaySetIds(selectedRelaySetIds.filter((id) => id !== relaySet.id))
+              }
+            }}
+          />
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <Button
+          className="w-20 shrink-0"
+          variant="secondary"
+          onClick={() => setSelectedRelaySetIds(relaySets.map((r) => r.id))}
+        >
+          All
+        </Button>
+        <Button
+          className="w-full"
+          disabled={!selectedRelaySetIds.length}
+          onClick={() => {
+            if (selectedRelaySetIds.length > 0) {
+              mergeRelaySets(relaySets.filter((set) => selectedRelaySetIds.includes(set.id)))
+              close?.()
+            }
+          }}
+        >
+          {selectedRelaySetIds.length > 0
+            ? `Pull ${selectedRelaySetIds.length} relay sets`
+            : 'Pull'}
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/src/components/RelaySetsSetting/PushToRelaysButton.tsx
+++ b/src/components/RelaySetsSetting/PushToRelaysButton.tsx
@@ -0,0 +1,43 @@
+import { Button } from '@/components/ui/button'
+import { useToast } from '@/hooks'
+import { createRelaySetDraftEvent } from '@/lib/draft-event'
+import { useNostr } from '@/providers/NostrProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
+import { CloudUpload, Loader } from 'lucide-react'
+import { useState } from 'react'
+import { useRelaySetsSettingComponent } from './provider'
+
+export default function PushToRelaysButton() {
+  const { toast } = useToast()
+  const { pubkey, publish } = useNostr()
+  const { relaySets } = useRelaySets()
+  const { selectedRelaySetIds } = useRelaySetsSettingComponent()
+  const [pushing, setPushing] = useState(false)
+
+  const push = async () => {
+    const selectedRelaySets = relaySets.filter((r) => selectedRelaySetIds.includes(r.id))
+    if (!selectedRelaySets.length) return
+
+    setPushing(true)
+    const draftEvents = selectedRelaySets.map((relaySet) => createRelaySetDraftEvent(relaySet))
+    await Promise.allSettled(draftEvents.map((event) => publish(event)))
+    toast({
+      title: 'Push Successful',
+      description: 'Successfully pushed relay sets to relays'
+    })
+    setPushing(false)
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      className="w-full"
+      disabled={!pubkey || pushing || selectedRelaySetIds.length === 0}
+      onClick={push}
+    >
+      <CloudUpload />
+      Push to relays
+      {pushing && <Loader className="animate-spin" />}
+    </Button>
+  )
+}
--- a/src/components/RelaySetsSetting/RelaySet.tsx
+++ b/src/components/RelaySetsSetting/RelaySet.tsx
@@ -0,0 +1,176 @@
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
+import { TRelaySet } from '@/types'
+import { Check, ChevronDown, Circle, CircleCheck, EllipsisVertical } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import RelayUrls from './RelayUrl'
+import { useRelaySetsSettingComponent } from './provider'
+
+export default function RelaySet({ relaySet }: { relaySet: TRelaySet }) {
+  const { t } = useTranslation()
+  const { expandedRelaySetId, selectedRelaySetIds } = useRelaySetsSettingComponent()
+  const isSelected = useMemo(
+    () => selectedRelaySetIds.includes(relaySet.id),
+    [selectedRelaySetIds, relaySet.id]
+  )
+
+  return (
+    <div
+      className={`w-full border rounded-lg p-4 ${isSelected ? 'border-highlight bg-highlight/5' : ''}`}
+    >
+      <div className="flex justify-between items-center">
+        <div className="flex space-x-2 items-center">
+          <RelaySetActiveToggle relaySetId={relaySet.id} />
+          <RelaySetName relaySet={relaySet} />
+        </div>
+        <div className="flex gap-1">
+          <RelayUrlsExpandToggle relaySetId={relaySet.id}>
+            {t('n relays', { n: relaySet.relayUrls.length })}
+          </RelayUrlsExpandToggle>
+          <RelaySetOptions relaySet={relaySet} />
+        </div>
+      </div>
+      {expandedRelaySetId === relaySet.id && <RelayUrls relaySetId={relaySet.id} />}
+    </div>
+  )
+}
+
+function RelaySetActiveToggle({ relaySetId }: { relaySetId: string }) {
+  const { selectedRelaySetIds, toggleSelectedRelaySetId } = useRelaySetsSettingComponent()
+  const isSelected = useMemo(
+    () => selectedRelaySetIds.includes(relaySetId),
+    [selectedRelaySetIds, relaySetId]
+  )
+
+  const handleClick = () => {
+    toggleSelectedRelaySetId(relaySetId)
+  }
+
+  return isSelected ? (
+    <CircleCheck
+      size={18}
+      className="text-highlight shrink-0 cursor-pointer"
+      onClick={handleClick}
+    />
+  ) : (
+    <Circle
+      size={18}
+      className="text-muted-foreground shrink-0 cursor-pointer hover:text-foreground"
+      onClick={handleClick}
+    />
+  )
+}
+
+function RelaySetName({ relaySet }: { relaySet: TRelaySet }) {
+  const [newSetName, setNewSetName] = useState(relaySet.name)
+  const { updateRelaySet } = useRelaySets()
+  const { renamingRelaySetId, setRenamingRelaySetId, toggleSelectedRelaySetId } =
+    useRelaySetsSettingComponent()
+
+  const saveNewRelaySetName = () => {
+    if (relaySet.name === newSetName) {
+      return setRenamingRelaySetId(null)
+    }
+    updateRelaySet({ ...relaySet, name: newSetName })
+    setRenamingRelaySetId(null)
+  }
+
+  const handleRenameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewSetName(e.target.value)
+  }
+
+  const handleRenameInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      saveNewRelaySetName()
+    }
+  }
+
+  return renamingRelaySetId === relaySet.id ? (
+    <div className="flex gap-1 items-center">
+      <Input
+        value={newSetName}
+        onChange={handleRenameInputChange}
+        onBlur={saveNewRelaySetName}
+        onKeyDown={handleRenameInputKeyDown}
+        className="font-semibold w-28"
+      />
+      <Button variant="ghost" size="icon" onClick={saveNewRelaySetName}>
+        <Check size={18} className="text-green-500" />
+      </Button>
+    </div>
+  ) : (
+    <div
+      className="h-8 font-semibold flex items-center cursor-pointer select-none"
+      onClick={() => toggleSelectedRelaySetId(relaySet.id)}
+    >
+      {relaySet.name}
+    </div>
+  )
+}
+
+function RelayUrlsExpandToggle({
+  relaySetId,
+  children
+}: {
+  relaySetId: string
+  children: React.ReactNode
+}) {
+  const { expandedRelaySetId, setExpandedRelaySetId } = useRelaySetsSettingComponent()
+  return (
+    <div
+      className="text-sm text-muted-foreground flex items-center gap-1 cursor-pointer hover:text-foreground"
+      onClick={() => setExpandedRelaySetId((pre) => (pre === relaySetId ? null : relaySetId))}
+    >
+      <div className="select-none">{children}</div>
+      <ChevronDown
+        size={16}
+        className={`transition-transform duration-200 ${expandedRelaySetId === relaySetId ? 'rotate-180' : ''}`}
+      />
+    </div>
+  )
+}
+
+function RelaySetOptions({ relaySet }: { relaySet: TRelaySet }) {
+  const { t } = useTranslation()
+  const { deleteRelaySet } = useRelaySets()
+  const { setRenamingRelaySetId } = useRelaySetsSettingComponent()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <EllipsisVertical />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onClick={() => setRenamingRelaySetId(relaySet.id)}>
+          {t('Rename')}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            navigator.clipboard.writeText(
+              `https://jumble.social/?${relaySet.relayUrls.map((url) => 'r=' + url).join('&')}`
+            )
+          }}
+        >
+          {t('Copy share link')}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="text-destructive focus:text-destructive"
+          onClick={() => deleteRelaySet(relaySet.id)}
+        >
+          {t('Delete')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
--- a/src/components/RelaySetsSetting/RelayUrl.tsx
+++ b/src/components/RelaySetsSetting/RelayUrl.tsx
@@ -2,31 +2,30 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useFetchRelayInfos } from '@/hooks'
 import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useFeed } from '@/providers/FeedProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
 import client from '@/services/client.service'
 import { CircleX, SearchCheck } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'

-export default function RelayUrls({ groupName }: { groupName: string }) {
+export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
  const { t } = useTranslation()
-  const { relayGroups, updateRelayGroupRelayUrls } = useRelaySettings()
-  const isActive = useMemo(
-    () => relayGroups.find((group) => group.groupName === groupName)?.isActive ?? false,
-    [relayGroups, groupName]
-  )
+  const { relaySets, updateRelaySet } = useRelaySets()
+  const { activeRelaySetId } = useFeed()
  const [newRelayUrl, setNewRelayUrl] = useState('')
  const [newRelayUrlError, setNewRelayUrlError] = useState<string | null>(null)
+  const relaySet = useMemo(
+    () => relaySets.find((r) => r.id === relaySetId),
+    [relaySets, relaySetId]
+  )
  const [relays, setRelays] = useState<
    {
      url: string
      isConnected: boolean
    }[]
-  >(
-    relayGroups
-      .find((group) => group.groupName === groupName)
-      ?.relayUrls.map((url) => ({ url, isConnected: false })) ?? []
-  )
+  >(relaySet?.relayUrls.map((url) => ({ url, isConnected: false })) ?? [])
+  const isActive = relaySet?.id === activeRelaySetId

  useEffect(() => {
    const interval = setInterval(() => {
@@ -42,12 +41,14 @@ export default function RelayUrls({ groupName }: { groupName: string }) {
    return () => clearInterval(interval)
  }, [])

+  if (!relaySet) return null
+
  const removeRelayUrl = (url: string) => {
    setRelays((relays) => relays.filter((relay) => relay.url !== url))
-    updateRelayGroupRelayUrls(
-      groupName,
-      relays.map(({ url }) => url).filter((u) => u !== url)
-    )
+    updateRelaySet({
+      ...relaySet,
+      relayUrls: relays.map(({ url }) => url).filter((u) => u !== url)
+    })
  }

  const saveNewRelayUrl = () => {
@@ -61,7 +62,7 @@ export default function RelayUrls({ groupName }: { groupName: string }) {
    }
    setRelays((pre) => [...pre, { url: normalizedUrl, isConnected: false }])
    const newRelayUrls = [...relays.map(({ url }) => url), normalizedUrl]
-    updateRelayGroupRelayUrls(groupName, newRelayUrls)
+    updateRelaySet({ ...relaySet, relayUrls: newRelayUrls })
    setNewRelayUrl('')
  }

--- a/src/components/RelaySetsSetting/TemporaryRelaySet.tsx
+++ b/src/components/RelaySetsSetting/TemporaryRelaySet.tsx
@@ -1,14 +1,17 @@
 import { Button } from '@/components/ui/button'
 import { useFetchRelayInfos } from '@/hooks'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { simplifyUrl } from '@/lib/url'
+import { useFeed } from '@/providers/FeedProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
 import client from '@/services/client.service'
 import { Save, SearchCheck } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'

-export default function TemporaryRelayGroup() {
+export default function TemporaryRelaySet() {
  const { t } = useTranslation()
-  const { temporaryRelayUrls, relayGroups, addRelayGroup, switchRelayGroup } = useRelaySettings()
+  const { temporaryRelayUrls, switchFeed } = useFeed()
+  const { addRelaySet } = useRelaySets()
  const [relays, setRelays] = useState<
    {
      url: string
@@ -40,15 +43,10 @@ export default function TemporaryRelayGroup() {
  }

  const handleSave = () => {
-    const existingTemporaryIndexes = relayGroups
-      .filter((group) => /^Temporary \d+$/.test(group.groupName))
-      .map((group) => group.groupName.split(' ')[1])
-      .map(Number)
-      .filter((index) => !isNaN(index))
-    const nextIndex = Math.max(...existingTemporaryIndexes, 0) + 1
-    const groupName = `Temporary ${nextIndex}`
-    addRelayGroup(groupName, temporaryRelayUrls)
-    switchRelayGroup(groupName)
+    const relaySetName =
+      temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : 'Temporary'
+    const id = addRelaySet(relaySetName, temporaryRelayUrls)
+    switchFeed('relays', { activeRelaySetId: id })
  }

  return (
--- a/src/components/RelaySetsSetting/index.tsx
+++ b/src/components/RelaySetsSetting/index.tsx
@@ -0,0 +1,76 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RelaySetsSettingComponentProvider } from './provider'
+import RelaySet from './RelaySet'
+import TemporaryRelaySet from './TemporaryRelaySet'
+import PushToRelaysButton from './PushToRelaysButton'
+import PullFromRelaysButton from './PullFromRelaysButton'
+
+export default function RelaySetsSetting() {
+  const { t } = useTranslation()
+  const { relaySets, addRelaySet } = useRelaySets()
+  const [newRelaySetName, setNewRelaySetName] = useState('')
+  const dummyRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (dummyRef.current) {
+      dummyRef.current.focus()
+    }
+  }, [])
+
+  const saveRelaySet = () => {
+    if (!newRelaySetName) return
+    addRelaySet(newRelaySetName)
+  }
+
+  const handleNewRelaySetNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewRelaySetName(e.target.value)
+  }
+
+  const handleNewRelaySetNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      saveRelaySet()
+    }
+  }
+
+  return (
+    <RelaySetsSettingComponentProvider>
+      <div ref={dummyRef} tabIndex={-1} style={{ position: 'absolute', opacity: 0 }}></div>
+      <div className="flex gap-4">
+        <PushToRelaysButton />
+        <PullFromRelaysButton />
+      </div>
+      <div className="space-y-2 mt-4">
+        <TemporaryRelaySet />
+        {relaySets.map((relaySet) => (
+          <RelaySet key={relaySet.id} relaySet={relaySet} />
+        ))}
+      </div>
+      {relaySets.length < 10 && (
+        <>
+          <Separator className="my-4" />
+          <div className="w-full border rounded-lg p-4">
+            <div className="flex justify-between items-center">
+              <div className="font-semibold">{t('Add a new relay set')}</div>
+            </div>
+            <div className="mt-2 flex gap-2">
+              <Input
+                placeholder={t('Relay set name')}
+                value={newRelaySetName}
+                onChange={handleNewRelaySetNameChange}
+                onKeyDown={handleNewRelaySetNameKeyDown}
+                onBlur={saveRelaySet}
+              />
+              <Button onClick={saveRelaySet}>{t('Add')}</Button>
+            </div>
+          </div>
+        </>
+      )}
+    </RelaySetsSettingComponentProvider>
+  )
+}
--- a/src/components/RelaySetsSetting/provider.tsx
+++ b/src/components/RelaySetsSetting/provider.tsx
@@ -0,0 +1,52 @@
+import { createContext, useContext, useState } from 'react'
+
+type TRelaySetsSettingComponentContext = {
+  renamingRelaySetId: string | null
+  setRenamingRelaySetId: React.Dispatch<React.SetStateAction<string | null>>
+  expandedRelaySetId: string | null
+  setExpandedRelaySetId: React.Dispatch<React.SetStateAction<string | null>>
+  selectedRelaySetIds: string[]
+  toggleSelectedRelaySetId: (relaySetId: string) => void
+}
+
+export const RelaySetsSettingComponentContext = createContext<
+  TRelaySetsSettingComponentContext | undefined
+>(undefined)
+
+export const useRelaySetsSettingComponent = () => {
+  const context = useContext(RelaySetsSettingComponentContext)
+  if (!context) {
+    throw new Error(
+      'useRelaySetsSettingComponent must be used within a RelaySetsSettingComponentProvider'
+    )
+  }
+  return context
+}
+
+export function RelaySetsSettingComponentProvider({ children }: { children: React.ReactNode }) {
+  const [renamingRelaySetId, setRenamingRelaySetId] = useState<string | null>(null)
+  const [expandedRelaySetId, setExpandedRelaySetId] = useState<string | null>(null)
+  const [selectedRelaySetIds, setSelectedRelaySetIds] = useState<string[]>([])
+
+  return (
+    <RelaySetsSettingComponentContext.Provider
+      value={{
+        renamingRelaySetId,
+        setRenamingRelaySetId,
+        expandedRelaySetId,
+        setExpandedRelaySetId,
+        selectedRelaySetIds,
+        toggleSelectedRelaySetId: (relaySetId) => {
+          setSelectedRelaySetIds((pre) => {
+            if (pre.includes(relaySetId)) {
+              return pre.filter((id) => id !== relaySetId)
+            }
+            return [...pre, relaySetId]
+          })
+        }
+      }}
+    >
+      {children}
+    </RelaySetsSettingComponentContext.Provider>
+  )
+}
--- a/src/components/RelaySettings/RelayGroup.tsx
+++ b/src/components/RelaySettings/RelayGroup.tsx
@@ -1,195 +0,0 @@
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { Input } from '@/components/ui/input'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
-import { Check, ChevronDown, Circle, CircleCheck, EllipsisVertical } from 'lucide-react'
-import { useState } from 'react'
-import RelayUrls from './RelayUrl'
-import { useRelaySettingsComponent } from './provider'
-import { TRelayGroup } from './types'
-import { useTranslation } from 'react-i18next'
-
-export default function RelayGroup({ group }: { group: TRelayGroup }) {
-  const { t } = useTranslation()
-  const { expandedRelayGroup } = useRelaySettingsComponent()
-  const { temporaryRelayUrls } = useRelaySettings()
-  const { groupName, relayUrls } = group
-  const isActive = temporaryRelayUrls.length === 0 && group.isActive
-
-  return (
-    <div
-      className={`w-full border rounded-lg p-4 ${isActive ? 'border-highlight bg-highlight/5' : ''}`}
-    >
-      <div className="flex justify-between items-center">
-        <div className="flex space-x-2 items-center">
-          <RelayGroupActiveToggle
-            groupName={groupName}
-            isActive={isActive}
-            canActive={relayUrls.length > 0}
-          />
-          <RelayGroupName groupName={groupName} />
-        </div>
-        <div className="flex gap-1">
-          <RelayUrlsExpandToggle groupName={groupName}>
-            {t('n relays', { n: relayUrls.length })}
-          </RelayUrlsExpandToggle>
-          <RelayGroupOptions group={group} />
-        </div>
-      </div>
-      {expandedRelayGroup === groupName && <RelayUrls groupName={groupName} />}
-    </div>
-  )
-}
-
-function RelayGroupActiveToggle({
-  groupName,
-  isActive,
-  canActive
-}: {
-  groupName: string
-  isActive: boolean
-  canActive: boolean
-}) {
-  const { switchRelayGroup } = useRelaySettings()
-
-  return isActive ? (
-    <CircleCheck size={18} className="text-highlight shrink-0" />
-  ) : (
-    <Circle
-      size={18}
-      className={`text-muted-foreground shrink-0 ${canActive ? 'cursor-pointer hover:text-foreground ' : ''}`}
-      onClick={() => {
-        if (canActive) {
-          switchRelayGroup(groupName)
-        }
-      }}
-    />
-  )
-}
-
-function RelayGroupName({ groupName }: { groupName: string }) {
-  const { t } = useTranslation()
-  const [newGroupName, setNewGroupName] = useState(groupName)
-  const [newNameError, setNewNameError] = useState<string | null>(null)
-  const { relayGroups, switchRelayGroup, renameRelayGroup } = useRelaySettings()
-  const { renamingGroup, setRenamingGroup } = useRelaySettingsComponent()
-
-  const hasRelayUrls = relayGroups.find((group) => group.groupName === groupName)?.relayUrls.length
-
-  const saveNewGroupName = () => {
-    if (groupName === newGroupName) {
-      return setRenamingGroup(null)
-    }
-    if (relayGroups.find((group) => group.groupName === newGroupName)) {
-      return setNewNameError(t('relay collection name already exists'))
-    }
-    const errMsg = renameRelayGroup(groupName, newGroupName)
-    if (errMsg) {
-      setNewNameError(errMsg)
-      return
-    }
-    setRenamingGroup(null)
-  }
-
-  const handleRenameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNewGroupName(e.target.value)
-    setNewNameError(null)
-  }
-
-  const handleRenameInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      saveNewGroupName()
-    }
-  }
-
-  return renamingGroup === groupName ? (
-    <div className="flex gap-1 items-center">
-      <Input
-        value={newGroupName}
-        onChange={handleRenameInputChange}
-        onBlur={saveNewGroupName}
-        onKeyDown={handleRenameInputKeyDown}
-        className={`font-semibold w-28 ${newNameError ? 'border-destructive' : ''}`}
-      />
-      <Button variant="ghost" size="icon" onClick={saveNewGroupName}>
-        <Check size={18} className="text-green-500" />
-      </Button>
-      {newNameError && <div className="text-xs text-destructive">{newNameError}</div>}
-    </div>
-  ) : (
-    <div
-      className={`h-8 font-semibold flex items-center ${hasRelayUrls ? 'cursor-pointer' : 'text-muted-foreground'}`}
-      onClick={() => {
-        if (hasRelayUrls) {
-          switchRelayGroup(groupName)
-        }
-      }}
-    >
-      {groupName}
-    </div>
-  )
-}
-
-function RelayUrlsExpandToggle({
-  groupName,
-  children
-}: {
-  groupName: string
-  children: React.ReactNode
-}) {
-  const { expandedRelayGroup, setExpandedRelayGroup } = useRelaySettingsComponent()
-  return (
-    <div
-      className="text-sm text-muted-foreground flex items-center gap-1 cursor-pointer hover:text-foreground"
-      onClick={() => setExpandedRelayGroup((pre) => (pre === groupName ? null : groupName))}
-    >
-      <div className="select-none">{children}</div>
-      <ChevronDown
-        size={16}
-        className={`transition-transform duration-200 ${expandedRelayGroup === groupName ? 'rotate-180' : ''}`}
-      />
-    </div>
-  )
-}
-
-function RelayGroupOptions({ group }: { group: TRelayGroup }) {
-  const { t } = useTranslation()
-  const { deleteRelayGroup } = useRelaySettings()
-  const { setRenamingGroup } = useRelaySettingsComponent()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <EllipsisVertical />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onClick={() => setRenamingGroup(group.groupName)}>
-          {t('Rename')}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => {
-            navigator.clipboard.writeText(
-              `https://jumble.social/?${group.relayUrls.map((url) => 'r=' + url).join('&')}`
-            )
-          }}
-        >
-          {t('Copy share link')}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="text-destructive focus:text-destructive"
-          onClick={() => deleteRelayGroup(group.groupName)}
-        >
-          {t('Delete')}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
--- a/src/components/RelaySettings/index.tsx
+++ b/src/components/RelaySettings/index.tsx
@@ -1,81 +0,0 @@
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
-import { useEffect, useRef, useState } from 'react'
-import { RelaySettingsComponentProvider } from './provider'
-import RelayGroup from './RelayGroup'
-import TemporaryRelayGroup from './TemporaryRelayGroup'
-import { useTranslation } from 'react-i18next'
-
-export default function RelaySettings({ hideTitle = false }: { hideTitle?: boolean }) {
-  const { t } = useTranslation()
-  const { relayGroups, addRelayGroup } = useRelaySettings()
-  const [newGroupName, setNewGroupName] = useState('')
-  const [newNameError, setNewNameError] = useState<string | null>(null)
-  const dummyRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (dummyRef.current) {
-      dummyRef.current.focus()
-    }
-  }, [])
-
-  const saveRelayGroup = () => {
-    if (relayGroups.find((group) => group.groupName === newGroupName)) {
-      return setNewNameError(t('relay collection name already exists'))
-    }
-    const errMsg = addRelayGroup(newGroupName)
-    if (errMsg) {
-      return setNewNameError(errMsg)
-    }
-    setNewGroupName('')
-  }
-
-  const handleNewGroupNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNewGroupName(e.target.value)
-    setNewNameError(null)
-  }
-
-  const handleNewGroupNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      saveRelayGroup()
-    }
-  }
-
-  return (
-    <RelaySettingsComponentProvider>
-      <div ref={dummyRef} tabIndex={-1} style={{ position: 'absolute', opacity: 0 }}></div>
-      {!hideTitle && <div className="text-lg font-semibold mb-4">{t('Relay Settings')}</div>}
-      <div className="space-y-2">
-        <TemporaryRelayGroup />
-        {relayGroups.map((group, index) => (
-          <RelayGroup key={index} group={group} />
-        ))}
-      </div>
-      {relayGroups.length < 10 && (
-        <>
-          <Separator className="my-4" />
-          <div className="w-full border rounded-lg p-4">
-            <div className="flex justify-between items-center">
-              <div className="font-semibold">{t('Add a new relay collection')}</div>
-            </div>
-            <div className="mt-2 flex gap-2">
-              <Input
-                className={newNameError ? 'border-destructive' : ''}
-                placeholder={t('Relay collection name')}
-                value={newGroupName}
-                onChange={handleNewGroupNameChange}
-                onKeyDown={handleNewGroupNameKeyDown}
-                onBlur={saveRelayGroup}
-              />
-              <Button onClick={saveRelayGroup}>{t('Add')}</Button>
-            </div>
-            {newNameError && <div className="text-xs text-destructive mt-1">{newNameError}</div>}
-          </div>
-        </>
-      )}
-    </RelaySettingsComponentProvider>
-  )
-}
--- a/src/components/RelaySettings/provider.tsx
+++ b/src/components/RelaySettings/provider.tsx
@@ -1,40 +0,0 @@
-import { createContext, useContext, useState } from 'react'
-
-type TRelaySettingsComponentContext = {
-  renamingGroup: string | null
-  setRenamingGroup: React.Dispatch<React.SetStateAction<string | null>>
-  expandedRelayGroup: string | null
-  setExpandedRelayGroup: React.Dispatch<React.SetStateAction<string | null>>
-}
-
-export const RelaySettingsComponentContext = createContext<
-  TRelaySettingsComponentContext | undefined
->(undefined)
-
-export const useRelaySettingsComponent = () => {
-  const context = useContext(RelaySettingsComponentContext)
-  if (!context) {
-    throw new Error(
-      'useRelaySettingsComponent must be used within a RelaySettingsComponentProvider'
-    )
-  }
-  return context
-}
-
-export function RelaySettingsComponentProvider({ children }: { children: React.ReactNode }) {
-  const [renamingGroup, setRenamingGroup] = useState<string | null>(null)
-  const [expandedRelayGroup, setExpandedRelayGroup] = useState<string | null>(null)
-
-  return (
-    <RelaySettingsComponentContext.Provider
-      value={{
-        renamingGroup,
-        setRenamingGroup,
-        expandedRelayGroup,
-        setExpandedRelayGroup
-      }}
-    >
-      {children}
-    </RelaySettingsComponentContext.Provider>
-  )
-}
--- a/src/components/RelaySettings/types.ts
+++ b/src/components/RelaySettings/types.ts
@@ -1,5 +0,0 @@
-export type TRelayGroup = {
-  groupName: string
-  relayUrls: string[]
-  isActive: boolean
-}
--- a/src/components/SearchDialog/index.tsx
+++ b/src/components/SearchDialog/index.tsx
@@ -4,7 +4,6 @@ import { CommandDialog, CommandInput, CommandItem, CommandList } from '@/compone
 import { useSearchProfiles } from '@/hooks'
 import { toNote, toNoteList, toProfile, toProfileList } from '@/lib/link'
 import { generateImageByPubkey } from '@/lib/pubkey'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
 import { TProfile } from '@/types'
 import { Hash, Notebook, UserRound } from 'lucide-react'
 import { nip19 } from 'nostr-tools'
@@ -83,12 +82,6 @@ export function SearchDialog({ open, setOpen }: { open: boolean; setOpen: Dispat
 }

 function NormalItem({ search, onClick }: { search: string; onClick?: () => void }) {
-  const { searchableRelayUrls } = useRelaySettings()
-
-  if (searchableRelayUrls.length === 0) {
-    return null
-  }
-
  return (
    <SecondaryPageLink to={toNoteList({ search })} onClick={onClick}>
      <CommandItem>
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,7 @@
 export const StorageKey = {
  THEME_SETTING: 'themeSetting',
-  RELAY_GROUPS: 'relayGroups',
+  RELAY_SETS: 'relaySets',
+  ACTIVE_RELAY_SET_ID: 'activeRelaySetId',
  ACCOUNTS: 'accounts',
  CURRENT_ACCOUNT: 'currentAccount',
  ADD_CLIENT_TAG: 'addClientTag'
--- a/src/hooks/useFetchFollowings.tsx
+++ b/src/hooks/useFetchFollowings.tsx
@@ -1,4 +1,4 @@
-import { tagNameEquals } from '@/lib/tag'
+import { getFollowingsFromFollowListEvent } from '@/lib/event'
 import client from '@/services/client.service'
 import { Event } from 'nostr-tools'
 import { useEffect, useState } from 'react'
@@ -18,13 +18,7 @@ export function useFetchFollowings(pubkey?: string | null) {
        if (!event) return

        setFollowListEvent(event)
-        setFollowings(
-          event.tags
-            .filter(tagNameEquals('p'))
-            .map(([, pubkey]) => pubkey)
-            .filter(Boolean)
-            .reverse()
-        )
+        setFollowings(getFollowingsFromFollowListEvent(event))
      } finally {
        setIsFetching(false)
      }
--- a/src/hooks/useFetchRelayInfos.tsx
+++ b/src/hooks/useFetchRelayInfos.tsx
@@ -7,6 +7,7 @@ export function useFetchRelayInfos(urls: string[]) {
  const [isFetching, setIsFetching] = useState(true)
  const [relayInfos, setRelayInfos] = useState<(TRelayInfo | undefined)[]>([])
  const [areAlgoRelays, setAreAlgoRelays] = useState(false)
+  const [searchableRelayUrls, setSearchableRelayUrls] = useState<string[]>([])
  const urlsString = JSON.stringify(urls)

  useEffect(() => {
@@ -22,6 +23,15 @@ export function useFetchRelayInfos(urls: string[]) {
        const relayInfos = await client.fetchRelayInfos(urls)
        setRelayInfos(relayInfos)
        setAreAlgoRelays(relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo)))
+        setSearchableRelayUrls(
+          relayInfos
+            .map((relayInfo, index) => ({
+              url: urls[index],
+              searchable: relayInfo?.supported_nips?.includes(50)
+            }))
+            .filter((relayInfo) => relayInfo.searchable)
+            .map((relayInfo) => relayInfo.url)
+        )
      } catch (err) {
        console.error(err)
      } finally {
@@ -33,5 +43,5 @@ export function useFetchRelayInfos(urls: string[]) {
    fetchRelayInfos()
  }, [urlsString])

-  return { relayInfos, isFetching, areAlgoRelays }
+  return { relayInfos, isFetching, areAlgoRelays, searchableRelayUrls }
 }
--- a/src/hooks/useSearchProfiles.tsx
+++ b/src/hooks/useSearchProfiles.tsx
@@ -1,10 +1,12 @@
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useFeed } from '@/providers/FeedProvider'
 import client from '@/services/client.service'
 import { TProfile } from '@/types'
 import { useEffect, useState } from 'react'
+import { useFetchRelayInfos } from './useFetchRelayInfos'

 export function useSearchProfiles(search: string, limit: number) {
-  const { searchableRelayUrls } = useRelaySettings()
+  const { relayUrls } = useFeed()
+  const { searchableRelayUrls } = useFetchRelayInfos(relayUrls)
  const [isFetching, setIsFetching] = useState(true)
  const [error, setError] = useState<Error | null>(null)
  const [profiles, setProfiles] = useState<TProfile[]>([])
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -50,10 +50,9 @@ export default {
    "username's following": "{{username}}'s following",
    Login: 'Login',
    'Follows you': 'Follows you',
-    'relay collection name already exists': 'relay collection name already exists',
    'Relay Settings': 'Relay Settings',
-    'Relay collection name': 'Relay collection name',
-    'Add a new relay collection': 'Add a new relay collection',
+    'Relay set name': 'Relay set name',
+    'Add a new relay set': 'Add a new relay set',
    Add: 'Add',
    'n relays': '{{n}} relays',
    Rename: 'Rename',
@@ -90,7 +89,7 @@ export default {
    'Add client tag': 'Add client tag',
    'Show others this was sent via Jumble': 'Show others this was sent via Jumble',
    'Are you sure you want to logout?': 'Are you sure you want to logout?',
-    'relay feeds': 'relay feeds',
+    'relay sets': 'relay sets',
    edit: 'edit',
    Languages: 'Languages',
    Theme: 'Theme',
@@ -98,7 +97,7 @@ export default {
    Light: 'Light',
    Dark: 'Dark',
    Temporary: 'Temporary',
-    'Choose a relay collection': 'Choose a relay collection',
+    'Choose a relay set': 'Choose a relay set',
    'Switch account': 'Switch account',
    Pictures: 'Pictures',
    'Picture note': 'Picture note',
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -50,10 +50,9 @@ export default {
    "username's following": '{{username}} 的关注',
    Login: '登录',
    'Follows you': '关注了你',
-    'relay collection name already exists': '服务器组名已存在',
    'Relay Settings': '服务器设置',
-    'Relay collection name': '服务器组名',
-    'Add a new relay collection': '添加新的服务器组',
+    'Relay set name': '服务器组名',
+    'Add a new relay set': '添加新的服务器组',
    Add: '添加',
    'n relays': '{{n}} 个服务器',
    Rename: '重命名',
@@ -89,7 +88,7 @@ export default {
    'Add client tag': '添加客户端标签',
    'Show others this was sent via Jumble': '告诉别人这是通过 Jumble 发送的',
    'Are you sure you want to logout?': '确定要退出登录吗？',
-    'relay feeds': '服务器信息流',
+    'relay sets': '服务器组',
    edit: '编辑',
    Languages: '语言',
    Theme: '主题',
@@ -97,7 +96,7 @@ export default {
    Light: '浅色',
    Dark: '深色',
    Temporary: '临时',
-    'Choose a relay collection': '选择一个服务器组',
+    'Choose a relay set': '选择一个服务器组',
    'Switch account': '切换账户',
    Pictures: '图片',
    'Picture note': '图片笔记',
--- a/src/lib/draft-event.ts
+++ b/src/lib/draft-event.ts
@@ -1,5 +1,5 @@
 import { COMMENT_EVENT_KIND, PICTURE_EVENT_KIND } from '@/constants'
-import { TDraftEvent } from '@/types'
+import { TDraftEvent, TRelaySet } from '@/types'
 import dayjs from 'dayjs'
 import { Event, kinds } from 'nostr-tools'
 import {
@@ -82,6 +82,20 @@ export async function createShortTextNoteDraftEvent(
  }
 }

+// https://github.com/nostr-protocol/nips/blob/master/51.md
+export function createRelaySetDraftEvent(relaySet: TRelaySet): TDraftEvent {
+  return {
+    kind: kinds.Relaysets,
+    content: '',
+    tags: [
+      ['d', relaySet.id],
+      ['title', relaySet.name],
+      ...relaySet.relayUrls.map((url) => ['relay', url])
+    ],
+    created_at: dayjs().unix()
+  }
+}
+
 export async function createPictureNoteDraftEvent(
  content: string,
  options: {
--- a/src/lib/event.ts
+++ b/src/lib/event.ts
@@ -64,6 +64,18 @@ export function getUsingClient(event: Event) {
  return event.tags.find(tagNameEquals('client'))?.[1]
 }

+export function getFollowingsFromFollowListEvent(event: Event) {
+  return Array.from(
+    new Set(
+      event.tags
+        .filter(tagNameEquals('p'))
+        .map(([, pubkey]) => pubkey)
+        .filter(Boolean)
+        .reverse()
+    )
+  )
+}
+
 export async function extractMentions(content: string, parentEvent?: Event) {
  const pubkeySet = new Set<string>()
  const relatedEventIdSet = new Set<string>()
--- a/src/lib/random.ts
+++ b/src/lib/random.ts
@@ -0,0 +1,9 @@
+const SEED = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+
+export function randomString(len = 32) {
+  let str = ''
+  for (let i = 0; i < len; i++) {
+    str += SEED[Math.floor(Math.random() * SEED.length)]
+  }
+  return str
+}
--- a/src/pages/primary/NoteListPage/FeedButton.tsx
+++ b/src/pages/primary/NoteListPage/FeedButton.tsx
@@ -3,7 +3,7 @@ import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { simplifyUrl } from '@/lib/url'
 import { useFeed } from '@/providers/FeedProvider'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ChevronDown, Server, UsersRound } from 'lucide-react'
 import { forwardRef, HTMLAttributes, useState } from 'react'
@@ -43,21 +43,21 @@ export default function FeedButton() {
 const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  (props, ref) => {
    const { t } = useTranslation()
-    const { feedType } = useFeed()
-    const { relayGroups, temporaryRelayUrls } = useRelaySettings()
-    const activeGroup = relayGroups.find((group) => group.isActive)
+    const { feedType, relayUrls, activeRelaySetId } = useFeed()
+    const { relaySets } = useRelaySets()
+    const activeRelaySet = activeRelaySetId
+      ? relaySets.find((set) => set.id === activeRelaySetId)
+      : undefined
    const title =
      feedType === 'following'
        ? t('Following')
-        : temporaryRelayUrls.length > 0
-          ? temporaryRelayUrls.length === 1
-            ? simplifyUrl(temporaryRelayUrls[0])
-            : t('Temporary')
-          : activeGroup
-            ? activeGroup.relayUrls.length === 1
-              ? simplifyUrl(activeGroup.relayUrls[0])
-              : activeGroup.groupName
-            : t('Choose a relay collection')
+        : relayUrls.length > 0
+          ? relayUrls.length === 1
+            ? simplifyUrl(relayUrls[0])
+            : activeRelaySet
+              ? activeRelaySet.name
+              : t('Temporary')
+          : t('Choose a relay set')

    return (
      <div
--- a/src/pages/primary/NoteListPage/index.tsx
+++ b/src/pages/primary/NoteListPage/index.tsx
@@ -1,10 +1,7 @@
 import NoteList from '@/components/NoteList'
-import { BIG_RELAY_URLS } from '@/constants'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { useFeed } from '@/providers/FeedProvider'
-import { useNostr } from '@/providers/NostrProvider'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
 import SearchButton from './SearchButton'
@@ -12,18 +9,7 @@ import SearchButton from './SearchButton'
 export default function NoteListPage() {
  const { t } = useTranslation()
  const layoutRef = useRef<{ scrollToTop: () => void }>(null)
-  const { feedType } = useFeed()
-  const { relayUrls, temporaryRelayUrls } = useRelaySettings()
-  const { pubkey, relayList, followings } = useNostr()
-  const urls = useMemo(() => {
-    return feedType === 'following'
-      ? relayList?.read.length
-        ? relayList.read.slice(0, 4)
-        : BIG_RELAY_URLS
-      : temporaryRelayUrls.length > 0
-        ? temporaryRelayUrls
-        : relayUrls
-  }, [feedType, relayUrls, relayList, temporaryRelayUrls])
+  const { feedType, relayUrls, isReady, filter } = useFeed()

  useEffect(() => {
    if (layoutRef.current) {
@@ -38,20 +24,8 @@ export default function NoteListPage() {
      titlebar={<NoteListPageTitlebar />}
      displayScrollToTopButton
    >
-      {!!urls.length && (feedType === 'relays' || (relayList && followings)) ? (
-        <NoteList
-          relayUrls={urls}
-          filter={
-            feedType === 'following'
-              ? {
-                  authors:
-                    pubkey && !followings?.includes(pubkey)
-                      ? [...(followings ?? []), pubkey]
-                      : (followings ?? [])
-                }
-              : {}
-          }
-        />
+      {isReady ? (
+        <NoteList relayUrls={relayUrls} filter={filter} />
      ) : (
        <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
      )}
--- a/src/pages/secondary/NoteListPage/index.tsx
+++ b/src/pages/secondary/NoteListPage/index.tsx
@@ -1,16 +1,17 @@
 import NoteList from '@/components/NoteList'
 import { SEARCHABLE_RELAY_URLS } from '@/constants'
-import { useSearchParams } from '@/hooks'
+import { useFetchRelayInfos, useSearchParams } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useFeed } from '@/providers/FeedProvider'
 import { Filter } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'

 export default function NoteListPage({ index }: { index?: number }) {
  const { t } = useTranslation()
-  const { relayUrls, searchableRelayUrls } = useRelaySettings()
+  const { relayUrls } = useFeed()
+  const { searchableRelayUrls } = useFetchRelayInfos(relayUrls)
  const { searchParams } = useSearchParams()
  const relayUrlsString = JSON.stringify(relayUrls)
  const {
@@ -31,10 +32,7 @@ export default function NoteListPage({ index }: { index?: number }) {
      return {
        title: `${t('Search')}: ${search}`,
        filter: { search },
-        urls:
-          searchableRelayUrls.length < 4
-            ? searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4)
-            : searchableRelayUrls
+        urls: searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4)
      }
    }
    const relayUrl = searchParams.get('relay')
@@ -44,16 +42,6 @@ export default function NoteListPage({ index }: { index?: number }) {
    return { urls: relayUrls }
  }, [searchParams, relayUrlsString])

-  if (filter?.search && searchableRelayUrls.length === 0) {
-    return (
-      <SecondaryPageLayout index={index} titlebarContent={title}>
-        <div className="text-center text-sm text-muted-foreground">
-          {t('The relays you are connected to do not support search')}
-        </div>
-      </SecondaryPageLayout>
-    )
-  }
-
  return (
    <SecondaryPageLayout index={index} titlebarContent={title} displayScrollToTopButton>
      <NoteList key={title} filter={filter} relayUrls={urls} />
--- a/src/pages/secondary/ProfileListPage/index.tsx
+++ b/src/pages/secondary/ProfileListPage/index.tsx
@@ -1,7 +1,8 @@
 import UserItem from '@/components/UserItem'
-import { useSearchParams } from '@/hooks'
+import { SEARCHABLE_RELAY_URLS } from '@/constants'
+import { useFetchRelayInfos, useSearchParams } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { useFeed } from '@/providers/FeedProvider'
 import client from '@/services/client.service'
 import dayjs from 'dayjs'
 import { Filter } from 'nostr-tools'
@@ -13,7 +14,8 @@ const LIMIT = 50
 export default function ProfileListPage({ index }: { index?: number }) {
  const { t } = useTranslation()
  const { searchParams } = useSearchParams()
-  const { relayUrls, searchableRelayUrls } = useRelaySettings()
+  const { relayUrls } = useFeed()
+  const { searchableRelayUrls } = useFetchRelayInfos(relayUrls)
  const [until, setUntil] = useState<number>(() => dayjs().unix())
  const [hasMore, setHasMore] = useState<boolean>(true)
  const [pubkeySet, setPubkeySet] = useState(new Set<string>())
@@ -27,7 +29,7 @@ export default function ProfileListPage({ index }: { index?: number }) {
    return f
  }, [searchParams, until])
  const urls = useMemo(() => {
-    return filter.search ? searchableRelayUrls : relayUrls
+    return filter.search ? searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4) : relayUrls
  }, [relayUrls, searchableRelayUrls, filter])
  const title = useMemo(() => {
    return filter.search ? `${t('Search')}: ${filter.search}` : t('All users')
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -13,9 +13,9 @@ import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { toFollowingList } from '@/lib/link'
 import { generateImageByPubkey } from '@/lib/pubkey'
 import { SecondaryPageLink } from '@/PageManager'
+import { useFeed } from '@/providers/FeedProvider'
 import { useFollowList } from '@/providers/FollowListProvider'
 import { useNostr } from '@/providers/NostrProvider'
-import { useRelaySettings } from '@/providers/RelaySettingsProvider'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
@@ -24,9 +24,12 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
  const { t } = useTranslation()
  const { profile, isFetching } = useFetchProfile(id)
  const { relayList, isFetching: isFetchingRelayInfo } = useFetchRelayList(profile?.pubkey)
-  const { relayUrls: currentRelayUrls } = useRelaySettings()
+  const { relayUrls: currentRelayUrls } = useFeed()
  const relayUrls = useMemo(
-    () => relayList.write.slice(0, 4).concat(currentRelayUrls.slice(0, 1)),
+    () =>
+      relayList.write.length < 4
+        ? relayList.write.concat(currentRelayUrls).slice(0, 4)
+        : relayList.write.slice(0, 4),
    [relayList, currentRelayUrls]
  )
  const { pubkey: accountPubkey } = useNostr()
--- a/src/pages/secondary/RelaySettingsPage/index.tsx
+++ b/src/pages/secondary/RelaySettingsPage/index.tsx
@@ -1,4 +1,4 @@
-import RelaySettings from '@/components/RelaySettings'
+import RelaySetsSetting from '@/components/RelaySetsSetting'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { useTranslation } from 'react-i18next'

@@ -8,7 +8,7 @@ export default function RelaySettingsPage({ index }: { index?: number }) {
  return (
    <SecondaryPageLayout index={index} titlebarContent={t('Relay settings')}>
      <div className="px-4">
-        <RelaySettings hideTitle />
+        <RelaySetsSetting />
      </div>
    </SecondaryPageLayout>
  )
--- a/src/providers/FeedProvider.tsx
+++ b/src/providers/FeedProvider.tsx
@@ -1,9 +1,20 @@
+import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
+import client from '@/services/client.service'
+import storage from '@/services/storage.service'
 import { TFeedType } from '@/types'
-import { createContext, useContext, useState } from 'react'
+import { Filter } from 'nostr-tools'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { useNostr } from './NostrProvider'
+import { useRelaySets } from './RelaySetsProvider'

 type TFeedContext = {
  feedType: TFeedType
-  setFeedType: (feedType: TFeedType) => void
+  relayUrls: string[]
+  temporaryRelayUrls: string[]
+  filter: Filter
+  isReady: boolean
+  activeRelaySetId: string | null
+  switchFeed: (feedType: TFeedType, options?: { activeRelaySetId?: string }) => Promise<void>
 }

 const FeedContext = createContext<TFeedContext | undefined>(undefined)
@@ -17,7 +28,113 @@ export const useFeed = () => {
 }

 export function FeedProvider({ children }: { children: React.ReactNode }) {
+  const { pubkey } = useNostr()
+  const { relaySets } = useRelaySets()
  const [feedType, setFeedType] = useState<TFeedType>('relays')
+  const [relayUrls, setRelayUrls] = useState<string[]>([])
+  const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
+  const [filter, setFilter] = useState<Filter>({})
+  const [isReady, setIsReady] = useState(false)
+  const [activeRelaySetId, setActiveRelaySetId] = useState<string | null>(() =>
+    storage.getActiveRelaySetId()
+  )

-  return <FeedContext.Provider value={{ feedType, setFeedType }}>{children}</FeedContext.Provider>
+  useEffect(() => {
+    const init = async () => {
+      // temporary relay urls from query params
+      const searchParams = new URLSearchParams(window.location.search)
+      const tempRelays = searchParams
+        .getAll('r')
+        .map((url) =>
+          !url.startsWith('ws://') && !url.startsWith('wss://') ? `wss://${url}` : url
+        )
+        .filter((url) => isWebsocketUrl(url))
+        .map((url) => normalizeUrl(url))
+      if (tempRelays.length) {
+        setTemporaryRelayUrls(tempRelays)
+        return await switchFeed('temporary')
+      }
+
+      await switchFeed('relays', { activeRelaySetId })
+    }
+
+    init()
+  }, [])
+
+  useEffect(() => {
+    if (feedType !== 'following') return
+
+    switchFeed('following')
+  }, [pubkey])
+
+  useEffect(() => {
+    if (feedType !== 'relays') return
+
+    const relaySet = relaySets.find((set) => set.id === activeRelaySetId)
+    if (!relaySet) return
+
+    setRelayUrls(relaySet.relayUrls)
+  }, [relaySets])
+
+  const switchFeed = async (
+    feedType: TFeedType,
+    options: { activeRelaySetId?: string | null } = {}
+  ) => {
+    setIsReady(false)
+    if (feedType === 'relays') {
+      const relaySetId = options.activeRelaySetId ?? (relaySets.length > 0 ? relaySets[0].id : null)
+      if (!relaySetId) return
+
+      const relaySet =
+        relaySets.find((set) => set.id === options.activeRelaySetId) ??
+        (relaySets.length > 0 ? relaySets[0] : null)
+      if (relaySet) {
+        setFeedType(feedType)
+        setRelayUrls(relaySet.relayUrls)
+        setActiveRelaySetId(relaySet.id)
+        setFilter({})
+        setIsReady(true)
+        storage.setActiveRelaySetId(relaySet.id)
+      }
+      return
+    }
+    if (feedType === 'following') {
+      if (!pubkey) return
+      setFeedType(feedType)
+      setActiveRelaySetId(null)
+      const [relayList, followings] = await Promise.all([
+        client.fetchRelayList(pubkey),
+        client.fetchFollowings(pubkey)
+      ])
+      setRelayUrls(relayList.read.slice(0, 4))
+      setFilter({ authors: followings.includes(pubkey) ? followings : [...followings, pubkey] })
+      setIsReady(true)
+      return
+    }
+    if (feedType === 'temporary') {
+      setFeedType(feedType)
+      setRelayUrls(temporaryRelayUrls)
+      setActiveRelaySetId(null)
+      setFilter({})
+      setIsReady(true)
+      return
+    }
+    setIsReady(true)
+  }
+
+  return (
+    <FeedContext.Provider
+      value={{
+        feedType,
+        relayUrls,
+        temporaryRelayUrls,
+        filter,
+        isReady,
+        activeRelaySetId,
+        switchFeed
+      }}
+    >
+      {children}
+    </FeedContext.Provider>
+  )
 }
--- a/src/providers/NostrProvider/index.tsx
+++ b/src/providers/NostrProvider/index.tsx
@@ -7,7 +7,6 @@ import { ISigner, TAccount, TAccountPointer, TDraftEvent, TRelayList } from '@/t
 import dayjs from 'dayjs'
 import { Event, kinds } from 'nostr-tools'
 import { createContext, useContext, useEffect, useState } from 'react'
-import { useRelaySettings } from '../RelaySettingsProvider'
 import { BunkerSigner } from './bunker.signer'
 import { Nip07Signer } from './nip-07.signer'
 import { NsecSigner } from './nsec.signer'
@@ -47,7 +46,6 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
  const [account, setAccount] = useState<TAccountPointer | null>(null)
  const [signer, setSigner] = useState<ISigner | null>(null)
  const [openLoginDialog, setOpenLoginDialog] = useState(false)
-  const { relayUrls: currentRelayUrls } = useRelaySettings()
  const { relayList, isFetching: isFetchingRelayList } = useFetchRelayList(account?.pubkey)
  const { followings, isFetching: isFetchingFollowings } = useFetchFollowings(account?.pubkey)

@@ -196,10 +194,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {

  const publish = async (draftEvent: TDraftEvent, additionalRelayUrls: string[] = []) => {
    const event = await signEvent(draftEvent)
-    await client.publishEvent(
-      relayList.write.concat(additionalRelayUrls).concat(currentRelayUrls),
-      event
-    )
+    await client.publishEvent(relayList.write.concat(additionalRelayUrls), event)
    return event
  }

--- a/src/providers/RelaySetsProvider.tsx
+++ b/src/providers/RelaySetsProvider.tsx
@@ -0,0 +1,80 @@
+import { randomString } from '@/lib/random'
+import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
+import storage from '@/services/storage.service'
+import { TRelaySet } from '@/types'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type TRelaySetsContext = {
+  relaySets: TRelaySet[]
+  addRelaySet: (relaySetName: string, relayUrls?: string[]) => string
+  deleteRelaySet: (id: string) => void
+  updateRelaySet: (newSet: TRelaySet) => void
+  mergeRelaySets: (newSets: TRelaySet[]) => void
+}
+
+const RelaySetsContext = createContext<TRelaySetsContext | undefined>(undefined)
+
+export const useRelaySets = () => {
+  const context = useContext(RelaySetsContext)
+  if (!context) {
+    throw new Error('useRelaySets must be used within a RelaySetsProvider')
+  }
+  return context
+}
+
+export function RelaySetsProvider({ children }: { children: React.ReactNode }) {
+  const [relaySets, setRelaySets] = useState<TRelaySet[]>(() => storage.getRelaySets())
+
+  useEffect(() => {
+    storage.setRelaySets(relaySets)
+  }, [relaySets])
+
+  const deleteRelaySet = (id: string) => {
+    setRelaySets((pre) => pre.filter((set) => set.id !== id))
+  }
+
+  const updateRelaySet = (newSet: TRelaySet) => {
+    setRelaySets((pre) => {
+      return pre.map((set) => (set.id === newSet.id ? newSet : set))
+    })
+  }
+
+  const addRelaySet = (relaySetName: string, relayUrls: string[] = []) => {
+    const normalizedUrls = relayUrls
+      .filter((url) => isWebsocketUrl(url))
+      .map((url) => normalizeUrl(url))
+    const id = randomString()
+    setRelaySets((pre) => {
+      return [
+        ...pre,
+        {
+          id,
+          name: relaySetName,
+          relayUrls: normalizedUrls
+        }
+      ]
+    })
+    return id
+  }
+
+  const mergeRelaySets = (newSets: TRelaySet[]) => {
+    setRelaySets((pre) => {
+      const newIds = newSets.map((set) => set.id)
+      return pre.filter((set) => !newIds.includes(set.id)).concat(newSets)
+    })
+  }
+
+  return (
+    <RelaySetsContext.Provider
+      value={{
+        relaySets: relaySets,
+        addRelaySet,
+        deleteRelaySet,
+        updateRelaySet,
+        mergeRelaySets
+      }}
+    >
+      {children}
+    </RelaySetsContext.Provider>
+  )
+}
--- a/src/providers/RelaySettingsProvider.tsx
+++ b/src/providers/RelaySettingsProvider.tsx
@@ -1,178 +0,0 @@
-import { SEARCHABLE_RELAY_URLS } from '@/constants'
-import { checkAlgoRelay, checkSearchRelay } from '@/lib/relay'
-import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
-import client from '@/services/client.service'
-import storage from '@/services/storage.service'
-import { TRelayGroup } from '@/types'
-import { createContext, Dispatch, useContext, useEffect, useState } from 'react'
-import { useFeed } from './FeedProvider'
-
-type TRelaySettingsContext = {
-  relayGroups: TRelayGroup[]
-  temporaryRelayUrls: string[]
-  relayUrls: string[]
-  searchableRelayUrls: string[]
-  areAlgoRelays: boolean
-  switchRelayGroup: (groupName: string) => void
-  renameRelayGroup: (oldGroupName: string, newGroupName: string) => string | null
-  deleteRelayGroup: (groupName: string) => void
-  addRelayGroup: (groupName: string, relayUrls?: string[]) => string | null
-  updateRelayGroupRelayUrls: (groupName: string, relayUrls: string[]) => void
-  setTemporaryRelayUrls: Dispatch<string[]>
-}
-
-const RelaySettingsContext = createContext<TRelaySettingsContext | undefined>(undefined)
-
-export const useRelaySettings = () => {
-  const context = useContext(RelaySettingsContext)
-  if (!context) {
-    throw new Error('useRelaySettings must be used within a RelaySettingsProvider')
-  }
-  return context
-}
-
-export function RelaySettingsProvider({ children }: { children: React.ReactNode }) {
-  const { setFeedType } = useFeed()
-  const [relayGroups, setRelayGroups] = useState<TRelayGroup[]>([])
-  const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
-  const [relayUrls, setRelayUrls] = useState<string[]>(
-    temporaryRelayUrls.length
-      ? temporaryRelayUrls
-      : (relayGroups.find((group) => group.isActive)?.relayUrls ?? [])
-  )
-  const [searchableRelayUrls, setSearchableRelayUrls] = useState<string[]>(SEARCHABLE_RELAY_URLS)
-  const [areAlgoRelays, setAreAlgoRelays] = useState(false)
-
-  useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search)
-    const tempRelays = searchParams
-      .getAll('r')
-      .map((url) => (url.startsWith('wss://') || url.startsWith('ws://') ? url : `wss://${url}`))
-      .filter((url) => isWebsocketUrl(url))
-      .map((url) => normalizeUrl(url))
-    if (tempRelays.length) {
-      setTemporaryRelayUrls(tempRelays)
-      setFeedType('relays')
-    }
-    const storedGroups = storage.getRelayGroups()
-    setRelayGroups(storedGroups)
-  }, [])
-
-  useEffect(() => {
-    const handler = async () => {
-      const newRelayUrls = temporaryRelayUrls.length
-        ? temporaryRelayUrls
-        : (relayGroups.find((group) => group.isActive)?.relayUrls ?? [])
-
-      if (JSON.stringify(relayUrls) !== JSON.stringify(newRelayUrls)) {
-        setRelayUrls(newRelayUrls)
-      }
-      const relayInfos = await client.fetchRelayInfos(newRelayUrls)
-      const searchableRelayUrls = newRelayUrls.filter((_, index) =>
-        checkSearchRelay(relayInfos[index])
-      )
-      setSearchableRelayUrls(
-        searchableRelayUrls.length ? searchableRelayUrls : SEARCHABLE_RELAY_URLS
-      )
-      const nonAlgoRelayUrls = newRelayUrls.filter((_, index) => !checkAlgoRelay(relayInfos[index]))
-      setAreAlgoRelays(newRelayUrls.length > 0 && nonAlgoRelayUrls.length === 0)
-      client.setCurrentRelayUrls(nonAlgoRelayUrls)
-    }
-    handler()
-  }, [relayGroups, temporaryRelayUrls, relayUrls])
-
-  const updateGroups = (fn: (pre: TRelayGroup[]) => TRelayGroup[]) => {
-    let newGroups = relayGroups
-    setRelayGroups((pre) => {
-      newGroups = fn(pre)
-      return newGroups
-    })
-    storage.setRelayGroups(newGroups)
-  }
-
-  const switchRelayGroup = (groupName: string) => {
-    updateGroups((pre) =>
-      pre.map((group) => ({
-        ...group,
-        isActive: group.groupName === groupName
-      }))
-    )
-    setFeedType('relays')
-    setTemporaryRelayUrls([])
-  }
-
-  const deleteRelayGroup = (groupName: string) => {
-    updateGroups((pre) => pre.filter((group) => group.groupName !== groupName))
-  }
-
-  const updateRelayGroupRelayUrls = (groupName: string, relayUrls: string[]) => {
-    updateGroups((pre) =>
-      pre.map((group) => ({
-        ...group,
-        relayUrls: group.groupName === groupName ? relayUrls : group.relayUrls
-      }))
-    )
-  }
-
-  const renameRelayGroup = (oldGroupName: string, newGroupName: string) => {
-    if (newGroupName === '') {
-      return null
-    }
-    if (oldGroupName === newGroupName) {
-      return null
-    }
-    updateGroups((pre) => {
-      if (pre.some((group) => group.groupName === newGroupName)) {
-        return pre
-      }
-      return pre.map((group) => ({
-        ...group,
-        groupName: group.groupName === oldGroupName ? newGroupName : group.groupName
-      }))
-    })
-    return null
-  }
-
-  const addRelayGroup = (groupName: string, relayUrls: string[] = []) => {
-    if (groupName === '') {
-      return null
-    }
-    const normalizedUrls = relayUrls
-      .filter((url) => isWebsocketUrl(url))
-      .map((url) => normalizeUrl(url))
-    updateGroups((pre) => {
-      if (pre.some((group) => group.groupName === groupName)) {
-        return pre
-      }
-      return [
-        ...pre,
-        {
-          groupName,
-          relayUrls: normalizedUrls,
-          isActive: false
-        }
-      ]
-    })
-    return null
-  }
-
-  return (
-    <RelaySettingsContext.Provider
-      value={{
-        relayGroups,
-        temporaryRelayUrls,
-        relayUrls,
-        searchableRelayUrls,
-        areAlgoRelays,
-        switchRelayGroup,
-        renameRelayGroup,
-        deleteRelayGroup,
-        addRelayGroup,
-        updateRelayGroupRelayUrls,
-        setTemporaryRelayUrls
-      }}
-    >
-      {children}
-    </RelaySettingsContext.Provider>
-  )
-}
--- a/src/services/client.service.ts
+++ b/src/services/client.service.ts
@@ -1,4 +1,5 @@
 import { BIG_RELAY_URLS } from '@/constants'
+import { getFollowingsFromFollowListEvent } from '@/lib/event'
 import { formatPubkey } from '@/lib/pubkey'
 import { tagNameEquals } from '@/lib/tag'
 import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
@@ -100,7 +101,9 @@ class ClientService extends EventTarget {
  }

  async publishEvent(relayUrls: string[], event: NEvent) {
-    const result = await Promise.any(this.pool.publish(relayUrls, event))
+    const result = await Promise.any(
+      this.pool.publish(relayUrls.concat(this.defaultRelayUrls), event)
+    )
    this.dispatchEvent(new CustomEvent('eventPublished', { detail: event }))
    return result
  }
@@ -417,6 +420,11 @@ class ClientService extends EventTarget {
    return this.followListCache.fetch(pubkey)
  }

+  async fetchFollowings(pubkey: string) {
+    const followListEvent = await this.fetchFollowListEvent(pubkey)
+    return followListEvent ? getFollowingsFromFollowListEvent(followListEvent) : []
+  }
+
  updateFollowListCache(pubkey: string, event: NEvent) {
    this.followListCache.set(pubkey, Promise.resolve(event))
  }
--- a/src/services/storage.service.ts
+++ b/src/services/storage.service.ts
@@ -1,19 +1,26 @@
 import { StorageKey } from '@/constants'
 import { isSameAccount } from '@/lib/account'
-import { TAccount, TRelayGroup, TAccountPointer, TThemeSetting } from '@/types'
+import { randomString } from '@/lib/random'
+import { TAccount, TAccountPointer, TRelaySet, TThemeSetting } from '@/types'

-const DEFAULT_RELAY_GROUPS: TRelayGroup[] = [
+const DEFAULT_RELAY_SETS: TRelaySet[] = [
  {
-    groupName: 'Global',
-    relayUrls: ['wss://relay.damus.io/', 'wss://nos.lol/'],
-    isActive: true
+    id: randomString(),
+    name: 'Global',
+    relayUrls: ['wss://relay.damus.io/', 'wss://nos.lol/']
+  },
+  {
+    id: randomString(),
+    name: 'Algo',
+    relayUrls: ['wss://algo.utxo.one']
  }
 ]

 class StorageService {
  static instance: StorageService

-  private relayGroups: TRelayGroup[] = []
+  private relaySets: TRelaySet[] = []
+  private activeRelaySetId: string | null = null
  private themeSetting: TThemeSetting = 'system'
  private accounts: TAccount[] = []
  private currentAccount: TAccount | null = null
@@ -27,23 +34,64 @@ class StorageService {
  }

  init() {
-    const relayGroupsStr = window.localStorage.getItem(StorageKey.RELAY_GROUPS)
-    this.relayGroups = relayGroupsStr ? JSON.parse(relayGroupsStr) : DEFAULT_RELAY_GROUPS
    this.themeSetting =
      (window.localStorage.getItem(StorageKey.THEME_SETTING) as TThemeSetting) ?? 'system'
    const accountsStr = window.localStorage.getItem(StorageKey.ACCOUNTS)
    this.accounts = accountsStr ? JSON.parse(accountsStr) : []
    const currentAccountStr = window.localStorage.getItem(StorageKey.CURRENT_ACCOUNT)
    this.currentAccount = currentAccountStr ? JSON.parse(currentAccountStr) : null
+
+    const relaySetsStr = window.localStorage.getItem(StorageKey.RELAY_SETS)
+    if (!relaySetsStr) {
+      let relaySets: TRelaySet[] = []
+      const legacyRelayGroupsStr = window.localStorage.getItem('relayGroups')
+      if (legacyRelayGroupsStr) {
+        const legacyRelayGroups = JSON.parse(legacyRelayGroupsStr)
+        relaySets = legacyRelayGroups.map((group: any) => {
+          return {
+            id: randomString(),
+            name: group.groupName,
+            relayUrls: group.relayUrls
+          }
+        })
+      }
+      if (!relaySets.length) {
+        relaySets = DEFAULT_RELAY_SETS
+      }
+      const activeRelaySetId = relaySets[0].id
+      window.localStorage.setItem(StorageKey.RELAY_SETS, JSON.stringify(relaySets))
+      window.localStorage.setItem(StorageKey.ACTIVE_RELAY_SET_ID, activeRelaySetId)
+      this.relaySets = relaySets
+      this.activeRelaySetId = activeRelaySetId
+    } else {
+      this.relaySets = JSON.parse(relaySetsStr)
+      this.activeRelaySetId = window.localStorage.getItem(StorageKey.ACTIVE_RELAY_SET_ID) ?? null
+    }
  }

-  getRelayGroups() {
-    return this.relayGroups
+  getRelaySets() {
+    return this.relaySets
  }

-  setRelayGroups(relayGroups: TRelayGroup[]) {
-    window.localStorage.setItem(StorageKey.RELAY_GROUPS, JSON.stringify(relayGroups))
-    this.relayGroups = relayGroups
+  setRelaySets(relaySets: TRelaySet[]) {
+    this.relaySets = relaySets
+    window.localStorage.setItem(StorageKey.RELAY_SETS, JSON.stringify(this.relaySets))
+  }
+
+  getActiveRelaySetId() {
+    return this.activeRelaySetId
+  }
+
+  setActiveRelaySetId(id: string | null) {
+    this.activeRelaySetId = id
+    if (id) {
+      window.localStorage.setItem(
+        StorageKey.ACTIVE_RELAY_SET_ID,
+        JSON.stringify(this.activeRelaySetId)
+      )
+    } else {
+      window.localStorage.removeItem(StorageKey.ACTIVE_RELAY_SET_ID)
+    }
  }

  getThemeSetting() {
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,14 +26,14 @@ export type TWebMetadata = {
  image?: string | null
 }

-export type TRelayGroup = {
-  groupName: string
+export type TRelaySet = {
+  id: string
+  name: string
  relayUrls: string[]
-  isActive: boolean
 }

 export type TConfig = {
-  relayGroups: TRelayGroup[]
+  relayGroups: TRelaySet[]
  theme: TThemeSetting
 }

@@ -64,6 +64,6 @@ export type TAccount = {

 export type TAccountPointer = Pick<TAccount, 'pubkey' | 'signerType'>

-export type TFeedType = 'following' | 'relays'
+export type TFeedType = 'following' | 'relays' | 'temporary'

 export type TLanguage = 'en' | 'zh'