From 0e44a6e739b4e314fe8b3174fee825bfb93a3b3a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 10 Mar 2026 16:27:45 -0700
Subject: [PATCH 1/2] refactor: remove vue-multiselect, replace with either our
 own combobox and multiselect

---
 apps/app-frontend/package.json                |   1 -
 apps/app-frontend/src/App.vue                 |   1 -
 .../components/ui/InstanceCreationModal.vue   |  31 ++--
 .../IncompatibilityWarningModal.vue           |  61 +++----
 apps/frontend/package.json                    |   1 -
 apps/frontend/src/layouts/default.vue         |   1 -
 .../pages/[type]/[id]/settings/members.vue    |  33 ++--
 .../pages/[type]/[id]/version/[version].vue   |  41 ++---
 .../frontend/src/pages/dashboard/projects.vue |  14 +-
 apps/frontend/src/pages/index.vue             |  45 +++---
 .../organization/[id]/settings/projects.vue   |  21 +--
 packages/ui/package.json                      |   1 -
 .../src/components/billing/PurchaseModal.vue  | 152 ++++++++----------
 packages/ui/src/utils/common-messages.ts      |   2 +-
 14 files changed, 186 insertions(+), 219 deletions(-)

diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index c7561a588b..eec02ffc27 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -39,7 +39,6 @@
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
-		"vue-multiselect": "3.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index eed52f8356..1b990e6a04 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1534,4 +1534,3 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
index b2920fbb5e..6c00e598b8 100644
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -36,15 +36,13 @@
 			<div class="input-row">
 				<p class="input-label">Game version</p>
 				<div class="flex gap-4 items-center">
-					<multiselect
+					<Combobox
 						v-model="game_version"
 						class="selector"
-						:options="game_versions"
-						:multiple="false"
+						:options="gameVersionOptions"
 						:searchable="true"
 						placeholder="Select game version"
-						open-direction="top"
-						:show-labels="false"
+						force-direction="up"
 					/>
 					<Checkbox v-model="showSnapshots" class="shrink-0" label="Show all versions" />
 				</div>
@@ -56,14 +54,13 @@
 			<div v-if="loader_version === 'other' && loader !== 'vanilla'">
 				<div v-if="game_version" class="input-row">
 					<p class="input-label">Select version</p>
-					<multiselect
+					<Combobox
 						v-model="specified_loader_version"
 						class="selector"
-						:options="selectable_versions"
+						:options="selectableVersionOptions"
 						:searchable="true"
 						placeholder="Select loader version"
-						open-direction="top"
-						:show-labels="false"
+						force-direction="up"
 					/>
 				</div>
 				<div v-else class="input-row">
@@ -199,6 +196,7 @@ import {
 	Button,
 	Checkbox,
 	Chips,
+	Combobox,
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
@@ -206,7 +204,6 @@ import { convertFileSrc } from '@tauri-apps/api/core'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
-import Multiselect from 'vue-multiselect'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
@@ -331,6 +328,13 @@ const game_versions = computed(() => {
 		.map((item) => item.id)
 })
 
+const gameVersionOptions = computed(() =>
+	game_versions.value.map((version) => ({
+		value: version,
+		label: version,
+	})),
+)
+
 const modal = ref(null)
 
 const check_valid = computed(() => {
@@ -409,6 +413,13 @@ const selectable_versions = computed(() => {
 	return []
 })
 
+const selectableVersionOptions = computed(() =>
+	selectable_versions.value.map((version) => ({
+		value: version,
+		label: version,
+	})),
+)
+
 const openFile = async () => {
 	const newProject = await open({ multiple: false })
 	if (!newProject) return
diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
index 7e8c6f7457..24f493ee03 100644
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -17,31 +17,17 @@
 					<tr class="content">
 						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
 						<td>
-							<multiselect
+							<Combobox
 								v-if="versions?.length > 1"
-								v-model="selectedVersion"
-								:options="versions"
+								v-model="selectedVersionId"
+								:options="versionOptions"
 								:searchable="true"
 								placeholder="Select version"
-								open-direction="top"
-								:show-labels="false"
-								:custom-label="
-									(version) =>
-										`${version?.name} (${version?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')} - ${version?.game_versions.join(', ')})`
-								"
+								force-direction="up"
 								:max-height="150"
 							/>
 							<span v-else>
-								<span>
-									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')
-									}}
-									- {{ selectedVersion?.game_versions.join(', ') }})
-								</span>
+								<span>{{ selectedVersionLabel }}</span>
 							</span>
 						</td>
 					</tr>
@@ -59,9 +45,8 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { ref } from 'vue'
-import Multiselect from 'vue-multiselect'
+import { Button, Combobox, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
@@ -79,11 +64,35 @@ const installing = ref(false)
 
 const onInstall = ref(() => {})
 
+const selectedVersionLabel = computed(() => {
+	if (!selectedVersion.value) return ''
+	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
+		.map((name) => formatLoader(formatMessage, name))
+		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
+})
+
+const versionOptions = computed(() =>
+	(versions.value ?? []).map((version) => ({
+		value: version.id,
+		label: `${version.name} (${version.loaders
+			.map((name) => formatLoader(formatMessage, name))
+			.join(', ')} - ${version.game_versions.join(', ')})`,
+	})),
+)
+
+const selectedVersionId = computed({
+	get: () => selectedVersion.value?.id ?? null,
+	set: (value) => {
+		if (!value) return
+		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
+	},
+})
+
 defineExpose({
 	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
 		instance.value = instanceVal
-		versions.value = projectVersions
-		selectedVersion.value = selected ?? projectVersions[0]
+		versions.value = projectVersions ?? []
+		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
 
 		project.value = projectVal
 
@@ -162,9 +171,5 @@ td:first-child {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-
-	:deep(.animated-dropdown .options) {
-		max-height: 13.375rem;
-	}
 }
 </style>
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 995a1993a1..08370f6418 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -75,7 +75,6 @@
 		"semver": "^7.5.4",
 		"three": "^0.172.0",
 		"vue-confetti-explosion": "^1.0.2",
-		"vue-multiselect": "3.0.0-alpha.2",
 		"vue-typed-virtual-list": "^1.0.10",
 		"vue3-ace-editor": "^2.2.4",
 		"vue3-apexcharts": "^1.5.2",
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index c117e9c886..28cd31a482 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1592,4 +1592,3 @@ const { cycle: changeTheme } = useTheme()
 	}
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index a80d7cb676..a359b16d00 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -285,20 +285,16 @@
 				you can transfer management to one of them.
 			</p>
 			<div v-if="!organization" class="input-group">
-				<Multiselect
+				<Combobox
 					id="organization-picker"
-					v-model="selectedOrganization"
+					v-model="selectedOrganizationId"
 					class="large-multiselect"
-					track-by="id"
-					label="name"
-					open-direction="top"
-					:close-on-select="true"
-					:show-labels="false"
-					:allow-empty="false"
-					:options="organizations || []"
-					:disabled="!currentMember?.is_owner || organizations?.length === 0"
+					:options="organizationOptions"
+					:searchable="true"
+					force-direction="up"
+					:disabled="!currentMember?.is_owner || organizationOptions.length === 0"
 				/>
-				<button class="btn btn-primary" :disabled="!selectedOrganization" @click="onAddToOrg">
+				<button class="btn btn-primary" :disabled="!selectedOrganizationId" @click="onAddToOrg">
 					<CheckIcon />
 					Transfer management
 				</button>
@@ -544,13 +540,13 @@ import {
 	Badge,
 	Card,
 	Checkbox,
+	Combobox,
 	ConfirmModal,
 	injectNotificationManager,
 	injectProjectPageContext,
 	StyledInput,
 	Toggle,
 } from '@modrinth/ui'
-import { Multiselect } from 'vue-multiselect'
 
 import { removeSelfFromTeam } from '~/helpers/teams.js'
 
@@ -600,7 +596,7 @@ initMembers()
 
 const currentUsername = ref('')
 const openTeamMembers = ref([])
-const selectedOrganization = ref(null)
+const selectedOrganizationId = ref('')
 
 const { data: organizations } = useAsyncData('organizations', () => {
 	return useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
@@ -608,6 +604,13 @@ const { data: organizations } = useAsyncData('organizations', () => {
 	})
 })
 
+const organizationOptions = computed(() =>
+	(organizations.value ?? []).map((organization) => ({
+		value: organization.id,
+		label: organization.name,
+	})),
+)
+
 const UPLOAD_VERSION = 1 << 0
 const DELETE_VERSION = 1 << 1
 const EDIT_DETAILS = 1 << 2
@@ -620,9 +623,9 @@ const VIEW_ANALYTICS = 1 << 8
 const VIEW_PAYOUTS = 1 << 9
 
 const onAddToOrg = useClientTry(async () => {
-	if (!selectedOrganization.value) return
+	if (!selectedOrganizationId.value) return
 
-	await useBaseFetch(`organization/${selectedOrganization.value.id}/projects`, {
+	await useBaseFetch(`organization/${selectedOrganizationId.value}/projects`, {
 		method: 'POST',
 		body: JSON.stringify({
 			project_id: project.value.id,
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 27caa93b61..f7cedfac82 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -25,17 +25,14 @@
 						The mod loaders you would like to package your data pack for.
 					</span>
 				</label>
-				<multiselect
+				<MultiSelect
 					id="package-mod-loaders"
 					v-model="packageLoaders"
-					:options="['fabric', 'forge', 'quilt', 'neoforge']"
-					:custom-label="(value: string) => value.charAt(0).toUpperCase() + value.slice(1)"
-					:multiple="true"
+					class="package-loader-select"
+					:options="packageLoaderOptions"
 					:searchable="false"
-					:show-no-results="false"
-					:show-labels="false"
 					placeholder="Choose loaders..."
-					open-direction="top"
+					force-direction="up"
 				/>
 				<div class="button-group">
 					<ButtonStyled>
@@ -436,10 +433,10 @@ import {
 	ENVIRONMENTS_COPY,
 	injectNotificationManager,
 	injectProjectPageContext,
+	MultiSelect,
 	StyledInput,
 } from '@modrinth/ui'
 import { formatBytes, renderHighlightedString } from '@modrinth/utils'
-import { Multiselect } from 'vue-multiselect'
 
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -498,6 +495,12 @@ const newFiles = ref<File[]>([])
 const deleteFiles = ref<string[]>([])
 const newFileTypes = ref<Array<{ display: string; value: string } | null>>([])
 const packageLoaders = ref(['forge', 'fabric', 'quilt', 'neoforge'])
+const packageLoaderOptions = [
+	{ value: 'fabric', label: 'Fabric' },
+	{ value: 'forge', label: 'Forge' },
+	{ value: 'quilt', label: 'Quilt' },
+	{ value: 'neoforge', label: 'Neoforge' },
+]
 const showKnownErrors = ref(false)
 const shouldPreventActions = ref(false)
 const uploadedImageIds = ref<string[]>([])
@@ -1209,11 +1212,6 @@ async function resetProjectVersions() {
 					margin-bottom: var(--spacing-card-sm);
 				}
 
-				.multiselect {
-					width: 8rem;
-					flex-grow: 1;
-				}
-
 				input {
 					flex-grow: 2;
 				}
@@ -1264,14 +1262,6 @@ async function resetProjectVersions() {
 				font-weight: 300;
 			}
 
-			.raised-multiselect {
-				display: none;
-				margin: 0 0.5rem;
-				height: 40px;
-				max-height: 40px;
-				min-width: 235px;
-			}
-
 			.raised-button {
 				margin-left: auto;
 				background-color: var(--color-raised-bg);
@@ -1280,13 +1270,6 @@ async function resetProjectVersions() {
 			&:not(:nth-child(2)) {
 				margin-top: 0.5rem;
 			}
-
-			// TODO: Make file type editing  work on mobile
-			@media (min-width: 600px) {
-				.raised-multiselect {
-					display: block;
-				}
-			}
 		}
 
 		.additional-files {
@@ -1351,7 +1334,7 @@ async function resetProjectVersions() {
 		margin-bottom: 1rem;
 	}
 
-	.multiselect {
+	.package-loader-select {
 		max-width: 20rem;
 	}
 }
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 76e102c565..da3474294c 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -182,14 +182,11 @@
 					<div class="push-right">
 						<div class="labeled-control-row">
 							Sort by
-							<Multiselect
+							<Combobox
 								v-model="sortBy"
 								:searchable="false"
 								class="small-select"
-								:options="['Name', 'Status', 'Type']"
-								:close-on-select="true"
-								:show-labels="false"
-								:allow-empty="false"
+								:options="sortOptions"
 								@update:model-value="projects = updateSort(projects, sortBy, descending)"
 							/>
 							<button
@@ -330,6 +327,7 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	Combobox,
 	commonMessages,
 	CopyCode,
 	injectNotificationManager,
@@ -339,7 +337,6 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
-import { Multiselect } from 'vue-multiselect'
 
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
@@ -363,6 +360,11 @@ const projects = ref([])
 const projectsWithMigrationWarning = ref([])
 const selectedProjects = ref([])
 const sortBy = ref('Name')
+const sortOptions = [
+	{ value: 'Name', label: 'Name' },
+	{ value: 'Status', label: 'Status' },
+	{ value: 'Type', label: 'Type' },
+]
 const descending = ref(false)
 const editLinks = reactive({
 	showAffected: false,
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 37a6e5eb2e..212f74cd0f 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -106,19 +106,22 @@
 									@input="updateSearchProjects"
 								/>
 								<div class="sort-by">
-									<span class="label">{{ formatMessage(commonMessages.sortByLabel) }}</span>
-									<Multiselect
+									<DropdownSelect
+										v-slot="{ selected }"
 										v-model="sortType"
-										placeholder="Select one"
-										class="selector"
-										:custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
-										:options="['relevance', 'downloads', 'follows', 'updated', 'newest']"
-										:searchable="false"
-										:close-on-select="true"
-										:show-labels="false"
-										:allow-empty="false"
-										@update:model-value="updateSearchProjects"
-									/>
+										class="!h-9 !w-max flex-grow"
+										name="Sort by"
+										:options="sortOptions"
+										:display-name="(value) => value?.charAt(0).toUpperCase() + value?.slice(1)"
+										@change="updateSearchProjects()"
+									>
+										<div>
+											<span class="font-semibold text-primary"
+												>{{ formatMessage(commonMessages.sortByLabel) }}:
+											</span>
+											<span class="font-semibold text-secondary">{{ selected }}</span>
+										</div>
+									</DropdownSelect>
 								</div>
 							</div>
 							<div class="results display-mode--list">
@@ -444,6 +447,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
+	DropdownSelect,
 	IntlFormatted,
 	ProjectCard,
 	StyledInput,
@@ -451,7 +455,6 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
-import { Multiselect } from 'vue-multiselect'
 
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg?component'
 import PrismLauncherLogo from '~/assets/images/external/prism.svg?component'
@@ -464,6 +467,7 @@ const { formatMessage } = useVIntl()
 
 const searchQuery = ref('leave')
 const sortType = ref('relevance')
+const sortOptions = ['relevance', 'downloads', 'follows', 'updated', 'newest']
 
 const PROJECT_COUNT = 100000
 const formatNumber = new Intl.NumberFormat().format
@@ -957,7 +961,7 @@ const creatorFeatureMessages = defineMessages({
 						display: flex;
 						justify-content: space-between;
 						margin-bottom: 1rem;
-						gap: 1rem;
+						gap: 0.5rem;
 
 						.iconified-input {
 							width: 100%;
@@ -979,19 +983,6 @@ const creatorFeatureMessages = defineMessages({
 							display: flex;
 							gap: 0.75rem;
 							align-items: center;
-
-							.label {
-								white-space: nowrap;
-							}
-
-							.selector {
-								min-width: 8rem;
-								white-space: nowrap;
-							}
-
-							@media screen and (max-width: 500px) {
-								display: none;
-							}
 						}
 					}
 
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index c8b3f1a964..4c016bd61e 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -186,15 +186,12 @@
 					<div class="push-right">
 						<div class="labeled-control-row">
 							Sort by
-							<Multiselect
+							<DropdownSelect
 								v-model="sortBy"
-								:searchable="false"
-								class="small-select"
-								:options="['Name', 'Status', 'Type']"
-								:close-on-select="true"
-								:show-labels="false"
-								:allow-empty="false"
-								@update:model-value="
+								class="!w-auto"
+								name="Sort by"
+								:options="sortOptions"
+								@change="
 									sortedProjects = updateSort(sortedProjects, sortBy, descending)
 								"
 							/>
@@ -331,6 +328,7 @@ import {
 	Checkbox,
 	commonMessages,
 	CopyCode,
+	DropdownSelect,
 	injectNotificationManager,
 	NewModal,
 	ProjectStatusBadge,
@@ -338,7 +336,6 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
-import { Multiselect } from 'vue-multiselect'
 
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import OrganizationProjectTransferModal from '~/components/ui/OrganizationProjectTransferModal.vue'
@@ -466,6 +463,7 @@ const updateSort = (inputProjects, sort, descending) => {
 const sortedProjects = ref(updateSort(projects.value, 'Name'))
 const selectedProjects = ref([])
 const sortBy = ref('Name')
+const sortOptions = ['Name', 'Status', 'Type']
 const descending = ref(false)
 const editLinksModal = ref(null)
 
@@ -674,11 +672,6 @@ const onBulkEditLinks = async () => {
 	white-space: nowrap;
 }
 
-.small-select {
-	width: -moz-fit-content;
-	width: fit-content;
-}
-
 .label-button[data-active='true'] {
 	--background-color: var(--color-red);
 	--text-color: var(--color-brand-inverted);
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6bae52de85..99c09b07d9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -76,7 +76,6 @@
 		"qrcode.vue": "^3.4.1",
 		"three": "^0.172.0",
 		"vue-i18n": "^10.0.0",
-		"vue-multiselect": "3.0.0",
 		"vue-select": "4.0.0-beta.6",
 		"vue-typed-virtual-list": "^1.0.10",
 		"vue3-ace-editor": "^2.2.4",
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index e8d44ac273..d1ad246932 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -325,92 +325,15 @@
 					</div>
 				</div>
 				<p class="my-2 text-lg font-bold">Pay for it with</p>
-				<multiselect
-					v-model="selectedPaymentMethod"
+				<Combobox
+					v-model="selectedPaymentMethodId"
 					placeholder="Payment method"
-					label="id"
-					track-by="id"
-					:options="selectablePaymentMethods"
-					:option-height="104"
-					:show-labels="false"
+					:options="selectablePaymentMethodOptions"
 					:searchable="false"
-					:close-on-select="true"
-					:allow-empty="false"
-					open-direction="top"
+					:show-icon-in-selected="true"
+					force-direction="up"
 					class="max-w-[20rem]"
-					@select="selectPaymentMethod"
-				>
-					<!-- eslint-disable-next-line vue/no-template-shadow -->
-					<template #singleLabel="props">
-						<div class="flex items-center gap-2">
-							<CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
-							<CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
-							<PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
-
-							<span v-if="props.option.type === 'card'">
-								{{
-									formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
-										card_brand:
-											formatMessage(paymentMethodMessages[props.option.card.brand]) ??
-											formatMessage(paymentMethodMessages.unknown),
-										last_four: props.option.card.last4,
-									})
-								}}
-							</span>
-							<template v-else>
-								{{
-									formatMessage(paymentMethodMessages[props.option.type]) ??
-									formatMessage(paymentMethodMessages.unknown)
-								}}
-							</template>
-
-							<span v-if="props.option.type === 'cashapp' && props.option.cashapp.cashtag">
-								({{ props.option.cashapp.cashtag }})
-							</span>
-							<span v-else-if="props.option.type === 'paypal' && props.option.paypal.payer_email">
-								({{ props.option.paypal.payer_email }})
-							</span>
-						</div>
-					</template>
-					<!-- eslint-disable-next-line vue/no-template-shadow -->
-					<template #option="props">
-						<div class="flex items-center gap-2">
-							<template v-if="props.option.id === 'new'">
-								<PlusIcon class="h-8 w-8" />
-								<span class="text-secondary">Add payment method</span>
-							</template>
-							<template v-else>
-								<CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
-								<CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
-								<PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
-
-								<span v-if="props.option.type === 'card'">
-									{{
-										formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
-											card_brand:
-												formatMessage(paymentMethodMessages[props.option.card.brand]) ??
-												formatMessage(paymentMethodMessages.unknown),
-											last_four: props.option.card.last4,
-										})
-									}}
-								</span>
-								<template v-else>
-									{{
-										formatMessage(paymentMethodMessages[props.option.type]) ??
-										formatMessage(paymentMethodMessages.unknown)
-									}}
-								</template>
-
-								<span v-if="props.option.type === 'cashapp'">
-									({{ props.option.cashapp.cashtag }})
-								</span>
-								<span v-else-if="props.option.type === 'paypal'">
-									({{ props.option.paypal.payer_email }})
-								</span>
-							</template>
-						</div>
-					</template>
-				</multiselect>
+				/>
 			</div>
 			<p class="m-0 mt-9 text-sm text-secondary">
 				<strong>By clicking "Subscribe", you are purchasing a recurring subscription.</strong>
@@ -548,12 +471,12 @@ import {
 import { calculateSavings, createStripeElements, formatPrice, getCurrency } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
-import { Multiselect } from 'vue-multiselect'
 
 import { useVIntl } from '../../composables/i18n'
 import { paymentMethodMessages } from '../../utils/common-messages'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
+import Combobox from '../base/Combobox.vue'
 import Slider from '../base/Slider.vue'
 import StyledInput from '../base/StyledInput.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
@@ -783,6 +706,67 @@ const selectablePaymentMethods = computed(() => {
 	return values
 })
 
+function formatPaymentMethodLabel(paymentMethod) {
+	if (!paymentMethod) {
+		return formatMessage(paymentMethodMessages.unknown)
+	}
+
+	if (paymentMethod.id === 'new') {
+		return 'Add payment method'
+	}
+
+	if (paymentMethod.type === 'card') {
+		return formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
+			card_brand:
+				formatMessage(paymentMethodMessages[paymentMethod.card?.brand]) ??
+				formatMessage(paymentMethodMessages.unknown),
+			last_four: paymentMethod.card?.last4 ?? '****',
+		})
+	}
+
+	const typeLabel =
+		formatMessage(paymentMethodMessages[paymentMethod.type]) ??
+		formatMessage(paymentMethodMessages.unknown)
+	let suffix = ''
+
+	if (paymentMethod.type === 'cashapp' && paymentMethod.cashapp?.cashtag) {
+		suffix = ` (${paymentMethod.cashapp.cashtag})`
+	} else if (paymentMethod.type === 'paypal' && paymentMethod.paypal?.payer_email) {
+		suffix = ` (${paymentMethod.paypal.payer_email})`
+	}
+
+	return `${typeLabel}${suffix}`
+}
+
+function getPaymentMethodIcon(paymentMethod) {
+	if (paymentMethod.id === 'new') return PlusIcon
+	if (paymentMethod.type === 'card') return CardIcon
+	if (paymentMethod.type === 'cashapp') return CurrencyIcon
+	if (paymentMethod.type === 'paypal') return PayPalIcon
+	return undefined
+}
+
+const selectablePaymentMethodOptions = computed(() =>
+	selectablePaymentMethods.value.map((paymentMethod) => ({
+		value: paymentMethod.id,
+		label: formatPaymentMethodLabel(paymentMethod),
+		icon: getPaymentMethodIcon(paymentMethod),
+	})),
+)
+
+const selectedPaymentMethodId = computed({
+	get: () => selectedPaymentMethod.value?.id ?? null,
+	set: (value) => {
+		if (!value) return
+
+		const paymentMethod = selectablePaymentMethods.value.find((method) => method.id === value)
+		if (paymentMethod) {
+			selectedPaymentMethod.value = paymentMethod
+			void selectPaymentMethod(paymentMethod)
+		}
+	},
+})
+
 const primaryPaymentMethodId = computed(() => {
 	if (
 		props.customer &&
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 755daacce8..7d35bc5d38 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -295,7 +295,7 @@ export const commonMessages = defineMessages({
 	},
 	sortByLabel: {
 		id: 'label.sort-by',
-		defaultMessage: 'Sort by',
+		defaultMessage: 'Sort by: ',
 	},
 	stopButton: {
 		id: 'button.stop',

From ab6cac05cc00c041ee6adb326aeaae6e8bf2f3c0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 11 Mar 2026 21:38:41 -0600
Subject: [PATCH 2/2] pnpm prepr

---
 packages/ui/src/locales/en-US/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 5154420755..0d39f44011 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -513,7 +513,7 @@
     "defaultMessage": "Singleplayer"
   },
   "label.sort-by": {
-    "defaultMessage": "Sort by"
+    "defaultMessage": "Sort by: "
   },
   "label.success": {
     "defaultMessage": "Success"