Rename NewModal -> Modal and rid the world of ModalWrapper

apps/app-frontend/src/components/ui/ErrorModal.vue

@@ -9,11 +9,10 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, Collapsible, injectNotificationManager, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { install_existing_instance } from '@/helpers/install'
@@ -151,7 +150,7 @@ async function copyToClipboard(text) {
 </script>
 
 <template>
-	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
+	<Modal ref="errorModal" :header="title" :closable="closable">
 		<div class="modal-body max-w-[550px]">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
@@ -323,7 +322,7 @@ async function copyToClipboard(text) {
 				</div>
 			</template>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style>

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -6,7 +6,7 @@ import {
 	defineMessages,
 	FileTreeSelect,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -233,7 +233,7 @@ function isExportCandidateDisabled(path) {
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="exportModal"
 		:header="formatMessage(messages.header)"
 		scrollable
@@ -300,5 +300,5 @@ function isExportCandidateDisabled(path) {
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>

apps/app-frontend/src/components/ui/JavaDetectionModal.vue

@@ -1,9 +1,5 @@
 <template>
-	<ModalWrapper
-		ref="detectJavaModal"
-		:header="formatMessage(messages.title)"
-		:show-ad-on-close="false"
-	>
+	<Modal ref="detectJavaModal" :header="formatMessage(messages.title)">
 		<div class="flex flex-col gap-4">
 			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
 				<template #cell-version="{ value }">
@@ -46,7 +42,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
@@ -54,12 +50,12 @@ import {
 	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
+	Modal,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'
 

apps/app-frontend/src/components/ui/ModpackVersionModal.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge, ButtonStyled, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { update_managed_modrinth_version } from '@/helpers/instance'
 import { releaseColor } from '@/helpers/utils'
 
@@ -52,7 +51,7 @@ const onHide = () => {
 </script>
 
 <template>
-	<ModalWrapper
+	<Modal
 		ref="modpackVersionModal"
 		class="modpack-version-modal"
 		header="Change modpack version"
@@ -123,7 +122,7 @@ const onHide = () => {
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style scoped lang="scss">

apps/app-frontend/src/components/ui/URLConfirmModal.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Modal, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_project_v3, get_version } from '@/helpers/cache.js'
 import { injectContentInstall } from '@/providers/content-install'
 
@@ -45,7 +44,7 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
+	<Modal ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
 			<ProjectCard
 				:title="project.name"
@@ -75,7 +74,7 @@ async function install() {
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style scoped lang="scss">

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -6,6 +6,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	Modal,
 	StyledInput,
 	useRelativeTime,
 	useVIntl,
@@ -13,7 +14,6 @@ import {
 import { computed, ref } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { useFriends } from '@/composables/use-friends'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
@@ -176,7 +176,7 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<ModalWrapper ref="friendInvitesModal" header="View friend requests">
+	<Modal ref="friendInvitesModal" header="View friend requests">
 		<p v-if="incomingRequests.length === 0">You have no pending friend requests :C</p>
 		<div v-else class="flex flex-col gap-4 min-w-[40rem]">
 			<div v-for="friend in incomingRequests" :key="friend.username" class="flex gap-2">
@@ -222,8 +222,8 @@ const messages = defineMessages({
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
-	<ModalWrapper ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
+	</Modal>
+	<Modal ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
 		<div class="min-w-[30rem]">
 			<h2 class="m-0 text-base font-medium text-primary">
 				{{ formatMessage(messages.usernameTitle) }}
@@ -248,7 +248,7 @@ const messages = defineMessages({
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
 			<ButtonStyled circular type="transparent">

apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue

@@ -5,13 +5,13 @@ import {
 	Avatar,
 	ButtonStyled,
 	injectNotificationManager,
+	Modal,
 	StyledInput,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { list } from '@/helpers/instance'
 import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'
@@ -82,7 +82,7 @@ async function addServer(instance) {
 </script>
 
 <template>
-	<ModalWrapper ref="modal" header="Add server to instance">
+	<Modal ref="modal" header="Add server to instance">
 		<div class="flex flex-col gap-4 min-w-[350px]">
 			<Admonition type="warning" body="This server may not be compatible with all instances." />
 			<StyledInput
@@ -124,5 +124,5 @@ async function addServer(instance) {
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue

@@ -7,7 +7,7 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { Admonition, ButtonStyled, Collapsible, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -16,7 +16,7 @@ import { handleSevereError } from '@/store/error.js'
 
 import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const rawError = ref<string>('')
 const matchedError = ref<MinecraftAuthError | null>(null)
 const debugCollapsed = ref(true)
@@ -74,7 +74,7 @@ async function copyToClipboard(text: string) {
 </script>
 
 <template>
-	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
+	<Modal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
 		<div class="flex flex-col gap-6">
 			<Admonition
 				type="warning"
@@ -191,5 +191,5 @@ async function copyToClipboard(text: string) {
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>

apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
+	<Modal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
 		<div class="grid grid-cols-[1fr_auto] gap-2.5 h-[154px] px-7 pt-4 pb-1 pr-9">
 			<div class="flex flex-col gap-2.5 items-start justify-center h-min mt-5">
 				<div class="font-semibold text-xl text-contrast">
@@ -64,12 +64,12 @@
 				</a>
 			</p>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, Modal, useVIntl } from '@modrinth/ui'
 import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'
@@ -113,7 +113,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const loadingSignIn = ref(false)
 
 function show() {

apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
 		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
 			{{ formatMessage(messages.admonitionBody) }}
 		</Admonition>
@@ -20,7 +20,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -30,7 +30,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -61,7 +61,7 @@ const emit = defineEmits<{
 	(e: 'delete'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 function show() {
 	modal.value?.show()

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.installToPlay)"
 		:closable="true"
@@ -151,7 +151,7 @@
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 
 	<ModpackContentModal
 		ref="modpackContentModal"
@@ -172,7 +172,7 @@ import {
 	defineMessages,
 	formatLoader,
 	ModpackContentModal,
-	NewModal,
+	Modal,
 	Table,
 	type TableColumn,
 	useScrollIndicator,
@@ -191,7 +191,7 @@ type ExternalFileRow = {
 	name: string
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 const project = ref<Labrinth.Projects.v3.Project | null>(null)

apps/app-frontend/src/components/ui/modal/ModalWrapper.vue

@@ -1,56 +0,0 @@
-<!-- @deprecated Use NewModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
-<script setup lang="ts">
-import { NewModal as Modal } from '@modrinth/ui'
-import { useTemplateRef } from 'vue'
-
-const props = defineProps({
-	header: {
-		type: String,
-		default: null,
-	},
-	hideHeader: {
-		type: Boolean,
-		default: false,
-	},
-	closable: {
-		type: Boolean,
-		default: true,
-	},
-	onHide: {
-		type: Function,
-		default() {
-			return () => {}
-		},
-	},
-	/** @deprecated No longer used — ads are handled by provideModalBehavior */
-	showAdOnClose: {
-		type: Boolean,
-		default: true,
-	},
-})
-const modal = useTemplateRef('modal')
-
-defineExpose({
-	show: (e?: MouseEvent) => {
-		modal.value?.show(e)
-	},
-	hide: () => {
-		modal.value?.hide()
-	},
-})
-</script>
-
-<template>
-	<Modal
-		ref="modal"
-		:header="header"
-		:closable="closable"
-		:hide-header="hideHeader"
-		:on-hide="() => props.onHide?.()"
-	>
-		<template #title>
-			<slot name="title" />
-		</template>
-		<slot />
-	</Modal>
-</template>

apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
 		<p class="m-0 text-secondary">
 			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
 				<template #bold="{ children }">
@@ -30,7 +30,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -72,7 +72,7 @@ const emit = defineEmits<{
 	(e: 'create-anyway'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const instanceName = ref('')
 const instanceId = ref('')
 

apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(authenticating ? messages.signingInHeader : messages.header)"
 		:on-hide="handleHide"
@@ -103,12 +103,12 @@
 				</p>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, IntlFormatted, Modal, useVIntl } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { ref } from 'vue'
 
@@ -119,7 +119,7 @@ const props = defineProps<{
 }>()
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const authenticating = ref<ModrinthAuthFlow | null>(null)
 const reopeningBrowser = ref(false)
 let resolveShow: ((signedIn: boolean) => void) | undefined

apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
 		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
 			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: inviteCode }">
 				<template #monospace="{ children }">
@@ -24,7 +24,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -35,13 +35,13 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const inviteCode = ref('')
 
 const emit = defineEmits<{

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
 		<p class="m-0 text-secondary">
 			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
 				<template #bold="{ children }">
@@ -30,7 +30,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -71,7 +71,7 @@ const emit = defineEmits<{
 	(e: 'cancel' | 'go-to-instance' | 'install-anyway'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const instanceName = ref('')
 
 function show(name: string) {

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue

@@ -28,7 +28,7 @@
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
 
-	<NewModal
+	<Modal
 		ref="unpublishModal"
 		:header="formatMessage(messages.unpublishModalHeader)"
 		fade="warning"
@@ -50,8 +50,8 @@
 				>
 			</div></template
 		>
-	</NewModal>
-	<NewModal
+	</Modal>
+	<Modal
 		ref="unlinkModal"
 		:header="formatMessage(messages.unlinkModalHeader)"
 		fade="warning"
@@ -81,7 +81,7 @@
 				>
 			</div></template
 		>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -92,7 +92,7 @@ import {
 	commonMessages,
 	defineMessages,
 	InlineBackupCreator,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -117,8 +117,8 @@ const props = withDefaults(
 	},
 )
 const { formatMessage } = useVIntl()
-const unpublishModal = ref<InstanceType<typeof NewModal>>()
-const unlinkModal = ref<InstanceType<typeof NewModal>>()
+const unpublishModal = ref<InstanceType<typeof Modal>>()
+const unlinkModal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const backupBusy = ref(false)
 

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			reportMode
@@ -242,7 +242,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 	<ModpackContentModal
 		ref="contentModal"
 		:header="formatMessage(messages.sharedInstanceContent)"
@@ -271,7 +271,7 @@ import {
 	IntlFormatted,
 	MarkdownEditor,
 	ModpackContentModal,
-	NewModal,
+	Modal,
 	Table,
 	type TableColumn,
 	useScrollIndicator,
@@ -302,7 +302,7 @@ type SharedInstanceCreator = {
 	avatarUrl: string | null
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const contentModal = ref<InstanceType<typeof ModpackContentModal>>()
 const externalFileTable = ref<HTMLElement | null>(null)
 const preview = ref<SharedInstanceInstallPreview | null>(null)

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :on-hide="handleModalHide">
+	<Modal ref="modal" :on-hide="handleModalHide">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
 				{{ formatMessage(mode === 'edit' ? messages.editSkinTitle : messages.addSkinTitle) }}
@@ -127,7 +127,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -139,7 +139,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	RadioButtons,
 	SkinPreviewRenderer,
 	useScrollIndicator,

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

@@ -5,7 +5,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -29,7 +29,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const name = ref('')
 const address = ref('')
@@ -88,7 +88,7 @@ const messages = defineMessages({
 defineExpose({ show, hide })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
@@ -116,5 +116,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>

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

@@ -5,7 +5,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -59,7 +59,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const isServer = computed(() => props.world?.type === 'server')
 const isSingleplayer = computed(() => props.world?.type === 'singleplayer')
@@ -94,7 +94,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(titleMessage)" fade="danger" max-width="500px">
 		<div class="flex flex-col gap-4">
 			<Admonition
 				type="critical"
@@ -120,5 +120,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>

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

@@ -5,7 +5,7 @@ import {
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -32,7 +32,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const name = ref<string>('')
 const address = ref<string>('')
@@ -96,7 +96,7 @@ const titleMessage = defineMessage({
 })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
@@ -119,5 +119,5 @@ const titleMessage = defineMessage({
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>

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

@@ -6,12 +6,12 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import type { GameInstance } from '@/helpers/types'
 import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
@@ -94,7 +94,7 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<Modal ref="modal">
 		<template #title>
 			<Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
 			{{ instance.name }} <ChevronRightIcon />
@@ -132,5 +132,5 @@ const messages = defineMessages({
 				</button>
 			</ButtonStyled>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>

apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		max-width="470px"
@@ -44,7 +44,7 @@
 				>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -55,7 +55,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -64,7 +64,7 @@ import { methodLabels, type ShareRow } from './shared-instance-share-types'
 
 const props = defineProps<{ row: ShareRow | null; memberCount: number }>()
 const emit = defineEmits<{ confirm: [row: ShareRow]; clear: [] }>()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const { formatMessage } = useVIntl()
 const username = computed(() => props.row?.username ?? '')
 const messages = defineMessages({