feat: add dependency info onto dependency select options

apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue

@@ -15,7 +15,75 @@
 					:search-value="selectedNewDependencyVersionLabel"
 					:searchable="true"
 					:select-search-text-on-focus="true"
-				/>
+				>
+					<template #option="{ item, isSelected }">
+						<div class="flex w-full items-center justify-between gap-2">
+							<a
+								v-if="item.value"
+								:href="getDependencyVersionUrl(item.value)"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="custom-focus-indicator flex min-w-0 items-center gap-1 rounded-sm font-semibold leading-tight outline-none hover:underline focus-visible:underline"
+								:class="isSelected ? 'text-green' : 'text-primary'"
+								:aria-label="`Open ${item.label} in a new tab`"
+								@mousedown.stop
+								@click.stop
+							>
+								<span class="truncate">{{ item.label }}</span>
+								<ExternalIcon
+									aria-hidden="true"
+									class="size-4 shrink-0 opacity-0 transition-opacity group-hover/option:opacity-100 group-data-[focused=true]/option:opacity-100"
+								/>
+							</a>
+							<span
+								v-else
+								class="font-semibold leading-tight"
+								:class="isSelected ? 'text-green' : 'text-primary'"
+							>
+								{{ item.label }}
+							</span>
+							<div
+								v-if="getDependencyVersionOption(item.value)"
+								class="flex flex-wrap items-center justify-end gap-1.5"
+							>
+								<TagItem
+									v-for="platform in getDependencyVersionOption(item.value)?.platforms.slice(
+										0,
+										MAX_VISIBLE_TAGS,
+									)"
+									:key="`platform-${platform}`"
+									class="shrink-0 border !border-solid border-surface-5"
+									:style="`--_color: var(--color-platform-${platform})`"
+								>
+									<FormattedTag :tag="platform" enforce-type="loader" />
+								</TagItem>
+								<TagsOverflow
+									:tags="
+										getDependencyVersionOption(item.value)?.platforms.slice(MAX_VISIBLE_TAGS) ?? []
+									"
+									class="shrink-0 border !border-solid border-surface-5"
+								/>
+								<TagItem
+									v-for="gameVersion in getDependencyVersionOption(item.value)?.gameVersions.slice(
+										0,
+										MAX_VISIBLE_TAGS,
+									)"
+									:key="`game-version-${gameVersion}`"
+									class="shrink-0 border !border-solid border-surface-5"
+								>
+									{{ gameVersion }}
+								</TagItem>
+								<TagsOverflow
+									:tags="
+										getDependencyVersionOption(item.value)?.gameVersions.slice(MAX_VISIBLE_TAGS) ??
+										[]
+									"
+									class="shrink-0 border !border-solid border-surface-5"
+								/>
+							</div>
+						</div>
+					</template>
+				</Combobox>
 			</div>
 
 			<div class="grid gap-2.5">
@@ -36,15 +104,21 @@
 </template>
 
 <script lang="ts" setup>
-import { Combobox } from '@modrinth/ui'
+import { ExternalIcon } from '@modrinth/assets'
+import { Combobox, FormattedTag, TagItem, TagsOverflow } from '@modrinth/ui'
 import { computed } from 'vue'
 
 import DependencySelect from '~/components/ui/create-project-version/components/DependencySelect.vue'
-import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+import {
+	type DependencyVersionOption,
+	injectManageVersionContext,
+} from '~/providers/version/manage-version-modal'
 
 const { newDependencyProjectId, newDependencyType, newDependencyVersionId, newDependencyVersions } =
 	injectManageVersionContext()
 
+const MAX_VISIBLE_TAGS = 2
+
 const newDependencyVersionOptions = computed(() => [
 	{ label: 'Any version', value: null },
 	...newDependencyVersions.value,
@@ -55,4 +129,12 @@ const selectedNewDependencyVersionLabel = computed(
 			(option) => option.value === newDependencyVersionId.value,
 		)?.label,
 )
+
+const getDependencyVersionOption = (
+	versionId: string | null,
+): DependencyVersionOption | undefined =>
+	newDependencyVersions.value.find((option) => option.value === versionId)
+
+const getDependencyVersionUrl = (versionId: string): string =>
+	`/project/${encodeURIComponent(newDependencyProjectId.value ?? '')}/version/${encodeURIComponent(versionId)}`
 </script>

apps/frontend/src/providers/version/manage-version-modal.ts

@@ -64,6 +64,11 @@ export type SuggestedDependency = Labrinth.Versions.v3.Dependency & {
 	versionNumber?: string
 }
 
+export interface DependencyVersionOption extends ComboboxOption<string> {
+	gameVersions: string[]
+	platforms: string[]
+}
+
 export interface PrimaryFile {
 	name: string
 	fileType?: string
@@ -85,7 +90,7 @@ export interface ManageVersionContextValue {
 	newDependencyProjectId: Ref<string | undefined>
 	newDependencyType: Ref<Labrinth.Versions.v2.DependencyType>
 	newDependencyVersionId: Ref<string | null>
-	newDependencyVersions: Ref<ComboboxOption<string>[]>
+	newDependencyVersions: Ref<DependencyVersionOption[]>
 	visibleSuggestedDependencies: ComputedRef<SuggestedDependency[]>
 	primaryFile: ComputedRef<PrimaryFile | null>
 
@@ -228,7 +233,7 @@ export function createManageVersionContext(
 	const newDependencyProjectId = ref<string>()
 	const newDependencyType = ref<Labrinth.Versions.v2.DependencyType>('required')
 	const newDependencyVersionId = ref<string | null>(null)
-	const newDependencyVersions = ref<ComboboxOption<string>[]>([])
+	const newDependencyVersions = ref<DependencyVersionOption[]>([])
 
 	const isSubmitting = ref(false)
 	const isUploading = ref(false)
@@ -670,6 +675,8 @@ export function createManageVersionContext(
 			newDependencyVersions.value = versions.map((version) => ({
 				label: version.version_number,
 				value: version.id,
+				gameVersions: version.game_versions,
+				platforms: version.loaders,
 			}))
 		} catch (error: any) {
 			addNotification({