New project cards (#5298)

* New project card

* no shadow on icons

* Remove updated label

* reduce tag count to 5

* improve envs

* fix: project card bottom row not growing

* move actions in grid mode

* focus changes + new project list component

* Allow more tags in grid mode, deprioritize non-loader tags

* fix prod deploy robots.txt

* remove unused id

* App cards

* prepr

* publish date + fix router links

* fix author hover underline in firefox

* perf: preload on search item hover

* remove unused filter

* remove option for old grid view

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

apps/frontend/src/pages/index.vue

@@ -125,24 +125,25 @@
 							<div class="results display-mode--list">
 								<ProjectCard
 									v-for="result in searchProjects"
-									:id="result.slug ? result.slug : result.project_id"
 									:key="result.project_id"
-									class="small-mode gradient-border"
-									:type="result.project_type"
-									:author="result.author"
-									:name="result.title"
-									:description="result.description"
-									:created-at="result.date_created"
-									:updated-at="result.date_modified"
-									:downloads="result.downloads.toString()"
-									:follows="result.follows.toString()"
+									class="gradient-border"
+									:link="`/${result.project_type}/${result.slug ? result.slug : result.project_id}`"
+									:title="result.title"
+									:author="{ name: result.author, link: `/user/${result.author}` }"
+									:summary="result.description"
+									:date-updated="result.date_modified"
+									:date-published="result.date_created"
+									:displayed-date="sortType === 'newest' ? 'published' : 'updated'"
+									:downloads="result.downloads"
+									:followers="result.follows"
 									:icon-url="result.icon_url"
-									:client-side="result.client_side"
-									:server-side="result.server_side"
-									:categories="result.display_categories.slice(0, 3)"
-									:search="true"
-									:show-updated-date="true"
+									:environment="{
+										clientSide: result.client_side,
+										serverSide: result.server_side,
+									}"
+									:tags="result.display_categories.slice(0, 3)"
 									:color="result.color"
+									layout="list"
 								/>
 							</div>
 						</div>
@@ -445,6 +446,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
+	ProjectCard,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -454,7 +456,6 @@ import { Multiselect } from 'vue-multiselect'
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg?component'
 import PrismLauncherLogo from '~/assets/images/external/prism.svg?component'
 import LatestNewsRow from '~/components/ui/news/LatestNewsRow.vue'
-import ProjectCard from '~/components/ui/ProjectCard.vue'
 import { homePageNotifs, homePageProjects, homePageSearch } from '~/generated/state.json'
 
 const formatRelativeTime = useRelativeTime()