feat: remove teleport dropdown modal in favour of new combobox component

Author: IMB11

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -15,8 +15,8 @@ import {
 	ButtonStyled,
 	Checkbox,
 	Chips,
+	Combobox,
 	injectNotificationManager,
-	TeleportDropdownMenu,
 } from '@modrinth/ui'
 import {
 	formatCategory,
@@ -158,6 +158,21 @@ const selectableGameVersionNumbers = computed(() => {
 		.map((x) => x.version)
 })
 
+const gameVersionOptions = computed(() =>
+	(selectableGameVersionNumbers.value ?? []).map((v) => ({ value: v, label: v })),
+)
+
+const loaderVersionOptions = computed(() =>
+	(selectableLoaderVersions.value ?? []).map((opt, index) => ({ value: index, label: opt.id })),
+)
+
+const loaderVersionLabel = computed(() => {
+	const idx = loaderVersionIndex.value
+	return idx >= 0 && selectableLoaderVersions.value
+		? selectableLoaderVersions.value[idx]?.id
+		: 'Select version'
+})
+
 const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
 	if (gameVersion.value) {
 		if (loader.value === 'fabric') {
@@ -647,11 +662,11 @@ const messages = defineMessages({
 				{{ formatMessage(messages.gameVersion) }}
 			</h2>
 			<div class="flex flex-wrap mt-2 gap-2">
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableGameVersionNumbers !== undefined"
 					v-model="gameVersion"
-					:options="selectableGameVersionNumbers"
-					name="Game Version Dropdown"
+					:options="gameVersionOptions"
+					:display-value="gameVersion || formatMessage(messages.unknownVersion)"
 				/>
 				<Checkbox
 					v-if="hasSnapshots"
@@ -663,14 +678,13 @@ const messages = defineMessages({
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
 					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
 				</h2>
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableLoaderVersions"
-					:model-value="selectableLoaderVersions[loaderVersionIndex]"
-					:options="selectableLoaderVersions"
-					:display-name="(option: ManifestLoaderVersion) => option?.id"
+					v-model="loaderVersionIndex"
+					:options="loaderVersionOptions"
+					:display-value="loaderVersionLabel"
 					name="Version selector"
 					class="mt-2"
-					@change="(value) => (loaderVersionIndex = value.index)"
 				/>
 				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
 					<IssuesIcon />

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
@@ -50,7 +50,7 @@ watch(
 			:model-value="themeStore.advancedRendering"
 			@update:model-value="
 				(e) => {
-					themeStore.advancedRendering = e
+					themeStore.advancedRendering = !!e
 					settings.advanced_rendering = themeStore.advancedRendering
 				}
 			"
@@ -86,12 +86,13 @@ watch(
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
 			<p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
 		</div>
-		<TeleportDropdownMenu
+		<Combobox
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
 			class="w-40"
-			:options="['Home', 'Library']"
+			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
+			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>
 
@@ -122,7 +123,7 @@ watch(
 			:model-value="settings.toggle_sidebar"
 			@update:model-value="
 				(e) => {
-					settings.toggle_sidebar = e
+					settings.toggle_sidebar = !!e
 					themeStore.toggleSidebar = settings.toggle_sidebar
 				}
 			"

apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu } from '@modrinth/ui'
+import { Combobox } from '@modrinth/ui'
 import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
@@ -74,12 +74,19 @@ defineExpose({ resourcePackOptions })
 			{{ formatMessage(messages.resourcePack) }}
 		</h2>
 		<div>
-			<TeleportDropdownMenu
+			<Combobox
 				v-model="resourcePack"
-				:options="resourcePackOptions"
+				:options="
+					resourcePackOptions.map((o) => ({
+						value: o,
+						label: formatMessage(resourcePackOptionMessages[o]),
+					}))
+				"
 				name="Server resource pack"
-				:display-name="
-					(option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+				:display-value="
+					resourcePack
+						? formatMessage(resourcePackOptionMessages[resourcePack])
+						: 'Select an option'
 				"
 			/>
 		</div>

apps/frontend/src/components/ui/NavStack.vue

@@ -1,13 +1,11 @@
 <template>
 	<nav :aria-label="ariaLabel" class="w-full">
-		<ul
-			class="border-surface-4 bg-surface-1 m-0 flex list-none flex-col items-start gap-1.5 rounded-2xl border border-solid p-4"
-		>
+		<ul class="m-0 flex list-none flex-col items-start gap-1.5 rounded-2xl bg-bg-raised p-4">
 			<slot v-if="hasSlotContent" />
 
 			<template v-else>
 				<li v-for="(item, idx) in items" :key="getKey(item, idx)" class="contents">
-					<hr v-if="isSeparator(item)" class="border-surface-4 my-1 w-full border-t border-solid" />
+					<hr v-if="isSeparator(item)" class="my-1 w-full border-t border-solid" />
 
 					<div
 						v-else-if="isHeading(item)"
@@ -27,7 +25,7 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span>{{ item.label }}</span>
+						<span class="text-contrast">{{ item.label }}</span>
 						<span
 							v-if="item.badge != null"
 							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
@@ -49,7 +47,7 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span>{{ item.label }}</span>
+						<span class="text-contrast">{{ item.label }}</span>
 						<span
 							v-if="item.badge != null"
 							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"

apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue

@@ -76,7 +76,7 @@
 						class="my-auto size-4 text-secondary"
 					/>
 				</div>
-				<FancyDropdown
+				<Combobox
 					:listbox="true"
 					:searchable="true"
 					v-model="countryId"
@@ -89,7 +89,7 @@
 					<span>Withdraw to</span><span class="text-brand-red">*</span>
 				</div>
 				<div class="relative">
-					<FancyDropdown
+					<Combobox
 						:listbox="true"
 						v-model="paymentMethodId"
 						class="payment-method-select w-full"
@@ -98,75 +98,7 @@
 						:displayValue="
 							paymentMethod ? formatPaymentMethodName(paymentMethod) : 'Select method...'
 						"
-					>
-						<template #extra>
-							<div v-if="paymentMethod && showPaymentDetails" class="w-full">
-								<div class="flex items-center justify-between text-sm">
-									<span class="text-primary">{{ paymentAccountDisplay }}</span>
-									<button
-										@click="editPaymentMethod"
-										class="flex items-center gap-1 text-primary hover:text-contrast"
-									>
-										<span>Change</span>
-										<EditIcon class="h-4 w-4" />
-									</button>
-								</div>
-							</div>
-
-							<div v-else-if="paymentMethod && isPayPalSelected" class="flex w-full flex-col gap-2">
-								<div class="flex items-center gap-2">
-									<ButtonStyled color="brand">
-										<button @click="verifyPayPal" :disabled="isVerifying">
-											Sign in with PayPal
-										</button>
-									</ButtonStyled>
-									<button
-										v-if="hasLinkedPayPal"
-										class="text-sm text-secondary underline-offset-2 hover:underline"
-										@click="cancelEditingLink"
-									>
-										Cancel
-									</button>
-								</div>
-								<p class="text-xs text-secondary">
-									We'll redirect you to PayPal to connect your account.
-								</p>
-							</div>
-
-							<div v-else-if="paymentMethod && isVenmoSelected" class="flex w-full flex-col gap-2">
-								<label for="venmo-handle" class="text-sm text-primary">Venmo username</label>
-								<input
-									id="venmo-handle"
-									v-model="venmoHandle"
-									type="text"
-									autocomplete="off"
-									placeholder="@username"
-									class="rounded-xl border border-divider bg-button-bg px-3 py-2 text-sm focus:outline-none"
-								/>
-								<div class="flex items-center gap-2">
-									<ButtonStyled color="standard">
-										<button @click="verifyVenmo" :disabled="isVerifying || !venmoHandleValid">
-											Verify
-										</button>
-									</ButtonStyled>
-									<button
-										v-if="hasLinkedVenmo"
-										class="text-sm text-secondary underline-offset-2 hover:underline"
-										@click="cancelEditingLink"
-									>
-										Cancel
-									</button>
-								</div>
-								<p class="text-xs text-secondary">
-									Enter your Venmo username. We'll save it to your account.
-								</p>
-							</div>
-
-							<div v-else class="text-sm text-secondary">
-								Tremendous™️ will contact you with redeem instructions using your Modrinth email.
-							</div>
-						</template>
-					</FancyDropdown>
+					/>
 				</div>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
@@ -250,19 +182,23 @@
 import {
 	CheckIcon,
 	ChevronRightIcon,
-	EditIcon,
 	FileTextIcon,
 	TransferIcon,
 	UnknownIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, NewModal, injectNotificationManager } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	Combobox,
+	NewModal,
+	injectNotificationManager,
+} from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
 import type { CSSProperties } from 'vue'
 import { getAuthUrl } from '~/composables/auth.js'
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
-import FancyDropdown from './FancyDropdown.vue'
 
 const { addNotification, handleError } = injectNotificationManager()
 

apps/frontend/src/components/ui/servers/BackupSettingsModal.vue

@@ -27,13 +27,13 @@
 					</p>
 				</div>
 
-				<TeleportDropdownMenu
+				<Combobox
 					:id="'interval-field'"
 					v-model="backupIntervalsLabel"
 					:disabled="!autoBackupEnabled || isSaving"
 					name="interval"
-					:options="Object.keys(backupIntervals)"
-					placeholder="Backup interval"
+					:options="Object.keys(backupIntervals).map((k) => ({ value: k, label: k }))"
+					:display-value="backupIntervalsLabel"
 				/>
 
 				<div class="mt-4 flex justify-start gap-4">
@@ -57,12 +57,7 @@
 
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	injectNotificationManager,
-	NewModal,
-	TeleportDropdownMenu,
-} from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'

apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue

@@ -60,16 +60,24 @@
 							</NuxtLink>
 						</div>
 					</div>
-					<TeleportDropdownMenu
+					<Combobox
 						v-model="selectedVersion"
 						name="Project"
-						:options="filteredVersions"
-						placeholder="No valid versions found"
+						:options="
+							filteredVersions.map((v) => ({
+								value: v,
+								label: typeof v === 'object' ? v.version_number : String(v),
+							}))
+						"
+						:display-value="
+							selectedVersion
+								? typeof selectedVersion === 'object'
+									? selectedVersion.version_number
+									: String(selectedVersion)
+								: 'No valid versions found'
+						"
 						class="!min-w-full"
 						:disabled="filteredVersions.length === 0"
-						:display-name="
-							(version) => (typeof version === 'object' ? version?.version_number : version)
-						"
 					/>
 					<Checkbox v-model="showBetaAlphaReleases"> Show any beta and alpha releases </Checkbox>
 				</template>
@@ -237,14 +245,7 @@ import {
 	LockOpenIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	CopyCode,
-	NewModal,
-	TeleportDropdownMenu,
-} from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Combobox, CopyCode, NewModal } from '@modrinth/ui'
 import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'