💨

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>
-}

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>
+  )
+}