feat(notifications): Auto-mark as read and enhance UI

This commit improves the user experience for notifications by automatically marking them as read upon viewing and refining the UI.

- Notifications are now marked as read immediately when the modal is opened, removing the need for an extra confirmation click.
- The "Mark as read" button has been removed from the modal to streamline the user flow.
- In the notification history table, a new reusable `Boolean` component is used to display the 'seen' status, replacing the previous icon-based implementation.
- Long messages in the history table are now truncated to improve readability and prevent layout issues.
- Added hover effects to the notification dropdown list for better visual feedback.
- Standardized the required field indicator color to use the `text-error` class for consistency.

src/components/Layouts/header/notification/index.tsx

@@ -36,6 +36,7 @@ export function Notification() {
     setCurrentNotification(notification);
     setIsModalOpen(true);
     setIsOpen(false);
+    mutate();
   };
 
   return (
@@ -95,15 +96,13 @@ export function Notification() {
 
       <Modal
         isOpen={isModalOpen}
+        showButtons={false}
         onClose={() => {
           setIsModalOpen(false);
         }}
         confirmText="Mark as read"
-        onConfirm={() => {
-          mutate();
-        }}
       >
-        <div className="flex flex-col gap-3 max-w-prose">
+        <div className="flex max-w-prose flex-col gap-3">
           <h2 className="font-lg font-bold">{currentNotification?.title}</h2>
           <p>{currentNotification?.message}</p>
         </div>

src/components/Layouts/header/notification/notification-list.tsx

@@ -16,7 +16,7 @@ const NotificationList = ({
   setUnreadNotificationCount,
   onNotificationClick,
 }: IProps) => {
-  const { data, isLoading } = useGetMyNotifications({seen:false});
+  const { data, isLoading } = useGetMyNotifications({ seen: false });
   useEffect(() => {
     setUnreadNotificationCount(data?.data.length ?? 0);
   }, [data, isLoading]);
@@ -34,7 +34,7 @@ const NotificationList = ({
           key={notification.id}
           onClick={() => onNotificationClick(notification)}
         >
-          <div className="cursor-pointer rounded-lg px-1 py-2 hover:bg-gray-2">
+          <div className="cursor-pointer rounded-lg px-1 py-2 transition-all duration-300 hover:bg-gray-2 dark:hover:bg-gray-7">
             <strong className="block text-lg font-medium capitalize text-dark dark:text-white">
               {notification.title}
             </strong>