From 35b0350728fc33b29be5cff20d41ab4d260a8cc8 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 18 Jan 2025 17:55:50 +0800
Subject: [PATCH] feat: improve style of save relay button

---
 src/components/OthersRelayList/index.tsx      |  8 +------
 .../RelaySetsSetting/TemporaryRelaySet.tsx    |  9 ++------
 .../SaveRelayDropdownMenu/index.tsx           | 22 +++++++++++++------
 src/pages/primary/NoteListPage/index.tsx      | 10 ++-------
 src/pages/secondary/RelayPage/index.tsx       |  8 ++-----
 5 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/components/OthersRelayList/index.tsx b/src/components/OthersRelayList/index.tsx
index b64a7784..e706e20a 100644
--- a/src/components/OthersRelayList/index.tsx
+++ b/src/components/OthersRelayList/index.tsx
@@ -1,12 +1,10 @@
 import { useSecondaryPage } from '@/PageManager'
 import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
 import { useFetchRelayInfo, useFetchRelayList } from '@/hooks'
 import { toRelay } from '@/lib/link'
 import { userIdToPubkey } from '@/lib/pubkey'
 import { simplifyUrl } from '@/lib/url'
 import { TMailboxRelay } from '@/types'
-import { ListPlus } from 'lucide-react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
@@ -57,11 +55,7 @@ function RelayItem({ relay }: { relay: TMailboxRelay }) {
         </div>
       </div>
       <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
-        <SaveRelayDropdownMenu urls={[url]}>
-          <Button variant="ghost" size="icon">
-            <ListPlus />
-          </Button>
-        </SaveRelayDropdownMenu>
+        <SaveRelayDropdownMenu urls={[url]} />
       </div>
     </div>
   )
diff --git a/src/components/RelaySetsSetting/TemporaryRelaySet.tsx b/src/components/RelaySetsSetting/TemporaryRelaySet.tsx
index 7796dae1..19063076 100644
--- a/src/components/RelaySetsSetting/TemporaryRelaySet.tsx
+++ b/src/components/RelaySetsSetting/TemporaryRelaySet.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@/components/ui/button'
 import { useFetchRelayInfos } from '@/hooks'
 import { useFeed } from '@/providers/FeedProvider'
 import client from '@/services/client.service'
-import { ListPlus, SearchCheck } from 'lucide-react'
+import { SearchCheck } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
@@ -64,11 +63,7 @@ export default function TemporaryRelaySet() {
           </div>
         ))}
       </div>
-      <SaveRelayDropdownMenu urls={temporaryRelayUrls} asChild>
-        <Button title="save" size="icon" variant="ghost">
-          <ListPlus />
-        </Button>
-      </SaveRelayDropdownMenu>
+      <SaveRelayDropdownMenu urls={temporaryRelayUrls} />
     </div>
   )
 }
diff --git a/src/components/SaveRelayDropdownMenu/index.tsx b/src/components/SaveRelayDropdownMenu/index.tsx
index 6b3d765c..279fa0c9 100644
--- a/src/components/SaveRelayDropdownMenu/index.tsx
+++ b/src/components/SaveRelayDropdownMenu/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,25 +10,32 @@ import {
 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 { Check, FolderPlus, Plus, Star } from 'lucide-react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function SaveRelayDropdownMenu({
-  children,
   urls,
-  asChild = false
+  atTitlebar = false
 }: {
-  children: ReactNode
   urls: string[]
-  asChild?: boolean
+  atTitlebar?: boolean
 }) {
   const { t } = useTranslation()
   const { relaySets } = useRelaySets()
   const normalizedUrls = useMemo(() => urls.map((url) => normalizeUrl(url)), [urls])
+  const alreadySaved = useMemo(
+    () => relaySets.some((set) => normalizedUrls.every((url) => set.relayUrls.includes(url))),
+    [relaySets, normalizedUrls]
+  )
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild={asChild}>{children}</DropdownMenuTrigger>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={atTitlebar ? 'titlebar-icon' : 'icon'}>
+          <Star className={alreadySaved ? 'fill-primary stroke-primary' : ''} />
+        </Button>
+      </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel>{t('Save to')} ...</DropdownMenuLabel>
         <DropdownMenuSeparator />
diff --git a/src/pages/primary/NoteListPage/index.tsx b/src/pages/primary/NoteListPage/index.tsx
index f340da20..a92407ff 100644
--- a/src/pages/primary/NoteListPage/index.tsx
+++ b/src/pages/primary/NoteListPage/index.tsx
@@ -1,13 +1,11 @@
 import NoteList from '@/components/NoteList'
+import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
 import { useFeed } from '@/providers/FeedProvider'
 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()
@@ -45,11 +43,7 @@ function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?
       <div>
         <SearchButton />
         {temporaryRelayUrls.length > 0 && (
-          <SaveRelayDropdownMenu urls={temporaryRelayUrls} asChild>
-            <Button variant="ghost" size="titlebar-icon">
-              <ListPlus />
-            </Button>
-          </SaveRelayDropdownMenu>
+          <SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
         )}
       </div>
     </div>
diff --git a/src/pages/secondary/RelayPage/index.tsx b/src/pages/secondary/RelayPage/index.tsx
index b7188f0f..db631728 100644
--- a/src/pages/secondary/RelayPage/index.tsx
+++ b/src/pages/secondary/RelayPage/index.tsx
@@ -4,7 +4,7 @@ import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import { Button } from '@/components/ui/button'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
-import { Check, Copy, ListPlus } from 'lucide-react'
+import { Check, Copy } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import NotFoundPage from '../NotFoundPage'
 
@@ -42,11 +42,7 @@ function RelayPageControls({ url }: { url: string }) {
       <Button variant="ghost" size="titlebar-icon" onClick={handleCopy}>
         {copied ? <Check /> : <Copy />}
       </Button>
-      <SaveRelayDropdownMenu urls={[url]} asChild>
-        <Button variant="ghost" size="titlebar-icon">
-          <ListPlus />
-        </Button>
-      </SaveRelayDropdownMenu>
+      <SaveRelayDropdownMenu urls={[url]} atTitlebar />
     </>
   )
 }