fix: regression in delay notification state after tailwind animations

Author: setchy

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/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.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(