fix(app): notifications appearing with modal open (#6348)

fix: notifications appearing with modal open

packages/ui/src/components/modal/NewModal.vue

@@ -136,7 +136,6 @@
 import { XIcon } from '@modrinth/assets'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
-import { useDebugLogger } from '../../composables/debug-logger'
 import { useVIntl } from '../../composables/i18n'
 import { useModalStack } from '../../composables/modal-stack'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
@@ -145,7 +144,6 @@ import { commonMessages } from '../../utils/common-messages'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
 const { formatMessage } = useVIntl()
-const debug = useDebugLogger('NewModal')
 
 const modalBehavior = injectModalBehavior(null)
 const {
@@ -235,138 +233,56 @@ function getFocusableElements(): HTMLElement[] {
 }
 
 function show(event?: MouseEvent) {
-	debug('show: start', {
-		header: props.header,
-		open: open.value,
-		visible: visible.value,
-		stackSize: modalStackSize(),
-		hasEvent: !!event,
-	})
 	props.onShow?.()
-	debug('show: after onShow', { header: props.header })
 	const wasEmpty = modalStackSize() === 0
 	stackDepth.value = modalStackSize()
-	debug('show: before open=true', {
-		header: props.header,
-		wasEmpty,
-		stackDepth: stackDepth.value,
-	})
 	open.value = true
-	debug('show: after open=true', {
-		header: props.header,
-		open: open.value,
-		modalBodyExists: !!modalBodyRef.value,
-	})
 	previousFocusEl = document.activeElement
-	debug('show: previous focus captured', {
-		header: props.header,
-		previousFocusTag: previousFocusEl instanceof HTMLElement ? previousFocusEl.tagName : null,
-		previousFocusClass: previousFocusEl instanceof HTMLElement ? previousFocusEl.className : null,
-	})
 	pushModal()
-	debug('show: after pushModal', { header: props.header, stackSize: modalStackSize() })
 	if (wasEmpty) modalBehavior?.onShow?.()
-	debug('show: after modalBehavior onShow', { header: props.header })
 
 	document.body.style.overflow = 'hidden'
 	window.addEventListener('keydown', handleWindowKeyDown)
 	window.addEventListener('mousedown', updateMousePosition)
-	debug('show: listeners attached', { header: props.header })
 	if (event) {
 		updateMousePosition(event)
 	} else {
 		mouseX.value = Math.round(window.innerWidth / 2)
 		mouseY.value = Math.round(window.innerHeight / 2)
 	}
-	debug('show: mouse position set', {
-		header: props.header,
-		mouseX: mouseX.value,
-		mouseY: mouseY.value,
-	})
 	setTimeout(() => {
-		debug('show: timeout before visible=true', {
-			header: props.header,
-			open: open.value,
-			visible: visible.value,
-			modalBodyExists: !!modalBodyRef.value,
-		})
 		visible.value = true
-		debug('show: timeout after visible=true', {
-			header: props.header,
-			open: open.value,
-			visible: visible.value,
-			modalBodyExists: !!modalBodyRef.value,
-		})
 		nextTick(() => {
-			debug('show: nextTick focus start', {
-				header: props.header,
-				modalBodyExists: !!modalBodyRef.value,
-			})
 			const focusable = getFocusableElements()
-			debug('show: focusable elements', {
-				header: props.header,
-				count: focusable.length,
-				firstTag: focusable[0]?.tagName,
-			})
 			if (focusable.length > 0) {
 				focusable[0].focus()
 			} else {
 				modalBodyRef.value?.focus()
 			}
-			debug('show: nextTick focus done', { header: props.header })
 		})
 	}, 50)
-	debug('show: end', { header: props.header })
 }
 
 function hide() {
-	debug('hide: start', {
-		header: props.header,
-		open: open.value,
-		visible: visible.value,
-		disableClose: props.disableClose,
-		stackSize: modalStackSize(),
-	})
 	if (props.disableClose) {
-		debug('hide: ignored disableClose', { header: props.header })
 		return
 	}
 	props.onHide?.()
-	debug('hide: after onHide', { header: props.header })
 	visible.value = false
-	debug('hide: after visible=false', { header: props.header, visible: visible.value })
 	popModal()
-	debug('hide: after popModal', { header: props.header, stackSize: modalStackSize() })
 	if (modalStackSize() === 0) {
 		modalBehavior?.onHide?.()
 		document.body.style.overflow = ''
 	}
 	window.removeEventListener('keydown', handleWindowKeyDown)
 	window.removeEventListener('mousedown', updateMousePosition)
-	debug('hide: listeners removed', { header: props.header })
 	if (previousFocusEl instanceof HTMLElement) {
-		debug('hide: restoring focus', {
-			header: props.header,
-			previousFocusTag: previousFocusEl.tagName,
-			previousFocusClass: previousFocusEl.className,
-		})
 		previousFocusEl.focus()
 	}
 	previousFocusEl = null
 	setTimeout(() => {
-		debug('hide: timeout before open=false', {
-			header: props.header,
-			open: open.value,
-			visible: visible.value,
-		})
 		open.value = false
-		debug('hide: timeout after open=false', {
-			header: props.header,
-			open: open.value,
-			visible: visible.value,
-		})
 	}, 300)
-	debug('hide: end', { header: props.header })
 }
 
 defineExpose({
@@ -394,12 +310,6 @@ function updateMousePosition(event: { clientX: number; clientY: number }) {
 }
 
 onUnmounted(() => {
-	debug('unmounted', {
-		header: props.header,
-		open: open.value,
-		visible: visible.value,
-		stackSize: modalStackSize(),
-	})
 	if (open.value) {
 		popModal()
 		window.removeEventListener('keydown', handleWindowKeyDown)
@@ -528,11 +438,12 @@ defineOptions({
 	visibility: hidden;
 	pointer-events: none;
 	transform: translate(v-bind(mouseXOffset), v-bind(mouseYOffset));
-	transition: all 0.2s ease-out;
+	transition: none;
 
 	&.shown {
 		visibility: visible;
 		transform: translate(0, 0);
+		transition: all 0.2s ease-out;
 
 		> .modal-body {
 			opacity: 1;