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

* feat: add notifs onto friends ws temporarily

* fix: lint + styling

* fix: regressions

apps/app-frontend/src/App.vue

@@ -11,6 +11,7 @@ import {
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
+	CheckIcon,
 	CompassIcon,
 	DownloadIcon,
 	ExternalIcon,
@@ -40,6 +41,7 @@ import {
 	defineMessages,
 	I18nDebugPanel,
 	LoadingBar,
+	ModrinthHostingLogo,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -84,6 +86,7 @@ import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
 import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
+import ServerInvitePopupBody from '@/components/ui/notifications/ServerInvitePopupBody.vue'
 import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
@@ -95,7 +98,7 @@ import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
 import { get_user, get_version } from '@/helpers/cache.js'
-import { command_listener, warning_listener } from '@/helpers/events.js'
+import { command_listener, notification_listener, warning_listener } from '@/helpers/events.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
@@ -241,6 +244,7 @@ const {
 
 const news = ref([])
 const availableSurvey = ref(false)
+const displayedServerInviteNotifications = new Set()
 
 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
@@ -752,6 +756,94 @@ const accounts = ref(null)
 provide('accountsCard', accounts)
 
 command_listener(handleCommand)
+notification_listener(handleLiveNotification)
+
+async function markLiveNotificationRead(notification) {
+	try {
+		await tauriApiClient.labrinth.notifications_v2.markAsRead(notification.id)
+	} catch (error) {
+		if (error instanceof ModrinthApiError && error.statusCode === 404) {
+			console.warn(`notification ${notification.id} could not be marked as read`, error)
+			return
+		}
+		throw error
+	}
+}
+
+async function respondToServerInvite(notification, action) {
+	const serverId = notification.body?.server_id
+	if (typeof serverId !== 'string') {
+		throw new Error('Missing server ID for invite notification.')
+	}
+
+	await tauriApiClient.request(`/servers/${serverId}/invites/${action}`, {
+		api: 'archon',
+		version: 1,
+		method: 'POST',
+	})
+	await markLiveNotificationRead(notification)
+
+	return serverId
+}
+
+async function acceptServerInviteNotification(notification) {
+	try {
+		const serverId = await respondToServerInvite(notification, 'accept')
+		await router.push(`/hosting/manage/${encodeURIComponent(serverId)}`)
+		queryClient.invalidateQueries({ queryKey: ['servers'] })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function declineServerInviteNotification(notification) {
+	try {
+		await respondToServerInvite(notification, 'decline')
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function handleLiveNotification(notification) {
+	if (notification?.body?.type !== 'server_invite' || notification.read) return
+	if (displayedServerInviteNotifications.has(notification.id)) return
+
+	displayedServerInviteNotifications.add(notification.id)
+
+	const serverName =
+		typeof notification.body.server_name === 'string' ? notification.body.server_name : 'a server'
+	const inviterId = notification.body.invited_by
+	const invitedBy =
+		typeof inviterId === 'string' ? await get_user(inviterId, 'bypass').catch(() => null) : null
+
+	addPopupNotification({
+		title: 'Modrinth Hosting',
+		titleLogo: ModrinthHostingLogo,
+		bodyComponent: ServerInvitePopupBody,
+		bodyProps: {
+			inviterName: invitedBy?.username ?? null,
+			inviterAvatarUrl: invitedBy?.avatar_url ?? null,
+			serverName,
+		},
+		type: 'info',
+		buttons: [
+			{
+				label: 'Accept',
+				action: () => acceptServerInviteNotification(notification),
+				icon: CheckIcon,
+				color: 'brand',
+			},
+			{
+				label: 'Decline',
+				action: () => declineServerInviteNotification(notification),
+				icon: XIcon,
+				color: 'red',
+			},
+		],
+		autoCloseMs: null,
+	})
+}
+
 async function handleCommand(e) {
 	if (!e) return
 

apps/app-frontend/src/components/ui/notifications/ServerInvitePopupBody.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="flex flex-wrap items-center gap-x-1.5 gap-y-1 leading-snug text-primary">
+		<button
+			v-if="inviterName"
+			type="button"
+			class="inline-flex min-w-0 items-center border-0 bg-transparent p-0 font-semibold text-contrast hover:underline"
+			@click="openInviterProfile(inviterName)"
+		>
+			<Avatar
+				:src="inviterAvatarUrl"
+				:alt="inviterName"
+				circle
+				size="xxs"
+				no-shadow
+				class="mr-1.5 inline-flex"
+			/>
+			<span>{{ inviterName }}</span>
+		</button>
+		<span>
+			<span v-if="inviterName" class="whitespace-nowrap">has invited you to manage</span>
+			<span v-else class="whitespace-nowrap">You have been invited to manage</span>
+			<span class="font-semibold text-contrast ml-1">{{ serverName }}</span>
+			<span>.</span>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { Avatar } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+
+import { config } from '@/config'
+
+defineProps({
+	inviterName: {
+		type: String,
+		default: null,
+	},
+	inviterAvatarUrl: {
+		type: String,
+		default: null,
+	},
+	serverName: {
+		type: String,
+		required: true,
+	},
+})
+
+function openInviterProfile(username) {
+	openUrl(`${config.siteUrl}/user/${encodeURIComponent(username)}`)
+}
+</script>

apps/app-frontend/src/helpers/events.js

@@ -98,6 +98,10 @@ export async function friend_listener(callback) {
 	return await listen('friend', (event) => callback(event.payload))
 }
 
+export async function notification_listener(callback) {
+	return await listen('notification', (event) => callback(event.payload))
+}
+
 /// Payload for the 'log' event
 /*
     LogPayload {