Don't close snackbar if it is hovered

close #9534

Co-authored-by: hrb-hub <[email protected]>

Author: BijinDev

src/common/gui/base/SnackBar.ts

@@ -23,8 +23,9 @@ type SnackBarAttrs = {
 	message: MaybeTranslation
 	button: ButtonAttrs | null
 	dismissButton?: IconButtonAttrs
+	onHoverChange: (hovered: boolean) => void
 }
-type QueueItem = SnackBarAttrs & {
+type QueueItem = Omit<SnackBarAttrs, "onHoverChange"> & {
 	onClose: ((timedOut: boolean) => unknown) | null
 	onShow: (() => unknown) | null
 	doCancel: { cancel: () => unknown }
@@ -38,11 +39,22 @@ let cancelCurrentSnackbar: (() => unknown) | null = null
 class SnackBar implements Component<SnackBarAttrs> {
 	view(vnode: Vnode<SnackBarAttrs>) {
 		// use same padding as MinimizedEditor
-		return m(".snackbar-content.flex.flex-space-between.border-radius.plr.pb-xs.pt-xs", [
-			m(".flex.center-vertically.smaller", lang.getTranslationText(vnode.attrs.message)),
-			vnode.attrs.button ? m(".flex-end.center-vertically.pl", m(Button, vnode.attrs.button)) : null,
-			vnode.attrs.dismissButton ? m(".flex.items-center.justify-right", [m(IconButton, vnode.attrs.dismissButton)]) : null,
-		])
+		return m(
+			".snackbar-content.flex.flex-space-between.border-radius.plr.pb-xs.pt-xs.content-hover",
+			{
+				onmouseenter: () => {
+					vnode.attrs.onHoverChange(true)
+				},
+				onmouseleave: () => {
+					vnode.attrs.onHoverChange(false)
+				},
+			},
+			[
+				m(".flex.center-vertically.smaller", lang.getTranslationText(vnode.attrs.message)),
+				vnode.attrs.button ? m(".flex-end.center-vertically.pl", m(Button, vnode.attrs.button)) : null,
+				vnode.attrs.dismissButton ? m(".flex.items-center.justify-right", [m(IconButton, vnode.attrs.dismissButton)]) : null,
+			],
+		)
 	}
 }
 
@@ -161,6 +173,9 @@ function showNextNotification() {
 					message,
 					button,
 					dismissButton: dismissButton,
+					onHoverChange: (isHovered) => {
+						hovered = isHovered
+					},
 				}),
 		},
 		"slide-bottom",
@@ -169,8 +184,14 @@ function showNextNotification() {
 	)
 
 	let closed = false
+	let hovered = false
 
 	const closeAndOpenNext = (timedOut: boolean) => {
+		if (timedOut && hovered) {
+			debounce(1000, closeAndOpenNext)(true)
+			return
+		}
+
 		closed = true
 		cancelCurrentSnackbar = null