feat: added a setting page

src/components/AppBar/AppBar.tsx

@@ -177,13 +177,13 @@ export const AppBar = () => {
                   onClick={() => {
                     setAnchorElUser(null)
 
-                    navigate(appPrivateRoutes.relays)
+                    navigate(appPrivateRoutes.settings)
                   }}
                   sx={{
                     justifyContent: 'center'
                   }}
                 >
-                  Relays
+                  Settings
                 </MenuItem>
                 <Link
                   to={appPublicRoutes.source}

src/pages/settings/Settings.tsx

@@ -0,0 +1,85 @@
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import RouterIcon from '@mui/icons-material/Router'
+import { useTheme } from '@mui/material'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import ListSubheader from '@mui/material/ListSubheader'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
+import { State } from '../../store/rootReducer'
+
+export const SettingsPage = () => {
+  const theme = useTheme()
+
+  const navigate = useNavigate()
+  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+
+  const listItem = (label: string, disabled = false) => {
+    return (
+      <>
+        <ListItemText
+          primary={label}
+          sx={{
+            color: theme.palette.text.primary
+          }}
+        />
+
+        {!disabled && (
+          <ArrowForwardIosIcon
+            style={{
+              color: theme.palette.action.active,
+              marginRight: -10
+            }}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <List
+      sx={{
+        width: '100%',
+        bgcolor: 'background.paper',
+        marginTop: 2
+      }}
+      subheader={
+        <ListSubheader
+          sx={{
+            fontSize: '1.5rem',
+            borderBottom: '0.5px solid',
+            paddingBottom: 2,
+            paddingTop: 2
+          }}
+        >
+          Settings
+        </ListSubheader>
+      }
+    >
+      <ListItemButton
+        onClick={() => {
+          navigate(getProfileSettingsRoute(usersPubkey!))
+        }}
+      >
+        <ListItemIcon>
+          <AccountCircleIcon />
+        </ListItemIcon>
+        {listItem('Profile')}
+      </ListItemButton>
+      <ListItemButton
+        onClick={() => {
+          navigate(appPrivateRoutes.relays)
+        }}
+      >
+        <ListItemIcon>
+          <RouterIcon />
+        </ListItemIcon>
+        {listItem('Relays')}
+      </ListItemButton>
+    </List>
+  )
+}

src/pages/settings/relays/index.tsx

@@ -1,37 +1,36 @@
-import { useEffect, useState } from 'react'
-import { Box, List, ListItem, TextField } from '@mui/material'
-import RouterIcon from '@mui/icons-material/Router'
-import styles from './style.module.scss'
-import Switch from '@mui/material/Switch'
-import ListItemText from '@mui/material/ListItemText'
-import Divider from '@mui/material/Divider'
-import { NostrController } from '../../controllers'
-import {
-  RelayMap,
-  RelayInfoObject,
-  RelayFee,
-  RelayConnectionState
-} from '../../types'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import LogoutIcon from '@mui/icons-material/Logout'
-import { useAppSelector, useAppDispatch } from '../../hooks'
-import {
-  compareObjects,
-  shorten,
-  hexToNpub,
-  capitalizeFirstLetter
-} from '../../utils'
+import RouterIcon from '@mui/icons-material/Router'
+import { Box, List, ListItem, TextField, Tooltip } from '@mui/material'
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import InputAdornment from '@mui/material/InputAdornment'
+import ListItemText from '@mui/material/ListItemText'
+import Switch from '@mui/material/Switch'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import { NostrController } from '../../../controllers'
+import { useAppDispatch, useAppSelector } from '../../../hooks'
 import {
   setRelayMapAction,
   setRelayMapUpdatedAction
-} from '../../store/actions'
-import { toast } from 'react-toastify'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
-import { Tooltip } from '@mui/material'
-import InputAdornment from '@mui/material/InputAdornment'
-import Button from '@mui/material/Button'
+} from '../../../store/actions'
+import {
+  RelayConnectionState,
+  RelayFee,
+  RelayInfoObject,
+  RelayMap
+} from '../../../types'
+import {
+  capitalizeFirstLetter,
+  compareObjects,
+  hexToNpub,
+  shorten
+} from '../../../utils'
+import styles from './style.module.scss'
 
 export const RelaysPage = () => {
   const nostrController = NostrController.getInstance()

src/pages/settings/relays/style.module.scss

@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import '../../../colors.scss';
 
 .container {
   margin-top: 25px;

src/routes/index.tsx

@@ -1,21 +1,23 @@
-import { HomePage } from '../pages/home'
 import { CreatePage } from '../pages/create'
+import { HomePage } from '../pages/home'
 import { LandingPage } from '../pages/landing/LandingPage'
 import { Login } from '../pages/login'
 import { ProfilePage } from '../pages/profile'
-import { hexToNpub } from '../utils'
+import { SettingsPage } from '../pages/settings/Settings'
+import { ProfileSettingsPage } from '../pages/settings/profile'
+import { RelaysPage } from '../pages/settings/relays'
 import { SignPage } from '../pages/sign'
 import { VerifyPage } from '../pages/verify'
-import { ProfileSettingsPage } from '../pages/settings/profile'
-import { RelaysPage } from '../pages/relays'
+import { hexToNpub } from '../utils'
 
 export const appPrivateRoutes = {
   homePage: '/',
   create: '/create',
   sign: '/sign',
   verify: '/verify',
+  settings: '/settings',
   profileSettings: '/settings/profile/:npub',
-  relays: '/relays'
+  relays: '/settings/relays'
 }
 
 export const appPublicRoutes = {
@@ -65,6 +67,10 @@ export const privateRoutes = [
     path: appPrivateRoutes.verify,
     element: <VerifyPage />
   },
+  {
+    path: appPrivateRoutes.settings,
+    element: <SettingsPage />
+  },
   {
     path: appPrivateRoutes.profileSettings,
     element: <ProfileSettingsPage />