From 2c912fae204a5ac7a4f3aba167fac4570b7d3155 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 5 Sep 2025 00:23:01 +0800
Subject: [PATCH] fix(modal): Improve header action motion with more modal
 compliant UX design

- Introduced a new `HeaderActions` component with animation effects for improved user interaction.
- Updated the `PreviewMediaContent` to include the `HeaderActions` component, enhancing the visual feedback during media preview.

These changes enhance the user experience by providing dynamic interaction elements in the media preview interface.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../ui/media/PreviewMediaContent.tsx           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx b/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
index 2c2b58074..b829d4eab 100644
--- a/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
+++ b/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
@@ -149,6 +149,7 @@ const Wrapper: FC<{
 
   return (
     <div ref={containerRef} className="fixed inset-0">
+      <HeaderActions src={src} />
       <m.div
         variants={modalVariants}
         initial="initial"
@@ -172,7 +173,6 @@ const Wrapper: FC<{
             hasSideContent ? "min-w-96 items-center justify-center" : "",
           )}
         >
-          <HeaderActions src={src} />
           {isArray ? renderedChildren[0] : renderedChildren}
         </div>
         {hasSideContent ? (
@@ -188,6 +188,11 @@ const Wrapper: FC<{
   )
 }
 
+const headerActionsVariants = {
+  initial: { opacity: 0, translateY: "-20px" },
+  animate: { opacity: 1, translateY: "0px" },
+  exit: { opacity: 0, translateY: "-20px" },
+}
 const GLASS_BUTTON_CLASS = tw`group-hover/left:opacity-100 opacity-0`
 const HeaderActions: FC<{
   src: string
@@ -196,7 +201,14 @@ const HeaderActions: FC<{
 
   const { dismiss } = useCurrentModal()
   return (
-    <div className="pointer-events-none absolute inset-x-0 top-0 z-[100] flex h-16 items-center justify-end gap-2 px-3">
+    <m.div
+      className="pointer-events-none absolute inset-x-0 top-0 z-[100] flex h-16 items-center justify-end gap-2 px-3"
+      variants={headerActionsVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={Spring.presets.smooth}
+    >
       <GlassButton
         theme="dark"
         className={GLASS_BUTTON_CLASS}
@@ -229,7 +241,7 @@ const HeaderActions: FC<{
       >
         <i className="i-mgc-close-cute-re" />
       </GlassButton>
-    </div>
+    </m.div>
   )
 }