406 animate the command menu button (#10305)

Closes https://github.com/twentyhq/core-team-issues/issues/406

- Added animation on the Icon (The dots rotate and transform into an a
cross)
- Introduced a new component `AnimatedButton`. All the button styling
could be extracted to another file so we don't duplicate the code, but
since `AnimatedLightIconButton` duplicates the style from
`LightIconButton`, I did the same here.
- Added an animate presence component on the command menu to have a
smooth transition from `open` to `close` state
- Merged the open and close command menu button
- For all the pages that are not an index page or a record page, we want
the old behavior because there is no button in the page header to open
the command menu

# Before


https://github.com/user-attachments/assets/5ec7d9eb-9d8b-4838-af1b-c04382694342


# After


https://github.com/user-attachments/assets/f700deec-1c52-4afd-b294-f9ee7b9206e9

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -20,7 +20,7 @@ import { workflowReactFlowRefState } from '@/workflow/workflow-diagram/states/wo
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useIsMobile } from 'twenty-ui';
@@ -65,6 +65,7 @@ export const CommandMenuContainer = ({
     callback: closeCommandMenu,
     listenerId: 'COMMAND_MENU_LISTENER_ID',
     hotkeyScope: AppHotkeyScope.CommandMenuOpen,
+    excludeClassNames: ['page-header-command-menu-button'],
   });
 
   const isMobile = useIsMobile();
@@ -114,20 +115,22 @@ export const CommandMenuContainer = ({
               <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
             )}
             <ActionMenuConfirmationModals />
-            {isCommandMenuOpened && (
-              <StyledCommandMenu
-                data-testid="command-menu"
-                ref={commandMenuRef}
-                className="command-menu"
-                animate={targetVariantForAnimation}
-                initial="closed"
-                exit="closed"
-                variants={COMMAND_MENU_ANIMATION_VARIANTS}
-                transition={{ duration: theme.animation.duration.normal }}
-              >
-                {children}
-              </StyledCommandMenu>
-            )}
+            <AnimatePresence mode="wait">
+              {isCommandMenuOpened && (
+                <StyledCommandMenu
+                  data-testid="command-menu"
+                  ref={commandMenuRef}
+                  className="command-menu"
+                  animate={targetVariantForAnimation}
+                  initial="closed"
+                  exit="closed"
+                  variants={COMMAND_MENU_ANIMATION_VARIANTS}
+                  transition={{ duration: theme.animation.duration.normal }}
+                >
+                  {children}
+                </StyledCommandMenu>
+              )}
+            </AnimatePresence>
           </ActionMenuContext.Provider>
         </ActionMenuComponentInstanceContext.Provider>
       </ContextStoreComponentInstanceContext.Provider>

packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx

@@ -2,7 +2,9 @@ import { CommandMenuContainer } from '@/command-menu/components/CommandMenuConta
 import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
 import { COMMAND_MENU_PAGES_CONFIG } from '@/command-menu/constants/CommandMenuPagesConfig';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 
@@ -20,9 +22,21 @@ export const CommandMenuRouter = () => {
     <></>
   );
 
+  const theme = useTheme();
+
   return (
     <CommandMenuContainer>
-      <CommandMenuTopBar />
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{
+          duration: theme.animation.duration.instant,
+          delay: 0.1,
+        }}
+      >
+        <CommandMenuTopBar />
+      </motion.div>
       <StyledCommandMenuContent>
         {commandMenuPageComponent}
       </StyledCommandMenuContent>

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -16,6 +16,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import {
@@ -80,6 +81,10 @@ const StyledCloseButtonContainer = styled.div`
   justify-content: center;
 `;
 
+const StyledCloseButtonWrapper = styled.div<{ isVisible: boolean }>`
+  visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
+`;
+
 export const CommandMenuTopBar = () => {
   const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
     commandMenuSearchState,
@@ -123,6 +128,11 @@ export const CommandMenuTopBar = () => {
       });
   }, [commandMenuNavigationStack, theme.icon.size.sm]);
 
+  const location = useLocation();
+  const isButtonVisible =
+    !location.pathname.startsWith('/objects/') &&
+    !location.pathname.startsWith('/object/');
+
   return (
     <StyledInputContainer>
       <StyledContentContainer>
@@ -162,7 +172,7 @@ export const CommandMenuTopBar = () => {
         )}
       </StyledContentContainer>
       {!isMobile && (
-        <>
+        <StyledCloseButtonWrapper isVisible={isButtonVisible}>
           {isCommandMenuV2Enabled ? (
             <Button
               Icon={IconX}
@@ -184,7 +194,7 @@ export const CommandMenuTopBar = () => {
               />
             </StyledCloseButtonContainer>
           )}
-        </>
+        </StyledCloseButtonWrapper>
       )}
     </StyledInputContainer>
   );