bunch more fixes lol

apps/frontend/src/pages/[type]/[project]/settings/permissions.vue

@@ -433,7 +433,7 @@ function dismissInfoBanner() {
 				</nuxt-link>
 			</template>
 		</IntlFormatted>
-		<template #actions>
+		<template v-if="false" #actions>
 			<div class="flex">
 				<ButtonStyled color="blue">
 					<a> {{ formatMessage(messages.learnMore) }} <RightArrowIcon /> </a>

apps/frontend/src/pages/[type]/[project]/version/[version].vue

@@ -82,6 +82,7 @@
 				<VersionPage
 					:version="version"
 					:enrichment="enrichment"
+					:enrichment-loading="dependenciesLoading"
 					:members="members"
 					:user-link-creator="(user) => (moderator ? `/user/${user.id}` : undefined)"
 					:dependency-link-creator="createDependencyLink"
@@ -400,7 +401,7 @@
 				</pre
 				>
 			</template>
-			<template v-else>
+			<template v-else-if="showVersionSkeleton">
 				<div class="flex flex-col gap-4 pb-[30rem]">
 					<div
 						class="mt-4 flex h-[8rem] w-full animate-pulse items-center justify-center rounded-2xl bg-surface-3"
@@ -466,10 +467,12 @@ import {
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { onServerPrefetch } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import { getSignInRouteObj } from '~/composables/auth.js'
-import { STALE_TIME } from '~/composables/queries/project'
+import { projectQueryOptions, STALE_TIME } from '~/composables/queries/project'
+import { versionQueryOptions } from '~/composables/queries/version'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
@@ -499,6 +502,7 @@ const {
 	versionsLoading,
 	loadVersions,
 	dependencies: contextDependencies,
+	dependenciesLoading,
 	loadDependencies,
 	invalidate,
 	cdnDownloadReason,
@@ -522,26 +526,31 @@ const signInRouteObj = computed(() => getSignInRouteObj(route))
 const versionRouteParam = computed(() => route.params.version as string)
 const isLatestRoute = computed(() => versionRouteParam.value === 'latest')
 
+function filterVersionsForLatestRoute(allVersions: Labrinth.Versions.v3.Version[]) {
+	let filtered = allVersions
+
+	const loaderFilter = route.query.loader
+	if (typeof loaderFilter === 'string') {
+		filtered = filtered.filter((x) => x.loaders.includes(loaderFilter))
+	}
+
+	const gameVersionFilter = route.query.version
+	if (typeof gameVersionFilter === 'string') {
+		filtered = filtered.filter((x) => x.game_versions.includes(gameVersionFilter))
+	}
+
+	return filtered
+}
+
 const latestVersionId = computed(() => {
 	if (!isLatestRoute.value) {
 		return null
 	}
 
-	let allVersions = versions.value ?? []
+	const filtered = filterVersionsForLatestRoute(versions.value ?? [])
+	if (filtered.length === 0) return null
 
-	const loaderFilter = route.query.loader
-	if (typeof loaderFilter === 'string') {
-		allVersions = allVersions.filter((x) => x.loaders.includes(loaderFilter))
-	}
-
-	const gameVersionFilter = route.query.version
-	if (typeof gameVersionFilter === 'string') {
-		allVersions = allVersions.filter((x) => x.game_versions.includes(gameVersionFilter))
-	}
-
-	if (allVersions.length === 0) return null
-
-	return allVersions.reduce((a, b) => (a.date_published > b.date_published ? a : b)).id
+	return filtered.reduce((a, b) => (a.date_published > b.date_published ? a : b)).id
 })
 
 const versionLookupKey = computed(() =>
@@ -552,6 +561,7 @@ const {
 	data: version,
 	refetch: refetchVersion,
 	error: versionError,
+	isPending: versionPending,
 } = useQuery({
 	queryKey: computed(
 		() => ['project', project.value.id, 'version', 'v3', versionLookupKey.value] as const,
@@ -562,6 +572,30 @@ const {
 	staleTime: STALE_TIME,
 })
 
+const showVersionSkeleton = computed(() => import.meta.client && versionPending.value)
+
+onServerPrefetch(async () => {
+	if (!project.value.id) return
+
+	let lookupKey = versionRouteParam.value
+
+	if (isLatestRoute.value) {
+		loadVersions()
+		const versionsData = await queryClient.ensureQueryData(
+			projectQueryOptions.versionsV3(project.value.id, client),
+		)
+		const filtered = filterVersionsForLatestRoute(versionsData ?? [])
+		if (filtered.length === 0) return
+		lookupKey = filtered.reduce((a, b) => (a.date_published > b.date_published ? a : b)).id
+	}
+
+	if (!lookupKey || lookupKey === 'latest') return
+
+	await queryClient.ensureQueryData(
+		versionQueryOptions.fromProject(project.value.id, lookupKey, client),
+	)
+})
+
 watch(
 	versionError,
 	(error) => {

apps/frontend/src/pages/collection/[collection].vue

@@ -18,6 +18,7 @@
 					<div class="group relative float-end ml-4">
 						<OverflowMenu
 							v-tooltip="formatMessage(messages.editIconButton)"
+							:dropdown-id="`${baseId}-edit-icon`"
 							class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
 							:options="[
 								{
@@ -138,7 +139,7 @@
 		</NewModal>
 		<NormalPage :sidebar="cosmetics.leftContentLayout ? 'left' : 'right'">
 			<template #header>
-				<div class="flex flex-col gap-6">
+				<div class="flex flex-col gap-4">
 					<ClientOnly>
 						<nuxt-link
 							v-if="returnLink"
@@ -201,19 +202,32 @@
 								</span>
 							</div>
 						</div>
-						<div class="col-span-2 flex gap-2 sm:col-span-1">
+						<div class="col-span-2 flex items-center gap-2 sm:col-span-1">
 							<template v-if="canEdit">
-								<ButtonStyled>
+								<ButtonStyled size="large">
 									<button @click="openEditModal">
 										<EditIcon aria-hidden="true" />
 										{{ formatMessage(commonMessages.editButton) }}
 									</button>
 								</ButtonStyled>
-								<ButtonStyled color="red" color-fill="text">
-									<button @click="() => $refs.deleteModal.show()">
-										<TrashIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.deleteLabel) }}
-									</button>
+								<ButtonStyled size="large" circular type="transparent">
+									<OverflowMenu
+										:dropdown-id="`${baseId}-more-options`"
+										:options="[
+											{
+												id: 'delete',
+												color: 'red',
+												action: () => deleteModal?.show(),
+											},
+										]"
+										:aria-label="formatMessage(commonMessages.moreOptionsButton)"
+									>
+										<MoreVerticalIcon aria-hidden="true" />
+										<template #delete>
+											<TrashIcon aria-hidden="true" />
+											{{ formatMessage(commonMessages.deleteLabel) }}
+										</template>
+									</OverflowMenu>
 								</ButtonStyled>
 							</template>
 						</div>
@@ -226,7 +240,12 @@
 					v-if="collection.description"
 					:title="formatMessage(commonMessages.descriptionLabel)"
 				>
-					<p class="m-0 break-words">{{ collection.description }}</p>
+					<div
+						v-if="supportsMarkdown"
+						class="description-body"
+						v-html="renderString(collection.description)"
+					/>
+					<p v-else class="m-0 break-words">{{ collection.description }}</p>
 				</SidebarCard>
 				<SidebarCard
 					v-if="collection.id !== 'following'"
@@ -238,9 +257,7 @@
 					>
 						<Avatar :src="creator.avatar_url" :alt="creator.username" size="32px" circle />
 						<div class="flex flex-col">
-							<span
-								class="grid w-full grid-cols-[1fr_auto] flex-nowrap items-center gap-1 group-hover:underline"
-							>
+							<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
 								<span class="min-w-0 overflow-hidden truncate">{{ creator.username }}</span>
 							</span>
 						</div>
@@ -373,6 +390,7 @@ import {
 	HeartMinusIcon,
 	LinkIcon,
 	LockIcon,
+	MoreVerticalIcon,
 	SaveIcon,
 	SpinnerIcon,
 	TrashIcon,
@@ -411,9 +429,10 @@ import {
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
-import { isAdmin } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { isAdmin, renderString } from '@modrinth/utils'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
+import { onServerPrefetch } from 'vue'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 
@@ -431,6 +450,32 @@ const route = useNativeRoute()
 const router = useRouter()
 const auth = await useAuth()
 const cosmetics = useCosmetics()
+const queryClient = useQueryClient()
+const baseId = useId()
+
+async function fetchProjectsByIds(projectIds) {
+	const segmentSize = 800
+	const segments = []
+	for (let i = 0; i < projectIds.length; i += segmentSize) {
+		segments.push(projectIds.slice(i, i + segmentSize))
+	}
+	const results = await Promise.all(
+		segments.map((ids) => api.labrinth.projects_v2.getMultiple(ids)),
+	)
+	const projects = results.flat()
+	for (const project of projects) {
+		project.categories = project.categories.concat(project.loaders)
+	}
+	return projects
+}
+
+async function fetchFollowedProjects(userId) {
+	const projects = await api.labrinth.users_v2.getFollowedProjects(userId)
+	for (const project of projects) {
+		project.categories = project.categories.concat(project.loaders)
+	}
+	return projects
+}
 
 const messages = defineMessages({
 	collectionDescription: {
@@ -595,6 +640,8 @@ const creator = computed(() =>
 	isFollowingCollection.value ? auth.value.user : fetchedCreator.value,
 )
 
+const supportsMarkdown = computed(() => creator.value?.id === '2REoufqX')
+
 // Query for followed projects
 const {
 	data: followedProjects,
@@ -602,13 +649,7 @@ const {
 	isFetching: followedProjectsIsFetching,
 } = useQuery({
 	queryKey: computed(() => ['user', auth.value.user?.id, 'follows']),
-	queryFn: async () => {
-		const projects = await api.labrinth.users_v2.getFollowedProjects(auth.value.user.id)
-		for (const project of projects) {
-			project.categories = project.categories.concat(project.loaders)
-		}
-		return projects
-	},
+	queryFn: async () => fetchFollowedProjects(auth.value.user.id),
 	enabled: computed(() => isFollowingCollection.value && !!auth.value.user?.id),
 	placeholderData: [],
 })
@@ -620,22 +661,7 @@ const {
 	isFetching: collectionProjectsIsFetching,
 } = useQuery({
 	queryKey: computed(() => ['projects', collection.value?.projects]),
-	queryFn: async () => {
-		const projectIds = collection.value.projects
-		const segmentSize = 800
-		const segments = []
-		for (let i = 0; i < projectIds.length; i += segmentSize) {
-			segments.push(projectIds.slice(i, i + segmentSize))
-		}
-		const results = await Promise.all(
-			segments.map((ids) => api.labrinth.projects_v2.getMultiple(ids)),
-		)
-		const projects = results.flat()
-		for (const project of projects) {
-			project.categories = project.categories.concat(project.loaders)
-		}
-		return projects
-	},
+	queryFn: () => fetchProjectsByIds(collection.value.projects),
 	enabled: computed(() => !isFollowingCollection.value && !!collection.value?.projects?.length),
 	placeholderData: [],
 })
@@ -647,12 +673,48 @@ const projects = computed(() =>
 
 // Loading state
 const isLoading = computed(() => {
+	if (!import.meta.client) return false
+
 	if (isFollowingCollection.value) {
 		return followedProjectsIsFetching.value
 	}
 	return collectionIsPending.value || creatorIsPending.value || collectionProjectsIsFetching.value
 })
 
+onServerPrefetch(async () => {
+	if (isFollowingCollection.value) {
+		const userId = auth.value.user?.id
+		if (!userId) return
+
+		await queryClient.ensureQueryData({
+			queryKey: ['user', userId, 'follows'],
+			queryFn: () => fetchFollowedProjects(userId),
+		})
+		return
+	}
+
+	if (!collectionId) return
+
+	const collectionData = await queryClient.ensureQueryData({
+		queryKey: ['collection', collectionId],
+		queryFn: () => api.labrinth.collections.get(collectionId),
+	})
+
+	if (collectionData?.user) {
+		await queryClient.ensureQueryData({
+			queryKey: ['user', collectionData.user],
+			queryFn: () => api.labrinth.users_v2.get(collectionData.user),
+		})
+	}
+
+	if (collectionData?.projects?.length) {
+		await queryClient.ensureQueryData({
+			queryKey: ['projects', collectionData.projects],
+			queryFn: () => fetchProjectsByIds(collectionData.projects),
+		})
+	}
+})
+
 watch(
 	[collection, creator],
 	([col, cre]) => {
@@ -716,6 +778,7 @@ const showUpdatedDate = computed(() => {
 })
 
 const editModal = ref(null)
+const deleteModal = ref(null)
 const iconInputRef = ref(null)
 const icon = ref(null)
 const deletedIcon = ref(false)
@@ -881,4 +944,15 @@ function openEditModal(event) {
 	// Omorphia's dropdowns are harcoded in width, so we need to override that
 	width: 100% !important;
 }
+
+:deep(.description-body) {
+	p {
+		margin: 0;
+	}
+
+	a {
+		color: var(--color-brand);
+		font-weight: 600;
+	}
+}
 </style>

apps/frontend/src/pages/organization/[organization].vue

@@ -146,9 +146,8 @@
 			<div class="normal-page__sidebar">
 				<AdPlaceholder v-if="!auth.user" />
 
-				<div class="card flex-card">
-					<h2>Members</h2>
-					<div class="details-list">
+				<SidebarCard title="Members">
+					<div class="flex flex-col gap-3 font-semibold">
 						<nuxt-link
 							v-for="member in acceptedMembers"
 							:key="`member-${member?.user?.id}`"
@@ -163,22 +162,20 @@
 							/>
 							<div class="flex flex-col">
 								<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
-									<span class="min-w-0 overflow-hidden truncate font-normal text-contrast">{{
-										member.user.username
-									}}</span>
+									<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
 									<CrownIcon
 										v-if="member.is_owner"
 										v-tooltip="'Organization owner'"
 										class="text-brand-orange"
 									/>
 								</span>
-								<span class="text-sm font-normal">
+								<span class="text-sm font-normal text-secondary">
 									{{ member?.role ? member.role : 'Member' }}
 								</span>
 							</div>
 						</nuxt-link>
 					</div>
-				</div>
+				</SidebarCard>
 			</div>
 			<div class="normal-page__content">
 				<div v-if="isInvited" class="universal-card information invited">
@@ -317,6 +314,7 @@ import {
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
+	SidebarCard,
 	useCompactNumber,
 	useFormatNumber,
 	useVIntl,
@@ -774,4 +772,8 @@ async function copyPermalink() {
 .popout-checkbox {
 	padding: var(--gap-sm) var(--gap-md);
 }
+
+.new-page {
+	column-gap: 1.5rem;
+}
 </style>

apps/frontend/src/pages/user/[user].vue

@@ -477,7 +477,7 @@
 					v-if="organizations?.length > 0"
 					class="mb-4 rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4 pt-3"
 				>
-					<h2 class="m-0 mb-2 text-lg text-contrast">
+					<h2 class="m-0 mb-2 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.profileOrganizations) }}
 					</h2>
 					<div class="flex flex-wrap gap-2">
@@ -1040,4 +1040,8 @@ export default defineNuxtComponent({
 		}
 	}
 }
+
+.new-page {
+	column-gap: 1.5rem;
+}
 </style>

packages/ui/src/components/page/NormalPage.vue

@@ -36,7 +36,7 @@ const { hierarchicalSidebarAvailable } = injectPageContext()
 </template>
 <style scoped>
 .ui-normal-page {
-	@apply grid gap-6 mx-auto py-4;
+	@apply grid gap-x-6 gap-y-4 mx-auto py-4;
 	width: min(calc(100% - 2rem), calc(80rem - 3rem));
 
 	grid-template:

packages/ui/src/components/page/SidebarCard.vue

@@ -9,12 +9,13 @@ defineProps<{
 </script>
 <template>
 	<div
-		class="flex flex-col gap-3 p-4"
+		class="flex flex-col gap-3 p-4 pt-3"
 		:class="{
-			'card-shadow mb-4 last:mb-0 rounded-2xl bg-bg-raised': !hierarchicalSidebarAvailable,
+			'card-shadow mb-4 last:mb-0 rounded-2xl bg-surface-3 border border-solid border-surface-4':
+				!hierarchicalSidebarAvailable,
 		}"
 	>
-		<span class="font-semibold">{{ title }}</span>
+		<h2 class="text-lg font-semibold m-0">{{ title }}</h2>
 		<slot />
 	</div>
 </template>

packages/ui/src/components/project/ProjectSidebarCreators.vue

@@ -10,10 +10,10 @@
 				>
 					<Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
 					<div class="flex flex-col flex-nowrap justify-center">
-						<span class="group-hover:underline font-normal text-contrast">
+						<span class="group-hover:underline font-medium">
 							{{ organization.name }}
 						</span>
-						<span class="text-sm font-normal flex items-center gap-1"
+						<span class="text-sm font-normal text-secondary flex items-center gap-1"
 							><OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
 						>
 					</div>
@@ -30,9 +30,7 @@
 				<Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
 				<div class="flex flex-col">
 					<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
-						<span class="min-w-0 overflow-hidden font-normal text-contrast truncate">{{
-							member.user.username
-						}}</span>
+						<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
 						<CrownIcon
 							v-if="member.is_owner"
 							v-tooltip="formatMessage(messages.owner)"
@@ -40,7 +38,7 @@
 						/>
 						<ExternalIcon v-if="linkTarget === '_blank'" />
 					</span>
-					<span class="text-sm font-normal">{{ member.role }}</span>
+					<span class="text-sm font-normal text-secondary">{{ member.role }}</span>
 				</div>
 			</AutoLink>
 		</div>

packages/ui/src/components/user/UserBadges.vue

@@ -483,7 +483,7 @@ const earnedBadges = computed(() => {
 
 <template>
 	<div v-if="earnedBadges.length > 0 || !!downloadsBadge" class="flex flex-col">
-		<h2 class="text-lg text-contrast m-0 mb-2">
+		<h2 class="text-lg font-semibold text-contrast m-0 mb-2">
 			{{ formatMessage(messages.title) }}
 		</h2>
 		<div class="grid grid-cols-[repeat(auto-fill,minmax(64px,1fr))] gap-2">

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { DownloadIcon, FileIcon, SearchIcon } from '@modrinth/assets'
-import { capitalizeString, renderHighlightedString } from '@modrinth/utils'
+import { DownloadIcon, ExternalIcon, FileIcon, SearchIcon } from '@modrinth/assets'
+import {
+	capitalizeString,
+	formatVersionsForDisplay,
+	type GameVersionTag,
+	renderHighlightedString,
+} from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -11,6 +16,7 @@ import { useCompactNumber, useFormatNumber } from '#ui/composables/format-number
 import { useRelativeTime } from '#ui/composables/how-ago.ts'
 import { defineMessage, defineMessages, useVIntl } from '#ui/composables/i18n.ts'
 import { injectModrinthClient } from '#ui/providers/api-client.ts'
+import { injectTags } from '#ui/providers/tags.ts'
 import {
 	commonMessages,
 	fileTypeMessages,
@@ -41,12 +47,23 @@ const { formatCompactNumber } = useCompactNumber()
 const props = defineProps<{
 	version: Labrinth.Versions.v3.Version
 	enrichment?: Labrinth.Projects.v2.DependencyInfo
+	enrichmentLoading?: boolean
 	dependencyLinkCreator: (context: DependencyContext) => string | undefined
 	members?: Labrinth.Projects.v3.TeamMember[]
 	userLinkCreator?: (user: Labrinth.Users.v3.User) => string | undefined
 }>()
 
 const api = injectModrinthClient()
+const tags = injectTags(null)
+
+const gameVersionsToDisplay = computed(() =>
+	tags?.gameVersions.value?.length
+		? formatVersionsForDisplay(
+				props.version.game_versions,
+				tags.gameVersions.value as GameVersionTag[],
+			)
+		: props.version.game_versions,
+)
 
 const versionNumber = computed(() => props.version.version_number)
 const versionSubtitle = computed(() => props.version.name)
@@ -101,22 +118,82 @@ const optionalContent = computed(() =>
 const incompatibleContent = computed(() =>
 	dependencies.value.filter((dep) => dep.dependency.dependency_type === 'incompatible'),
 )
-const includedContent = computed(() =>
-	dependencies.value
-		.filter((context) => context.dependency.dependency_type === 'embedded')
-		.map((context) => ({
-			icon_url: context.project
-				? context.project.icon_url
-				: context.dependency.attribution?.icon_url,
-			name: context.project ? context.project.title : context.dependency.file_name,
-			version: context.version ? context.version.version_number : undefined,
-			link: context.project
-				? props.dependencyLinkCreator(context)
-				: context.dependency.attribution?.link,
-			hasProject: !!context.project,
-		})),
+const embeddedDependencies = computed(() =>
+	dependencies.value.filter((context) => context.dependency.dependency_type === 'embedded'),
 )
 
+const includedContentLoading = computed(
+	() =>
+		!!props.enrichmentLoading &&
+		embeddedDependencies.value.some((context) => context.dependency.project_id && !context.project),
+)
+
+function getEmbeddedDependencyId(context: DependencyContext) {
+	return (
+		context.dependency.project_id ??
+		context.dependency.file_name ??
+		context.dependency.version_id ??
+		'included'
+	)
+}
+
+type IncludedContentLoadingRow = { loading: true; id: string }
+type IncludedContentRow = {
+	id: string
+	icon_url?: string
+	name?: string
+	version?: string
+	link?: string
+	hasProject: boolean
+}
+
+function isIncludedContentLoadingRow(
+	row: IncludedContentLoadingRow | IncludedContentRow,
+): row is IncludedContentLoadingRow {
+	return 'loading' in row
+}
+
+const includedContent = computed((): (IncludedContentLoadingRow | IncludedContentRow)[] => {
+	if (includedContentLoading.value) {
+		return embeddedDependencies.value.map((context) => ({
+			loading: true as const,
+			id: getEmbeddedDependencyId(context),
+		}))
+	}
+
+	return embeddedDependencies.value
+		.map((context) => {
+			const resolution = context.dependency.attribution?.resolution
+			return {
+				id: getEmbeddedDependencyId(context),
+				icon_url: context.project
+					? context.project.icon_url
+					: context.dependency.attribution?.flame_project?.icon_url,
+				name: context.project ? context.project.title : context.dependency.file_name,
+				version: context.version ? context.version.version_number : undefined,
+				link: context.project
+					? props.dependencyLinkCreator(context)
+					: resolution && 'link_to_work' in resolution
+						? resolution.link_to_work
+						: undefined,
+				hasProject: !!context.project,
+			}
+		})
+		.sort((a, b) => {
+			const priority = (row: typeof a) => {
+				if (row.hasProject) return 0
+				if (row.link) return 1
+				return 2
+			}
+			const priorityDiff = priority(a) - priority(b)
+			if (priorityDiff !== 0) {
+				return priorityDiff
+			}
+			const sortName = (name: string | undefined) => (name ?? '').replace(/[^a-zA-Z0-9]/g, '')
+			return sortName(a.name).localeCompare(sortName(b.name))
+		})
+})
+
 const contentTableColumns = computed(() => {
 	const cols = [
 		{
@@ -128,7 +205,11 @@ const contentTableColumns = computed(() => {
 			label: formatMessage(defineMessage({ id: 'version.content.name', defaultMessage: 'Name' })),
 		},
 	]
-	if (includedContent.value.some((x) => x.version)) {
+	if (
+		includedContentLoading.value
+			? embeddedDependencies.value.some((context) => context.dependency.version_id)
+			: includedContent.value.some((row) => 'version' in row && row.version)
+	) {
 		cols.push({
 			key: 'version',
 			label: formatMessage(
@@ -318,7 +399,7 @@ const authorLink = computed(() =>
 					{{ formatMessage(projectCompatibilityMessages.minecraftJava) }}
 					<div class="flex gap-1 flex-wrap mt-2">
 						<TagItem
-							v-for="gameVersion in version.game_versions"
+							v-for="gameVersion in gameVersionsToDisplay"
 							:key="`version-compat-game-version-${gameVersion}`"
 							>{{ gameVersion }}</TagItem
 						>
@@ -414,7 +495,7 @@ const authorLink = computed(() =>
 				/>
 			</div>
 		</section>
-		<section v-if="includedContent?.length > 0" id="content">
+		<section v-if="embeddedDependencies.length > 0" id="content">
 			<h3 class="mt-0 mb-2 text-lg font-semibold">
 				{{
 					formatMessage(
@@ -422,36 +503,60 @@ const authorLink = computed(() =>
 					)
 				}}
 			</h3>
-			<Table :columns="contentTableColumns" :data="includedContent">
+			<Table :columns="contentTableColumns" :data="includedContent" row-key="id">
 				<template #header-actions>
 					<StyledInput
 						v-model="contentSearchQuery"
 						:icon="SearchIcon"
 						:placeholder="formatMessage(messages.searchContent)"
+						:disabled="includedContentLoading"
 						clearable
 						wrapper-class="w-full sm:w-64"
 					/>
 				</template>
 				<template #cell-icon="{ row }">
-					<AutoLink :to="row.link" tabindex="-1" class="flex" target="_blank">
-						<Avatar v-if="row.icon_url" :src="row.icon_url" alt="" size="2rem" />
+					<div
+						v-if="isIncludedContentLoadingRow(row)"
+						class="size-[2rem] shrink-0 rounded-[16%] bg-surface-3 animate-pulse"
+					/>
+					<AutoLink v-else :to="row.link" tabindex="-1" class="flex" target="_blank">
+						<Avatar v-if="row.hasProject || row.icon_url" :src="row.icon_url" alt="" size="2rem" />
 						<div v-else class="size-[2rem] flex items-center justify-center">
 							<FileIcon class="size-5 text-secondary" />
 						</div>
 					</AutoLink>
 				</template>
 				<template #cell-name="{ row }">
+					<div
+						v-if="isIncludedContentLoadingRow(row)"
+						class="h-4 max-w-[12rem] rounded-lg bg-surface-3 animate-pulse"
+					/>
 					<AutoLink
+						v-else
 						:to="row.link"
 						class="flex w-fit"
 						link-class="hover:underline hover:text-contrast"
 						target="_blank"
 					>
 						{{ row.name }}
+						<ExternalIcon v-if="row.link?.startsWith('http')" class="shrink-0 ml-2" />
 					</AutoLink>
 				</template>
 				<template #cell-version="{ row }">
-					{{ (row.version ?? row.hasProject) ? formatMessage(commonMessages.unknownLabel) : '—' }}
+					<div
+						v-if="isIncludedContentLoadingRow(row)"
+						class="h-4 w-16 rounded-lg bg-surface-3 animate-pulse"
+					/>
+					<AutoLink
+						v-else
+						:to="row.version ? row.link : undefined"
+						class="flex w-fit"
+						tabindex="-1"
+						link-class="hover:underline hover:text-contrast"
+						target="_blank"
+					>
+						{{ row.version ?? '—' }}
+					</AutoLink>
 				</template>
 			</Table>
 		</section>