From d75af2726744728b68dfced17f5eef04a09dd86b Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 19 Feb 2022 22:15:49 -0800
Subject: [PATCH] feat: Hold toast on screen while mouse over

---
 app/components/Toast.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/components/Toast.tsx b/app/components/Toast.tsx
index e44a8a99f..50e6dbc34 100644
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -29,8 +29,27 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
     }
   }, [reoccurring]);
 
+  const handlePause = React.useCallback(() => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  }, []);
+
+  const handleResume = React.useCallback(() => {
+    if (timeout.current) {
+      timeout.current = setTimeout(
+        onRequestClose,
+        toast.timeout || closeAfterMs
+      );
+    }
+  }, [onRequestClose, toast, closeAfterMs]);
+
   return (
-    <ListItem $pulse={pulse}>
+    <ListItem
+      $pulse={pulse}
+      onMouseEnter={handlePause}
+      onMouseLeave={handleResume}
+    >
       <Container onClick={action ? undefined : onRequestClose}>
         {type === "info" && <InfoIcon color="currentColor" />}
         {type === "success" && <CheckboxIcon checked color="currentColor" />}
@@ -88,6 +107,7 @@ const Message = styled.div`
   display: inline-block;
   font-weight: 500;
   padding: 10px 4px;
+  user-select: none;
 `;
 
 export default Toast;