new settings layout

v0l · Dec 18, 2023 · 9702529 · 9702529
1 parent 63b3ad2
commit 9702529
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 191 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx