From 386e6e50da164693679aea77e3b8ec2f1469cdb1 Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Wed, 12 Nov 2025 04:14:11 +0000
Subject: [PATCH] refactor: move batch credit modal into default layout (#4767)

* refactor: move batch credit modal into default layout

* fix: spacing + spans rather than p
---
 .../components/ui/admin/BatchCreditModal.vue  | 264 +++++++++++++++++
 apps/frontend/src/layouts/default.vue         |   4 +-
 .../src/pages/admin/servers/nodes.vue         | 275 ------------------
 3 files changed, 267 insertions(+), 276 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/admin/BatchCreditModal.vue
 delete mode 100644 apps/frontend/src/pages/admin/servers/nodes.vue

diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
new file mode 100644
index 00000000..8e6dbcbf
--- /dev/null
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -0,0 +1,264 @@
+<template>
+	<NewModal ref="modal">
+		<template #title>
+			<span class="text-lg font-extrabold text-contrast">Batch credit</span>
+		</template>
+		<div class="flex w-[500px] max-w-[90vw] flex-col gap-6">
+			<div class="flex flex-col gap-2">
+				<label class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast"> Type </span>
+					<span>Select target to credit.</span>
+				</label>
+				<Combobox
+					v-model="mode"
+					:options="modeOptions"
+					placeholder="Select type"
+					class="max-w-[8rem]"
+				/>
+			</div>
+			<div class="flex flex-col gap-2">
+				<label for="days" class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast"> Days to credit </span>
+				</label>
+				<input
+					id="days"
+					v-model.number="days"
+					class="w-32"
+					type="number"
+					min="1"
+					autocomplete="off"
+				/>
+			</div>
+
+			<div v-if="mode === 'nodes'" class="flex flex-col gap-3">
+				<div class="flex flex-col gap-2">
+					<label for="node-input" class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
+					</label>
+					<div class="flex items-center gap-2">
+						<input
+							id="node-input"
+							v-model="nodeInput"
+							class="w-32"
+							type="text"
+							autocomplete="off"
+						/>
+						<ButtonStyled color="blue" color-fill="text">
+							<button class="shrink-0" @click="addNode">
+								<PlusIcon />
+								Add
+							</button>
+						</ButtonStyled>
+					</div>
+					<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
+						<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
+							<XIcon />
+							{{ h }}
+						</TagItem>
+					</div>
+				</div>
+			</div>
+
+			<div v-else class="flex flex-col gap-3">
+				<div class="flex flex-col gap-2">
+					<label for="region-select" class="flex flex-col gap-1">
+						<span class="text-lg font-semibold text-contrast"> Region </span>
+						<span>This will credit all active servers in the region.</span>
+					</label>
+					<Combobox
+						v-model="selectedRegion"
+						:options="regions"
+						placeholder="Select region"
+						class="max-w-[24rem]"
+					/>
+				</div>
+			</div>
+
+			<div class="between flex items-center gap-4">
+				<label for="send-email-batch" class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast"> Send email </span>
+				</label>
+				<Toggle id="send-email-batch" v-model="sendEmail" />
+			</div>
+
+			<div v-if="sendEmail" class="flex flex-col gap-2">
+				<label for="message-batch" class="flex flex-col gap-1">
+					<span class="text-lg font-semibold text-contrast"> Customize Email </span>
+					<span>
+						Unless a particularly bad or out of the ordinary event happened, keep this to the
+						default
+					</span>
+				</label>
+				<div
+					class="text-muted flex flex-col gap-2 rounded-lg border border-divider bg-button-bg p-4"
+				>
+					<span>Hi {user.name},</span>
+					<div class="textarea-wrapper">
+						<textarea
+							id="message-batch"
+							v-model="message"
+							rows="3"
+							class="w-full overflow-hidden !bg-surface-3"
+						/>
+					</div>
+					<span>
+						To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
+						Servers subscription.
+					</span>
+					<span>
+						Your next charge was scheduled for {credit.previous_due} and will now be on
+						{credit.next_due}.
+					</span>
+				</div>
+			</div>
+
+			<div class="flex gap-2">
+				<ButtonStyled color="brand">
+					<button :disabled="applyDisabled" @click="apply">
+						<CheckIcon aria-hidden="true" />
+						Apply credits
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="modal?.hide?.()">
+						<XIcon aria-hidden="true" />
+						Cancel
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	Combobox,
+	injectNotificationManager,
+	NewModal,
+	TagItem,
+	Toggle,
+} from '@modrinth/ui'
+import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
+import { computed, ref } from 'vue'
+
+import { useBaseFetch } from '#imports'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+
+const { addNotification } = injectNotificationManager()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const days = ref(1)
+const sendEmail = ref(true)
+const message = ref('')
+
+const modeOptions = [
+	{ value: 'nodes', label: 'Nodes' },
+	{ value: 'region', label: 'Region' },
+]
+const mode = ref<string>('nodes')
+
+const nodeInput = ref('')
+const selectedNodes = ref<string[]>([])
+
+type RegionOpt = { value: string; label: string }
+const regions = ref<RegionOpt[]>([])
+const selectedRegion = ref<string | null>(null)
+const nodeHostnames = ref<string[]>([])
+
+function show(event?: Event) {
+	void ensureOverview()
+	message.value = DEFAULT_CREDIT_EMAIL_MESSAGE
+	modal.value?.show(event)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function addNode() {
+	const v = nodeInput.value.trim()
+	if (!v) return
+	if (!nodeHostnames.value.includes(v)) {
+		addNotification({
+			title: 'Unknown node',
+			text: "This hostname doesn't exist",
+			type: 'error',
+		})
+		return
+	}
+	if (!selectedNodes.value.includes(v)) selectedNodes.value.push(v)
+	nodeInput.value = ''
+}
+
+function removeNode(v: string) {
+	selectedNodes.value = selectedNodes.value.filter((x) => x !== v)
+}
+
+const applyDisabled = computed(() => {
+	if (days.value < 1) return true
+	if (mode.value === 'nodes') return selectedNodes.value.length === 0
+	return !selectedRegion.value
+})
+
+async function ensureOverview() {
+	if (regions.value.length || nodeHostnames.value.length) return
+	try {
+		const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
+		regions.value = (data.regions || []).map((r: any) => ({
+			value: r.key,
+			label: `${r.display_name} (${r.key})`,
+		}))
+		nodeHostnames.value = data.node_hostnames || []
+		if (!selectedRegion.value && regions.value.length) selectedRegion.value = regions.value[0].value
+	} catch (err) {
+		addNotification({ title: 'Failed to load nodes overview', text: String(err), type: 'error' })
+	}
+}
+
+async function apply() {
+	try {
+		const body =
+			mode.value === 'nodes'
+				? {
+						nodes: selectedNodes.value.slice(),
+						days: Math.max(1, Math.floor(days.value)),
+						send_email: sendEmail.value,
+						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
+					}
+				: {
+						region: selectedRegion.value!,
+						days: Math.max(1, Math.floor(days.value)),
+						send_email: sendEmail.value,
+						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
+					}
+		await useBaseFetch('billing/credit', {
+			method: 'POST',
+			body: JSON.stringify(body),
+			internal: true,
+		})
+		addNotification({ title: 'Credits applied', type: 'success' })
+		modal.value?.hide()
+		selectedNodes.value = []
+		nodeInput.value = ''
+		message.value = ''
+	} catch (err: any) {
+		addNotification({
+			title: 'Error applying credits',
+			text: err?.data?.description ?? String(err),
+			type: 'error',
+		})
+	}
+}
+
+function pluralize(n: number): string {
+	return n === 1 ? '' : 's'
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 60c2661c..d425e9e6 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -477,7 +477,7 @@
 							{
 								id: 'servers-nodes',
 								color: 'primary',
-								link: '/admin/servers/nodes',
+								action: (event) => $refs.modal_batch_credit.show(event),
 								shown: isAdmin(auth.user),
 							},
 						]"
@@ -786,6 +786,7 @@
 			<ProjectCreateModal v-if="auth.user" ref="modal_creation" />
 			<CollectionCreateModal ref="modal_collection_creation" />
 			<OrganizationCreateModal ref="modal_organization_creation" />
+			<BatchCreditModal v-if="auth.user && isAdmin(auth.user)" ref="modal_batch_credit" />
 			<slot id="main" />
 		</main>
 		<footer
@@ -937,6 +938,7 @@ import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
+import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
diff --git a/apps/frontend/src/pages/admin/servers/nodes.vue b/apps/frontend/src/pages/admin/servers/nodes.vue
deleted file mode 100644
index 162c3310..00000000
--- a/apps/frontend/src/pages/admin/servers/nodes.vue
+++ /dev/null
@@ -1,275 +0,0 @@
-<template>
-	<div class="page experimental-styles-within">
-		<div
-			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
-		>
-			<h1 class="m-0 text-2xl">Server nodes</h1>
-			<ButtonStyled color="brand">
-				<button @click="openBatchModal"><PlusIcon /> Batch credit</button>
-			</ButtonStyled>
-		</div>
-		<div>don't worry there's not supposed to be anything here</div>
-
-		<NewModal ref="batchModal">
-			<template #title>
-				<span class="text-lg font-extrabold text-contrast">Batch credit</span>
-			</template>
-			<div class="flex w-[720px] max-w-[90vw] flex-col gap-6">
-				<div class="flex flex-col gap-2">
-					<label class="flex flex-col gap-1">
-						<span class="text-lg font-semibold text-contrast"> Type </span>
-						<span>Select target to credit.</span>
-					</label>
-					<Combobox
-						v-model="mode"
-						:options="modeOptions"
-						placeholder="Select type"
-						class="max-w-[8rem]"
-					/>
-				</div>
-				<div class="flex flex-col gap-2">
-					<label for="days" class="flex flex-col gap-1">
-						<span class="text-lg font-semibold text-contrast"> Days to credit </span>
-					</label>
-					<input
-						id="days"
-						v-model.number="days"
-						class="w-32"
-						type="number"
-						min="1"
-						autocomplete="off"
-					/>
-				</div>
-
-				<div v-if="mode === 'nodes'" class="flex flex-col gap-3">
-					<div class="flex flex-col gap-2">
-						<label for="node-input" class="flex flex-col gap-1">
-							<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
-						</label>
-						<div class="flex items-center gap-2">
-							<input
-								id="node-input"
-								v-model="nodeInput"
-								class="w-32"
-								type="text"
-								autocomplete="off"
-							/>
-							<ButtonStyled color="blue" color-fill="text">
-								<button class="shrink-0" @click="addNode">
-									<PlusIcon />
-									Add
-								</button>
-							</ButtonStyled>
-						</div>
-						<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
-							<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
-								<XIcon />
-								{{ h }}
-							</TagItem>
-						</div>
-					</div>
-				</div>
-
-				<div v-else class="flex flex-col gap-3">
-					<div class="flex flex-col gap-2">
-						<label for="region-select" class="flex flex-col gap-1">
-							<span class="text-lg font-semibold text-contrast"> Region </span>
-							<span>This will credit all active servers in the region.</span>
-						</label>
-						<Combobox
-							v-model="selectedRegion"
-							:options="regions"
-							placeholder="Select region"
-							class="max-w-[24rem]"
-						/>
-					</div>
-				</div>
-
-				<div class="between flex items-center gap-4">
-					<label for="send-email-nodes" class="flex flex-col gap-1">
-						<span class="text-lg font-semibold text-contrast"> Send email </span>
-					</label>
-					<Toggle id="send-email-nodes" v-model="sendEmail" />
-				</div>
-
-				<div v-if="sendEmail" class="flex flex-col gap-2">
-					<label for="message-region" class="flex flex-col gap-1">
-						<span class="text-lg font-semibold text-contrast"> Customize Email </span>
-						<span>
-							Unless a particularly bad or out of the ordinary event happened, keep this to the
-							default
-						</span>
-					</label>
-					<div class="text-muted rounded-lg border border-divider bg-button-bg p-4">
-						<p>Hi {user.name},</p>
-						<div class="textarea-wrapper">
-							<textarea
-								id="message-region"
-								v-model="message"
-								rows="3"
-								class="w-full overflow-hidden"
-							/>
-						</div>
-						<p>
-							To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
-							Servers subscription.
-						</p>
-						<p>
-							Your next charge was scheduled for {credit.previous_due} and will now be on
-							{credit.next_due}.
-						</p>
-					</div>
-				</div>
-
-				<div class="flex gap-2">
-					<ButtonStyled color="brand">
-						<button :disabled="applyDisabled" @click="apply">
-							<CheckIcon aria-hidden="true" />
-							Apply credits
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="batchModal?.hide?.()">
-							<XIcon aria-hidden="true" />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</NewModal>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	injectNotificationManager,
-	NewModal,
-	TagItem,
-	Toggle,
-} from '@modrinth/ui'
-import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
-import { computed, ref } from 'vue'
-
-import { useBaseFetch } from '#imports'
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
-
-const { addNotification } = injectNotificationManager()
-
-const batchModal = ref<InstanceType<typeof NewModal>>()
-
-const days = ref(1)
-const sendEmail = ref(true)
-const message = ref('')
-
-const modeOptions = [
-	{ value: 'nodes', label: 'Nodes' },
-	{ value: 'region', label: 'Region' },
-]
-const mode = ref<string>('nodes')
-
-const nodeInput = ref('')
-const selectedNodes = ref<string[]>([])
-
-type RegionOpt = { value: string; label: string }
-const regions = ref<RegionOpt[]>([])
-const selectedRegion = ref<string | null>(null)
-const nodeHostnames = ref<string[]>([])
-
-function openBatchModal() {
-	void ensureOverview()
-
-	message.value = DEFAULT_CREDIT_EMAIL_MESSAGE
-	batchModal.value?.show()
-}
-
-function addNode() {
-	const v = nodeInput.value.trim()
-	if (!v) return
-	if (!nodeHostnames.value.includes(v)) {
-		addNotification({
-			title: 'Unknown node',
-			text: "This hostname doesn't exist",
-			type: 'error',
-		})
-		return
-	}
-	if (!selectedNodes.value.includes(v)) selectedNodes.value.push(v)
-	nodeInput.value = ''
-}
-
-function removeNode(v: string) {
-	selectedNodes.value = selectedNodes.value.filter((x) => x !== v)
-}
-
-const applyDisabled = computed(() => {
-	if (days.value < 1) return true
-	if (mode.value === 'nodes') return selectedNodes.value.length === 0
-	return !selectedRegion.value
-})
-
-async function ensureOverview() {
-	if (regions.value.length || nodeHostnames.value.length) return
-	try {
-		const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
-		regions.value = (data.regions || []).map((r: any) => ({
-			value: r.key,
-			label: `${r.display_name} (${r.key})`,
-		}))
-		nodeHostnames.value = data.node_hostnames || []
-		if (!selectedRegion.value && regions.value.length) selectedRegion.value = regions.value[0].value
-	} catch (err) {
-		addNotification({ title: 'Failed to load nodes overview', text: String(err), type: 'error' })
-	}
-}
-
-async function apply() {
-	try {
-		const body =
-			mode.value === 'nodes'
-				? {
-						nodes: selectedNodes.value.slice(),
-						days: Math.max(1, Math.floor(days.value)),
-						send_email: sendEmail.value,
-						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
-					}
-				: {
-						region: selectedRegion.value!,
-						days: Math.max(1, Math.floor(days.value)),
-						send_email: sendEmail.value,
-						message: message.value?.trim() || DEFAULT_CREDIT_EMAIL_MESSAGE,
-					}
-		await useBaseFetch('billing/credit', {
-			method: 'POST',
-			body: JSON.stringify(body),
-			internal: true,
-		})
-		addNotification({ title: 'Credits applied', type: 'success' })
-		batchModal.value?.hide()
-		selectedNodes.value = []
-		nodeInput.value = ''
-		message.value = ''
-	} catch (err: any) {
-		addNotification({
-			title: 'Error applying credits',
-			text: err?.data?.description ?? String(err),
-			type: 'error',
-		})
-	}
-}
-
-function pluralize(n: number): string {
-	return n === 1 ? '' : 's'
-}
-</script>
-
-<style scoped>
-.page {
-	padding: 1rem;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 56rem;
-}
-</style>