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