Chip untitled modification (#11498)

Fixes https://github.com/twentyhq/core-team-issues/issues/663

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

@@ -43,12 +43,17 @@ const StyledIconsContainer = styled.div`
   display: flex;
 `;
 
+const StyledEmptyText = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
 export type CommandMenuContextChipProps = {
   Icons: React.ReactNode[];
   text?: string;
   onClick?: () => void;
   testId?: string;
   maxWidth?: string;
+  forceEmptyText?: boolean;
 };
 
 export const CommandMenuContextChip = ({
@@ -57,6 +62,7 @@ export const CommandMenuContextChip = ({
   onClick,
   testId,
   maxWidth,
+  forceEmptyText = false,
 }: CommandMenuContextChipProps) => {
   return (
     <StyledChip
@@ -70,7 +76,13 @@ export const CommandMenuContextChip = ({
           <Fragment key={index}>{Icon}</Fragment>
         ))}
       </StyledIconsContainer>
-      {text && <OverflowingTextWithTooltip text={text} />}
+      {text?.trim() ? (
+        <OverflowingTextWithTooltip text={text} />
+      ) : !forceEmptyText ? (
+        <StyledEmptyText>Untitled</StyledEmptyText>
+      ) : (
+        ''
+      )}
     </StyledChip>
   );
 };

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

@@ -21,8 +21,8 @@ import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { Button } from 'twenty-ui/input';
 import { IconChevronLeft, IconX } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
 const StyledInputContainer = styled.div`
@@ -126,6 +126,7 @@ export const CommandMenuTopBar = () => {
                 Icons={[<IconChevronLeft size={theme.icon.size.sm} />]}
                 onClick={goBackFromCommandMenu}
                 testId="command-menu-go-back-button"
+                forceEmptyText={true}
               />
             </motion.div>
           )}