From ddfcffeda59c2d2503645b36aba423eff9e2b5b9 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 10 Oct 2024 17:20:09 +0800
Subject: [PATCH] fix: dropmenu icon prop passive, profile avatar button cls

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../ui/dropdown-menu/dropdown-menu.tsx        |   8 +-
 .../src/modules/user/ProfileButton.tsx        | 177 +++++++++---------
 2 files changed, 94 insertions(+), 91 deletions(-)

diff --git a/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx b/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
index 7ae426c02..e9aa770b9 100644
--- a/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
+++ b/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -76,7 +76,7 @@ const DropdownMenuItem = React.forwardRef<
     inset?: boolean
     icon?: React.ReactNode
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, icon, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -87,12 +87,12 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   >
-    {!!props.icon && (
-      <span className="mr-1.5 inline-flex size-4 items-center justify-center">{props.icon}</span>
+    {!!icon && (
+      <span className="mr-1.5 inline-flex size-4 items-center justify-center">{icon}</span>
     )}
     {props.children}
     {/* Justify Fill */}
-    {!!props.icon && <span className="ml-1.5 size-4" />}
+    {!!icon && <span className="ml-1.5 size-4" />}
   </DropdownMenuPrimitive.Item>
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
diff --git a/apps/renderer/src/modules/user/ProfileButton.tsx b/apps/renderer/src/modules/user/ProfileButton.tsx
index 1b389898e..615248f68 100644
--- a/apps/renderer/src/modules/user/ProfileButton.tsx
+++ b/apps/renderer/src/modules/user/ProfileButton.tsx
@@ -48,107 +48,110 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
   }
 
   return (
-    <DropdownMenu onOpenChange={setDropdown}>
-      <DropdownMenuTrigger asChild className="!outline-none focus-visible:bg-theme-item-hover">
-        <ActionButton>
-          <UserAvatar ref={ref} className="h-6 p-0 [&_*]:border-0" hideName />
-        </ActionButton>
-      </DropdownMenuTrigger>
+    <>
+      <DropdownMenu onOpenChange={setDropdown}>
+        <DropdownMenuTrigger asChild className="!outline-none focus-visible:bg-theme-item-hover">
+          <ActionButton>
+            <UserAvatar ref={ref} className="h-6 p-0 [&_*]:border-0" hideName />
+          </ActionButton>
+        </DropdownMenuTrigger>
 
+        <DropdownMenuContent
+          className="min-w-[180px] overflow-visible px-1 pt-4"
+          side="bottom"
+          align="center"
+        >
+          <DropdownMenuLabel>
+            <div className="text-center leading-none">
+              <div className="truncate text-lg">{user?.name}</div>
+              <div className="truncate text-xs font-medium text-zinc-500">{user?.handle}</div>
+            </div>
+          </DropdownMenuLabel>
+
+          <DropdownMenuItem
+            onClick={() => {
+              nextFrame(presentPowerModal)
+            }}
+          >
+            <div className="flex w-full items-center justify-between gap-6 px-1.5 font-semibold">
+              <PowerButton />
+              <LevelButton />
+            </div>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            className="pl-3"
+            onClick={() => {
+              presentUserProfile(user?.id)
+            }}
+            icon={<i className="i-mgc-user-3-cute-re" />}
+          >
+            {t("user_button.profile")}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="pl-3"
+            onClick={() => {
+              presentAchievement()
+            }}
+            icon={<i className="i-mgc-trophy-cute-re" />}
+          >
+            {t("user_button.achievement")}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            className="pl-3"
+            onClick={() => {
+              nextFrame(settingModalPresent)
+            }}
+            icon={<i className="i-mgc-settings-7-cute-re" />}
+          >
+            {t("user_button.preferences")}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {!window.electron && (
+            <>
+              <DropdownMenuItem
+                className="pl-3"
+                onClick={() => {
+                  window.open(`${repository.url}/releases`)
+                }}
+                icon={<i className="i-mgc-download-2-cute-re" />}
+              >
+                {t("user_button.download_desktop_app")}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+          <DropdownMenuItem
+            className="pl-3"
+            onClick={signOut}
+            icon={<i className="i-mgc-exit-cute-re" />}
+          >
+            {t("user_button.log_out")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
       {x !== 0 && y !== 0 && (
         <RootPortal>
           <UserAvatar
             style={{
-              left: x,
+              left: x - (dropdown ? 16 : 0),
               top: y,
             }}
             className={cn(
               "pointer-events-none fixed -bottom-6 z-[999] p-0 duration-200 [&_*]:border-0",
-              dropdown ? "h-14 -translate-x-4" : "h-6",
+              "transform-gpu will-change-[left,top,height]",
+              dropdown ? "h-14 " : "h-6",
             )}
             hideName
           />
         </RootPortal>
       )}
-      <DropdownMenuContent
-        className="min-w-[180px] overflow-visible px-1 pt-4"
-        side="bottom"
-        align="center"
-      >
-        <DropdownMenuLabel>
-          <div className="text-center leading-none">
-            <div className="truncate text-lg">{user?.name}</div>
-            <div className="truncate text-xs font-medium text-zinc-500">{user?.handle}</div>
-          </div>
-        </DropdownMenuLabel>
-
-        <DropdownMenuItem
-          onClick={() => {
-            nextFrame(presentPowerModal)
-          }}
-        >
-          <div className="flex w-full items-center justify-between gap-6 px-1.5 font-semibold">
-            <PowerButton />
-            <LevelButton />
-          </div>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          className="pl-3"
-          onClick={() => {
-            presentUserProfile(user?.id)
-          }}
-          icon={<i className="i-mgc-user-3-cute-re" />}
-        >
-          {t("user_button.profile")}
-        </DropdownMenuItem>
-
-        <DropdownMenuItem
-          className="pl-3"
-          onClick={() => {
-            presentAchievement()
-          }}
-          icon={<i className="i-mgc-trophy-cute-re" />}
-        >
-          {t("user_button.achievement")}
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          className="pl-3"
-          onClick={() => {
-            nextFrame(settingModalPresent)
-          }}
-          icon={<i className="i-mgc-settings-7-cute-re" />}
-        >
-          {t("user_button.preferences")}
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        {!window.electron && (
-          <>
-            <DropdownMenuItem
-              className="pl-3"
-              onClick={() => {
-                window.open(`${repository.url}/releases`)
-              }}
-              icon={<i className="i-mgc-download-2-cute-re" />}
-            >
-              {t("user_button.download_desktop_app")}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-          </>
-        )}
-        <DropdownMenuItem
-          className="pl-3"
-          onClick={signOut}
-          icon={<i className="i-mgc-exit-cute-re" />}
-        >
-          {t("user_button.log_out")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    </>
   )
 })
 ProfileButton.displayName = "ProfileButton"