From 4dfa610c872dad26c17faaf9ccb6d91a0133dd21 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 21 Nov 2023 14:17:47 +0200
Subject: [PATCH] simplify settings page

---
 packages/app/src/Pages/Layout/NavSidebar.tsx |   8 +-
 packages/app/src/Pages/settings/Root.tsx     | 118 ++++++-------------
 2 files changed, 43 insertions(+), 83 deletions(-)

diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 9caf2f14..467184cb 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -30,15 +30,15 @@ export default function NavSidebar() {
     <div className="sticky border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex xl:w-56 flex-col px-2 py-4 flex-shrink-0 gap-2">
       <LogoHeader />
       <div className="flex-grow flex flex-col justify-between">
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col">
           {MENU_ITEMS.map(item => (
             <NavLink
               key={item.link}
               to={item.link}
-              className="flex items-center py-2 px-4 rounded-full text-neutral-100 hover:bg-neutral-800 hover:text-neutral-200 hover:no-underline"
+              className="settings-row hover:no-underline"
               activeClassName="bg-neutral-800 text-neutral-200">
-              <Icon name={item.icon} size={24} className="mr-2" />
-              <span className="hidden xl:inline">{item.label}</span>
+              <Icon name={item.icon} size={24} />
+              <span className="hidden xl:inline ml-2">{item.label}</span>
             </NavLink>
           ))}
         </div>
diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx
index 21674550..df16e332 100644
--- a/packages/app/src/Pages/settings/Root.tsx
+++ b/packages/app/src/Pages/settings/Root.tsx
@@ -1,5 +1,5 @@
 import "./Root.css";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import Icon from "@/Icons/Icon";
@@ -7,7 +7,6 @@ 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 = () => {
@@ -17,98 +16,59 @@ const SettingsIndex = () => {
   const pageWidth = usePageWidth();
   const sub = getCurrentSubscription(LoginStore.allSubscriptions());
 
-  function handleLogout() {
+  const handleNavigate = useCallback((path) => {
+    navigate(path);
+  }, [navigate]);
+
+  const handleLogout = useCallback(() => {
     logout(login.id);
     navigate("/");
-  }
+  }, [login.id, navigate]);
 
   useEffect(() => {
     if (location.pathname === "/settings" && pageWidth >= 768) {
       navigate("/settings/profile", { replace: true });
     }
-  }, [location, pageWidth]);
+  }, [location, navigate, pageWidth]);
 
-  const [hideMenu, hideContent] = useMemo(() => {
-    return [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
-  }, [location, pageWidth]);
+  const [hideMenu, hideContent] = [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
+
+  const menuItems = [
+    { icon: "profile", message: messages.Profile, path: "profile" },
+    { icon: "relay", message: messages.Relays, path: "relays" },
+    { icon: "key", message: "Export Keys", id: "08zn6O", path: "keys" },
+    { icon: "shield-tick", message: "Moderation", id: "wofVHy", path: "moderation" },
+    { icon: "badge", message: "Nostr Address", id: "9pMqYs", path: "handle" },
+    { icon: "gear", message: messages.Preferences, path: "preferences" },
+    { icon: "wallet", message: "Wallet", id: "3yk8fB", path: "wallet" },
+    { icon: "heart", message: messages.Donate, path: "/donate" },
+    { icon: "hard-drive", message: "Cache", id: "DBiVK1", path: "cache" },
+    { icon: "profile", message: messages.SocialGraph, path: "/graph" }
+  ];
+
+  if (CONFIG.features.subscriptions) {
+    menuItems.push({ icon: "diamond", message: "Subscription", id: "R/6nsx", path: "/subscribe/manage" });
+  }
+
+  if (CONFIG.features.zapPool) {
+    menuItems.push({ icon: "piggy-bank", message: "Zap Pool", id: "i/dBAR", path: "/zap-pool" });
+  }
+
+  if (sub) {
+    menuItems.push({ icon: "code-circle", message: "Account Switcher", id: "7BX/yC", path: "accounts" });
+  }
 
   return (
     <div className="settings-nav">
       {!hideMenu && (
         <div>
-          <div className="settings-row" onClick={() => navigate("profile")}>
-            <Icon name="profile" size={24} />
-            <FormattedMessage {...messages.Profile} />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("relays")}>
-            <Icon name="relay" size={24} />
-            <FormattedMessage {...messages.Relays} />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("keys")}>
-            <Icon name="key" size={24} />
-            <FormattedMessage defaultMessage="Export Keys" id="08zn6O" />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("moderation")}>
-            <Icon name="shield-tick" size={24} />
-            <FormattedMessage defaultMessage="Moderation" id="wofVHy" />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("handle")}>
-            <Icon name="badge" size={24} />
-            <FormattedMessage defaultMessage="Nostr Address" id="9pMqYs" />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          {CONFIG.features.subscriptions && (
-            <div className="settings-row" onClick={() => navigate("/subscribe/manage")}>
-              <Icon name="diamond" size={24} />
-              <FormattedMessage defaultMessage="Subscription" id="R/6nsx" />
+          {menuItems.map(({ icon, message, id, path }) => (
+            <div className="settings-row" onClick={() => handleNavigate(path)} key={path}>
+              <Icon name={icon} size={24} />
+              <FormattedMessage {...(id ? { defaultMessage: message, id } : message)} />
               <Icon name="arrowFront" size={16} />
             </div>
-          )}
-          {sub && (
-            <div className="settings-row" onClick={() => navigate("accounts")}>
-              <Icon name="code-circle" size={24} />
-              <FormattedMessage defaultMessage="Account Switcher" id="7BX/yC" />
-              <Icon name="arrowFront" size={16} />
-            </div>
-          )}
-
-          <div className="settings-row" onClick={() => navigate("preferences")}>
-            <Icon name="gear" size={24} />
-            <FormattedMessage {...messages.Preferences} />
-            <Icon name="arrowFront" size={16} />
-          </div>
-
-          <div className="settings-row" onClick={() => navigate("wallet")}>
-            <Icon name="wallet" size={24} />
-            <FormattedMessage defaultMessage="Wallet" id="3yk8fB" />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("/donate")}>
-            <Icon name="heart" size={24} />
-            <FormattedMessage {...messages.Donate} />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          {CONFIG.features.zapPool && (
-            <div className="settings-row" onClick={() => navigate("/zap-pool")}>
-              <Icon name="piggy-bank" size={24} />
-              <FormattedMessage defaultMessage="Zap Pool" id="i/dBAR" />
-              <Icon name="arrowFront" size={16} />
-            </div>
-          )}
-          <div className="settings-row" onClick={() => navigate("cache")}>
-            <Icon name="hard-drive" size={24} />
-            <FormattedMessage defaultMessage="Cache" id="DBiVK1" />
-            <Icon name="arrowFront" size={16} />
-          </div>
-          <div className="settings-row" onClick={() => navigate("/graph")}>
-            <Icon name="profile" size={24} />
-            <FormattedMessage {...messages.SocialGraph} />
-            <Icon name="arrowFront" size={16} />
-          </div>
+          ))}
           <div className="settings-row" onClick={handleLogout}>
             <Icon name="logout" size={24} />
             <FormattedMessage {...messages.LogOut} />