Introduce Specific Icons image identifier for Notes and Tasks

[Bonapara]

Current Behavior

Currently, the image identifier for both Notes and Tasks is the first letter of the task or note enclosed in a circle. This design is similar to that used for People & Custom object identifiers, which can cause confusion.

Desired Behavior

To improve visual differentiation and user experience, we should introduce specific icon image identifiers for these items:

• Notes Icon: A Yellow note icon.

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36824-90522&t=7he5Wg1gGH5yGp53-11

• Tasks Icon: A Blue checkbox icon.

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36824-90299&t=7he5Wg1gGH5yGp53-11

[ehconitin]

On it

[ehconitin]

Hi @Bonapara,

I took a look at this issue. From a performance perspective, it might be more efficient to handle this on the backend by storing the specific icon in the avatarUrl. This approach aligns with how other icons are managed using Twenty's favicon system. Checking each record on the frontend to determine if it's a Note or Task could potentially lead to performance issues.

I think this should be scoped to backend :(
I might be wrong, so do get a second opinion on this.
Thanks

[Bonapara]

@Weiko do you think it should be handled by the backend too?

[FelixMalfait]

@ehconitin I don't think there would be any perf issue doing it on the frontend.
We already do similar adjustments. For example we have getAvatarType which is used to display a different icon for companies, I think we should build around that.
I'm not sure what would be most elegant, probably introduce an avatarType=icon and pass the icon in a separate var.

[ehconitin]

PR 6997