chore: sort tw classes

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/app.tsx

@@ -31,7 +31,7 @@ export const App = () => {
   return (
     <AppProvider>
       <Router>
-        <div className="flex flex-col pl-14 h-full">
+        <div className="flex h-full flex-col pl-14">
           <Loading />
           <Sidebar />
           <Routes>

src/components/AccountNotifications.tsx

@@ -54,7 +54,7 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold">
+        <div className="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
           <div>
             <PlatformIcon type={account.platform} size={16} />
             <button

src/components/AllRead.tsx

@@ -11,12 +11,10 @@ export const AllRead = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
-      <h1 className="text-5xl mb-5">{emoji}</h1>
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+      <h1 className="mb-5 text-5xl">{emoji}</h1>
 
-      <h2 className="font-semibold text-xl mb-2 text-semibold">
-        No new notifications.
-      </h2>
+      <h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
     </div>
   );
 };

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,29 +97,33 @@ 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('mr-3 flex w-5 items-center justify-center', iconColor)}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
 
       <div
-        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
         onKeyDown={() => handleNotification()}
       >
         <div
-          className="mb-1 text-sm truncate cursor-pointer"
+          className="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
+        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
           {notification.subject.user ? (
             <button
               type="button"
@@ -124,7 +136,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
               className="flex-shrink-0"
             >
               <img
-                className="rounded-full w-4 h-4 object-cover cursor-pointer"
+                className="size-4 cursor-pointer rounded-full object-cover"
                 src={notification.subject.user.avatar_url}
                 title={notification.subject.user.login}
                 alt={`${notification.subject.user.login}'s avatar`}
@@ -199,19 +211,22 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
         </div>
       </div>
 
-      <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
+      <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-green-500"
+          className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
-          onClick={() => markNotificationDone(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationDone(notification);
+          }}
         >
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
 
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-red-500"
+          className="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           onClick={unsubscribeFromThread}
         >
@@ -220,9 +235,12 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
 
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-green-500"
+          className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
-          onClick={() => markNotificationRead(notification)}
+          onClick={() => {
+            setAnimateExit(true);
+            markNotificationRead(notification);
+          }}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>

src/components/Oops.tsx

@@ -12,16 +12,14 @@ export const Oops: FC<IProps> = ({ error }) => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
-      <h1 className="text-5xl mb-5">{emoji}</h1>
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+      <h1 className="mb-5 text-5xl">{emoji}</h1>
 
-      <h2 className="font-semibold text-xl mb-2 text-semibold">
-        {error.title}
-      </h2>
+      <h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
       {error.descriptions.map((description, i) => {
         return (
           // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-          <div className="text-center mb-2" key={`error_description_${i}`}>
+          <div className="mb-2 text-center" key={`error_description_${i}`}>
             {description}
           </div>
         );