New settings page

src/index.css

@@ -65,6 +65,12 @@ a {
   justify-content: space-between;
 }
 
+@media (max-width: 1020px) {
+  .f-col-mobile {
+    flex-direction: column;
+  }
+}
+
 .pill {
   background: #171717;
   padding: 4px 8px;
@@ -84,13 +90,14 @@ a {
 .g8 {
   gap: 8px;
 }
-
+.g12 {
+  gap: 12px;
+}
 .g24 {
   gap: 24px;
 }
-
-.g12 {
-  gap: 12px;
+.g48 {
+  gap: 48px;
 }
 
 .w-max {

src/pages/layout.tsx

@@ -3,16 +3,16 @@ import { useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Outlet, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import { FormattedMessage } from "react-intl";
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import { hexToBech32 } from "@snort/shared";
 
 import { Icon } from "element/icon";
 import { useLogin, useLoginEvents } from "hooks/login";
 import { Profile } from "element/profile";
 import { NewStreamDialog } from "element/new-stream";
 import { LoginSignup } from "element/login-signup";
-import { Menu, MenuItem } from "@szhsin/react-menu";
-import { hexToBech32 } from "@snort/shared";
 import { Login } from "index";
-import { FormattedMessage } from "react-intl";
 
 export function LayoutPage() {
   const navigate = useNavigate();

src/pages/settings-page.css

@@ -1,16 +1,34 @@
-.profile-page {
-  display: flex;
-  justify-content: center;
+.settings-page {
+  width: 753px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.public-key {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+@media (max-width: 1020px) {
+  .settings-page {
+    padding: 0 24px;
+    width: calc(100vw - 48px);
+    margin: unset;
+    overflow-y: hidden;
+  }
 }
 
-.private-key {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.settings-page .tab-content {
+  overflow-wrap: break-word;
+  overflow: hidden;
+  padding: 24px;
+  border-radius: 24px;
+  background: #171717;
+}
+
+.settings-page .tab-options > div {
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.settings-page .tab-options > div:hover {
+  border-radius: 8px;
+  background: #171717;
 }

src/pages/settings-page.tsx

@@ -1,39 +1,80 @@
-import { useLogin } from "hooks/login";
-import { useNavigate } from "react-router-dom";
 import "./settings-page.css";
-import React from "react";
-import { Button } from "@getalby/bitcoin-connect-react";
-import Copy from "element/copy";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { Button as AlbyZapsButton } from "@getalby/bitcoin-connect-react";
 import { hexToBech32 } from "@snort/shared";
 
+import { useLogin } from "hooks/login";
+import Copy from "element/copy";
+
+const enum Tab {
+  Account,
+  Notifications
+}
+
 export function SettingsPage() {
   const navigate = useNavigate();
   const login = useLogin();
+  const [tab, setTab] = useState(Tab.Account);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!login) {
       navigate("/");
     }
   }, [login]);
 
+  function tabContent() {
+    switch (tab) {
+      case Tab.Account: {
+        return (
+          <>
+            <h1>
+              <FormattedMessage defaultMessage="Account" />
+            </h1>
+            {login?.pubkey && (
+              <div className="public-key">
+                <p>
+                  <FormattedMessage defaultMessage="Logged in as" />
+                </p>
+                <Copy text={hexToBech32("npub", login.pubkey)} />
+              </div>
+            )}
+            {login?.privateKey && (
+              <div className="private-key">
+                <p>
+                  <FormattedMessage defaultMessage="Private key" />
+                </p>
+                <Copy text={hexToBech32("nsec", login.privateKey)} />
+              </div>
+            )}
+            <h1>
+              <FormattedMessage defaultMessage="Zaps" />
+            </h1>
+            <AlbyZapsButton />
+          </>
+        )
+      }
+    }
+  }
   return (
     <div className="settings-page">
-      <h1>Account</h1>
-      {login?.pubkey && (
-        <div className="public-key">
-          <p>Logged in as</p>
-          <Copy text={login?.pubkey} maxSize={64} />
+      <div className="flex f-col g48">
+        <h1>
+          <FormattedMessage defaultMessage="Settings" />
+        </h1>
+        <div className="flex g24 f-col-mobile">
+          <div className="flex f-col g24 tab-options">
+            <div onClick={() => setTab(Tab.Account)}>
+              <FormattedMessage defaultMessage="Account" />
+            </div>
+          </div>
+          <div className="tab-content">
+            {tabContent()}
+          </div>
         </div>
-      )}
-      {login?.privateKey && (
-        <div className="private-key">
-          <p>Private key</p>
-          <Copy text={hexToBech32("nsec", login.privateKey)} hideText />
-        </div>
-      )}
+      </div>
 
-      <h1>Zaps</h1>
-      <Button />
     </div>
   );
 }