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>
           )}

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx

@@ -4,6 +4,7 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin
 import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useContext } from 'react';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
@@ -26,10 +27,16 @@ const StyledDiv = styled.div`
   }
 `;
 
+const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`);
+
 export const RecordTitleCellSingleTextDisplayMode = () => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
   const recordValue = useRecordValue(recordId);
+  const isEmpty =
+    recordValue?.[fieldDefinition.metadata.fieldName].trim() === '';
 
   const { openInlineCell } = useInlineCell();
 
@@ -46,12 +53,16 @@ export const RecordTitleCellSingleTextDisplayMode = () => {
         openInlineCell();
       }}
     >
-      <OverflowingTextWithTooltip
+      {isEmpty ? (
-        text={
+        <StyledEmptyText>Untitled</StyledEmptyText>
-          recordValue?.[fieldDefinition.metadata.fieldName] ||
+      ) : (
-          fieldDefinition.label
+        <OverflowingTextWithTooltip
-        }
+          text={
-      />
+            recordValue?.[fieldDefinition.metadata.fieldName] ||
+            fieldDefinition.label
+          }
+        />
+      )}
     </StyledDiv>
   );
 };

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx

@@ -1,6 +1,7 @@
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
@@ -25,6 +26,10 @@ const StyledDiv = styled.div`
   }
 `;
 
+const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`);
+
 export const RecordTitleFullNameFieldDisplay = () => {
   const { fieldDefinition } = useContext(FieldContext);
 
@@ -39,9 +44,13 @@ export const RecordTitleFullNameFieldDisplay = () => {
 
   return (
     <StyledDiv onClick={() => openInlineCell()}>
-      <OverflowingTextWithTooltip
+      {!content ? (
-        text={isNonEmptyString(content) ? content : fieldDefinition.label}
+        <StyledEmptyText>Untitled</StyledEmptyText>
-      />
+      ) : (
+        <OverflowingTextWithTooltip
+          text={isNonEmptyString(content) ? content : fieldDefinition.label}
+        />
+      )}
     </StyledDiv>
   );
 };

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -35,6 +35,10 @@ export type ChipProps = {
   className?: string;
 };
 
+const StyledDiv = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`);
+
 const StyledContainer = withTheme(styled.div<
   Pick<
     ChipProps,
@@ -147,8 +151,10 @@ export const Chip = ({
       maxWidth={maxWidth}
     >
       {leftComponent}
-      {!isLabelHidden && (
+      {!isLabelHidden && label.trim() ? (
         <OverflowingTextWithTooltip size={size} text={label} />
+      ) : (
+        <StyledDiv>Untitled</StyledDiv>
       )}
       {rightComponent?.()}
     </StyledContainer>

packages/twenty-ui/src/components/chip/__stories__/EntityChip.stories.tsx

@@ -21,3 +21,9 @@ export default meta;
 type Story = StoryObj<typeof AvatarChip>;
 
 export const Default: Story = {};
+
+export const Empty: Story = {
+  args: {
+    name: '',
+  },
+};

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -90,7 +90,10 @@ export const Avatar = ({
       })
     : null;
 
-  const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
+  const placeholderFirstChar = placeholder?.trim()?.charAt(0);
+  const isPlaceholderFirstCharEmpty =
+    !placeholderFirstChar || placeholderFirstChar === '';
+  const placeholderChar = placeholderFirstChar?.toUpperCase() || '-';
 
   const showPlaceholder =
     isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI);
@@ -101,10 +104,12 @@ export const Avatar = ({
     }
   };
 
-  const fixedColor =
+  const fixedColor = isPlaceholderFirstCharEmpty
-    color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25);
+    ? theme.font.color.tertiary
-  const fixedBackgroundColor =
+    : (color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25));
-    backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85);
+  const fixedBackgroundColor = isPlaceholderFirstCharEmpty
+    ? theme.background.transparent.light
+    : (backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85));
 
   const showBackgroundColor = showPlaceholder;