add: related object name to favorite in navigation drawer

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -159,6 +159,7 @@ export const CurrentWorkspaceMemberFavorites = ({
                       <NavigationDrawerSubItem
                         key={favorite.id}
                         label={favorite.labelIdentifier}
+                        objectName={favorite.objectNameSingular}
                         Icon={() => <FavoriteIcon favorite={favorite} />}
                         to={favorite.link}
                         active={index === selectedFavoriteIndex}

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx

@@ -111,6 +111,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
                       key={favorite.id}
                       className="navigation-drawer-item"
                       label={favorite.labelIdentifier}
+                      objectName={favorite.objectNameSingular}
                       Icon={() => <FavoriteIcon favorite={favorite} />}
                       active={isLocationMatchingFavorite(
                         currentPath,

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -26,6 +26,7 @@ export type NavigationDrawerItemIndentationLevel = 1 | 2;
 export type NavigationDrawerItemProps = {
   className?: string;
   label: string;
+  objectName?: string;
   indentationLevel?: NavigationDrawerItemIndentationLevel;
   subItemState?: NavigationDrawerSubItemState;
   to?: string;
@@ -123,10 +124,34 @@ const StyledItemElementsContainer = styled.span`
   width: 100%;
 `;
 
-const StyledItemLabel = styled.span`
+const StyledLabelParent = styled.span`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
+`;
+
+const StyledItemLabel = styled.span<{ hasObjectName: boolean }>`
   font-weight: ${({ theme }) => theme.font.weight.medium};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  ${({ hasObjectName }) =>
+    hasObjectName &&
+    `
+    max-width: 12ch;
+  `}
+`;
+
+const StyledItemObjectName = styled.span`
+  display: block;
+  color: ${({ theme }) => theme.font.color.light};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  .navigation-drawer-item:hover & {
+    display: none;
+  }
 `;
 
 const StyledItemCount = styled.span`
@@ -187,6 +212,7 @@ const StyledRightOptionsContainer = styled.div<{
 export const NavigationDrawerItem = ({
   className,
   label,
+  objectName,
   indentationLevel = DEFAULT_INDENTATION_LEVEL,
   Icon,
   to,
@@ -252,9 +278,17 @@ export const NavigationDrawerItem = ({
             />
           )}
 
-          <NavigationDrawerAnimatedCollapseWrapper>
-            <StyledItemLabel>{label}</StyledItemLabel>
-          </NavigationDrawerAnimatedCollapseWrapper>
+          <StyledLabelParent>
+            <StyledItemLabel hasObjectName={!!objectName}>
+              {label}
+            </StyledItemLabel>
+            {objectName ? (
+              <StyledItemObjectName>
+                {' · '}
+                {objectName.charAt(0).toUpperCase() + objectName.slice(1)}
+              </StyledItemObjectName>
+            ) : null}
+          </StyledLabelParent>
 
           <StyledSpacer />
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx

@@ -8,6 +8,7 @@ type NavigationDrawerSubItemProps = NavigationDrawerItemProps;
 export const NavigationDrawerSubItem = ({
   className,
   label,
+  objectName,
   Icon,
   to,
   onClick,
@@ -24,6 +25,7 @@ export const NavigationDrawerSubItem = ({
     <NavigationDrawerItem
       className={className}
       label={label}
+      objectName={objectName}
       indentationLevel={2}
       subItemState={subItemState}
       Icon={Icon}