fix: popup styles and jankiness (#6787)

* feat: greatly improve the jankiness

* fix: US variant of consent popup

* fix: US cmp in website and styles for US cmp

* remove incognito

* fix: flashing box in top left

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app/src/api/ads-init.js

@@ -1,19 +1,158 @@
 const MODRINTH_ORIGIN = 'https://modrinth.com'
 
+function installAdsConsentThemeStyle() {
+	if (document.getElementById('modrinth-ads-consent-theme-style')) return
+
+	const style = document.createElement('style')
+	style.id = 'modrinth-ads-consent-theme-style'
+	style.textContent = `
+		:root {
+			--modrinth-usp-bg: #27292e;
+			--modrinth-usp-surface: #34363c;
+			--modrinth-usp-divider: #34363c;
+			--modrinth-usp-text: #b0bac5;
+			--modrinth-usp-contrast: #ffffff;
+			--modrinth-usp-brand: #1bd96a;
+			--modrinth-usp-link: #4f9cff;
+			--modrinth-usp-accent-contrast: #000000;
+			--modrinth-usp-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px,
+				rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
+			color-scheme: dark;
+		}
+
+		#qc-cmp2-usp {
+			background: var(--modrinth-usp-bg) !important;
+			border: 1px solid var(--modrinth-usp-divider) !important;
+			border-radius: 1rem !important;
+			box-shadow: var(--modrinth-usp-shadow) !important;
+			color: var(--modrinth-usp-text) !important;
+			font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto,
+				Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
+			max-width: 660px;
+		}
+
+		#qc-cmp2-usp .qc-usp-ui-content,
+		#qc-cmp2-usp .qc-usp-ui-form-content,
+		#qc-cmp2-usp .qc-usp-container {
+			background: transparent !important;
+		}
+		#qc-cmp2-usp .qc-usp-container{
+			margin-bottom: 12px;
+		}
+
+		#qc-cmp2-usp p,
+		#qc-cmp2-usp label,
+		#qc-cmp2-usp .qc-usp-action-description {
+			color: var(--modrinth-usp-text) !important;
+			font-family: inherit !important;
+		}
+
+		#qc-cmp2-usp .qc-usp-title,
+		#qc-cmp2-usp .qc-cmp2-list-item-title {
+			color: var(--modrinth-usp-contrast) !important;
+			font-family: inherit !important;
+			font-weight: 700 !important;
+		}
+
+		#qc-cmp2-usp .qc-usp-title {
+			font-size: 1.25rem !important;
+		}
+
+		#qc-cmp2-usp a,
+		#qc-cmp2-usp .qc-usp-alt-action {
+			color: var(--modrinth-usp-link) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-list-item {
+			background: var(--modrinth-usp-surface) !important;
+			border: 1px solid var(--modrinth-usp-divider) !important;
+			border-radius: 0.75rem !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-list-item-header {
+			background: transparent !important;
+			border: 0 !important;
+			color: var(--modrinth-usp-contrast) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-list-item-header svg {
+			color: var(--modrinth-usp-text) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-toggle {
+			background: var(--modrinth-usp-bg) !important;
+			border-color: var(--modrinth-usp-divider) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-toggle .toggle {
+			background: var(--modrinth-usp-contrast) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-toggle .text {
+			color: var(--modrinth-usp-contrast) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-toggle[aria-checked='true'] {
+			background: var(--modrinth-usp-brand) !important;
+			border-color: var(--modrinth-usp-brand) !important;
+		}
+
+		#qc-cmp2-usp .qc-cmp2-toggle[aria-checked='true'] .text {
+			color: var(--modrinth-usp-accent-contrast) !important;
+		}
+
+		#qc-cmp2-usp button[mode='primary'] {
+			background: var(--modrinth-usp-brand) !important;
+			border: 0 !important;
+			border-radius: 0.75rem !important;
+			color: var(--modrinth-usp-accent-contrast) !important;
+			font-family: inherit !important;
+			font-weight: 700 !important;
+		}
+
+		#qc-cmp2-usp .qc-usp-close-icon {
+			border: 0 !important;
+			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")
+				center / 1.5rem 1.5rem no-repeat;
+		}
+
+		#qc-cmp2-usp a:focus-visible,
+		#qc-cmp2-usp button:focus-visible {
+			outline: 2px solid var(--modrinth-usp-brand) !important;
+			outline-offset: 2px !important;
+		}
+
+		#qc-cmp2-usp .qc-usp-ui-content {
+			max-width: 100% !important;
+		}
+
+		#qc-cmp2-usp .qc-usp-ui-content .qc-usp-ui-form-content {
+			border: 1px solid transparent !important;
+			padding: 0 !important;
+		}
+	`
+	document.documentElement.appendChild(style)
+}
+
 document.addEventListener(
 	'click',
 	function (e) {
 		window.top.postMessage({ modrinthAdClick: true }, MODRINTH_ORIGIN)
 
 		let target = e.target
-		if (target?.closest?.('.qc-cmp2-close-icon')) {
-			if (modrinthAdsConsentReprompt) {
+		const uspCloseIcon = target?.closest?.('.qc-usp-close-icon')
+		if (target?.closest?.('.qc-cmp2-close-icon') || uspCloseIcon) {
+			if (isAdsConsentReprompt()) {
 				setTimeout(finishAdsConsentReprompt)
 			} else if (document.documentElement.classList.contains('modrinth-ads-consent-preferences')) {
 				setTimeout(() => void restoreAdsConsentNotification())
 			}
 		}
 
+		if (target?.closest?.('#qc-cmp2-usp .qc-usp-ui-form-content button[mode="primary"]')) {
+			beginUspConsentCommit()
+		}
+
 		while (target != null) {
 			if (target.matches('a')) {
 				e.preventDefault()
@@ -32,14 +171,54 @@ window.open = (url, target, features) => {
 	window.top.postMessage({ modrinthOpenUrl: url }, MODRINTH_ORIGIN)
 }
 
-let modrinthAdsConsentOverlayShown = false
+const modrinthAdsConsentState = {
+	phase: 'idle',
+	variant: null,
+	commitTimeout: null,
+}
 let modrinthTcfListenerInstalled = false
 let modrinthTcfListenerAttempts = 0
-let modrinthAdsConsentReprompt = false
-let modrinthAdsConsentRepromptManaging = false
+let modrinthGppListenerInstalled = false
+let modrinthGppListenerAttempts = 0
 let modrinthAdsConsentActionRequestId = 0
 const modrinthAdsConsentActionResolvers = new Map()
 
+function transitionAdsConsent(event) {
+	const phase = modrinthAdsConsentState.phase
+
+	if (event === 'prompt-detected') {
+		if (phase === 'idle') modrinthAdsConsentState.phase = 'initial'
+	} else if (event === 'reprompt-started') {
+		modrinthAdsConsentState.phase = 'reprompt'
+	} else if (event === 'commit-started') {
+		modrinthAdsConsentState.phase = isAdsConsentReprompt()
+			? 'reprompt-committing'
+			: 'initial-committing'
+	} else if (event === 'commit-timed-out') {
+		if (phase === 'reprompt-committing') {
+			modrinthAdsConsentState.phase = 'reprompt'
+		} else if (phase === 'initial-committing') {
+			modrinthAdsConsentState.phase = 'initial'
+		}
+	} else if (event === 'completed') {
+		modrinthAdsConsentState.phase = 'complete'
+	}
+}
+
+function isAdsConsentReprompt() {
+	return (
+		modrinthAdsConsentState.phase === 'reprompt' ||
+		modrinthAdsConsentState.phase === 'reprompt-committing'
+	)
+}
+
+function isUspConsentCommitPending() {
+	return (
+		modrinthAdsConsentState.phase === 'initial-committing' ||
+		modrinthAdsConsentState.phase === 'reprompt-committing'
+	)
+}
+
 function installAdsRailStyle() {
 	if (document.getElementById('modrinth-ads-rail-style')) {
 		return
@@ -48,8 +227,7 @@ function installAdsRailStyle() {
 	style.id = 'modrinth-ads-rail-style'
 	style.textContent = `
 		html.modrinth-ads-consent-preferences #modrinth-rail-1 {
-			visibility: hidden !important;
-			pointer-events: none !important;
+			display: none !important;
 		}
 	`
 	document.documentElement.appendChild(style)
@@ -62,18 +240,13 @@ function installAdsConsentOverlayStyle() {
 	const style = document.createElement('style')
 	style.id = 'modrinth-ads-consent-overlay-style'
 	style.textContent = `
-		html.modrinth-ads-consent-overlay:not(.modrinth-ads-consent-preferences) #modrinth-rail-1 {
-			visibility: hidden !important;
-		}
-
 		html.modrinth-ads-consent-overlay:not(.modrinth-ads-consent-preferences) #qc-cmp2-container,
-		html.modrinth-ads-consent-overlay:not(.modrinth-ads-consent-preferences) #qc-cmp2-main {
-			visibility: hidden !important;
-			pointer-events: none !important;
+		html.modrinth-ads-consent-preferences:not(.modrinth-ads-consent-preferences-visible) #qc-cmp2-container {
+			display: none !important;
 		}
 
-		.qc-cmp2-close-icon {
-			background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M.5.5l23 23m0-23l-23 23' fill='none' stroke='%23b0bac5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E") 0% 0% / 66% auto no-repeat !important;
+		#qc-cmp2-usp .qc-usp-close-icon {
+			display: none !important;
 		}
 	`
 	document.documentElement.appendChild(style)
@@ -96,13 +269,20 @@ function invokeAdsConsentOverlayCommand(shown) {
 	invoke(`plugin:ads|${command}`, args).catch(() => {})
 }
 
-function revealAdsConsentPreferences() {
+function prepareAdsConsentPreferences() {
+	installAdsRailStyle()
+	installAdsConsentOverlayStyle()
 	document.documentElement.classList.add('modrinth-ads-consent-preferences')
-	document.getElementById('modrinth-ads-consent-overlay-style')?.remove()
+	document.documentElement.classList.remove('modrinth-ads-consent-preferences-visible')
+}
+
+function revealAdsConsentPreferences() {
+	document.documentElement.classList.add('modrinth-ads-consent-preferences-visible')
 }
 
 function concealAdsConsentPreferences() {
 	document.documentElement.classList.remove('modrinth-ads-consent-preferences')
+	document.documentElement.classList.remove('modrinth-ads-consent-preferences-visible')
 	installAdsConsentOverlayStyle()
 }
 
@@ -127,60 +307,181 @@ function isDirectChildFrame(source) {
 	)
 }
 
-function findAdsConsentButton(action) {
-	const container = document.querySelector('#qc-cmp2-container, #qc-cmp2-main')
-	if (!container) return null
-	const summaryButtons = Array.from(container.querySelectorAll('.qc-cmp2-summary-buttons button'))
+function displayUspConsentUi() {
+	if (typeof window.__uspapi !== 'function') return false
 
-	if (action === 'accept') {
-		const explicitAcceptButton = container.querySelector('#accept-btn')
-		if (explicitAcceptButton) return explicitAcceptButton
-		if (summaryButtons.length >= 3) return summaryButtons[2]
-
-		return container.querySelector('.qc-cmp2-summary-buttons button[mode="primary"]')
+	try {
+		window.__uspapi('displayUspUi', 1, () => {})
+		return true
+	} catch {
+		return false
 	}
-
-	if (action === 'reject') {
-		const explicitRejectButton = container.querySelector('#disagree-btn')
-		if (explicitRejectButton) return explicitRejectButton
-		if (summaryButtons.length >= 3) return summaryButtons[1]
-
-		const secondaryButtons = container.querySelectorAll(
-			'.qc-cmp2-summary-buttons button[mode="secondary"]',
-		)
-		if (secondaryButtons.length > 1) return secondaryButtons[1]
-
-		return summaryButtons.find(
-			(button) => button.textContent?.trim().toLowerCase() === 'reject all',
-		)
-	}
-
-	return (
-		container.querySelector(
-			'#more-options-btn, .qc-cmp2-summary-buttons > button[mode="secondary"]:first-of-type',
-		) ?? summaryButtons[0]
-	)
 }
 
-function clickAdsConsentButtonWhenReady(action, timeoutMs, onButtonFound) {
-	const deadline = Date.now() + timeoutMs
+function detectAdsConsentVariant() {
+	let variant = null
 
+	if (document.getElementById('qc-cmp2-usp')) {
+		variant = 'usp'
+	} else if (document.getElementById('qc-cmp2-ui')) {
+		variant = 'tcf'
+	}
+
+	if (variant) {
+		modrinthAdsConsentState.variant = variant
+	}
+
+	return variant
+}
+
+function findTcfConsentButton(action) {
+	const dialog = document.getElementById('qc-cmp2-ui')
+	if (!dialog) return null
+
+	const buttonIds = {
+		accept: 'accept-btn',
+		reject: 'disagree-btn',
+		manage: 'more-options-btn',
+	}
+	const buttonId = buttonIds[action]
+	if (!buttonId) return null
+
+	const button = dialog.querySelector(`#${buttonId}`)
+	return button && !button.disabled ? button : null
+}
+
+function getUspConsentControls() {
+	const dialog = document.getElementById('qc-cmp2-usp')
+	if (!dialog) return null
+
+	const toggles = Array.from(
+		dialog.querySelectorAll('.qc-usp-container button.qc-cmp2-toggle[role="switch"]'),
+	)
+	const confirmButton = dialog.querySelector('.qc-usp-ui-form-content button[mode="primary"]')
+
+	if (
+		toggles.length === 0 ||
+		!confirmButton ||
+		confirmButton.disabled ||
+		toggles.some(
+			(toggle) =>
+				toggle.disabled || !['true', 'false'].includes(toggle.getAttribute('aria-checked')),
+		)
+	) {
+		return null
+	}
+
+	return { toggles, confirmButton }
+}
+
+function waitForUspToggleState(index, checked, expectedCount, deadline) {
 	return new Promise((resolve) => {
-		function tryClick() {
-			const button = findAdsConsentButton(action)
-			if (button) {
-				// CMP navigation can replace this document during the click, so acknowledge it first.
-				onButtonFound?.()
-				resolve(true)
-				button.click()
+		function checkState() {
+			const controls = getUspConsentControls()
+			if (
+				controls &&
+				controls.toggles.length === expectedCount &&
+				controls.toggles[index]?.getAttribute('aria-checked') === String(checked)
+			) {
+				resolve(controls)
 			} else if (Date.now() >= deadline) {
-				resolve(false)
+				resolve(null)
 			} else {
-				setTimeout(tryClick, 50)
+				setTimeout(checkState, 50)
 			}
 		}
 
-		tryClick()
+		checkState()
+	})
+}
+
+async function setUspToggleStates(checked, controls, timeoutMs) {
+	const expectedCount = controls.toggles.length
+	const deadline = Date.now() + timeoutMs
+
+	for (let index = 0; index < expectedCount; index += 1) {
+		controls = getUspConsentControls()
+		if (!controls || controls.toggles.length !== expectedCount) return null
+
+		const toggle = controls.toggles[index]
+		if (toggle.getAttribute('aria-checked') !== String(checked)) {
+			toggle.click()
+			controls = await waitForUspToggleState(index, checked, expectedCount, deadline)
+			if (!controls) return null
+		}
+	}
+
+	return controls
+}
+
+async function performAdsConsentActionInDocument(action, onHandled) {
+	const variant = detectAdsConsentVariant()
+	const unknownDialog = document.querySelector('#qc-cmp2-container [role="dialog"]')
+
+	if (action === 'show') {
+		if (variant || unknownDialog) {
+			onHandled?.()
+			return 'handled'
+		}
+		return 'not-ready'
+	}
+
+	if (variant === 'usp') {
+		if (action === 'manage') {
+			onHandled?.()
+			return 'handled'
+		}
+
+		if (!['accept', 'reject'].includes(action)) return 'failed'
+
+		const controls = getUspConsentControls()
+		if (!controls) return 'not-ready'
+
+		const shouldOptOut = action === 'reject'
+		const settledControls = await setUspToggleStates(shouldOptOut, controls, 2000)
+		if (!settledControls) return 'failed'
+
+		// CMP navigation can replace this document during the click, so acknowledge it first.
+		onHandled?.()
+		beginUspConsentCommit()
+		settledControls.confirmButton.click()
+		return 'handled'
+	}
+
+	if (variant === 'tcf') {
+		const button = findTcfConsentButton(action)
+		if (!button) return 'not-ready'
+
+		// CMP navigation can replace this document during the click, so acknowledge it first.
+		onHandled?.()
+		button.click()
+		return 'handled'
+	}
+
+	if (action === 'manage' && unknownDialog) {
+		onHandled?.()
+		return 'handled'
+	}
+
+	return 'not-ready'
+}
+
+function performAdsConsentActionWhenReady(action, timeoutMs, onHandled) {
+	const deadline = Date.now() + timeoutMs
+
+	return new Promise((resolve) => {
+		async function tryAction() {
+			const result = await performAdsConsentActionInDocument(action, onHandled)
+			if (result === 'handled') {
+				resolve(true)
+			} else if (result === 'failed' || Date.now() >= deadline) {
+				resolve(false)
+			} else {
+				setTimeout(tryAction, 50)
+			}
+		}
+
+		void tryAction()
 	})
 }
 
@@ -200,9 +501,7 @@ function performAdsConsentActionAcrossFrames(action, timeoutMs) {
 		const timeout = setTimeout(() => settle(false), timeoutMs)
 		modrinthAdsConsentActionResolvers.set(requestId, () => settle(true))
 		sendAdsConsentCommandToChildFrames({ type: 'perform', action, requestId, timeoutMs })
-		clickAdsConsentButtonWhenReady(action, timeoutMs, () => settle(true)).then((clicked) => {
-			if (!clicked) settle(false)
-		})
+		void performAdsConsentActionWhenReady(action, timeoutMs, () => settle(true))
 	})
 }
 
@@ -220,10 +519,30 @@ async function restoreAdsConsentNotification() {
 	}
 }
 
+async function showNativeAdsConsentUi() {
+	prepareAdsConsentPreferences()
+	await waitForAdsConsentLayout()
+	sendAdsConsentCommandToChildFrames({ type: 'prepare' })
+	await expandAdsConsentWebview()
+	await waitForAdsConsentLayout()
+	revealAdsConsentPreferences()
+	sendAdsConsentCommandToChildFrames({ type: 'reveal' })
+
+	window.dispatchEvent(new Event('resize'))
+	sendAdsConsentCommandToChildFrames({ type: 'resize' })
+
+	const shown = await performAdsConsentActionAcrossFrames('show', 2500)
+	if (!shown) {
+		await restoreAdsConsentNotification()
+	}
+
+	return shown
+}
+
 function finishAdsConsentReprompt() {
-	modrinthAdsConsentReprompt = false
-	modrinthAdsConsentRepromptManaging = false
-	modrinthAdsConsentOverlayShown = false
+	transitionAdsConsent('completed')
+	clearTimeout(modrinthAdsConsentState.commitTimeout)
+	modrinthAdsConsentState.commitTimeout = null
 	document.documentElement.classList.remove('modrinth-ads-consent-overlay')
 	concealAdsConsentPreferences()
 	sendAdsConsentCommandToChildFrames({ type: 'conceal' })
@@ -231,18 +550,9 @@ function finishAdsConsentReprompt() {
 }
 
 async function openAdsConsentPreferences() {
-	revealAdsConsentPreferences()
-	sendAdsConsentCommandToChildFrames({ type: 'reveal' })
-	await expandAdsConsentWebview()
-	await waitForAdsConsentLayout()
+	if (!(await showNativeAdsConsentUi())) return
 
-	window.dispatchEvent(new Event('resize'))
-	sendAdsConsentCommandToChildFrames({ type: 'resize' })
-
-	const clicked = await performAdsConsentActionAcrossFrames('manage', 2500)
-	if (!clicked) {
-		await restoreAdsConsentNotification()
-	}
+	await performAdsConsentActionAcrossFrames('manage', 2500)
 }
 
 async function performAdsConsentAction(action) {
@@ -257,30 +567,119 @@ async function performAdsConsentAction(action) {
 		return
 	}
 
-	await performAdsConsentActionAcrossFrames(action, 1000)
+	const handled = await performAdsConsentActionAcrossFrames(action, 2500)
+	if (!handled) {
+		try {
+			await showNativeAdsConsentUi()
+		} catch {
+			await restoreAdsConsentNotification()
+		}
+	}
 }
 
 window.modrinthAdsConsentAction = (action) => {
 	void performAdsConsentAction(action)
 }
 
+function isUspConsentApplicable() {
+	if (detectAdsConsentVariant() === 'usp') return Promise.resolve(true)
+	if (typeof window.__uspapi !== 'function') return Promise.resolve(false)
+
+	return new Promise((resolve) => {
+		let settled = false
+		const settle = (applicable) => {
+			if (settled) return
+			settled = true
+			clearTimeout(timeout)
+			resolve(applicable)
+		}
+		const timeout = setTimeout(() => settle(false), 500)
+
+		try {
+			window.__uspapi('uspPing', 1, (data, success) => {
+				if (!success || !data) {
+					settle(false)
+					return
+				}
+
+				const modes = Array.isArray(data.mode) ? data.mode : [data.mode]
+				const jurisdictions = Array.isArray(data.jurisdiction)
+					? data.jurisdiction
+					: [data.jurisdiction]
+				const location = String(data.location ?? '').toUpperCase()
+				const hasUspMode = modes.some((mode) =>
+					String(mode ?? '')
+						.toUpperCase()
+						.includes('USP'),
+				)
+				const locationApplies =
+					!location ||
+					jurisdictions.some((jurisdiction) =>
+						String(jurisdiction ?? '')
+							.toUpperCase()
+							.includes(location),
+					)
+
+				settle(hasUspMode && locationApplies)
+			})
+		} catch {
+			settle(false)
+		}
+	})
+}
+
+async function displayAdsConsentReprompt() {
+	if (
+		(modrinthAdsConsentState.variant === 'usp' || (await isUspConsentApplicable())) &&
+		typeof window.__uspapi === 'function'
+	) {
+		modrinthAdsConsentState.variant = 'usp'
+		return displayUspConsentUi()
+	}
+
+	if (typeof window.__tcfapi === 'function') {
+		modrinthAdsConsentState.variant = 'tcf'
+		window.__tcfapi('displayConsentUi', 2, () => {})
+		return true
+	}
+
+	return false
+}
+
 window.modrinthAdsReopenConsentPreferences = async () => {
-	modrinthAdsConsentReprompt = true
-	modrinthAdsConsentRepromptManaging = false
-	revealAdsConsentPreferences()
-	sendAdsConsentCommandToChildFrames({ type: 'reveal' })
+	if (document.documentElement.classList.contains('modrinth-ads-consent-overlay')) {
+		try {
+			await openAdsConsentPreferences()
+		} catch {
+			await restoreAdsConsentNotification()
+		}
+		return
+	}
+
+	transitionAdsConsent('reprompt-started')
+	prepareAdsConsentPreferences()
+	sendAdsConsentCommandToChildFrames({ type: 'prepare' })
 
 	try {
+		await waitForAdsConsentLayout()
 		await expandAdsConsentWebview()
 		await waitForAdsConsentLayout()
+		revealAdsConsentPreferences()
+		sendAdsConsentCommandToChildFrames({ type: 'reveal' })
 		window.dispatchEvent(new Event('resize'))
 		sendAdsConsentCommandToChildFrames({ type: 'resize' })
 
-		if (typeof window.__tcfapi === 'function') {
-			window.__tcfapi('displayConsentUi', 2, () => {})
-		} else {
+		if (!(await displayAdsConsentReprompt())) {
 			finishAdsConsentReprompt()
+			return
 		}
+
+		if (!(await performAdsConsentActionAcrossFrames('show', 2500))) {
+			finishAdsConsentReprompt()
+			return
+		}
+
+		await performAdsConsentActionAcrossFrames('manage', 2500)
 	} catch {
 		finishAdsConsentReprompt()
 	}
@@ -302,7 +701,10 @@ window.addEventListener('message', (event) => {
 	const command = event.data?.modrinthAdsConsentCommand
 	if (!command || typeof command !== 'object') return
 
-	if (command.type === 'reveal') {
+	if (command.type === 'prepare') {
+		prepareAdsConsentPreferences()
+		sendAdsConsentCommandToChildFrames(command)
+	} else if (command.type === 'reveal') {
 		revealAdsConsentPreferences()
 		sendAdsConsentCommandToChildFrames(command)
 	} else if (command.type === 'conceal') {
@@ -318,20 +720,20 @@ window.addEventListener('message', (event) => {
 		typeof command.timeoutMs === 'number'
 	) {
 		sendAdsConsentCommandToChildFrames(command)
-		clickAdsConsentButtonWhenReady(command.action, command.timeoutMs, () => {
+		performAdsConsentActionWhenReady(command.action, command.timeoutMs, () => {
 			window.parent.postMessage({ modrinthAdsConsentResult: command.requestId }, '*')
 		})
 	}
 })
 
 function setAdsConsentOverlay(shown) {
-	if (modrinthAdsConsentOverlayShown === shown) return
+	if (document.documentElement.classList.contains('modrinth-ads-consent-overlay') === shown) return
 
-	modrinthAdsConsentOverlayShown = shown
 	installAdsConsentOverlayStyle()
 	document.documentElement.classList.toggle('modrinth-ads-consent-overlay', shown)
 	if (!shown) {
 		document.documentElement.classList.remove('modrinth-ads-consent-preferences')
+		document.documentElement.classList.remove('modrinth-ads-consent-preferences-visible')
 	}
 
 	if (window.top === window) {
@@ -343,36 +745,111 @@ function setAdsConsentOverlay(shown) {
 
 if (window.top === window) {
 	window.addEventListener('message', (event) => {
-		if (
-			event.origin === MODRINTH_ORIGIN &&
-			typeof event.data?.modrinthAdsConsentOverlay === 'boolean'
-		) {
+		if (event.origin !== MODRINTH_ORIGIN) return
+
+		if (typeof event.data?.modrinthAdsConsentOverlay === 'boolean') {
 			setAdsConsentOverlay(event.data.modrinthAdsConsentOverlay)
 		}
 	})
 }
 
+function finishUspConsentCommit() {
+	if (!isUspConsentCommitPending()) return
+
+	const wasReprompt = isAdsConsentReprompt()
+	transitionAdsConsent('completed')
+	clearTimeout(modrinthAdsConsentState.commitTimeout)
+	modrinthAdsConsentState.commitTimeout = null
+
+	if (wasReprompt) {
+		finishAdsConsentReprompt()
+	} else {
+		setAdsConsentOverlay(false)
+	}
+}
+
+function beginUspConsentCommit() {
+	if (!document.getElementById('qc-cmp2-usp')) return
+
+	modrinthAdsConsentState.variant = 'usp'
+	transitionAdsConsent('commit-started')
+	clearTimeout(modrinthAdsConsentState.commitTimeout)
+
+	const deadline = Date.now() + 2500
+	function checkForDialogClosure() {
+		if (!isUspConsentCommitPending()) return
+
+		if (!document.getElementById('qc-cmp2-usp')) {
+			finishUspConsentCommit()
+		} else if (Date.now() >= deadline) {
+			transitionAdsConsent('commit-timed-out')
+			modrinthAdsConsentState.commitTimeout = null
+		} else {
+			modrinthAdsConsentState.commitTimeout = setTimeout(checkForDialogClosure, 50)
+		}
+	}
+
+	modrinthAdsConsentState.commitTimeout = setTimeout(checkForDialogClosure, 50)
+}
+
+function syncAdsConsentUi() {
+	const variant = detectAdsConsentVariant()
+
+	if (variant && !isAdsConsentReprompt() && modrinthAdsConsentState.phase !== 'complete') {
+		transitionAdsConsent('prompt-detected')
+		setAdsConsentOverlay(true)
+	}
+
+	if (isUspConsentCommitPending() && !document.getElementById('qc-cmp2-usp')) {
+		finishUspConsentCommit()
+	}
+}
+
+function handleGppConsentEvent(gppData, success) {
+	if (
+		success &&
+		gppData?.eventName === 'sectionChange' &&
+		modrinthAdsConsentState.variant === 'usp' &&
+		isUspConsentCommitPending()
+	) {
+		finishUspConsentCommit()
+	}
+}
+
+function installGppConsentListener() {
+	if (modrinthGppListenerInstalled) return
+
+	if (typeof window.__gpp === 'function') {
+		modrinthGppListenerInstalled = true
+		window.__gpp('addEventListener', handleGppConsentEvent)
+		return
+	}
+
+	if (modrinthGppListenerAttempts < 60) {
+		modrinthGppListenerAttempts += 1
+		setTimeout(installGppConsentListener, 500)
+	}
+}
+
 function handleTcfConsentEvent(tcData, success) {
 	if (!success || !tcData) return
+	detectAdsConsentVariant()
 
 	if (tcData.eventStatus === 'cmpuishown') {
-		if (modrinthAdsConsentReprompt) {
-			if (!modrinthAdsConsentRepromptManaging) {
-				modrinthAdsConsentRepromptManaging = true
-				window.dispatchEvent(new Event('resize'))
-				sendAdsConsentCommandToChildFrames({ type: 'resize' })
-				void performAdsConsentActionAcrossFrames('manage', 2500)
-			}
-			return
-		}
+		if (isAdsConsentReprompt()) return
 
+		transitionAdsConsent('prompt-detected')
 		setAdsConsentOverlay(true)
-	} else if (tcData.eventStatus === 'useractioncomplete') {
-		if (modrinthAdsConsentReprompt) {
+	} else if (
+		tcData.eventStatus === 'useractioncomplete' &&
+		modrinthAdsConsentState.variant === 'tcf'
+	) {
+		if (isAdsConsentReprompt()) {
 			finishAdsConsentReprompt()
 			return
 		}
 
+		transitionAdsConsent('completed')
 		setAdsConsentOverlay(false)
 	}
 }
@@ -469,14 +946,22 @@ function muteVideos() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+	installAdsConsentThemeStyle()
 	installAdsRailStyle()
 	installAdsConsentOverlayStyle()
 	muteVideos()
 	muteAudioContext()
+	syncAdsConsentUi()
 	installTcfConsentListener()
+	installGppConsentListener()
 
-	const observer = new MutationObserver(muteVideos)
+	const observer = new MutationObserver(() => {
+		muteVideos()
+		syncAdsConsentUi()
+	})
 	observer.observe(document.body, { childList: true, subtree: true })
 })
 
+syncAdsConsentUi()
 installTcfConsentListener()
+installGppConsentListener()

apps/app/src/api/ads.rs

@@ -582,6 +582,8 @@ pub async fn init_ads_window<R: Runtime>(
                 }
             })?;
 
+            webview.open_devtools();
+
             Some(webview)
         } else {
             None

apps/frontend/src/assets/styles/global.scss

@@ -487,3 +487,109 @@ input {
 	background-color: transparent;
 	color: hsl(145, 78%, 28%);
 }
+
+#qc-cmp2-usp {
+	background: var(--color-raised-bg) !important;
+	border: 1px solid var(--color-divider) !important;
+	border-radius: var(--radius-lg) !important;
+	box-shadow: var(--shadow-floating) !important;
+	color: var(--color-base) !important;
+	font-family: var(--font-standard) !important;
+	max-width: 660px;
+
+	.qc-usp-ui-content,
+	.qc-usp-ui-form-content,
+	.qc-usp-container {
+		background: transparent !important;
+	}
+
+	p,
+	label,
+	.qc-usp-action-description {
+		color: var(--color-base) !important;
+		font-family: var(--font-standard) !important;
+	}
+
+	.qc-usp-title,
+	.qc-cmp2-list-item-title {
+		color: var(--color-contrast) !important;
+		font-family: var(--font-standard) !important;
+		font-weight: 700 !important;
+	}
+
+	.qc-usp-title {
+		font-size: 1.25rem !important;
+	}
+
+	a,
+	.qc-usp-alt-action {
+		color: var(--color-link) !important;
+	}
+
+	.qc-cmp2-list-item {
+		background: var(--color-button-bg) !important;
+		border: 1px solid var(--color-divider) !important;
+		border-radius: var(--radius-md) !important;
+	}
+
+	.qc-cmp2-list-item-header {
+		background: transparent !important;
+		border: 0 !important;
+		color: var(--color-contrast) !important;
+	}
+
+	.qc-cmp2-list-item-header svg {
+		color: var(--color-base) !important;
+	}
+
+	.qc-cmp2-toggle {
+		background: var(--surface-3) !important;
+		border-color: var(--color-divider) !important;
+	}
+
+	.qc-cmp2-toggle .toggle {
+		background: var(--color-contrast) !important;
+	}
+
+	.qc-cmp2-toggle .text {
+		color: var(--color-contrast) !important;
+	}
+
+	.qc-cmp2-toggle[aria-checked='true'] {
+		background: var(--color-brand) !important;
+		border-color: var(--color-brand) !important;
+	}
+
+	.qc-cmp2-toggle[aria-checked='true'] .text {
+		color: var(--color-accent-contrast) !important;
+	}
+
+	button[mode='primary'] {
+		background: var(--color-brand) !important;
+		border: 0 !important;
+		border-radius: var(--radius-md) !important;
+		color: var(--color-accent-contrast) !important;
+		font-family: var(--font-standard) !important;
+		font-weight: 700 !important;
+	}
+
+	.qc-usp-close-icon {
+		border: 0 !important;
+		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")
+			center / 1.5rem 1.5rem no-repeat;
+	}
+
+	a:focus-visible,
+	button:focus-visible {
+		outline: 2px solid var(--color-brand) !important;
+		outline-offset: 2px !important;
+	}
+
+	.qc-usp-ui-content {
+		max-width: 100% !important;
+	}
+	.qc-usp-ui-content .qc-usp-ui-form-content {
+		border: 1px solid transparent !important;
+		padding: 0 !important;
+	}
+}

apps/frontend/src/components/ui/AdsConsentNotification.vue

@@ -8,6 +8,7 @@ import {
 import { onBeforeUnmount, onMounted } from 'vue'
 
 type ConsentAction = 'accept' | 'reject' | 'manage'
+type ConsentVariant = 'tcf' | 'usp'
 
 interface TcfData {
 	eventStatus?: string
@@ -17,6 +18,19 @@ interface TcfData {
 type TcfCallback = (data: TcfData, success: boolean) => void
 type TcfApi = (command: string, version: number, callback: TcfCallback, parameter?: unknown) => void
 
+interface UspControls {
+	toggles: HTMLButtonElement[]
+	confirmButton: HTMLButtonElement
+}
+
+interface GppData {
+	eventName?: string
+	listenerId?: number
+}
+
+type GppCallback = (data: GppData, success: boolean) => void
+type GppApi = (command: string, callback: GppCallback, parameter?: unknown) => void
+
 const CMP_HIDDEN_CLASS = 'modrinth-cmp-summary-hidden'
 const notificationManager = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -47,8 +61,17 @@ const messages = defineMessages({
 
 let notificationId: WebNotification['id'] | null = null
 let tcfListenerId: number | undefined
+let gppListenerId: number | undefined
 let listenerInstalled = false
+let gppListenerInstalled = false
+let gppListenerAttempts = 0
+let gppInstallTimeout: ReturnType<typeof setTimeout> | undefined
 let managingPreferences = false
+let consentComplete = false
+let consentVariant: ConsentVariant | null = null
+let uspConsentCommitPending = false
+let uspSuccessModalDismissed = false
+let uspCommitTimeout: ReturnType<typeof setTimeout> | undefined
 let consentContainerObserver: MutationObserver | undefined
 const consentContainerContains = new Map<HTMLElement, HTMLElement['contains']>()
 
@@ -56,31 +79,132 @@ function getTcfApi(): TcfApi | undefined {
 	return (window as typeof window & { __tcfapi?: TcfApi }).__tcfapi
 }
 
+function getGppApi(): GppApi | undefined {
+	return (window as typeof window & { __gpp?: GppApi }).__gpp
+}
+
 function setConsentUiHidden(hidden: boolean) {
 	document.documentElement.classList.toggle(CMP_HIDDEN_CLASS, hidden)
 	patchConsentFocusTrapContainer()
 }
 
 function patchConsentFocusTrapContainer() {
-	const container = document.querySelector<HTMLElement>('#qc-cmp2-ui')
-	if (!container || consentContainerContains.has(container)) return
+	const containers = document.querySelectorAll<HTMLElement>('#qc-cmp2-ui, #qc-cmp2-usp')
 
-	const originalContains = container.contains
-	// InMobi's focus trap otherwise cancels clicks outside its hidden container.
-	container.contains = (node: Node | null) =>
-		document.documentElement.classList.contains(CMP_HIDDEN_CLASS) ||
-		originalContains.call(container, node)
-	consentContainerContains.set(container, originalContains)
+	for (const container of containers) {
+		if (consentContainerContains.has(container)) continue
+
+		const originalContains = container.contains
+		// InMobi's focus trap otherwise cancels clicks outside its hidden container.
+		container.contains = (node: Node | null) =>
+			document.documentElement.classList.contains(CMP_HIDDEN_CLASS) ||
+			originalContains.call(container, node)
+		consentContainerContains.set(container, originalContains)
+	}
+}
+
+function detectConsentVariant(): ConsentVariant | null {
+	let variant: ConsentVariant | null = null
+
+	if (document.getElementById('qc-cmp2-usp')) {
+		variant = 'usp'
+	} else if (document.getElementById('qc-cmp2-ui')) {
+		variant = 'tcf'
+	}
+
+	if (variant) consentVariant = variant
+	return variant
 }
 
 function getConsentContainers(): ParentNode[] {
 	const containers = Array.from(
-		document.querySelectorAll<HTMLElement>('#qc-cmp2-container, #qc-cmp2-main, #qc-cmp2-ui'),
+		document.querySelectorAll<HTMLElement>(
+			'#qc-cmp2-container, #qc-cmp2-main, #qc-cmp2-ui, #qc-cmp2-usp',
+		),
 	)
 
 	return containers.length > 0 ? containers : [document]
 }
 
+function getUspConsentControls(): UspControls | null {
+	const dialog = document.getElementById('qc-cmp2-usp')
+	if (!dialog) return null
+
+	const toggles = Array.from(
+		dialog.querySelectorAll<HTMLButtonElement>(
+			'.qc-usp-container button.qc-cmp2-toggle[role="switch"]',
+		),
+	)
+	const confirmButton = dialog.querySelector<HTMLButtonElement>(
+		'.qc-usp-ui-form-content button[mode="primary"]',
+	)
+
+	if (
+		toggles.length === 0 ||
+		!confirmButton ||
+		confirmButton.disabled ||
+		toggles.some(
+			(toggle) =>
+				toggle.disabled || !['true', 'false'].includes(toggle.getAttribute('aria-checked') ?? ''),
+		)
+	) {
+		return null
+	}
+
+	return { toggles, confirmButton }
+}
+
+function waitForUspToggleState(
+	index: number,
+	checked: boolean,
+	expectedCount: number,
+	deadline: number,
+): Promise<UspControls | null> {
+	return new Promise((resolve) => {
+		function checkState() {
+			const controls = getUspConsentControls()
+			if (
+				controls &&
+				controls.toggles.length === expectedCount &&
+				controls.toggles[index]?.getAttribute('aria-checked') === String(checked)
+			) {
+				resolve(controls)
+			} else if (Date.now() >= deadline) {
+				resolve(null)
+			} else {
+				setTimeout(checkState, 50)
+			}
+		}
+
+		checkState()
+	})
+}
+
+async function setUspToggleStates(
+	checked: boolean,
+	controls: UspControls,
+	timeoutMs: number,
+): Promise<UspControls | null> {
+	const expectedCount = controls.toggles.length
+	const deadline = Date.now() + timeoutMs
+
+	for (let index = 0; index < expectedCount; index += 1) {
+		const currentControls = getUspConsentControls()
+		if (!currentControls || currentControls.toggles.length !== expectedCount) return null
+		controls = currentControls
+
+		const toggle = controls.toggles[index]
+		if (toggle.getAttribute('aria-checked') !== String(checked)) {
+			toggle.click()
+			const settledControls = await waitForUspToggleState(index, checked, expectedCount, deadline)
+			if (!settledControls) return null
+			controls = settledControls
+		}
+	}
+
+	return controls
+}
+
 function matchesButtonText(button: HTMLButtonElement, terms: string[]): boolean {
 	const text = [button.textContent, button.getAttribute('aria-label')]
 		.filter(Boolean)
@@ -173,9 +297,29 @@ function clickConsentButtonWhenReady(action: ConsentAction, timeoutMs: number):
 }
 
 async function performConsentAction(action: ConsentAction) {
+	const variant = detectConsentVariant()
+
 	if (action === 'manage') {
 		managingPreferences = true
 		setConsentUiHidden(false)
+		if (variant === 'usp') return
+	}
+
+	if (variant === 'usp' && action !== 'manage') {
+		const controls = getUspConsentControls()
+		const settledControls = controls
+			? await setUspToggleStates(action === 'reject', controls, 2000)
+			: null
+
+		if (settledControls) {
+			beginUspConsentCommit()
+			settledControls.confirmButton.click()
+			return
+		}
+
+		managingPreferences = false
+		setConsentUiHidden(false)
+		return
 	}
 
 	const clicked = await clickConsentButtonWhenReady(action, action === 'manage' ? 2500 : 1000)
@@ -194,6 +338,8 @@ async function performConsentAction(action: ConsentAction) {
 }
 
 function showConsentNotification() {
+	if (consentComplete) return
+
 	setConsentUiHidden(true)
 
 	if (
@@ -239,6 +385,10 @@ function showConsentNotification() {
 
 function finishConsent() {
 	managingPreferences = false
+	consentComplete = true
+	uspConsentCommitPending = false
+	clearTimeout(uspCommitTimeout)
+	uspCommitTimeout = undefined
 	setConsentUiHidden(false)
 
 	if (notificationId !== null) {
@@ -247,8 +397,67 @@ function finishConsent() {
 	}
 }
 
+function beginUspConsentCommit() {
+	if (!document.getElementById('qc-cmp2-usp')) return
+
+	consentVariant = 'usp'
+	uspConsentCommitPending = true
+	uspSuccessModalDismissed = false
+	clearTimeout(uspCommitTimeout)
+
+	const deadline = Date.now() + 2500
+	function checkForDialogClosure() {
+		if (!uspConsentCommitPending) return
+
+		if (!document.getElementById('qc-cmp2-usp')) {
+			finishConsent()
+		} else if (Date.now() >= deadline) {
+			uspConsentCommitPending = false
+			uspCommitTimeout = undefined
+		} else {
+			uspCommitTimeout = setTimeout(checkForDialogClosure, 50)
+		}
+	}
+
+	uspCommitTimeout = setTimeout(checkForDialogClosure, 50)
+}
+
+function dismissUspSuccessModal() {
+	if ((!uspConsentCommitPending && !consentComplete) || uspSuccessModalDismissed) return
+
+	const closeButton = document.querySelector<HTMLElement>(
+		'#qc-cmp2-usp [aria-label="Close success modal"]',
+	)
+	if (!closeButton || (closeButton instanceof HTMLButtonElement && closeButton.disabled)) return
+
+	uspSuccessModalDismissed = true
+	closeButton.click()
+}
+
+function syncConsentUi() {
+	patchConsentFocusTrapContainer()
+	installGppConsentListener()
+	const variant = detectConsentVariant()
+	dismissUspSuccessModal()
+
+	if (
+		variant === 'usp' &&
+		!consentComplete &&
+		!uspConsentCommitPending &&
+		!managingPreferences &&
+		getUspConsentControls()
+	) {
+		showConsentNotification()
+	}
+
+	if (uspConsentCommitPending && !document.getElementById('qc-cmp2-usp')) {
+		finishConsent()
+	}
+}
+
 function handleTcfConsentEvent(data: TcfData, success: boolean) {
 	if (!success) return
+	detectConsentVariant()
 
 	if (data.listenerId !== undefined) {
 		tcfListenerId = data.listenerId
@@ -258,11 +467,47 @@ function handleTcfConsentEvent(data: TcfData, success: boolean) {
 		if (!managingPreferences) {
 			showConsentNotification()
 		}
-	} else if (data.eventStatus === 'useractioncomplete') {
+	} else if (data.eventStatus === 'useractioncomplete' && consentVariant === 'tcf') {
 		finishConsent()
 	}
 }
 
+function handleGppConsentEvent(data: GppData, success: boolean) {
+	if (data.listenerId !== undefined) {
+		gppListenerId = data.listenerId
+	}
+
+	if (
+		success &&
+		data.eventName === 'sectionChange' &&
+		consentVariant === 'usp' &&
+		uspConsentCommitPending
+	) {
+		finishConsent()
+	}
+}
+
+function installGppConsentListener() {
+	if (gppListenerInstalled) return
+
+	const gppApi = getGppApi()
+	if (!gppApi) {
+		if (gppListenerAttempts < 60 && gppInstallTimeout === undefined) {
+			gppListenerAttempts += 1
+			gppInstallTimeout = setTimeout(() => {
+				gppInstallTimeout = undefined
+				installGppConsentListener()
+			}, 500)
+		}
+		return
+	}
+
+	gppListenerInstalled = true
+	clearTimeout(gppInstallTimeout)
+	gppInstallTimeout = undefined
+	gppApi('addEventListener', handleGppConsentEvent)
+}
+
 function installTcfConsentListener() {
 	if (listenerInstalled) return
 
@@ -273,31 +518,56 @@ function installTcfConsentListener() {
 	tcfApi('addEventListener', 2, handleTcfConsentEvent)
 }
 
-function handleDocumentClick(event: MouseEvent) {
-	if (!managingPreferences || !(event.target instanceof Element)) return
-	if (!event.target.closest('.qc-cmp2-close-icon')) return
-
+function restoreConsentNotification() {
 	setTimeout(() => {
-		if (notificationId === null) return
-
 		managingPreferences = false
-		setConsentUiHidden(true)
+		showConsentNotification()
 	})
 }
 
+function handleDocumentClick(event: MouseEvent) {
+	if (!(event.target instanceof Element)) return
+
+	if (event.target.closest('#qc-cmp2-usp .qc-usp-ui-form-content button[mode="primary"]')) {
+		beginUspConsentCommit()
+		return
+	}
+
+	if (!managingPreferences) return
+	if (!event.target.closest('.qc-cmp2-close-icon, .qc-usp-close-icon')) return
+
+	restoreConsentNotification()
+}
+
+function handleDocumentKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape' && managingPreferences) {
+		restoreConsentNotification()
+	}
+}
+
 onMounted(() => {
-	consentContainerObserver = new MutationObserver(patchConsentFocusTrapContainer)
-	consentContainerObserver.observe(document.body, { childList: true, subtree: true })
-	patchConsentFocusTrapContainer()
+	consentContainerObserver = new MutationObserver(syncConsentUi)
+	consentContainerObserver.observe(document.body, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ['aria-label', 'disabled'],
+	})
+	syncConsentUi()
 	installTcfConsentListener()
+	installGppConsentListener()
 	window.addEventListener('modrinth-cmp-ready', installTcfConsentListener)
 	document.addEventListener('click', handleDocumentClick, true)
+	document.addEventListener('keydown', handleDocumentKeydown, true)
 })
 
 onBeforeUnmount(() => {
 	consentContainerObserver?.disconnect()
+	clearTimeout(uspCommitTimeout)
+	clearTimeout(gppInstallTimeout)
 	window.removeEventListener('modrinth-cmp-ready', installTcfConsentListener)
 	document.removeEventListener('click', handleDocumentClick, true)
+	document.removeEventListener('keydown', handleDocumentKeydown, true)
 	setConsentUiHidden(false)
 	for (const [container, originalContains] of consentContainerContains) {
 		container.contains = originalContains
@@ -309,6 +579,11 @@ onBeforeUnmount(() => {
 		tcfApi('removeEventListener', 2, () => {}, tcfListenerId)
 	}
 
+	const gppApi = getGppApi()
+	if (gppApi && gppListenerId !== undefined) {
+		gppApi('removeEventListener', () => {}, gppListenerId)
+	}
+
 	if (notificationId !== null) {
 		notificationManager.removeNotification(notificationId)
 	}
@@ -319,7 +594,8 @@ onBeforeUnmount(() => {
 html.modrinth-cmp-summary-hidden .qc-cmp2-container,
 html.modrinth-cmp-summary-hidden #qc-cmp2-container,
 html.modrinth-cmp-summary-hidden #qc-cmp2-main,
-html.modrinth-cmp-summary-hidden #qc-cmp2-ui {
+html.modrinth-cmp-summary-hidden #qc-cmp2-ui,
+html.modrinth-cmp-summary-hidden #qc-cmp2-usp {
 	display: none !important;
 	z-index: -1 !important;
 	pointer-events: none !important;

packages/ui/src/components/nav/NotificationPanel.vue

@@ -17,7 +17,7 @@
 				@mouseleave="setNotificationTimer(item)"
 			>
 				<div
-					class="flex w-full gap-2 overflow-hidden rounded-lg bg-bg-raised shadow-xl border border-solid border-surface-5"
+					class="flex w-full gap-2 overflow-hidden rounded-lg bg-bg-raised border border-solid border-surface-5"
 					:class="item.containerClass"
 				>
 					<div