feat: add a easy way to add relay to specified set

src/pages/primary/NoteListPage/index.tsx

@@ -5,6 +5,9 @@ import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
 import SearchButton from './SearchButton'
+import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
+import { Button } from '@/components/ui/button'
+import { ListPlus } from 'lucide-react'
 
 export default function NoteListPage() {
   const { t } = useTranslation()
@@ -21,7 +24,9 @@ export default function NoteListPage() {
     <PrimaryPageLayout
       pageName="home"
       ref={layoutRef}
-      titlebar={<NoteListPageTitlebar />}
+      titlebar={
+        <NoteListPageTitlebar temporaryRelayUrls={feedType === 'temporary' ? relayUrls : []} />
+      }
       displayScrollToTopButton
     >
       {isReady ? (
@@ -33,11 +38,20 @@ export default function NoteListPage() {
   )
 }
 
-function NoteListPageTitlebar() {
+function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
   return (
     <div className="flex gap-1 items-center h-full justify-between">
       <FeedButton />
-      <SearchButton />
+      <div>
+        <SearchButton />
+        {temporaryRelayUrls.length > 0 && (
+          <SaveRelayDropdownMenu urls={temporaryRelayUrls} asChild>
+            <Button variant="ghost" size="titlebar-icon">
+              <ListPlus />
+            </Button>
+          </SaveRelayDropdownMenu>
+        )}
+      </div>
     </div>
   )
 }

src/pages/secondary/NoteListPage/index.tsx

@@ -1,9 +1,12 @@
 import NoteList from '@/components/NoteList'
+import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
+import { Button } from '@/components/ui/button'
 import { SEARCHABLE_RELAY_URLS } from '@/constants'
 import { useFetchRelayInfos, useSearchParams } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
 import { useFeed } from '@/providers/FeedProvider'
+import { ListPlus } from 'lucide-react'
 import { Filter } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,33 +20,54 @@ export default function NoteListPage({ index }: { index?: number }) {
   const {
     title = '',
     filter,
-    urls
+    urls,
+    type
   } = useMemo<{
     title?: string
     filter?: Filter
     urls: string[]
+    type?: 'search' | 'hashtag' | 'relay'
   }>(() => {
     const hashtag = searchParams.get('t')
     if (hashtag) {
-      return { title: `# ${hashtag}`, filter: { '#t': [hashtag] }, urls: relayUrls }
+      return {
+        title: `# ${hashtag}`,
+        filter: { '#t': [hashtag] },
+        urls: relayUrls,
+        type: 'hashtag'
+      }
     }
     const search = searchParams.get('s')
     if (search) {
       return {
         title: `${t('Search')}: ${search}`,
         filter: { search },
-        urls: searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4)
+        urls: searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4),
+        type: 'search'
       }
     }
     const relayUrl = searchParams.get('relay')
     if (relayUrl && isWebsocketUrl(relayUrl)) {
-      return { title: simplifyUrl(relayUrl), urls: [relayUrl] }
+      return { title: simplifyUrl(relayUrl), urls: [relayUrl], type: 'relay' }
     }
     return { urls: relayUrls }
   }, [searchParams, relayUrlsString])
 
   return (
-    <SecondaryPageLayout index={index} title={title} displayScrollToTopButton>
+    <SecondaryPageLayout
+      index={index}
+      title={title}
+      controls={
+        type === 'relay' && (
+          <SaveRelayDropdownMenu urls={urls} asChild>
+            <Button variant="ghost" size="titlebar-icon">
+              <ListPlus />
+            </Button>
+          </SaveRelayDropdownMenu>
+        )
+      }
+      displayScrollToTopButton
+    >
       <NoteList key={title} filter={filter} relayUrls={urls} />
     </SecondaryPageLayout>
   )