qa: content (#7184)

* qa: content card improvements for server panel

* fix: server install icon bug

* qa: 1

* fix: lint

* qa: 2

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -130,7 +130,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 	<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
 		<div
 			ref="stickyInstallHeaderRef"
-			class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 px-3 py-4 border-surface-5"
+			class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 px-6 py-4 border-surface-5"
 			:class="[isInstallHeaderStuck ? 'border-t' : '']"
 		>
 			<BrowseInstallHeader />

packages/ui/src/layouts/shared/content-tab/components/managed-content-card/index.vue

@@ -2,6 +2,8 @@
 import { EyeIcon, WrenchIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import AutoLink from '#ui/components/base/AutoLink.vue'
+import Avatar from '#ui/components/base/Avatar.vue'
 import { Button, IconButton } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
@@ -67,9 +69,20 @@ const title = computed(() =>
 		<div
 			class="flex min-h-[94px] flex-col items-stretch justify-between gap-4 bg-surface-3 px-[18px] py-4 @[700px]:flex-row @[700px]:items-center"
 		>
-			<div class="flex min-w-0 flex-1 flex-col gap-1.5 pl-0.5">
-				<h2 class="m-0 text-2xl font-semibold leading-8 text-contrast">{{ title }}</h2>
-				<ManagedContentCardSummary :summary="data.summary" :installing="data.installing" />
+			<div class="flex min-w-0 flex-1 items-center gap-4 pl-0.5">
+				<AutoLink v-if="data.kind === 'modpack'" :to="data.manager.link" class="shrink-0">
+					<Avatar
+						:src="data.manager.iconUrl"
+						:alt="data.manager.name"
+						size="4rem"
+						:tint-by="data.manager.name"
+						no-shadow
+					/>
+				</AutoLink>
+				<div class="flex min-w-0 flex-1 flex-col gap-1.5">
+					<h2 class="m-0 text-2xl font-semibold leading-8 text-contrast">{{ title }}</h2>
+					<ManagedContentCardSummary :summary="data.summary" :installing="data.installing" />
+				</div>
 			</div>
 
 			<div

packages/ui/src/layouts/shared/content-tab/components/managed-content-card/managed-content-card-footer.vue

@@ -44,9 +44,9 @@ const formatDateTime = useFormatDateTime({
 })
 
 const messages = defineMessages({
-	managedBy: {
-		id: 'content.managed-card.managed-by',
-		defaultMessage: 'Managed by',
+	providedBy: {
+		id: 'content.managed-card.provided-by',
+		defaultMessage: 'Provided by',
 	},
 	server: {
 		id: 'content.managed-card.server-suffix',
@@ -110,7 +110,7 @@ const showAction = computed(
 				<LockIcon aria-hidden="true" class="size-5 shrink-0" />
 				<div class="flex min-w-0 flex-wrap items-center gap-[5px] @[700px]:flex-nowrap">
 					<span class="whitespace-nowrap">
-						{{ formatMessage(messages.managedBy) }}
+						{{ formatMessage(messages.providedBy) }}
 					</span>
 					<AutoLink
 						:to="data.manager.link"

packages/ui/src/layouts/shared/content-tab/components/managed-content-card/managed-content-card-summary.vue

@@ -23,8 +23,8 @@ const messages = defineMessages({
 		defaultMessage: 'Loading managed content summary',
 	},
 	empty: {
-		id: 'content.managed-card.summary.empty',
-		defaultMessage: 'No managed content',
+		id: 'content.managed-card.summary.no-provided-content',
+		defaultMessage: 'No provided content',
 	},
 	installing: {
 		id: 'content.managed-card.summary.installing',

packages/ui/src/layouts/shared/content-tab/composables/use-content-metadata-filters.ts

@@ -115,10 +115,6 @@ const messages = defineMessages({
 		id: 'content.metadata-filter.state',
 		defaultMessage: 'State',
 	},
-	updates: {
-		id: 'content.metadata-filter.updates',
-		defaultMessage: 'Updates',
-	},
 	warnings: {
 		id: 'content.metadata-filter.warnings',
 		defaultMessage: 'Warnings',
@@ -135,10 +131,6 @@ const messages = defineMessages({
 		id: 'content.metadata-filter.update.available',
 		defaultMessage: 'Update available',
 	},
-	upToDate: {
-		id: 'content.metadata-filter.update.up-to-date',
-		defaultMessage: 'Up to date',
-	},
 	clientRetained: {
 		id: 'content.metadata-filter.warning.client-retained',
 		defaultMessage: 'Client file retained',
@@ -237,15 +229,6 @@ export function useContentMetadataFilters(
 								: option('disabled', formatMessage(messages.disabled)),
 						],
 		},
-		{
-			key: 'updates',
-			label: formatMessage(messages.updates),
-			values: (item) => [
-				item.has_update
-					? option('available', formatMessage(messages.updateAvailable))
-					: option('current', formatMessage(messages.upToDate)),
-			],
-		},
 		{
 			key: 'warnings',
 			label: formatMessage(messages.warnings),
@@ -263,6 +246,13 @@ export function useContentMetadataFilters(
 				}
 			},
 		},
+		{
+			key: 'updates',
+			label: formatMessage(messages.updateAvailable),
+			direct: true,
+			values: (item) =>
+				item.has_update ? [option('available', formatMessage(messages.updateAvailable))] : [],
+		},
 		{
 			key: 'open_source',
 			label: formatMessage(messages.openSource),

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -1024,11 +1024,8 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									class="flex flex-wrap items-center gap-1.5 [&>div:last-of-type]:!h-[34px] [&>div:last-of-type]:!gap-1.5 [&_[data-button]]:!h-[34px]"
 								>
 									<div
-										class="h-6 w-px shrink-0 bg-surface-5"
-										:class="{
-											hidden: metadataFiltersWrapped,
-											'mr-0.5': !metadataFiltersWrapped,
-										}"
+										class="mr-0.5 h-6 w-px shrink-0 bg-surface-5"
+										:class="{ invisible: metadataFiltersWrapped }"
 									/>
 									<DropdownFilterBar
 										v-model="selectedMetadataFilters"

packages/ui/src/locales/en-US/index.json

@@ -587,12 +587,12 @@
   "content.inline-backup.world-label": {
     "defaultMessage": "world"
   },
-  "content.managed-card.managed-by": {
-    "defaultMessage": "Managed by"
-  },
   "content.managed-card.modpack-content": {
     "defaultMessage": "Modpack content"
   },
+  "content.managed-card.provided-by": {
+    "defaultMessage": "Provided by"
+  },
   "content.managed-card.server-suffix": {
     "defaultMessage": "server"
   },
@@ -602,15 +602,15 @@
   "content.managed-card.shared-content": {
     "defaultMessage": "Shared content"
   },
-  "content.managed-card.summary.empty": {
-    "defaultMessage": "No managed content"
-  },
   "content.managed-card.summary.installing": {
     "defaultMessage": "Installing content..."
   },
   "content.managed-card.summary.loading": {
     "defaultMessage": "Loading managed content summary"
   },
+  "content.managed-card.summary.no-provided-content": {
+    "defaultMessage": "No provided content"
+  },
   "content.managed-card.switch-version": {
     "defaultMessage": "Switch version"
   },
@@ -656,12 +656,6 @@
   "content.metadata-filter.update.available": {
     "defaultMessage": "Update available"
   },
-  "content.metadata-filter.update.up-to-date": {
-    "defaultMessage": "Up to date"
-  },
-  "content.metadata-filter.updates": {
-    "defaultMessage": "Updates"
-  },
   "content.metadata-filter.warning.client-depends": {
     "defaultMessage": "Client depends on file"
   },