Introduced Specific Icons image identifier for Notes and Tasks (#6997)

Fixes #6486

packages/twenty-front/src/modules/object-metadata/hooks/useGetStandardObjectIcon.ts

@@ -0,0 +1,37 @@
+import { useTheme } from '@emotion/react';
+import { IconCheckbox, IconComponent, IconNotes } from 'twenty-ui';
+
+export const useGetStandardObjectIcon = (objectNameSingular: string) => {
+  const theme = useTheme();
+
+  const getIconForObjectType = (
+    objectType: string,
+  ): IconComponent | undefined => {
+    switch (objectType) {
+      case 'note':
+        return IconNotes;
+      case 'task':
+        return IconCheckbox;
+      default:
+        return undefined;
+    }
+  };
+
+  const getIconColorForObjectType = (objectType: string): string => {
+    switch (objectType) {
+      case 'note':
+        return theme.color.yellow;
+      case 'task':
+        return theme.color.blue;
+      default:
+        return 'currentColor';
+    }
+  };
+
+  const { Icon, IconColor } = {
+    Icon: getIconForObjectType(objectNameSingular),
+    IconColor: getIconColorForObjectType(objectNameSingular),
+  };
+
+  return { Icon, IconColor };
+};

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx

@@ -1,9 +1,9 @@
-import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
+import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
-
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useContext } from 'react';
+import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
 
 export type RecordIdentifierChipProps = {
   objectNameSingular: string;
@@ -17,7 +17,6 @@ export const RecordIdentifierChip = ({
   variant,
 }: RecordIdentifierChipProps) => {
   const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext);
-
   const { recordChipData } = useRecordChipData({
     objectNameSingular,
     record,
@@ -27,6 +26,8 @@ export const RecordIdentifierChip = ({
     onIndexIdentifierClick(record.id);
   };
 
+  const { Icon: LeftIcon, IconColor: LeftIconColor } =
+    useGetStandardObjectIcon(objectNameSingular);
   return (
     <AvatarChip
       placeholderColorSeed={record.id}
@@ -35,6 +36,8 @@ export const RecordIdentifierChip = ({
       avatarUrl={recordChipData.avatarUrl ?? ''}
       onClick={handleAvatarChipClick}
       variant={variant}
+      LeftIcon={LeftIcon}
+      LeftIconColor={LeftIconColor}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -5,6 +5,7 @@ import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/A
 import { Note } from '@/activities/types/Note';
 import { Task } from '@/activities/types/Task';
 import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord';
+import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -156,7 +157,7 @@ export const RecordShowContainer = ({
       objectNameSingular !== CoreObjectNameSingular.Task &&
       fieldMetadataItem.name !== 'taskTargets',
   );
-
+  const { Icon, IconColor } = useGetStandardObjectIcon(objectNameSingular);
   const isReadOnly = objectMetadataItem.isRemote;
   const isMobile = useIsMobile() || isInRightDrawer;
   const isPrefetchLoading = useIsPrefetchLoading();
@@ -166,6 +167,8 @@ export const RecordShowContainer = ({
       isMobile={isMobile}
       id={objectRecordId}
       logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
+      icon={Icon}
+      iconColor={IconColor}
       avatarPlaceholder={recordIdentifier?.name ?? ''}
       date={recordFromStore.createdAt ?? ''}
       loading={isPrefetchLoading || loading || recordLoading}

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ChangeEvent, ReactNode, useRef } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { AppTooltip, Avatar, AvatarType } from 'twenty-ui';
+import { AppTooltip, Avatar, AvatarType, IconComponent } from 'twenty-ui';
 import { v4 as uuidV4 } from 'uuid';
 
 import {
@@ -17,6 +17,8 @@ type ShowPageSummaryCardProps = {
   date: string;
   id?: string;
   logoOrAvatar?: string;
+  icon?: IconComponent;
+  iconColor?: string;
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
   loading: boolean;
@@ -99,6 +101,8 @@ export const ShowPageSummaryCard = ({
   date,
   id,
   logoOrAvatar,
+  icon,
+  iconColor,
   onUploadPicture,
   title,
   loading,
@@ -133,7 +137,9 @@ export const ShowPageSummaryCard = ({
           size="xl"
           placeholderColorSeed={id}
           placeholder={avatarPlaceholder}
-          type={avatarType}
+          type={icon ? 'icon' : avatarType}
+          Icon={icon}
+          iconColor={iconColor}
         />
         <StyledFileInput
           ref={inputFileRef}

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

@@ -7,6 +7,7 @@ import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isI
 import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize';
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
 import { Nullable, getImageAbsoluteURI, stringToHslColor } from '@ui/utilities';
 
@@ -17,13 +18,16 @@ const StyledAvatar = styled.div<{
   color: string;
   backgroundColor: string;
   backgroundTransparentLight: string;
+  type?: Nullable<AvatarType>;
 }>`
   align-items: center;
   flex-shrink: 0;
   overflow: hidden;
   user-select: none;
 
-  border-radius: ${({ rounded }) => (rounded ? '50%' : '2px')};
+  border-radius: ${({ rounded, type }) => {
+    return rounded ? '50%' : type === 'icon' ? '4px' : '2px';
+  }};
   display: flex;
   font-size: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].fontSize};
   height: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width};
@@ -51,6 +55,8 @@ export type AvatarProps = {
   size?: AvatarSize;
   placeholder: string | undefined;
   placeholderColorSeed?: string;
+  Icon?: IconComponent;
+  iconColor?: string;
   type?: Nullable<AvatarType>;
   color?: string;
   backgroundColor?: string;
@@ -63,6 +69,8 @@ export const Avatar = ({
   size = 'md',
   placeholder,
   placeholderColorSeed = placeholder,
+  Icon,
+  iconColor,
   onClick,
   type = 'squared',
   color,
@@ -101,14 +109,26 @@ export const Avatar = ({
   return (
     <StyledAvatar
       size={size}
-      backgroundColor={showBackgroundColor ? fixedBackgroundColor : 'none'}
+      backgroundColor={
+        Icon
+          ? theme.background.tertiary
+          : showBackgroundColor
+            ? fixedBackgroundColor
+            : 'none'
+      }
       color={fixedColor}
       clickable={!isUndefined(onClick)}
       rounded={type === 'rounded'}
+      type={type}
       onClick={onClick}
       backgroundTransparentLight={theme.background.transparent.light}
     >
-      {showPlaceholder ? (
+      {Icon ? (
+        <Icon
+          color={iconColor ? iconColor : 'currentColor'}
+          size={theme.icon.size.xl}
+        />
+      ) : showPlaceholder ? (
         placeholderChar
       ) : (
         <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />

packages/twenty-ui/src/display/avatar/types/AvatarType.ts

@@ -1 +1 @@
-export type AvatarType = 'squared' | 'rounded';
+export type AvatarType = 'squared' | 'rounded' | 'icon';

packages/twenty-ui/src/display/chip/components/AvatarChip.tsx

@@ -14,6 +14,7 @@ export type AvatarChipProps = {
   avatarType?: Nullable<AvatarType>;
   variant?: AvatarChipVariant;
   LeftIcon?: IconComponent;
+  LeftIconColor?: string;
   isIconInverted?: boolean;
   className?: string;
   placeholderColorSeed?: string;
@@ -41,6 +42,7 @@ export const AvatarChip = ({
   avatarType = 'rounded',
   variant = AvatarChipVariant.Regular,
   LeftIcon,
+  LeftIconColor,
   isIconInverted,
   className,
   placeholderColorSeed,
@@ -71,7 +73,11 @@ export const AvatarChip = ({
               />
             </StyledInvertedIconContainer>
           ) : (
-            <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+            <LeftIcon
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={LeftIconColor || 'currentColor'}
+            />
           )
         ) : (
           <Avatar