feat: avoid removing notification when mouse hover

src/components/Notifications.tsx

@@ -3,15 +3,22 @@ import type { Notification } from '../types/types';
 type Props = {
   notifications: Notification[];
   onRemove: (id: number) => void;
+  onHover: (id: number, hovering: boolean) => void;
 };
 
-export default function Notifications({ notifications, onRemove }: Props) {
+export default function Notifications({
+  notifications,
+  onRemove,
+  onHover,
+}: Props) {
   return (
     <div className="notifications">
       {notifications.map((n) => (
         <div
           key={n.id}
           className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
+          onMouseEnter={() => onHover(n.id, true)}
+          onMouseLeave={() => onHover(n.id, false)}
         >
           <span className="notification-message" title={n.message}>
             {n.message}

src/components/app/App.tsx

@@ -16,7 +16,7 @@ function App() {
   const [dsps, setDsps] = useState<DSP[]>([]);
   const [selected, setSelected] = useState<number | null>(null);
   const [page, setPage] = useState<AppPage>('home');
-  const { notifications, notify, removeNotification } = useNotifications();
+  const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
 
   async function addDSP(dsp: Omit<DSP, 'id' | 'status'>) {
     try {
@@ -126,7 +126,7 @@ function App() {
 
   return (
     <div className="app">
-      <Notifications notifications={notifications} onRemove={removeNotification} />
+      <Notifications notifications={notifications} onRemove={removeNotification} onHover={hoverNotification}/>
 
       <TopBar
         dsps={dsps}