feat: instance sharing thru shared-instances service (#6569)

* feat: implement instance share page + search_users backend call

* feat: invite players modal

* feat: use tanstack queries for friends sync across app pages

* feat: base shared instances implementation

* fix: admon style

* feat: impl instance admonitions like server panel

* fix: impl get + del usage

* feat: support modpack links

* feat: invite notif accepting

* fix: lint + fmt

* feat: impl install to play

* feat: impl usage of UpdateToPlayModal

* feat: warnings on deleting/disabling shared-instance version content

* fix: send instance name

* feat: align with backend

* feat: shared instances qa

* feat: wrong account protection

* feat: qa

* fix: smartly apply updates

* fix: install bug

* fix: 401/404 differentiation

* fix: fmt+prepr

* feat: qa

* feat: qa

* fix: signing out messes up revoke/deleted checks

* feat: qa

* fix: fmt + lint

* feat: lock content if part of shared instance

* fix: lint

* [do not merge] feat: rough invite links impl temp (#6666)

* fix: wrong cmd

* feat: invite page

* fix: server-manager DTO mismatch

* fix: drop anonymous invite link acceptance

* refactor: structured shared-instance unavailable errors

* refactor: centralise error presentations

* refactor: dedupe shared instance diff detection

* fix: logging in reqwests

* refactor: move app.vue shared instances into handler

* refactor: break up Share.vue

* refactor: split up shared instances state outside of instance index

* refactor: dedicated shared instances install/update modals + split up page

* refactor: centralized managed content

* refactor: split up install shared to own runner + shared.rs split up

* refactor: dedupe sql for instance metadata enrichmnt

* refactor: friends composable + dedupe friends logic across usages

* chore: reduced unused code

* fix: align with backend

* fix: lint

* fix: file sha changes

* fix: invite links not working due to icon signed

* feat: qa

* feat: reporting frontend dummy

* fix: try use header

* remove: file hash field

* fix: pin box

* feat: malware warning for shared instances

* fix: cache rule

* feat: config files syncing

* feat: disable config sharing

* fix: header

* fix: use mark ready

* fix: dont cause push update for configs

* fix: lint

* feat: sharing page in settings

* feat: move config + change flow

* fix: qa

* fix: lint prepr

* feat: proxy file upload thru shared instances backend

* fix: use collapisible

* fix: push config

* fix: config

* feat: swap out sign in modal for new one

* fix: report flow

* fix: exclude configs.zip from external warnings

* fix: nuxi init

* fix: config bundle downloading

* fix: error notif

* fix: polling

* fix: qa

* fix: lint + prepr

* feat: shared instances moderation frontend + hook up report flow

* fix: report copy

* fix: lint

* fix: lint

* fix: modrinth ids being undefined

* feat: instance quarantining

* fix: prepr + fmt

* fix: quarantined -> locked terminology

* fix: missing endpoint impls + fmt

* fix: missing api in build.rs

* fix: share tab jittery

* fix: fmt

*PT bug

* fix: invites count as users even if pending

* fix: prepr

* fix: invite page owner in users list

* fix: lint

* fix: qa

* fix: lint

* fix: members stale not clearing

* fix: invite use joined_at field

* fix: lint

* fix: qa

---------

Co-authored-by: sychic <47618543+Sychic@users.noreply.github.com>

apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/index.vue

@@ -0,0 +1,46 @@
+<template>
+	<ModrinthAccountRequiredModal ref="accountRequiredModal" :request-auth="requestAuth" />
+	<SharedInstanceInstallModal ref="installModal" />
+	<SharedInstanceAlreadyInstalledModal
+		ref="alreadyInstalledModal"
+		@cancel="handleAlreadyInstalledCancel"
+		@go-to-instance="handleAlreadyInstalledGoToInstance"
+		@install-anyway="handleAlreadyInstalledInstallAnyway"
+	/>
+</template>
+
+<script setup lang="ts">
+import { injectAuth } from '@modrinth/ui'
+import { nextTick, ref } from 'vue'
+
+import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
+import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
+import SharedInstanceAlreadyInstalledModal from '@/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue'
+import type { ModrinthAuthFlow } from '@/helpers/mr_auth'
+
+import type { SharedInstanceInviteHandler } from './shared-instance-invite-types'
+import { useSharedInstanceInviteHandler } from './use-shared-instance-invite-handler'
+
+const auth = injectAuth()
+const installModal = ref<InstanceType<typeof SharedInstanceInstallModal>>()
+const alreadyInstalledModal = ref<InstanceType<typeof SharedInstanceAlreadyInstalledModal>>()
+const accountRequiredModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
+const {
+	handleNotification,
+	installFromInviteId,
+	handleAlreadyInstalledCancel,
+	handleAlreadyInstalledGoToInstance,
+	handleAlreadyInstalledInstallAnyway,
+} = useSharedInstanceInviteHandler(installModal, alreadyInstalledModal, accountRequiredModal)
+
+async function requestAuth(flow: ModrinthAuthFlow) {
+	await auth.requestSignIn('', flow, { showModal: false })
+	await nextTick()
+	return !!auth.session_token.value
+}
+
+defineExpose<SharedInstanceInviteHandler>({
+	handleNotification,
+	installFromInviteId,
+})
+</script>

apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/shared-instance-invite-parser.ts

@@ -0,0 +1,29 @@
+import type {
+	AppNotification,
+	SharedInstanceInvite,
+	SharedInstanceInviteNotificationBody,
+} from './shared-instance-invite-types'
+
+function optionalString(value: unknown) {
+	return typeof value === 'string' ? value : null
+}
+
+export function parseSharedInstanceInviteNotification(
+	notification: AppNotification,
+): SharedInstanceInvite | null {
+	if (notification.body?.type !== 'shared_instance_invite') return null
+
+	const body = notification.body as SharedInstanceInviteNotificationBody
+	const sharedInstanceId = optionalString(body.shared_instance_id)
+	const sharedInstanceName = optionalString(body.shared_instance_name)
+	if (!sharedInstanceId || !sharedInstanceName) return null
+
+	return {
+		sharedInstanceId,
+		sharedInstanceName,
+		invitedById: optionalString(body.invited_by),
+		invitedByUsername: optionalString(body.invited_by_username),
+		invitedByAvatarUrl: optionalString(body.invited_by_avatar_url),
+		instanceIconUrl: optionalString(body.shared_instance_icon),
+	}
+}

apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/shared-instance-invite-types.ts

@@ -0,0 +1,29 @@
+export type SharedInstanceInviteNotificationBody = {
+	type: 'shared_instance_invite'
+	shared_instance_id?: unknown
+	shared_instance_name?: unknown
+	invited_by?: unknown
+	invited_by_username?: unknown
+	invited_by_avatar_url?: unknown
+	shared_instance_icon?: unknown
+}
+
+export type AppNotification = {
+	id: string | number
+	read?: boolean
+	body?: { type?: unknown } & Record<string, unknown>
+}
+
+export type SharedInstanceInvite = {
+	sharedInstanceId: string
+	sharedInstanceName: string
+	invitedById: string | null
+	invitedByUsername: string | null
+	invitedByAvatarUrl: string | null
+	instanceIconUrl: string | null
+}
+
+export type SharedInstanceInviteHandler = {
+	handleNotification(notification: AppNotification): Promise<boolean>
+	installFromInviteId(inviteId: string): Promise<void>
+}

apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts

@@ -0,0 +1,252 @@
+import { ModrinthApiError } from '@modrinth/api-client'
+import {
+	injectAuth,
+	injectModrinthClient,
+	injectNotificationManager,
+	injectPopupNotificationManager,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { type Ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { config } from '@/config'
+import { get_user } from '@/helpers/cache'
+import { toError } from '@/helpers/errors'
+import {
+	install_accept_shared_instance_invite,
+	install_get_shared_instance_preview,
+	install_shared_instance,
+} from '@/helpers/install'
+import { list } from '@/helpers/instance'
+import { useTheming } from '@/store/state'
+
+import { parseSharedInstanceInviteNotification } from './shared-instance-invite-parser'
+import type { AppNotification, SharedInstanceInvite } from './shared-instance-invite-types'
+
+type InstallModal = {
+	show(
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+	): void
+}
+
+type AccountRequiredModal = {
+	show(event?: MouseEvent): Promise<boolean>
+}
+
+type AlreadyInstalledModal = {
+	show(instanceName: string): void
+}
+
+export function useSharedInstanceInviteHandler(
+	installModal: Ref<InstallModal | undefined>,
+	alreadyInstalledModal: Ref<AlreadyInstalledModal | undefined>,
+	accountRequiredModal: Ref<AccountRequiredModal | undefined>,
+) {
+	const auth = injectAuth()
+	const client = injectModrinthClient()
+	const { handleError } = injectNotificationManager()
+	const { addPopupNotification } = injectPopupNotificationManager()
+	const queryClient = useQueryClient()
+	const router = useRouter()
+	const themeStore = useTheming()
+	const displayedNotifications = new Set<string | number>()
+	let pendingAlreadyInstalled:
+		| {
+				instanceId: string
+				preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>
+				install: () => Promise<void>
+				onGoToInstance?: () => void | Promise<void>
+		  }
+		| undefined
+
+	async function markNotificationRead(notification: AppNotification) {
+		try {
+			await client.labrinth.notifications_v2.markAsRead(String(notification.id))
+		} catch (error) {
+			if (error instanceof ModrinthApiError && error.statusCode === 404) return
+			throw error
+		}
+	}
+
+	async function resolveInvite(invite: SharedInstanceInvite) {
+		const [invitedBy, sharedInstance] = await Promise.all([
+			!invite.invitedByUsername && invite.invitedById
+				? get_user(invite.invitedById, 'bypass').catch(() => null)
+				: null,
+			client.sharedinstances.instances_v1.get(invite.sharedInstanceId).catch(() => null),
+		])
+
+		return {
+			...invite,
+			invitedByUsername: invite.invitedByUsername ?? invitedBy?.username ?? null,
+			invitedByAvatarUrl: invite.invitedByAvatarUrl ?? invitedBy?.avatar_url ?? null,
+			instanceIconUrl: sharedInstance ? sharedInstance.icon : invite.instanceIconUrl,
+		}
+	}
+
+	function showInstall(
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+	) {
+		if (!installModal.value) throw new Error('Shared instance install modal is not available.')
+		installModal.value.show(preview, install)
+	}
+
+	async function showInstallOrAlreadyInstalled(
+		sharedInstanceId: string,
+		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
+		install: () => Promise<void>,
+		onGoToInstance?: () => void | Promise<void>,
+	) {
+		const existingInstance = (await list()).find(
+			(instance) => instance.shared_instance?.id === sharedInstanceId,
+		)
+
+		if (!existingInstance || themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+			showInstall(preview, install)
+			return
+		}
+
+		if (!alreadyInstalledModal.value) {
+			throw new Error('Shared instance already installed modal is not available.')
+		}
+
+		pendingAlreadyInstalled = {
+			instanceId: existingInstance.id,
+			preview,
+			install,
+			onGoToInstance,
+		}
+		alreadyInstalledModal.value.show(existingInstance.name)
+	}
+
+	function handleAlreadyInstalledCancel() {
+		pendingAlreadyInstalled = undefined
+	}
+
+	async function handleAlreadyInstalledGoToInstance() {
+		const pending = pendingAlreadyInstalled
+		pendingAlreadyInstalled = undefined
+		if (!pending) return
+
+		if (pending.onGoToInstance) {
+			try {
+				await pending.onGoToInstance()
+			} catch (error) {
+				handleError(toError(error))
+			}
+		}
+		await router.push(`/instance/${encodeURIComponent(pending.instanceId)}/`)
+	}
+
+	function handleAlreadyInstalledInstallAnyway() {
+		const pending = pendingAlreadyInstalled
+		pendingAlreadyInstalled = undefined
+		if (!pending) return
+		showInstall(pending.preview, pending.install)
+	}
+
+	async function acceptNotification(notification: AppNotification, invite: SharedInstanceInvite) {
+		try {
+			const preview = await install_get_shared_instance_preview(
+				invite.sharedInstanceId,
+				invite.sharedInstanceName,
+			)
+			if (invite.instanceIconUrl) preview.iconUrl = invite.instanceIconUrl
+
+			await showInstallOrAlreadyInstalled(
+				invite.sharedInstanceId,
+				preview,
+				async () => {
+					await install_shared_instance(
+						invite.sharedInstanceId,
+						invite.sharedInstanceName,
+						invite.invitedById,
+						null,
+						null,
+						invite.instanceIconUrl,
+					)
+					await markNotificationRead(notification)
+					await queryClient.invalidateQueries({ queryKey: ['instances'] })
+				},
+				() => markNotificationRead(notification),
+			)
+		} catch (error) {
+			handleError(toError(error))
+		}
+	}
+
+	async function handleNotification(notification: AppNotification) {
+		const parsedInvite = parseSharedInstanceInviteNotification(notification)
+		if (!parsedInvite) return false
+		if (displayedNotifications.has(notification.id)) return true
+
+		displayedNotifications.add(notification.id)
+		const invite = await resolveInvite(parsedInvite)
+		addPopupNotification({
+			title: invite.sharedInstanceName,
+			autoCloseMs: null,
+			toast: {
+				type: 'instance-invite',
+				actorName: invite.invitedByUsername,
+				actorAvatarUrl: invite.invitedByAvatarUrl ?? undefined,
+				entityName: invite.sharedInstanceName,
+				entityIconUrl: invite.instanceIconUrl ?? undefined,
+				onAccept: () => acceptNotification(notification, invite),
+				onDecline: () =>
+					markNotificationRead(notification).catch((error) => handleError(toError(error))),
+				onOpenActor: () => {
+					if (invite.invitedByUsername) {
+						openUrl(`${config.siteUrl}/user/${encodeURIComponent(invite.invitedByUsername)}`)
+					}
+				},
+			},
+		})
+		return true
+	}
+
+	async function requireAccount() {
+		if (!auth.isReady?.value) {
+			await new Promise<void>((resolve) => {
+				const stop = watch(auth.isReady!, (ready) => {
+					if (ready) {
+						stop()
+						resolve()
+					}
+				})
+			})
+		}
+		if (auth.session_token.value) return true
+		return (await accountRequiredModal.value?.show()) ?? false
+	}
+
+	async function installFromInviteId(inviteId: string) {
+		try {
+			if (!(await requireAccount())) return
+			const invite = await install_accept_shared_instance_invite(inviteId)
+			await showInstallOrAlreadyInstalled(invite.sharedInstanceId, invite.preview, async () => {
+				await install_shared_instance(
+					invite.sharedInstanceId,
+					invite.preview.name,
+					invite.managerId,
+					invite.serverManagerName,
+					invite.serverManagerIconUrl,
+					invite.instanceIconUrl,
+				)
+				await queryClient.invalidateQueries({ queryKey: ['instances'] })
+			})
+		} catch (error) {
+			handleError(toError(error))
+		}
+	}
+
+	return {
+		handleNotification,
+		installFromInviteId,
+		handleAlreadyInstalledCancel,
+		handleAlreadyInstalledGoToInstance,
+		handleAlreadyInstalledInstallAnyway,
+	}
+}