feat: ssr fixes + switch project page to tanstack (#5192)

* feat: ssr fixes

* feat: lazy load non-core data

* feat: ssr timing debugging

* feat: go back to all parallel

* feat: migrate to DI + set up mutators

* feat: remove double get versions request, only call v3

* refactor: [version].vue page to use composition API and typescript

* feat: gallery.vue start

* fix: remove left behind console log

* fix: type issues + gallery

* fix: versionsummary modal + version page direct join

* fix: projectRaw guard

* fix: currentMember val fix

* fix: actualProjectType

* fix: vers summary link same page

* fix: lint

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

packages/api-client/src/modules/labrinth/projects/v2.ts

@@ -114,4 +114,25 @@ export class LabrinthProjectsV2Module extends AbstractModule {
 			method: 'DELETE',
 		})
 	}
+
+	/**
+	 * Get dependencies for a project
+	 *
+	 * @param id - Project ID or slug
+	 * @returns Promise resolving to dependency info (projects and versions)
+	 *
+	 * @example
+	 * ```typescript
+	 * const deps = await client.labrinth.projects_v2.getDependencies('sodium')
+	 * console.log(deps.projects) // dependent projects
+	 * console.log(deps.versions) // dependent versions
+	 * ```
+	 */
+	public async getDependencies(id: string): Promise<Labrinth.Projects.v2.DependencyInfo> {
+		return this.client.request<Labrinth.Projects.v2.DependencyInfo>(`/project/${id}/dependencies`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'GET',
+		})
+	}
 }

packages/api-client/src/modules/labrinth/types.ts

@@ -194,6 +194,7 @@ export namespace Labrinth {
 				slug: string
 				project_type: ProjectType
 				team: string
+				organization: string | null
 				title: string
 				description: string
 				body: string
@@ -271,6 +272,11 @@ export namespace Labrinth {
 				offset?: number
 				limit?: number
 			}
+
+			export interface DependencyInfo {
+				projects: Project[]
+				versions: Labrinth.Versions.v2.Version[]
+			}
 		}
 
 		export namespace v3 {
@@ -371,8 +377,8 @@ export namespace Labrinth {
 				team_id: string
 				description: string
 				icon_url: string | null
-				color: number
-				members: OrganizationMember[]
+				color: number | null
+				members: TeamMember[]
 			}
 
 			export type OrganizationMember = {
@@ -391,11 +397,12 @@ export namespace Labrinth {
 				team_id: string
 				user: Users.v3.User
 				role: string
-				permissions: number
-				accepted: boolean
-				payouts_split: number
-				ordering: number
 				is_owner: boolean
+				permissions: number | null
+				organization_permissions: number | null
+				accepted: boolean
+				payouts_split: number | null
+				ordering: number
 			}
 		}
 	}
@@ -416,8 +423,13 @@ export namespace Labrinth {
 
 			export type FileType = 'required-resource-pack' | 'optional-resource-pack' | 'unknown'
 
+			export type VersionFileHash = {
+				sha512: string
+				sha1: string
+			}
+
 			export type VersionFile = {
-				hashes: Record<string, string>
+				hashes: VersionFileHash
 				url: string
 				filename: string
 				primary: boolean
@@ -471,6 +483,8 @@ export namespace Labrinth {
 			export interface GetProjectVersionsParams {
 				game_versions?: string[]
 				loaders?: string[]
+				include_changelog?: boolean
+				apiVersion?: 2 | 3
 			}
 
 			export type VersionChannel = 'release' | 'beta' | 'alpha'

packages/api-client/src/modules/labrinth/versions/v3.ts

@@ -28,17 +28,20 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		id: string,
 		options?: Labrinth.Versions.v3.GetProjectVersionsParams,
 	): Promise<Labrinth.Versions.v3.Version[]> {
-		const params: Record<string, string> = {}
+		const params: Record<string, string | boolean> = {}
 		if (options?.game_versions?.length) {
 			params.game_versions = JSON.stringify(options.game_versions)
 		}
 		if (options?.loaders?.length) {
 			params.loaders = JSON.stringify(options.loaders)
 		}
+		if (options?.include_changelog !== undefined) {
+			params.include_changelog = options.include_changelog
+		}
 
 		return this.client.request<Labrinth.Versions.v3.Version[]>(`/project/${id}/version`, {
 			api: 'labrinth',
-			version: 2, // TODO: move this to a versions v2 module to keep api-client clean and organized
+			version: options?.apiVersion ?? 2,
 			method: 'GET',
 			params: Object.keys(params).length > 0 ? params : undefined,
 		})

packages/moderation/src/data/nags/core.ts

@@ -200,7 +200,7 @@ export const coreNags: Nag[] = [
 				context.project.source_url ||
 				context.project.wiki_url ||
 				context.project.discord_url ||
-				context.project.donation_urls.length > 0
+				context.project.donation_urls?.length
 			),
 		link: {
 			path: 'settings/links',

packages/moderation/src/types/nags.ts

@@ -1,6 +1,5 @@
 import type { Labrinth } from '@modrinth/api-client'
 import type { MessageDescriptor } from '@modrinth/ui'
-import type { User, Version } from '@modrinth/utils'
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
 /**
@@ -25,11 +24,11 @@ export interface NagContext {
 	/**
 	 * The versions associated with the project.
 	 */
-	versions: Version[]
+	versions: Labrinth.Versions.v2.Version[]
 	/**
 	 * The current project member viewing the nag.
 	 */
-	currentMember: User
+	currentMember: Labrinth.Users.v2.User
 	/**
 	 * The current route in the application.
 	 */

packages/ui/src/components/version/VersionSummary.vue

@@ -17,14 +17,15 @@
 			</a>
 		</ButtonStyled>
 		<ButtonStyled circular>
-			<nuxt-link
-				:to="`/project/${props.version.project_id}/version/${props.version.id}`"
+			<button
 				class="min-w-0"
-				aria-label="Open project page"
-				@click="emit('onNavigate')"
+				aria-label="View version"
+				@click="
+					emit('onNavigate', `/project/${props.version.project_id}/version/${props.version.id}`)
+				"
 			>
 				<ExternalIcon aria-hidden="true" />
-			</nuxt-link>
+			</button>
 		</ButtonStyled>
 	</div>
 </template>
@@ -45,5 +46,8 @@ const downloadUrl = computed(() => {
 	return primary.url
 })
 
-const emit = defineEmits(['onDownload', 'onNavigate'])
+const emit = defineEmits<{
+	onDownload: []
+	onNavigate: [url: string]
+}>()
 </script>

packages/ui/src/providers/project-page.ts

@@ -1,16 +1,36 @@
 import type { Labrinth } from '@modrinth/api-client/src/modules/types'
-// TODO: api client this shit
-import type { TeamMember } from '@modrinth/utils'
 import type { Ref } from 'vue'
 
 import { createContext } from '.'
 
 export interface ProjectPageContext {
+	// Data refs
 	projectV2: Ref<Labrinth.Projects.v2.Project>
 	projectV3: Ref<Labrinth.Projects.v3.Project>
+	currentMember: Ref<Labrinth.Projects.v3.TeamMember | null>
+	allMembers: Ref<Labrinth.Projects.v3.TeamMember[]>
+	organization: Ref<Labrinth.Projects.v3.Organization | null>
+	// Lazy version loading (client-side only)
+	versions: Ref<Labrinth.Versions.v2.Version[] | null>
+	versionsLoading: Ref<boolean>
+	// Lazy dependencies loading (client-side only)
+	dependencies: Ref<Labrinth.Projects.v2.DependencyInfo | null>
+	dependenciesLoading: Ref<boolean>
+
+	// Refresh functions (invalidate + refetch)
 	refreshProject: () => Promise<void>
 	refreshVersions: () => Promise<void>
-	currentMember: Ref<TeamMember>
+	refreshMembers: () => Promise<void>
+	refreshOrganization: () => Promise<void>
+
+	// Lazy loading
+	loadVersions: () => Promise<void>
+	loadDependencies: () => Promise<void>
+
+	// Mutation functions
+	patchProject: (data: Record<string, unknown>, quiet?: boolean) => Promise<boolean>
+	patchIcon: (icon: File) => Promise<boolean>
+	setProcessing: () => Promise<void>
 }
 
 export const [injectProjectPageContext, provideProjectPageContext] =