From d6ae4d59f08cedad23813839bd51e35a5d391387 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Tue, 15 Apr 2025 13:45:04 +0200
Subject: [PATCH] Various fixes charles 3 (#11573)

---
 .../modules/app/hooks/useCreateAppRouter.tsx  |  4 +-
 ...{Verify.tsx => VerifyLoginTokenEffect.tsx} |  2 +-
 .../editor/components/CustomSlashMenu.tsx     | 44 +++++++++++--------
 3 files changed, 29 insertions(+), 21 deletions(-)
 rename packages/twenty-front/src/modules/auth/components/{Verify.tsx => VerifyLoginTokenEffect.tsx} (97%)

diff --git a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx b/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
index 6cbe0d9b3..bc4d62a6d 100644
--- a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
+++ b/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
@@ -1,6 +1,6 @@
 import { AppRouterProviders } from '@/app/components/AppRouterProviders';
 import { SettingsRoutes } from '@/app/components/SettingsRoutes';
-import { VerifyEffect } from '@/auth/components/Verify';
+import { VerifyLoginTokenEffect } from '@/auth/components/VerifyLoginTokenEffect';
 
 import { VerifyEmailEffect } from '@/auth/components/VerifyEmailEffect';
 import indexAppPath from '@/navigation/utils/indexAppPath';
@@ -39,7 +39,7 @@ export const useCreateAppRouter = (
         loader={async () => Promise.resolve(null)}
       >
         <Route element={<DefaultLayout />}>
-          <Route path={AppPath.Verify} element={<VerifyEffect />} />
+          <Route path={AppPath.Verify} element={<VerifyLoginTokenEffect />} />
           <Route path={AppPath.VerifyEmail} element={<VerifyEmailEffect />} />
           <Route path={AppPath.SignInUp} element={<SignInUp />} />
           <Route path={AppPath.Invite} element={<SignInUp />} />
diff --git a/packages/twenty-front/src/modules/auth/components/Verify.tsx b/packages/twenty-front/src/modules/auth/components/VerifyLoginTokenEffect.tsx
similarity index 97%
rename from packages/twenty-front/src/modules/auth/components/Verify.tsx
rename to packages/twenty-front/src/modules/auth/components/VerifyLoginTokenEffect.tsx
index a70bbe8e4..2888811b3 100644
--- a/packages/twenty-front/src/modules/auth/components/Verify.tsx
+++ b/packages/twenty-front/src/modules/auth/components/VerifyLoginTokenEffect.tsx
@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
-export const VerifyEffect = () => {
+export const VerifyLoginTokenEffect = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
   const errorMessage = searchParams.get('errorMessage');
diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
index 6b7524bfd..3ea583d5f 100644
--- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
@@ -4,7 +4,8 @@ import styled from '@emotion/styled';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
-import { useFloating } from '@floating-ui/react';
+import { autoUpdate, useFloating } from '@floating-ui/react';
+import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { IconComponent } from 'twenty-ui/display';
 import { MenuItemSuggestion } from 'twenty-ui/navigation';
@@ -32,28 +33,35 @@ const StyledInnerContainer = styled.div`
 export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
   });
 
   return (
     <StyledContainer ref={refs.setReference}>
       {createPortal(
-        <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
-          <StyledInnerContainer>
-            <DropdownMenu style={{ zIndex: 2001 }}>
-              <DropdownMenuItemsContainer>
-                {props.items.map((item, index) => (
-                  <MenuItemSuggestion
-                    key={item.title}
-                    onClick={() => item.onItemClick()}
-                    text={item.title}
-                    LeftIcon={item.Icon}
-                    selected={props.selectedIndex === index}
-                  />
-                ))}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          </StyledInnerContainer>
-        </OverlayContainer>,
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.1 }}
+        >
+          <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
+            <StyledInnerContainer>
+              <DropdownMenu style={{ zIndex: 2001 }}>
+                <DropdownMenuItemsContainer>
+                  {props.items.map((item, index) => (
+                    <MenuItemSuggestion
+                      key={item.title}
+                      onClick={() => item.onItemClick()}
+                      text={item.title}
+                      LeftIcon={item.Icon}
+                      selected={props.selectedIndex === index}
+                    />
+                  ))}
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            </StyledInnerContainer>
+          </OverlayContainer>
+        </motion.div>,
         document.body,
       )}
     </StyledContainer>