feat: favorite relays (#250)

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -3,11 +3,11 @@ import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { simplifyUrl } from '@/lib/url'
 import { cn } from '@/lib/utils'
+import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
 import { useFeed } from '@/providers/FeedProvider'
-import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ChevronDown, Server, UsersRound } from 'lucide-react'
-import { forwardRef, HTMLAttributes, useState } from 'react'
+import { forwardRef, HTMLAttributes, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function FeedButton({ className }: { className?: string }) {
@@ -20,7 +20,7 @@ export default function FeedButton({ className }: { className?: string }) {
         <FeedSwitcherTrigger className={className} onClick={() => setOpen(true)} />
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerContent className="max-h-[80vh]">
-            <div className="p-4 overflow-auto">
+            <div className="py-4 px-2 overflow-auto">
               <FeedSwitcher close={() => setOpen(false)} />
             </div>
           </DrawerContent>
@@ -44,21 +44,32 @@ export default function FeedButton({ className }: { className?: string }) {
 const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => {
     const { t } = useTranslation()
-    const { feedType, relayUrls, activeRelaySetId } = useFeed()
-    const { relaySets } = useRelaySets()
-    const activeRelaySet = activeRelaySetId
-      ? relaySets.find((set) => set.id === activeRelaySetId)
-      : undefined
-    const title =
-      feedType === 'following'
-        ? t('Following')
-        : relayUrls.length > 0
-          ? relayUrls.length === 1
-            ? simplifyUrl(relayUrls[0])
-            : activeRelaySet
-              ? activeRelaySet.name
-              : t('Temporary')
-          : t('Choose a relay set')
+    const { feedInfo, relayUrls } = useFeed()
+    const { relaySets } = useFavoriteRelays()
+    const activeRelaySet = useMemo(() => {
+      return feedInfo.feedType === 'relays' && feedInfo.id
+        ? relaySets.find((set) => set.id === feedInfo.id)
+        : undefined
+    }, [feedInfo, relaySets])
+    const title = useMemo(() => {
+      if (feedInfo.feedType === 'following') {
+        return t('Following')
+      }
+      if (relayUrls.length === 0) {
+        return t('Choose a relay')
+      }
+      if (feedInfo.feedType === 'relay') {
+        return simplifyUrl(feedInfo.id ?? '')
+      }
+      if (feedInfo.feedType === 'relays') {
+        return activeRelaySet?.name ?? activeRelaySet?.id
+      }
+      if (feedInfo.feedType === 'temporary') {
+        return relayUrls.length === 1
+          ? simplifyUrl(relayUrls[0])
+          : (activeRelaySet?.name ?? t('Temporary'))
+      }
+    }, [feedInfo, activeRelaySet])
 
     return (
       <div
@@ -66,7 +77,7 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
         ref={ref}
         {...props}
       >
-        {feedType === 'following' ? <UsersRound /> : <Server />}
+        {feedInfo.feedType === 'following' ? <UsersRound /> : <Server />}
         <div className="text-lg font-semibold truncate">{title}</div>
         <ChevronDown />
       </div>

src/pages/primary/NoteListPage/index.tsx

@@ -17,17 +17,17 @@ const NoteListPage = forwardRef((_, ref) => {
   const { t } = useTranslation()
   const layoutRef = useRef<TPageRef>(null)
   const { pubkey, checkLogin } = useNostr()
-  const { feedType, relayUrls, isReady, filter } = useFeed()
+  const { feedInfo, relayUrls, isReady, filter } = useFeed()
   useImperativeHandle(ref, () => layoutRef.current)
 
   useEffect(() => {
     if (layoutRef.current) {
       layoutRef.current.scrollToTop()
     }
-  }, [JSON.stringify(relayUrls), feedType])
+  }, [JSON.stringify(relayUrls), feedInfo])
 
   let content = <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
-  if (feedType === 'following' && !pubkey) {
+  if (feedInfo.feedType === 'following' && !pubkey) {
     content = (
       <div className="flex justify-center w-full">
         <Button size="lg" onClick={() => checkLogin()}>
@@ -40,7 +40,7 @@ const NoteListPage = forwardRef((_, ref) => {
       <NoteList
         relayUrls={relayUrls}
         filter={filter}
-        needCheckAlgoRelay={feedType !== 'following'}
+        needCheckAlgoRelay={feedInfo.feedType !== 'following'}
       />
     )
   }
@@ -50,7 +50,9 @@ const NoteListPage = forwardRef((_, ref) => {
       pageName="home"
       ref={layoutRef}
       titlebar={
-        <NoteListPageTitlebar temporaryRelayUrls={feedType === 'temporary' ? relayUrls : []} />
+        <NoteListPageTitlebar
+          temporaryRelayUrls={feedInfo.feedType === 'temporary' ? relayUrls : []}
+        />
       }
       displayScrollToTopButton
     >
@@ -67,7 +69,7 @@ function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?
   return (
     <div className="flex gap-1 items-center h-full justify-between">
       <FeedButton className="flex-1 max-w-fit w-0" />
-      <div className="shrink-0">
+      <div className="shrink-0 flex gap-1 items-center">
         {temporaryRelayUrls.length > 0 && (
           <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
         )}