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/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'