fix: DI nonsense (#4174)

* fix: DI nonsense

* fix: lint

* fix: client try di issue

* fix: injects outside of context

* fix: use .catch

* refactor: convert projects.vue to composition API.

* fix: moderation checklist notif pos change watcher

* fix: lint issues

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -397,7 +397,8 @@ import { useModerationStore } from '~/store/moderation.ts'
 import KeybindsModal from './ChecklistKeybindsModal.vue'
 import ModpackPermissionsFlow from './ModpackPermissionsFlow.vue'
 
-const { addNotification } = injectNotificationManager()
+const notifications = injectNotificationManager()
+const { addNotification } = notifications
 
 const keybindsModal = ref<InstanceType<typeof KeybindsModal>>()
 
@@ -626,6 +627,11 @@ function handleKeybinds(event: KeyboardEvent) {
 onMounted(() => {
 	window.addEventListener('keydown', handleKeybinds)
 	initializeAllStages()
+	notifications.setNotificationLocation('left')
+})
+
+onUnmounted(() => {
+	notifications.setNotificationLocation('right')
 })
 
 function initializeAllStages() {

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

@@ -74,12 +74,14 @@
 
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { BackupWarning, ButtonStyled, NewModal } from '@modrinth/ui'
+import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { computed, nextTick, ref } from 'vue'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
-import { handleError } from '~/composables/servers/modrinth-servers.ts'
+import { handleServersError } from '~/composables/servers/modrinth-servers.ts'
+
+const notifications = injectNotificationManager()
 
 const cf = ref(false)
 
@@ -120,18 +122,19 @@ const handleSubmit = async () => {
 				hide()
 			} else {
 				submitted.value = false
-				handleError(
+				handleServersError(
 					new ModrinthServersFetchError(
 						'Could not find CurseForge modpack at that URL.',
 						404,
 						new Error(`No modpack found at ${url.value}`),
 					),
+					notifications,
 				)
 			}
 		} catch (error) {
 			submitted.value = false
 			console.error('Error installing:', error)
-			handleError(error)
+			handleServersError(error, notifications)
 		}
 	}
 }

apps/frontend/src/composables/auth.js

@@ -1,5 +1,3 @@
-import { injectNotificationManager } from '@modrinth/ui'
-
 export const useAuth = async (oldToken = null) => {
 	const auth = useState('auth', () => ({
 		user: null,
@@ -119,23 +117,17 @@ export const getAuthUrl = (provider, redirect = '/dashboard') => {
 
 export const removeAuthProvider = async (provider) => {
 	startLoading()
-	try {
-		const auth = await useAuth()
 
-		await useBaseFetch('auth/provider', {
-			method: 'DELETE',
-			body: {
-				provider,
-			},
-		})
-		await useAuth(auth.value.token)
-	} catch (err) {
-		const { addNotification } = injectNotificationManager()
-		addNotification({
-			title: 'An error occurred',
-			text: err.data.description,
-			type: 'error',
-		})
-	}
+	const auth = await useAuth()
+
+	await useBaseFetch('auth/provider', {
+		method: 'DELETE',
+		body: {
+			provider,
+		},
+	})
+
+	await useAuth(auth.value.token)
+
 	stopLoading()
 }

apps/frontend/src/composables/servers/modrinth-servers.ts

@@ -1,4 +1,4 @@
-import { injectNotificationManager } from '@modrinth/ui'
+import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import type { JWTAuth, ModuleError, ModuleName } from '@modrinth/utils'
 import { ModrinthServerError } from '@modrinth/utils'
 
@@ -13,17 +13,16 @@ import {
 } from './modules/index.ts'
 import { useServersFetch } from './servers-fetch.ts'
 
-export function handleError(err: any) {
-	const { addNotification } = injectNotificationManager()
+export function handleServersError(err: any, notifications: AbstractWebNotificationManager) {
 	if (err instanceof ModrinthServerError && err.v1Error) {
-		addNotification({
+		notifications.addNotification({
 			title: err.v1Error?.context ?? `An error occurred`,
 			type: 'error',
 			text: err.v1Error.description,
 			errorCode: err.v1Error.error,
 		})
 	} else {
-		addNotification({
+		notifications.addNotification({
 			title: 'An error occurred',
 			type: 'error',
 			text: err.message ?? (err.data ? err.data.description : err),

apps/frontend/src/composables/use-client-try.ts

@@ -1,7 +1,11 @@
+import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import { injectNotificationManager } from '@modrinth/ui'
 
 type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>
-type ErrorFunction = (err: any) => void | Promise<void>
+type ErrorFunction = (
+	err: any,
+	addNotification: typeof AbstractWebNotificationManager.prototype.addNotification,
+) => void | Promise<void>
 type VoidFunction = () => void | Promise<void>
 
 type useClientTry = <TArgs extends any[], TResult>(
@@ -10,8 +14,7 @@ type useClientTry = <TArgs extends any[], TResult>(
 	onFinish?: VoidFunction,
 ) => (...args: TArgs) => Promise<TResult | undefined>
 
-const defaultOnError: ErrorFunction = (error) => {
-	const { addNotification } = injectNotificationManager()
+const defaultOnError: ErrorFunction = (error, addNotification) => {
 	addNotification({
 		title: 'An error occurred',
 		text: error?.data?.description || error.message || error || 'Unknown error',
@@ -19,15 +22,15 @@ const defaultOnError: ErrorFunction = (error) => {
 	})
 }
 
-export const useClientTry: useClientTry =
-	(fn, onFail = defaultOnError, onFinish) =>
-	async (...args) => {
+export const useClientTry: useClientTry = (fn, onFail = defaultOnError, onFinish) => {
+	const { addNotification } = injectNotificationManager()
+	return async (...args) => {
 		startLoading()
 		try {
 			return await fn(...args)
 		} catch (err) {
 			if (onFail) {
-				await onFail(err)
+				await onFail(err, addNotification)
 			} else {
 				console.error('[CLIENT TRY ERROR]', err)
 			}
@@ -36,3 +39,4 @@ export const useClientTry: useClientTry =
 			stopLoading()
 		}
 	}
+}

apps/frontend/src/composables/user.js

@@ -137,28 +137,10 @@ export const userFollowProject = async (project) => {
 	}
 }
 export const resendVerifyEmail = async () => {
-	// const { injectNotificationManager } = await import("@modrinth/ui");
-	// const { addNotification } = injectNotificationManager();
-
-	startLoading()
-	try {
-		await useBaseFetch('auth/email/resend_verify', {
-			method: 'POST',
-		})
-
-		const auth = await useAuth()
-		addNotification({
-			title: 'Email sent',
-			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
-			type: 'success',
-		})
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data.description,
-			type: 'error',
-		})
-	}
+	await useBaseFetch('auth/email/resend_verify', {
+		method: 'POST',
+	})
+	await useAuth()
 	stopLoading()
 }
 

apps/frontend/src/layouts/default.vue

@@ -50,7 +50,7 @@
 				</span>
 			</template>
 			<template #actions>
-				<button v-if="auth?.user?.email" class="btn" @click="resendVerifyEmail">
+				<button v-if="auth?.user?.email" class="btn" @click="handleResendEmailVerification">
 					{{ formatMessage(verifyEmailBannerMessages.action) }}
 				</button>
 				<nuxt-link v-else class="btn" to="/settings/account">
@@ -854,6 +854,23 @@ const footerMessages = defineMessages({
 	},
 })
 
+async function handleResendEmailVerification() {
+	try {
+		await resendVerifyEmail()
+		addNotification({
+			title: 'Email sent',
+			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
+			type: 'success',
+		})
+	} catch (err) {
+		addNotification({
+			title: 'An error occurred',
+			text: err.data.description,
+			type: 'error',
+		})
+	}
+}
+
 useHead({
 	link: [
 		{

apps/frontend/src/pages/[type]/[id].vue

@@ -1575,18 +1575,6 @@ const showModerationChecklist = useLocalStorage(
 )
 const collapsedModerationChecklist = useLocalStorage('collapsed-moderation-checklist', false)
 
-watch(
-	showModerationChecklist,
-	(newValue) => {
-		notifications.setNotificationLocation(newValue ? 'left' : 'right')
-	},
-	{ immediate: true },
-)
-
-onUnmounted(() => {
-	notifications.setNotificationLocation('right')
-})
-
 if (import.meta.client && history && history.state && history.state.showChecklist) {
 	showModerationChecklist.value = true
 }

apps/frontend/src/pages/[type]/[id]/gallery.vue

@@ -335,6 +335,13 @@ useSeoMeta({
 
 <script>
 export default defineNuxtComponent({
+	setup() {
+		const { addNotification } = injectNotificationManager()
+
+		return {
+			addNotification,
+		}
+	},
 	data() {
 		return {
 			expandedGalleryItem: null,
@@ -425,8 +432,6 @@ export default defineNuxtComponent({
 			this.shouldPreventActions = true
 			startLoading()
 
-			const { addNotification } = injectNotificationManager()
-
 			try {
 				let url = `project/${this.project.id}/gallery?ext=${
 					this.editFile
@@ -452,7 +457,7 @@ export default defineNuxtComponent({
 
 				this.$refs.modal_edit_item.hide()
 			} catch (err) {
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',
@@ -465,9 +470,6 @@ export default defineNuxtComponent({
 		async editGalleryItem() {
 			this.shouldPreventActions = true
 			startLoading()
-
-			const { addNotification } = injectNotificationManager()
-
 			try {
 				let url = `project/${this.project.id}/gallery?url=${encodeURIComponent(
 					this.project.gallery[this.editIndex].url,
@@ -490,7 +492,7 @@ export default defineNuxtComponent({
 				await this.resetProject()
 				this.$refs.modal_edit_item.hide()
 			} catch (err) {
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',
@@ -503,8 +505,6 @@ export default defineNuxtComponent({
 		async deleteGalleryImage() {
 			startLoading()
 
-			const { addNotification } = injectNotificationManager()
-
 			try {
 				await useBaseFetch(
 					`project/${this.project.id}/gallery?url=${encodeURIComponent(
@@ -517,7 +517,7 @@ export default defineNuxtComponent({
 
 				await this.resetProject()
 			} catch (err) {
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -750,6 +750,8 @@ export default defineNuxtComponent({
 		const data = useNuxtApp()
 		const route = useNativeRoute()
 
+		const { addNotification } = injectNotificationManager()
+
 		const auth = await useAuth()
 		const tags = useTags()
 		const flags = useFeatureFlags()
@@ -915,6 +917,7 @@ export default defineNuxtComponent({
 			alternateFile: ref(alternateFile),
 			replaceFile: ref(replaceFile),
 			uploadedImageIds: ref([]),
+			addNotification,
 		}
 	},
 	data() {
@@ -996,8 +999,7 @@ export default defineNuxtComponent({
 					const project = await useBaseFetch(`project/${newDependencyId}`)
 
 					if (this.version.dependencies.some((dep) => project.id === dep.project_id)) {
-						const { addNotification } = injectNotificationManager()
-						addNotification({
+						this.addNotification({
 							title: 'Dependency already added',
 							text: 'You cannot add the same dependency twice.',
 							type: 'error',
@@ -1021,8 +1023,7 @@ export default defineNuxtComponent({
 					const project = await useBaseFetch(`project/${version.project_id}`)
 
 					if (this.version.dependencies.some((dep) => version.id === dep.version_id)) {
-						const { addNotification } = injectNotificationManager()
-						addNotification({
+						this.addNotification({
 							title: 'Dependency already added',
 							text: 'You cannot add the same dependency twice.',
 							type: 'error',
@@ -1049,8 +1050,7 @@ export default defineNuxtComponent({
 				this.newDependencyId = ''
 			} catch {
 				if (!hideErrors) {
-					const { addNotification } = injectNotificationManager()
-					addNotification({
+					this.addNotification({
 						title: 'Invalid Dependency',
 						text: 'The specified dependency could not be found',
 						type: 'error',
@@ -1143,8 +1143,7 @@ export default defineNuxtComponent({
 					)}`,
 				)
 			} catch (err) {
-				const { addNotification } = injectNotificationManager()
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',
@@ -1168,8 +1167,7 @@ export default defineNuxtComponent({
 			try {
 				await this.createVersionRaw(this.version)
 			} catch (err) {
-				const { addNotification } = injectNotificationManager()
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',
@@ -1292,15 +1290,13 @@ export default defineNuxtComponent({
 
 				this.$refs.modal_package_mod.hide()
 
-				const { addNotification } = injectNotificationManager()
-				addNotification({
+				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) {
-				const { addNotification } = injectNotificationManager()
-				addNotification({
+				this.addNotification({
 					title: 'An error occurred',
 					text: err.data ? err.data.description : err,
 					type: 'error',

apps/frontend/src/pages/auth/verify-email.vue

@@ -40,7 +40,11 @@
 					</template>
 				</p>
 
-				<button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
+				<button
+					v-if="auth.user"
+					class="btn btn-primary continue-btn"
+					@click="handleResendEmailVerification"
+				>
 					{{ formatMessage(failedVerificationMessages.action) }} <RightArrowIcon />
 				</button>
 
@@ -53,7 +57,9 @@
 </template>
 <script setup>
 import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
 
+const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -149,4 +155,21 @@ if (route.query.flow) {
 		success.value = false
 	}
 }
+
+async function handleResendEmailVerification() {
+	try {
+		await resendVerifyEmail()
+		addNotification({
+			title: 'Email sent',
+			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
+			type: 'success',
+		})
+	} catch (err) {
+		addNotification({
+			title: 'An error occurred',
+			text: err.data.description,
+			type: 'error',
+		})
+	}
+}
 </script>

apps/frontend/src/pages/dashboard/projects.vue

@@ -300,7 +300,7 @@
 	</div>
 </template>
 
-<script>
+<script setup>
 import {
 	EditIcon,
 	IssuesIcon,
@@ -328,170 +328,116 @@ import Modal from '~/components/ui/Modal.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
-export default defineNuxtComponent({
-	components: {
-		Avatar,
-		ButtonStyled,
-		ProjectStatusBadge,
-		SettingsIcon,
-		TrashIcon,
-		Checkbox,
-		IssuesIcon,
-		PlusIcon,
-		XIcon,
-		EditIcon,
-		SaveIcon,
-		Modal,
-		ModalCreation,
-		Multiselect,
-		CopyCode,
-		SortAscIcon,
-		SortDescIcon,
-	},
-	async setup() {
-		const { formatMessage } = useVIntl()
+useHead({ title: 'Projects - Modrinth' })
 
-		const user = await useUser()
-		await initUserProjects()
-		return { formatMessage, user: ref(user) }
-	},
-	data() {
-		return {
-			projects: this.updateSort(this.user.projects, 'Name'),
-			versions: [],
-			selectedProjects: [],
-			sortBy: 'Name',
-			descending: false,
-			editLinks: {
-				showAffected: false,
-				source: {
-					val: '',
-					clear: false,
-				},
-				discord: {
-					val: '',
-					clear: false,
-				},
-				wiki: {
-					val: '',
-					clear: false,
-				},
-				issues: {
-					val: '',
-					clear: false,
-				},
-			},
-			commonMessages,
-		}
-	},
-	head: {
-		title: 'Projects - Modrinth',
-	},
-	created() {
-		this.UPLOAD_VERSION = 1 << 0
-		this.DELETE_VERSION = 1 << 1
-		this.EDIT_DETAILS = 1 << 2
-		this.EDIT_BODY = 1 << 3
-		this.MANAGE_INVITES = 1 << 4
-		this.REMOVE_MEMBER = 1 << 5
-		this.EDIT_MEMBER = 1 << 6
-		this.DELETE_PROJECT = 1 << 7
-	},
-	methods: {
-		getProjectTypeForUrl,
-		formatProjectType,
-		updateDescending() {
-			this.descending = !this.descending
-			this.projects = this.updateSort(this.projects, this.sortBy, this.descending)
-		},
-		updateSort(projects, sort, descending) {
-			let sortedArray = projects
-			switch (sort) {
-				case 'Name':
-					sortedArray = projects.slice().sort((a, b) => {
-						return a.title.localeCompare(b.title)
-					})
-					break
-				case 'Status':
-					sortedArray = projects.slice().sort((a, b) => {
-						if (a.status < b.status) {
-							return -1
-						}
-						if (a.status > b.status) {
-							return 1
-						}
-						return 0
-					})
-					break
-				case 'Type':
-					sortedArray = projects.slice().sort((a, b) => {
-						if (a.project_type < b.project_type) {
-							return -1
-						}
-						if (a.project_type > b.project_type) {
-							return 1
-						}
-						return 0
-					})
-					break
-				default:
-					break
-			}
+// const UPLOAD_VERSION = 1 << 0
+// const DELETE_VERSION = 1 << 1
+const EDIT_DETAILS = 1 << 2
+// const EDIT_BODY = 1 << 3
+// const MANAGE_INVITES = 1 << 4
+// const REMOVE_MEMBER = 1 << 5
+// const EDIT_MEMBER = 1 << 6
+// const DELETE_PROJECT = 1 << 7
 
-			if (descending) {
-				sortedArray = sortedArray.reverse()
-			}
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 
-			return sortedArray
-		},
-		async bulkEditLinks() {
-			const { addNotification } = injectNotificationManager()
-
-			try {
-				const baseData = {
-					issues_url: this.editLinks.issues.clear ? null : this.editLinks.issues.val.trim(),
-					source_url: this.editLinks.source.clear ? null : this.editLinks.source.val.trim(),
-					wiki_url: this.editLinks.wiki.clear ? null : this.editLinks.wiki.val.trim(),
-					discord_url: this.editLinks.discord.clear ? null : this.editLinks.discord.val.trim(),
-				}
-				const filteredData = Object.fromEntries(
-					Object.entries(baseData).filter(([, v]) => v !== ''),
-				)
-
-				await useBaseFetch(
-					`projects?ids=${JSON.stringify(this.selectedProjects.map((x) => x.id))}`,
-					{
-						method: 'PATCH',
-						body: filteredData,
-					},
-				)
-
-				this.$refs.editLinksModal.hide()
-				addNotification({
-					title: 'Success',
-					text: "Bulk edited selected project's links.",
-					type: 'success',
-				})
-				this.selectedProjects = []
-
-				this.editLinks.issues.val = ''
-				this.editLinks.source.val = ''
-				this.editLinks.wiki.val = ''
-				this.editLinks.discord.val = ''
-				this.editLinks.issues.clear = false
-				this.editLinks.source.clear = false
-				this.editLinks.wiki.clear = false
-				this.editLinks.discord.clear = false
-			} catch (e) {
-				addNotification({
-					title: 'An error occurred',
-					text: e,
-					type: 'error',
-				})
-			}
-		},
-	},
+const user = await useUser()
+const projects = ref([])
+const selectedProjects = ref([])
+const sortBy = ref('Name')
+const descending = ref(false)
+const editLinks = reactive({
+	showAffected: false,
+	source: { val: '', clear: false },
+	discord: { val: '', clear: false },
+	wiki: { val: '', clear: false },
+	issues: { val: '', clear: false },
 })
+
+const editLinksModal = ref(null)
+const modal_creation = ref(null)
+
+function updateSort(list, sort, desc) {
+	let sortedArray = list
+	switch (sort) {
+		case 'Name':
+			sortedArray = list.slice().sort((a, b) => a.title.localeCompare(b.title))
+			break
+		case 'Status':
+			sortedArray = list.slice().sort((a, b) => {
+				if (a.status < b.status) return -1
+				if (a.status > b.status) return 1
+				return 0
+			})
+			break
+		case 'Type':
+			sortedArray = list.slice().sort((a, b) => {
+				if (a.project_type < b.project_type) return -1
+				if (a.project_type > b.project_type) return 1
+				return 0
+			})
+			break
+		default:
+			break
+	}
+	if (desc) sortedArray = sortedArray.reverse()
+	return sortedArray
+}
+
+function resort() {
+	projects.value = updateSort(projects.value, sortBy.value, descending.value)
+}
+
+function updateDescending() {
+	descending.value = !descending.value
+	resort()
+}
+
+async function bulkEditLinks() {
+	try {
+		const baseData = {
+			issues_url: editLinks.issues.clear ? null : editLinks.issues.val.trim(),
+			source_url: editLinks.source.clear ? null : editLinks.source.val.trim(),
+			wiki_url: editLinks.wiki.clear ? null : editLinks.wiki.val.trim(),
+			discord_url: editLinks.discord.clear ? null : editLinks.discord.val.trim(),
+		}
+		const filteredData = Object.fromEntries(Object.entries(baseData).filter(([, v]) => v !== ''))
+
+		await useBaseFetch(`projects?ids=${JSON.stringify(selectedProjects.value.map((x) => x.id))}`, {
+			method: 'PATCH',
+			body: filteredData,
+		})
+
+		editLinksModal.value?.hide()
+		addNotification({
+			title: 'Success',
+			text: "Bulk edited selected project's links.",
+			type: 'success',
+		})
+		selectedProjects.value = []
+
+		editLinks.issues.val = ''
+		editLinks.source.val = ''
+		editLinks.wiki.val = ''
+		editLinks.discord.val = ''
+		editLinks.issues.clear = false
+		editLinks.source.clear = false
+		editLinks.wiki.clear = false
+		editLinks.discord.clear = false
+	} catch (e) {
+		addNotification({
+			title: 'An error occurred',
+			text: e,
+			type: 'error',
+		})
+	}
+}
+
+await initUserProjects()
+if (user.value?.projects) {
+	projects.value = updateSort(user.value.projects, 'Name', false)
+}
 </script>
 <style lang="scss" scoped>
 .grid-table {

apps/frontend/src/pages/dashboard/revenue/index.vue

@@ -101,7 +101,7 @@
 					email
 					{{ auth.user.payout_data.paypal_address }}
 				</p>
-				<button class="btn mt-4" @click="removeAuthProvider('paypal')">
+				<button class="btn mt-4" @click="handleRemoveAuthProvider('paypal')">
 					<XIcon />
 					Disconnect account
 				</button>
@@ -154,7 +154,9 @@ import { formatDate } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-const { addNotification } = injectNotificationManager()
+import { removeAuthProvider } from '~/composables/auth.js'
+
+const { addNotification, handleError } = injectNotificationManager()
 const auth = await useAuth()
 const minWithdraw = ref(0.01)
 
@@ -170,6 +172,14 @@ const deadlineEnding = computed(() => {
 	return deadline
 })
 
+async function handleRemoveAuthProvider(provider) {
+	try {
+		await removeAuthProvider(provider)
+	} catch (error) {
+		handleError(error)
+	}
+}
+
 const availableSoonDates = computed(() => {
 	// Get the next 3 dates from userBalance.dates that are from now to the deadline + 4 months to make sure we get all the pending ones.
 	const dates = Object.keys(userBalance.value.dates)

apps/frontend/src/pages/organization/[id]/settings/index.vue

@@ -62,10 +62,13 @@ const showPreviewImage = (files) => {
 const orgId = useRouteId()
 
 const onSaveChanges = useClientTry(async () => {
-	if (hasChanges.value) {
-		await patchOrganization(orgId, patchData.value)
+	// Only PATCH organization details if there are actual field changes
+	const hasOrgFieldChanges = Object.keys(patchData.value).length > 0
+	if (hasOrgFieldChanges) {
+		await patchOrganization(patchData.value)
 	}
 
+	// Handle icon deletion / upload separately
 	if (deletedIcon.value) {
 		await deleteIcon()
 		deletedIcon.value = false
@@ -74,6 +77,7 @@ const onSaveChanges = useClientTry(async () => {
 		icon.value = null
 	}
 
+	// Always refresh after any change
 	await refreshOrganization()
 
 	addNotification({

apps/frontend/src/pages/servers/manage/[id]/files.vue

@@ -294,9 +294,10 @@ import FilesUploadDragAndDrop from '~/components/ui/servers/FilesUploadDragAndDr
 import FilesUploadDropdown from '~/components/ui/servers/FilesUploadDropdown.vue'
 import FilesUploadZipUrlModal from '~/components/ui/servers/FilesUploadZipUrlModal.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
-import { handleError } from '~/composables/servers/modrinth-servers.ts'
+import { handleServersError } from '~/composables/servers/modrinth-servers.ts'
 
-const { addNotification } = injectNotificationManager()
+const notifications = injectNotificationManager()
+const { addNotification } = notifications
 const flags = useFeatureFlags()
 const baseId = useId()
 
@@ -584,7 +585,7 @@ const extractItem = async (path: string) => {
 		await props.server.fs?.extractFile(path, true, false)
 	} catch (error) {
 		console.error('Error extracting item:', error)
-		handleError(error)
+		handleServersError(error, notifications)
 	}
 }
 
@@ -598,11 +599,11 @@ const handleExtractItem = async (item: { name: string; type: string; path: strin
 				uploadConflictModal.value.show(item.path, dry.conflicting_files)
 			}
 		} else {
-			handleError(new Error('Error running dry run'))
+			handleServersError(new Error('Error running dry run'), notifications)
 		}
 	} catch (error) {
 		console.error('Error extracting item:', error)
-		handleError(error)
+		handleServersError(error, notifications)
 	}
 }
 

apps/frontend/src/pages/settings/account.vue

@@ -267,7 +267,7 @@
 							<button
 								v-if="auth.user.auth_providers.includes(provider.id)"
 								class="btn"
-								@click="removeAuthProvider(provider.id)"
+								@click="handleRemoveAuthProvider(provider.id)"
 							>
 								<TrashIcon /> Remove
 							</button>
@@ -432,6 +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'
 
 useHead({
 	title: 'Account settings - Modrinth',
@@ -471,6 +472,14 @@ async function saveEmail() {
 	stopLoading()
 }
 
+async function handleRemoveAuthProvider(provider) {
+	try {
+		await removeAuthProvider(provider)
+	} catch (error) {
+		handleError(error)
+	}
+}
+
 const managePasswordModal = ref()
 const removePasswordMode = ref(false)
 const oldPassword = ref('')

apps/frontend/src/providers/organization-context.ts

@@ -60,7 +60,7 @@ export class OrganizationContext {
 		const EDIT_DETAILS = 1 << 2
 		return (
 			this.currentMember.value &&
-			(this.currentMember.value.permissions & EDIT_DETAILS) === EDIT_DETAILS
+			(this.currentMember.value.permissions! & EDIT_DETAILS) === EDIT_DETAILS
 		)
 	})
 
@@ -89,7 +89,9 @@ export class OrganizationContext {
 		})
 	}
 
-	public patchOrganization = async (newData: { slug: any }) => {
+	public patchOrganization = async (
+		newData: Partial<{ slug: string; name: string; description: string }>,
+	) => {
 		if (this.organization.value === null) {
 			throw new Error('Organization is not set.')
 		}