From 00c5c70b53828e19dd8c5ebfac7c62acaf4ea70a Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 8 Jul 2024 20:37:30 +0800
Subject: [PATCH] feat: user menu icons and profile item

---
 icons/mgc/exit_cute_re.svg                  |  1 +
 icons/mgc/gift_cute_re.svg                  |  1 +
 icons/mgc/user_3_cute_re.svg                |  1 +
 src/renderer/src/components/user-button.tsx | 31 ++++++++++++++++-----
 4 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 icons/mgc/exit_cute_re.svg
 create mode 100644 icons/mgc/gift_cute_re.svg
 create mode 100644 icons/mgc/user_3_cute_re.svg

diff --git a/icons/mgc/exit_cute_re.svg b/icons/mgc/exit_cute_re.svg
new file mode 100644
index 000000000..f98200b8d
--- /dev/null
+++ b/icons/mgc/exit_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path stroke="#10161F" stroke-linecap="round" stroke-width="2" d="M12.5 12H20m-2.5-2.828a8.616 8.616 0 0 1 2.478 2.307.89.89 0 0 1 0 1.042A8.631 8.631 0 0 1 17.5 14.83M12.5 3.5c-3.44.002-5.21.053-6.328 1.171C5 5.843 5 7.73 5 11.5v1c0 3.771 0 5.657 1.172 6.828C7.29 20.447 9.06 20.498 12.5 20.5"/></svg>
\ No newline at end of file
diff --git a/icons/mgc/gift_cute_re.svg b/icons/mgc/gift_cute_re.svg
new file mode 100644
index 000000000..0f17f1373
--- /dev/null
+++ b/icons/mgc/gift_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path stroke="#10161F" stroke-linejoin="round" stroke-width="2" d="M12 20V7m0 0V6m0 1h-1a3 3 0 0 1-3-3c0-.471 0-.707.146-.854C8.293 3 8.53 3 9 3a3 3 0 0 1 3 3m0 1h1a3 3 0 0 0 3-3c0-.471 0-.707-.146-.854C15.707 3 15.47 3 15 3a3 3 0 0 0-3 3m-7 6h14v1c0 2.809 0 4.213-.674 5.222a4.003 4.003 0 0 1-1.104 1.104C16.213 20 14.81 20 12 20c-2.809 0-4.213 0-5.222-.674a4.002 4.002 0 0 1-1.104-1.104C5 17.213 5 15.81 5 13zm.667 0h12.666c.623 0 .935 0 1.167-.134a1 1 0 0 0 .366-.366c.134-.232.134-.544.134-1.167 0-1.246 0-1.869-.268-2.333A2 2 0 0 0 19 7.268C18.536 7 17.913 7 16.667 7H7.333C6.087 7 5.464 7 5 7.268A2 2 0 0 0 4.268 8C4 8.464 4 9.087 4 10.333c0 .623 0 .935.134 1.167a1 1 0 0 0 .366.366c.232.134.544.134 1.167.134Z"/></svg>
\ No newline at end of file
diff --git a/icons/mgc/user_3_cute_re.svg b/icons/mgc/user_3_cute_re.svg
new file mode 100644
index 000000000..ee65411fe
--- /dev/null
+++ b/icons/mgc/user_3_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path stroke="#10161F" stroke-width="2" d="M20 18.5c0 1.933-3.582 2.5-8 2.5s-8-.567-8-2.5S7.582 14 12 14s8 2.567 8 4.5ZM16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
\ No newline at end of file
diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
index be87d3d3c..11d05b1f1 100644
--- a/src/renderer/src/components/user-button.tsx
+++ b/src/renderer/src/components/user-button.tsx
@@ -12,6 +12,7 @@ import { cn } from "@renderer/lib/utils"
 import { LoginModalContent } from "@renderer/modules/auth/LoginModalContent"
 import { useSettingModal } from "@renderer/modules/settings/modal/hooks"
 import { useSession } from "@renderer/queries/auth"
+import { WEB_URL } from "@shared/constants"
 import type { FC } from "react"
 import { memo } from "react"
 import { Link } from "react-router-dom"
@@ -82,13 +83,24 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
           Account
         </DropdownMenuLabel>
         <DropdownMenuLabel>
-          <div className="-mt-2 flex items-center justify-between">
-            <span className="">{user?.name}</span>
-            <UserAvatar className="h-5 shrink-0 p-0" hideName />
+          <div className="-mt-1 flex items-center gap-2">
+            <UserAvatar className="h-7 shrink-0 p-0" hideName />
+            <div className="max-w-40 leading-none">
+              <div className="truncate">{user?.name}</div>
+              <div className="truncate text-xs font-medium text-zinc-500">{user?.handle}</div>
+            </div>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-
+        <DropdownMenuItem
+          onClick={() => {
+            window.open(`${WEB_URL}/profile/${user?.handle}`, "_blank")
+          }}
+        >
+          <i className="i-mgc-user-3-cute-re mr-1.5" />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => {
             // Here we need to delay one frame, so it's two raf,
@@ -97,14 +109,15 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
             nextFrame(() => settingModalPresent("wallet"))
           }}
         >
+          <i className="i-mgc-power-outline mr-1.5" />
           Power
         </DropdownMenuItem>
-        <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => {
             nextFrame(settingModalPresent)
           }}
         >
+          <i className="i-mgc-settings-7-cute-re mr-1.5" />
           Preferences
         </DropdownMenuItem>
         <DropdownMenuSeparator />
@@ -112,15 +125,19 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
           <>
             <DropdownMenuItem
               onClick={() => {
-                // TODO
+              // TODO
               }}
             >
+              <i className="i-mgc-gift-cute-re mr-1.5" />
               Download Desktop app
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
-        <DropdownMenuItem onClick={signOut}>Log out</DropdownMenuItem>
+        <DropdownMenuItem onClick={signOut}>
+          <i className="i-mgc-exit-cute-re mr-1.5" />
+          Log out
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )