From 0b05b28f0253cd3caab0433fdcac22ec602ec155 Mon Sep 17 00:00:00 2001
From: lurius <lurius.tm@gmail.com>
Date: Fri, 13 Dec 2024 11:21:37 +0100
Subject: [PATCH] enh(launcher): dropdown style & stylability

---
 src/apps/seelen_rofi/App.tsx                  |  1 +
 .../modules/launcher/infra/Item.tsx           | 43 ++++++++++++-------
 .../AnimatedDropdown/index.tsx                | 20 ++++++---
 .../AnimatedPopover/index.tsx                 | 18 +++++---
 static/themes/default/theme.launcher.css      |  6 +++
 5 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/apps/seelen_rofi/App.tsx b/src/apps/seelen_rofi/App.tsx
index d5bf8cd4..4e405263 100644
--- a/src/apps/seelen_rofi/App.tsx
+++ b/src/apps/seelen_rofi/App.tsx
@@ -15,6 +15,7 @@ export function App() {
     theme={{
       token: {
         colorPrimary: isDarkMode ? colors.accent_light : colors.accent_dark,
+        motion: false,
       },
       algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
     }}
diff --git a/src/apps/seelen_rofi/modules/launcher/infra/Item.tsx b/src/apps/seelen_rofi/modules/launcher/infra/Item.tsx
index 0fc58cff..82af6374 100644
--- a/src/apps/seelen_rofi/modules/launcher/infra/Item.tsx
+++ b/src/apps/seelen_rofi/modules/launcher/infra/Item.tsx
@@ -5,6 +5,8 @@ import { Menu } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { BackgroundByLayersV2 } from '../../../../seelenweg/components/BackgroundByLayers/infra';
+
 import { StartMenuApp } from '../../shared/store/domain';
 
 import { AnimatedDropdown } from '../../../../shared/components/AnimatedWrappers';
@@ -31,24 +33,33 @@ export const Item = memo(({ item, hidden }: { item: StartMenuApp; hidden: boolea
       }}
       trigger={['contextMenu']}
       dropdownRender={() => (
-        <Menu
-          items={[
-            {
-              label: t('item.pin'),
-              key: 'pin',
-              onClick() {
-                invoke(SeelenCommand.WegPinItem, { path });
+        <BackgroundByLayersV2
+          className="launcher-item-context-menu"
+          prefix="menu"
+          onContextMenu={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          <Menu
+            items={[
+              {
+                label: t('item.pin'),
+                key: 'pin',
+                onClick() {
+                  invoke(SeelenCommand.WegPinItem, { path });
+                },
               },
-            },
-            {
-              label: t('item.open_location'),
-              key: 'open',
-              onClick() {
-                invoke(SeelenCommand.SelectFileOnExplorer, { path });
+              {
+                label: t('item.open_location'),
+                key: 'open',
+                onClick() {
+                  invoke(SeelenCommand.SelectFileOnExplorer, { path });
+                },
               },
-            },
-          ]}
-        />
+            ]}
+          />
+        </BackgroundByLayersV2>
       )}
     >
       <button
diff --git a/src/apps/shared/components/AnimatedWrappers/AnimatedDropdown/index.tsx b/src/apps/shared/components/AnimatedWrappers/AnimatedDropdown/index.tsx
index 8706b87b..b0b21eb8 100644
--- a/src/apps/shared/components/AnimatedWrappers/AnimatedDropdown/index.tsx
+++ b/src/apps/shared/components/AnimatedWrappers/AnimatedDropdown/index.tsx
@@ -10,24 +10,32 @@ export interface AnimatedDropwonProps extends DropdownProps {
   animationDescription: CustomAnimationProps;
 }
 
-export function AnimatedDropdown({ children, open, dropdownRender, animationDescription, ...dropdownProps }: AnimatedDropwonProps) {
+export function AnimatedDropdown({ children, open, onOpenChange, dropdownRender, animationDescription, ...dropdownProps }: AnimatedDropwonProps) {
   const [delayedOpenPopover, setDelayedOpenPopover] = useState(false);
+  const [openReplacement, setOpenReplacement] = useState(false);
 
   useTimeout(() => {
-    setDelayedOpenPopover(!!open);
-  }, animationDescription.maxAnimationTimeMs, [open]);
+    setDelayedOpenPopover((open || openReplacement));
+  }, animationDescription.maxAnimationTimeMs, [open || openReplacement]);
 
   const animationObject = {};
   if (animationDescription.openAnimationName) {
-    animationObject[animationDescription.openAnimationName] = open && !delayedOpenPopover;
+    animationObject[animationDescription.openAnimationName] = (open || openReplacement) && !delayedOpenPopover;
   }
   if (animationDescription.closeAnimationName) {
-    animationObject[animationDescription.closeAnimationName] = delayedOpenPopover && !open;
+    animationObject[animationDescription.closeAnimationName] = delayedOpenPopover && !(open || openReplacement);
   }
 
   return (
     <Dropdown
-      open={open || delayedOpenPopover}
+      open={open || openReplacement || delayedOpenPopover}
+      onOpenChange={(open, info) => {
+        if (onOpenChange) {
+          onOpenChange(open, info);
+        } else {
+          setOpenReplacement(open);
+        }
+      }}
       {...dropdownProps}
       dropdownRender={(origin) => dropdownRender &&
         <div className={cx(animationObject)}>
diff --git a/src/apps/shared/components/AnimatedWrappers/AnimatedPopover/index.tsx b/src/apps/shared/components/AnimatedWrappers/AnimatedPopover/index.tsx
index f8bc4569..0a87f34e 100644
--- a/src/apps/shared/components/AnimatedWrappers/AnimatedPopover/index.tsx
+++ b/src/apps/shared/components/AnimatedWrappers/AnimatedPopover/index.tsx
@@ -10,24 +10,32 @@ export interface AnimatedPopoverProps extends PopoverProps {
   animationDescription: CustomAnimationProps;
 }
 
-export function AnimatedPopover({ children, open, content, animationDescription, ...popoverProps }: AnimatedPopoverProps) {
+export function AnimatedPopover({ children, open, onOpenChange, content, animationDescription, ...popoverProps }: AnimatedPopoverProps) {
   const [delayedOpenPopover, setDelayedOpenPopover] = useState(false);
+  const [openReplacement, setOpenReplacement] = useState(false);
 
   useTimeout(() => {
-    setDelayedOpenPopover(!!open);
-  }, animationDescription.maxAnimationTimeMs, [open]);
+    setDelayedOpenPopover((open || openReplacement));
+  }, animationDescription.maxAnimationTimeMs, [open || openReplacement]);
 
   const animationObject = {};
   if (animationDescription.openAnimationName) {
-    animationObject[animationDescription.openAnimationName] = open && !delayedOpenPopover;
+    animationObject[animationDescription.openAnimationName] = (open || openReplacement) && !delayedOpenPopover;
   }
   if (animationDescription.closeAnimationName) {
-    animationObject[animationDescription.closeAnimationName] = delayedOpenPopover && !open;
+    animationObject[animationDescription.closeAnimationName] = delayedOpenPopover && !(open || openReplacement);
   }
 
   return (
     <Popover
       open={open || delayedOpenPopover}
+      onOpenChange={(open, info) => {
+        if (onOpenChange) {
+          onOpenChange(open, info);
+        } else {
+          setOpenReplacement(open);
+        }
+      }}
       {...popoverProps}
       content={content &&
         <div className={cx(animationObject)}>
diff --git a/static/themes/default/theme.launcher.css b/static/themes/default/theme.launcher.css
index f16e9161..27758936 100644
--- a/static/themes/default/theme.launcher.css
+++ b/static/themes/default/theme.launcher.css
@@ -69,6 +69,12 @@ body {
   }
 }
 
+.launcher-item-context-menu {
+  border-radius: 8px;
+  background-color: var(--color-gray-50);
+  box-shadow: 0 4px 10px 4px #0001;
+}
+
 @keyframes PopupBaseAnimation {
   0% {
     opacity: 0;