feat: implement custom notification and popup components (#6768)

* feat: implement custom popup

* feat: add privacy setting

* style fixes

* more style fixes

* feat: implement notification panel changes and better popup in website

* feat: update popup button

* fix: remove unnecessary modal props

* fixes

* pnpm prepr

* remove devtools opening

* update query to find buttons

* update copy

* update copy

* fix: manage permissions depends on showAds booleans instead of managemetn availability

packages/ui/src/stories/nav/NotificationPanel.stories.ts

@@ -50,11 +50,39 @@ export const Default: StoryObj = {
 				})
 			}
 
+			const showActions = () => {
+				notificationManager.addNotification({
+					title: 'Your privacy and how ads support Modrinth',
+					text: 'Choose how our advertising partners may use your data.',
+					type: 'neutral',
+					autoCloseMs: null,
+					dismissible: false,
+					copyable: false,
+					noIcon: true,
+					buttons: [
+						{
+							label: 'Manage preferences',
+							action: () => console.log('Manage preferences clicked'),
+						},
+						{
+							label: 'Reject all',
+							action: () => console.log('Reject all clicked'),
+							color: 'brand',
+						},
+						{
+							label: 'Accept all',
+							action: () => console.log('Accept all clicked'),
+							color: 'brand',
+						},
+					],
+				})
+			}
+
 			const clearAll = () => {
 				notificationManager.clearAllNotifications()
 			}
 
-			return { showSuccess, showError, showWarning, showInfo, clearAll }
+			return { showSuccess, showError, showWarning, showInfo, showActions, clearAll }
 		},
 		template: /* html */ `
 			<div>
@@ -71,6 +99,9 @@ export const Default: StoryObj = {
 					<ButtonStyled color="blue">
 						<button @click="showInfo">Info</button>
 					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="showActions">Actions</button>
+					</ButtonStyled>
 					<ButtonStyled>
 						<button @click="clearAll">Clear All</button>
 					</ButtonStyled>

packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts

@@ -107,6 +107,36 @@ export const Default: StoryObj = {
 				})
 			}
 
+			const showBlocking = () => {
+				popupManager.addPopupNotification({
+					title: 'Your privacy and how ads support Modrinth',
+					text: 'Ads make Modrinth possible and fund creator rewards. Our partners may store unique identifiers to personalize ads and measure performance.',
+					type: 'info',
+					autoCloseMs: null,
+					dismissible: false,
+					buttons: [
+						{
+							label: 'Manage preferences',
+							action: () => console.log('Manage preferences clicked'),
+							color: 'standard',
+							keepOpen: true,
+						},
+						{
+							label: 'Reject all',
+							action: () => console.log('Reject all clicked'),
+							color: 'brand',
+							keepOpen: true,
+						},
+						{
+							label: 'Accept all',
+							action: () => console.log('Accept all clicked'),
+							color: 'brand',
+							keepOpen: true,
+						},
+					],
+				})
+			}
+
 			const showWaitingProgress = () => {
 				popupManager.addPopupNotification({
 					title: 'Installing modpack...',
@@ -169,6 +199,7 @@ export const Default: StoryObj = {
 				showInfo,
 				showNoButtons,
 				showPermanent,
+				showBlocking,
 				showWaitingProgress,
 				showDeterminateProgress,
 				showGroupedDownloads,
@@ -196,6 +227,9 @@ export const Default: StoryObj = {
 					<ButtonStyled>
 						<button @click="showPermanent">Permanent</button>
 					</ButtonStyled>
+					<ButtonStyled>
+						<button @click="showBlocking">Blocking</button>
+					</ButtonStyled>
 					<ButtonStyled>
 						<button @click="showWaitingProgress">Waiting Progress</button>
 					</ButtonStyled>