refactor: deprecate react-transition-group over tailwind animations

package.json

@@ -110,6 +110,7 @@
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.9.0",
     "axios": "1.7.2",
+    "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "electron-updater": "6.2.1",
     "final-form": "4.20.10",
@@ -119,7 +120,6 @@
     "react-dom": "18.3.1",
     "react-final-form": "6.5.9",
     "react-router-dom": "6.23.1",
-    "react-transition-group": "4.4.5",
     "ts-loader": "9.5.1",
     "typescript": "5.4.5"
   },
@@ -132,7 +132,6 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "18.3.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-transition-group": "4.4.10",
     "autoprefixer": "10.4.19",
     "css-loader": "7.1.2",
     "electron": "31.0.1",

src/components/NotificationRow.tsx

@@ -8,11 +8,17 @@ import {
   ReadIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import { type FC, type MouseEvent, useCallback, useContext } from 'react';
-
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
 import { AppContext } from '../context/App';
 import { type Account, IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import {
   formatForDisplay,
   formatNotificationUpdatedAt,
@@ -41,8 +47,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
     unsubscribeNotification,
     notifications,
   } = useContext(AppContext);
+  const [animateExit, setAnimateExit] = useState(false);
 
   const handleNotification = useCallback(() => {
+    setAnimateExit(true);
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -89,10 +97,14 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
   return (
     <div
       id={notification.id}
-      className="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      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',
+      )}
     >
       <div
-        className={`flex justify-center items-center mr-3 w-5 ${iconColor}`}
+        className={cn('flex justify-center items-center mr-3 w-5', iconColor)}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
@@ -204,7 +216,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
-          onClick={() => markNotificationDone(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationDone(notification);
+          }}
         >
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
@@ -222,7 +237,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Read"
-          onClick={() => markNotificationRead(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationRead(notification);
+          }}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>

src/components/Repository.tsx

@@ -1,6 +1,5 @@
 import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react';
 import { type FC, useCallback, useContext } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { AppContext } from '../context/App';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -77,17 +76,9 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
       </div>
 
-      <TransitionGroup>
-        {repoNotifications.map((obj) => (
-          <CSSTransition key={obj.id} timeout={250} classNames="notification">
-            <NotificationRow
-              key={obj.id}
-              account={account}
-              notification={obj}
-            />
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
+      {repoNotifications.map((obj) => (
+        <NotificationRow key={obj.id} account={account} notification={obj} />
+      ))}
     </>
   );
 };

src/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
 import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
+import { cn } from '../utils/cn';
 import { quitApp } from '../utils/comms';
 import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
@@ -47,9 +48,10 @@ export const Sidebar: FC = () => {
 
         <button
           type="button"
-          className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
-            notificationsCount > 0 ? 'text-green-500' : 'text-white'
-          }`}
+          className={cn(
+            'flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer',
+            notificationsCount > 0 ? 'text-green-500' : 'text-white',
+          )}
           onClick={() => openGitHubNotifications()}
           title={`${notificationsCount} Unread Notifications`}
         >