feat: sync relay sets

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

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