qa: shared instances post release (#6893)

* fix: 20 user cap

* qa: invite modal dropdown + other + clamp limits

* fix: hide filters if just one type

* feat: update req banner

* feat: invite management frontend

* fix: moderation issues with shared instances

* feat: instance icon improvements

* fix: better offline handling

* fix: lint

* feat: show avatar in install to play modal

* feat: smaller qa points

* fix: fmt

* fix: fmt

* fix: yeet svg

* fix: 50 user limit

apps/app-frontend/src/components/ui/instance-page-header/index.vue

@@ -15,12 +15,12 @@
 			</PageHeaderBadgeItem>
 			<PageHeaderBadgeItem
 				v-else
-				:icon="UnknownIcon"
 				:tooltip="sharedInstanceTooltip"
 				aria-label="Shared instance information"
 				class="!border-blue !bg-highlight-blue !text-blue"
 			>
 				Shared
+				<UnknownIcon class="block size-4 shrink-0 text-current" aria-hidden="true" />
 			</PageHeaderBadgeItem>
 		</template>
 

apps/app-frontend/src/components/ui/instance/instance-admonitions/index.vue

@@ -6,6 +6,11 @@
 				:instance="instance"
 				@published="emit('published')"
 			/>
+			<InstanceAdmonitionsSharedInstanceUpdateAvailable
+				v-else-if="item.kind === 'shared-instance-update-available'"
+				:instance-name="instance.name"
+				@review="emit('review-update', $event)"
+			/>
 			<InstanceAdmonitionsSharedInstanceWrongAccount
 				v-else-if="item.kind === 'shared-instance-wrong-account'"
 				:expected-user-id="sharedInstanceExpectedUserId"
@@ -33,6 +38,7 @@ import type { GameInstance } from '@/helpers/types'
 
 import InstanceAdmonitionsSharedInstanceStale from './instance-admonitions-shared-instance-stale.vue'
 import InstanceAdmonitionsSharedInstanceUnavailable from './instance-admonitions-shared-instance-unavailable.vue'
+import InstanceAdmonitionsSharedInstanceUpdateAvailable from './instance-admonitions-shared-instance-update-available.vue'
 import InstanceAdmonitionsSharedInstanceWrongAccount from './instance-admonitions-shared-instance-wrong-account.vue'
 import type { InstanceAdmonitionItem, SharedInstanceRole } from './types'
 
@@ -48,11 +54,13 @@ const props = defineProps<{
 	sharedInstanceExpectedUserId?: string | null
 	sharedInstanceRole?: SharedInstanceRole | null
 	sharedInstanceSignedOut?: boolean
+	sharedInstanceUpdateAvailable?: boolean
 }>()
 
 const emit = defineEmits<{
 	published: []
 	delete: []
+	'review-update': [event: MouseEvent]
 }>()
 
 const sharedInstanceWrongAccount = computed(() => props.sharedInstanceWrongAccount ?? false)
@@ -68,6 +76,14 @@ const showSharedInstancePublishAdmonition = computed(
 		props.instance.shared_instance?.role === 'owner' &&
 		props.instance.shared_instance.status === 'stale',
 )
+const showSharedInstanceUpdateAdmonition = computed(
+	() =>
+		!sharedInstanceWrongAccount.value &&
+		!displayedSharedInstanceUnavailableReason.value &&
+		props.instance.install_stage === 'installed' &&
+		props.sharedInstanceRole === 'member' &&
+		props.sharedInstanceUpdateAvailable === true,
+)
 
 const stackItems = computed<InstanceAdmonitionItem[]>(() => {
 	const items: InstanceAdmonitionItem[] = []
@@ -104,6 +120,15 @@ const stackItems = computed<InstanceAdmonitionItem[]>(() => {
 		})
 	}
 
+	if (showSharedInstanceUpdateAdmonition.value) {
+		items.push({
+			id: 'shared-instance-update-available',
+			type: 'info',
+			dismissible: false,
+			kind: 'shared-instance-update-available',
+		})
+	}
+
 	return items
 })
 

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-messages.ts

@@ -21,6 +21,19 @@ export const instanceAdmonitionsMessages = defineMessages({
 		id: 'app.instance.admonitions.shared-instance.reviewing-button',
 		defaultMessage: 'Reviewing...',
 	},
+	sharedInstanceUpdateAvailableHeader: {
+		id: 'app.instance.admonitions.shared-instance.update-available-header',
+		defaultMessage: 'An update is available',
+	},
+	sharedInstanceUpdateAvailableBody: {
+		id: 'app.instance.admonitions.shared-instance.update-available-body',
+		defaultMessage:
+			'An update is required to play {name}. Please update to latest version to launch the game.',
+	},
+	sharedInstanceReviewUpdateButton: {
+		id: 'app.instance.admonitions.shared-instance.review-update-button',
+		defaultMessage: 'Review update',
+	},
 	sharedInstanceReviewHeader: {
 		id: 'app.instance.admonitions.shared-instance.review-header',
 		defaultMessage: 'Review changes',

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-update-available.vue

@@ -0,0 +1,34 @@
+<template>
+	<Admonition
+		type="info"
+		inline-actions
+		:header="formatMessage(messages.sharedInstanceUpdateAvailableHeader)"
+	>
+		{{ formatMessage(messages.sharedInstanceUpdateAvailableBody, { name: instanceName }) }}
+		<template #actions>
+			<ButtonStyled color="blue">
+				<button class="!h-10" @click="emit('review', $event)">
+					<DownloadIcon aria-hidden="true" />
+					{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
+				</button>
+			</ButtonStyled>
+		</template>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+
+defineProps<{
+	instanceName: string
+}>()
+
+const emit = defineEmits<{
+	review: [event: MouseEvent]
+}>()
+
+const { formatMessage } = useVIntl()
+</script>

apps/app-frontend/src/components/ui/instance/instance-admonitions/types.ts

@@ -2,6 +2,7 @@ import type { StackedAdmonitionItem } from '@modrinth/ui'
 
 export type InstanceAdmonitionKind =
 	| 'shared-instance-stale'
+	| 'shared-instance-update-available'
 	| 'shared-instance-unavailable'
 	| 'shared-instance-wrong-account'
 

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -109,9 +109,13 @@ watch(selectedReleaseChannel, async (channel, previousChannel) => {
 })
 
 async function resetIcon() {
-	icon.value = undefined
-	await edit_icon(instance.value.id, null).catch(handleError)
-	trackEvent('InstanceRemoveIcon')
+	try {
+		await edit_icon(instance.value.id, null)
+		icon.value = undefined
+		trackEvent('InstanceRemoveIcon')
+	} catch (error) {
+		handleError(error)
+	}
 }
 
 async function setIcon() {
@@ -127,10 +131,13 @@ async function setIcon() {
 
 	if (!value) return
 
-	icon.value = value
-	await edit_icon(instance.value.id, icon.value).catch(handleError)
-
-	trackEvent('InstanceSetIcon')
+	try {
+		await edit_icon(instance.value.id, value)
+		icon.value = value
+		trackEvent('InstanceSetIcon')
+	} catch (error) {
+		handleError(error)
+	}
 }
 
 const editInstanceObject = computed(() => ({

apps/app-frontend/src/components/ui/instance_settings/SharingSettings.vue

@@ -1,31 +1,156 @@
 <template>
-	<div>
+	<div class="flex flex-col gap-8">
+		<section class="flex flex-col gap-4">
+			<div class="flex flex-col gap-1">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.activeInvitesTitle) }}
+				</h3>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.activeInvitesDescription) }}
+				</p>
+			</div>
+
+			<Table :columns="inviteColumns" :data="activeInvites" row-key="id" table-min-width="36rem">
+				<template #empty-state>
+					<div class="flex h-40 items-center justify-center text-secondary">
+						{{ formatMessage(messages.noActiveInvites) }}
+					</div>
+				</template>
+				<template #cell-id="{ row }">
+					<CopyCode
+						:text="`${config.siteUrl}/share/${encodeURIComponent(row.id)}`"
+						:display-text="`/${row.id}`"
+					/>
+				</template>
+				<template #cell-uses="{ row }">
+					<span class="font-medium text-primary">{{ row.uses }}</span>
+					<span> / {{ row.maxUses }}</span>
+				</template>
+				<template #cell-expiration="{ row }">
+					<span v-tooltip="formatDateTime(row.expiration)" class="whitespace-nowrap">
+						{{ formatRelativeTime(row.expiration) }}
+					</span>
+				</template>
+				<template #cell-actions="{ row }">
+					<div class="flex justify-end">
+						<ButtonStyled circular type="transparent">
+							<button
+								v-tooltip="formatMessage(messages.revokeInvite)"
+								:aria-label="
+									formatMessage(messages.revokeInviteWithCode, {
+										code: row.id,
+									})
+								"
+								class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+								@click="revokeInviteModal?.show(row.id)"
+							>
+								<XIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+					</div>
+				</template>
+			</Table>
+		</section>
+
 		<SharedInstanceInstallationSettingsControls
 			can-unpublish
 			:busy="isBusy"
 			:unpublishing="unpublishing"
 			:unpublish="unpublishSharedInstance"
 		/>
+
+		<ConfirmRevokeSharedInstanceInviteModal ref="revokeInviteModal" @revoke="revokeInvite" />
 	</div>
 </template>
 
 <script setup lang="ts">
-import { injectNotificationManager } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	CopyCode,
+	defineMessages,
+	Table,
+	type TableColumn,
+	useFormatDateTime,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
+import ConfirmRevokeSharedInstanceInviteModal from '@/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue'
 import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
-import { unpublish_shared_instance } from '@/helpers/instance'
+import { config } from '@/config'
+import { type SharedInstanceInvite, unpublish_shared_instance } from '@/helpers/instance'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
 const { instance, offline, onUnlinked } = injectInstanceSettings()
-const { handleError } = injectNotificationManager()
+const { notifySharedInstanceError } = useSharedInstanceErrors()
+const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
 const unpublishing = ref(false)
+const revokeInviteModal = ref<InstanceType<typeof ConfirmRevokeSharedInstanceInviteModal>>()
+const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
 const isBusy = computed(
 	() => instance.value.install_stage !== 'installed' || unpublishing.value || !!offline,
 )
 
+type InviteTableColumn = 'id' | 'uses' | 'expiration' | 'actions'
+
+const inviteColumns = computed<TableColumn<InviteTableColumn>[]>(() => [
+	{
+		key: 'id',
+		label: formatMessage(messages.inviteCodeLabel),
+		width: 'clamp(11rem, 34%, 19rem)',
+	},
+	{
+		key: 'uses',
+		label: formatMessage(messages.usesLabel),
+		width: 'clamp(7rem, 18%, 10rem)',
+	},
+	{
+		key: 'expiration',
+		label: formatMessage(messages.expiresLabel),
+		width: 'clamp(9rem, 28%, 14rem)',
+	},
+	{
+		key: 'actions',
+		label: formatMessage(messages.actionsLabel),
+		align: 'right',
+		width: '5.5rem',
+	},
+])
+
+const now = Date.now()
+
+// TODO: Use actual endpoint
+const activeInvites = ref<SharedInstanceInvite[]>([
+	{
+		id: 'wqHPxNagZr',
+		expiration: new Date(now + 6 * 24 * 60 * 60 * 1000).toISOString(),
+		maxUses: 10,
+		uses: 0,
+	},
+	{
+		id: 'GbRGfY7hbs',
+		expiration: new Date(now + 3 * 24 * 60 * 60 * 1000).toISOString(),
+		maxUses: 10,
+		uses: 2,
+	},
+	{
+		id: 'k9mvD2QxLc',
+		expiration: new Date(now + 90 * 60 * 1000).toISOString(),
+		maxUses: 5,
+		uses: 4,
+	},
+])
+
+function revokeInvite(inviteId: string) {
+	activeInvites.value = activeInvites.value.filter((invite) => invite.id !== inviteId)
+}
+
 async function unpublishSharedInstance() {
 	unpublishing.value = true
 	try {
@@ -34,9 +159,48 @@ async function unpublishSharedInstance() {
 		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
 		onUnlinked()
 	} catch (error) {
-		handleError(error)
+		notifySharedInstanceError(error)
 	} finally {
 		unpublishing.value = false
 	}
 }
+
+const messages = defineMessages({
+	activeInvitesTitle: {
+		id: 'instance.settings.sharing.active-invites.title',
+		defaultMessage: 'Active invites',
+	},
+	activeInvitesDescription: {
+		id: 'instance.settings.sharing.active-invites.description',
+		defaultMessage: 'Anyone with one of these invite links can join while it remains active.',
+	},
+	inviteCodeLabel: {
+		id: 'instance.settings.sharing.active-invites.code',
+		defaultMessage: 'Invite link',
+	},
+	usesLabel: {
+		id: 'instance.settings.sharing.active-invites.uses',
+		defaultMessage: 'Uses',
+	},
+	expiresLabel: {
+		id: 'instance.settings.sharing.active-invites.expires',
+		defaultMessage: 'Expires',
+	},
+	actionsLabel: {
+		id: 'instance.settings.sharing.active-invites.actions',
+		defaultMessage: 'Actions',
+	},
+	noActiveInvites: {
+		id: 'instance.settings.sharing.active-invites.empty',
+		defaultMessage: 'There are no active invites.',
+	},
+	revokeInvite: {
+		id: 'instance.settings.sharing.active-invites.revoke',
+		defaultMessage: 'Revoke invite',
+	},
+	revokeInviteWithCode: {
+		id: 'instance.settings.sharing.active-invites.revoke-with-code',
+		defaultMessage: 'Revoke invite {code}',
+	},
+})
 </script>

apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue

@@ -0,0 +1,82 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: inviteCode }">
+				<template #monospace="{ children }">
+					<code class="font-mono"><component :is="() => children" /></code>
+				</template>
+			</IntlFormatted>
+		</Admonition>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button @click="modal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<XIcon />
+						{{ formatMessage(messages.revokeButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
+const inviteCode = ref('')
+
+const emit = defineEmits<{
+	revoke: [inviteCode: string]
+}>()
+
+function show(code: string) {
+	inviteCode.value = code
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('revoke', inviteCode.value)
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'instance.settings.sharing.revoke-invite.header',
+		defaultMessage: 'Revoke invite',
+	},
+	admonitionHeader: {
+		id: 'instance.settings.sharing.revoke-invite.admonition-header',
+		defaultMessage: 'This action cannot be undone',
+	},
+	admonitionBody: {
+		id: 'instance.settings.sharing.revoke-invite.admonition-body',
+		defaultMessage:
+			'The invite link <monospace>{code}</monospace> will stop working immediately. People who already joined will keep access.',
+	},
+	revokeButton: {
+		id: 'instance.settings.sharing.revoke-invite.confirm',
+		defaultMessage: 'Revoke invite',
+	},
+})
+
+defineExpose({ show })
+</script>

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceUpdateModal.vue

@@ -43,8 +43,9 @@ import type { GameInstance } from '@/helpers/types'
 type UpdateCompleteCallback = () => void | Promise<void>
 
 const emit = defineEmits<{
+	accepted: []
 	cancel: []
-	complete: []
+	complete: [successful: boolean]
 	report: [event?: MouseEvent]
 	sharedInstanceUnavailable: [reason: SharedInstanceUnavailableReason | null]
 }>()
@@ -72,11 +73,14 @@ const diffs = computed<ContentDiffItem[]>(
 )
 
 async function update() {
+	let successful = false
+	emit('accepted')
 	try {
 		if (instance.value) {
 			const job = await install_update_shared_instance(instance.value.id)
 			await wait_for_install_job(job.job_id)
 			await onComplete.value()
+			successful = true
 		}
 	} catch (error) {
 		if (isSharedInstanceUnavailableError(error)) {
@@ -85,7 +89,7 @@ async function update() {
 		}
 		notifySharedInstanceError(error)
 	} finally {
-		emit('complete')
+		emit('complete', successful)
 	}
 }
 

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -64,7 +64,29 @@
 				</div>
 			</Admonition>
 			<p v-else class="m-0 text-primary">
-				{{ formatMessage(messages.inviteWarning) }}
+				<IntlFormatted
+					v-if="creator"
+					:message-id="messages.inviteWarningWithCreator"
+					:values="{ username: creator.username }"
+				>
+					<template #creator="{ children }">
+						<AutoLink :to="creatorProfileLink" class="font-medium text-contrast hover:underline">
+							<Avatar
+								:src="creator.avatarUrl"
+								:alt="creator.username"
+								:tint-by="creator.username"
+								size="24px"
+								circle
+								no-shadow
+								class="mr-1 inline-block align-middle"
+							/>
+							<span><component :is="() => children" /></span>
+						</AutoLink>
+					</template>
+				</IntlFormatted>
+				<template v-else>
+					{{ formatMessage(messages.inviteWarning) }}
+				</template>
 			</p>
 			<SharedInstanceInstallSummary
 				:preview="preview"
@@ -226,6 +248,7 @@ import { BanIcon, DownloadIcon, ReportIcon, SendIcon, SpinnerIcon, XIcon } from
 import {
 	Admonition,
 	AutoLink,
+	Avatar,
 	ButtonStyled,
 	Checkbox,
 	Combobox,
@@ -243,8 +266,10 @@ import {
 	useScrollIndicator,
 	useVIntl,
 } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
+import { config } from '@/config'
 import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { toError } from '@/helpers/errors'
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
@@ -258,11 +283,16 @@ type ExternalFileRow = {
 	id: string
 	name: string
 }
+type SharedInstanceCreator = {
+	username: string
+	avatarUrl: string | null
+}
 
 const modal = ref<InstanceType<typeof NewModal>>()
 const contentModal = ref<InstanceType<typeof ModpackContentModal>>()
 const externalFileTable = ref<HTMLElement | null>(null)
 const preview = ref<SharedInstanceInstallPreview | null>(null)
+const creator = ref<SharedInstanceCreator | null>(null)
 const install = ref<() => void | Promise<void>>(() => {})
 const reportMode = ref(false)
 const reportOnly = ref(false)
@@ -302,6 +332,12 @@ const reportReasonOptions = computed<ComboboxOption<ReportReason>[]>(() => [
 const canSubmitReport = computed(
 	() => Boolean(preview.value && additionalContext.value.trim()) && !submitLoading.value,
 )
+const creatorProfileLink = computed(() => {
+	const username = creator.value?.username
+	return username
+		? () => openUrl(`${config.siteUrl}/user/${encodeURIComponent(username)}`)
+		: undefined
+})
 
 async function accept() {
 	hide()
@@ -381,6 +417,7 @@ function handleCancel() {
 }
 function handleHide() {
 	resetReportState()
+	creator.value = null
 	show_ads_window()
 }
 function resetReportState() {
@@ -395,14 +432,17 @@ function resetReportState() {
 function show(
 	previewValue: SharedInstanceInstallPreview,
 	installValue: () => void | Promise<void>,
+	creatorValue?: SharedInstanceCreator,
 	event?: MouseEvent,
 ) {
 	resetReportState()
+	creator.value = creatorValue ?? null
 	install.value = installValue
 	showPreview(previewValue, event)
 }
 function showReport(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
 	resetReportState()
+	creator.value = null
 	reportMode.value = true
 	reportOnly.value = true
 	install.value = () => {}
@@ -437,6 +477,11 @@ const messages = defineMessages({
 		defaultMessage:
 			'This invite was created by another Modrinth user, not Modrinth. Only accept invites from people you trust.',
 	},
+	inviteWarningWithCreator: {
+		id: 'app.modal.install-to-play.invite-warning-with-creator',
+		defaultMessage:
+			'This invite was created by <creator>{username}</creator>, not Modrinth. Only accept invites from people you trust.',
+	},
 	reportDescription: {
 		id: 'app.modal.install-to-play.report-description',
 		defaultMessage:

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/use-shared-instance-preview-content.ts

@@ -1,7 +1,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import type { ContentItem } from '@modrinth/ui'
 
-import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
 
 type VersionDependency = Labrinth.Versions.v2.Dependency & { version_id?: string }
@@ -20,7 +20,18 @@ export function useSharedInstancePreviewContent() {
 	async function modpackContentItems(preview: SharedInstanceInstallPreview) {
 		if (!preview.modpackVersionId) return []
 		const version = await get_version(preview.modpackVersionId, 'must_revalidate')
-		return await contentItemsFromDependencies(version?.dependencies ?? [])
+		if (!version) return []
+
+		const [project, contentItems] = await Promise.all([
+			get_project(version.project_id, 'must_revalidate'),
+			contentItemsFromDependencies(version.dependencies ?? []),
+		])
+		if (!project) return contentItems
+
+		return contentItems.map((item) => ({
+			...item,
+			source: { project },
+		}))
 	}
 
 	async function contentItemsFromDependencies(dependencies: Labrinth.Versions.v2.Dependency[]) {

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

@@ -17,6 +17,7 @@ import {
 	install_shared_instance,
 } from '@/helpers/install'
 import { list } from '@/helpers/instance'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import { useTheming } from '@/store/state'
 
 import { parseSharedInstanceInviteNotification } from './shared-instance-invite-parser'
@@ -26,9 +27,15 @@ type InstallModal = {
 	show(
 		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
 		install: () => Promise<void>,
+		creator?: SharedInstanceCreator,
 	): void
 }
 
+type SharedInstanceCreator = {
+	username: string
+	avatarUrl: string | null
+}
+
 type AccountRequiredModal = {
 	show(event?: MouseEvent): Promise<boolean>
 }
@@ -45,6 +52,8 @@ export function useSharedInstanceInviteHandler(
 	const auth = injectAuth()
 	const client = injectModrinthClient()
 	const { handleError } = injectNotificationManager()
+	const { notifySharedInstanceConnectionError, notifySharedInstanceError } =
+		useSharedInstanceErrors()
 	const popupNotificationManager = injectPopupNotificationManager()
 	const queryClient = useQueryClient()
 	const router = useRouter()
@@ -58,6 +67,7 @@ export function useSharedInstanceInviteHandler(
 				instanceId: string
 				preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>
 				install: () => Promise<void>
+				creator?: SharedInstanceCreator
 				onGoToInstance?: () => void | Promise<void>
 		  }
 		| undefined
@@ -73,10 +83,13 @@ export function useSharedInstanceInviteHandler(
 
 	async function resolveInvite(invite: SharedInstanceInvite) {
 		const [invitedBy, sharedInstance] = await Promise.all([
-			!invite.invitedByUsername && invite.invitedById
+			(!invite.invitedByUsername || !invite.invitedByAvatarUrl) && invite.invitedById
 				? get_user(invite.invitedById, 'bypass').catch(() => null)
 				: null,
-			client.sharedinstances.instances_v1.get(invite.sharedInstanceId).catch(() => null),
+			client.sharedinstances.instances_v1.get(invite.sharedInstanceId).catch(() => {
+				notifySharedInstanceConnectionError()
+				return null
+			}),
 		])
 
 		return {
@@ -90,15 +103,17 @@ export function useSharedInstanceInviteHandler(
 	function showInstall(
 		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
 		install: () => Promise<void>,
+		creator?: SharedInstanceCreator,
 	) {
 		if (!installModal.value) throw new Error('Shared instance install modal is not available.')
-		installModal.value.show(preview, install)
+		installModal.value.show(preview, install, creator)
 	}
 
 	async function showInstallOrAlreadyInstalled(
 		sharedInstanceId: string,
 		preview: Awaited<ReturnType<typeof install_get_shared_instance_preview>>,
 		install: () => Promise<void>,
+		creator?: SharedInstanceCreator,
 		onGoToInstance?: () => void | Promise<void>,
 	) {
 		const existingInstance = (await list()).find(
@@ -106,7 +121,7 @@ export function useSharedInstanceInviteHandler(
 		)
 
 		if (!existingInstance || themeStore.getFeatureFlag('skip_non_essential_warnings')) {
-			showInstall(preview, install)
+			showInstall(preview, install, creator)
 			return
 		}
 
@@ -118,6 +133,7 @@ export function useSharedInstanceInviteHandler(
 			instanceId: existingInstance.id,
 			preview,
 			install,
+			creator,
 			onGoToInstance,
 		}
 		alreadyInstalledModal.value.show(existingInstance.name)
@@ -146,7 +162,7 @@ export function useSharedInstanceInviteHandler(
 		const pending = pendingAlreadyInstalled
 		pendingAlreadyInstalled = undefined
 		if (!pending) return
-		showInstall(pending.preview, pending.install)
+		showInstall(pending.preview, pending.install, pending.creator)
 	}
 
 	async function acceptNotification(notification: AppNotification, invite: SharedInstanceInvite) {
@@ -172,10 +188,16 @@ export function useSharedInstanceInviteHandler(
 					await markNotificationRead(notification)
 					await queryClient.invalidateQueries({ queryKey: ['instances'] })
 				},
+				invite.invitedByUsername
+					? {
+							username: invite.invitedByUsername,
+							avatarUrl: invite.invitedByAvatarUrl,
+						}
+					: undefined,
 				() => markNotificationRead(notification),
 			)
 		} catch (error) {
-			handleError(toError(error))
+			notifySharedInstanceError(error)
 		}
 	}
 
@@ -253,19 +275,32 @@ export function useSharedInstanceInviteHandler(
 		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'] })
-			})
+			const manager = invite.managerId
+				? await get_user(invite.managerId, 'bypass').catch(() => null)
+				: null
+			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'] })
+				},
+				manager
+					? {
+							username: manager.username,
+							avatarUrl: manager.avatar_url ?? null,
+						}
+					: undefined,
+			)
 		} catch (error) {
-			handleError(toError(error))
+			notifySharedInstanceError(error)
 		}
 	}