Display a tooltip for actions without short labels (#11243)

- Merge `RecordIndexActionMenuButtons` and `RecordShowActionMenuButtons`
into a single component `PageHeaderActionMenuButtons`
- Display tooltip after 1s for actions without short labels


https://github.com/user-attachments/assets/7649bed8-a1a9-4c1d-8fbe-f1bf3a51db56

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -1,9 +1,17 @@
-import { AnimatedButton, getOsControlSymbol, useIsMobile } from 'twenty-ui';
+import {
+  AnimatedButton,
+  AppTooltip,
+  getOsControlSymbol,
+  TooltipDelay,
+  TooltipPosition,
+  useIsMobile,
+} from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
@@ -12,6 +20,10 @@ const StyledButtonWrapper = styled.div`
   z-index: 30;
 `;
 
+const StyledTooltipWrapper = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
 const xPaths = {
   topLeft: `M12 12 L6 6`,
   topRight: `M12 12 L18 6`,
@@ -98,7 +110,7 @@ const AnimatedIcon = ({
   );
 };
 
-export const PageHeaderOpenCommandMenuButton = () => {
+export const PageHeaderToggleCommandMenuButton = () => {
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
@@ -111,25 +123,41 @@ export const PageHeaderOpenCommandMenuButton = () => {
   const theme = useTheme();
 
   return (
-    <StyledButtonWrapper>
-      <AnimatedButton
-        animatedSvg={<AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />}
-        className="page-header-command-menu-button"
-        dataTestId="page-header-command-menu-button"
-        size={isMobile ? 'medium' : 'small'}
-        variant="secondary"
-        accent="default"
-        hotkeys={[getOsControlSymbol(), 'K']}
-        ariaLabel={ariaLabel}
-        onClick={toggleCommandMenu}
-        animate={{
-          rotate: isCommandMenuOpened ? 90 : 0,
-        }}
-        transition={{
-          duration: theme.animation.duration.normal,
-          ease: 'easeInOut',
-        }}
-      />
-    </StyledButtonWrapper>
+    <>
+      <StyledButtonWrapper>
+        <div id="toggle-command-menu-button">
+          <AnimatedButton
+            animatedSvg={
+              <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
+            }
+            className="page-header-command-menu-button"
+            dataTestId="page-header-command-menu-button"
+            size={isMobile ? 'medium' : 'small'}
+            variant="secondary"
+            accent="default"
+            hotkeys={[getOsControlSymbol(), 'K']}
+            ariaLabel={ariaLabel}
+            onClick={toggleCommandMenu}
+            animate={{
+              rotate: isCommandMenuOpened ? 90 : 0,
+            }}
+            transition={{
+              duration: theme.animation.duration.normal,
+              ease: 'easeInOut',
+            }}
+          />
+        </div>
+      </StyledButtonWrapper>
+      <StyledTooltipWrapper>
+        <AppTooltip
+          anchorSelect="#toggle-command-menu-button"
+          content={i18n._(ariaLabel)}
+          delay={TooltipDelay.longDelay}
+          place={TooltipPosition.Bottom}
+          offset={5}
+          noArrow
+        />
+      </StyledTooltipWrapper>
+    </>
   );
 };