💨

src/components/LoginDialog/index.tsx

@@ -33,7 +33,7 @@ export default function LoginDialog({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="w-96">
+      <DialogContent className="w-96 max-h-[90vh] overflow-auto">
         <DialogHeader>
           <DialogTitle className="hidden" />
           <DialogDescription className="hidden" />

src/components/RelaySetsSetting/PullFromRelaysButton.tsx

@@ -19,6 +19,7 @@ import { BIG_RELAY_URLS } from '@/constants'
 import { tagNameEquals } from '@/lib/tag'
 import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
 import { useNostr } from '@/providers/NostrProvider'
+import { useRelaySets } from '@/providers/RelaySetsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import client from '@/services/client.service'
 import { TRelaySet } from '@/types'
@@ -26,7 +27,6 @@ import { CloudDownload } from 'lucide-react'
 import { kinds } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import RelaySetCard from '../RelaySetCard'
-import { useRelaySets } from '@/providers/RelaySetsProvider'
 
 export default function PullFromRelaysButton() {
   const { pubkey } = useNostr()
@@ -60,7 +60,7 @@ export default function PullFromRelaysButton() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-h-[90vh] overflow-auto">
         <DialogHeader>
           <DialogTitle>Select the relay sets you want to pull</DialogTitle>
           <DialogDescription className="hidden" />

src/components/RelaySetsSetting/RelayUrl.tsx

@@ -2,66 +2,40 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useFetchRelayInfos } from '@/hooks'
 import { isWebsocketUrl, normalizeUrl } from '@/lib/url'
-import { useFeed } from '@/providers/FeedProvider'
 import { useRelaySets } from '@/providers/RelaySetsProvider'
-import client from '@/services/client.service'
 import { CircleX, SearchCheck } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   const { t } = useTranslation()
   const { relaySets, updateRelaySet } = useRelaySets()
-  const { activeRelaySetId } = useFeed()
   const [newRelayUrl, setNewRelayUrl] = useState('')
   const [newRelayUrlError, setNewRelayUrlError] = useState<string | null>(null)
   const relaySet = useMemo(
     () => relaySets.find((r) => r.id === relaySetId),
     [relaySets, relaySetId]
   )
-  const [relays, setRelays] = useState<
-    {
-      url: string
-      isConnected: boolean
-    }[]
-  >(relaySet?.relayUrls.map((url) => ({ url, isConnected: false })) ?? [])
-  const isActive = relaySet?.id === activeRelaySetId
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const connectionStatusMap = client.listConnectionStatus()
-      setRelays((pre) => {
-        return pre.map((relay) => {
-          const isConnected = connectionStatusMap.get(relay.url) || false
-          return { ...relay, isConnected }
-        })
-      })
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [])
 
   if (!relaySet) return null
 
   const removeRelayUrl = (url: string) => {
-    setRelays((relays) => relays.filter((relay) => relay.url !== url))
     updateRelaySet({
       ...relaySet,
-      relayUrls: relays.map(({ url }) => url).filter((u) => u !== url)
+      relayUrls: relaySet.relayUrls.filter((u) => u !== url)
     })
   }
 
   const saveNewRelayUrl = () => {
     if (newRelayUrl === '') return
     const normalizedUrl = normalizeUrl(newRelayUrl)
-    if (relays.some(({ url }) => url === normalizedUrl)) {
+    if (relaySet.relayUrls.includes(normalizedUrl)) {
       return setNewRelayUrlError(t('Relay already exists'))
     }
     if (!isWebsocketUrl(normalizedUrl)) {
       return setNewRelayUrlError(t('invalid relay URL'))
     }
-    setRelays((pre) => [...pre, { url: normalizedUrl, isConnected: false }])
-    const newRelayUrls = [...relays.map(({ url }) => url), normalizedUrl]
+    const newRelayUrls = [...relaySet.relayUrls, normalizedUrl]
     updateRelaySet({ ...relaySet, relayUrls: newRelayUrls })
     setNewRelayUrl('')
   }
@@ -81,14 +55,8 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   return (
     <>
       <div className="mt-1">
-        {relays.map(({ url, isConnected: isConnected }, index) => (
-          <RelayUrl
-            key={index}
-            isActive={isActive}
-            url={url}
-            isConnected={isConnected}
-            onRemove={() => removeRelayUrl(url)}
-          />
+        {relaySet.relayUrls.map((url, index) => (
+          <RelayUrl key={index} url={url} onRemove={() => removeRelayUrl(url)} />
         ))}
       </div>
       <div className="mt-2 flex gap-2">
@@ -107,17 +75,7 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   )
 }
 
-function RelayUrl({
-  isActive,
-  url,
-  isConnected,
-  onRemove
-}: {
-  isActive: boolean
-  url: string
-  isConnected: boolean
-  onRemove: () => void
-}) {
+function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
   const { t } = useTranslation()
   const {
     relayInfos: [relayInfo]
@@ -126,13 +84,6 @@ function RelayUrl({
   return (
     <div className="flex items-center justify-between">
       <div className="flex gap-2 items-center">
-        {!isActive ? (
-          <div className="text-muted-foreground text-xs">●</div>
-        ) : isConnected ? (
-          <div className="text-green-500 text-xs">●</div>
-        ) : (
-          <div className="text-red-500 text-xs">●</div>
-        )}
         <div className="text-muted-foreground text-sm">{url}</div>
         {relayInfo?.supported_nips?.includes(50) && (
           <div title={t('supports search')} className="text-highlight">

src/components/Sidebar/AccountButton.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { useFetchProfile } from '@/hooks'
-import { toProfile, toSettings } from '@/lib/link'
+import { toProfile } from '@/lib/link'
 import { formatPubkey, generateImageByPubkey } from '@/lib/pubkey'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
@@ -61,7 +61,6 @@ function ProfileButton() {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem onClick={() => push(toProfile(pubkey))}>{t('Profile')}</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => push(toSettings())}>{t('Settings')}</DropdownMenuItem>
         <DropdownMenuItem onClick={() => setLoginDialogOpen(true)}>
           {t('Switch account')}
         </DropdownMenuItem>

src/components/Sidebar/PostButton.tsx

@@ -15,6 +15,8 @@ export default function PostButton() {
           e.stopPropagation()
           setOpen(true)
         }}
+        variant="default"
+        className="bg-primary"
       >
         <PencilLine strokeWidth={3} />
       </SidebarItem>

src/components/Sidebar/SettingsButton.tsx

@@ -0,0 +1,14 @@
+import { toSettings } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import { Settings } from 'lucide-react'
+import SidebarItem from './SidebarItem'
+
+export default function SettingsButton() {
+  const { push } = useSecondaryPage()
+
+  return (
+    <SidebarItem title="Settings" onClick={() => push(toSettings())}>
+      <Settings strokeWidth={3} />
+    </SidebarItem>
+  )
+}

src/components/Sidebar/index.tsx

@@ -5,18 +5,20 @@ import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationButton'
 import PostButton from './PostButton'
 import SearchButton from './SearchButton'
+import SettingsButton from './SettingsButton'
 
 export default function PrimaryPageSidebar() {
   return (
     <div className="w-16 xl:w-52 hidden sm:flex flex-col pb-2 pt-4 px-2 justify-between h-full shrink-0">
       <div className="space-y-2">
-        <div className="px-2 mb-10 w-full">
+        <div className="px-2 mb-8 w-full">
           <Icon className="xl:hidden" />
           <Logo className="max-xl:hidden" />
         </div>
         <HomeButton />
         <NotificationsButton />
         <SearchButton />
+        <SettingsButton />
         <PostButton />
       </div>
       <AccountButton />