From 7daa566cecc80320d332b6194a8275e23bfb933c Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 26 Jan 2025 22:45:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=92=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FeedSwitcher/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/FeedSwitcher/index.tsx b/src/components/FeedSwitcher/index.tsx
index dbd4842f..93420f34 100644
--- a/src/components/FeedSwitcher/index.tsx
+++ b/src/components/FeedSwitcher/index.tsx
@@ -7,6 +7,7 @@ import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { Circle, CircleCheck } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import RelaySetCard from '../RelaySetCard'
+import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
 
 export default function FeedSwitcher({ close }: { close?: () => void }) {
   const { t } = useTranslation()
@@ -50,6 +51,7 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
               switchFeed('temporary')
               close?.()
             }}
+            controls={<SaveRelayDropdownMenu urls={temporaryRelayUrls} />}
           />
         )}
         {relaySets
@@ -76,21 +78,26 @@ function FeedSwitcherItem({
   itemName,
   isActive,
   temporary = false,
-  onClick
+  onClick,
+  controls
 }: {
   itemName: string
   isActive: boolean
   temporary?: boolean
   onClick: () => void
+  controls?: React.ReactNode
 }) {
   return (
     <div
       className={`w-full border rounded-lg p-4 ${isActive ? 'border-highlight bg-highlight/5' : 'clickable'} ${temporary ? 'border-dashed' : ''}`}
       onClick={onClick}
     >
-      <div className="flex space-x-2 items-center">
-        <FeedToggle isActive={isActive} />
-        <div className="font-semibold">{itemName}</div>
+      <div className="flex justify-between items-center">
+        <div className="flex gap-2 items-center">
+          <FeedToggle isActive={isActive} />
+          <div className="font-semibold">{itemName}</div>
+        </div>
+        {controls}
       </div>
     </div>
   )