feat: move users page to xplat page system (#6889)

* feat: move users page to xplat

* feat: stop doing tauri plugin open for user links

* feat: qa

* fix: qa

* fix: qa

* fix: comment

* fix: prepr

* prepr

* prepr

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/pages/User.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="w-full pt-2">
+		<UserProfilePageLayout
+			:user-id="userId"
+			:project-type="projectType"
+			variant="app"
+			site-url="https://modrinth.com"
+			project-link-mode="app"
+			external-navigation
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, watch } from 'vue'
+import { onBeforeRouteUpdate, useRoute } from 'vue-router'
+
+import {
+	get_user_collections,
+	get_user_organizations,
+	get_user_profile,
+	get_user_projects,
+	patch_user,
+} from '@/helpers/users'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+
+const route = useRoute()
+const queryClient = useQueryClient()
+const breadcrumbs = useBreadcrumbs()
+const userProfile = provideUserProfile({
+	getUser: get_user_profile,
+	getProjects: get_user_projects,
+	getOrganizations: get_user_organizations,
+	getCollections: get_user_collections,
+	patchUser: patch_user,
+})
+
+const userId = computed(() => {
+	const value = route.params.user
+	return Array.isArray(value) ? (value[0] ?? '') : (value ?? '')
+})
+const projectType = computed(() => {
+	const value = route.params.projectType
+	return Array.isArray(value) ? value[0] : value
+})
+
+async function ensureUserProfileData(id: string): Promise<void> {
+	if (!id) return
+
+	let breadcrumbName = id
+	try {
+		const user = await queryClient.ensureQueryData({
+			queryKey: ['user', id],
+			queryFn: () => userProfile.getUser(id),
+			staleTime: 30_000,
+		})
+		breadcrumbName = user.username
+	} catch {
+		// Let the mounted layout's useQuery surface errors; do not fail route setup.
+	}
+
+	await Promise.allSettled([
+		queryClient.ensureQueryData({
+			queryKey: ['user', id, 'projects'],
+			queryFn: () => userProfile.getProjects(id),
+			staleTime: 30_000,
+		}),
+		queryClient.ensureQueryData({
+			queryKey: ['user', id, 'organizations'],
+			queryFn: () => userProfile.getOrganizations(id),
+			staleTime: 30_000,
+		}),
+		queryClient.ensureQueryData({
+			queryKey: ['user', id, 'collections'],
+			queryFn: () => userProfile.getCollections(id),
+			staleTime: 30_000,
+		}),
+	])
+
+	breadcrumbs.setName('User', breadcrumbName)
+}
+
+onBeforeRouteUpdate(async (to) => {
+	const value = to.params.user
+	const id = Array.isArray(value) ? (value[0] ?? '') : (value ?? '')
+	await ensureUserProfileData(id)
+})
+
+breadcrumbs.setName('User', userId.value)
+await ensureUserProfileData(userId.value)
+
+const { data: user } = useQuery({
+	queryKey: computed(() => ['user', userId.value]),
+	queryFn: () => userProfile.getUser(userId.value),
+	enabled: false,
+	staleTime: 30_000,
+})
+
+watch(
+	[userId, user],
+	([currentUserId, value]) => {
+		breadcrumbs.setName('User', value?.username ?? currentUserId)
+	},
+	{ immediate: true },
+)
+</script>

apps/app-frontend/src/pages/hosting/manage/Access.vue

@@ -5,7 +5,6 @@ import {
 	ServersManageAccessPage,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
-import { openUrl } from '@tauri-apps/plugin-opener'
 
 const client = injectModrinthClient()
 const { serverId } = injectModrinthServerContext()
@@ -29,7 +28,7 @@ try {
 }
 
 function userProfileLink(username: string) {
-	return () => openUrl(`https://modrinth.com/user/${encodeURIComponent(username)}`)
+	return `/user/${encodeURIComponent(username)}`
 }
 </script>
 

apps/app-frontend/src/pages/index.js

@@ -2,6 +2,7 @@ import Browse from './Browse.vue'
 import Index from './Index.vue'
 import Servers from './Servers.vue'
 import Skins from './Skins.vue'
+import User from './User.vue'
 import Worlds from './Worlds.vue'
 
-export { Browse, Index, Servers, Skins, Worlds }
+export { Browse, Index, Servers, Skins, User, Worlds }

apps/app-frontend/src/pages/instance/Mods.vue

@@ -198,6 +198,13 @@ const messages = defineMessages({
 
 let savedModalState: ModpackContentModalState | null = null
 
+function contentOwnerLink(owner: ContentOwner): NonNullable<ContentOwner['link']> {
+	if (owner.type === 'user') return `/user/${encodeURIComponent(owner.id)}`
+	return () => {
+		void openUrl(`https://modrinth.com/organization/${owner.id}`)
+	}
+}
+
 const { formatMessage } = useVIntl()
 const { handleError, addNotification } = injectNotificationManager()
 const { installingItems, installRevisionByInstance, installFailureRevisionByInstance } =
@@ -1390,10 +1397,7 @@ provideContentManager({
 				owner: linkedModpackOwner.value
 					? {
 							...linkedModpackOwner.value,
-							link: () =>
-								openUrl(
-									`https://modrinth.com/${linkedModpackOwner.value!.type}/${linkedModpackOwner.value!.id}`,
-								),
+							link: contentOwnerLink(linkedModpackOwner.value),
 						}
 					: undefined,
 				categories: linkedModpackCategories.value,
@@ -1491,7 +1495,7 @@ provideContentManager({
 		owner: item.owner
 			? {
 					...item.owner,
-					link: () => openUrl(`https://modrinth.com/${item.owner!.type}/${item.owner!.id}`),
+					link: contentOwnerLink(item.owner),
 				}
 			: undefined,
 		enabled: canMutateContent(item) ? item.enabled : undefined,

apps/app-frontend/src/pages/instance/share/index.vue

@@ -138,7 +138,6 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
-import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, ref, toRef, watch } from 'vue'
 
 import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
@@ -342,9 +341,7 @@ function removeMember(row: ShareRow) {
 	members.remove(row.id)
 }
 function userProfileLink(username: string) {
-	return !username || username.includes('@')
-		? undefined
-		: () => openUrl(`https://modrinth.com/user/${encodeURIComponent(username)}`)
+	return !username || username.includes('@') ? undefined : `/user/${encodeURIComponent(username)}`
 }
 async function requestAuth(flow: ModrinthAuthFlow) {
 	await auth.requestSignIn(`/instance/${encodeURIComponent(props.instance.id)}/share`, flow, {

apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue

@@ -157,7 +157,6 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, ref } from 'vue'
 
 import {
@@ -294,9 +293,7 @@ const messages = defineMessages({
 	},
 })
 function userProfileLink(username: string) {
-	return !username || username.includes('@')
-		? undefined
-		: () => openUrl(`https://modrinth.com/user/${encodeURIComponent(username)}`)
+	return !username || username.includes('@') ? undefined : `/user/${encodeURIComponent(username)}`
 }
 function setUsernameRef(id: string, element: Element | null) {
 	usernameRefs.value[id] = element instanceof HTMLElement ? element : null

apps/app-frontend/src/pages/project/Index.vue

@@ -31,8 +31,9 @@
 				:organization="organization"
 				:members="members"
 				:org-link="(slug) => `https://modrinth.com/organization/${slug}`"
-				:user-link="(username) => `https://modrinth.com/user/${username}`"
+				:user-link="(username) => `/user/${encodeURIComponent(username)}`"
 				link-target="_blank"
+				:user-link-target="null"
 				class="project-sidebar-section"
 			/>
 			<ProjectSidebarDetails