feat: add notifs onto friends ws temporarily (#6290)

* feat: add notifs onto friends ws temporarily

* fix: lint + styling

* fix: regressions

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

@@ -18,28 +18,35 @@
 				>
 					<div class="flex flex-col gap-2 w-full">
 						<div class="flex items-center justify-between gap-2.5">
-							<div class="flex items-center gap-2">
-								<div
-									class="flex items-center"
-									:class="{
-										'text-red': item.type === 'error',
-										'text-orange': item.type === 'warning',
-										'text-green': item.type === 'download',
-										'text-contrast': item.type === 'success',
-										'text-blue':
-											!item.type ||
-											!['error', 'warning', 'success', 'download'].includes(item.type),
-									}"
-								>
-									<IssuesIcon v-if="item.type === 'warning'" class="h-5 w-5" />
-									<DownloadIcon v-else-if="item.type === 'download'" class="h-5 w-5" />
-									<CheckCircleIcon v-else-if="item.type === 'success'" class="h-5 w-5" />
-									<XCircleIcon v-else-if="item.type === 'error'" class="h-5 w-5" />
-									<InfoIcon v-else class="h-5 w-5" />
-								</div>
-								<div class="text-contrast font-semibold m-0 grow">
-									{{ item.title }}
-								</div>
+							<div class="flex min-w-0 flex-1 items-center gap-2">
+								<component
+									:is="item.titleLogo"
+									v-if="item.titleLogo"
+									class="h-7 w-auto min-w-0 max-w-full text-contrast"
+								/>
+								<template v-else>
+									<div
+										class="flex items-center"
+										:class="{
+											'text-red': item.type === 'error',
+											'text-orange': item.type === 'warning',
+											'text-green': item.type === 'download',
+											'text-contrast': item.type === 'success',
+											'text-blue':
+												!item.type ||
+												!['error', 'warning', 'success', 'download'].includes(item.type),
+										}"
+									>
+										<IssuesIcon v-if="item.type === 'warning'" class="h-5 w-5" />
+										<DownloadIcon v-else-if="item.type === 'download'" class="h-5 w-5" />
+										<CheckCircleIcon v-else-if="item.type === 'success'" class="h-5 w-5" />
+										<XCircleIcon v-else-if="item.type === 'error'" class="h-5 w-5" />
+										<InfoIcon v-else class="h-5 w-5" />
+									</div>
+									<div class="text-contrast font-semibold m-0 grow">
+										{{ item.title }}
+									</div>
+								</template>
 							</div>
 							<ButtonStyled size="small" type="transparent" circular>
 								<button @click="dismiss(item.id)">
@@ -50,6 +57,11 @@
 						<span v-if="item.text" class="text-primary">
 							{{ item.text }}
 						</span>
+						<component
+							:is="item.bodyComponent"
+							v-if="item.bodyComponent"
+							v-bind="item.bodyProps ?? {}"
+						/>
 					</div>
 					<div v-if="item.progressItems?.length" class="flex flex-col gap-3">
 						<div
@@ -89,6 +101,7 @@
 							:color="btn.color || (idx === 0 ? 'brand' : undefined)"
 						>
 							<button @click="handleButtonClick(item.id, btn)">
+								<component :is="btn.icon" v-if="btn.icon" />
 								{{ btn.label }}
 							</button>
 						</ButtonStyled>
@@ -166,7 +179,8 @@ withDefaults(
 	top: calc(var(--top-bar-height, 3rem) + 1.5rem);
 	right: 1.5rem;
 	z-index: 200;
-	width: 400px;
+	width: 520px;
+	max-width: calc(100vw - 3rem);
 	display: flex;
 	flex-direction: column;
 	gap: 0.75rem;
@@ -179,6 +193,7 @@ withDefaults(
 @media screen and (max-width: 500px) {
 	.popup-notification-group {
 		width: calc(100% - 1.5rem);
+		max-width: none;
 		right: 0.75rem;
 	}
 }

packages/ui/src/components/servers/index.ts

@@ -5,6 +5,8 @@ export * from './icons'
 export { default as InstallingBanner } from './InstallingBanner.vue'
 export * from './labels'
 export * from './marketing'
+export { default as ModrinthHostingLogo } from './ModrinthServersIcon.vue'
+export { default as ModrinthServersIcon } from './ModrinthServersIcon.vue'
 export { default as SaveBanner } from './SaveBanner.vue'
 export * from './server-header'
 export { default as ServerListEmpty } from './server-list-empty/ServerListEmpty.vue'

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

@@ -1,8 +1,11 @@
+import type { Component } from 'vue'
+
 import { createContext } from '.'
 
 export interface PopupNotificationButton {
 	label: string
 	action: () => void
+	icon?: Component
 	color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'standard'
 	keepOpen?: boolean
 }
@@ -18,6 +21,9 @@ export interface PopupNotificationProgressItem {
 export interface PopupNotification {
 	id: string | number
 	title: string
+	titleLogo?: Component
+	bodyComponent?: Component
+	bodyProps?: Record<string, unknown>
 	text?: string
 	type?: 'error' | 'warning' | 'success' | 'info' | 'download'
 	progress?: number