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

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>

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">

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}`

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({

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()

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">

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)])}`, {
-		await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
+		method: 'PATCH',
-			method: 'PATCH',
+	})
+	return (notifications: PlatformNotification[]) => {
+		const newNotifs = notifications ?? []
+		newNotifs.forEach((n) => {
+			if (ids.includes(n.id)) n.read = true
 		})
-		return (notifications: PlatformNotification[]) => {
+		return newNotifs
-			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 () => []
 	}
 }

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'
 

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: {

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()

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()

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()

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()

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'

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()

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()

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'

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',

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',
 })

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'

packages/tooling-config/eslint/nuxt.mjs

@@ -39,6 +39,7 @@ export const configurationNuxtToAppend = [
 					],
 				},
 			],
+			'vue/no-undef-properties': 'warn',
 		},
 		languageOptions: {
 			parserOptions: {