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>