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}