fix: regression in delay notification state behavior

src/components/NotificationRow.tsx

@@ -8,13 +8,7 @@ import {
   ReadIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import {
-  type FC,
-  type MouseEvent,
-  useCallback,
-  useContext,
-  useState,
-} from 'react';
+import { type FC, type MouseEvent, useCallback, useContext } from 'react';
 import { AppContext } from '../context/App';
 import { IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -44,10 +38,8 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
     markNotificationDone,
     unsubscribeNotification,
   } = useContext(AppContext);
-  const [animateExit, setAnimateExit] = useState(false);
 
   const handleNotification = useCallback(() => {
-    setAnimateExit(true);
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -98,11 +90,9 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
   return (
     <div
       id={notification.id}
-      className={cn(
-        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
-        animateExit &&
-          'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
-      )}
+      className={
+        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker'
+      }
     >
       <div
         className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
@@ -218,7 +208,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           onClick={() => {
-            setAnimateExit(true);
             markNotificationDone(notification);
           }}
         >
@@ -239,7 +228,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           onClick={() => {
-            setAnimateExit(true);
             markNotificationRead(notification);
           }}
         >

src/context/App.tsx

@@ -122,6 +122,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     settings.participating,
     settings.showBots,
     settings.detailedNotifications,
+    settings.delayNotificationState,
     auth.accounts.length,
   ]);
 

src/hooks/useNotifications.test.ts

@@ -2,6 +2,7 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import axios, { AxiosError } from 'axios';
 import nock from 'nock';
 
+import { mockSingleAccountNotifications } from '../__mocks__/notifications-mocks';
 import {
   mockAuth,
   mockGitHubCloudAccount,
@@ -299,6 +300,10 @@ describe('hooks/useNotifications.ts', () => {
 
   describe('removeNotificationFromState', () => {
     it('should remove a notification from state', async () => {
+      const mockElement = document.createElement('div');
+      mockElement.id = mockSingleAccountNotifications[0].notifications[0].id;
+      jest.spyOn(document, 'getElementById').mockReturnValue(mockElement);
+
       const notifications = [
         { id: 1, title: 'This is a notification.' },
         { id: 2, title: 'This is another one.' },

src/styles/gitify.ts

@@ -5,3 +5,6 @@ export const BUTTON_SIDEBAR_CLASS_NAME =
   'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
 
 export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';
+
+export const ANIMATE_NOTIFICATION_CLASS_NAME =
+  'translate-x-full opacity-0 transition duration-[350ms] ease-in-out';

src/utils/remove-notification.test.ts

@@ -6,6 +6,10 @@ import { removeNotification } from './remove-notification';
 
 describe('utils/remove-notification.ts', () => {
   it('should remove a notification if it exists', () => {
+    const mockElement = document.createElement('div');
+    mockElement.id = mockSingleAccountNotifications[0].notifications[0].id;
+    jest.spyOn(document, 'getElementById').mockReturnValue(mockElement);
+
     expect(mockSingleAccountNotifications[0].notifications.length).toBe(1);
 
     const result = removeNotification(

src/utils/remove-notification.ts

@@ -1,4 +1,7 @@
-import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
+import {
+  ANIMATE_NOTIFICATION_CLASS_NAME,
+  READ_NOTIFICATION_CLASS_NAME,
+} from '../styles/gitify';
 import type { AccountNotifications, SettingsState } from '../types';
 import type { Notification } from '../typesGitHub';
 import { getAccountUUID } from './auth/utils';
@@ -14,6 +17,9 @@ export const removeNotification = (
     return notifications;
   }
 
+  const notificationRow = document.getElementById(notification.id);
+  notificationRow.className += ` ${ANIMATE_NOTIFICATION_CLASS_NAME}`;
+
   const notificationId = notification.id;
 
   const accountIndex = notifications.findIndex(