Add game version warning for shaders (#5227)

apps/frontend/src/locales/en-US/index.json

@@ -2684,6 +2684,9 @@
   "scopes.versionWrite.label": {
     "message": "Write versions"
   },
+  "search.filter.game-version-shader-message": {
+    "message": "Shader packs for older versions most likely work on newer versions with only minor issues."
+  },
   "search.filter.locked.server": {
     "message": "Provided by the server"
   },

apps/frontend/src/pages/discover/[type]/index.vue

@@ -7,6 +7,7 @@ import {
 	GameIcon,
 	GridIcon,
 	ImageIcon,
+	InfoIcon,
 	LeftArrowIcon,
 	ListIcon,
 	SearchIcon,
@@ -213,6 +214,11 @@ const messages = defineMessages({
 		id: 'search.filter.locked.server.sync',
 		defaultMessage: 'Sync with server',
 	},
+	gameVersionShaderMessage: {
+		id: 'search.filter.game-version-shader-message',
+		defaultMessage:
+			'Shader packs for older versions most likely work on newer versions with only minor issues.',
+	},
 })
 
 interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
@@ -500,11 +506,17 @@ useSeoMeta({
 				button-class="button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none"
 				content-class="mb-4 mx-3"
 				inner-panel-class="p-1"
-				:open-by-default="true"
+				:open-by-default="!(currentType === 'shader' && filter.id === 'game_version')"
 			>
 				<template #header>
 					<h3 class="m-0 text-lg">{{ filter.formatted_name }}</h3>
 				</template>
+				<template v-if="currentType === 'shader' && filter.id === 'game_version'" #prefix>
+					<div class="mb-4 grid grid-cols-[auto_1fr] gap-2 px-3 text-sm font-medium text-blue">
+						<InfoIcon class="mt-1 size-4" />
+						<span> {{ formatMessage(messages.gameVersionShaderMessage) }}</span>
+					</div>
+				</template>
 				<template #locked-game_version>
 					{{ formatMessage(messages.gameVersionProvidedByServer) }}
 				</template>

packages/ui/src/components/search/SearchSidebarFilter.vue

@@ -64,6 +64,7 @@
 			</div>
 		</template>
 		<template v-else #default>
+			<slot name="prefix" />
 			<div v-if="filterType.searchable" class="iconified-input mx-2 my-1 !flex">
 				<SearchIcon aria-hidden="true" />
 				<input

packages/ui/src/utils/search.ts

@@ -228,7 +228,11 @@ export function useSearch(
 					query_value: gameVersion.version,
 					method: 'or',
 				})),
-				ordering: projectTypes.value.includes('mod') ? 2 : undefined,
+				ordering: projectTypes.value.includes('mod')
+					? 2
+					: projectTypes.value.includes('shader')
+						? -1
+						: undefined,
 			},
 			{
 				id: 'mod_loader',