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/ui/modal.tsx

@@ -2,6 +2,7 @@ import { CrossIcon } from "@/assets/icons";
 import { useIsMutating } from "@tanstack/react-query";
 import { ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import IsVisible from "./IsVisible";
 
 interface ModalProps {
   isOpen: boolean;
@@ -10,6 +11,7 @@ interface ModalProps {
   children: ReactNode;
   confirmText?: string;
   cancelText?: string;
+  showButtons?: boolean;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -19,6 +21,7 @@ const Modal: React.FC<ModalProps> = ({
   onConfirm,
   confirmText = "confirm",
   cancelText = "close",
+  showButtons = true,
 }) => {
   const [mounted, setMounted] = useState(false);
   const isMutating = useIsMutating();
@@ -57,24 +60,26 @@ const Modal: React.FC<ModalProps> = ({
         </button>
         <div className="clear-both">{children}</div>
         <div className="flex gap-5">
-          <button
-            type="submit"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
-            onClick={onConfirm}
-          >
-            {isMutating ? (
-              <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
-            ) : (
-              <span>{confirmText}</span>
-            )}
-          </button>
-          <button
-            type="button"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
-            onClick={onClose}
-          >
-            {cancelText}
-          </button>
+          <IsVisible condition={showButtons}>
+            <button
+              type="submit"
+              className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+              onClick={onConfirm}
+            >
+              {isMutating ? (
+                <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+              ) : (
+                <span>{confirmText}</span>
+              )}
+            </button>
+            <button
+              type="button"
+              className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+              onClick={onClose}
+            >
+              {cancelText}
+            </button>
+          </IsVisible>
         </div>
       </div>
     </div>