#2133 Add comments icon and count to Timeline card (#2205)

* fix

* #2133 added comments icon and count on notes tab

* reverted changes in people-filters.tsx

* added comment icon and count on timeline in People/Companies

* removed infra/dev/scripts/hashicorp.gpg

* added comment count and icon on timeline cards with seperate react component

* used isNonEmptyArray typeguard for array length check

* updated review feedback

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/activities/comment/CommentCounter.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComment } from '@/ui/display/icon';
+
+const StyledCommentIcon = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const CommentCounter = ({ commentCount }: { commentCount: number }) => {
+  const theme = useTheme();
+  return (
+    <div>
+      {commentCount > 0 && (
+        <StyledCommentIcon>
+          <IconComment size={theme.icon.size.md} />
+          {commentCount}
+        </StyledCommentIcon>
+      )}
+    </div>
+  );
+};
+
+export default CommentCounter;

front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx

@@ -1,11 +1,13 @@
+import { isNonEmptyArray } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 
+import CommentCounter from '@/activities/comment/CommentCounter';
 import { UserChip } from '@/users/components/UserChip';
 import { Activity, User } from '~/generated/graphql';
 import { beautifyExactDate } from '~/utils/date-utils';
 
 type TimelineActivityCardFooterProps = {
-  activity: Pick<Activity, 'id' | 'dueAt'> & {
+  activity: Pick<Activity, 'id' | 'dueAt' | 'comments'> & {
     assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
 };
@@ -26,26 +28,39 @@ const StyledVerticalSeparator = styled.div`
   height: 24px;
 `;
 
+const StyledComment = styled.div`
+  margin-left: auto;
+`;
 export const TimelineActivityCardFooter = ({
   activity,
-}: TimelineActivityCardFooterProps) => (
+}: TimelineActivityCardFooterProps) => {
-  <>
+  const hasComments = isNonEmptyArray(activity.comments || []);
-    {(activity.assignee || activity.dueAt) && (
+
-      <StyledContainer>
+  return (
-        {activity.assignee && (
+    <>
-          <UserChip
+      {(activity.assignee || activity.dueAt || hasComments) && (
-            id={activity.assignee.id}
+        <StyledContainer>
-            name={activity.assignee.displayName ?? ''}
+          {activity.assignee && (
-            pictureUrl={activity.assignee.avatarUrl ?? ''}
+            <UserChip
-          />
+              id={activity.assignee.id}
-        )}
+              name={activity.assignee.displayName ?? ''}
-        {activity.dueAt && (
+              pictureUrl={activity.assignee.avatarUrl ?? ''}
-          <>
+            />
-            {activity.assignee && <StyledVerticalSeparator />}
+          )}
-            {beautifyExactDate(activity.dueAt)}
+
-          </>
+          {activity.dueAt && (
-        )}
+            <>
-      </StyledContainer>
+              {activity.assignee && <StyledVerticalSeparator />}
-    )}
+              {beautifyExactDate(activity.dueAt)}
-  </>
+            </>
-);
+          )}
+          <StyledComment>
+            {hasComments && (
+              <CommentCounter commentCount={activity.comments?.length || 0} />
+            )}
+          </StyledComment>
+        </StyledContainer>
+      )}
+    </>
+  );
+};