From cbd9d77dac4875f8a73cc8f5f7a074b6352f6b91 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 19 Mar 2023 08:54:17 +0700
Subject: [PATCH] added account menu

---
 src-tauri/Cargo.lock                          | 124 ++++++++++++++++++
 src-tauri/Cargo.toml                          |   2 +-
 src/components/columns/account/active.tsx     |  59 ++++++++-
 .../columns/navigator/newsfeed/index.tsx      |   2 +-
 src/pages/profile/index.tsx                   |  35 +++++
 src/pages/profile/personal.tsx                |  19 ---
 6 files changed, 217 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/profile/index.tsx
 delete mode 100644 src/pages/profile/personal.tsx

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index c162cbbe..fe0d6149 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -82,6 +82,22 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "attohttpc"
+version = "0.22.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fcf00bc6d5abb29b5f97e3c61a90b6d3caa12f3faf897d4a3e3607c050a35a7"
+dependencies = [
+ "flate2",
+ "http",
+ "log",
+ "native-tls",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "url",
+]
+
 [[package]]
 name = "autocfg"
 version = "1.1.0"
@@ -1578,6 +1594,24 @@ dependencies = [
  "windows-sys 0.42.0",
 ]
 
+[[package]]
+name = "native-tls"
+version = "0.2.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07226173c32f2926027b63cce4bcd8076c3552846cbe7925f3aaffeac0a3b92e"
+dependencies = [
+ "lazy_static",
+ "libc",
+ "log",
+ "openssl",
+ "openssl-probe",
+ "openssl-sys",
+ "schannel",
+ "security-framework",
+ "security-framework-sys",
+ "tempfile",
+]
+
 [[package]]
 name = "ndk"
 version = "0.6.0"
@@ -1774,6 +1808,51 @@ dependencies = [
  "windows-sys 0.42.0",
 ]
 
+[[package]]
+name = "openssl"
+version = "0.10.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b102428fd03bc5edf97f62620f7298614c45cedf287c271e7ed450bbaf83f2e1"
+dependencies = [
+ "bitflags",
+ "cfg-if",
+ "foreign-types",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
+
+[[package]]
+name = "openssl-macros"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b501e44f11665960c7e7fcf062c7d96a14ade4aa98116c004b2e37b5be7d736c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "openssl-probe"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
+
+[[package]]
+name = "openssl-sys"
+version = "0.9.80"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23bbbf7854cd45b83958ebe919f0e8e516793727652e27fda10a8384cfc790b7"
+dependencies = [
+ "autocfg",
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -2381,6 +2460,15 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "schannel"
+version = "0.1.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "713cfb06c7059f3588fb8044c0fad1d09e3c01d225e25b9220dbfdcf16dbb1b3"
+dependencies = [
+ "windows-sys 0.42.0",
+]
+
 [[package]]
 name = "scoped-tls"
 version = "1.0.1"
@@ -2403,6 +2491,29 @@ dependencies = [
  "untrusted",
 ]
 
+[[package]]
+name = "security-framework"
+version = "2.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a332be01508d814fed64bf28f798a146d73792121129962fdf335bb3c49a4254"
+dependencies = [
+ "bitflags",
+ "core-foundation",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
+[[package]]
+name = "security-framework-sys"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "31c9bb296072e961fcbd8853511dd39c2d8be2deb1e17c6860b1d30732b323b4"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "selectors"
 version = "0.22.0"
@@ -2492,6 +2603,18 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa 1.0.5",
+ "ryu",
+ "serde",
+]
+
 [[package]]
 name = "serde_with"
 version = "1.14.0"
@@ -2921,6 +3044,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fe7e0f1d535e7cbbbab43c82be4fc992b84f9156c16c160955617e0260ebc449"
 dependencies = [
  "anyhow",
+ "attohttpc",
  "cocoa",
  "dirs-next",
  "embed_plist",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 5573afdd..9c59ad3a 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["app-all", "clipboard-all", "notification-all", "shell-open", "system-tray", "window-start-dragging"] }
+tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "shell-open", "system-tray", "window-start-dragging"] }
 
 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"
diff --git a/src/components/columns/account/active.tsx b/src/components/columns/account/active.tsx
index bf1d20c9..4f990c9b 100644
--- a/src/components/columns/account/active.tsx
+++ b/src/components/columns/account/active.tsx
@@ -1,11 +1,15 @@
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';
 
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import { memo, useCallback, useContext, useMemo } from 'react';
 
 export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
+  const router = useRouter();
   const userData = JSON.parse(user.metadata);
 
   const { db }: any = useContext(DatabaseContext);
@@ -14,6 +18,13 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   const [relays]: any = useLocalStorage('relays');
   const [currentUser]: any = useLocalStorage('current-user');
 
+  const openProfile = () => {
+    router.push({
+      pathname: '/profile',
+      query: { id: currentUser.id },
+    });
+  };
+
   // save follows to database
   const insertFollows = useCallback(
     async (follows) => {
@@ -52,8 +63,50 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   }, [currentUser.id, insertFollows, relayPool, relays]);
 
   return (
-    <div className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
-      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
-    </div>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
+          <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="min-w-[220px] rounded-lg bg-zinc-800 p-1.5 shadow-lg shadow-black/50 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+          side="right"
+          sideOffset={5}
+          align="start"
+        >
+          <DropdownMenu.Item
+            onClick={() => openProfile()}
+            className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500"
+          >
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <AvatarIcon />
+            </div>
+            Open profile
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            Update profile
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            Copy public key
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <GearIcon />
+            </div>
+            Settings
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <ExitIcon />
+            </div>
+            Logout
+          </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-zinc-800" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   );
 });
diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed/index.tsx
index fc2c16e7..23394c83 100644
--- a/src/components/columns/navigator/newsfeed/index.tsx
+++ b/src/components/columns/navigator/newsfeed/index.tsx
@@ -9,7 +9,7 @@ export default function Newsfeed() {
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
-      <div className="flex flex-col px-2">
+      <div className="flex flex-col gap-1 px-2">
         <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
new file mode 100644
index 00000000..511b427c
--- /dev/null
+++ b/src/pages/profile/index.tsx
@@ -0,0 +1,35 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useRouter } from 'next/router';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [currentUser]: any = useLocalStorage('current-user');
+
+  return (
+    <div className="h-full w-full">
+      <p>{id}</p>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};
diff --git a/src/pages/profile/personal.tsx b/src/pages/profile/personal.tsx
deleted file mode 100644
index d97e5c03..00000000
--- a/src/pages/profile/personal.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import BaseLayout from '@layouts/base';
-
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
-
-export default function Page() {
-  return <div></div>;
-}
-
-Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
-) {
-  return <BaseLayout>{page}</BaseLayout>;
-};