New project cards

apps/app-frontend/src/components/RowDisplay.vue

@@ -18,8 +18,8 @@ import { useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
+import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_by_profile_path } from '@/helpers/process.js'
 import { duplicate, kill, remove, run } from '@/helpers/profile.js'
@@ -270,7 +270,7 @@ onUnmounted(() => {
 				/>
 			</section>
 			<section v-else ref="modsRow" class="projects">
-				<ProjectCard
+				<LegacyProjectCard
 					v-for="project in row.instances.slice(0, maxProjectsPerRow)"
 					:key="project?.project_id"
 					ref="instanceComponents"

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

@@ -1,7 +1,7 @@
 <template>
-	<div
-		class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-		@click="
+	<ProjectCard
+		:title="project.title"
+		:link="
 			() => {
 				emit('open')
 				$router.push({
@@ -10,116 +10,58 @@
 				})
 			}
 		"
+		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
+		:icon-url="project.icon_url"
+		:summary="project.description"
+		:tags="project.display_categories"
+		:all-tags="project.categories"
+		:downloads="project.downloads"
+		:followers="project.follows"
+		:date-updated="project.date_modified"
+		:banner="project.featured_gallery ?? undefined"
+		:color="project.color ?? undefined"
+		:environment="
+			projectType
+				? ['mod', 'modpack'].includes(projectType)
+					? {
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}
+					: undefined
+				: undefined
+		"
+		layout="list"
 	>
-		<div class="icon w-[96px] h-[96px] relative">
-			<Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-		</div>
-		<div class="flex flex-col gap-2 overflow-hidden">
-			<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-				<span class="text-lg font-extrabold text-contrast m-0 leading-none">
-					{{ project.title }}
-				</span>
-				<span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-			</div>
-			<div class="m-0 line-clamp-2">
-				{{ project.description }}
-			</div>
-			<div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-				<TagsIcon class="h-4 w-4 shrink-0" />
-				<div
-					v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
+		<template #actions>
+			<ButtonStyled color="brand" type="outlined">
+				<button
+					:disabled="installed || installing"
+					class="shrink-0 no-wrap"
+					@click.stop="install()"
 				>
-					<template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-						Client or server
-					</template>
-					<template
-						v-else-if="
-							(project.client_side === 'optional' || project.client_side === 'required') &&
-							(project.server_side === 'optional' || project.server_side === 'unsupported')
-						"
-					>
-						Client
-					</template>
-					<template
-						v-else-if="
-							(project.server_side === 'optional' || project.server_side === 'required') &&
-							(project.client_side === 'optional' || project.client_side === 'unsupported')
-						"
-					>
-						Server
-					</template>
-					<template
-						v-else-if="
-							project.client_side === 'unsupported' && project.server_side === 'unsupported'
-						"
-					>
-						Unsupported
-					</template>
-					<template
-						v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-					>
-						Client and server
+					<template v-if="!installed">
+						<DownloadIcon v-if="modpack || instance" />
+						<PlusIcon v-else />
 					</template>
-				</div>
-				<div
-					v-for="tag in categories"
-					:key="tag"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					<FormattedTag :tag="tag.name" />
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-			<div class="flex items-center gap-2">
-				<DownloadIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.downloads) }}
-					<span class="text-secondary">downloads</span>
-				</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<HeartIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.follows ?? project.followers) }}
-					<span class="text-secondary">followers</span>
-				</span>
-			</div>
-			<div class="mt-auto relative">
-				<div class="absolute bottom-0 right-0 w-fit">
-					<ButtonStyled color="brand" type="outlined">
-						<button
-							:disabled="installed || installing"
-							class="shrink-0 no-wrap"
-							@click.stop="install()"
-						>
-							<template v-if="!installed">
-								<DownloadIcon v-if="modpack || instance" />
-								<PlusIcon v-else />
-							</template>
-							<CheckIcon v-else />
-							{{
-								installing
-									? 'Installing'
-									: installed
-										? 'Installed'
-										: modpack || instance
-											? 'Install'
-											: 'Add to an instance'
-							}}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</div>
+					<CheckIcon v-else />
+					{{
+						installing
+							? 'Installing'
+							: installed
+								? 'Installed'
+								: modpack || instance
+									? 'Install'
+									: 'Add to an instance'
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</ProjectCard>
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, FormattedTag, injectNotificationManager } from '@modrinth/ui'
-import { formatNumber } from '@modrinth/utils'
+import { CheckIcon, DownloadIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref } from 'vue'
@@ -141,10 +83,6 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
-	categories: {
-		type: Array,
-		required: true,
-	},
 	instance: {
 		type: Object,
 		default: null,
@@ -157,6 +95,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
 })
 
 const emit = defineEmits(['open', 'install'])

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

@@ -9,6 +9,7 @@ import {
 	injectNotificationManager,
 	LoadingIndicator,
 	Pagination,
+	ProjectCardList,
 	SearchFilterControl,
 	SearchSidebarFilter,
 	useSearch,
@@ -509,10 +510,12 @@ previousFilterState.value = JSON.stringify({
 			<section v-else-if="offline && results.total_hits === 0" class="offline">
 				You are currently offline. Connect to the internet to browse Modrinth!
 			</section>
-			<section v-else class="project-list display-mode--list instance-results" role="list">
+
+			<ProjectCardList v-else :layout="'list'">
 				<SearchCard
 					v-for="result in results.hits"
 					:key="result?.project_id"
+					:project-type="projectType"
 					:project="result"
 					:instance="instance"
 					:categories="[
@@ -538,7 +541,7 @@ previousFilterState.value = JSON.stringify({
 					<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
 					<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
 				</ContextMenu>
-			</section>
+			</ProjectCardList>
 			<div class="flex justify-end">
 				<pagination
 					:page="currentPage"

apps/frontend/nuxt.config.ts

@@ -180,7 +180,7 @@ export default defineNuxtConfig({
 			console.log('Tags generated!')
 
 			const robotsContent =
-				getDomain() === PROD_MODRINTH_URL
+				getDomain() === PROD_MODRINTH_URL && process.env.PREVIEW !== 'true'
 					? 'User-agent: *\nDisallow: /_internal/'
 					: 'User-agent: *\nDisallow: /'
 

apps/frontend/src/assets/styles/global.scss

@@ -467,14 +467,6 @@ kbd {
 @import '~/assets/styles/utils.scss';
 @import '~/assets/styles/components.scss';
 
-button:focus-visible,
-a:focus-visible,
-[tabindex='0']:focus-visible,
-[type='button']:focus-visible {
-	outline: 0.25rem solid #ea80ff;
-	border-radius: 0.25rem;
-}
-
 // OMORPHIA FIXES
 .card {
 	outline-offset: -2px;

apps/frontend/src/components/ui/Chips.vue

@@ -87,7 +87,7 @@ export default {
 		}
 
 		&:focus-visible {
-			outline: 0.25rem solid #ea80ff;
+			outline: 0.25rem solid var(--color-focus-ring);
 			border-radius: 0.25rem;
 		}
 	}