From 5ffe14f058b0d32308f96c248b0325410c82e0ab Mon Sep 17 00:00:00 2001
From: "Cal H." <hendersoncal117@gmail.com>
Date: Mon, 18 Aug 2025 12:46:58 +0100
Subject: [PATCH] fix: undefined functions/properties across frontend (#4210)

* fix: notification mark as read

* revert: composition API change

* fix: categories

* feat: enable vue/no-undef-properties in 'warn' mode.

* fix: app undefined properties

* revert: ss block

* fix: eslint-disable for [version].vue
---
 .../components/ui/InstanceCreationModal.vue   |    2 +-
 .../src/components/ui/SplashScreen.vue        |    8 +-
 .../src/components/ui/NotificationItem.vue    |   11 +-
 .../ui/OrganizationProjectTransferModal.vue   |    1 +
 .../src/components/ui/charts/ChartDisplay.vue |    9 +-
 .../ui/servers/notice/NoticeDashboardItem.vue |    8 +-
 .../src/helpers/platform-notifications.ts     |   27 +-
 apps/frontend/src/pages/[type]/[id].vue       |    2 +-
 .../pages/[type]/[id]/version/[version].vue   | 1151 +++++++++--------
 .../src/pages/[type]/[id]/versions.vue        |    2 +
 apps/frontend/src/pages/auth/authorize.vue    |    1 +
 apps/frontend/src/pages/auth/sign-in.vue      |    1 +
 apps/frontend/src/pages/auth/sign-up.vue      |    1 +
 apps/frontend/src/pages/auth/welcome.vue      |    2 +
 apps/frontend/src/pages/collection/[id].vue   |    2 +
 .../src/pages/dashboard/revenue/index.vue     |    2 +-
 apps/frontend/src/pages/plus.vue              |    2 +
 apps/frontend/src/pages/servers/index.vue     |    1 +
 apps/frontend/src/pages/settings/account.vue  |    2 +-
 .../src/pages/settings/billing/index.vue      |    3 +-
 apps/frontend/src/pages/settings/index.vue    |    1 +
 packages/tooling-config/eslint/nuxt.mjs       |    1 +
 22 files changed, 684 insertions(+), 556 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
index 5afd14dd..330273a3 100644
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -110,7 +110,7 @@
 							placeholder="Path to launcher"
 							@change="setPath"
 						/>
-						<Button class="r-btn" @click="() => (selectedLauncherPath = '')">
+						<Button class="r-btn" @click="() => (selectedProfileType.path = '')">
 							<XIcon />
 						</Button>
 					</div>
diff --git a/apps/app-frontend/src/components/ui/SplashScreen.vue b/apps/app-frontend/src/components/ui/SplashScreen.vue
index c2edf941..a881eb10 100644
--- a/apps/app-frontend/src/components/ui/SplashScreen.vue
+++ b/apps/app-frontend/src/components/ui/SplashScreen.vue
@@ -1,10 +1,14 @@
 <template>
 	<div v-if="!hidden" class="splash-screen dark" :class="{ 'fade-out': doneLoading }">
 		<div v-if="os !== 'MacOS'" class="app-buttons">
-			<button class="btn icon-only transparent" icon-only @click="() => getCurrent().minimize()">
+			<button
+				class="btn icon-only transparent"
+				icon-only
+				@click="() => getCurrentWindow().minimize()"
+			>
 				<MinimizeIcon />
 			</button>
-			<button class="btn icon-only transparent" @click="() => getCurrent().toggleMaximize()">
+			<button class="btn icon-only transparent" @click="() => getCurrentWindow().toggleMaximize()">
 				<MaximizeIcon />
 			</button>
 			<button class="btn icon-only transparent" @click="handleClose">
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 516a9ada..1e34a302 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -173,7 +173,7 @@
 					<span class="version-info">
 						for
 						<Categories
-							:categories="notif.extra_data.version.loaders"
+							:categories="loaderCategories"
 							:type="notif.extra_data.project.project_type"
 							class="categories"
 						/>
@@ -340,8 +340,11 @@ import {
 	ProjectStatusBadge,
 	useRelativeTime,
 } from '@modrinth/ui'
+import { getUserLink, renderString } from '@modrinth/utils'
 
+import { markAsRead } from '~/helpers/platform-notifications'
 import { getProjectLink, getVersionLink } from '~/helpers/projects'
+import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 
 import ThreadSummary from './thread/ThreadSummary.vue'
 
@@ -388,6 +391,12 @@ const user = computed(() => props.notification.extra_data.user)
 const organization = computed(() => props.notification.extra_data.organization)
 const invitedBy = computed(() => props.notification.extra_data.invited_by)
 
+const loaderCategories = computed(() => {
+	return tags.value.loaders.filter((loader) => {
+		return version.value?.loaders?.includes(loader.name)
+	})
+})
+
 const threadLink = computed(() => {
 	if (report.value) {
 		return `/dashboard/report/${report.value.id}`
diff --git a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
index 7cd718af..e04ea82e 100644
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
@@ -113,6 +113,7 @@ import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from '@modrinth/assets'
 import { Avatar, Button, Checkbox, CopyCode, Modal } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 
+const EDIT_DETAILS = 1 << 2
 const modalOpen = ref(null)
 
 const props = defineProps({
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index d3a1ff49..d68daf3c 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -312,7 +312,14 @@ import { computed } from 'vue'
 
 import { UiChartsChart as Chart, UiChartsCompactChart as CompactChart } from '#components'
 import PaletteIcon from '~/assets/icons/palette.svg?component'
-import { analyticsSetToCSVString, intToRgba } from '~/utils/analytics.js'
+import {
+	analyticsSetToCSVString,
+	countryCodeToFlag,
+	countryCodeToName,
+	formatPercent,
+	getDefaultColor,
+	intToRgba,
+} from '~/utils/analytics.js'
 
 const router = useNativeRouter()
 const theme = useTheme()
diff --git a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
index 461ef39f..0094c1d4 100644
--- a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
+++ b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { EditIcon, SettingsIcon, TrashIcon } from '@modrinth/assets'
+import { SettingsIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
-	commonMessages,
 	CopyCode,
 	getDismissableMetadata,
 	NOTICE_LEVELS,
@@ -73,7 +71,7 @@ defineProps<{
 				</TagItem>
 			</div>
 			<div class="col-span-2 flex gap-2 md:col-span-1">
-				<ButtonStyled>
+				<!-- <ButtonStyled>
 					<button @click="() => startEditing(notice)">
 						<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
 					</button>
@@ -82,7 +80,7 @@ defineProps<{
 					<button @click="() => deleteNotice(notice)">
 						<TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}
 					</button>
-				</ButtonStyled>
+				</ButtonStyled> -->
 			</div>
 		</div>
 		<div class="col-span-full grid">
diff --git a/apps/frontend/src/helpers/platform-notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
index 8a9dd315..e151d583 100644
--- a/apps/frontend/src/helpers/platform-notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -1,4 +1,3 @@
-import { injectNotificationManager } from '@modrinth/ui'
 import type { Organization, Project, Report, User, Version } from '@modrinth/utils'
 
 type Thread = { id: string }
@@ -156,24 +155,14 @@ function isSimilar(a: PlatformNotification, b: PlatformNotification | undefined)
 export async function markAsRead(
 	ids: string[],
 ): Promise<(notifications: PlatformNotification[]) => PlatformNotification[]> {
-	try {
-		await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
-			method: 'PATCH',
+	await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
+		method: 'PATCH',
+	})
+	return (notifications: PlatformNotification[]) => {
+		const newNotifs = notifications ?? []
+		newNotifs.forEach((n) => {
+			if (ids.includes(n.id)) n.read = true
 		})
-		return (notifications: PlatformNotification[]) => {
-			const newNotifs = notifications ?? []
-			newNotifs.forEach((n) => {
-				if (ids.includes(n.id)) n.read = true
-			})
-			return newNotifs
-		}
-	} catch (err: any) {
-		const { addNotification } = injectNotificationManager()
-		addNotification({
-			title: 'Error marking notification as read',
-			text: err?.data?.description ?? err,
-			type: 'error',
-		})
-		return () => []
+		return newNotifs
 	}
 }
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index b429d96b..1615608e 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -984,7 +984,7 @@ import NavStackItem from '~/components/ui/NavStackItem.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
-import { userCollectProject } from '~/composables/user.js'
+import { userCollectProject, userFollowProject } from '~/composables/user.js'
 import { useModerationStore } from '~/store/moderation.ts'
 import { reportProject } from '~/utils/report-helpers.ts'
 
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index e126a93f..375031b3 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -1,3 +1,5 @@
+<!-- eslint-disable vue/no-undef-components -->
+<!-- TODO: Remove this^after converting to composition API. -->
 <template>
 	<div v-if="version" class="version-page">
 		<ConfirmModal
@@ -9,7 +11,7 @@
 			proceed-label="Delete"
 			@proceed="deleteVersion()"
 		/>
-		<Modal v-if="auth.user && currentMember" ref="modalPackageMod" header="Package data pack">
+		<Modal v-if="auth.user && currentMember" ref="modal_package_mod" header="Package data pack">
 			<div class="modal-package-mod universal-labels">
 				<div class="markdown-body">
 					<p>
@@ -24,7 +26,7 @@
 						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']"
@@ -38,13 +40,13 @@
 				/>
 				<div class="button-group">
 					<ButtonStyled>
-						<button @click="modalPackageMod?.hide()">
+						<button @click="$refs.modal_package_mod.hide()">
 							<XIcon aria-hidden="true" />
 							Cancel
 						</button>
 					</ButtonStyled>
 					<ButtonStyled color="brand">
-						<button @click="createDataPackVersionHandler">
+						<button @click="createDataPackVersion">
 							<RightArrowIcon aria-hidden="true" />
 							Begin packaging data pack
 						</button>
@@ -159,7 +161,7 @@
 					</nuxt-link>
 				</ButtonStyled>
 				<ButtonStyled v-else-if="!currentMember">
-					<button @click="reportVersion(version.id)">
+					<button @click="() => reportVersion(version.id)">
 						<ReportIcon aria-hidden="true" />
 						Report
 					</button>
@@ -182,7 +184,7 @@
 							currentMember &&
 							version.loaders.some((x) => tags.loaderData.dataPackLoaders.includes(x))
 						"
-						@click="modalPackageMod?.show()"
+						@click="$refs.modal_package_mod.show()"
 					>
 						<BoxIcon aria-hidden="true" />
 						Package as mod
@@ -339,14 +341,14 @@
 				:key="file.hashes.sha1"
 				:class="{
 					file: true,
-					primary: primaryFile?.hashes?.sha1 === file.hashes.sha1,
+					primary: primaryFile.hashes.sha1 === file.hashes.sha1,
 				}"
 			>
 				<FileIcon aria-hidden="true" />
 				<span class="filename">
 					<strong>{{ file.filename }}</strong>
 					<span class="file-size">({{ formatBytes(file.size) }})</span>
-					<span v-if="primaryFile?.hashes?.sha1 === file.hashes.sha1" class="file-type">
+					<span v-if="primaryFile.hashes.sha1 === file.hashes.sha1" class="file-type">
 						Primary
 					</span>
 					<span
@@ -362,11 +364,11 @@
 						Optional resource pack
 					</span>
 				</span>
-				<Multiselect
+				<multiselect
 					v-if="
 						version.loaders.some((x) => tags.loaderData.dataPackLoaders.includes(x)) &&
 						isEditing &&
-						primaryFile?.hashes?.sha1 !== file.hashes.sha1
+						primaryFile.hashes.sha1 !== file.hashes.sha1
 					"
 					v-model="oldFileTypes[index]"
 					class="raised-multiselect"
@@ -382,7 +384,7 @@
 				<ButtonStyled v-if="isEditing">
 					<button
 						class="raised-button"
-						:disabled="primaryFile?.hashes?.sha1 === file.hashes.sha1"
+						:disabled="primaryFile.hashes.sha1 === file.hashes.sha1"
 						@click="
 							() => {
 								deleteFiles.push(file.hashes.sha1)
@@ -414,7 +416,7 @@
 						<strong>{{ file.name }}</strong>
 						<span class="file-size">({{ formatBytes(file.size) }})</span>
 					</span>
-					<Multiselect
+					<multiselect
 						v-if="version.loaders.some((x) => tags.loaderData.dataPackLoaders.includes(x))"
 						v-model="newFileTypes[index]"
 						class="raised-multiselect"
@@ -549,7 +551,7 @@
 				<div>
 					<h4>Game versions</h4>
 					<template v-if="isEditing">
-						<Multiselect
+						<multiselect
 							v-model="version.game_versions"
 							:options="
 								showSnapshots
@@ -601,6 +603,7 @@
 							size="sm"
 							circle
 						/>
+
 						<div class="member-info">
 							<nuxt-link :to="'/user/' + version.author.user.username" class="name">
 								<p>
@@ -628,10 +631,10 @@
 		</div>
 	</div>
 </template>
-
-<script setup>
+<script>
 import {
 	BoxIcon,
+	ChevronRightIcon,
 	DownloadIcon,
 	EditIcon,
 	FileIcon,
@@ -650,7 +653,6 @@ import {
 	Avatar,
 	Badge,
 	ButtonStyled,
-	Categories,
 	Checkbox,
 	ConfirmModal,
 	CopyCode,
@@ -660,9 +662,11 @@ import {
 import { formatBytes, formatCategory } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import FileInput from '~/components/ui/FileInput.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Categories from '~/components/ui/search/Categories.vue'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 import { renderHighlightedString } from '~/helpers/highlight.js'
@@ -670,561 +674,661 @@ import { inferVersionInfo } from '~/helpers/infer.js'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
-const props = defineProps({
-	project: { type: Object, default: () => ({}) },
-	versions: { type: Array, default: () => [] },
-	featuredVersions: { type: Array, default: () => [] },
-	members: { type: Array, default: () => [{}] },
-	currentMember: { type: Object, default: () => null },
-	dependencies: { type: Object, default: () => ({}) },
-	resetProject: {
-		type: Function,
-		required: true,
-		default: () => {},
+export default defineNuxtComponent({
+	components: {
+		MarkdownEditor,
+		Modal,
+		FileInput,
+		Checkbox,
+		ChevronRightIcon,
+		Categories,
+		DownloadIcon,
+		EditIcon,
+		TrashIcon,
+		StarIcon,
+		FileIcon,
+		ReportIcon,
+		SaveIcon,
+		XIcon,
+		HashIcon,
+		PlusIcon,
+		TransferIcon,
+		UploadIcon,
+		Avatar,
+		Badge,
+		Breadcrumbs,
+		CopyCode,
+		Multiselect,
+		BoxIcon,
+		RightArrowIcon,
+		ConfirmModal,
+		ButtonStyled,
+		AdPlaceholder,
 	},
-})
+	props: {
+		project: {
+			type: Object,
+			default() {
+				return {}
+			},
+		},
+		versions: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+		featuredVersions: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+		members: {
+			type: Array,
+			default() {
+				return [{}]
+			},
+		},
+		currentMember: {
+			type: Object,
+			default() {
+				return null
+			},
+		},
+		dependencies: {
+			type: Object,
+			default() {
+				return {}
+			},
+		},
+		resetProject: {
+			type: Function,
+			required: true,
+			default: () => {},
+		},
+	},
+	async setup(props) {
+		const data = useNuxtApp()
+		const route = useNativeRoute()
 
-const emit = defineEmits([
-	'update:dependencies',
-	'update:versions',
-	'update:featuredVersions',
-	'onDownload',
-])
+		const auth = await useAuth()
+		const tags = useTags()
+		const flags = useFeatureFlags()
 
-const nuxtApp = useNuxtApp()
-const router = useRouter()
-const route = typeof useNativeRoute === 'function' ? useNativeRoute() : useRoute()
+		const path = route.name.split('-')
+		const mode = path[path.length - 1]
 
-const auth = await useAuth()
-const tags = useTags()
-const flags = useFeatureFlags()
+		const fileTypes = [
+			{
+				display: 'Required resource pack',
+				value: 'required-resource-pack',
+			},
+			{
+				display: 'Optional resource pack',
+				value: 'optional-resource-pack',
+			},
+		]
+		let oldFileTypes = []
 
-const path = String(route.name || '').split('-')
-const mode = path[path.length - 1]
+		let isCreating = false
+		let isEditing = false
 
-const fileTypesConst = [
-	{ display: 'Required resource pack', value: 'required-resource-pack' },
-	{ display: 'Optional resource pack', value: 'optional-resource-pack' },
-]
+		let version = {}
+		let primaryFile = {}
+		let alternateFile = {}
 
-const fileTypes = ref(fileTypesConst)
-const oldFileTypes = ref([])
+		let replaceFile = null
 
-const isCreating = ref(false)
-const isEditing = ref(false)
-
-const version = ref({})
-const primaryFile = ref({})
-const alternateFile = ref({})
-const replaceFile = ref(null)
-const uploadedImageIds = ref([])
-
-const dependencyAddMode = ref('project')
-const newDependencyType = ref('required')
-const newDependencyId = ref('')
-
-const showSnapshots = ref(false)
-
-const newFiles = ref([])
-const deleteFiles = ref([])
-const newFileTypes = ref([])
-
-const packageLoaders = ref(['forge', 'fabric', 'quilt', 'neoforge'])
-
-const showKnownErrors = ref(false)
-const shouldPreventActions = ref(false)
-
-const { addNotification } = injectNotificationManager()
-
-{
-	if (mode === 'edit') {
-		isEditing.value = true
-	}
-
-	if (route.params.version === 'create') {
-		isCreating.value = true
-		isEditing.value = true
-
-		version.value = {
-			id: 'none',
-			project_id: props.project.id,
-			author_id: props.currentMember?.user?.id,
-			name: '',
-			version_number: '',
-			changelog: '',
-			date_published: Date.now(),
-			downloads: 0,
-			version_type: 'release',
-			files: [],
-			dependencies: [],
-			game_versions: [],
-			loaders: [],
-			featured: false,
+		if (mode === 'edit') {
+			isEditing = true
 		}
 
-		if (import.meta.client && history.state && history.state.newPrimaryFile) {
-			replaceFile.value = history.state.newPrimaryFile
-			try {
-				const inferredData = await inferVersionInfo(
-					replaceFile.value,
-					props.project,
-					tags.value.gameVersions,
-				)
-				version.value = { ...version.value, ...inferredData }
-			} catch (err) {
-				console.error('Error parsing version file data', err)
+		if (route.params.version === 'create') {
+			isCreating = true
+			isEditing = true
+
+			version = {
+				id: 'none',
+				project_id: props.project.id,
+				author_id: props.currentMember.user.id,
+				name: '',
+				version_number: '',
+				changelog: '',
+				date_published: Date.now(),
+				downloads: 0,
+				version_type: 'release',
+				files: [],
+				dependencies: [],
+				game_versions: [],
+				loaders: [],
+				featured: false,
+			}
+			// For navigation from versions page / upload file prompt
+			if (import.meta.client && history.state && history.state.newPrimaryFile) {
+				replaceFile = history.state.newPrimaryFile
+
+				try {
+					const inferredData = await inferVersionInfo(
+						replaceFile,
+						props.project,
+						tags.value.gameVersions,
+					)
+
+					version = {
+						...version,
+						...inferredData,
+					}
+				} catch (err) {
+					console.error('Error parsing version file data', err)
+				}
+			}
+		} else if (route.params.version === 'latest') {
+			let versionList = props.versions
+			if (route.query.loader) {
+				versionList = versionList.filter((x) => x.loaders.includes(route.query.loader))
+			}
+			if (route.query.version) {
+				versionList = versionList.filter((x) => x.game_versions.includes(route.query.version))
+			}
+			if (versionList.length === 0) {
+				throw createError({
+					fatal: true,
+					statusCode: 404,
+					message: 'No version matches the filters',
+				})
+			}
+			version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b))
+		} else {
+			version = props.versions.find((x) => x.id === route.params.version)
+
+			if (!version) {
+				version = props.versions.find((x) => x.displayUrlEnding === route.params.version)
 			}
 		}
-	} else if (route.params.version === 'latest') {
-		let versionList = props.versions
-		if (route.query.loader) {
-			versionList = versionList.filter((x) => x.loaders.includes(route.query.loader))
-		}
-		if (route.query.version) {
-			versionList = versionList.filter((x) => x.game_versions.includes(route.query.version))
-		}
-		if (versionList.length === 0) {
+
+		if (!version) {
 			throw createError({
 				fatal: true,
 				statusCode: 404,
-				message: 'No version matches the filters',
+				message: 'Version not found',
 			})
 		}
-		version.value = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b))
-	} else {
-		version.value = props.versions.find((x) => x.id === route.params.version)
-		if (!version.value) {
-			version.value = props.versions.find((x) => x.displayUrlEnding === route.params.version)
+
+		version = JSON.parse(JSON.stringify(version))
+		primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
+		alternateFile = version.files.find(
+			(file) => file.file_type && file.file_type.includes('resource-pack'),
+		)
+
+		for (const dependency of version.dependencies) {
+			dependency.version = props.dependencies.versions.find((x) => x.id === dependency.version_id)
+
+			if (dependency.version) {
+				dependency.project = props.dependencies.projects.find(
+					(x) => x.id === dependency.version.project_id,
+				)
+			}
+
+			if (!dependency.project) {
+				dependency.project = props.dependencies.projects.find((x) => x.id === dependency.project_id)
+			}
+
+			dependency.link = dependency.project
+				? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
+						dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
+					}`
+				: ''
 		}
-	}
 
-	if (!version.value) {
-		throw createError({ fatal: true, statusCode: 404, message: 'Version not found' })
-	}
+		oldFileTypes = version.files.map((x) => fileTypes.find((y) => y.value === x.file_type))
 
-	version.value = JSON.parse(JSON.stringify(version.value))
-	primaryFile.value = version.value.files.find((file) => file.primary) ?? version.value.files[0]
-	alternateFile.value = version.value.files.find(
-		(file) => file.file_type && file.file_type.includes('resource-pack'),
-	)
+		const title = computed(
+			() => `${isCreating ? 'Create Version' : version.name} - ${props.project.title}`,
+		)
+		const description = computed(
+			() =>
+				`Download ${props.project.title} ${
+					version.version_number
+				} on Modrinth. Supports ${data.$formatVersion(version.game_versions)} ${version.loaders
+					.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+					.join(' & ')}. Published on ${data
+					.$dayjs(version.date_published)
+					.format('MMM D, YYYY')}. ${version.downloads} downloads.`,
+		)
 
-	for (const dependency of version.value.dependencies) {
-		dependency.version = props.dependencies.versions.find((x) => x.id === dependency.version_id)
-		if (dependency.version) {
-			dependency.project = props.dependencies.projects.find(
-				(x) => x.id === dependency.version.project_id,
-			)
+		useSeoMeta({
+			title,
+			description,
+			ogTitle: title,
+			ogDescription: description,
+		})
+
+		return {
+			auth,
+			tags,
+			flags,
+			fileTypes: ref(fileTypes),
+			oldFileTypes: ref(oldFileTypes),
+			isCreating: ref(isCreating),
+			isEditing: ref(isEditing),
+			version: ref(version),
+			primaryFile: ref(primaryFile),
+			alternateFile: ref(alternateFile),
+			replaceFile: ref(replaceFile),
+			uploadedImageIds: ref([]),
 		}
-		if (!dependency.project) {
-			dependency.project = props.dependencies.projects.find((x) => x.id === dependency.project_id)
-		}
-		dependency.link = dependency.project
-			? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
-					dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
-				}`
-			: ''
-	}
-
-	oldFileTypes.value = version.value.files.map((x) =>
-		fileTypesConst.find((y) => y.value === x.file_type),
-	)
-}
-
-const title = computed(
-	() => `${isCreating.value ? 'Create Version' : version.value.name} - ${props.project.title}`,
-)
-const description = computed(
-	() =>
-		`Download ${props.project.title} ${version.value.version_number} on Modrinth. Supports ${nuxtApp.$formatVersion(
-			version.value.game_versions,
-		)} ${version.value.loaders
-			.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-			.join(
-				' & ',
-			)}. Published on ${nuxtApp.$dayjs(version.value.date_published).format('MMM D, YYYY')}. ${
-			version.value.downloads
-		} downloads.`,
-)
-
-useSeoMeta({
-	title,
-	description,
-	ogTitle: title,
-	ogDescription: description,
-})
-
-const fieldErrors = computed(
-	() =>
-		version.value.version_number === '' ||
-		version.value.game_versions.length === 0 ||
-		(version.value.loaders.length === 0 && props.project.project_type !== 'resourcepack') ||
-		(newFiles.value.length === 0 && version.value.files.length === 0 && !replaceFile.value),
-)
-
-const deps = computed(() => {
-	const order = ['required', 'optional', 'incompatible', 'embedded']
-	return [...version.value.dependencies].sort(
-		(a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type),
-	)
-})
-
-watch(
-	() => route.path,
-	() => {
-		const p = String(route.name || '').split('-')
-		const m = p[p.length - 1]
-		isEditing.value = m === 'edit' || route.params.version === 'create'
 	},
-)
+	data() {
+		return {
+			dependencyAddMode: 'project',
+			newDependencyType: 'required',
+			newDependencyId: '',
 
-const onImageUpload = async (file) => {
-	const response = await useImageUpload(file, { context: 'version' })
-	uploadedImageIds.value.push(response.id)
-	uploadedImageIds.value = uploadedImageIds.value.slice(-10)
-	return response.url
-}
+			showSnapshots: false,
 
-const getPreviousLink = () => {
-	const back = router.options?.history?.state?.back
-	if (back && back.includes('/versions')) return back
-	return `/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}/versions`
-}
+			newFiles: [],
+			deleteFiles: [],
+			replaceFile: null,
 
-const getPreviousLabel = () => {
-	const back = router.options?.history?.state?.back
-	return back && back.endsWith('/versions') ? 'Back to versions' : 'All versions'
-}
+			newFileTypes: [],
 
-const addDependency = async (modeArg, idArg, typeArg, hideErrors) => {
-	try {
-		if (modeArg === 'project') {
-			const project = await useBaseFetch(`project/${idArg}`)
-			if (version.value.dependencies.some((dep) => project.id === dep.project_id)) {
-				addNotification({
-					title: 'Dependency already added',
-					text: 'You cannot add the same dependency twice.',
-					type: 'error',
-				})
-			} else {
-				version.value.dependencies.push({
-					project,
-					project_id: project.id,
-					dependency_type: typeArg,
-					link: `/${project.project_type}/${project.slug ?? project.id}`,
-				})
-				emit('update:dependencies', {
-					projects: props.dependencies.projects.concat([project]),
-					versions: props.dependencies.versions,
-				})
-			}
-		} else if (modeArg === 'version') {
-			const v = await useBaseFetch(`version/${idArg}`)
-			const project = await useBaseFetch(`project/${v.project_id}`)
+			packageLoaders: ['forge', 'fabric', 'quilt', 'neoforge'],
 
-			if (version.value.dependencies.some((dep) => v.id === dep.version_id)) {
-				addNotification({
-					title: 'Dependency already added',
-					text: 'You cannot add the same dependency twice.',
-					type: 'error',
-				})
-			} else {
-				version.value.dependencies.push({
-					version: v,
-					project,
-					version_id: v.id,
-					project_id: project.id,
-					dependency_type: typeArg,
-					link: `/${project.project_type}/${project.slug ?? project.id}/version/${encodeURI(v.version_number)}`,
-				})
-				emit('update:dependencies', {
-					projects: props.dependencies.projects.concat([project]),
-					versions: props.dependencies.versions.concat([v]),
-				})
-			}
+			showKnownErrors: false,
+			shouldPreventActions: false,
 		}
-		newDependencyId.value = ''
-	} catch {
-		if (!hideErrors) {
-			addNotification({
-				title: 'Invalid Dependency',
-				text: 'The specified dependency could not be found',
-				type: 'error',
-			})
-		}
-	}
-}
-
-const loadingIndicator = typeof useLoadingIndicator === 'function' ? useLoadingIndicator() : null
-const startLoading = () => {
-	try {
-		loadingIndicator?.start?.()
-	} catch {
-		// Ignored
-	}
-}
-const stopLoading = () => {
-	try {
-		loadingIndicator?.finish?.()
-	} catch {
-		// Ignored
-	}
-}
-
-const saveEditedVersion = async () => {
-	startLoading()
-	if (fieldErrors.value) {
-		showKnownErrors.value = true
-		stopLoading()
-		return
-	}
-
-	try {
-		if (newFiles.value.length > 0) {
-			const formData = new FormData()
-			const fileParts = newFiles.value.map((f, idx) => `${f.name}-${idx}`)
-
-			formData.append(
-				'data',
-				JSON.stringify({
-					file_types: newFileTypes.value.reduce(
-						(acc, x, i) => ({
-							...acc,
-							[fileParts[i]]: x ? x.value : null,
-						}),
-						{},
-					),
-				}),
+	},
+	created() {
+		const { addNotification } = injectNotificationManager()
+		this.addNotification = addNotification
+	},
+	computed: {
+		fieldErrors() {
+			return (
+				this.version.version_number === '' ||
+				this.version.game_versions.length === 0 ||
+				(this.version.loaders.length === 0 && this.project.project_type !== 'resourcepack') ||
+				(this.newFiles.length === 0 && this.version.files.length === 0 && !this.replaceFile)
 			)
+		},
+		deps() {
+			const order = ['required', 'optional', 'incompatible', 'embedded']
+			return [...this.version.dependencies].sort(
+				(a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type),
+			)
+		},
+	},
+	watch: {
+		'$route.path'() {
+			const path = this.$route.name.split('-')
+			const mode = path[path.length - 1]
 
-			for (let i = 0; i < newFiles.value.length; i++) {
-				formData.append(fileParts[i], new Blob([newFiles.value[i]]), newFiles.value[i].name)
+			this.isEditing = mode === 'edit' || this.$route.params.version === 'create'
+		},
+	},
+	methods: {
+		formatBytes,
+		formatCategory,
+		async onImageUpload(file) {
+			const response = await useImageUpload(file, { context: 'version' })
+
+			this.uploadedImageIds.push(response.id)
+			this.uploadedImageIds = this.uploadedImageIds.slice(-10)
+
+			return response.url
+		},
+		getPreviousLink() {
+			if (this.$router.options.history.state.back) {
+				if (this.$router.options.history.state.back.includes('/versions')) {
+					return this.$router.options.history.state.back
+				}
+			}
+			return `/${this.project.project_type}/${
+				this.project.slug ? this.project.slug : this.project.id
+			}/versions`
+		},
+		getPreviousLabel() {
+			return this.$router.options.history.state.back &&
+				this.$router.options.history.state.back.endsWith('/versions')
+				? 'Back to versions'
+				: 'All versions'
+		},
+		acceptFileFromProjectType,
+		renderHighlightedString,
+		async addDependency(dependencyAddMode, newDependencyId, newDependencyType, hideErrors) {
+			try {
+				if (dependencyAddMode === 'project') {
+					const project = await useBaseFetch(`project/${newDependencyId}`)
+
+					if (this.version.dependencies.some((dep) => project.id === dep.project_id)) {
+						this.addNotification({
+							title: 'Dependency already added',
+							text: 'You cannot add the same dependency twice.',
+							type: 'error',
+						})
+					} else {
+						this.version.dependencies.push({
+							project,
+							project_id: project.id,
+							dependency_type: newDependencyType,
+							link: `/${project.project_type}/${project.slug ?? project.id}`,
+						})
+
+						this.$emit('update:dependencies', {
+							projects: this.dependencies.projects.concat([project]),
+							versions: this.dependencies.versions,
+						})
+					}
+				} else if (dependencyAddMode === 'version') {
+					const version = await useBaseFetch(`version/${this.newDependencyId}`)
+
+					const project = await useBaseFetch(`project/${version.project_id}`)
+
+					if (this.version.dependencies.some((dep) => version.id === dep.version_id)) {
+						this.addNotification({
+							title: 'Dependency already added',
+							text: 'You cannot add the same dependency twice.',
+							type: 'error',
+						})
+					} else {
+						this.version.dependencies.push({
+							version,
+							project,
+							version_id: version.id,
+							project_id: project.id,
+							dependency_type: this.newDependencyType,
+							link: `/${project.project_type}/${project.slug ?? project.id}/version/${encodeURI(
+								version.version_number,
+							)}`,
+						})
+
+						this.$emit('update:dependencies', {
+							projects: this.dependencies.projects.concat([project]),
+							versions: this.dependencies.versions.concat([version]),
+						})
+					}
+				}
+
+				this.newDependencyId = ''
+			} catch {
+				if (!hideErrors) {
+					this.addNotification({
+						title: 'Invalid Dependency',
+						text: 'The specified dependency could not be found',
+						type: 'error',
+					})
+				}
+			}
+		},
+		async saveEditedVersion() {
+			startLoading()
+
+			if (this.fieldErrors) {
+				this.showKnownErrors = true
+
+				stopLoading()
+				return
 			}
 
-			await useBaseFetch(`version/${version.value.id}/file`, {
+			try {
+				if (this.newFiles.length > 0) {
+					const formData = new FormData()
+					const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
+
+					formData.append(
+						'data',
+						JSON.stringify({
+							file_types: this.newFileTypes.reduce(
+								(acc, x, i) => ({
+									...acc,
+									[fileParts[i]]: x ? x.value : null,
+								}),
+								{},
+							),
+						}),
+					)
+
+					for (let i = 0; i < this.newFiles.length; i++) {
+						formData.append(fileParts[i], new Blob([this.newFiles[i]]), this.newFiles[i].name)
+					}
+
+					await useBaseFetch(`version/${this.version.id}/file`, {
+						method: 'POST',
+						body: formData,
+						headers: {
+							'Content-Disposition': formData,
+						},
+					})
+				}
+
+				const body = {
+					name: this.version.name || this.version.version_number,
+					version_number: this.version.version_number,
+					changelog: this.version.changelog,
+					version_type: this.version.version_type,
+					dependencies: this.version.dependencies,
+					game_versions: this.version.game_versions,
+					loaders: this.version.loaders,
+					primary_file: ['sha1', this.primaryFile.hashes.sha1],
+					featured: this.version.featured,
+					file_types: this.oldFileTypes.map((x, i) => {
+						return {
+							algorithm: 'sha1',
+							hash: this.version.files[i].hashes.sha1,
+							file_type: x ? x.value : null,
+						}
+					}),
+				}
+
+				if (this.project.project_type === 'modpack') {
+					delete body.dependencies
+				}
+
+				await useBaseFetch(`version/${this.version.id}`, {
+					method: 'PATCH',
+					body,
+				})
+
+				for (const hash of this.deleteFiles) {
+					await useBaseFetch(`version_file/${hash}?version_id=${this.version.id}`, {
+						method: 'DELETE',
+					})
+				}
+
+				await this.resetProjectVersions()
+
+				await this.$router.replace(
+					`/${this.project.project_type}/${
+						this.project.slug ? this.project.slug : this.project.id
+					}/version/${encodeURI(
+						this.versions.find((x) => x.id === this.version.id).displayUrlEnding,
+					)}`,
+				)
+			} catch (err) {
+				this.addNotification({
+					title: 'An error occurred',
+					text: err.data ? err.data.description : err,
+					type: 'error',
+				})
+				window.scrollTo({ top: 0, behavior: 'smooth' })
+			}
+			stopLoading()
+		},
+		reportVersion,
+		async createVersion() {
+			this.shouldPreventActions = true
+			startLoading()
+			if (this.fieldErrors) {
+				this.showKnownErrors = true
+				this.shouldPreventActions = false
+
+				stopLoading()
+				return
+			}
+
+			try {
+				await this.createVersionRaw(this.version)
+			} catch (err) {
+				this.addNotification({
+					title: 'An error occurred',
+					text: err.data ? err.data.description : err,
+					type: 'error',
+				})
+				window.scrollTo({ top: 0, behavior: 'smooth' })
+			}
+
+			stopLoading()
+			this.shouldPreventActions = false
+		},
+		async createVersionRaw(version) {
+			const formData = new FormData()
+
+			const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
+			if (this.replaceFile) {
+				fileParts.unshift(this.replaceFile.name.concat('-primary'))
+			}
+
+			if (this.project.project_type === 'resourcepack') {
+				version.loaders = ['minecraft']
+			}
+
+			const newVersion = {
+				project_id: version.project_id,
+				file_parts: fileParts,
+				version_number: version.version_number,
+				version_title: version.name || version.version_number,
+				version_body: version.changelog,
+				dependencies: version.dependencies,
+				game_versions: version.game_versions,
+				loaders: version.loaders,
+				release_channel: version.version_type,
+				featured: version.featured,
+				file_types: this.newFileTypes.reduce(
+					(acc, x, i) => ({
+						...acc,
+						[fileParts[this.replaceFile ? i + 1 : i]]: x ? x.value : null,
+					}),
+					{},
+				),
+			}
+
+			formData.append('data', JSON.stringify(newVersion))
+
+			if (this.replaceFile) {
+				formData.append(
+					this.replaceFile.name.concat('-primary'),
+					new Blob([this.replaceFile]),
+					this.replaceFile.name,
+				)
+			}
+
+			for (let i = 0; i < this.newFiles.length; i++) {
+				formData.append(
+					fileParts[this.replaceFile ? i + 1 : i],
+					new Blob([this.newFiles[i]]),
+					this.newFiles[i].name,
+				)
+			}
+
+			const data = await useBaseFetch('version', {
 				method: 'POST',
 				body: formData,
-				headers: { 'Content-Disposition': formData },
+				headers: {
+					'Content-Disposition': formData,
+				},
 			})
-		}
 
-		const body = {
-			name: version.value.name || version.value.version_number,
-			version_number: version.value.version_number,
-			changelog: version.value.changelog,
-			version_type: version.value.version_type,
-			dependencies: version.value.dependencies,
-			game_versions: version.value.game_versions,
-			loaders: version.value.loaders,
-			primary_file: ['sha1', primaryFile.value.hashes.sha1],
-			featured: version.value.featured,
-			file_types: oldFileTypes.value.map((x, i) => ({
-				algorithm: 'sha1',
-				hash: version.value.files[i].hashes.sha1,
-				file_type: x ? x.value : null,
-			})),
-		}
+			await this.resetProjectVersions()
 
-		if (props.project.project_type === 'modpack') {
-			delete body.dependencies
-		}
+			await this.$router.push(
+				`/${this.project.project_type}/${
+					this.project.slug ? this.project.slug : this.project.project_id
+				}/version/${data.id}`,
+			)
+		},
+		async deleteVersion() {
+			startLoading()
 
-		await useBaseFetch(`version/${version.value.id}`, { method: 'PATCH', body })
-
-		for (const hash of deleteFiles.value) {
-			await useBaseFetch(`version_file/${hash}?version_id=${version.value.id}`, {
+			await useBaseFetch(`version/${this.version.id}`, {
 				method: 'DELETE',
 			})
-		}
 
-		const created = await resetProjectVersions()
+			await this.resetProjectVersions()
+			await this.$router.replace(`/${this.project.project_type}/${this.project.id}/versions`)
+			stopLoading()
+		},
+		async createDataPackVersion() {
+			this.shouldPreventActions = true
+			startLoading()
+			try {
+				const blob = await createDataPackVersion(
+					this.project,
+					this.version,
+					this.primaryFile,
+					this.members,
+					this.tags.gameVersions,
+					this.packageLoaders,
+				)
 
-		await router.replace(
-			`/${props.project.project_type}/${
-				props.project.slug ? props.project.slug : props.project.id
-			}/version/${encodeURI(created.find((x) => x.id === version.value.id).displayUrlEnding)}`,
-		)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err?.data ? err.data.description : err,
-			type: 'error',
-		})
-		window.scrollTo({ top: 0, behavior: 'smooth' })
-	}
-	stopLoading()
-}
+				this.newFiles = []
+				this.newFileTypes = []
+				this.replaceFile = new File(
+					[blob],
+					`${this.project.slug}-${this.version.version_number}.jar`,
+				)
 
-const createVersion = async () => {
-	shouldPreventActions.value = true
-	startLoading()
+				await this.createVersionRaw({
+					project_id: this.project.id,
+					author_id: this.currentMember.user.id,
+					name: this.version.name,
+					version_number: `${this.version.version_number}+mod`,
+					changelog: this.version.changelog,
+					version_type: this.version.version_type,
+					dependencies: this.version.dependencies,
+					game_versions: this.version.game_versions,
+					loaders: this.packageLoaders,
+					featured: this.version.featured,
+				})
 
-	if (fieldErrors.value) {
-		showKnownErrors.value = true
-		shouldPreventActions.value = false
-		stopLoading()
-		return
-	}
+				this.$refs.modal_package_mod.hide()
 
-	try {
-		await createVersionRaw(version.value)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err?.data ? err.data.description : err,
-			type: 'error',
-		})
-		window.scrollTo({ top: 0, behavior: 'smooth' })
-	}
+				this.addNotification({
+					title: 'Packaging Success',
+					text: 'Your data pack was successfully packaged as a mod! Make sure to playtest to check for errors.',
+					type: 'success',
+				})
+			} catch (err) {
+				this.addNotification({
+					title: 'An error occurred',
+					text: err.data ? err.data.description : err,
+					type: 'error',
+				})
+			}
+			stopLoading()
+			this.shouldPreventActions = false
+		},
+		async resetProjectVersions() {
+			const [versions, featuredVersions, dependencies] = await Promise.all([
+				useBaseFetch(`project/${this.version.project_id}/version`),
+				useBaseFetch(`project/${this.version.project_id}/version?featured=true`),
+				useBaseFetch(`project/${this.version.project_id}/dependencies`),
+				this.resetProject(),
+			])
 
-	stopLoading()
-	shouldPreventActions.value = false
-}
+			const newCreatedVersions = this.$computeVersions(versions, this.members)
+			const featuredIds = featuredVersions.map((x) => x.id)
+			this.$emit('update:versions', newCreatedVersions)
+			this.$emit(
+				'update:featuredVersions',
+				newCreatedVersions.filter((version) => featuredIds.includes(version.id)),
+			)
+			this.$emit('update:dependencies', dependencies)
 
-const createVersionRaw = async (ver) => {
-	const formData = new FormData()
-	const fileParts = newFiles.value.map((f, idx) => `${f.name}-${idx}`)
-	if (replaceFile.value) {
-		fileParts.unshift(replaceFile.value.name.concat('-primary'))
-	}
-
-	if (props.project.project_type === 'resourcepack') {
-		ver.loaders = ['minecraft']
-	}
-
-	const newVersion = {
-		project_id: ver.project_id,
-		file_parts: fileParts,
-		version_number: ver.version_number,
-		version_title: ver.name || ver.version_number,
-		version_body: ver.changelog,
-		dependencies: ver.dependencies,
-		game_versions: ver.game_versions,
-		loaders: ver.loaders,
-		release_channel: ver.version_type,
-		featured: ver.featured,
-		file_types: newFileTypes.value.reduce(
-			(acc, x, i) => ({
-				...acc,
-				[fileParts[replaceFile.value ? i + 1 : i]]: x ? x.value : null,
-			}),
-			{},
-		),
-	}
-
-	formData.append('data', JSON.stringify(newVersion))
-
-	if (replaceFile.value) {
-		formData.append(
-			replaceFile.value.name.concat('-primary'),
-			new Blob([replaceFile.value]),
-			replaceFile.value.name,
-		)
-	}
-
-	for (let i = 0; i < newFiles.value.length; i++) {
-		formData.append(
-			fileParts[replaceFile.value ? i + 1 : i],
-			new Blob([newFiles.value[i]]),
-			newFiles.value[i].name,
-		)
-	}
-
-	const data = await useBaseFetch('version', {
-		method: 'POST',
-		body: formData,
-		headers: { 'Content-Disposition': formData },
-	})
-
-	await resetProjectVersions()
-
-	await router.push(
-		`/${props.project.project_type}/${
-			props.project.slug ? props.project.slug : props.project.id
-		}/version/${data.id}`,
-	)
-}
-
-const deleteVersion = async () => {
-	startLoading()
-	await useBaseFetch(`version/${version.value.id}`, { method: 'DELETE' })
-	await resetProjectVersions()
-	await router.replace(`/${props.project.project_type}/${props.project.id}/versions`)
-	stopLoading()
-}
-
-const modalPackageMod = ref(null)
-
-const createDataPackVersionHandler = async () => {
-	shouldPreventActions.value = true
-	startLoading()
-	try {
-		const blob = await createDataPackVersion(
-			props.project,
-			version.value,
-			primaryFile.value,
-			props.members,
-			tags.value.gameVersions,
-			packageLoaders.value,
-		)
-
-		newFiles.value = []
-		newFileTypes.value = []
-		replaceFile.value = new File(
-			[blob],
-			`${props.project.slug}-${version.value.version_number}.jar`,
-		)
-
-		await createVersionRaw({
-			project_id: props.project.id,
-			author_id: props.currentMember.user.id,
-			name: version.value.name,
-			version_number: `${version.value.version_number}+mod`,
-			changelog: version.value.changelog,
-			version_type: version.value.version_type,
-			dependencies: version.value.dependencies,
-			game_versions: version.value.game_versions,
-			loaders: packageLoaders.value,
-			featured: version.value.featured,
-		})
-
-		modalPackageMod.value?.hide()
-
-		addNotification({
-			title: 'Packaging Success',
-			text: 'Your data pack was successfully packaged as a mod! Make sure to playtest to check for errors.',
-			type: 'success',
-		})
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err?.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
-	shouldPreventActions.value = false
-}
-
-const resetProjectVersions = async () => {
-	const [versionsRes, featuredVersionsRes, dependenciesRes] = await Promise.all([
-		useBaseFetch(`project/${version.value.project_id}/version`),
-		useBaseFetch(`project/${version.value.project_id}/version?featured=true`),
-		useBaseFetch(`project/${version.value.project_id}/dependencies`),
-		props.resetProject(),
-	])
-
-	const newCreatedVersions = nuxtApp.$computeVersions(versionsRes, props.members)
-	const featuredIds = featuredVersionsRes.map((x) => x.id)
-
-	emit('update:versions', newCreatedVersions)
-	emit(
-		'update:featuredVersions',
-		newCreatedVersions.filter((v) => featuredIds.includes(v.id)),
-	)
-	emit('update:dependencies', dependenciesRes)
-
-	return newCreatedVersions
-}
+			return newCreatedVersions
+		},
+	},
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1423,6 +1527,7 @@ const resetProjectVersions = async () => {
 				margin-top: 0.5rem;
 			}
 
+			// TODO: Make file type editing  work on mobile
 			@media (min-width: 600px) {
 				.raised-multiselect {
 					display: block;
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index a786befb..c8554480 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -202,6 +202,8 @@ import {
 
 import DropArea from '~/components/ui/DropArea.vue'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
+import { isPermission } from '~/utils/permissions.ts'
+import { reportVersion } from '~/utils/report-helpers.ts'
 
 const props = defineProps({
 	project: {
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index 2d7b84c2..d2ed7c3e 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -87,6 +87,7 @@ import { IntlFormatted } from '@vintl/vintl/components'
 import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'
 import { useBaseFetch } from '@/composables/fetch.js'
+import { normalizeChildren } from '@/utils/vue-children.ts'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index ef4e085b..56001209 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -144,6 +144,7 @@ import { commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
+import { getAuthUrl } from '@/composables/auth.js'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 6c2b7280..c03830d2 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -149,6 +149,7 @@ import { Checkbox, commonMessages, injectNotificationManager } from '@modrinth/u
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
+import { getAuthUrl } from '@/composables/auth.js'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/auth/welcome.vue b/apps/frontend/src/pages/auth/welcome.vue
index 35ff2951..e67751b2 100644
--- a/apps/frontend/src/pages/auth/welcome.vue
+++ b/apps/frontend/src/pages/auth/welcome.vue
@@ -52,6 +52,8 @@ import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
 import { Checkbox, commonMessages } from '@modrinth/ui'
 import { IntlFormatted } from '@vintl/vintl/components'
 
+import { normalizeChildren } from '@/utils/vue-children.ts'
+
 const route = useRoute()
 
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 1938a026..4236129e 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -410,6 +410,8 @@ import { isAdmin } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 import UpToDate from 'assets/images/illustrations/up_to_date.svg'
 
+import { getProjectTypeMessage } from '@/utils/i18n-project-type'
+import { normalizeChildren } from '@/utils/vue-children.ts'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import NavRow from '~/components/ui/NavRow.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 8bc230cd..e23a93f4 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -154,7 +154,7 @@ import { formatDate } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import { removeAuthProvider } from '~/composables/auth.js'
+import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
 const { addNotification, handleError } = injectNotificationManager()
 const auth = await useAuth()
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 3c854234..61060843 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -89,6 +89,8 @@ import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } fro
 import { injectNotificationManager, PurchaseModal } from '@modrinth/ui'
 import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
 
+import { useBaseFetch } from '@/composables/fetch.js'
+import { isPermission } from '@/utils/permissions.ts'
 import { products } from '~/generated/state.json'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index a43f9d52..50758489 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -648,6 +648,7 @@ import { formatPrice } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
+import { useBaseFetch } from '@/composables/fetch.js'
 import OptionGroup from '~/components/ui/OptionGroup.vue'
 import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 44862091..e33d5c38 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -432,7 +432,7 @@ import SteamIcon from 'assets/icons/auth/sso-steam.svg'
 import QrcodeVue from 'qrcode.vue'
 
 import Modal from '~/components/ui/Modal.vue'
-import { removeAuthProvider } from '~/composables/auth.js'
+import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
 useHead({
 	title: 'Account settings - Modrinth',
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 5a629c30..a24fef48 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -585,12 +585,13 @@ import {
 import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
+import { useBaseFetch } from '@/composables/fetch.js'
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 import ServerListing from '~/components/ui/servers/ServerListing.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'
 
-const { addNotification } = injectNotificationManager()
+const { addNotification, handleError } = injectNotificationManager()
 definePageMeta({
 	middleware: 'auth',
 })
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 1f8137d4..6be61c5e 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -210,6 +210,7 @@ import { formatProjectType } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
 
+import { normalizeChildren } from '@/utils/vue-children.ts'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
diff --git a/packages/tooling-config/eslint/nuxt.mjs b/packages/tooling-config/eslint/nuxt.mjs
index 94550dd3..0aa8d5e2 100644
--- a/packages/tooling-config/eslint/nuxt.mjs
+++ b/packages/tooling-config/eslint/nuxt.mjs
@@ -39,6 +39,7 @@ export const configurationNuxtToAppend = [
 					],
 				},
 			],
+			'vue/no-undef-properties': 'warn',
 		},
 		languageOptions: {
 			parserOptions: {