proj card fixes

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

@@ -285,9 +285,9 @@
 			]"
 		/>
 
-		<div
+		<ProjectCardList
 			v-if="projects && projects?.length > 0"
-			:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
+			:layout="cosmetics.searchDisplayMode.collection"
 		>
 			<ProjectCard
 				v-for="project in (route.params.projectType !== undefined
@@ -343,7 +343,7 @@
 					</button>
 				</template>
 			</ProjectCard>
-		</div>
+		</ProjectCardList>
 		<div v-else>
 			<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
 				<EmptyIllustration class="h-[120px] w-auto" />
@@ -402,6 +402,7 @@ import {
 	NormalPage,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
 	useRelativeTime,

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

@@ -186,50 +186,47 @@
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
 					<NavTabs :links="navLinks" />
 				</div>
-				<template v-if="projects && projects.length > 0">
-					<div class="project-list display-mode--list">
-						<ProjectCard
-							v-for="project in (route.params.projectType !== undefined
-								? (projects ?? []).filter((x) =>
-										x.project_types.includes(
-											typeof route.params.projectType === 'string'
-												? route.params.projectType.slice(0, route.params.projectType.length - 1)
-												: route.params.projectType[0]?.slice(
-														0,
-														route.params.projectType[0].length - 1,
-													) || '',
-										),
-									)
-								: (projects ?? [])
-							)
-								.slice()
-								.sort((a, b) => b.downloads - a.downloads)"
-							:key="project.id"
-							:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
-							:title="project.name"
-							:icon-url="project.icon_url"
-							:banner="project.gallery.find((element) => element.featured)?.url"
-							:summary="project.summary"
-							:date-updated="project.updated"
-							:downloads="project.downloads"
-							:followers="project.followers"
-							:tags="project.categories"
-							:environment="{
-								clientSide: project.client_side,
-								serverSide: project.server_side,
-							}"
-							:status="
-								auth.user &&
-								(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
-									? (project.status as ProjectStatus)
-									: undefined
-							"
-							:color="project.color"
-							layout="list"
-						/>
-					</div>
-				</template>
-
+				<ProjectCardList v-if="projects && projects.length > 0">
+					<ProjectCard
+						v-for="project in (route.params.projectType !== undefined
+							? (projects ?? []).filter((x) =>
+									x.project_types.includes(
+										typeof route.params.projectType === 'string'
+											? route.params.projectType.slice(0, route.params.projectType.length - 1)
+											: route.params.projectType[0]?.slice(
+													0,
+													route.params.projectType[0].length - 1,
+												) || '',
+									),
+								)
+							: (projects ?? [])
+						)
+							.slice()
+							.sort((a, b) => b.downloads - a.downloads)"
+						:key="project.id"
+						:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
+						:title="project.name"
+						:icon-url="project.icon_url"
+						:banner="project.gallery.find((element) => element.featured)?.url"
+						:summary="project.summary"
+						:date-updated="project.updated"
+						:downloads="project.downloads"
+						:followers="project.followers"
+						:tags="project.categories"
+						:environment="{
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}"
+						:status="
+							auth.user &&
+							(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
+								? (project.status as ProjectStatus)
+								: undefined
+						"
+						:color="project.color"
+						layout="list"
+					/>
+				</ProjectCardList>
 				<div v-else-if="true" class="error">
 					<UpToDate class="icon" />
 					<br />
@@ -267,6 +264,7 @@ import {
 	ContentPageHeader,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'

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

@@ -286,9 +286,9 @@
 					<NavTabs :links="navLinks" />
 				</div>
 				<div v-if="projects.length > 0">
-					<div
+					<ProjectCardList
 						v-if="route.params.projectType !== 'collections'"
-						:class="'project-list display-mode--' + cosmetics.searchDisplayMode.user"
+						:layout="cosmetics.searchDisplayMode.user"
 					>
 						<ProjectCard
 							v-for="project in (route.params.projectType !== undefined
@@ -315,6 +315,7 @@
 								...project.additional_categories,
 							]"
 							:followers="project.followers"
+							:banner="project.gallery.find((element) => element.featured)?.url"
 							:color="project.color ?? undefined"
 							:environment="{
 								clientSide: project.client_side,
@@ -328,7 +329,7 @@
 							"
 							:status="project.status"
 						/>
-					</div>
+					</ProjectCardList>
 				</div>
 				<div
 					v-else-if="
@@ -499,6 +500,7 @@ import {
 	NewModal,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	TagItem,
 	useRelativeTime,
 	useVIntl,