feat: instance sharing thru shared-instances service

apps/app-frontend/src/App.vue

@@ -16,6 +16,7 @@ import {
 	HomeIcon,
 	LeftArrowIcon,
 	LibraryIcon,
+	LinkIcon,
 	LogInIcon,
 	LogOutIcon,
 	NewspaperIcon,
@@ -85,6 +86,7 @@ import NavButton from '@/components/ui/NavButton.vue'
 import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import SharedInstanceInviteHandler from '@/components/ui/shared-instances/shared-instance-invite-handler/index.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
 import WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
@@ -147,6 +149,7 @@ const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
 const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime()
 const credentials = ref()
+let credentialsRefreshId = 0
 const sidebarToggled = ref(true)
 const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
 	sidebarToggled.value = !themeStore.toggleSidebar
@@ -637,6 +640,7 @@ const contentInstallModpackAlreadyInstalledModal = ref()
 const addServerToInstanceModal = ref()
 const incompatibilityWarningModal = ref()
 const installToPlayModal = ref()
+const sharedInstanceInviteHandler = ref()
 const updateToPlayModal = ref()
 
 const modrinthLoginFlowWaitModal = ref()
@@ -647,8 +651,8 @@ watch(incompatibilityWarningModal, (modal) => {
 	}
 })
 
-setupAuthProvider(credentials, async (_redirectPath) => {
-	await signIn()
+setupAuthProvider(credentials, async (_redirectPath, flow) => {
+	await signIn(flow)
 })
 
 async function validateSession(sessionToken) {
@@ -665,23 +669,33 @@ async function validateSession(sessionToken) {
 }
 
 async function fetchCredentials() {
+	const refreshId = ++credentialsRefreshId
+	credentials.value = undefined
+
 	const creds = await getCreds().catch(handleError)
+	if (refreshId !== credentialsRefreshId) return
+
 	if (creds && creds.user_id) {
 		if (creds.session && !(await validateSession(creds.session))) {
+			if (refreshId !== credentialsRefreshId) return
+
 			await logout().catch(handleError)
+			if (refreshId !== credentialsRefreshId) return
+
 			credentials.value = null
 			return
 		}
 		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
+		if (refreshId !== credentialsRefreshId) return
 	}
 	credentials.value = creds ?? null
 }
 
-async function signIn() {
+async function signIn(flow = 'sign-in') {
 	modrinthLoginFlowWaitModal.value.show()
 
 	try {
-		await login()
+		await login(flow)
 		await fetchCredentials()
 	} catch (error) {
 		if (
@@ -699,6 +713,13 @@ async function signIn() {
 }
 
 async function logOut() {
+	await performLogOut()
+}
+
+async function performLogOut() {
+	credentialsRefreshId++
+	credentials.value = undefined
+
 	await logout().catch(handleError)
 	await fetchCredentials()
 }
@@ -821,30 +842,35 @@ function openServerInviteInviterProfile(inviterName) {
 }
 
 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: serverName,
-		autoCloseMs: null,
-		toast: {
-			type: 'server-invite',
-			actorName: invitedBy?.username ?? null,
-			actorAvatarUrl: invitedBy?.avatar_url ?? null,
-			entityName: serverName,
-			onAccept: () => acceptServerInviteNotification(notification),
-			onDecline: () => declineServerInviteNotification(notification),
-			onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null),
-		},
-	})
+	if (!notification?.body || notification.read) return
+	if (await sharedInstanceInviteHandler.value?.handleNotification(notification)) return
+
+	if (notification.body.type === 'server_invite') {
+		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: serverName,
+			autoCloseMs: null,
+			toast: {
+				type: 'server-invite',
+				actorName: invitedBy?.username ?? null,
+				actorAvatarUrl: invitedBy?.avatar_url ?? null,
+				entityName: serverName,
+				onAccept: () => acceptServerInviteNotification(notification),
+				onDecline: () => declineServerInviteNotification(notification),
+				onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null),
+			},
+		})
+	}
+
 }
 
 async function handleCommand(e) {
@@ -877,6 +903,8 @@ async function handleCommand(e) {
 		} else {
 			await run(e.id).catch(handleError)
 		}
+	} else if (e.event === 'InstallSharedInstanceInvite') {
+		await sharedInstanceInviteHandler.value?.installFromInviteId(e.invite_id)
 	} else if (e.event === 'InstallServer') {
 		await router.push(`/project/${e.id}`)
 		await playServerProject(e.id).catch(handleError)
@@ -1467,6 +1495,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<PlusIcon />
 			</NavButton>
+			<NavButton
+				v-tooltip.right="'Install from invite link'"
+				:to="(event) => sharedInstanceInviteHandler?.showManualInviteLinkModal(event)"
+			>
+				<LinkIcon />
+			</NavButton>
 			<div class="flex flex-grow"></div>
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.settingsLabel)"
@@ -1736,6 +1770,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		@create-anyway="handleContentInstallModpackDuplicateCreateAnyway"
 		@go-to-instance="handleContentInstallModpackDuplicateGoToInstance"
 	/>
+	<SharedInstanceInviteHandler ref="sharedInstanceInviteHandler" />
 	<InstallToPlayModal ref="installToPlayModal" />
 	<UpdateToPlayModal ref="updateToPlayModal" />
 </template>

apps/app-frontend/src/components/ui/Instance.vue

@@ -142,7 +142,9 @@ const unlisten = await process_listener((e) => {
 	}
 })
 
-onMounted(() => checkProcess())
+onMounted(() => {
+	checkProcess()
+})
 onUnmounted(() => unlisten())
 </script>
 

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -10,18 +10,12 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
+import { useFriends } from '@/composables/use-friends'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { friend_listener } from '@/helpers/events'
-import {
-	add_friend,
-	friends,
-	type FriendWithUserData,
-	remove_friend,
-	transformFriends,
-} from '@/helpers/friends.ts'
+import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
 
 const { formatMessage } = useVIntl()
@@ -35,36 +29,23 @@ const props = defineProps<{
 }>()
 
 const userCredentials = computed(() => props.credentials)
+const {
+	friends: userFriends,
+	loading,
+	requestFriend,
+	acceptFriend,
+	removeFriend: removeFriendRecord,
+} = useFriends({
+	currentUserId: () => userCredentials.value?.user_id,
+	getCredentials: () => userCredentials.value,
+	onError: handleError,
+})
 
 const search = ref('')
 const friendInvitesModal = ref()
-
 const username = ref('')
 const addFriendModal = ref()
-async function addFriendFromModal() {
-	addFriendModal.value.hide()
-	await add_friend(username.value).catch(handleError)
-	username.value = ''
-	await loadFriends()
-}
-
-async function addFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await add_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-async function removeFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await remove_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
 
-const userFriends = ref<FriendWithUserData[]>([])
 const sortedFriends = computed<FriendWithUserData[]>(() =>
 	userFriends.value.slice().sort((a, b) => {
 		if (a.last_updated === null && b.last_updated === null) {
@@ -108,42 +89,22 @@ const incomingRequests = computed(() =>
 		.sort((a, b) => b.created.diff(a.created)),
 )
 
-const loading = ref(true)
-async function loadFriends(timeout = false) {
-	loading.value = timeout
+function addFriendFromModal() {
+	const target = username.value.trim()
+	if (!target) return
 
-	try {
-		const friendsList = await friends()
-		userFriends.value = await transformFriends(friendsList, userCredentials.value)
-		loading.value = false
-	} catch (e) {
-		console.error('Error loading friends', e)
-		if (timeout) {
-			setTimeout(() => loadFriends(), 15 * 1000)
-		}
-	}
+	addFriendModal.value.hide()
+	requestFriend({ id: target, username: target })
+	username.value = ''
 }
 
-watch(
-	userCredentials,
-	() => {
-		if (userCredentials.value === undefined) {
-			userFriends.value = []
-			loading.value = false
-		} else if (userCredentials.value === null) {
-			userFriends.value = []
-			loading.value = false
-		} else {
-			loadFriends(true)
-		}
-	},
-	{ immediate: true },
-)
+function addFriend(friend: FriendWithUserData) {
+	acceptFriend(friend)
+}
 
-const unlisten = await friend_listener(() => loadFriends())
-onUnmounted(() => {
-	unlisten()
-})
+function removeFriend(friend: FriendWithUserData) {
+	removeFriendRecord(friend)
+}
 
 const messages = defineMessages({
 	addFriend: {