feat: detailed overlay cards [avatar, org, description, comments, reviews]

codegen.ts

@@ -37,6 +37,7 @@ const config: CodegenConfig = {
         // enumType: 'native',
         scalars: {
           DateTime: 'string',
+          HTML: 'string',
           URI: '../../../../../types#Link',
         },
         useTypeImports: true,

package.json

@@ -81,7 +81,8 @@
     "electron-updater": "6.8.9",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "react-router-dom": "7.18.4"
+    "react-router-dom": "7.18.4",
+    "sanitize-html": "2.18.0"
   },
   "devDependencies": {
     "@discordapp/twemoji": "16.0.1",
@@ -114,6 +115,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@types/react-router-dom": "5.3.3",
+    "@types/sanitize-html": "2.16.2",
     "@types/semver": "7.8.0",
     "@vitejs/plugin-react": "6.1.2",
     "@vitest/browser-playwright": "catalog:",

src/renderer/App.css

@@ -599,3 +599,33 @@ img.emoji {
   margin: 0 0.05em 0 0.1em;
   vertical-align: -0.1em;
 }
+
+/**
+ * Compact GitHub-rendered markdown inside preview cards. Primer's
+ * `.markdown-body` styles are tuned for full-page bodies; shrink them to the
+ * menu bar's scale and trim the outer margins so the card reads tightly.
+ */
+.gitify-markdown-preview.markdown-body {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  background-color: transparent;
+}
+
+.gitify-markdown-preview.markdown-body > :first-child {
+  margin-top: 0;
+}
+
+.gitify-markdown-preview.markdown-body > :last-child {
+  margin-bottom: 0;
+}
+
+.gitify-markdown-preview.markdown-body pre,
+.gitify-markdown-preview.markdown-body code {
+  font-size: 0.6875rem;
+}
+
+.gitify-markdown-preview.markdown-body table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -33,7 +33,9 @@ export const AvatarWithFallback: React.FC<AvatarWithFallbackProps> = ({
   const isNonHuman = isNonHumanUser(userType);
   const defaultUserIcon = icon ?? getDefaultUserIcon(userType);
 
-  // TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover
+  // Avatar hover cards are composed at the call sites with `PreviewCard` +
+  // `ProfileCard`; this component stays a pure avatar primitive with no hover
+  // behaviour of its own.
   return (
     <Stack align="center" data-testid="avatar" direction="horizontal" gap="condensed">
       {!src || hasBrokenAvatarSource ? (

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

@@ -1,5 +1,10 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { renderWithProviders } from '../../__helpers__/test-utils';
 
+import type { GitifyComment, Link } from '../../types';
+
 import { CommentsPill, type CommentsPillProps } from './CommentsPill';
 
 describe('renderer/components/metrics/CommentsPill.tsx', () => {
@@ -30,4 +35,28 @@ describe('renderer/components/metrics/CommentsPill.tsx', () => {
 
     expect(tree.container).toMatchSnapshot();
   });
+
+  it('shows the comments preview on hover when comments are available', async () => {
+    const comments: GitifyComment[] = [
+      {
+        author: {
+          login: 'octocat',
+          avatarUrl: 'https://avatars.githubusercontent.com/u/583231?v=4' as Link,
+          htmlUrl: 'https://github.com/octocat' as Link,
+          type: 'User',
+        },
+        bodyHtml: '<p>Latest reply</p>',
+        url: 'https://github.com/gitify-app/notifications-test/issues/1#issuecomment-1' as Link,
+        createdAt: '2024-01-01T00:00:00Z',
+      },
+    ];
+
+    renderWithProviders(<CommentsPill commentCount={1} comments={comments} />);
+
+    await userEvent.hover(screen.getByRole('button'));
+
+    expect(await screen.findByTestId('comments-preview-card')).toBeInTheDocument();
+    expect(screen.getByText('Latest reply')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Open comment by octocat' })).toBeInTheDocument();
+  });
 });

src/renderer/components/metrics/CommentsPill.tsx

@@ -2,16 +2,18 @@ import type { FC } from 'react';
 
 import { CommentIcon } from '@primer/octicons-react';
 
-import { IconColor } from '../../types';
+import { type GitifyComment, IconColor } from '../../types';
 
 import { formatMetricDescription } from '../../utils/notifications/formatters';
+import { CommentsPreview } from '../previews/CommentsPreview';
 import { MetricPill } from './MetricPill';
 
 export interface CommentsPillProps {
   commentCount: number;
+  comments?: GitifyComment[];
 }
 
-export const CommentsPill: FC<CommentsPillProps> = ({ commentCount }) => {
+export const CommentsPill: FC<CommentsPillProps> = ({ commentCount, comments }) => {
   if (!commentCount) {
     return null;
   }
@@ -24,6 +26,8 @@ export const CommentsPill: FC<CommentsPillProps> = ({ commentCount }) => {
       contents={description}
       icon={CommentIcon}
       metric={commentCount}
+      preview={comments?.length ? <CommentsPreview comments={comments} /> : undefined}
+      previewTestId="comments-preview-card"
     />
   );
 };