💨

2025-01-08 23:17:47 +08:00
parent fe815bcce5
commit 9f0f39f480
11 changed files with 98 additions and 105 deletions
--- a/src/components/LoginDialog/index.tsx
+++ b/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" />
--- a/src/components/RelaySetsSetting/PullFromRelaysButton.tsx
+++ b/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" />
--- a/src/components/RelaySetsSetting/RelayUrl.tsx
+++ b/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">
--- a/src/components/Sidebar/AccountButton.tsx
+++ b/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>
--- a/src/components/Sidebar/PostButton.tsx
+++ b/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>
--- a/src/components/Sidebar/SettingsButton.tsx
+++ b/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>
+  )
+}
--- a/src/components/Sidebar/index.tsx
+++ b/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 />
--- a/src/i18n/en.ts
+++ b/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'
  }
 }
--- a/src/i18n/zh.ts
+++ b/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: '服务器'
  }
 }
--- a/src/pages/primary/MePage/index.tsx
+++ b/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))}>
-            <UserRound />
-            {t('Profile')}
-          </Item>
-        </ItemGroup>
-        <ItemGroup>
-          <Item onClick={() => push(toSettings())}>
-            <Settings />
-            {t('Settings')}
-          </Item>
-        </ItemGroup>
-        <ItemGroup>
-          <Item onClick={() => setLoginDialogOpen(true)}>
-            <ArrowDownUp /> {t('Switch account')}
-          </Item>
-          <Separator className="bg-background" />
-          <Item
-            className="text-destructive focus:text-destructive"
-            onClick={() => setLogoutDialogOpen(true)}
-            hideChevron
-          >
-            <LogOut />
-            {t('Logout')}
-          </Item>
-        </ItemGroup>
+        <Item onClick={() => push(toProfile(pubkey))}>
+          <UserRound />
+          {t('Profile')}
+        </Item>
+        <Item onClick={() => setLoginDialogOpen(true)}>
+          <ArrowDownUp /> {t('Switch account')}
+        </Item>
+        <Separator className="bg-background" />
+        <Item
+          className="text-destructive focus:text-destructive"
+          onClick={() => setLogoutDialogOpen(true)}
+          hideChevron
+        >
+          <LogOut />
+          {t('Logout')}
+        </Item>
      </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>
-}
--- a/src/pages/secondary/SettingsPage/index.tsx
+++ b/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 { useState } from 'react'
+import { ChevronRight, Info, Languages, Server, SunMoon } from 'lucide-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>
-      <div className="flex justify-between items-center px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0">
+      </Item>
+      <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>
+  )
+}