feat(metrics): add reaction metric pill

src/renderer/components/metrics/MetricGroup.test.tsx

@@ -48,6 +48,102 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
     });
   });
 
+  describe('reactions pills', () => {
+    it('should render reaction pill when one reaction', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.reactionsCount = 1;
+      mockNotification.subject.reactionGroups = [
+        {
+          content: 'ROCKET',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+      ];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render reaction pill when multiple reactions', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.reactionsCount = 53;
+      mockNotification.subject.reactionGroups = [
+        {
+          content: 'THUMBS_UP',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+        {
+          content: 'THUMBS_DOWN',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+        {
+          content: 'LAUGH',
+          reactors: {
+            totalCount: 2,
+          },
+        },
+        {
+          content: 'HOORAY',
+          reactors: {
+            totalCount: 3,
+          },
+        },
+        {
+          content: 'CONFUSED',
+          reactors: {
+            totalCount: 5,
+          },
+        },
+        {
+          content: 'ROCKET',
+          reactors: {
+            totalCount: 8,
+          },
+        },
+        {
+          content: 'EYES',
+          reactors: {
+            totalCount: 13,
+          },
+        },
+        {
+          content: 'HEART',
+          reactors: {
+            totalCount: 21,
+          },
+        },
+      ];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render issues pill when linked to multiple issues/prs', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.linkedIssues = ['#1', '#2'];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe('comment pills', () => {
     it('should render when no comments', async () => {
       const mockNotification = mockGitifyNotification;

src/renderer/components/metrics/MetricGroup.tsx

@@ -4,6 +4,7 @@ import {
   CommentIcon,
   IssueOpenedIcon,
   MilestoneIcon,
+  SmileyIcon,
   TagIcon,
 } from '@primer/octicons-react';
 
@@ -12,6 +13,7 @@ import { useAppContext } from '../../hooks/useAppContext';
 import { type GitifyNotification, IconColor } from '../../types';
 
 import { getPullRequestReviewIcon } from '../../utils/icons';
+import { formatMetricDescription } from '../../utils/notifications/formatters';
 import { MetricPill } from './MetricPill';
 
 export interface MetricGroupProps {
@@ -25,25 +27,73 @@ export const MetricGroup: FC<MetricGroupProps> = ({
 
   const linkedIssues = notification.subject.linkedIssues ?? [];
   const hasLinkedIssues = linkedIssues.length > 0;
-  const linkedIssuesPillDescription = hasLinkedIssues
-    ? `Linked to ${
-        linkedIssues.length > 1 ? 'issues' : 'issue'
-      } ${linkedIssues.join(', ')}`
-    : '';
+  const linkedIssuesPillDescription = formatMetricDescription(
+    linkedIssues.length,
+    'issue',
+    (count, noun) => {
+      return `Linked to ${count} ${noun}: ${linkedIssues.join(', ')}`;
+    },
+  );
+
+  const reactionCount = notification.subject.reactionsCount ?? 0;
+  const reactionGroups = notification.subject.reactionGroups ?? [];
+  const hasReactions = reactionCount > 0;
+  const hasMultipleReactions =
+    reactionGroups.filter((rg) => rg.reactors.totalCount > 0).length > 1;
+  const reactionEmojiMap: Record<string, string> = {
+    THUMBS_UP: '👍',
+    THUMBS_DOWN: '👎',
+    LAUGH: '😆',
+    HOORAY: '🎉',
+    CONFUSED: '😕',
+    ROCKET: '🚀',
+    EYES: '👀',
+    HEART: '❤️',
+  };
+
+  const reactionPillDescription = formatMetricDescription(
+    reactionCount,
+    'reaction',
+    (count, noun) => {
+      const formatted = reactionGroups
+        .map((rg) => {
+          const emoji = reactionEmojiMap[rg.content];
+          if (!emoji || !rg.reactors.totalCount) {
+            return '';
+          }
+
+          return `${emoji} ${hasMultipleReactions ? rg.reactors.totalCount : ''}`.trim();
+        })
+        .filter(Boolean)
+        .join(' ');
+
+      return `${count} ${noun}: ${formatted}`;
+    },
+  );
 
   const commentCount = notification.subject.commentCount ?? 0;
   const hasComments = commentCount > 0;
-  const commentsPillDescription = hasComments
-    ? `${notification.subject.commentCount} ${
-        notification.subject.commentCount > 1 ? 'comments' : 'comment'
-      }`
-    : '';
+  const commentsPillDescription = formatMetricDescription(
+    commentCount,
+    'comment',
+  );
 
   const labels = notification.subject.labels ?? [];
-  const hasLabels = labels.length > 0;
-  const labelsPillDescription = hasLabels
-    ? labels.map((label) => `🏷️ ${label}`).join(', ')
-    : '';
+  const labelsCount = labels.length;
+  const hasLabels = labelsCount > 0;
+  const labelsPillDescription = formatMetricDescription(
+    labelsCount,
+    'label',
+    (count, noun) => {
+      const formatted = labels
+        .map((label) => {
+          return `🏷️ ${label}`.trim();
+        })
+        .join(', ');
+
+      return `${count} ${noun}: ${formatted}`;
+    },
+  );
 
   const milestone = notification.subject.milestone;
 
@@ -59,6 +109,15 @@ export const MetricGroup: FC<MetricGroupProps> = ({
           />
         )}
 
+        {hasReactions && (
+          <MetricPill
+            color={IconColor.GRAY}
+            icon={SmileyIcon}
+            metric={notification.subject.reactionsCount}
+            title={reactionPillDescription}
+          />
+        )}
+
         {notification.subject.reviews?.map((review) => {
           const icon = getPullRequestReviewIcon(review);
           if (!icon) {