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/providers/page-context.ts

@@ -6,6 +6,7 @@ export interface PageContext {
 	// pages may render sidebar content in #sidebar-teleport-target instead of in the main layout when true
 	hierarchicalSidebarAvailable: Ref<boolean>
 	showAds: Ref<boolean>
+	adConsentAvailable: Ref<boolean>
 	floatingActionBarOffsets?: {
 		left: Ref<string> | ComputedRef<string>
 		right: Ref<string> | ComputedRef<string>

packages/ui/src/providers/popup-notifications.ts

@@ -64,12 +64,14 @@ export interface PopupNotification {
 	bodyProps?: Record<string, unknown>
 	text?: string
 	iconUrl?: string | null
+	hideIcon?: boolean
 	type?: 'error' | 'warning' | 'success' | 'info' | 'download'
 	progress?: number
 	waiting?: boolean
 	progressItems?: PopupNotificationProgressItem[]
 	buttons?: PopupNotificationButton[]
 	toast?: PopupNotificationToast
+	dismissible?: boolean
 	autoCloseMs?: number | null
 	timer?: NodeJS.Timeout
 }

packages/ui/src/providers/web-notifications.ts

@@ -1,15 +1,30 @@
+import type { Component } from 'vue'
+
 import { createContext } from '.'
 
+export interface WebNotificationButton {
+	label: string
+	action: () => void | Promise<void>
+	icon?: Component
+	color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'standard'
+	keepOpen?: boolean
+}
+
 export interface WebNotification {
 	id: string | number
 	title?: string
 	text?: string
-	type?: 'error' | 'warning' | 'success' | 'info'
+	type?: 'error' | 'warning' | 'success' | 'info' | 'neutral'
 	errorCode?: string
 	count?: number
 	autoCloseMs?: number | null // null means do not dismiss automatically
 	timer?: NodeJS.Timeout
 	supportData?: Record<string, unknown>
+	containerClass?: string
+	noIcon?: boolean
+	buttons?: WebNotificationButton[]
+	dismissible?: boolean
+	copyable?: boolean
 }
 
 export type NotificationPanelLocation = 'left' | 'right'