320 new command menu navigation bar buttons (#10018)

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


https://github.com/user-attachments/assets/8082e986-07fd-46fb-9652-ad006aa9dac8

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

@@ -1,7 +1,12 @@
 import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
 import { Fragment } from 'react/jsx-runtime';
+import { isDefined } from 'twenty-shared';
 
-const StyledChip = styled.div`
+const StyledChip = styled.button<{
+  withText: boolean;
+  onClick?: () => void;
+}>`
   align-items: center;
   background: ${({ theme }) => theme.background.transparent.light};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -10,11 +15,21 @@ const StyledChip = styled.div`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme }) => theme.spacing(6)};
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  /* If the chip has text, we add extra padding to have a more balanced design */
+  padding: 0
+    ${({ theme, withText }) => (withText ? theme.spacing(2) : theme.spacing(1))};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
   color: ${({ theme }) => theme.font.color.primary};
+  cursor: ${({ onClick }) => (isDefined(onClick) ? 'pointer' : 'default')};
+
+  &:hover {
+    background: ${({ onClick, theme }) =>
+      isDefined(onClick)
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
+  }
 `;
 
 const StyledIconsContainer = styled.div`
@@ -24,18 +39,26 @@ const StyledIconsContainer = styled.div`
 export const CommandMenuContextChip = ({
   Icons,
   text,
+  onClick,
+  testId,
 }: {
   Icons: React.ReactNode[];
   text?: string;
+  onClick?: () => void;
+  testId?: string;
 }) => {
   return (
-    <StyledChip>
+    <StyledChip
+      withText={isNonEmptyString(text)}
+      onClick={onClick}
+      data-testid={testId}
+    >
       <StyledIconsContainer>
         {Icons.map((Icon, index) => (
           <Fragment key={index}>{Icon}</Fragment>
         ))}
       </StyledIconsContainer>
-      <span>{text}</span>
+      {text && <span>{text}</span>}
     </StyledChip>
   );
 };