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>