From 9702529437412074f470bcba03bb296d7ff7b4a3 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Mon, 18 Dec 2023 16:29:06 +0200
Subject: [PATCH] new settings layout

---
 packages/app/src/Pages/Layout/Header.tsx      |   2 +-
 packages/app/src/Pages/Layout/RightColumn.tsx |   2 +-
 packages/app/src/Pages/settings/Menu.tsx      | 176 ++++++++++++++++++
 packages/app/src/Pages/settings/Root.css      |  63 -------
 packages/app/src/Pages/settings/Root.tsx      | 108 -----------
 .../settings/{SettingsPage.tsx => Routes.tsx} |  27 +--
 packages/app/src/index.tsx                    |   8 +-
 7 files changed, 195 insertions(+), 191 deletions(-)
 create mode 100644 packages/app/src/Pages/settings/Menu.tsx
 delete mode 100644 packages/app/src/Pages/settings/Root.css
 delete mode 100644 packages/app/src/Pages/settings/Root.tsx
 rename packages/app/src/Pages/settings/{SettingsPage.tsx => Routes.tsx} (78%)

diff --git a/packages/app/src/Pages/Layout/Header.tsx b/packages/app/src/Pages/Layout/Header.tsx
index 82c773ab..f6e967ac 100644
--- a/packages/app/src/Pages/Layout/Header.tsx
+++ b/packages/app/src/Pages/Layout/Header.tsx
@@ -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}
diff --git a/packages/app/src/Pages/Layout/RightColumn.tsx b/packages/app/src/Pages/Layout/RightColumn.tsx
index dd710524..cdf61d0d 100644
--- a/packages/app/src/Pages/Layout/RightColumn.tsx
+++ b/packages/app/src/Pages/Layout/RightColumn.tsx
@@ -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 = () => {
diff --git a/packages/app/src/Pages/settings/Menu.tsx b/packages/app/src/Pages/settings/Menu.tsx
new file mode 100644
index 00000000..de5efecf
--- /dev/null
+++ b/packages/app/src/Pages/settings/Menu.tsx
@@ -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;
diff --git a/packages/app/src/Pages/settings/Root.css b/packages/app/src/Pages/settings/Root.css
deleted file mode 100644
index d9fd3bdc..00000000
--- a/packages/app/src/Pages/settings/Root.css
+++ /dev/null
@@ -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;
-}
diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx
deleted file mode 100644
index 54a726f0..00000000
--- a/packages/app/src/Pages/settings/Root.tsx
+++ /dev/null
@@ -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;
diff --git a/packages/app/src/Pages/settings/SettingsPage.tsx b/packages/app/src/Pages/settings/Routes.tsx
similarity index 78%
rename from packages/app/src/Pages/settings/SettingsPage.tsx
rename to packages/app/src/Pages/settings/Routes.tsx
index 2118a4d1..9bb75bf6 100644
--- a/packages/app/src/Pages/settings/SettingsPage.tsx
+++ b/packages/app/src/Pages/settings/Routes.tsx
@@ -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 />,
diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx
index 65d57636..2b7fdd6e 100644
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@@ -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) {