From 21b1909428a2b9188a006ddf01f46bf8baa0afab Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 11:17:10 +0100
Subject: [PATCH 1/9] Unify the open and close command menu button

---
 .../components/CommandMenuContainer.tsx       |  1 +
 .../components/CommandMenuTopBar.tsx          | 22 +++++++++--
 .../PageHeaderOpenCommandMenuButton.tsx       | 37 ++++++++++++++-----
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
index 3a646f947232..54ad9058764b 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@@ -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();
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
index c3fd69d38f60..82c837e6dc0e 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/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}
@@ -172,7 +182,9 @@ export const CommandMenuTopBar = () => {
               accent="default"
               hotkeys={[getOsControlSymbol(), 'K']}
               ariaLabel="Close command menu"
-              onClick={closeCommandMenu}
+              onClick={() => {
+                closeCommandMenu();
+              }}
             />
           ) : (
             <StyledCloseButtonContainer>
@@ -180,11 +192,13 @@ export const CommandMenuTopBar = () => {
                 accent={'tertiary'}
                 size={'medium'}
                 Icon={IconX}
-                onClick={closeCommandMenu}
+                onClick={() => {
+                  closeCommandMenu();
+                }}
               />
             </StyledCloseButtonContainer>
           )}
-        </>
+        </StyledCloseButtonWrapper>
       )}
     </StyledInputContainer>
   );
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index d444f4738511..89acbb4f9af3 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -2,16 +2,26 @@ import {
   Button,
   IconButton,
   IconDotsVertical,
+  IconX,
   getOsControlSymbol,
   useIsMobile,
 } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { useRecoilValue } from 'recoil';
 import { FeatureFlagKey } from '~/generated/graphql';
 
+const StyledButtonWrapper = styled.div`
+  z-index: 30;
+`;
+
 export const PageHeaderOpenCommandMenuButton = () => {
-  const { openRootCommandMenu } = useCommandMenu();
+  const { toggleCommandMenu } = useCommandMenu();
+  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
   const isCommandMenuV2Enabled = useIsFeatureEnabled(
     FeatureFlagKey.IsCommandMenuV2Enabled,
@@ -19,29 +29,36 @@ export const PageHeaderOpenCommandMenuButton = () => {
 
   const isMobile = useIsMobile();
 
+  const ariaLabel = isCommandMenuOpened
+    ? t`Close command menu`
+    : t`Open command menu`;
+
+  const Icon = isCommandMenuOpened ? IconX : IconDotsVertical;
+
   return (
-    <>
+    <StyledButtonWrapper>
       {isCommandMenuV2Enabled ? (
         <Button
-          Icon={IconDotsVertical}
-          dataTestId="page-header-open-command-menu-button"
+          Icon={Icon}
+          className="page-header-command-menu-button"
+          dataTestId="page-header-command-menu-button"
           size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
           hotkeys={[getOsControlSymbol(), 'K']}
-          ariaLabel="Open command menu"
-          onClick={openRootCommandMenu}
+          ariaLabel={ariaLabel}
+          onClick={toggleCommandMenu}
         />
       ) : (
         <IconButton
-          Icon={IconDotsVertical}
+          Icon={Icon}
           size="medium"
-          dataTestId="more-showpage-button"
+          dataTestId="command-menu-button"
           accent="default"
           variant="secondary"
-          onClick={openRootCommandMenu}
+          onClick={toggleCommandMenu}
         />
       )}
-    </>
+    </StyledButtonWrapper>
   );
 };

From e345db7156560f9a1db82bf90426d5f680118ed6 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 15:14:15 +0100
Subject: [PATCH 2/9] animate icon on opening

---
 .../PageHeaderOpenCommandMenuButton.tsx       | 102 +++-
 .../components/AnimatedMorphPathButton.tsx    | 449 ++++++++++++++++++
 packages/twenty-ui/src/input/index.ts         |   1 +
 3 files changed, 549 insertions(+), 3 deletions(-)
 create mode 100644 packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index 89acbb4f9af3..3330bcef6511 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -1,5 +1,5 @@
 import {
-  Button,
+  AnimatedMorphPathButton,
   IconButton,
   IconDotsVertical,
   IconX,
@@ -10,8 +10,10 @@ import {
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
+import { motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlagKey } from '~/generated/graphql';
 
@@ -19,6 +21,89 @@ const StyledButtonWrapper = styled.div`
   z-index: 30;
 `;
 
+const xPaths = {
+  topLeft: `M12 12 L6 6`,
+  topRight: `M12 12 L18 6`,
+  bottomLeft: `M12 12 L6 18`,
+  bottomRight: `M12 12 L18 18`,
+};
+
+const AnimatedIcon = ({
+  isCommandMenuOpened,
+}: {
+  isCommandMenuOpened: boolean;
+}) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={theme.icon.size.sm}
+      height={theme.icon.size.sm}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={theme.icon.stroke.md}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      {/* Center dot */}
+      <motion.circle
+        cx={12}
+        cy={12}
+        r="1"
+        animate={{
+          scale: isCommandMenuOpened ? 0 : 1,
+          opacity: isCommandMenuOpened ? 0 : 1,
+        }}
+        transition={{ duration: theme.animation.duration.fast }}
+      />
+
+      {/* X lines expanding from center */}
+      {Object.values(xPaths).map((path, index) => (
+        <motion.path
+          key={index}
+          d={path}
+          initial={{ pathLength: 0 }}
+          animate={{
+            pathLength: isCommandMenuOpened ? 1 : 0,
+            opacity: isCommandMenuOpened ? 1 : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.fast,
+            ease: 'easeInOut',
+            delay: isCommandMenuOpened ? 0.1 : 0,
+          }}
+        />
+      ))}
+
+      {/* Top dot */}
+      <motion.circle
+        cx="12"
+        cy="5"
+        r="1"
+        animate={{
+          scale: isCommandMenuOpened ? 0 : 1,
+          opacity: isCommandMenuOpened ? 0 : 1,
+        }}
+        transition={{ duration: theme.animation.duration.fast }}
+      />
+
+      {/* Bottom dot */}
+      <motion.circle
+        cx="12"
+        cy="19"
+        r="1"
+        animate={{
+          scale: isCommandMenuOpened ? 0 : 1,
+          opacity: isCommandMenuOpened ? 0 : 1,
+        }}
+        transition={{ duration: theme.animation.duration.fast }}
+      />
+    </svg>
+  );
+};
+
 export const PageHeaderOpenCommandMenuButton = () => {
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@@ -35,11 +120,15 @@ export const PageHeaderOpenCommandMenuButton = () => {
 
   const Icon = isCommandMenuOpened ? IconX : IconDotsVertical;
 
+  const theme = useTheme();
+
   return (
     <StyledButtonWrapper>
       {isCommandMenuV2Enabled ? (
-        <Button
-          Icon={Icon}
+        <AnimatedMorphPathButton
+          animatedSvg={
+            <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
+          }
           className="page-header-command-menu-button"
           dataTestId="page-header-command-menu-button"
           size={isMobile ? 'medium' : 'small'}
@@ -48,6 +137,13 @@ export const PageHeaderOpenCommandMenuButton = () => {
           hotkeys={[getOsControlSymbol(), 'K']}
           ariaLabel={ariaLabel}
           onClick={toggleCommandMenu}
+          animate={{
+            rotate: isCommandMenuOpened ? 90 : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+            ease: 'easeInOut',
+          }}
         />
       ) : (
         <IconButton
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx
new file mode 100644
index 000000000000..48c2f865ee2c
--- /dev/null
+++ b/packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx
@@ -0,0 +1,449 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Pill } from '@ui/components/Pill/Pill';
+import { useIsMobile } from '@ui/utilities';
+import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
+import { MotionProps, motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+import { ButtonAccent, ButtonProps, ButtonSize, ButtonVariant } from './Button';
+
+export type AnimatedMorphPathButtonProps = ButtonProps &
+  Pick<MotionProps, 'animate' | 'transition'> & {
+    animatedSvg: React.ReactNode;
+  };
+
+const StyledButton = styled.button<
+  Pick<
+    ButtonProps,
+    | 'fullWidth'
+    | 'variant'
+    | 'inverted'
+    | 'size'
+    | 'position'
+    | 'accent'
+    | 'focus'
+    | 'justify'
+    | 'to'
+    | 'target'
+  >
+>`
+  align-items: center;
+  ${({ theme, variant, inverted, accent, disabled, focus }) => {
+    switch (variant) {
+      case 'primary':
+        switch (accent) {
+          case 'default':
+            return css`
+              background: ${!inverted
+                ? theme.background.secondary
+                : theme.background.primary};
+              border-color: ${!inverted
+                ? !disabled && focus
+                  ? theme.color.blue
+                  : theme.background.transparent.light
+                : theme.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.font.color.secondary
+                  : theme.font.color.extraLight
+                : theme.font.color.secondary};
+              &:hover {
+                background: ${!inverted
+                  ? theme.background.tertiary
+                  : theme.background.secondary};
+              }
+              &:active {
+                background: ${!inverted
+                  ? theme.background.quaternary
+                  : theme.background.tertiary};
+              }
+            `;
+          case 'blue':
+            return css`
+              background: ${!inverted
+                ? theme.color.blue
+                : theme.background.primary};
+              border-color: ${!inverted
+                ? focus
+                  ? theme.color.blue
+                  : theme.background.transparent.light
+                : theme.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
+              ${disabled
+                ? ''
+                : css`
+                    &:hover {
+                      background: ${!inverted
+                        ? theme.color.blue50
+                        : theme.background.secondary};
+                    }
+                    &:active {
+                      background: ${!inverted
+                        ? theme.color.blue60
+                        : theme.background.tertiary};
+                    }
+                  `}
+            `;
+          case 'danger':
+            return css`
+              background: ${!inverted
+                ? theme.color.red
+                : theme.background.primary};
+              border-color: ${!inverted
+                ? focus
+                  ? theme.color.red
+                  : theme.background.transparent.light
+                : theme.background.transparent.light};
+              border-width: 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.color.red10
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted ? theme.background.primary : theme.color.red};
+              ${disabled
+                ? ''
+                : css`
+                    &:hover {
+                      background: ${!inverted
+                        ? theme.color.red40
+                        : theme.background.secondary};
+                    }
+                    &:active {
+                      background: ${!inverted
+                        ? theme.color.red50
+                        : theme.background.tertiary};
+                    }
+                  `}
+            `;
+        }
+        break;
+      case 'secondary':
+      case 'tertiary':
+        switch (accent) {
+          case 'default':
+            return css`
+              background: transparent;
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? !disabled && focus
+                    ? theme.color.blue
+                    : theme.background.transparent.medium
+                  : focus
+                    ? theme.color.blue
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.font.color.secondary
+                  : theme.font.color.extraLight
+                : theme.font.color.inverted};
+              &:hover {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.transparent.light
+                    : 'transparent'
+                  : theme.background.transparent.light};
+              }
+              &:active {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.transparent.light
+                    : 'transparent'
+                  : theme.background.transparent.medium};
+              }
+            `;
+          case 'blue':
+            return css`
+              background: transparent;
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? focus
+                    ? theme.color.blue
+                    : theme.accent.primary
+                  : focus
+                    ? theme.color.blue
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.accent.tertiary
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted
+                ? !disabled
+                  ? theme.color.blue
+                  : theme.accent.accent4060
+                : theme.font.color.inverted};
+              &:hover {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.accent.tertiary
+                    : 'transparent'
+                  : theme.background.transparent.light};
+              }
+              &:active {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.accent.secondary
+                    : 'transparent'
+                  : theme.background.transparent.medium};
+              }
+            `;
+          case 'danger':
+            return css`
+              background: transparent;
+              border-color: ${!inverted
+                ? variant === 'secondary'
+                  ? focus
+                    ? theme.color.red
+                    : theme.border.color.danger
+                  : focus
+                    ? theme.color.red
+                    : 'transparent'
+                : variant === 'secondary'
+                  ? focus || disabled
+                    ? theme.grayScale.gray0
+                    : theme.background.transparent.primary
+                  : focus
+                    ? theme.grayScale.gray0
+                    : 'transparent'};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!disabled && focus
+                ? `0 0 0 3px ${
+                    !inverted
+                      ? theme.color.red10
+                      : theme.background.transparent.medium
+                  }`
+                : 'none'};
+              color: ${!inverted
+                ? theme.font.color.danger
+                : theme.font.color.inverted};
+              &:hover {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.danger
+                    : 'transparent'
+                  : theme.background.transparent.light};
+              }
+              &:active {
+                background: ${!inverted
+                  ? !disabled
+                    ? theme.background.danger
+                    : 'transparent'
+                  : theme.background.transparent.medium};
+              }
+            `;
+        }
+    }
+  }}
+
+  text-decoration: none;
+  border-radius: ${({ position, theme }) => {
+    switch (position) {
+      case 'left':
+        return `${theme.border.radius.sm} 0px 0px ${theme.border.radius.sm}`;
+      case 'right':
+        return `0px ${theme.border.radius.sm} ${theme.border.radius.sm} 0px`;
+      case 'middle':
+        return '0px';
+      case 'standalone':
+        return theme.border.radius.sm;
+    }
+  }};
+  border-style: solid;
+  border-width: ${({ variant, position }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return position === 'middle' ? '1px 0px' : '1px';
+      case 'tertiary':
+        return '0';
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: 500;
+  font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  justify-content: ${({ justify }) => justify};
+  padding: ${({ theme }) => {
+    return `0 ${theme.spacing(2)}`;
+  }};
+
+  transition: background 0.1s ease;
+
+  white-space: nowrap;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledSoonPill = styled(Pill)`
+  margin-left: auto;
+`;
+
+const StyledSeparator = styled.div<{
+  buttonSize: ButtonSize;
+  accent: ButtonAccent;
+}>`
+  background: ${({ theme, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return theme.border.color.blue;
+      case 'danger':
+        return theme.border.color.danger;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  height: ${({ theme, buttonSize }) =>
+    theme.spacing(buttonSize === 'small' ? 2 : 4)};
+  margin: 0;
+  width: 1px;
+`;
+
+const StyledShortcutLabel = styled.div<{
+  variant: ButtonVariant;
+  accent: ButtonAccent;
+}>`
+  color: ${({ theme, variant, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return theme.border.color.blue;
+      case 'danger':
+        return variant === 'primary'
+          ? theme.border.color.danger
+          : theme.color.red40;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledIconContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const AnimatedMorphPathButton = ({
+  className,
+  Icon,
+  animatedSvg,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  inverted = false,
+  size = 'medium',
+  accent = 'default',
+  position = 'standalone',
+  soon = false,
+  disabled = false,
+  justify = 'flex-start',
+  focus = false,
+  onClick,
+  to,
+  target,
+  dataTestId,
+  hotkeys,
+  ariaLabel,
+  animate,
+  transition,
+}: AnimatedMorphPathButtonProps) => {
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+
+  const ButtonComponent = to ? Link : 'button';
+
+  return (
+    <StyledButton
+      as={ButtonComponent}
+      fullWidth={fullWidth}
+      variant={variant}
+      inverted={inverted}
+      size={size}
+      position={position}
+      disabled={soon || disabled}
+      focus={focus}
+      justify={justify}
+      accent={accent}
+      className={className}
+      onClick={onClick}
+      to={to}
+      target={target}
+      data-testid={dataTestId}
+      aria-label={ariaLabel}
+    >
+      {Icon && (
+        <StyledIconContainer animate={animate} transition={transition}>
+          <Icon size={theme.icon.size.sm} />
+        </StyledIconContainer>
+      )}
+      {animatedSvg && (
+        <StyledIconContainer animate={animate} transition={transition}>
+          {animatedSvg}
+        </StyledIconContainer>
+      )}
+      {title}
+      {hotkeys && !isMobile && (
+        <>
+          <StyledSeparator buttonSize={size} accent={accent} />
+          <StyledShortcutLabel variant={variant} accent={accent}>
+            {hotkeys.join(getOsShortcutSeparator())}
+          </StyledShortcutLabel>
+        </>
+      )}
+      {soon && <StyledSoonPill label="Soon" />}
+    </StyledButton>
+  );
+};
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
index 1c9282835224..397c13fa4970 100644
--- a/packages/twenty-ui/src/input/index.ts
+++ b/packages/twenty-ui/src/input/index.ts
@@ -1,4 +1,5 @@
 export * from './button/components/AnimatedLightIconButton';
+export * from './button/components/AnimatedMorphPathButton';
 export * from './button/components/Button';
 export * from './button/components/ButtonGroup';
 export * from './button/components/ColorPickerButton';

From 04a77a007e6e9762d8c1af1732ee2151314c0755 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 15:49:36 +0100
Subject: [PATCH 3/9] add an animation for the CommandMenuTopBar

---
 .../command-menu/components/CommandMenuRouter.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
index dcae344a602b..aabe516465ea 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
+++ b/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,20 @@ export const CommandMenuRouter = () => {
     <></>
   );
 
+  const theme = useTheme();
+
   return (
     <CommandMenuContainer>
-      <CommandMenuTopBar />
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{
+          duration: theme.animation.duration.instant,
+          delay: 0.1,
+        }}
+      >
+        <CommandMenuTopBar />
+      </motion.div>
       <StyledCommandMenuContent>
         {commandMenuPageComponent}
       </StyledCommandMenuContent>

From 73682dfb0b6b077d1f32dab2962749c21970f28f Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 16:30:53 +0100
Subject: [PATCH 4/9] add animate presence

---
 .../components/CommandMenuContainer.tsx       | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
index 54ad9058764b..60df5e4218c0 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/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';
@@ -115,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>

From 1d174b070205af6ea9efaa43600371dce6ce3284 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 17:07:38 +0100
Subject: [PATCH 5/9] add exit animation on the CommandMenuTopBar

---
 .../src/modules/command-menu/components/CommandMenuRouter.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
index aabe516465ea..570e2f34e4a6 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
@@ -29,6 +29,7 @@ export const CommandMenuRouter = () => {
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
         transition={{
           duration: theme.animation.duration.instant,
           delay: 0.1,

From 517cecd36ba2c3807c5aca2b00bf81cb26c6942f Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 17:29:19 +0100
Subject: [PATCH 6/9] rename component

---
 .../components/PageHeaderOpenCommandMenuButton.tsx          | 4 ++--
 .../{AnimatedMorphPathButton.tsx => AnimatedButton.tsx}     | 6 +++---
 packages/twenty-ui/src/input/index.ts                       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/twenty-ui/src/input/button/components/{AnimatedMorphPathButton.tsx => AnimatedButton.tsx} (99%)

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index 3330bcef6511..eb3295cf0dae 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -1,5 +1,5 @@
 import {
-  AnimatedMorphPathButton,
+  AnimatedButton,
   IconButton,
   IconDotsVertical,
   IconX,
@@ -125,7 +125,7 @@ export const PageHeaderOpenCommandMenuButton = () => {
   return (
     <StyledButtonWrapper>
       {isCommandMenuV2Enabled ? (
-        <AnimatedMorphPathButton
+        <AnimatedButton
           animatedSvg={
             <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
           }
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
similarity index 99%
rename from packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx
rename to packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index 48c2f865ee2c..d0ee7e7f1749 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedMorphPathButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 
 import { ButtonAccent, ButtonProps, ButtonSize, ButtonVariant } from './Button';
 
-export type AnimatedMorphPathButtonProps = ButtonProps &
+export type AnimatedButtonProps = ButtonProps &
   Pick<MotionProps, 'animate' | 'transition'> & {
     animatedSvg: React.ReactNode;
   };
@@ -376,7 +376,7 @@ const StyledIconContainer = styled(motion.div)`
   justify-content: center;
 `;
 
-export const AnimatedMorphPathButton = ({
+export const AnimatedButton = ({
   className,
   Icon,
   animatedSvg,
@@ -399,7 +399,7 @@ export const AnimatedMorphPathButton = ({
   ariaLabel,
   animate,
   transition,
-}: AnimatedMorphPathButtonProps) => {
+}: AnimatedButtonProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
 
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
index 397c13fa4970..6553c8b19adb 100644
--- a/packages/twenty-ui/src/input/index.ts
+++ b/packages/twenty-ui/src/input/index.ts
@@ -1,5 +1,5 @@
+export * from './button/components/AnimatedButton';
 export * from './button/components/AnimatedLightIconButton';
-export * from './button/components/AnimatedMorphPathButton';
 export * from './button/components/Button';
 export * from './button/components/ButtonGroup';
 export * from './button/components/ColorPickerButton';

From 72c94987ca5e2c5dfb31ba5e7e140e0166c0b3b3 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 17:34:18 +0100
Subject: [PATCH 7/9] remove unnecessary callback

---
 .../modules/command-menu/components/CommandMenuTopBar.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
index 82c837e6dc0e..1d8553426f67 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@@ -182,9 +182,7 @@ export const CommandMenuTopBar = () => {
               accent="default"
               hotkeys={[getOsControlSymbol(), 'K']}
               ariaLabel="Close command menu"
-              onClick={() => {
-                closeCommandMenu();
-              }}
+              onClick={closeCommandMenu}
             />
           ) : (
             <StyledCloseButtonContainer>
@@ -192,9 +190,7 @@ export const CommandMenuTopBar = () => {
                 accent={'tertiary'}
                 size={'medium'}
                 Icon={IconX}
-                onClick={() => {
-                  closeCommandMenu();
-                }}
+                onClick={closeCommandMenu}
               />
             </StyledCloseButtonContainer>
           )}

From 8dc8f1c42e7ab7650ff92c514ef5d2aa8d1ee7ea Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 17:36:59 +0100
Subject: [PATCH 8/9] preserve old behavior when the feature flag is not
 enabled

---
 .../components/PageHeaderOpenCommandMenuButton.tsx            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index eb3295cf0dae..8df799b63f39 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -147,9 +147,9 @@ export const PageHeaderOpenCommandMenuButton = () => {
         />
       ) : (
         <IconButton
-          Icon={Icon}
+          Icon={IconDotsVertical}
           size="medium"
-          dataTestId="command-menu-button"
+          dataTestId="more-showpage-button"
           accent="default"
           variant="secondary"
           onClick={toggleCommandMenu}

From 452d4afc822e58d7630959ae52c125ccb9e33332 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 18 Feb 2025 17:53:40 +0100
Subject: [PATCH 9/9] remove unused variable

---
 .../page-header/components/PageHeaderOpenCommandMenuButton.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index 8df799b63f39..8d2a51bd355e 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -2,7 +2,6 @@ import {
   AnimatedButton,
   IconButton,
   IconDotsVertical,
-  IconX,
   getOsControlSymbol,
   useIsMobile,
 } from 'twenty-ui';
@@ -118,8 +117,6 @@ export const PageHeaderOpenCommandMenuButton = () => {
     ? t`Close command menu`
     : t`Open command menu`;
 
-  const Icon = isCommandMenuOpened ? IconX : IconDotsVertical;
-
   const theme = useTheme();
 
   return (