This commit is contained in:
parent
63b3ad2d57
commit
9702529437
@ -71,7 +71,7 @@ export function Header() {
|
||||
<header
|
||||
className={classNames(
|
||||
{ "md:hidden": pageName === "messages" },
|
||||
"flex justify-between items-center self-stretch gap-6 sticky top-0 z-10 bg-bg-color md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
|
||||
"flex justify-between items-center self-stretch gap-6 sticky top-0 z-10 bg-bg-color md:bg-header md:bg-opacity-50 md:backdrop-blur-lg",
|
||||
)}>
|
||||
<div
|
||||
onClick={handleBackButtonClick}
|
||||
|
@ -7,7 +7,7 @@ import useLogin from "@/Hooks/useLogin";
|
||||
|
||||
export default function RightColumn() {
|
||||
const { pubkey } = useLogin(s => ({ pubkey: s.publicKey }));
|
||||
const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
|
||||
const hideRightColumnPaths = ["/login", "/new", "/messages"];
|
||||
const show = !hideRightColumnPaths.some(path => location.pathname.startsWith(path));
|
||||
|
||||
const getTitleMessage = () => {
|
||||
|
176
packages/app/src/Pages/settings/Menu.tsx
Normal file
176
packages/app/src/Pages/settings/Menu.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { useCallback } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import Icon from "@/Icons/Icon";
|
||||
import { LoginStore, logout } from "@/Login";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import classNames from "classnames";
|
||||
import { getCurrentSubscription } from "@/Subscription";
|
||||
|
||||
const SettingsIndex = () => {
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const sub = getCurrentSubscription(LoginStore.allSubscriptions());
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
logout(login.id);
|
||||
navigate("/");
|
||||
}, [login.id, navigate]);
|
||||
|
||||
const settingsGroups = [
|
||||
{
|
||||
title: "Account",
|
||||
items: [
|
||||
{
|
||||
icon: "profile",
|
||||
iconBg: "bg-green-500",
|
||||
message: <FormattedMessage id="itPgxd" defaultMessage="Profile" />,
|
||||
path: "profile",
|
||||
},
|
||||
{
|
||||
icon: "key",
|
||||
iconBg: "bg-amber-500",
|
||||
message: <FormattedMessage id="08zn6O" defaultMessage="Export Keys" />,
|
||||
path: "keys",
|
||||
},
|
||||
{
|
||||
icon: "badge",
|
||||
iconBg: "bg-pink-500",
|
||||
message: <FormattedMessage id="9pMqYs" defaultMessage="Nostr Address" />,
|
||||
path: "handle",
|
||||
},
|
||||
{
|
||||
icon: "gear",
|
||||
iconBg: "bg-slate-500",
|
||||
message: <FormattedMessage id="PCSt5T" defaultMessage="Preferences" />,
|
||||
path: "preferences",
|
||||
},
|
||||
{
|
||||
icon: "wallet",
|
||||
iconBg: "bg-emerald-500",
|
||||
message: <FormattedMessage id="3yk8fB" defaultMessage="Wallet" />,
|
||||
path: "wallet",
|
||||
},
|
||||
...(sub
|
||||
? [
|
||||
{
|
||||
icon: "code-circle",
|
||||
iconBg: "bg-indigo-500",
|
||||
message: <FormattedMessage id="FvanT6" defaultMessage="Accounts" />,
|
||||
path: "accounts",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Interaction",
|
||||
items: [
|
||||
{
|
||||
icon: "relay",
|
||||
iconBg: "bg-dark bg-opacity-20",
|
||||
message: <FormattedMessage id="RoOyAh" defaultMessage="Relays" />,
|
||||
path: "relays",
|
||||
},
|
||||
{
|
||||
icon: "shield-tick",
|
||||
iconBg: "bg-yellow-500",
|
||||
message: <FormattedMessage id="wofVHy" defaultMessage="Moderation" />,
|
||||
path: "moderation",
|
||||
},
|
||||
{
|
||||
icon: "bell-outline",
|
||||
iconBg: "bg-red-500",
|
||||
message: <FormattedMessage id="NAidKb" defaultMessage="Notifications" />,
|
||||
path: "notifications",
|
||||
},
|
||||
{
|
||||
icon: "link",
|
||||
iconBg: "bg-blue-500",
|
||||
message: <FormattedMessage id="hYOE+U" defaultMessage="Invite" />,
|
||||
path: "invite",
|
||||
},
|
||||
{
|
||||
icon: "hard-drive",
|
||||
iconBg: "bg-cyan-500",
|
||||
message: <FormattedMessage id="DBiVK1" defaultMessage="Cache" />,
|
||||
path: "cache",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
icon: "heart",
|
||||
iconBg: "bg-purple-500",
|
||||
message: <FormattedMessage id="2IFGap" defaultMessage="Donate" />,
|
||||
path: "/donate",
|
||||
},
|
||||
...(CONFIG.features.subscriptions
|
||||
? [
|
||||
{
|
||||
icon: "diamond",
|
||||
iconBg: "bg-violet-500",
|
||||
message: <FormattedMessage id="R/6nsx" defaultMessage="Subscription" />,
|
||||
path: "/subscribe/manage",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(CONFIG.features.zapPool
|
||||
? [
|
||||
{
|
||||
icon: "piggy-bank",
|
||||
iconBg: "bg-rose-500",
|
||||
message: <FormattedMessage id="i/dBAR" defaultMessage="Zap Pool" />,
|
||||
path: "/zap-pool",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Log Out",
|
||||
items: [
|
||||
{
|
||||
icon: "logout",
|
||||
iconBg: "bg-red-500",
|
||||
message: <FormattedMessage id="H0JBH6" defaultMessage="Log Out" />,
|
||||
action: handleLogout,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{settingsGroups.map((group, groupIndex) => (
|
||||
<div key={groupIndex} className="mb-4">
|
||||
<div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
|
||||
{group.items.map(({ icon, iconBg, message, path, action }, index) => (
|
||||
<Link
|
||||
to={path || "#"}
|
||||
onClick={action}
|
||||
key={path || index}
|
||||
end
|
||||
className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
|
||||
"rounded-t-xl": index === 0,
|
||||
"rounded-b-xl": index === group.items.length - 1,
|
||||
"border-t-0": index !== 0,
|
||||
})}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
|
||||
<Icon name={icon} size={16} className="w-4 h-4 relative" />
|
||||
</div>
|
||||
<span className="text-base font-semibold flex-grow">{message}</span>
|
||||
</div>
|
||||
<Icon name="arrowFront" size={12} className="text-secondary" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsIndex;
|
@ -1,63 +0,0 @@
|
||||
.settings-nav {
|
||||
display: grid;
|
||||
grid-template-columns: 237px auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-nav {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-nav > div {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.settings-nav > div.content {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.settings-nav .card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr 24px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12px 0px 12px 16px;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-row.inner {
|
||||
padding: 0.8em 0;
|
||||
background-color: unset;
|
||||
border-radius: unset;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-group-header {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12px 16px;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-row:hover,
|
||||
.settings-row.active,
|
||||
.settings-group-header:hover {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.align-end {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.settings-group-header .collapse-icon > svg {
|
||||
width: 8px;
|
||||
}
|
@ -1,108 +0,0 @@
|
||||
import "./Root.css";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Outlet, NavLink, useNavigate, useLocation } from "react-router-dom";
|
||||
import Icon from "@/Icons/Icon";
|
||||
import { LoginStore, logout } from "@/Login";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import { getCurrentSubscription } from "@/Subscription";
|
||||
import usePageWidth from "@/Hooks/usePageWidth";
|
||||
import messages from "./messages";
|
||||
|
||||
const SettingsIndex = () => {
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const pageWidth = usePageWidth();
|
||||
const sub = getCurrentSubscription(LoginStore.allSubscriptions());
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
logout(login.id);
|
||||
navigate("/");
|
||||
}, [login.id, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (location.pathname === "/settings" && pageWidth >= 768) {
|
||||
navigate("/settings/profile", { replace: true });
|
||||
}
|
||||
}, [location, navigate, pageWidth]);
|
||||
|
||||
const [hideMenu, hideContent] = [
|
||||
location.pathname !== "/settings" && pageWidth < 768,
|
||||
location.pathname === "/settings" && pageWidth < 768,
|
||||
];
|
||||
|
||||
const menuItems = [
|
||||
{ icon: "profile", message: <FormattedMessage defaultMessage="Profile" id="itPgxd" />, path: "profile" },
|
||||
{ icon: "relay", message: <FormattedMessage defaultMessage="Relays" id="RoOyAh" />, path: "relays" },
|
||||
{ icon: "key", message: <FormattedMessage defaultMessage="Export Keys" id="08zn6O" />, path: "keys" },
|
||||
{ icon: "shield-tick", message: <FormattedMessage defaultMessage="Moderation" id="wofVHy" />, path: "moderation" },
|
||||
{ icon: "badge", message: <FormattedMessage defaultMessage="Nostr Address" id="9pMqYs" />, path: "handle" },
|
||||
{ icon: "gear", message: <FormattedMessage defaultMessage="Preferences" id="PCSt5T" />, path: "preferences" },
|
||||
{
|
||||
icon: "bell-outline",
|
||||
message: <FormattedMessage defaultMessage="Notifications" id="NAidKb" />,
|
||||
path: "notifications",
|
||||
},
|
||||
{ icon: "wallet", message: <FormattedMessage defaultMessage="Wallet" id="3yk8fB" />, path: "wallet" },
|
||||
{ icon: "heart", message: <FormattedMessage defaultMessage="Donate" id="2IFGap" />, path: "/donate" },
|
||||
{ icon: "hard-drive", message: <FormattedMessage defaultMessage="Cache" id="DBiVK1" />, path: "cache" },
|
||||
{ icon: "link", message: <FormattedMessage defaultMessage="Invite" id="hYOE+U" />, path: "invite" },
|
||||
];
|
||||
|
||||
if (CONFIG.features.subscriptions) {
|
||||
menuItems.push({
|
||||
icon: "diamond",
|
||||
message: <FormattedMessage defaultMessage="Subscription" id="R/6nsx" />,
|
||||
path: "/subscribe/manage",
|
||||
});
|
||||
}
|
||||
|
||||
if (CONFIG.features.zapPool) {
|
||||
menuItems.push({
|
||||
icon: "piggy-bank",
|
||||
message: <FormattedMessage defaultMessage="Zap Pool" id="i/dBAR" />,
|
||||
path: "/zap-pool",
|
||||
});
|
||||
}
|
||||
|
||||
if (sub) {
|
||||
menuItems.push({
|
||||
icon: "code-circle",
|
||||
message: <FormattedMessage defaultMessage="Accounts" id="FvanT6" />,
|
||||
path: "accounts",
|
||||
});
|
||||
}
|
||||
|
||||
const getNavLinkClass = ({ isActive }: { isActive: boolean }) => {
|
||||
return isActive ? "settings-row active" : "settings-row";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-nav">
|
||||
{!hideMenu && (
|
||||
<div>
|
||||
{menuItems.map(({ icon, message, path }) => (
|
||||
<NavLink to={path} key={path} className={getNavLinkClass} end>
|
||||
<Icon name={icon} size={24} />
|
||||
{message}
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</NavLink>
|
||||
))}
|
||||
<div className="settings-row" onClick={handleLogout}>
|
||||
<Icon name="logout" size={24} />
|
||||
<FormattedMessage {...messages.LogOut} />
|
||||
<Icon name="arrowFront" size={16} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!hideContent && (
|
||||
<div className="content">
|
||||
<Outlet />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsIndex;
|
@ -1,5 +1,4 @@
|
||||
import { Outlet, RouteObject } from "react-router-dom";
|
||||
import SettingsIndex from "@/Pages/settings/Root";
|
||||
import Menu from "@/Pages/settings/Menu";
|
||||
import Profile from "@/Pages/settings/Profile";
|
||||
import Relay from "@/Pages/settings/Relays";
|
||||
import Preferences from "@/Pages/settings/Preferences";
|
||||
@ -10,23 +9,27 @@ import { WalletSettingsRoutes } from "@/Pages/settings/WalletSettings";
|
||||
import { ManageHandleRoutes } from "@/Pages/settings/handle";
|
||||
import ExportKeys from "@/Pages/settings/Keys";
|
||||
import ModerationSettings from "@/Pages/settings/Moderation";
|
||||
import { CacheSettings } from "./Cache";
|
||||
import { CacheSettings } from "@/Pages/settings/Cache";
|
||||
import { ReferralsPage } from "@/Pages/settings/Referrals";
|
||||
import { Outlet } from "react-router-dom";
|
||||
|
||||
import { ReferralsPage } from "./Referrals";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const SettingsPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="px-3">
|
||||
<Outlet />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const SettingsRoutes: RouteObject[] = [
|
||||
export default [
|
||||
{
|
||||
path: "",
|
||||
element: <SettingsIndex />,
|
||||
path: "/settings",
|
||||
element: <SettingsPage />,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
element: <Menu />,
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
element: <Profile />,
|
@ -40,7 +40,7 @@ import Layout from "@/Pages/Layout";
|
||||
import ProfilePage from "@/Pages/Profile/ProfilePage";
|
||||
import { RootRoutes, RootTabRoutes } from "@/Pages/Root";
|
||||
import NotificationsPage from "@/Pages/Notifications/Notifications";
|
||||
import SettingsPage, { SettingsRoutes } from "@/Pages/settings/SettingsPage";
|
||||
import SettingsRoutes from "@/Pages/settings/Routes";
|
||||
import ErrorPage from "@/Pages/ErrorPage";
|
||||
import NostrAddressPage from "@/Pages/NostrAddressPage";
|
||||
import MessagesPage from "@/Pages/Messages/MessagesPage";
|
||||
@ -247,11 +247,6 @@ const mainRoutes = [
|
||||
path: "/notifications",
|
||||
element: <NotificationsPage />,
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
element: <SettingsPage />,
|
||||
children: SettingsRoutes,
|
||||
},
|
||||
{
|
||||
path: "/free-nostr-address",
|
||||
element: <FreeNostrAddressPage />,
|
||||
@ -285,6 +280,7 @@ const mainRoutes = [
|
||||
element: <NetworkGraph />,
|
||||
},
|
||||
...OnboardingRoutes,
|
||||
...SettingsRoutes,
|
||||
] as Array<RouteObject>;
|
||||
|
||||
if (CONFIG.features.zapPool) {
|
||||
|
Loading…
Reference in New Issue
Block a user