qa: 1

Author: IMB11

packages/ui/src/components/base/BigOptionButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<button
-		class="flex w-full hover:cursor-pointer items-center gap-3 rounded-[20px] border border-solid p-3 text-left transition-all hover:brightness-110 brightness-90 active:scale-[0.98]"
-		:class="selected ? 'border-brand bg-brand-highlight' : 'border-surface-5 bg-surface-4'"
+		class="group flex w-full hover:cursor-pointer items-center gap-3 rounded-[20px] p-3 text-left transition-all hover:brightness-110 active:scale-[0.98] border-none"
+		:class="selected ? 'bg-brand-highlight' : 'bg-surface-4'"
 		@click="$emit('click')"
 	>
 		<div
@@ -19,7 +19,9 @@
 			<span class="text-base font-semibold text-contrast">{{ title }}</span>
 			<span class="text-sm font-medium text-primary">{{ description }}</span>
 		</div>
-		<ChevronRightIcon class="size-5 shrink-0 text-secondary" />
+		<ChevronRightIcon
+			class="size-5 shrink-0 text-secondary opacity-0 transition-opacity duration-100 group-hover:opacity-100"
+		/>
 	</button>
 </template>
 

packages/ui/src/components/base/Combobox.vue

@@ -1,6 +1,31 @@
 <template>
 	<div ref="containerRef" class="relative inline-block w-full">
+		<!-- Search mode: input trigger -->
+		<StyledInput
+			v-if="searchMode"
+			ref="searchModeTriggerRef"
+			v-model="searchQuery"
+			:icon="SearchIcon"
+			type="text"
+			:placeholder="searchPlaceholder || placeholder"
+			:disabled="disabled"
+			wrapper-class="w-full"
+			:input-class="
+				isOpen
+					? shouldRoundBottomCorners
+						? '!rounded-b-none'
+						: '!rounded-t-none'
+					: ''
+			"
+			class="z-[9999] relative"
+			@input="handleSearchModeInput"
+			@keydown="handleSearchKeydown"
+			@focus="handleSearchModeFocus"
+		/>
+
+		<!-- Standard mode: button trigger -->
 		<span
+			v-else
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
@@ -56,7 +81,7 @@
 				@mousedown.stop
 				@keydown="handleDropdownKeydown"
 			>
-				<div v-if="searchable" class="p-4">
+				<div v-if="isSearchable && !searchMode" class="p-4">
 					<StyledInput
 						ref="searchInputRef"
 						v-model="searchQuery"
@@ -70,7 +95,10 @@
 					/>
 				</div>
 
-				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-surface-5"></div>
+				<div
+					v-if="searchable && !searchMode && filteredOptions.length > 0"
+					class="h-px bg-surface-5"
+				></div>
 
 				<div
 					v-if="filteredOptions.length > 0"
@@ -114,6 +142,8 @@
 				<div v-else-if="searchQuery" class="p-4 mb-2 text-center text-sm text-secondary">
 					{{ noOptionsMessage }}
 				</div>
+
+				<slot name="dropdown-footer"></slot>
 			</div>
 		</Teleport>
 	</div>
@@ -178,6 +208,7 @@ const props = withDefaults(
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
+		searchMode?: boolean
 	}>(),
 	{
 		placeholder: 'Select an option',
@@ -208,12 +239,20 @@ const searchQuery = ref('')
 const focusedIndex = ref(-1)
 const containerRef = ref<HTMLElement>()
 const triggerRef = ref<HTMLElement>()
+const searchModeTriggerRef = ref<InstanceType<typeof StyledInput>>()
 const dropdownRef = ref<HTMLElement>()
 const searchInputRef = ref<HTMLInputElement>()
 const optionsContainerRef = ref<HTMLElement>()
 const optionRefs = ref<(HTMLElement | null)[]>([])
 const rafId = ref<number | null>(null)
 
+const effectiveTriggerEl = computed(() => {
+	if (props.searchMode && searchModeTriggerRef.value) {
+		return (searchModeTriggerRef.value as unknown as { $el: HTMLElement }).$el as HTMLElement
+	}
+	return triggerRef.value
+})
+
 const dropdownStyle = ref({
 	top: '0px',
 	left: '0px',
@@ -253,8 +292,10 @@ const optionsWithKeys = computed(() => {
 	}))
 })
 
+const isSearchable = computed(() => props.searchable || props.searchMode)
+
 const filteredOptions = computed(() => {
-	if (!searchQuery.value || !props.searchable || props.disableSearchFilter) {
+	if (!searchQuery.value || !isSearchable.value || props.disableSearchFilter) {
 		return optionsWithKeys.value
 	}
 
@@ -342,11 +383,11 @@ function calculateHorizontalPosition(
 }
 
 async function updateDropdownPosition() {
-	if (!triggerRef.value || !dropdownRef.value) return
+	if (!effectiveTriggerEl.value || !dropdownRef.value) return
 
 	await nextTick()
 
-	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const triggerRect = effectiveTriggerEl.value.getBoundingClientRect()
 	const dropdownRect = dropdownRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
 	const viewportWidth = window.innerWidth
@@ -368,15 +409,19 @@ async function openDropdown() {
 	if (props.disabled || isOpen.value) return
 
 	isOpen.value = true
-	searchQuery.value = ''
+	if (!props.searchMode) {
+		searchQuery.value = ''
+	}
 
 	emit('open')
 
 	await nextTick()
 	await updateDropdownPosition()
 
 	setInitialFocus()
-	focusSearchInput()
+	if (!props.searchMode) {
+		focusSearchInput()
+	}
 	startPositionTracking()
 }
 
@@ -385,13 +430,17 @@ function closeDropdown() {
 
 	stopPositionTracking()
 	isOpen.value = false
-	searchQuery.value = ''
+	if (!props.searchMode) {
+		searchQuery.value = ''
+	}
 	focusedIndex.value = -1
 	emit('close')
 
-	nextTick(() => {
-		triggerRef.value?.focus()
-	})
+	if (!props.searchMode) {
+		nextTick(() => {
+			triggerRef.value?.focus()
+		})
+	}
 }
 
 function handleTriggerClick() {
@@ -418,6 +467,9 @@ function handleOptionClick(option: ComboboxOption<T>, index: number) {
 	emit('select', option)
 
 	if (option.type !== 'link') {
+		if (props.searchMode) {
+			searchQuery.value = ''
+		}
 		closeDropdown()
 	}
 }
@@ -442,7 +494,9 @@ function focusOption(index: number) {
 	if (isDivider(option) || option.disabled) return
 
 	focusedIndex.value = index
-	optionRefs.value[index]?.focus()
+	if (!props.searchMode) {
+		optionRefs.value[index]?.focus()
+	}
 	optionRefs.value[index]?.scrollIntoView({ block: 'nearest' })
 }
 
@@ -512,10 +566,43 @@ function handleSearchKeydown(event: KeyboardEvent) {
 		closeDropdown()
 	} else if (event.key === 'ArrowDown') {
 		event.preventDefault()
+		if (props.searchMode && !isOpen.value && searchQuery.value.trim()) {
+			openDropdown()
+		}
 		focusNextOption()
 	} else if (event.key === 'ArrowUp') {
 		event.preventDefault()
 		focusPreviousOption()
+	} else if (event.key === 'Enter') {
+		event.preventDefault()
+		if (focusedIndex.value >= 0) {
+			const option = filteredOptions.value[focusedIndex.value]
+			if (option && !isDivider(option)) {
+				handleOptionClick(option, focusedIndex.value)
+			}
+		}
+	} else if (event.key === 'Tab' && props.searchMode && isOpen.value) {
+		event.preventDefault()
+		if (event.shiftKey) {
+			focusPreviousOption()
+		} else {
+			focusNextOption()
+		}
+	}
+}
+
+function handleSearchModeInput() {
+	emit('searchInput', searchQuery.value)
+	if (searchQuery.value.trim() && !isOpen.value) {
+		openDropdown()
+	} else if (!searchQuery.value.trim() && isOpen.value) {
+		closeDropdown()
+	}
+}
+
+function handleSearchModeFocus() {
+	if (searchQuery.value.trim() && !isOpen.value) {
+		openDropdown()
 	}
 }
 
@@ -545,7 +632,7 @@ onClickOutside(
 	() => {
 		closeDropdown()
 	},
-	{ ignore: [triggerRef] },
+	{ ignore: [triggerRef, containerRef] },
 )
 
 onMounted(() => {

packages/ui/src/components/base/MultiStageModal.vue

@@ -58,7 +58,7 @@
 		</template>
 
 		<progress
-			v-if="nonProgressStage !== true"
+			v-if="nonProgressStage !== true && !disableProgress"
 			:value="progressValue"
 			max="100"
 			class="w-full h-1 appearance-none border-none absolute top-0 left-0"
@@ -145,6 +145,7 @@ const props = defineProps<{
 	context: T
 	breadcrumbs?: boolean
 	fitContent?: boolean
+	disableProgress?: boolean
 }>()
 
 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')

packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue

@@ -27,10 +27,9 @@
 
 		<!-- Loader chips -->
 		<div v-if="!hideLoaderChips" class="flex flex-col gap-2">
-			<span class="font-semibold text-contrast"
-				>{{ ctx.flowType === 'instance' ? 'Loader' : 'Content loader'
-				}}<span class="text-red"> *</span></span
-			>
+			<span class="font-semibold text-contrast">{{
+				ctx.flowType === 'instance' ? 'Loader' : 'Content loader'
+			}}</span>
 			<Chips
 				v-model="selectedLoader"
 				:items="effectiveLoaders"
@@ -41,21 +40,27 @@
 
 		<!-- Game version -->
 		<div class="flex flex-col gap-2">
-			<span class="font-semibold text-contrast">Game version<span class="text-red"> *</span></span>
+			<span class="font-semibold text-contrast">Game version</span>
 			<Combobox
 				v-model="selectedGameVersion"
 				:options="gameVersionOptions"
 				searchable
 				placeholder="Select game version"
-			/>
-			<span class="text-sm text-secondary">It is recommended to use the latest version.</span>
-			<Checkbox
-				v-if="ctx.showSnapshotToggle"
-				:model-value="ctx.showSnapshots.value"
-				label="Show snapshots"
-				class="text-sm"
-				@update:model-value="ctx.showSnapshots.value = $event"
-			/>
+				force-direction="down"
+				:max-height="150"
+			>
+				<template v-if="ctx.showSnapshotToggle" #dropdown-footer>
+					<button
+						class="flex w-full cursor-pointer items-center justify-center gap-1.5 border-0 border-t border-solid border-surface-5 bg-transparent py-3 text-center text-sm font-semibold text-secondary transition-colors hover:text-contrast"
+						@mousedown.prevent
+						@click="ctx.showSnapshots.value = !ctx.showSnapshots.value"
+					>
+						<EyeOffIcon v-if="ctx.showSnapshots.value" class="size-4" />
+						<EyeIcon v-else class="size-4" />
+						{{ ctx.showSnapshots.value ? 'Hide snapshots' : 'Show all versions' }}
+					</button>
+				</template>
+			</Combobox>
 		</div>
 
 		<!-- Loader version (instance flow: flat layout, other flows: collapsible) -->
@@ -66,10 +71,9 @@
 				v-show="selectedLoader && selectedGameVersion"
 				class="flex flex-col gap-2"
 			>
-				<span class="font-semibold text-contrast"
-					>{{ isPaperLike ? 'Build number' : 'Loader version'
-					}}<span class="text-red"> *</span></span
-				>
+				<span class="font-semibold text-contrast">{{
+					isPaperLike ? 'Build number' : 'Loader version'
+				}}</span>
 				<Chips
 					v-if="!isPaperLike"
 					v-model="loaderVersionType"
@@ -90,10 +94,9 @@
 			<!-- Other flows: collapsible wrapper -->
 			<Collapsible v-else :collapsed="!selectedLoader || !selectedGameVersion" overflow-visible>
 				<div class="flex flex-col gap-2">
-					<span class="font-semibold text-contrast"
-						>{{ isPaperLike ? 'Build number' : 'Loader version'
-						}}<span class="text-red"> *</span></span
-					>
+					<span class="font-semibold text-contrast">{{
+						isPaperLike ? 'Build number' : 'Loader version'
+					}}</span>
 					<Chips
 						v-if="!isPaperLike"
 						v-model="loaderVersionType"
@@ -116,13 +119,12 @@
 </template>
 
 <script setup lang="ts">
-import { UploadIcon, XIcon } from '@modrinth/assets'
+import { EyeIcon, EyeOffIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import { injectFilePicker, injectTags } from '../../../../providers'
 import Avatar from '../../../base/Avatar.vue'
 import ButtonStyled from '../../../base/ButtonStyled.vue'
-import Checkbox from '../../../base/Checkbox.vue'
 import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
@@ -151,8 +153,12 @@ const effectiveLoaders = computed(() => {
 
 // Pre-select loader and game version from initial values
 onMounted(() => {
-	if (ctx.initialLoader && !selectedLoader.value) {
-		selectedLoader.value = ctx.initialLoader
+	if (!selectedLoader.value) {
+		if (ctx.initialLoader) {
+			selectedLoader.value = ctx.initialLoader
+		} else if (ctx.flowType === 'instance') {
+			selectedLoader.value = 'fabric'
+		}
 	}
 	if (ctx.initialGameVersion && !selectedGameVersion.value) {
 		selectedGameVersion.value = ctx.initialGameVersion