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

src/components/RelaySetsSetting/TemporaryRelaySet.tsx

@@ -1,17 +1,15 @@
 import { Button } from '@/components/ui/button'
 import { useFetchRelayInfos } from '@/hooks'
-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 { ListPlus, SearchCheck } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
 
 export default function TemporaryRelaySet() {
   const { t } = useTranslation()
-  const { temporaryRelayUrls, switchFeed } = useFeed()
-  const { addRelaySet } = useRelaySets()
+  const { temporaryRelayUrls } = useFeed()
   const [relays, setRelays] = useState<
     {
       url: string
@@ -42,38 +40,35 @@ export default function TemporaryRelaySet() {
     return null
   }
 
-  const handleSave = () => {
-    const relaySetName =
-      temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : 'Temporary'
-    const id = addRelaySet(relaySetName, temporaryRelayUrls)
-    switchFeed('relays', { activeRelaySetId: id })
-  }
-
   return (
-    <div className={`w-full border border-dashed rounded-lg p-4 border-highlight bg-highlight/5`}>
-      <div className="flex justify-between items-center">
-        <div className="h-8 font-semibold">Temporary</div>
-        <Button title="save" size="icon" variant="ghost" onClick={handleSave}>
-          <Save />
-        </Button>
-      </div>
-      {relays.map((relay, index) => (
-        <div key={index} className="flex items-center justify-between">
-          <div className="flex gap-2 items-center">
-            {relay.isConnected ? (
-              <div className="text-green-500 text-xs">●</div>
-            ) : (
-              <div className="text-red-500 text-xs">●</div>
-            )}
-            <div className="text-muted-foreground text-sm">{relay.url}</div>
-            {relayInfos[index]?.supported_nips?.includes(50) && (
-              <div title={t('supports search')} className="text-highlight">
-                <SearchCheck size={14} />
-              </div>
-            )}
-          </div>
+    <div className="w-full border border-dashed rounded-lg p-4 border-highlight bg-highlight/5 flex gap-4 justify-between">
+      <div>
+        <div className="flex justify-between items-center">
+          <div className="h-8 font-semibold">Temporary</div>
         </div>
-      ))}
+        {relays.map((relay, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex gap-2 items-center">
+              {relay.isConnected ? (
+                <div className="text-green-500 text-xs">●</div>
+              ) : (
+                <div className="text-red-500 text-xs">●</div>
+              )}
+              <div className="text-muted-foreground text-sm">{relay.url}</div>
+              {relayInfos[index]?.supported_nips?.includes(50) && (
+                <div title={t('supports search')} className="text-highlight">
+                  <SearchCheck size={14} />
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+      <SaveRelayDropdownMenu urls={temporaryRelayUrls} asChild>
+        <Button title="save" size="icon" variant="ghost">
+          <ListPlus />
+        </Button>
+      </SaveRelayDropdownMenu>
     </div>
   )
 }

src/components/SaveRelayDropdownMenu/index.tsx

@@ -0,0 +1,87 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { normalizeUrl } from '@/lib/url'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
+import { TRelaySet } from '@/types'
+import { Check, FolderPlus, Plus } from 'lucide-react'
+import { ReactNode, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function SaveRelayDropdownMenu({
+  children,
+  urls,
+  asChild = false
+}: {
+  children: ReactNode
+  urls: string[]
+  asChild?: boolean
+}) {
+  const { t } = useTranslation()
+  const { relaySets } = useRelaySets()
+  const normalizedUrls = useMemo(() => urls.map((url) => normalizeUrl(url)), [urls])
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild={asChild}>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{t('Save to')} ...</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {relaySets.map((set) => (
+          <RelaySetItem key={set.id} set={set} urls={normalizedUrls} />
+        ))}
+        <DropdownMenuSeparator />
+        <SaveToNewSet urls={normalizedUrls} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function RelaySetItem({ set, urls }: { set: TRelaySet; urls: string[] }) {
+  const { updateRelaySet } = useRelaySets()
+  const saved = urls.every((url) => set.relayUrls.includes(url))
+
+  const handleClick = () => {
+    if (saved) {
+      updateRelaySet({
+        ...set,
+        relayUrls: set.relayUrls.filter((u) => !urls.includes(u))
+      })
+    } else {
+      updateRelaySet({
+        ...set,
+        relayUrls: Array.from(new Set([...set.relayUrls, ...urls]))
+      })
+    }
+  }
+
+  return (
+    <DropdownMenuItem key={set.id} className="flex gap-2" onClick={handleClick}>
+      {saved ? <Check /> : <Plus />}
+      {set.name}
+    </DropdownMenuItem>
+  )
+}
+
+function SaveToNewSet({ urls }: { urls: string[] }) {
+  const { t } = useTranslation()
+  const { addRelaySet } = useRelaySets()
+
+  const handleSave = () => {
+    const newSetName = prompt(t('Enter a name for the new relay set'))
+    if (newSetName) {
+      addRelaySet(newSetName, urls)
+    }
+  }
+
+  return (
+    <DropdownMenuItem onClick={handleSave}>
+      <FolderPlus />
+      {t('Save to a new relay set')}
+    </DropdownMenuItem>
+  )
+}

src/i18n/en.ts

@@ -142,6 +142,9 @@ export default {
     'Enter the password to decrypt your ncryptsec': 'Enter the password to decrypt your ncryptsec',
     Back: 'Back',
     'optional: encrypt nsec': 'optional: encrypt nsec',
-    password: 'password'
+    password: 'password',
+    'Save to': 'Save to',
+    'Enter a name for the new relay set': 'Enter a name for the new relay set',
+    'Save to a new relay set': 'Save to a new relay set'
   }
 }

src/i18n/zh.ts

@@ -143,6 +143,9 @@ export default {
     Back: '返回',
     'password (optional): encrypt nsec': '密码 (可选): 加密 nsec',
     'optional: encrypt nsec': '可选: 加密 nsec',
-    password: '密码'
+    password: '密码',
+    'Save to': '保存到',
+    'Enter a name for the new relay set': '输入新服务器组的名称',
+    'Save to a new relay 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>
   )