sigit/sigit.io
7
2
Fork 0
Code Issues 25 Pull Requests 1 Actions Packages Projects 1 Releases 5 Wiki Activity

New marks and settings refactor #323

Merged
enes merged 10 commits from fixes-7-3-25 into staging 2025-03-11 11:11:02 +00:00
Conversation 1 Commits 10 Files Changed 25 +325 -355
8 changed files with 325 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c1a9475a89 - Show all commits

131
src/pages/settings/Settings.tsx
View File

@ -1,87 +1,82 @@
import AccountCircleIcon from '@mui/icons-material/AccountCircle' import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
import RouterIcon from '@mui/icons-material/Router' import RouterIcon from '@mui/icons-material/Router'
import { ListItem, useTheme } from '@mui/material' import { Button } from '@mui/material'
import List from '@mui/material/List'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import ListSubheader from '@mui/material/ListSubheader'
import { useAppSelector } from '../../hooks/store' import { useAppSelector } from '../../hooks/store'
import { Link } from 'react-router-dom' import { NavLink, Outlet, To } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes' import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { Footer } from '../../components/Footer/Footer' import { Footer } from '../../components/Footer/Footer'
import ExtensionIcon from '@mui/icons-material/Extension' import ExtensionIcon from '@mui/icons-material/Extension'
import { LoginMethod } from '../../store/auth/types' import { LoginMethod } from '../../store/auth/types'
import styles from './style.module.scss'
import { ReactNode } from 'react'
export const SettingsPage = () => { const Item = (to: To, icon: ReactNode, label: string) => {
const theme = useTheme() return (
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth) <NavLink to={to}>
const listItem = (label: string, disabled = false) => { {({ isActive }) => (
return ( <Button
<> fullWidth
<ListItemText
primary={label}
sx={{ sx={{
color: theme.palette.text.primary transition: 'ease 0.3s',
justifyContent: 'start',
gap: '10px',
background: 'rgba(76,130,163,0)',
color: '#434343',
fontWeight: 600,
opacity: 0.75,
textTransform: 'none',
...(isActive
? {
background: '#447592',
color: 'white'
}
: {}),
'&:hover': {
opacity: 0.85,
gap: '15px',
background: '#5e8eab',
color: 'white'
}
}} }}
/> variant={'text'}
>
{icon}
{label}
</Button>
)}
</NavLink>
)
}
{!disabled && ( export const SettingsLayout = () => {
<ArrowForwardIosIcon const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
style={{
color: theme.palette.action.active,
marginRight: -10
}}
/>
)}
</>
)
}
return ( return (
<> <>
<Container> <Container>
<List <h2 className={styles.title}>Settings</h2>
sx={{ <div className={styles.main}>
width: '100%', <div>
bgcolor: 'background.paper' <aside className={styles.aside}>
}} {Item(
subheader={ getProfileSettingsRoute(usersPubkey!),
<ListSubheader <AccountCircleIcon />,
sx={{ 'Profile'
fontSize: '1.5rem', )}
borderBottom: '0.5px solid', {Item(appPrivateRoutes.relays, <RouterIcon />, 'Relays')}
paddingBottom: 2, {loginMethod === LoginMethod.nostrLogin &&
paddingTop: 2, Item(
zIndex: 2 appPrivateRoutes.nostrLogin,
}} <ExtensionIcon />,
> 'Nostr Login'
Settings )}
</ListSubheader> </aside>
} </div>
> <div className={styles.content}>
<ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}> <Outlet />
<ListItemIcon> </div>
<AccountCircleIcon /> </div>
</ListItemIcon>
{listItem('Profile')}
</ListItem>
<ListItem component={Link} to={appPrivateRoutes.relays}>
<ListItemIcon>
<RouterIcon />
</ListItemIcon>
{listItem('Relays')}
</ListItem>
{loginMethod === LoginMethod.nostrLogin && (
<ListItem component={Link} to={appPrivateRoutes.nostrLogin}>
<ListItemIcon>
<ExtensionIcon />
</ListItemIcon>
{listItem('Nostr Login')}
</ListItem>
)}
</List>
</Container> </Container>
<Footer /> <Footer />
</> </>

62
src/pages/settings/nostrLogin/index.tsx
View File

@ -3,11 +3,9 @@ import {
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
ListSubheader,
useTheme useTheme
} from '@mui/material' } from '@mui/material'
import { launch as launchNostrLoginDialog } from 'nostr-login' import { launch as launchNostrLoginDialog } from 'nostr-login'
import { Container } from '../../../components/Container'
import PeopleIcon from '@mui/icons-material/People' import PeopleIcon from '@mui/icons-material/People'
import ImportExportIcon from '@mui/icons-material/ImportExport' import ImportExportIcon from '@mui/icons-material/ImportExport'
import { useAppSelector } from '../../../hooks/store' import { useAppSelector } from '../../../hooks/store'
@ -20,59 +18,39 @@ export const NostrLoginPage = () => {
) )
return ( return (
<Container> <List>
<List <ListItemButton
sx={{ onClick={() => {
width: '100%', launchNostrLoginDialog('switch-account')
bgcolor: 'background.paper'
}} }}
subheader={
<ListSubheader
sx={{
fontSize: '1.5rem',
borderBottom: '0.5px solid',
paddingBottom: 2,
paddingTop: 2,
zIndex: 2
}}
>
Nostr Settings
</ListSubheader>
}
> >
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText
primary={'Nostr Login Accounts'}
sx={{
color: theme.palette.text.primary
}}
/>
</ListItemButton>
{nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
<ListItemButton <ListItemButton
onClick={() => { onClick={() => {
launchNostrLoginDialog('switch-account') launchNostrLoginDialog('import')
}} }}
> >
<ListItemIcon> <ListItemIcon>
<PeopleIcon /> <ImportExportIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={'Nostr Login Accounts'} primary={'Import / Export Keys'}
sx={{ sx={{
color: theme.palette.text.primary color: theme.palette.text.primary
}} }}
/> />
</ListItemButton> </ListItemButton>
{nostrLoginAuthMethod === NostrLoginAuthMethod.Local && ( )}
<ListItemButton </List>
onClick={() => {
launchNostrLoginDialog('import')
}}
>
<ListItemIcon>
<ImportExportIcon />
</ListItemIcon>
<ListItemText
primary={'Import / Export Keys'}
sx={{
color: theme.palette.text.primary
}}
/>
</ListItemButton>
)}
</List>
</Container>
) )
} }

217
src/pages/settings/profile/index.tsx
View File

@ -12,7 +12,6 @@ import {
InputProps, InputProps,
List, List,
ListItem, ListItem,
ListSubheader,
TextField, TextField,
Tooltip Tooltip
} from '@mui/material' } from '@mui/material'
@ -28,8 +27,6 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/store'
import { getRoboHashPicture, unixNow } from '../../../utils' import { getRoboHashPicture, unixNow } from '../../../utils'
import { Container } from '../../../components/Container'
import { Footer } from '../../../components/Footer/Footer'
import { LoadingSpinner } from '../../../components/LoadingSpinner' import { LoadingSpinner } from '../../../components/LoadingSpinner'
import { setUserProfile as updateUserProfile } from '../../../store/actions' import { setUserProfile as updateUserProfile } from '../../../store/actions'
@ -256,131 +253,111 @@ export const ProfileSettingsPage = () => {
return ( return (
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Container className={styles.container}> <List>
<List {userProfile && (
sx={{ <div>
bgcolor: 'background.paper', <ListItem
marginTop: 2
}}
subheader={
<ListSubheader
sx={{ sx={{
paddingBottom: 1, marginTop: 1,
paddingTop: 1, display: 'flex',
fontSize: '1.5rem', flexDirection: 'column'
zIndex: 2
}} }}
className={styles.subHeader}
> >
Profile Settings {userProfile.banner ? (
</ListSubheader>
}
>
{userProfile && (
<div>
<ListItem
sx={{
marginTop: 1,
display: 'flex',
flexDirection: 'column'
}}
>
{userProfile.banner ? (
<img
className={styles.bannerImg}
src={userProfile.banner}
alt="Banner Image"
/>
) : (
<Box className={styles.noBanner}> No banner found </Box>
)}
</ListItem>
{editItem('banner', 'Banner URL', undefined, undefined)}
<ListItem
sx={{
marginTop: 1,
display: 'flex',
flexDirection: 'column'
}}
>
<img <img
onError={(event: React.SyntheticEvent<HTMLImageElement>) => { className={styles.bannerImg}
event.currentTarget.src = getRoboHashPicture(npub!) src={userProfile.banner}
}} alt="Banner Image"
className={styles.img}
src={getProfileImage(userProfile)}
alt="Profile Image"
/> />
</ListItem> ) : (
<Box className={styles.noBanner}> No banner found </Box>
{editItem('image', 'Picture URL', undefined, undefined, {
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
})}
{editItem('name', 'Username')}
{editItem('displayName', 'Display Name')}
{editItem('nip05', 'Nostr Address (nip05)')}
{editItem('lud16', 'Lightning Address (lud16)')}
{editItem('about', 'About', true, 4)}
{editItem('website', 'Website')}
{isUsersOwnProfile && (
<>
{usersPubkey &&
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
{loginMethod === LoginMethod.privateKey &&
keys &&
keys.private &&
copyItem(
'••••••••••••••••••••••••••••••••••••••••••••••••••',
'Private Key',
keys.private
)}
</>
)} )}
{isUsersOwnProfile && ( </ListItem>
<>
{loginMethod === LoginMethod.nostrLogin && {editItem('banner', 'Banner URL', undefined, undefined)}
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
<ListItem <ListItem
sx={{ marginTop: 1 }} sx={{
onClick={() => { marginTop: 1,
launchNostrLoginDialog('import') display: 'flex',
flexDirection: 'column'
}}
>
<img
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
event.currentTarget.src = getRoboHashPicture(npub!)
}}
className={styles.img}
src={getProfileImage(userProfile)}
alt="Profile Image"
/>
</ListItem>
{editItem('image', 'Picture URL', undefined, undefined, {
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
})}
{editItem('name', 'Username')}
{editItem('displayName', 'Display Name')}
{editItem('nip05', 'Nostr Address (nip05)')}
{editItem('lud16', 'Lightning Address (lud16)')}
{editItem('about', 'About', true, 4)}
{editItem('website', 'Website')}
{isUsersOwnProfile && (
<>
{usersPubkey &&
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
{loginMethod === LoginMethod.privateKey &&
keys &&
keys.private &&
copyItem(
'••••••••••••••••••••••••••••••••••••••••••••••••••',
'Private Key',
keys.private
)}
</>
)}
{isUsersOwnProfile && (
<>
{loginMethod === LoginMethod.nostrLogin &&
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
<ListItem
sx={{ marginTop: 1 }}
onClick={() => {
launchNostrLoginDialog('import')
}}
>
<TextField
label="Private Key (nostr-login)"
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
size="small"
className={styles.textField}
disabled
type={'password'}
InputProps={{
endAdornment: (
<LaunchIcon className={styles.copyItem} />
)
}} }}
> />
<TextField </ListItem>
label="Private Key (nostr-login)" )}
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••" </>
size="small" )}
className={styles.textField} </div>
disabled
type={'password'}
InputProps={{
endAdornment: (
<LaunchIcon className={styles.copyItem} />
)
}}
/>
</ListItem>
)}
</>
)}
</div>
)}
</List>
{isUsersOwnProfile && (
<LoadingButton
loading={savingProfileMetadata}
variant="contained"
onClick={handleSaveMetadata}
>
SAVE
</LoadingButton>
)} )}
</Container> </List>
<Footer /> {isUsersOwnProfile && (
<LoadingButton
sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
loading={savingProfileMetadata}
variant="contained"
onClick={handleSaveMetadata}
>
PUBLISH CHANGES
</LoadingButton>
)}
</> </>
) )
} }

6
src/pages/settings/profile/style.module.scss
View File

@ -1,9 +1,3 @@
.container {
display: flex;
flex-direction: column;
gap: 25px;
}
.textField { .textField {
width: 100%; width: 100%;
} }

7
src/pages/settings/relays/index.tsx
View File

@ -12,7 +12,6 @@ import ListItemText from '@mui/material/ListItemText'
import Switch from '@mui/material/Switch' import Switch from '@mui/material/Switch'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { Container } from '../../../components/Container'
import { import {
useAppDispatch, useAppDispatch,
useAppSelector, useAppSelector,
@ -32,7 +31,6 @@ import {
timeout timeout
} from '../../../utils' } from '../../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Footer } from '../../../components/Footer/Footer'
import { import {
getRelayListForUser, getRelayListForUser,
NDKRelayList, NDKRelayList,
@ -246,7 +244,7 @@ export const RelaysPage = () => {
} }
return ( return (
<Container className={styles.container}> <>
<Box className={styles.relayAddContainer}> <Box className={styles.relayAddContainer}>
<TextField <TextField
label="Add new relay" label="Add new relay"
@ -291,8 +289,7 @@ export const RelaysPage = () => {
))} ))}
</Box> </Box>
)} )}
<Footer /> </>
</Container>
) )
} }

160
src/pages/settings/relays/style.module.scss
View File

@ -1,107 +1,103 @@
@import '../../../styles/colors.scss'; @import '../../../styles/colors.scss';
.container { .relayURItextfield {
color: $text-color; width: 100%;
}
.relayURItextfield { .relayAddContainer {
width: 100%; display: flex;
flex-direction: row;
gap: 10px;
width: 100%;
align-items: start;
}
.sectionIcon {
font-size: 30px;
}
.sectionTitle {
margin-top: 35px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
gap: 5px;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.relaysContainer {
display: flex;
flex-direction: column;
gap: 15px;
}
.relay {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
.relayDivider {
margin-left: 10px;
margin-right: 10px;
} }
.relayAddContainer { .leaveRelayContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
width: 100%; cursor: pointer;
align-items: start;
} }
.sectionIcon { .showInfo {
font-size: 30px; cursor: pointer;
} }
.sectionTitle { .showInfoIcon {
margin-top: 35px; margin-right: 3px;
margin-bottom: 10px; margin-bottom: auto;
vertical-align: middle;
}
.relayInfoContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
gap: 5px; gap: 5px;
font-size: 1.5rem; text-wrap: wrap;
line-height: 2rem; }
.relayInfoTitle {
font-weight: 600; font-weight: 600;
} }
.relaysContainer { .relayInfoSubTitle {
display: flex; font-weight: 500;
flex-direction: column;
gap: 15px;
} }
.relay { .copyItem {
border: 1px solid rgba(0, 0, 0, 0.12); margin-left: 10px;
border-radius: 4px; color: #34495e;
vertical-align: bottom;
cursor: pointer;
}
.relayDivider { .connectionStatus {
margin-left: 10px; border-radius: 9999px;
margin-right: 10px; width: 10px;
} height: 10px;
margin-right: 5px;
margin-top: 2px;
}
.leaveRelayContainer { .connectionStatusConnected {
display: flex; background-color: $relay-status-connected;
flex-direction: row; }
gap: 10px;
cursor: pointer;
}
.showInfo { .connectionStatusNotConnected {
cursor: pointer; background-color: $relay-status-notconnected;
} }
.showInfoIcon { .connectionStatusUnknown {
margin-right: 3px; background-color: $input-text-color;
margin-bottom: auto;
vertical-align: middle;
}
.relayInfoContainer {
display: flex;
flex-direction: column;
gap: 5px;
text-wrap: wrap;
}
.relayInfoTitle {
font-weight: 600;
}
.relayInfoSubTitle {
font-weight: 500;
}
.copyItem {
margin-left: 10px;
color: #34495e;
vertical-align: bottom;
cursor: pointer;
}
.connectionStatus {
border-radius: 9999px;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
}
.connectionStatusConnected {
background-color: $relay-status-connected;
}
.connectionStatusNotConnected {
background-color: $relay-status-notconnected;
}
.connectionStatusUnknown {
background-color: $input-text-color;
}
} }
} }

43
src/pages/settings/style.module.scss Normal file
View File

@ -0,0 +1,43 @@
.title {
margin: 0 0 15px 0;
}
.main {
width: 100%;
display: grid;
grid-template-columns: 0.4fr 1.6fr;
position: relative;
grid-gap: 25px;
>* {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 25px;
}
}
.aside {
width: 100%;
background: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
grid-gap: 15px;
position: sticky;
top: 15px;
}
.content {
width: 100%;
background: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
grid-gap: 15px;
}

44
src/routes/util.tsx
View File

@ -7,7 +7,7 @@ import { ProfilePage } from '../pages/profile'
import { NostrLoginPage } from '../pages/settings/nostrLogin' import { NostrLoginPage } from '../pages/settings/nostrLogin'
import { ProfileSettingsPage } from '../pages/settings/profile' import { ProfileSettingsPage } from '../pages/settings/profile'
import { RelaysPage } from '../pages/settings/relays' import { RelaysPage } from '../pages/settings/relays'
import { SettingsPage } from '../pages/settings/Settings' import { SettingsLayout } from '../pages/settings/Settings'
import { SignPage } from '../pages/sign' import { SignPage } from '../pages/sign'
import { VerifyPage } from '../pages/verify' import { VerifyPage } from '../pages/verify'
import { PrivateRoute } from './PrivateRoute' import { PrivateRoute } from './PrivateRoute'
@ -96,32 +96,22 @@ export const privateRoutes = [
path: appPrivateRoutes.settings, path: appPrivateRoutes.settings,
element: ( element: (
<PrivateRoute> <PrivateRoute>
<SettingsPage /> <SettingsLayout />
</PrivateRoute> </PrivateRoute>
) ),
}, children: [
{ {
path: appPrivateRoutes.profileSettings, path: appPrivateRoutes.profileSettings,
element: ( element: <ProfileSettingsPage />
<PrivateRoute> },
<ProfileSettingsPage /> {
</PrivateRoute> path: appPrivateRoutes.relays,
) element: <RelaysPage />
}, },
{ {
path: appPrivateRoutes.relays, path: appPrivateRoutes.nostrLogin,
element: ( element: <NostrLoginPage />
<PrivateRoute> }
<RelaysPage /> ]
</PrivateRoute>
)
},
{
path: appPrivateRoutes.nostrLogin,
element: (
<PrivateRoute>
<NostrLoginPage />
</PrivateRoute>
)
} }
] ]