💨

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 = [...relaySet.relayUrls, normalizedUrl]
-    const newRelayUrls = [...relays.map(({ url }) => url), 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) => (
+        {relaySet.relayUrls.map((url, index) => (
-          <RelayUrl
+          <RelayUrl key={index} url={url} onRemove={() => removeRelayUrl(url)} />
-            key={index}
-            isActive={isActive}
-            url={url}
-            isConnected={isConnected}
-            onRemove={() => removeRelayUrl(url)}
-          />
         ))}
       </div>
       <div className="mt-2 flex gap-2">
@@ -107,17 +75,7 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
   )
 }
 
-function RelayUrl({
+function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
-  isActive,
-  url,
-  isConnected,
-  onRemove
-}: {
-  isActive: boolean
-  url: string
-  isConnected: boolean
-  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 />

src/i18n/en.ts

@@ -103,6 +103,7 @@ export default {
     'Picture note': 'Picture note',
     'A special note for picture-first clients like Olas':
       'A special note for picture-first clients like Olas',
-    'Picture note requires images': 'Picture note requires images'
+    'Picture note requires images': 'Picture note requires images',
+    Relays: 'Relays'
   }
 }

src/i18n/zh.ts

@@ -102,6 +102,7 @@ export default {
     'Picture note': '图片笔记',
     'A special note for picture-first clients like Olas':
       '一种可以在图片优先客户端 (如 Olas) 中显示的特殊笔记',
-    'Picture note requires images': '图片笔记需要有图片'
+    'Picture note requires images': '图片笔记需要有图片',
+    Relays: '服务器'
   }
 }

src/pages/primary/MePage/index.tsx

@@ -3,6 +3,7 @@ import LoginDialog from '@/components/LoginDialog'
 import LogoutDialog from '@/components/LogoutDialog'
 import PubkeyCopy from '@/components/PubkeyCopy'
 import QrCodePopover from '@/components/QrCodePopover'
+import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { SimpleUserAvatar } from '@/components/UserAvatar'
 import { SimpleUsername } from '@/components/Username'
@@ -24,7 +25,7 @@ export default function MePage() {
 
   if (!pubkey) {
     return (
-      <PrimaryPageLayout pageName="home">
+      <PrimaryPageLayout pageName="home" titlebar={<MePageTitlebar />}>
         <div className="flex flex-col p-4 gap-4 overflow-auto">
           <AccountManager />
         </div>
@@ -33,7 +34,7 @@ export default function MePage() {
   }
 
   return (
-    <PrimaryPageLayout pageName="home">
+    <PrimaryPageLayout pageName="home" titlebar={<MePageTitlebar />}>
       <div className="flex gap-4 items-center p-4">
         <SimpleUserAvatar userId={pubkey} size="big" />
         <div className="space-y-1">
@@ -49,32 +50,22 @@ export default function MePage() {
         </div>
       </div>
       <div className="mt-4">
-        <ItemGroup>
+        <Item onClick={() => push(toProfile(pubkey))}>
-          <Item onClick={() => push(toProfile(pubkey))}>
+          <UserRound />
-            <UserRound />
+          {t('Profile')}
-            {t('Profile')}
+        </Item>
-          </Item>
+        <Item onClick={() => setLoginDialogOpen(true)}>
-        </ItemGroup>
+          <ArrowDownUp /> {t('Switch account')}
-        <ItemGroup>
+        </Item>
-          <Item onClick={() => push(toSettings())}>
+        <Separator className="bg-background" />
-            <Settings />
+        <Item
-            {t('Settings')}
+          className="text-destructive focus:text-destructive"
-          </Item>
+          onClick={() => setLogoutDialogOpen(true)}
-        </ItemGroup>
+          hideChevron
-        <ItemGroup>
+        >
-          <Item onClick={() => setLoginDialogOpen(true)}>
+          <LogOut />
-            <ArrowDownUp /> {t('Switch account')}
+          {t('Logout')}
-          </Item>
+        </Item>
-          <Separator className="bg-background" />
-          <Item
-            className="text-destructive focus:text-destructive"
-            onClick={() => setLogoutDialogOpen(true)}
-            hideChevron
-          >
-            <LogOut />
-            {t('Logout')}
-          </Item>
-        </ItemGroup>
       </div>
       <LoginDialog open={loginDialogOpen} setOpen={setLoginDialogOpen} />
       <LogoutDialog open={logoutDialogOpen} setOpen={setLogoutDialogOpen} />
@@ -82,6 +73,17 @@ export default function MePage() {
   )
 }
 
+function MePageTitlebar() {
+  const { push } = useSecondaryPage()
+  return (
+    <div className="flex justify-end items-center">
+      <Button variant="ghost" size="titlebar-icon" onClick={() => push(toSettings())}>
+        <Settings />
+      </Button>
+    </div>
+  )
+}
+
 function Item({
   children,
   className,
@@ -91,7 +93,7 @@ function Item({
   return (
     <div
       className={cn(
-        'flex items-center justify-between px-4 py-2 w-full clickable rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
+        'flex clickable justify-between items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
         className
       )}
       {...props}
@@ -101,7 +103,3 @@ function Item({
     </div>
   )
 }
-
-function ItemGroup({ children }: { children: React.ReactNode }) {
-  return <div className="rounded-lg m-4 bg-muted/40">{children}</div>
-}

src/pages/secondary/SettingsPage/index.tsx

@@ -1,15 +1,19 @@
 import AboutInfoDialog from '@/components/AboutInfoDialog'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { toRelaySettings } from '@/lib/link'
+import { cn } from '@/lib/utils'
+import { useSecondaryPage } from '@/PageManager'
 import { useTheme } from '@/providers/ThemeProvider'
 import { TLanguage } from '@/types'
 import { SelectValue } from '@radix-ui/react-select'
-import { ChevronRight, Info, Languages, SunMoon } from 'lucide-react'
+import { ChevronRight, Info, Languages, Server, SunMoon } from 'lucide-react'
-import { useState } from 'react'
+import { HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function SettingsPage({ index }: { index?: number }) {
   const { t, i18n } = useTranslation()
+  const { push } = useSecondaryPage()
   const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
   const { themeSetting, setThemeSetting } = useTheme()
 
@@ -20,7 +24,7 @@ export default function SettingsPage({ index }: { index?: number }) {
 
   return (
     <SecondaryPageLayout index={index} titlebarContent={t('Settings')}>
-      <div className="flex justify-between items-center px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0">
+      <Item>
         <div className="flex items-center gap-4">
           <Languages />
           <div>{t('Languages')}</div>
@@ -34,8 +38,8 @@ export default function SettingsPage({ index }: { index?: number }) {
             <SelectItem value="zh">简体中文</SelectItem>
           </SelectContent>
         </Select>
-      </div>
+      </Item>
-      <div className="flex justify-between items-center px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0">
+      <Item>
         <div className="flex items-center gap-4">
           <SunMoon />
           <div>{t('Theme')}</div>
@@ -50,9 +54,16 @@ export default function SettingsPage({ index }: { index?: number }) {
             <SelectItem value="dark">{t('Dark')}</SelectItem>
           </SelectContent>
         </Select>
-      </div>
+      </Item>
+      <Item onClick={() => push(toRelaySettings())}>
+        <div className="flex items-center gap-4">
+          <Server />
+          <div>{t('Relays')}</div>
+        </div>
+        <ChevronRight />
+      </Item>
       <AboutInfoDialog>
-        <div className="flex clickable justify-between items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0">
+        <Item>
           <div className="flex items-center gap-4">
             <Info />
             <div>{t('About')}</div>
@@ -63,8 +74,22 @@ export default function SettingsPage({ index }: { index?: number }) {
             </div>
             <ChevronRight />
           </div>
-        </div>
+        </Item>
       </AboutInfoDialog>
     </SecondaryPageLayout>
   )
 }
+
+function Item({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex clickable justify-between items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}