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>

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

@@ -5,26 +5,29 @@
 			<div>
 				<BookTextIcon aria-hidden="true" />
 				<div>
-					Licensed
-					<a
-						v-if="project.license.url"
-						class="text-link hover:underline"
-						:href="project.license.url"
-						:target="linkTarget"
-						rel="noopener nofollow ugc"
-					>
-						{{ licenseIdDisplay }}
-						<ExternalIcon aria-hidden="true" class="external-icon ml-1 mt-[-1px] inline" />
-					</a>
-					<span
-						v-else-if="
-							project.license.id === 'LicenseRef-All-Rights-Reserved' ||
-							!project.license.id.includes('LicenseRef')
-						"
-					>
-						{{ licenseIdDisplay }}
-					</span>
-					<span v-else>{{ licenseIdDisplay }}</span>
+					<IntlFormatted :message-id="messages.licensed">
+						<template #~license>
+							<a
+								v-if="project.license.url"
+								class="text-link hover:underline"
+								:href="project.license.url"
+								:target="linkTarget"
+								rel="noopener nofollow ugc"
+							>
+								{{ licenseIdDisplay }}
+								<ExternalIcon aria-hidden="true" class="external-icon ml-1 mt-[-1px] inline" />
+							</a>
+							<span
+								v-else-if="
+									project.license.id === 'LicenseRef-All-Rights-Reserved' ||
+									!project.license.id.includes('LicenseRef')
+								"
+							>
+								{{ licenseIdDisplay }}
+							</span>
+							<span v-else>{{ licenseIdDisplay }}</span>
+						</template>
+					</IntlFormatted>
 				</div>
 			</div>
 			<div
@@ -33,13 +36,19 @@
 			>
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ capitalizeString(formatMessage(messages.published, { date: publishedDate })) }}
+					{{
+						capitalizeString(
+							formatMessage(commonMessages.projectPublished, { date: publishedDate }),
+						)
+					}}
 				</div>
 			</div>
 			<div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ capitalizeString(formatMessage(messages.created, { date: createdDate })) }}
+					{{
+						capitalizeString(formatMessage(commonMessages.projectCreated, { date: createdDate }))
+					}}
 				</div>
 			</div>
 			<div
@@ -48,7 +57,11 @@
 			>
 				<ScaleIcon aria-hidden="true" />
 				<div>
-					{{ capitalizeString(formatMessage(messages.submitted, { date: submittedDate })) }}
+					{{
+						capitalizeString(
+							formatMessage(commonMessages.projectSubmitted, { date: submittedDate }),
+						)
+					}}
 				</div>
 			</div>
 			<div
@@ -57,7 +70,9 @@
 			>
 				<VersionIcon aria-hidden="true" />
 				<div>
-					{{ capitalizeString(formatMessage(messages.updated, { date: updatedDate })) }}
+					{{
+						capitalizeString(formatMessage(commonMessages.projectUpdated, { date: updatedDate }))
+					}}
 				</div>
 			</div>
 		</div>
@@ -72,6 +87,7 @@ import { computed } from 'vue'
 import { useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
+import { IntlFormatted } from '../base'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
@@ -123,21 +139,5 @@ const messages = defineMessages({
 		id: 'project.about.details.licensed',
 		defaultMessage: 'Licensed {license}',
 	},
-	created: {
-		id: 'project.about.details.created',
-		defaultMessage: 'Created {date}',
-	},
-	submitted: {
-		id: 'project.about.details.submitted',
-		defaultMessage: 'Submitted {date}',
-	},
-	published: {
-		id: 'project.about.details.published',
-		defaultMessage: 'Published {date}',
-	},
-	updated: {
-		id: 'project.about.details.updated',
-		defaultMessage: 'Updated {date}',
-	},
 })
 </script>