refactor: use GitifyNotification type with transformation layer

Introduce a clean separation between raw GitHub API types and internal
Gitify notification types:

- Add transform.ts at API boundary to convert raw GitHub responses
- Define GitifyNotification, GitifySubject, GitifyRepository, GitifyOwner
  types with camelCase properties
- Update all components, handlers, filters, and utilities to use new types
- Update GraphQL schema aliases for consistent property naming
- Remove Notification type alias from typesGitHub.ts

Closes #828

Author: afonsojramos

src/renderer/__mocks__/notifications-mocks.ts

@@ -1,15 +1,14 @@
 import { Constants } from '../constants';
 import type {
   AccountNotifications,
+  GitifyNotification,
   GitifyNotificationState,
+  GitifyRepository,
+  GitifySubject,
   Hostname,
+  Link,
 } from '../types';
-import type {
-  Notification,
-  Repository,
-  Subject,
-  SubjectType,
-} from '../typesGitHub';
+import type { SubjectType } from '../typesGitHub';
 import {
   mockEnterpriseNotifications,
   mockGitHubNotifications,
@@ -47,21 +46,21 @@ export function createMockSubject(mocks: {
   title?: string;
   type?: SubjectType;
   state?: GitifyNotificationState;
-}): Subject {
+}): GitifySubject {
   return {
     title: mocks.title ?? 'Mock Subject',
     type: mocks.type ?? ('Unknown' as SubjectType),
     state: mocks.state ?? ('Unknown' as GitifyNotificationState),
     url: null,
-    latest_comment_url: null,
+    latestCommentUrl: null,
   };
 }
 
 export function createPartialMockNotification(
-  subject: Partial<Subject>,
-  repository?: Partial<Repository>,
-): Notification {
-  const mockNotification: Partial<Notification> = {
+  subject: Partial<GitifySubject>,
+  repository?: Partial<GitifyRepository>,
+): GitifyNotification {
+  const mockNotification: Partial<GitifyNotification> = {
     account: {
       method: 'Personal Access Token',
       platform: 'GitHub Cloud',
@@ -70,28 +69,30 @@ export function createPartialMockNotification(
       user: mockGitifyUser,
       hasRequiredScopes: true,
     },
-    subject: subject as Subject,
+    subject: subject as GitifySubject,
     repository: {
       name: 'notifications-test',
-      full_name: 'gitify-app/notifications-test',
-      html_url: 'https://github.com/gitify-app/notifications-test',
+      fullName: 'gitify-app/notifications-test',
+      htmlUrl: 'https://github.com/gitify-app/notifications-test' as Link,
       owner: {
         login: 'gitify-app',
+        avatarUrl: 'https://avatars.githubusercontent.com/u/1' as Link,
+        type: 'Organization',
       },
       ...repository,
-    } as Repository,
+    } as GitifyRepository,
   };
 
-  return mockNotification as Notification;
+  return mockNotification as GitifyNotification;
 }
 
 export function createMockNotificationForRepoName(
   id: string,
   repoFullName: string | null,
-): Notification {
+): GitifyNotification {
   return {
     id,
-    repository: repoFullName ? { full_name: repoFullName } : null,
+    repository: repoFullName ? { fullName: repoFullName } : null,
     account: mockGitHubCloudAccount,
-  } as Notification;
+  } as GitifyNotification;
 }

src/renderer/__mocks__/user-mocks.ts

@@ -1,5 +1,6 @@
 import type { GitifyUser, Link } from '../types';
 import type { User } from '../typesGitHub';
+import type { AuthorFieldsFragment } from '../utils/api/graphql/generated/graphql';
 
 export const mockGitifyUser: GitifyUser = {
   login: 'octocat',
@@ -18,3 +19,13 @@ export function createPartialMockUser(login: string): User {
 
   return mockUser as User;
 }
+
+export function createMockAuthorFragment(login: string): AuthorFieldsFragment {
+  return {
+    __typename: 'User',
+    login: login,
+    htmlUrl: `https://github.com/${login}`,
+    avatarUrl: 'https://avatars.githubusercontent.com/u/583231?v=4',
+    type: 'User',
+  };
+}

src/renderer/components/metrics/MetricGroup.tsx

@@ -8,13 +8,12 @@ import {
 } from '@primer/octicons-react';
 
 import { useAppContext } from '../../context/App';
-import { IconColor } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, IconColor } from '../../types';
 import { getPullRequestReviewIcon } from '../../utils/icons';
 import { MetricPill } from './MetricPill';
 
 interface MetricGroupProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const MetricGroup: FC<MetricGroupProps> = ({

src/renderer/components/notifications/AccountNotifications.tsx

@@ -4,8 +4,12 @@ import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
 import { Button, Stack } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
-import { type Account, type GitifyError, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import {
+  type Account,
+  type GitifyError,
+  type GitifyNotification,
+  Size,
+} from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
 import { cn } from '../../utils/cn';
 import { getChevronDetails } from '../../utils/helpers';
@@ -28,7 +32,7 @@ import { RepositoryNotifications } from './RepositoryNotifications';
 
 interface AccountNotificationsProps {
   account: Account;
-  notifications: Notification[];
+  notifications: GitifyNotification[];
   error: GitifyError | null;
   showAccountHeader: boolean;
 }

src/renderer/components/notifications/NotificationFooter.test.tsx

@@ -28,19 +28,6 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should render itself & its children when last_read_at is null', async () => {
-    const mockNotification = mockSingleNotification;
-    mockNotification.last_read_at = null;
-
-    const props = {
-      notification: mockNotification,
-    };
-
-    const tree = renderWithAppContext(<NotificationFooter {...props} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-
   describe('security alerts should use github icon for avatar', () => {
     it('Repository Dependabot Alerts Thread', async () => {
       const mockNotification = mockSingleNotification;
@@ -94,8 +81,8 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
           ...mockSingleNotification.subject,
           user: {
             login: 'some-user',
-            html_url: 'https://github.com/some-user' as Link,
-            avatar_url:
+            htmlUrl: 'https://github.com/some-user' as Link,
+            avatarUrl:
               'https://avatars.githubusercontent.com/u/123456789?v=4' as Link,
             type: 'User' as UserType,
           },
@@ -111,7 +98,7 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
 
     expect(openExternalLinkSpy).toHaveBeenCalledTimes(1);
     expect(openExternalLinkSpy).toHaveBeenCalledWith(
-      props.notification.subject.user.html_url,
+      props.notification.subject.user.htmlUrl,
     );
   });
 });

src/renderer/components/notifications/NotificationFooter.tsx

@@ -2,16 +2,15 @@ import type { FC, MouseEvent } from 'react';
 
 import { RelativeTime, Stack, Text } from '@primer/react';
 
-import { Opacity, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openUserProfile } from '../../utils/links';
 import { getReasonDetails } from '../../utils/reason';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 import { MetricGroup } from '../metrics/MetricGroup';
 
 interface NotificationFooterProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const NotificationFooter: FC<NotificationFooterProps> = ({
@@ -41,7 +40,7 @@ export const NotificationFooter: FC<NotificationFooterProps> = ({
           <AvatarWithFallback
             alt={notification.subject.user.login}
             size={Size.SMALL}
-            src={notification.subject.user.avatar_url}
+            src={notification.subject.user.avatarUrl}
             userType={notification.subject.user.type}
           />
         </button>
@@ -61,7 +60,7 @@ export const NotificationFooter: FC<NotificationFooterProps> = ({
         <Text className="pr-1" title={reason.description}>
           {reason.title}
         </Text>
-        <RelativeTime datetime={notification.updated_at} />
+        <RelativeTime datetime={notification.updatedAt} />
       </Stack>
 
       <MetricGroup notification={notification} />

src/renderer/components/notifications/NotificationHeader.test.tsx

@@ -87,7 +87,7 @@ describe('renderer/components/notifications/NotificationHeader.tsx', () => {
 
     expect(openExternalLinkSpy).toHaveBeenCalledTimes(1);
     expect(openExternalLinkSpy).toHaveBeenCalledWith(
-      props.notification.repository.html_url,
+      props.notification.repository.htmlUrl,
     );
   });
 });

src/renderer/components/notifications/NotificationHeader.tsx

@@ -3,22 +3,21 @@ import type { FC, MouseEvent } from 'react';
 import { Stack } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
-import { GroupBy, Opacity, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, GroupBy, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openRepository } from '../../utils/links';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 
 interface NotificationHeaderProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const NotificationHeader: FC<NotificationHeaderProps> = ({
   notification,
 }: NotificationHeaderProps) => {
   const { settings } = useAppContext();
 
-  const repoSlug = notification.repository.full_name;
+  const repoSlug = notification.repository.fullName;
 
   const notificationNumber = notification.subject?.number
     ? `#${notification.subject.number}`
@@ -45,7 +44,7 @@ export const NotificationHeader: FC<NotificationHeaderProps> = ({
               alt={repoSlug}
               name={repoSlug}
               size={Size.SMALL}
-              src={notification.repository.owner.avatar_url}
+              src={notification.repository.owner.avatarUrl}
               userType={notification.repository.owner.type}
             />
           </button>

src/renderer/components/notifications/NotificationRow.tsx

@@ -4,8 +4,7 @@ import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
 import { Stack, Text, Tooltip } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
-import { GroupBy, Opacity, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, GroupBy, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { isMarkAsDoneFeatureSupported } from '../../utils/features';
 import { openNotification } from '../../utils/links';
@@ -16,7 +15,7 @@ import { NotificationFooter } from './NotificationFooter';
 import { NotificationHeader } from './NotificationHeader';
 
 interface NotificationRowProps {
-  notification: Notification;
+  notification: GitifyNotification;
   isAnimated?: boolean;
 }
 

src/renderer/components/notifications/RepositoryNotifications.test.tsx

@@ -85,7 +85,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
   });
 
   it('should use default repository icon when avatar is not available', () => {
-    props.repoNotifications[0].repository.owner.avatar_url = '' as Link;
+    props.repoNotifications[0].repository.owner.avatarUrl = '' as Link;
 
     const tree = renderWithAppContext(<RepositoryNotifications {...props} />);