From cc2363705b3a1a8fd2887539b22d7847ffbe0b75 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sun, 17 Aug 2025 16:07:37 +0100
Subject: [PATCH 01/49] feat: start on tax compliance

---
 .../ui/CreatorTaxComplianceAlert.vue          | 143 ++++++++++++++++++
 .../src/pages/dashboard/revenue/index.vue     |   2 +
 2 files changed, 145 insertions(+)
 create mode 100644 apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
new file mode 100644
index 0000000000..cfaa54be8b
--- /dev/null
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -0,0 +1,143 @@
+<template>
+	<NewModal ref="taxFormModal" header="Submit Tax Form">
+		<div
+			class="card flex flex-col rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
+		>
+			<span>
+				We need to determine which type of form you need to fill out. There are three types of tax
+				forms:
+			</span>
+			<ul>
+				<li>W-9: Used for U.S. citizens to certify their taxpayer status</li>
+				<li>W-8BEN: Used for foreign individuals to certify their foreign status</li>
+				<li>W-8BEN-E: Used for foreign entities* to certify their foreign status</li>
+			</ul>
+			<span>
+				Modrinth has a legal obligation to share these forms with the IRS after you meet the annual
+				threshold of $600 USD.
+			</span>
+			<span class="mt-2 text-xs italic"
+				>* A foreign entity means a business entity organized outside the United States (such as a
+				non-US corporation, partnership, or LLC).</span
+			>
+		</div>
+		<div class="mt-2 flex flex-col gap-4">
+			<div class="flex flex-col gap-2">
+				<label>
+					<span class="text-lg font-semibold text-contrast">
+						Are you a US citizen?
+						<span class="text-brand-red">*</span>
+					</span>
+				</label>
+				<Chips
+					v-model="isUSCitizen"
+					:items="['yes', 'no']"
+					:never-empty="false"
+					:capitalize="true"
+				/>
+			</div>
+
+			<Transition
+				enter-active-class="transition-all duration-300 ease-in-out"
+				enter-from-class="h-0 overflow-hidden opacity-0"
+				enter-to-class="h-auto overflow-visible opacity-100"
+				leave-active-class="transition-all duration-300 ease-in-out"
+				leave-from-class="h-auto overflow-visible opacity-100"
+				leave-to-class="h-0 overflow-hidden opacity-0"
+			>
+				<div v-if="isUSCitizen === 'no'" class="flex flex-col gap-2">
+					<label>
+						<span class="text-lg font-semibold text-contrast">
+							Are you a private individual or part of a foreign entity?
+							<span class="text-brand-red">*</span>
+						</span>
+					</label>
+					<Chips
+						v-model="entityType"
+						:items="['private-individual', 'foreign-entity']"
+						:format-label="
+							(item) => (item === 'private-individual' ? 'Private Individual' : 'Foreign Entity')
+						"
+						:never-empty="false"
+						:capitalize="false"
+					/>
+				</div>
+			</Transition>
+		</div>
+		<div class="mt-4 flex w-full flex-row justify-between">
+			<ButtonStyled @click="$emit('close')"
+				><button><XIcon /> Cancel</button></ButtonStyled
+			>
+			<ButtonStyled color="brand" :disabled="!canContinue">
+				<button>Continue</button>
+			</ButtonStyled>
+		</div>
+	</NewModal>
+	<div
+		v-if="shouldShow"
+		class="mb-4 flex w-full flex-col gap-2 rounded-2xl border-[1px] border-solid border-orange bg-bg-orange p-4 text-sm text-contrast"
+	>
+		<span class="flex gap-2 align-middle text-xl font-bold text-orange"
+			><TriangleAlertIcon class="my-auto" /> Tax Form Required</span
+		>
+		<span class="text-md text-orange"
+			>You have reached the annual withdrawal threshold of $600 USD and must complete a tax form
+			before you can withdraw additional funds.</span
+		>
+		<div>
+			<ButtonStyled color="orange">
+				<button @click="startTaxForm"><FileTextIcon /> Start Tax Form</button>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileTextIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, Chips, NewModal } from '@modrinth/ui'
+
+const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
+
+const isUSCitizen = ref<'yes' | 'no' | null>(null)
+const entityType = ref<'private-individual' | 'foreign-entity' | null>(null)
+
+// const props = defineProps<{
+// 	totalAnnualWithdrawal: number
+// 	taxComplianceFilled: 'w9' | 'w8-ben' | 'w8-ben-e' | null
+// }>()
+
+const shouldShow = computed(() => {
+	return true
+	// return props.totalAnnualWithdrawal >= 600 && !props.taxComplianceFilled
+})
+
+const determinedFormType = computed(() => {
+	if (isUSCitizen.value === 'yes') {
+		return 'W-9'
+	} else if (isUSCitizen.value === 'no' && entityType.value === 'private-individual') {
+		return 'W-8 BEN'
+	} else if (isUSCitizen.value === 'no' && entityType.value === 'foreign-entity') {
+		return 'W-8 BEN-E'
+	}
+	return null
+})
+
+const canContinue = computed(() => {
+	if (isUSCitizen.value === 'yes') {
+		return true
+	} else if (isUSCitizen.value === 'no' && entityType.value) {
+		return true
+	}
+	return false
+})
+
+async function startTaxForm(e: MouseEvent) {
+	taxFormModal.value?.show(e)
+}
+
+watch(isUSCitizen, (newValue) => {
+	if (newValue === 'yes') {
+		entityType.value = null
+	}
+})
+</script>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 8bc230cde5..9feeacb41b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="experimental-styles-within">
+		<CreatorTaxComplianceAlert />
 		<section class="universal-card">
 			<h2 class="text-2xl">Revenue</h2>
 			<div class="grid-display">
@@ -153,6 +154,7 @@ import { injectNotificationManager } from '@modrinth/ui'
 import { formatDate } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
+import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
 
 import { removeAuthProvider } from '~/composables/auth.js'
 

From 5f600327f91b3e7ab5a204f1b2be66775c190c47 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sun, 17 Aug 2025 17:47:33 +0100
Subject: [PATCH 02/49] feat: avarala1099 composable

---
 .../ui/CreatorTaxComplianceAlert.vue          | 126 +++++++++---
 apps/frontend/src/composables/avalara1099.ts  | 187 ++++++++++++++++++
 2 files changed, 286 insertions(+), 27 deletions(-)
 create mode 100644 apps/frontend/src/composables/avalara1099.ts

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index cfaa54be8b..a0ef313c1c 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -1,27 +1,15 @@
 <template>
-	<NewModal ref="taxFormModal" header="Submit Tax Form">
+	<NewModal ref="taxFormModal" header="Submit Tax Form" :closable="false">
 		<div
+			v-if="!shrinkModalBehindAvalara"
 			class="card flex flex-col rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
 		>
 			<span>
-				We need to determine which type of form you need to fill out. There are three types of tax
-				forms:
+				Modrinth has a legal obligation to share these tax forms with the United States Internal
+				Revenue Service (IRS) after you meet the annual withdrawal threshold of $600 USD.
 			</span>
-			<ul>
-				<li>W-9: Used for U.S. citizens to certify their taxpayer status</li>
-				<li>W-8BEN: Used for foreign individuals to certify their foreign status</li>
-				<li>W-8BEN-E: Used for foreign entities* to certify their foreign status</li>
-			</ul>
-			<span>
-				Modrinth has a legal obligation to share these forms with the IRS after you meet the annual
-				threshold of $600 USD.
-			</span>
-			<span class="mt-2 text-xs italic"
-				>* A foreign entity means a business entity organized outside the United States (such as a
-				non-US corporation, partnership, or LLC).</span
-			>
 		</div>
-		<div class="mt-2 flex flex-col gap-4">
+		<div class="mt-2 flex flex-col gap-4" v-if="!shrinkModalBehindAvalara">
 			<div class="flex flex-col gap-2">
 				<label>
 					<span class="text-lg font-semibold text-contrast">
@@ -52,6 +40,10 @@
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
+					<span class="text-md -mt-2"
+						>A foreign entity means a business entity organized outside the United States (such as a
+						non-US corporation, partnership, or LLC).</span
+					>
 					<Chips
 						v-model="entityType"
 						:items="['private-individual', 'foreign-entity']"
@@ -64,12 +56,15 @@
 				</div>
 			</Transition>
 		</div>
-		<div class="mt-4 flex w-full flex-row justify-between">
+		<div class="mt-4 flex w-full flex-row justify-between gap-2">
 			<ButtonStyled @click="$emit('close')"
-				><button><XIcon /> Cancel</button></ButtonStyled
+				><button @click="hideModal"><XIcon /> Cancel</button></ButtonStyled
 			>
-			<ButtonStyled color="brand" :disabled="!canContinue">
-				<button>Continue</button>
+			<ButtonStyled color="brand">
+				<button :disabled="!canContinue || loading" @click="continueForm">
+					<span v-if="!loading">Continue</span>
+					<span v-else>Loading…</span>
+				</button>
 			</ButtonStyled>
 		</div>
 	</NewModal>
@@ -95,22 +90,28 @@
 <script setup lang="ts">
 import { FileTextIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, Chips, NewModal } from '@modrinth/ui'
+import { useAvalara1099, type FormRequestResponse } from '~/composables/avalara1099'
 
 const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
+const auth = await useAuth()
+console.log(auth.value.user)
 
 const isUSCitizen = ref<'yes' | 'no' | null>(null)
 const entityType = ref<'private-individual' | 'foreign-entity' | null>(null)
 
-// const props = defineProps<{
-// 	totalAnnualWithdrawal: number
-// 	taxComplianceFilled: 'w9' | 'w8-ben' | 'w8-ben-e' | null
-// }>()
+const props = defineProps<{
+	totalAnnualWithdrawal: number
+	taxComplianceFilled: 'w9' | 'w8-ben' | 'w8-ben-e' | null
+}>()
 
 const shouldShow = computed(() => {
-	return true
-	// return props.totalAnnualWithdrawal >= 600 && !props.taxComplianceFilled
+	return props.totalAnnualWithdrawal >= 600 && !props.taxComplianceFilled
 })
 
+function hideModal() {
+	taxFormModal.value?.hide()
+}
+
 const determinedFormType = computed(() => {
 	if (isUSCitizen.value === 'yes') {
 		return 'W-9'
@@ -135,9 +136,80 @@ async function startTaxForm(e: MouseEvent) {
 	taxFormModal.value?.show(e)
 }
 
+const avalaraState = ref<ReturnType<typeof useAvalara1099> | null>(null)
+const loading = computed(() =>
+	avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false,
+)
+
+const shrinkModalBehindAvalara = ref(false)
+
+async function continueForm() {
+	if (!import.meta.client) return
+	if (!determinedFormType.value) return
+
+	shrinkModalBehindAvalara.value = true
+
+	// TODO: Replace with actual response
+	const response: FormRequestResponse = {}
+
+	if (!avalaraState.value) {
+		console.log('epic')
+		avalaraState.value = useAvalara1099(response, {
+			prefill: {
+				name: 'Firstname Middlename Surname',
+				email: (auth.value.user as any)?.email ?? '',
+				account_number: (auth.value.user as any)?.id ?? '',
+			},
+		})
+	}
+
+	try {
+		if (avalaraState.value) {
+			await avalaraState.value.start()
+			console.log(avalaraState.value.status)
+		}
+	} catch (e) {}
+
+	shrinkModalBehindAvalara.value = false
+}
+
 watch(isUSCitizen, (newValue) => {
 	if (newValue === 'yes') {
 		entityType.value = null
 	}
 })
 </script>
+
+<style>
+dialog[open]:has(> iframe[src*='form_embed']) {
+	width: min(960px, calc(100vw - 2rem)) !important;
+	max-width: 100% !important;
+	height: min(95vh, max(640px, 75vh)) !important;
+	background: var(--color-raised-bg) !important;
+	border: 1px solid var(--color-button-border) !important;
+	border-radius: var(--radius-lg) !important;
+	box-shadow: var(--shadow-floating) !important;
+	padding: 0 !important;
+}
+
+dialog[open] > iframe[src*='form_embed'] {
+	position: absolute !important;
+	inset: 0 !important;
+	width: 100% !important;
+	height: 100% !important;
+	display: block !important;
+	border: none !important;
+	border-radius: var(--radius-lg) !important;
+}
+
+@media (max-width: 640px) {
+	dialog[open]:has(> iframe[src*='form_embed']) {
+		width: calc(100vw - 1rem) !important;
+		height: 95vh !important;
+		border-radius: var(--radius-md) !important;
+	}
+	dialog[open] > iframe[src*='form_embed'] {
+		border-radius: var(--radius-md) !important;
+	}
+}
+</style>
diff --git a/apps/frontend/src/composables/avalara1099.ts b/apps/frontend/src/composables/avalara1099.ts
new file mode 100644
index 0000000000..e9da73a70a
--- /dev/null
+++ b/apps/frontend/src/composables/avalara1099.ts
@@ -0,0 +1,187 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+export interface FormRequestAttributes {
+	form_type: 'W-9' | 'W-8BEN' | 'W-8BEN-E' | string
+	company_id: number
+	company_name: string
+	company_email: string
+	reference_id: string | null
+	form_id: string | null
+	signed_at: string | null
+	tin_match_status: string | null
+	expires_at: string | null
+}
+
+export interface FormRequestLinks {
+	action_validate?: string
+	action_complete?: string
+	[key: string]: unknown
+}
+
+export interface FormRequestData {
+	id: string
+	type: 'form_request' | string
+	attributes: FormRequestAttributes
+	links?: FormRequestLinks
+	[key: string]: unknown
+}
+
+export interface FormRequestResponse {
+	data: FormRequestData
+	[key: string]: unknown
+}
+
+export interface UseAvalara1099Options {
+	prefill?: Record<string, unknown>
+	// Optional override for the origin (defaults to vendor CDN domain)
+	origin?: string
+	// Optional hook to further style the injected dialog/iframe
+	styleDialog?: (dialog: HTMLDialogElement, iframe: HTMLIFrameElement | null) => void
+	// Poll interval while waiting for global to appear
+	pollIntervalMs?: number
+	// Max time to wait for script before rejecting (ms); 0/undefined => no timeout
+	timeoutMs?: number
+}
+
+interface AvalaraGlobal {
+	requestW9: (
+		formRequest: FormRequestResponse | FormRequestData,
+		opts?: { prefill?: Record<string, unknown> },
+	) => Promise<FormRequestResponse> | any
+	requestW8BEN: (
+		formRequest: FormRequestResponse | FormRequestData,
+		opts?: { prefill?: Record<string, unknown> },
+	) => Promise<FormRequestResponse> | any
+	requestW8BENE: (
+		formRequest: FormRequestResponse | FormRequestData,
+		opts?: { prefill?: Record<string, unknown> },
+	) => Promise<FormRequestResponse> | any
+	origin?: string
+	[key: string]: unknown
+}
+
+declare global {
+	interface Window {
+		Avalara1099?: AvalaraGlobal
+	}
+}
+
+const injectedKey = '__avalara1099_script_injected__'
+
+function ensureScriptInjected(origin: string) {
+	if (process.server) return
+	const w = window as any
+	if (w[injectedKey]) return
+	w[injectedKey] = true
+	useHead({
+		script: [
+			{
+				src: `${origin.replace(/\/$/, '')}/api/request_form.js`,
+				crossorigin: 'anonymous',
+				type: 'module',
+			},
+		],
+	})
+}
+
+async function waitForAvalara(opts: {
+	pollIntervalMs: number
+	timeoutMs?: number
+	origin: string
+}): Promise<AvalaraGlobal> {
+	if (process.server) throw new Error('Avalara 1099 is client-side only')
+	ensureScriptInjected(opts.origin)
+	const start = Date.now()
+	return await new Promise((resolve, reject) => {
+		const poll = () => {
+			const g = window.Avalara1099
+			if (g) return resolve(g)
+			if (opts.timeoutMs && opts.timeoutMs > 0 && Date.now() - start > opts.timeoutMs) {
+				return reject(new Error('Timed out waiting for Avalara1099 script to load'))
+			}
+			setTimeout(poll, opts.pollIntervalMs)
+		}
+		poll()
+	})
+}
+
+export function useAvalara1099(
+	initial: FormRequestResponse | FormRequestData,
+	options: UseAvalara1099Options = {},
+) {
+	const origin = options.origin || 'https://www.track1099.com'
+	const pollIntervalMs = options.pollIntervalMs ?? 250
+	const timeoutMs = options.timeoutMs
+
+	const request: Ref<FormRequestResponse | FormRequestData> = ref(initial)
+	const loading = ref(false)
+	const error: Ref<unknown> = ref(null)
+
+	const signedAt = computed(() => {
+		const data = (request.value as FormRequestResponse).data || request.value
+		return data.attributes?.signed_at ? new Date(data.attributes.signed_at) : null
+	})
+
+	const status = computed(() => (signedAt.value ? 'signed' : 'incomplete'))
+
+	async function start(): Promise<FormRequestResponse | FormRequestData> {
+		loading.value = true
+		error.value = null
+		try {
+			const g = await waitForAvalara({ pollIntervalMs, timeoutMs, origin })
+			const data = (request.value as FormRequestResponse).data || request.value
+			const formType = data.attributes?.form_type
+
+			// Defensive deep clone to strip proxies / non-cloneable refs before postMessage
+			// (DataCloneError guard)
+			let safeRequest: any
+			try {
+				safeRequest = JSON.parse(JSON.stringify(request.value))
+			} catch (_) {
+				// Fallback shallow copy
+				safeRequest = Array.isArray(request.value)
+					? [...(request.value as any)]
+					: { ...(request.value as any) }
+			}
+			let safePrefill: any = undefined
+			if (options.prefill) {
+				try {
+					safePrefill = JSON.parse(JSON.stringify(options.prefill))
+				} catch (_) {
+					safePrefill = { ...options.prefill }
+				}
+			}
+
+			let promise: any
+			if (formType === 'W-8BEN') {
+				promise = g.requestW8BEN(safeRequest, { prefill: safePrefill })
+			} else if (formType === 'W-9') {
+				promise = g.requestW9(safeRequest, { prefill: safePrefill })
+			} else if (formType === 'W-8BEN-E' || formType === 'W-8BEN E') {
+				promise = g.requestW8BENE(safeRequest, { prefill: safePrefill })
+			} else {
+				throw new Error(`Unsupported form_type: ${formType}`)
+			}
+
+			// The vendor promise resolves with an updated form request (signed state)
+			const newReq = await promise
+			request.value = newReq
+			return newReq
+		} catch (e) {
+			error.value = e
+			throw e
+		} finally {
+			loading.value = false
+		}
+	}
+
+	return {
+		start,
+		request,
+		signedAt,
+		status, // 'signed' | 'incomplete'
+		loading,
+		error,
+	}
+}

From c0dd7908779a0276f1e0f223f5fa2eab88daf198 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sun, 17 Aug 2025 17:48:46 +0100
Subject: [PATCH 03/49] fix: shouldShow should be managed on the page itself

---
 .../src/components/ui/CreatorTaxComplianceAlert.vue    | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index a0ef313c1c..dbb9905eb1 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -69,7 +69,6 @@
 		</div>
 	</NewModal>
 	<div
-		v-if="shouldShow"
 		class="mb-4 flex w-full flex-col gap-2 rounded-2xl border-[1px] border-solid border-orange bg-bg-orange p-4 text-sm text-contrast"
 	>
 		<span class="flex gap-2 align-middle text-xl font-bold text-orange"
@@ -99,15 +98,6 @@ console.log(auth.value.user)
 const isUSCitizen = ref<'yes' | 'no' | null>(null)
 const entityType = ref<'private-individual' | 'foreign-entity' | null>(null)
 
-const props = defineProps<{
-	totalAnnualWithdrawal: number
-	taxComplianceFilled: 'w9' | 'w8-ben' | 'w8-ben-e' | null
-}>()
-
-const shouldShow = computed(() => {
-	return props.totalAnnualWithdrawal >= 600 && !props.taxComplianceFilled
-})
-
 function hideModal() {
 	taxFormModal.value?.hide()
 }

From 983c3d6e188df7cae24bd354913a33ba7f666d83 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sun, 17 Aug 2025 18:05:46 +0100
Subject: [PATCH 04/49] refactor: move show logic to revenue page

---
 .../ui/CreatorTaxComplianceAlert.vue          |  2 +-
 .../src/pages/dashboard/revenue/index.vue     | 22 ++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index dbb9905eb1..5ae4818025 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -76,7 +76,7 @@
 		>
 		<span class="text-md text-orange"
 			>You have reached the annual withdrawal threshold of $600 USD and must complete a tax form
-			before you can withdraw additional funds.</span
+			before you can withdraw additional revenue.</span
 		>
 		<div>
 			<ButtonStyled color="orange">
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 9feeacb41b..f7146eaf8d 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="experimental-styles-within">
-		<CreatorTaxComplianceAlert />
+		<CreatorTaxComplianceAlert v-if="needTaxForms" />
 		<section class="universal-card">
 			<h2 class="text-2xl">Revenue</h2>
 			<div class="grid-display">
@@ -69,12 +69,12 @@
 				</div>
 			</div>
 			<div class="input-group mt-4">
-				<span :class="{ 'disabled-cursor-wrapper': userBalance.available < minWithdraw }">
+				<span :class="{ 'disabled-cursor-wrapper': shouldPreventWithdrawal }">
 					<nuxt-link
-						:aria-disabled="userBalance.available < minWithdraw ? 'true' : 'false'"
-						:class="{ 'disabled-link': userBalance.available < minWithdraw }"
-						:disabled="userBalance.available < minWithdraw ? 'true' : 'false'"
-						:tabindex="userBalance.available < minWithdraw ? -1 : undefined"
+						:aria-disabled="shouldPreventWithdrawal ? 'true' : 'false'"
+						:class="{ 'disabled-link': shouldPreventWithdrawal }"
+						:disabled="shouldPreventWithdrawal ? 'true' : 'false'"
+						:tabindex="shouldPreventWithdrawal ? -1 : undefined"
 						class="iconified-button brand-button"
 						to="/dashboard/revenue/withdraw"
 					>
@@ -166,6 +166,16 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 	useBaseFetch(`payout/balance`, { apiVersion: 3 }),
 )
 
+const needTaxForms = computed(() => {
+	return userBalance.value?.totalAnnualWithdrawal >= 600 && !userBalance.value?.taxComplianceFilled
+})
+
+const shouldPreventWithdrawal = computed(() => {
+	const available = userBalance.value?.available ?? 0
+	const balanceTooLow = available < (minWithdraw.value ?? 0)
+	return balanceTooLow || needTaxForms.value
+})
+
 const deadlineEnding = computed(() => {
 	let deadline = dayjs().subtract(2, 'month').endOf('month').add(60, 'days')
 	if (deadline.isBefore(dayjs().startOf('day'))) {

From 7429340b27a76a29ea322cc57ea41e826622ac05 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sun, 17 Aug 2025 18:59:30 +0100
Subject: [PATCH 05/49] feat: security practices rather than info

---
 .../components/ui/CreatorTaxComplianceAlert.vue  | 16 ++++++++++++----
 .../src/pages/dashboard/revenue/index.vue        |  3 ++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index 5ae4818025..a698d1bdb4 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -2,12 +2,20 @@
 	<NewModal ref="taxFormModal" header="Submit Tax Form" :closable="false">
 		<div
 			v-if="!shrinkModalBehindAvalara"
-			class="card flex flex-col rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
+			class="card flex flex-col gap-2 rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
 		>
 			<span>
-				Modrinth has a legal obligation to share these tax forms with the United States Internal
-				Revenue Service (IRS) after you meet the annual withdrawal threshold of $600 USD.
+				Modrinth uses a third-party provider (Track1099) to securely collect and store your tax
+				forms.
 			</span>
+			<a
+				href="https://www.track1099.com/info/security"
+				class="flex flex-row gap-1 align-middle text-link"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<InfoIcon class="my-auto" /> Learn more about their security practices here.
+			</a>
 		</div>
 		<div class="mt-2 flex flex-col gap-4" v-if="!shrinkModalBehindAvalara">
 			<div class="flex flex-col gap-2">
@@ -87,7 +95,7 @@
 </template>
 
 <script setup lang="ts">
-import { FileTextIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
+import { FileTextIcon, InfoIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, Chips, NewModal } from '@modrinth/ui'
 import { useAvalara1099, type FormRequestResponse } from '~/composables/avalara1099'
 
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index f7146eaf8d..2a13a603ae 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -167,7 +167,8 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 )
 
 const needTaxForms = computed(() => {
-	return userBalance.value?.totalAnnualWithdrawal >= 600 && !userBalance.value?.taxComplianceFilled
+	return true
+	//return userBalance.value?.totalAnnualWithdrawal >= 600 && !userBalance.value?.taxComplianceFilled
 })
 
 const shouldPreventWithdrawal = computed(() => {

From 368d79a8b10aedb5b0e48ca454d75fe6b3bdfc70 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Mon, 18 Aug 2025 17:34:48 +0100
Subject: [PATCH 06/49] feat: withdraw page lock

---
 apps/frontend/src/pages/dashboard/revenue/index.vue   |  4 +++-
 .../frontend/src/pages/dashboard/revenue/withdraw.vue | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 2a13a603ae..8942e36968 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -168,7 +168,9 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 
 const needTaxForms = computed(() => {
 	return true
-	//return userBalance.value?.totalAnnualWithdrawal >= 600 && !userBalance.value?.taxComplianceFilled
+	// return (
+	// 	userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
+	// )
 })
 
 const shouldPreventWithdrawal = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index b7f86899ae..48bd03cf1b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -175,7 +175,8 @@
 					!amount ||
 					!agreedTransfer ||
 					!agreedTerms ||
-					(fees > 0 && !agreedFees)
+					(fees > 0 && !agreedFees) ||
+					needTaxForms
 				"
 				class="iconified-button brand-button"
 				@click="withdraw"
@@ -228,6 +229,12 @@ const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMetho
 		),
 	])
 
+const needTaxForms = computed(() => {
+	return (
+		userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
+	)
+})
+
 const selectedMethodId = ref(payoutMethods.value[0].id)
 const selectedMethod = computed(() =>
 	payoutMethods.value.find((x) => x.id === selectedMethodId.value),
@@ -345,6 +352,8 @@ watch(selectedMethod, () => {
 async function withdraw() {
 	startLoading()
 	try {
+		if (needTaxForms.value) return
+
 		const auth = await useAuth()
 
 		await useBaseFetch(`payout`, {

From 443b777fc3ee36d68aae511b0641fd1cabeef0b7 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Tue, 19 Aug 2025 18:19:53 +0100
Subject: [PATCH 07/49] fix: empty modal bug & lint issues

---
 .../ui/CreatorTaxComplianceAlert.vue          | 27 ++++++++++---------
 apps/frontend/src/composables/avalara1099.ts  |  8 +++---
 .../src/pages/dashboard/revenue/index.vue     |  2 +-
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index a698d1bdb4..981cd5af42 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -1,7 +1,6 @@
 <template>
 	<NewModal ref="taxFormModal" header="Submit Tax Form" :closable="false">
 		<div
-			v-if="!shrinkModalBehindAvalara"
 			class="card flex flex-col gap-2 rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
 		>
 			<span>
@@ -17,7 +16,7 @@
 				<InfoIcon class="my-auto" /> Learn more about their security practices here.
 			</a>
 		</div>
-		<div class="mt-2 flex flex-col gap-4" v-if="!shrinkModalBehindAvalara">
+		<div class="mt-2 flex flex-col gap-4">
 			<div class="flex flex-col gap-2">
 				<label>
 					<span class="text-lg font-semibold text-contrast">
@@ -96,8 +95,11 @@
 
 <script setup lang="ts">
 import { FileTextIcon, InfoIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, NewModal } from '@modrinth/ui'
-import { useAvalara1099, type FormRequestResponse } from '~/composables/avalara1099'
+import { ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
+
+import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1099'
+
+const { addNotification } = injectNotificationManager()
 
 const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
 const auth = await useAuth()
@@ -139,22 +141,16 @@ const loading = computed(() =>
 	avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false,
 )
 
-const shrinkModalBehindAvalara = ref(false)
-
 async function continueForm() {
 	if (!import.meta.client) return
 	if (!determinedFormType.value) return
 
-	shrinkModalBehindAvalara.value = true
-
 	// TODO: Replace with actual response
 	const response: FormRequestResponse = {}
 
 	if (!avalaraState.value) {
-		console.log('epic')
 		avalaraState.value = useAvalara1099(response, {
 			prefill: {
-				name: 'Firstname Middlename Surname',
 				email: (auth.value.user as any)?.email ?? '',
 				account_number: (auth.value.user as any)?.id ?? '',
 			},
@@ -166,9 +162,14 @@ async function continueForm() {
 			await avalaraState.value.start()
 			console.log(avalaraState.value.status)
 		}
-	} catch (e) {}
-
-	shrinkModalBehindAvalara.value = false
+	} catch (error) {
+		console.error('Error occurred while continuing tax form:', error)
+		addNotification({
+			title: 'Error occurred while continuing tax form',
+			text: error instanceof Error ? error.message : String(error),
+			type: 'error',
+		})
+	}
 }
 
 watch(isUSCitizen, (newValue) => {
diff --git a/apps/frontend/src/composables/avalara1099.ts b/apps/frontend/src/composables/avalara1099.ts
index e9da73a70a..c34ab33a42 100644
--- a/apps/frontend/src/composables/avalara1099.ts
+++ b/apps/frontend/src/composables/avalara1099.ts
@@ -70,7 +70,7 @@ declare global {
 const injectedKey = '__avalara1099_script_injected__'
 
 function ensureScriptInjected(origin: string) {
-	if (process.server) return
+	if (import.meta.server) return
 	const w = window as any
 	if (w[injectedKey]) return
 	w[injectedKey] = true
@@ -90,7 +90,7 @@ async function waitForAvalara(opts: {
 	timeoutMs?: number
 	origin: string
 }): Promise<AvalaraGlobal> {
-	if (process.server) throw new Error('Avalara 1099 is client-side only')
+	if (import.meta.server) throw new Error('Avalara 1099 is client-side only')
 	ensureScriptInjected(opts.origin)
 	const start = Date.now()
 	return await new Promise((resolve, reject) => {
@@ -138,7 +138,7 @@ export function useAvalara1099(
 			let safeRequest: any
 			try {
 				safeRequest = JSON.parse(JSON.stringify(request.value))
-			} catch (_) {
+			} catch {
 				// Fallback shallow copy
 				safeRequest = Array.isArray(request.value)
 					? [...(request.value as any)]
@@ -148,7 +148,7 @@ export function useAvalara1099(
 			if (options.prefill) {
 				try {
 					safePrefill = JSON.parse(JSON.stringify(options.prefill))
-				} catch (_) {
+				} catch {
 					safePrefill = { ...options.prefill }
 				}
 			}
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index fbedf2527b..e908493726 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -153,8 +153,8 @@ import { injectNotificationManager } from '@modrinth/ui'
 import { formatDate } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
-import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
 
+import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
 import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
 const { addNotification, handleError } = injectNotificationManager()

From 76d9f62613f1a51a0a9c69037de850d1ae52d8cc Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Tue, 19 Aug 2025 18:36:59 +0100
Subject: [PATCH 08/49] feat: hide behind feature flag

---
 .../src/components/ui/CreatorTaxComplianceAlert.vue | 13 +++++++++----
 apps/frontend/src/composables/featureFlags.ts       |  1 +
 apps/frontend/src/pages/dashboard/revenue/index.vue |  9 +++++----
 .../src/pages/dashboard/revenue/withdraw.vue        |  3 +++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index 981cd5af42..017b4f9847 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -116,9 +116,9 @@ const determinedFormType = computed(() => {
 	if (isUSCitizen.value === 'yes') {
 		return 'W-9'
 	} else if (isUSCitizen.value === 'no' && entityType.value === 'private-individual') {
-		return 'W-8 BEN'
+		return 'W-8BEN'
 	} else if (isUSCitizen.value === 'no' && entityType.value === 'foreign-entity') {
-		return 'W-8 BEN-E'
+		return 'W-8BEN-E'
 	}
 	return null
 })
@@ -145,8 +145,13 @@ async function continueForm() {
 	if (!import.meta.client) return
 	if (!determinedFormType.value) return
 
-	// TODO: Replace with actual response
-	const response: FormRequestResponse = {}
+	const response = (await useBaseFetch('payout/compliance', {
+		version: 3,
+		method: 'POST',
+		body: {
+			form_type: determinedFormType.value,
+		},
+	})) as FormRequestResponse
 
 	if (!avalaraState.value) {
 		avalaraState.value = useAvalara1099(response, {
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 7905464945..c411ca97aa 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -34,6 +34,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	showProjectPageDownloadModalServersPromo: false,
 	showProjectPageCreateServersTooltip: true,
 	showProjectPageQuickServerButton: false,
+	showCreatorTaxCompliance: false,
 	// advancedRendering: true,
 	// externalLinksNewTab: true,
 	// notUsingBlockers: false,
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index e908493726..cf352cf7f5 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -159,6 +159,7 @@ import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
 const { addNotification, handleError } = injectNotificationManager()
 const auth = await useAuth()
+const flags = useFeatureFlags()
 const minWithdraw = ref(0.01)
 
 const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
@@ -166,10 +167,10 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 )
 
 const needTaxForms = computed(() => {
-	return true
-	// return (
-	// 	userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
-	// )
+	if (!flags.value.showCreatorTaxCompliance) return false
+	return (
+		userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
+	)
 })
 
 const shouldPreventWithdrawal = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 48bd03cf1b..a3c201b892 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -207,6 +207,7 @@ import VenmoIcon from '~/assets/images/external/venmo.svg?component'
 const { addNotification } = injectNotificationManager()
 const auth = await useAuth()
 const data = useNuxtApp()
+const flags = useFeatureFlags()
 
 const countries = computed(() =>
 	all().map((x) => ({
@@ -230,6 +231,8 @@ const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMetho
 	])
 
 const needTaxForms = computed(() => {
+	if (!flags.value.showCreatorTaxCompliance) return false
+
 	return (
 		userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
 	)

From 551c2bd7d0a654fbc817d6567726d80a218b87d1 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:29:28 -0700
Subject: [PATCH 09/49] Use standard admonition components, make casing
 consistent

---
 .../ui/CreatorTaxComplianceAlert.vue          | 103 +++++++++---------
 .../src/pages/dashboard/revenue/index.vue     |   9 +-
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index 017b4f9847..e4263c11a1 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -1,23 +1,20 @@
 <template>
 	<NewModal ref="taxFormModal" header="Submit Tax Form" :closable="false">
-		<div
-			class="card flex flex-col gap-2 rounded-2xl border-[1px] border-solid !bg-button-bg p-2 text-contrast"
-		>
-			<span>
-				Modrinth uses a third-party provider (Track1099) to securely collect and store your tax
-				forms.
-			</span>
-			<a
-				href="https://www.track1099.com/info/security"
-				class="flex flex-row gap-1 align-middle text-link"
-				target="_blank"
-				rel="noopener noreferrer"
+		<div class="max-w-[40rem]">
+			<Admonition
+				type="info"
+				header="Modrinth uses third-party provider Track1099 to securely collect and store your tax forms."
 			>
-				<InfoIcon class="my-auto" /> Learn more about their security practices here.
-			</a>
-		</div>
-		<div class="mt-2 flex flex-col gap-4">
-			<div class="flex flex-col gap-2">
+				<a
+					href="https://www.track1099.com/info/security"
+					class="flex w-fit flex-row gap-1 align-middle text-link"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Learn more about their security practices here. <ExternalIcon class="my-auto" />
+				</a>
+			</Admonition>
+			<div class="mt-4 flex flex-col gap-2">
 				<label>
 					<span class="text-lg font-semibold text-contrast">
 						Are you a US citizen?
@@ -40,62 +37,64 @@
 				leave-from-class="h-auto overflow-visible opacity-100"
 				leave-to-class="h-0 overflow-hidden opacity-0"
 			>
-				<div v-if="isUSCitizen === 'no'" class="flex flex-col gap-2">
-					<label>
+				<div v-if="isUSCitizen === 'no'" class="flex flex-col gap-1">
+					<label class="mt-4">
 						<span class="text-lg font-semibold text-contrast">
 							Are you a private individual or part of a foreign entity?
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
-					<span class="text-md -mt-2"
-						>A foreign entity means a business entity organized outside the United States (such as a
-						non-US corporation, partnership, or LLC).</span
-					>
+					<span class="text-md leading-tight">
+						A foreign entity means a business entity organized outside the United States (such as a
+						non-US corporation, partnership, or LLC).
+					</span>
 					<Chips
 						v-model="entityType"
 						:items="['private-individual', 'foreign-entity']"
 						:format-label="
-							(item) => (item === 'private-individual' ? 'Private Individual' : 'Foreign Entity')
+							(item) => (item === 'private-individual' ? 'Private individual' : 'Foreign entity')
 						"
 						:never-empty="false"
 						:capitalize="false"
+						class="mt-2"
 					/>
 				</div>
 			</Transition>
-		</div>
-		<div class="mt-4 flex w-full flex-row justify-between gap-2">
-			<ButtonStyled @click="$emit('close')"
-				><button @click="hideModal"><XIcon /> Cancel</button></ButtonStyled
-			>
-			<ButtonStyled color="brand">
-				<button :disabled="!canContinue || loading" @click="continueForm">
-					<span v-if="!loading">Continue</span>
-					<span v-else>Loading…</span>
-				</button>
-			</ButtonStyled>
+			<div class="mt-4 flex w-full flex-row justify-between gap-2">
+				<ButtonStyled @click="$emit('close')">
+					<button @click="hideModal"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!canContinue || loading" @click="continueForm">
+						<template v-if="!loading">Continue <RightArrowIcon /></template>
+						<template v-else><SpinnerIcon /> Loading…</template>
+					</button>
+				</ButtonStyled>
+			</div>
 		</div>
 	</NewModal>
-	<div
-		class="mb-4 flex w-full flex-col gap-2 rounded-2xl border-[1px] border-solid border-orange bg-bg-orange p-4 text-sm text-contrast"
-	>
-		<span class="flex gap-2 align-middle text-xl font-bold text-orange"
-			><TriangleAlertIcon class="my-auto" /> Tax Form Required</span
-		>
-		<span class="text-md text-orange"
-			>You have reached the annual withdrawal threshold of $600 USD and must complete a tax form
-			before you can withdraw additional revenue.</span
-		>
-		<div>
+	<Admonition type="warning" header="Tax form required" v-bind="$attrs">
+		<span class="text-orange">
+			You have reached the annual withdrawal threshold of $600 USD and must complete a tax form
+			before you can withdraw additional revenue.
+		</span>
+		<div class="mt-3">
 			<ButtonStyled color="orange">
-				<button @click="startTaxForm"><FileTextIcon /> Start Tax Form</button>
+				<button @click="startTaxForm"><FileTextIcon /> Start tax form</button>
 			</ButtonStyled>
 		</div>
-	</div>
+	</Admonition>
 </template>
 
 <script setup lang="ts">
-import { FileTextIcon, InfoIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
+	ExternalIcon,
+	FileTextIcon,
+	RightArrowIcon,
+	SpinnerIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
 
 import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1099'
 
@@ -182,6 +181,10 @@ watch(isUSCitizen, (newValue) => {
 		entityType.value = null
 	}
 })
+
+defineOptions({
+	inheritAttrs: false,
+})
 </script>
 
 <style>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index cf352cf7f5..0d1ae1b52d 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="experimental-styles-within">
-		<CreatorTaxComplianceAlert v-if="needTaxForms" />
+		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3"/>
 		<section class="universal-card">
 			<h2 class="text-2xl">Revenue</h2>
 			<div class="grid-display">
@@ -168,9 +168,10 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 
 const needTaxForms = computed(() => {
 	if (!flags.value.showCreatorTaxCompliance) return false
-	return (
-		userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
-	)
+	return true
+	// return (
+	// 	userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
+	// )
 })
 
 const shouldPreventWithdrawal = computed(() => {

From f9185dfd318cf36decca056efc2e7efcbd74bc08 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:30:05 -0700
Subject: [PATCH 10/49] modal title

---
 apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index e4263c11a1..644ee984c6 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="taxFormModal" header="Submit Tax Form" :closable="false">
+	<NewModal ref="taxFormModal" header="Submitting tax form" :closable="false">
 		<div class="max-w-[40rem]">
 			<Admonition
 				type="info"

From 58290aae1ceded59288f9577c440ffde033374d7 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:33:30 -0700
Subject: [PATCH 11/49] lint

---
 apps/docs/src/styles/modrinth.css                         | 5 ++---
 .../src/components/ui/CreatorTaxComplianceAlert.vue       | 8 +-------
 apps/frontend/src/pages/dashboard/revenue/index.vue       | 2 +-
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/docs/src/styles/modrinth.css b/apps/docs/src/styles/modrinth.css
index b61c7fbe4c..4f149c26a7 100644
--- a/apps/docs/src/styles/modrinth.css
+++ b/apps/docs/src/styles/modrinth.css
@@ -2,9 +2,8 @@
 ::backdrop,
 :root[data-theme='light'],
 [data-theme='light'] ::backdrop {
-	--sl-font-system:
-		Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
-		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	--sl-font-system: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+		Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 
 	--sl-color-white: var(--color-contrast); /* “white” */
 	--sl-color-gray-1: var(--color-base);
diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
index 644ee984c6..5cb5edc0e9 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
@@ -87,13 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	ExternalIcon,
-	FileTextIcon,
-	RightArrowIcon,
-	SpinnerIcon,
-	XIcon,
-} from '@modrinth/assets'
+import { ExternalIcon, FileTextIcon, RightArrowIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
 
 import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1099'
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 0d1ae1b52d..ae51908059 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="experimental-styles-within">
-		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3"/>
+		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
 		<section class="universal-card">
 			<h2 class="text-2xl">Revenue</h2>
 			<div class="grid-display">

From 519a0ce54c570a27202df171dfbe6980e1f18d7e Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Tue, 19 Aug 2025 20:11:33 +0100
Subject: [PATCH 12/49] feat: withdrawal check

---
 apps/frontend/src/pages/dashboard/revenue/index.vue   |  8 ++++----
 .../frontend/src/pages/dashboard/revenue/withdraw.vue | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index ae51908059..4954b7f8f2 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -168,10 +168,10 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 
 const needTaxForms = computed(() => {
 	if (!flags.value.showCreatorTaxCompliance) return false
-	return true
-	// return (
-	// 	userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
-	// )
+	const total = userBalance.value?.total_annual_withdrawal ?? 0
+	const available = userBalance.value?.available ?? 0
+	const projectedTotal = total + available
+	return projectedTotal >= 600 && !userBalance.value?.tax_compliance_filled
 })
 
 const shouldPreventWithdrawal = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index a3c201b892..8ac5076f26 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -1,4 +1,5 @@
 <template>
+	<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
 	<section class="universal-card">
 		<Breadcrumbs
 			current-title="Withdraw"
@@ -203,6 +204,7 @@ import { all } from 'iso-3166-1'
 import { Multiselect } from 'vue-multiselect'
 
 import VenmoIcon from '~/assets/images/external/venmo.svg?component'
+import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
 
 const { addNotification } = injectNotificationManager()
 const auth = await useAuth()
@@ -232,10 +234,10 @@ const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMetho
 
 const needTaxForms = computed(() => {
 	if (!flags.value.showCreatorTaxCompliance) return false
-
-	return (
-		userBalance.value?.total_annual_withdrawal >= 600 && !userBalance.value?.tax_compliance_filled
-	)
+	const total = userBalance.value?.total_annual_withdrawal ?? 590
+	const available = userBalance.value?.available ?? 0
+	const projectedTotal = total + available
+	return projectedTotal >= 600 && !userBalance.value?.tax_compliance_filled
 })
 
 const selectedMethodId = ref(payoutMethods.value[0].id)
@@ -473,7 +475,6 @@ async function withdraw() {
 			-khtml-user-drag: none;
 			-moz-user-drag: none;
 			-o-user-drag: none;
-			user-drag: none;
 			user-select: none;
 			width: 100%;
 			height: auto;

From 77889ec177c48c2527ea95665e3ab6493839a228 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Tue, 19 Aug 2025 21:00:46 +0100
Subject: [PATCH 13/49] feat: tax cap on withdrawals warning

---
 .../src/pages/dashboard/revenue/index.vue     |  6 +-
 .../src/pages/dashboard/revenue/withdraw.vue  | 66 ++++++++++++++++---
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 4954b7f8f2..902243a483 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -168,10 +168,8 @@ const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
 
 const needTaxForms = computed(() => {
 	if (!flags.value.showCreatorTaxCompliance) return false
-	const total = userBalance.value?.total_annual_withdrawal ?? 0
-	const available = userBalance.value?.available ?? 0
-	const projectedTotal = total + available
-	return projectedTotal >= 600 && !userBalance.value?.tax_compliance_filled
+	const totalWithdrawn = userBalance.value?.total_annual_withdrawal ?? 0
+	return totalWithdrawn >= 600 && !userBalance.value?.tax_compliance_filled
 })
 
 const shouldPreventWithdrawal = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 8ac5076f26..58717c0393 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -93,7 +93,7 @@
 		<p>
 			You are initiating a transfer of your revenue from Modrinth's Creator Monetization Program.
 			How much of your
-			<strong>{{ $formatMoney(userBalance.available) }}</strong> balance would you like to transfer
+			<strong>{{ $formatMoney(availableBalance) }}</strong> balance would you like to transfer
 			transfer to {{ selectedMethod.name }}?
 		</p>
 		<div class="confirmation-input">
@@ -165,6 +165,12 @@
 				</span>
 			</template>
 		</div>
+		<template v-if="taxFeatureEnabled && !taxComplianceFilled">
+			<p class="text-xs text-secondary" role="note">
+				Tax form required after <strong>$600</strong> in annual withdrawals. You have
+				<strong>{{ $formatMoney(remainingBeforeTaxForms) }}</strong> remaining.
+			</p>
+		</template>
 		<div class="button-group">
 			<nuxt-link to="/dashboard/revenue" class="iconified-button">
 				<XIcon />
@@ -211,6 +217,28 @@ const auth = await useAuth()
 const data = useNuxtApp()
 const flags = useFeatureFlags()
 
+// TESTING PURPOSES ONLY
+// Toggle tax feature flag for testing (true/false). Null uses the actual flag.
+const DEV_TAX_FEATURE_FLAG = true
+// Override total amount withdrawn this year (number). Null uses the actual value.
+const DEV_TOTAL_ANNUAL_WITHDRAWN = 520
+// Override whether tax compliance is already filled (true/false). Null uses the actual value.
+const DEV_TAX_COMPLIANCE_FILLED = false
+// Override available balance (number). Null uses the actual value.
+const DEV_AVAILABLE = 125
+
+const taxFeatureEnabled = computed(
+	() => DEV_TAX_FEATURE_FLAG ?? flags.value.showCreatorTaxCompliance,
+)
+const totalWithdrawnForTax = computed(
+	() => DEV_TOTAL_ANNUAL_WITHDRAWN ?? userBalance.value?.total_annual_withdrawal ?? 0,
+)
+const taxComplianceFilled = computed(
+	() => DEV_TAX_COMPLIANCE_FILLED ?? userBalance.value?.tax_compliance_filled,
+)
+
+const availableBalance = computed(() => DEV_AVAILABLE ?? userBalance.value?.available ?? 0)
+
 const countries = computed(() =>
 	all().map((x) => ({
 		id: x.alpha2,
@@ -233,11 +261,9 @@ const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMetho
 	])
 
 const needTaxForms = computed(() => {
-	if (!flags.value.showCreatorTaxCompliance) return false
-	const total = userBalance.value?.total_annual_withdrawal ?? 590
-	const available = userBalance.value?.available ?? 0
-	const projectedTotal = total + available
-	return projectedTotal >= 600 && !userBalance.value?.tax_compliance_filled
+	if (!taxFeatureEnabled.value) return false
+	const totalWithdrawn = totalWithdrawnForTax.value
+	return totalWithdrawn >= 600 && !taxComplianceFilled.value
 })
 
 const selectedMethodId = ref(payoutMethods.value[0].id)
@@ -279,9 +305,20 @@ const getRangeOfMethod = (method) => {
 	return getIntervalRange(method.interval?.fixed || method.interval?.standard)
 }
 
+const remainingBeforeTaxForms = computed(() => Math.max(0, 600 - totalWithdrawnForTax.value))
+
+const taxCap = computed(() => {
+	if (!taxFeatureEnabled.value) return Infinity
+	if (taxComplianceFilled.value) return Infinity
+	return remainingBeforeTaxForms.value
+})
+
 const maxWithdrawAmount = computed(() => {
 	const interval = selectedMethod.value.interval
-	return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0)
+	const methodMax = interval?.standard
+		? interval.standard.max
+		: (interval?.fixed?.values.slice(-1)[0] ?? 0)
+	return Math.min(methodMax, taxCap.value)
 })
 
 const minWithdrawAmount = computed(() => {
@@ -298,8 +335,10 @@ const withdrawAccount = computed(() => {
 		return auth.value.user.email
 	}
 })
+
 const knownErrors = computed(() => {
 	const errors = []
+
 	if (selectedMethod.value.type === 'paypal' && !auth.value.user.payout_data.paypal_address) {
 		errors.push('Please link your PayPal account in the dashboard to proceed.')
 	}
@@ -318,11 +357,18 @@ const knownErrors = computed(() => {
 	if (!parsedAmount.value && amount.value.length > 0) {
 		errors.push(`${amount.value} is not a valid amount`)
 	} else if (
-		parsedAmount.value > userBalance.value.available ||
+		parsedAmount.value > availableBalance.value ||
 		parsedAmount.value > maxWithdrawAmount.value
 	) {
-		const maxAmount = Math.min(userBalance.value.available, maxWithdrawAmount.value)
-		errors.push(`The amount must be no more than ${data.$formatMoney(maxAmount)}`)
+		const exceededTaxCap = isFinite(taxCap.value) && parsedAmount.value > taxCap.value
+		const maxAmount = Math.min(availableBalance.value, maxWithdrawAmount.value)
+		if (exceededTaxCap && parsedAmount.value <= availableBalance.value) {
+			errors.push(
+				`This amount exceeds the $600 tax reporting threshold. You have ${data.$formatMoney(Math.min(availableBalance.value, taxCap.value))} before you reach it. Once you reach the $600 threshold, you must complete a tax form to unlock all future withdrawals.`,
+			)
+		} else {
+			errors.push(`The amount must be no more than ${data.$formatMoney(availableBalance.value)}`)
+		}
 	} else if (parsedAmount.value <= fees.value || parsedAmount.value < minWithdrawAmount.value) {
 		const minAmount = Math.max(fees.value + 0.01, minWithdrawAmount.value)
 		errors.push(`The amount must be at least ${data.$formatMoney(minAmount)}`)

From a1b30a7096a9117bcf51e6ad4c85e8718aa7ca3d Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Wed, 27 Aug 2025 14:15:10 +0100
Subject: [PATCH 14/49] feat: start on revenue page overhaul

---
 apps/frontend/nuxt.config.ts                  |   6 +
 .../CreatorTaxFormModal.vue}                  |  13 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     |  42 ++
 apps/frontend/src/composables/featureFlags.ts |   1 -
 .../src/pages/dashboard/revenue/index.vue     | 352 ++++-------
 .../src/pages/dashboard/revenue/old_idnex.vue | 256 ++++++++
 .../src/pages/dashboard/revenue/withdraw.vue  | 597 ------------------
 packages/ui/src/components/modal/NewModal.vue |  15 +-
 8 files changed, 443 insertions(+), 839 deletions(-)
 rename apps/frontend/src/components/ui/{CreatorTaxComplianceAlert.vue => dashboard/CreatorTaxFormModal.vue} (91%)
 create mode 100644 apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
 create mode 100644 apps/frontend/src/pages/dashboard/revenue/old_idnex.vue
 delete mode 100644 apps/frontend/src/pages/dashboard/revenue/withdraw.vue

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index ab532a2057..de954586c7 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -453,6 +453,12 @@ export default defineNuxtConfig({
 				'Critical-CH': 'Sec-CH-Prefers-Color-Scheme',
 			},
 		},
+		'/dashboard/revenue/withdraw': {
+			redirect: {
+				to: '/dashboard/revenue',
+				statusCode: 410,
+			},
+		},
 	},
 	compatibilityDate: '2024-07-03',
 	telemetry: false,
diff --git a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
similarity index 91%
rename from apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
rename to apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 5cb5edc0e9..16aa1cc258 100644
--- a/apps/frontend/src/components/ui/CreatorTaxComplianceAlert.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -73,21 +73,10 @@
 			</div>
 		</div>
 	</NewModal>
-	<Admonition type="warning" header="Tax form required" v-bind="$attrs">
-		<span class="text-orange">
-			You have reached the annual withdrawal threshold of $600 USD and must complete a tax form
-			before you can withdraw additional revenue.
-		</span>
-		<div class="mt-3">
-			<ButtonStyled color="orange">
-				<button @click="startTaxForm"><FileTextIcon /> Start tax form</button>
-			</ButtonStyled>
-		</div>
-	</Admonition>
 </template>
 
 <script setup lang="ts">
-import { ExternalIcon, FileTextIcon, RightArrowIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { ExternalIcon, RightArrowIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
 
 import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1099'
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
new file mode 100644
index 0000000000..4c31997d38
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -0,0 +1,42 @@
+<template>
+	<NewModal
+		ref="withdrawModal"
+		:header="currentStageLabel"
+		:noblur="true"
+		:closable="currentStage !== 'confirmation'"
+		:merge-header="!currentStageLabel"
+		@onHide="currentStage = undefined"
+	>
+		<template>
+			<p>Test</p>
+			<button @click="open('withdraw-limit')">Set withdraw-limit stage</button>
+			<button @click="open('payment-method')">Set payment-method stage</button>
+			<button @click="open('withdraw-amount')">Set withdraw-amount stage</button>
+			<button @click="open('confirmation')">Set confirmation stage</button>
+		</template>
+	</NewModal>
+</template>
+<script lang="ts" setup>
+import { NewModal } from '@modrinth/ui'
+
+type Stage = 'withdraw-limit' | 'payment-method' | 'withdraw-amount' | 'confirmation'
+
+const stageLabels = readonly<Record<Stage, string | undefined>>({
+	'withdraw-limit': 'Withdraw Limit',
+	'payment-method': 'Payment Method',
+	'withdraw-amount': 'Withdraw Amount',
+	confirmation: undefined,
+})
+
+const currentStageLabel = computed<string | undefined>(() => {
+	if (!currentStage.value) return undefined
+	return stageLabels[currentStage.value]
+})
+
+const withdrawModal = ref<InstanceType<typeof NewModal> | null>(null)
+const currentStage = ref<Stage | undefined>()
+function open(stage: Stage) {
+	currentStage.value = stage
+	withdrawModal.value?.show()
+}
+</script>
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index decd7bdec5..7d6d48272d 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -35,7 +35,6 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	showProjectPageDownloadModalServersPromo: false,
 	showProjectPageCreateServersTooltip: true,
 	showProjectPageQuickServerButton: false,
-	showCreatorTaxCompliance: false,
 	// advancedRendering: true,
 	// externalLinksNewTab: true,
 	// notUsingBlockers: false,
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 902243a483..618eaf4d46 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,256 +1,152 @@
 <template>
-	<div class="experimental-styles-within">
-		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
-		<section class="universal-card">
-			<h2 class="text-2xl">Revenue</h2>
-			<div class="grid-display">
-				<div class="grid-display__item">
-					<div class="label">Available now</div>
-					<div class="value">
-						{{ $formatMoney(userBalance.available) }}
-					</div>
+	<div class="flex flex-col gap-8 p-2">
+		<div class="flex flex-col gap-5">
+			<div class="flex flex-col">
+				<span class="text-2xl text-contrast">Revenue</span>
+				<span
+					class="via-bg-brand-button bg-gradient-to-r from-brand-green via-20% to-brand-blue bg-clip-text text-4xl font-extrabold text-transparent"
+					>{{ formatMoney(grandTotal) }}</span
+				>
+			</div>
+			<div class="flex h-3 w-full overflow-hidden rounded-full">
+				<span
+					class="zone zone--green h-full flex-none bg-brand-green"
+					:style="{ width: zoneGreenPct }"
+				></span>
+				<span
+					class="zone zone--striped--green h-full flex-none bg-highlight"
+					:style="{ width: zoneStripedPct }"
+				></span>
+				<span
+					class="zone zone--striped--gray h-full flex-none bg-button-bg"
+					:style="{ width: zoneBgPct }"
+				></span>
+			</div>
+			<div class="grid grid-cols-3 gap-4">
+				<div class="border-0 !border-r-[2px] border-solid border-button-bg">
+					<span class="flex flex-row gap-2 align-middle text-xl"
+						><span class="my-auto block size-4 rounded-full bg-brand-green px-2"></span> Available
+						now</span
+					>
+					<span class="text-2xl font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
 				</div>
-				<div class="grid-display__item">
-					<div class="label">
-						Total pending
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
-							<UnknownIcon />
-						</nuxt-link>
-					</div>
-					<div class="value">
-						{{ $formatMoney(userBalance.pending) }}
-					</div>
+				<div class="border-0 !border-r-[2px] border-solid border-button-bg">
+					<span class="flex flex-row gap-2 align-middle text-xl"
+						><span
+							class="zone--striped--green zone--striped-small my-auto block size-4 rounded-full bg-highlight px-2"
+						></span>
+						Available {{ nextDate?.date ? dayjs(nextDate.date).format('MMM D, YYYY') : '' }}</span
+					>
+					<span class="text-2xl font-bold text-contrast">{{
+						formatMoney(nextDate?.amount ?? 0)
+					}}</span>
 				</div>
-				<div class="grid-display__item">
-					<h3 class="label m-0">
-						Available soon
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
-							<UnknownIcon />
-						</nuxt-link>
-					</h3>
-					<ul class="m-0 list-none p-0">
-						<li
-							v-for="date in availableSoonDateKeys"
-							:key="date"
-							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
+				<div>
+					<div class="flex flex-row justify-between">
+						<span class="flex flex-row gap-2 align-middle text-xl"
+							><span
+								class="zone--striped--gray zone--striped-small my-auto block size-4 rounded-full bg-button-bg px-2"
+							></span>
+							Processing</span
 						>
-							<span
-								v-tooltip="
-									availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
-										? `Revenue period is ongoing. \nThis amount is not yet finalized.`
-										: null
-								"
-								:class="{
-									'cursor-help':
-										availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
-								}"
-								class="inline-flex items-center gap-1 font-bold"
+						<span class="my-auto block size-5">
+							<nuxt-link
+								v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+								class="align-middle text-link"
+								to="/legal/cmp-info#pending"
 							>
-								{{ $formatMoney(availableSoonDates[date]) }}
-								<template
-									v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
-								>
-									<InProgressIcon />
-								</template>
-							</span>
-							<span class="text-sm text-secondary">
-								{{ formatDate(dayjs(date)) }}
-							</span>
-						</li>
-					</ul>
+								<UnknownIcon class="size-5" />
+							</nuxt-link>
+						</span>
+					</div>
+					<span class="text-2xl font-bold text-contrast">{{ formatMoney(remainingPending) }}</span>
 				</div>
 			</div>
-			<div class="input-group mt-4">
-				<span :class="{ 'disabled-cursor-wrapper': shouldPreventWithdrawal }">
-					<nuxt-link
-						:aria-disabled="shouldPreventWithdrawal ? 'true' : 'false'"
-						:class="{ 'disabled-link': shouldPreventWithdrawal }"
-						:disabled="shouldPreventWithdrawal ? 'true' : 'false'"
-						:tabindex="shouldPreventWithdrawal ? -1 : undefined"
-						class="iconified-button brand-button"
-						to="/dashboard/revenue/withdraw"
-					>
-						<TransferIcon /> Withdraw
-					</nuxt-link>
-				</span>
-				<NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
-					<HistoryIcon />
-					View transfer history
-				</NuxtLink>
-			</div>
-			<p class="text-sm text-secondary">
-				By uploading projects to Modrinth and withdrawing money from your account, you agree to the
-				<nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. For more
-				information on how the rewards system works, see our information page
-				<nuxt-link class="text-link" to="/legal/cmp-info">here</nuxt-link>.
-			</p>
-		</section>
-		<section class="universal-card">
-			<h2 class="text-2xl">Payout methods</h2>
-			<h3>PayPal</h3>
-			<template v-if="auth.user.auth_providers.includes('paypal')">
-				<p>
-					Your PayPal {{ auth.user.payout_data.paypal_country }} account is currently connected with
-					email
-					{{ auth.user.payout_data.paypal_address }}
-				</p>
-				<button class="btn mt-4" @click="handleRemoveAuthProvider('paypal')">
-					<XIcon />
-					Disconnect account
-				</button>
-			</template>
-			<template v-else>
-				<p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
-				<a :href="`${getAuthUrl('paypal')}&token=${auth.token}`" class="btn mt-4">
-					<PayPalIcon />
-					Sign in with PayPal
-				</a>
-			</template>
-			<h3>Tremendous</h3>
-			<p>
-				Tremendous payments are sent to your Modrinth email. To change/set your Modrinth email,
-				visit
-				<nuxt-link class="text-link" to="/settings/account">here</nuxt-link>.
-			</p>
-			<h3>Venmo</h3>
-			<p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
-			<label class="hidden" for="venmo">Venmo address</label>
-			<input
-				id="venmo"
-				v-model="auth.user.payout_data.venmo_handle"
-				autocomplete="off"
-				class="mt-4"
-				name="search"
-				placeholder="@example"
-				type="search"
-			/>
-			<button class="btn btn-secondary" @click="updateVenmo">
-				<SaveIcon />
-				Save information
-			</button>
-		</section>
+		</div>
 	</div>
 </template>
-<script setup>
-import {
-	HistoryIcon,
-	InProgressIcon,
-	PayPalIcon,
-	SaveIcon,
-	TransferIcon,
-	UnknownIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { injectNotificationManager } from '@modrinth/ui'
-import { formatDate } from '@modrinth/utils'
+<script setup lang="ts">
+import { UnknownIcon } from '@modrinth/assets'
+import { formatMoney } from '@modrinth/utils'
 import dayjs from 'dayjs'
-import { computed } from 'vue'
-
-import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
-import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
-const { addNotification, handleError } = injectNotificationManager()
-const auth = await useAuth()
-const flags = useFeatureFlags()
-const minWithdraw = ref(0.01)
+interface UserBalanceResponse {
+	available: number
+	pending: number
+	// ISO 8601 date string: number
+	dates: Record<string, number>
+}
 
-const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
-	useBaseFetch(`payout/balance`, { apiVersion: 3 }),
+const { data: userBalance } = await useAsyncData(
+	`payout/balance`,
+	() => useBaseFetch(`payout/balance`, { apiVersion: 3 }) as Promise<UserBalanceResponse>,
 )
 
-const needTaxForms = computed(() => {
-	if (!flags.value.showCreatorTaxCompliance) return false
-	const totalWithdrawn = userBalance.value?.total_annual_withdrawal ?? 0
-	return totalWithdrawn >= 600 && !userBalance.value?.tax_compliance_filled
-})
-
-const shouldPreventWithdrawal = computed(() => {
-	const available = userBalance.value?.available ?? 0
-	const balanceTooLow = available < (minWithdraw.value ?? 0)
-	return balanceTooLow || needTaxForms.value
-})
+const totalAvailable = computed(() => (userBalance.value ? Number(userBalance.value.available) : 0))
+const nextDate = computed<{ date: string; amount: number } | null>(() => {
+	const dates = userBalance.value?.dates
+	if (!dates) return null
 
-const deadlineEnding = computed(() => {
-	let deadline = dayjs().subtract(2, 'month').endOf('month').add(60, 'days')
-	if (deadline.isBefore(dayjs().startOf('day'))) {
-		deadline = dayjs().subtract(1, 'month').endOf('month').add(60, 'days')
-	}
-	return deadline
-})
-
-async function handleRemoveAuthProvider(provider) {
-	try {
-		await removeAuthProvider(provider)
-	} catch (error) {
-		handleError(error)
-	}
-}
+	const now = Date.now()
 
-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)
-		.filter((date) => {
-			const dateObj = dayjs(date)
-			return (
-				dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, 'month'))
-			)
-		})
-		.sort((a, b) => dayjs(a).diff(dayjs(b)))
+	const upcoming = Object.entries(dates)
+		.map(([date, amount]) => ({ date, amount: Number(amount) }))
+		.filter(({ date }) => new Date(date).getTime() > now)
+		.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())[0]
 
-	return dates.reduce((acc, date) => {
-		acc[date] = userBalance.value.dates[date]
-		return acc
-	}, {})
+	return upcoming ?? null
 })
+const remainingPending = computed(() => {
+	return userBalance.value ? Number(userBalance.value.pending) - (nextDate.value?.amount ?? 0) : 0
+})
+const grandTotal = computed(
+	() => totalAvailable.value + (nextDate.value?.amount ?? 0) + remainingPending.value,
+)
 
-const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value))
-
-async function updateVenmo() {
-	startLoading()
-	try {
-		const data = {
-			venmo_handle: auth.value.user.payout_data.venmo_handle ?? null,
-		}
-
-		await useBaseFetch(`user/${auth.value.user.id}`, {
-			method: 'PATCH',
-			body: data,
-			apiVersion: 3,
-		})
-		await useAuth(auth.value.token)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
-}
+const zoneGreen = ref(40)
+const zoneStriped = ref(20)
+const zoneGreenPct = computed(() => `${zoneGreen.value}%`)
+const zoneStripedPct = computed(() => `${zoneStriped.value}%`)
+const zoneBgPct = computed(() => `${Math.max(0, 100 - zoneGreen.value - zoneStriped.value)}%`)
 </script>
-<style lang="scss" scoped>
-strong {
-	color: var(--color-text-dark);
-	font-weight: 500;
+
+<style scoped lang="scss">
+.zone--striped--green,
+.zone--striped--gray {
+	background-attachment: fixed;
+	background-position: 0 0;
+	background-size: 9.38px 9.38px;
 }
 
-.disabled-cursor-wrapper {
-	cursor: not-allowed;
+.zone--striped-small {
+	background-size: 6.19px 6.19px !important;
+	background-position: unset !important;
+	background-attachment: unset !important;
 }
 
-.disabled-link {
-	pointer-events: none;
+.zone--striped--green {
+	background-image: linear-gradient(
+		135deg,
+		var(--color-green) 11.54%,
+		transparent 11.54%,
+		transparent 50%,
+		var(--color-green) 50%,
+		var(--color-green) 61.54%,
+		transparent 61.54%,
+		transparent 100%
+	);
 }
 
-.grid-display {
-	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+.zone--striped--gray {
+	background-image: linear-gradient(
+		135deg,
+		var(--color-button-bg-hover) 11.54%,
+		transparent 11.54%,
+		transparent 50%,
+		var(--color-button-bg-hover) 50%,
+		var(--color-button-bg-hover) 61.54%,
+		transparent 61.54%,
+		transparent 100%
+	);
 }
 </style>
diff --git a/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue b/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue
new file mode 100644
index 0000000000..93e6e22088
--- /dev/null
+++ b/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue
@@ -0,0 +1,256 @@
+<template>
+	<div class="experimental-styles-within">
+		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
+		<section class="universal-card">
+			<h2 class="text-2xl">Revenue</h2>
+			<div class="grid-display">
+				<div class="grid-display__item">
+					<div class="label">Available now</div>
+					<div class="value">
+						{{ $formatMoney(userBalance.available) }}
+					</div>
+				</div>
+				<div class="grid-display__item">
+					<div class="label">
+						Total pending
+						<nuxt-link
+							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link"
+							to="/legal/cmp-info#pending"
+						>
+							<UnknownIcon />
+						</nuxt-link>
+					</div>
+					<div class="value">
+						{{ $formatMoney(userBalance.pending) }}
+					</div>
+				</div>
+				<div class="grid-display__item">
+					<h3 class="label m-0">
+						Available soon
+						<nuxt-link
+							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
+							class="align-middle text-link"
+							to="/legal/cmp-info#pending"
+						>
+							<UnknownIcon />
+						</nuxt-link>
+					</h3>
+					<ul class="m-0 list-none p-0">
+						<li
+							v-for="date in availableSoonDateKeys"
+							:key="date"
+							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
+						>
+							<span
+								v-tooltip="
+									availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
+										? `Revenue period is ongoing. \nThis amount is not yet finalized.`
+										: null
+								"
+								:class="{
+									'cursor-help':
+										availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
+								}"
+								class="inline-flex items-center gap-1 font-bold"
+							>
+								{{ $formatMoney(availableSoonDates[date]) }}
+								<template
+									v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
+								>
+									<InProgressIcon />
+								</template>
+							</span>
+							<span class="text-sm text-secondary">
+								{{ formatDate(dayjs(date)) }}
+							</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div class="input-group mt-4">
+				<span :class="{ 'disabled-cursor-wrapper': shouldPreventWithdrawal }">
+					<nuxt-link
+						:aria-disabled="shouldPreventWithdrawal ? 'true' : 'false'"
+						:class="{ 'disabled-link': shouldPreventWithdrawal }"
+						:disabled="shouldPreventWithdrawal ? 'true' : 'false'"
+						:tabindex="shouldPreventWithdrawal ? -1 : undefined"
+						class="iconified-button brand-button"
+						to="/dashboard/revenue/withdraw"
+					>
+						<TransferIcon /> Withdraw
+					</nuxt-link>
+				</span>
+				<NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
+					<HistoryIcon />
+					View transfer history
+				</NuxtLink>
+			</div>
+			<p class="text-sm text-secondary">
+				By uploading projects to Modrinth and withdrawing money from your account, you agree to the
+				<nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. For more
+				information on how the rewards system works, see our information page
+				<nuxt-link class="text-link" to="/legal/cmp-info">here</nuxt-link>.
+			</p>
+		</section>
+		<section class="universal-card">
+			<h2 class="text-2xl">Payout methods</h2>
+			<h3>PayPal</h3>
+			<template v-if="auth.user.auth_providers.includes('paypal')">
+				<p>
+					Your PayPal {{ auth.user.payout_data.paypal_country }} account is currently connected with
+					email
+					{{ auth.user.payout_data.paypal_address }}
+				</p>
+				<button class="btn mt-4" @click="handleRemoveAuthProvider('paypal')">
+					<XIcon />
+					Disconnect account
+				</button>
+			</template>
+			<template v-else>
+				<p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
+				<a :href="`${getAuthUrl('paypal')}&token=${auth.token}`" class="btn mt-4">
+					<PayPalIcon />
+					Sign in with PayPal
+				</a>
+			</template>
+			<h3>Tremendous</h3>
+			<p>
+				Tremendous payments are sent to your Modrinth email. To change/set your Modrinth email,
+				visit
+				<nuxt-link class="text-link" to="/settings/account">here</nuxt-link>.
+			</p>
+			<h3>Venmo</h3>
+			<p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
+			<label class="hidden" for="venmo">Venmo address</label>
+			<input
+				id="venmo"
+				v-model="auth.user.payout_data.venmo_handle"
+				autocomplete="off"
+				class="mt-4"
+				name="search"
+				placeholder="@example"
+				type="search"
+			/>
+			<button class="btn btn-secondary" @click="updateVenmo">
+				<SaveIcon />
+				Save information
+			</button>
+		</section>
+	</div>
+</template>
+<script setup>
+import {
+	HistoryIcon,
+	InProgressIcon,
+	PayPalIcon,
+	SaveIcon,
+	TransferIcon,
+	UnknownIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { formatDate } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
+
+import CreatorTaxComplianceAlert from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
+import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
+
+const { addNotification, handleError } = injectNotificationManager()
+const auth = await useAuth()
+const flags = useFeatureFlags()
+const minWithdraw = ref(0.01)
+
+const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
+	useBaseFetch(`payout/balance`, { apiVersion: 3 }),
+)
+
+const needTaxForms = computed(() => {
+	if (!flags.value.showCreatorTaxCompliance) return false
+	const totalWithdrawn = userBalance.value?.total_annual_withdrawal ?? 0
+	return totalWithdrawn >= 600 && !userBalance.value?.tax_compliance_filled
+})
+
+const shouldPreventWithdrawal = computed(() => {
+	const available = userBalance.value?.available ?? 0
+	const balanceTooLow = available < (minWithdraw.value ?? 0)
+	return balanceTooLow || needTaxForms.value
+})
+
+const deadlineEnding = computed(() => {
+	let deadline = dayjs().subtract(2, 'month').endOf('month').add(60, 'days')
+	if (deadline.isBefore(dayjs().startOf('day'))) {
+		deadline = dayjs().subtract(1, 'month').endOf('month').add(60, 'days')
+	}
+	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)
+		.filter((date) => {
+			const dateObj = dayjs(date)
+			return (
+				dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, 'month'))
+			)
+		})
+		.sort((a, b) => dayjs(a).diff(dayjs(b)))
+
+	return dates.reduce((acc, date) => {
+		acc[date] = userBalance.value.dates[date]
+		return acc
+	}, {})
+})
+
+const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value))
+
+async function updateVenmo() {
+	startLoading()
+	try {
+		const data = {
+			venmo_handle: auth.value.user.payout_data.venmo_handle ?? null,
+		}
+
+		await useBaseFetch(`user/${auth.value.user.id}`, {
+			method: 'PATCH',
+			body: data,
+			apiVersion: 3,
+		})
+		await useAuth(auth.value.token)
+	} catch (err) {
+		addNotification({
+			title: 'An error occurred',
+			text: err.data ? err.data.description : err,
+			type: 'error',
+		})
+	}
+	stopLoading()
+}
+</script>
+<style lang="scss" scoped>
+strong {
+	color: var(--color-text-dark);
+	font-weight: 500;
+}
+
+.disabled-cursor-wrapper {
+	cursor: not-allowed;
+}
+
+.disabled-link {
+	pointer-events: none;
+}
+
+.grid-display {
+	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+</style>
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
deleted file mode 100644
index 58717c0393..0000000000
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ /dev/null
@@ -1,597 +0,0 @@
-<template>
-	<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
-	<section class="universal-card">
-		<Breadcrumbs
-			current-title="Withdraw"
-			:link-stack="[{ href: '/dashboard/revenue', label: 'Revenue' }]"
-		/>
-
-		<h2>Withdraw</h2>
-
-		<h3>Region</h3>
-		<Multiselect
-			id="country-multiselect"
-			v-model="country"
-			class="country-multiselect"
-			placeholder="Select country..."
-			track-by="id"
-			label="name"
-			:options="countries"
-			:searchable="true"
-			:close-on-select="true"
-			:show-labels="false"
-			:allow-empty="false"
-		/>
-
-		<h3>Withdraw method</h3>
-
-		<div class="iconified-input">
-			<label class="hidden" for="search">Search</label>
-			<SearchIcon aria-hidden="true" />
-			<input
-				id="search"
-				v-model="search"
-				name="search"
-				placeholder="Search options..."
-				autocomplete="off"
-			/>
-		</div>
-		<div class="withdraw-options-scroll">
-			<div class="withdraw-options">
-				<button
-					v-for="method in payoutMethods
-						.filter((x) => x.name.toLowerCase().includes(search.toLowerCase()))
-						.sort((a, b) =>
-							a.type !== 'tremendous'
-								? -1
-								: a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
-						)"
-					:key="method.id"
-					class="withdraw-option button-base"
-					:class="{ selected: selectedMethodId === method.id }"
-					@click="() => (selectedMethodId = method.id)"
-				>
-					<div class="preview" :class="{ 'show-bg': !method.image_url || method.name === 'ACH' }">
-						<template v-if="method.image_url && method.name !== 'ACH'">
-							<div class="preview-badges">
-								<span class="badge">
-									{{
-										getRangeOfMethod(method)
-											.map($formatMoney)
-											.map((i) => i.replace('.00', ''))
-											.join('–')
-									}}
-								</span>
-							</div>
-							<img
-								v-if="method.image_url && method.name !== 'ACH'"
-								class="preview-img"
-								:src="method.image_url"
-								:alt="method.name"
-							/>
-						</template>
-						<div v-else class="placeholder">
-							<template v-if="method.type === 'venmo'">
-								<VenmoIcon class="enlarge" />
-							</template>
-							<template v-else>
-								<PayPalIcon v-if="method.type === 'paypal'" />
-								<span>{{ method.name }}</span>
-							</template>
-						</div>
-					</div>
-					<div class="label">
-						<RadioButtonCheckedIcon v-if="selectedMethodId === method.id" class="radio" />
-						<RadioButtonIcon v-else class="radio" />
-						<span>{{ method.name }}</span>
-					</div>
-				</button>
-			</div>
-		</div>
-
-		<h3>Amount</h3>
-		<p>
-			You are initiating a transfer of your revenue from Modrinth's Creator Monetization Program.
-			How much of your
-			<strong>{{ $formatMoney(availableBalance) }}</strong> balance would you like to transfer
-			transfer to {{ selectedMethod.name }}?
-		</p>
-		<div class="confirmation-input">
-			<template v-if="selectedMethod.interval.fixed">
-				<Chips
-					v-model="amount"
-					:items="selectedMethod.interval.fixed.values"
-					:format-label="(val) => '$' + val"
-				/>
-			</template>
-			<template v-else-if="minWithdrawAmount == maxWithdrawAmount">
-				<div>
-					<p>
-						This method has a fixed transfer amount of
-						<strong>{{ $formatMoney(minWithdrawAmount) }}</strong
-						>.
-					</p>
-				</div>
-			</template>
-			<template v-else>
-				<div>
-					<p>
-						This method has a minimum transfer amount of
-						<strong>{{ $formatMoney(minWithdrawAmount) }}</strong> and a maximum transfer amount of
-						<strong>{{ $formatMoney(maxWithdrawAmount) }}</strong
-						>.
-					</p>
-					<input
-						id="confirmation"
-						v-model="amount"
-						type="text"
-						pattern="^\d*(\.\d{0,2})?$"
-						autocomplete="off"
-						placeholder="Amount to transfer..."
-					/>
-					<p>
-						You have entered <strong>{{ $formatMoney(parsedAmount) }}</strong> to transfer.
-					</p>
-				</div>
-			</template>
-		</div>
-
-		<div class="confirm-text">
-			<template v-if="knownErrors.length === 0 && amount">
-				<Checkbox v-if="fees > 0" v-model="agreedFees" description="Consent to fee">
-					I acknowledge that an estimated
-					{{ formatMoney(fees) }} will be deducted from the amount I receive to cover
-					{{ formatWallet(selectedMethod.type) }} processing fees.
-				</Checkbox>
-				<Checkbox v-model="agreedTransfer" description="Confirm transfer">
-					<template v-if="selectedMethod.type === 'tremendous'">
-						I confirm that I am initiating a transfer and I will receive further instructions on how
-						to redeem this payment via email to:
-						{{ withdrawAccount }}
-					</template>
-					<template v-else>
-						I confirm that I am initiating a transfer to the following
-						{{ formatWallet(selectedMethod.type) }} account: {{ withdrawAccount }}
-					</template>
-				</Checkbox>
-				<Checkbox v-model="agreedTerms" class="rewards-checkbox">
-					I agree to the
-					<nuxt-link to="/legal/cmp" class="text-link">Rewards Program Terms</nuxt-link>
-				</Checkbox>
-			</template>
-			<template v-else>
-				<span v-for="(error, index) in knownErrors" :key="index" class="invalid">
-					{{ error }}
-				</span>
-			</template>
-		</div>
-		<template v-if="taxFeatureEnabled && !taxComplianceFilled">
-			<p class="text-xs text-secondary" role="note">
-				Tax form required after <strong>$600</strong> in annual withdrawals. You have
-				<strong>{{ $formatMoney(remainingBeforeTaxForms) }}</strong> remaining.
-			</p>
-		</template>
-		<div class="button-group">
-			<nuxt-link to="/dashboard/revenue" class="iconified-button">
-				<XIcon />
-				Cancel
-			</nuxt-link>
-			<button
-				:disabled="
-					knownErrors.length > 0 ||
-					!amount ||
-					!agreedTransfer ||
-					!agreedTerms ||
-					(fees > 0 && !agreedFees) ||
-					needTaxForms
-				"
-				class="iconified-button brand-button"
-				@click="withdraw"
-			>
-				<TransferIcon />
-				Withdraw
-			</button>
-		</div>
-	</section>
-</template>
-
-<script setup>
-import {
-	PayPalIcon,
-	RadioButtonCheckedIcon,
-	RadioButtonIcon,
-	SearchIcon,
-	TransferIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { Breadcrumbs, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
-import { formatMoney, formatWallet } from '@modrinth/utils'
-import { all } from 'iso-3166-1'
-import { Multiselect } from 'vue-multiselect'
-
-import VenmoIcon from '~/assets/images/external/venmo.svg?component'
-import CreatorTaxComplianceAlert from '~/components/ui/CreatorTaxComplianceAlert.vue'
-
-const { addNotification } = injectNotificationManager()
-const auth = await useAuth()
-const data = useNuxtApp()
-const flags = useFeatureFlags()
-
-// TESTING PURPOSES ONLY
-// Toggle tax feature flag for testing (true/false). Null uses the actual flag.
-const DEV_TAX_FEATURE_FLAG = true
-// Override total amount withdrawn this year (number). Null uses the actual value.
-const DEV_TOTAL_ANNUAL_WITHDRAWN = 520
-// Override whether tax compliance is already filled (true/false). Null uses the actual value.
-const DEV_TAX_COMPLIANCE_FILLED = false
-// Override available balance (number). Null uses the actual value.
-const DEV_AVAILABLE = 125
-
-const taxFeatureEnabled = computed(
-	() => DEV_TAX_FEATURE_FLAG ?? flags.value.showCreatorTaxCompliance,
-)
-const totalWithdrawnForTax = computed(
-	() => DEV_TOTAL_ANNUAL_WITHDRAWN ?? userBalance.value?.total_annual_withdrawal ?? 0,
-)
-const taxComplianceFilled = computed(
-	() => DEV_TAX_COMPLIANCE_FILLED ?? userBalance.value?.tax_compliance_filled,
-)
-
-const availableBalance = computed(() => DEV_AVAILABLE ?? userBalance.value?.available ?? 0)
-
-const countries = computed(() =>
-	all().map((x) => ({
-		id: x.alpha2,
-		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
-	})),
-)
-const search = ref('')
-
-const amount = ref('')
-const country = ref(
-	countries.value.find((x) => x.id === (auth.value.user.payout_data.paypal_region ?? 'US')),
-)
-
-const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMethods }] =
-	await Promise.all([
-		useAsyncData(`payout/balance`, () => useBaseFetch(`payout/balance`, { apiVersion: 3 })),
-		useAsyncData(`payout/methods?country=${country.value.id}`, () =>
-			useBaseFetch(`payout/methods?country=${country.value.id}`, { apiVersion: 3 }),
-		),
-	])
-
-const needTaxForms = computed(() => {
-	if (!taxFeatureEnabled.value) return false
-	const totalWithdrawn = totalWithdrawnForTax.value
-	return totalWithdrawn >= 600 && !taxComplianceFilled.value
-})
-
-const selectedMethodId = ref(payoutMethods.value[0].id)
-const selectedMethod = computed(() =>
-	payoutMethods.value.find((x) => x.id === selectedMethodId.value),
-)
-
-const parsedAmount = computed(() => {
-	const regex = /^\$?(\d*(\.\d{2})?)$/gm
-	const matches = regex.exec(amount.value)
-	return matches && matches[1] ? parseFloat(matches[1]) : 0.0
-})
-const fees = computed(() => {
-	return Math.min(
-		Math.max(
-			selectedMethod.value.fee.min,
-			selectedMethod.value.fee.percentage * parsedAmount.value,
-		),
-		selectedMethod.value.fee.max ?? Number.MAX_VALUE,
-	)
-})
-
-const getIntervalRange = (intervalType) => {
-	if (!intervalType) {
-		return []
-	}
-
-	const { min, max, values } = intervalType
-	if (values) {
-		const first = values[0]
-		const last = values.slice(-1)[0]
-		return first === last ? [first] : [first, last]
-	}
-
-	return min === max ? [min] : [min, max]
-}
-
-const getRangeOfMethod = (method) => {
-	return getIntervalRange(method.interval?.fixed || method.interval?.standard)
-}
-
-const remainingBeforeTaxForms = computed(() => Math.max(0, 600 - totalWithdrawnForTax.value))
-
-const taxCap = computed(() => {
-	if (!taxFeatureEnabled.value) return Infinity
-	if (taxComplianceFilled.value) return Infinity
-	return remainingBeforeTaxForms.value
-})
-
-const maxWithdrawAmount = computed(() => {
-	const interval = selectedMethod.value.interval
-	const methodMax = interval?.standard
-		? interval.standard.max
-		: (interval?.fixed?.values.slice(-1)[0] ?? 0)
-	return Math.min(methodMax, taxCap.value)
-})
-
-const minWithdrawAmount = computed(() => {
-	const interval = selectedMethod.value.interval
-	return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value)
-})
-
-const withdrawAccount = computed(() => {
-	if (selectedMethod.value.type === 'paypal') {
-		return auth.value.user.payout_data.paypal_address
-	} else if (selectedMethod.value.type === 'venmo') {
-		return auth.value.user.payout_data.venmo_handle
-	} else {
-		return auth.value.user.email
-	}
-})
-
-const knownErrors = computed(() => {
-	const errors = []
-
-	if (selectedMethod.value.type === 'paypal' && !auth.value.user.payout_data.paypal_address) {
-		errors.push('Please link your PayPal account in the dashboard to proceed.')
-	}
-	if (selectedMethod.value.type === 'venmo' && !auth.value.user.payout_data.venmo_handle) {
-		errors.push('Please set your Venmo handle in the dashboard to proceed.')
-	}
-	if (selectedMethod.value.type === 'tremendous') {
-		if (!auth.value.user.email) {
-			errors.push('Please set your email address in your account settings to proceed.')
-		}
-		if (!auth.value.user.email_verified) {
-			errors.push('Please verify your email address to proceed.')
-		}
-	}
-
-	if (!parsedAmount.value && amount.value.length > 0) {
-		errors.push(`${amount.value} is not a valid amount`)
-	} else if (
-		parsedAmount.value > availableBalance.value ||
-		parsedAmount.value > maxWithdrawAmount.value
-	) {
-		const exceededTaxCap = isFinite(taxCap.value) && parsedAmount.value > taxCap.value
-		const maxAmount = Math.min(availableBalance.value, maxWithdrawAmount.value)
-		if (exceededTaxCap && parsedAmount.value <= availableBalance.value) {
-			errors.push(
-				`This amount exceeds the $600 tax reporting threshold. You have ${data.$formatMoney(Math.min(availableBalance.value, taxCap.value))} before you reach it. Once you reach the $600 threshold, you must complete a tax form to unlock all future withdrawals.`,
-			)
-		} else {
-			errors.push(`The amount must be no more than ${data.$formatMoney(availableBalance.value)}`)
-		}
-	} else if (parsedAmount.value <= fees.value || parsedAmount.value < minWithdrawAmount.value) {
-		const minAmount = Math.max(fees.value + 0.01, minWithdrawAmount.value)
-		errors.push(`The amount must be at least ${data.$formatMoney(minAmount)}`)
-	}
-
-	return errors
-})
-
-const agreedTransfer = ref(false)
-const agreedFees = ref(false)
-const agreedTerms = ref(false)
-
-watch(country, async () => {
-	await refreshPayoutMethods()
-	if (payoutMethods.value && payoutMethods.value[0]) {
-		selectedMethodId.value = payoutMethods.value[0].id
-	}
-})
-
-watch(selectedMethod, () => {
-	if (selectedMethod.value.interval?.fixed) {
-		amount.value = selectedMethod.value.interval.fixed.values[0]
-	}
-	if (maxWithdrawAmount.value === minWithdrawAmount.value) {
-		amount.value = maxWithdrawAmount.value
-	}
-	agreedTransfer.value = false
-	agreedFees.value = false
-	agreedTerms.value = false
-})
-
-async function withdraw() {
-	startLoading()
-	try {
-		if (needTaxForms.value) return
-
-		const auth = await useAuth()
-
-		await useBaseFetch(`payout`, {
-			method: 'POST',
-			body: {
-				amount: parsedAmount.value,
-				method: selectedMethod.value.type,
-				method_id: selectedMethod.value.id,
-			},
-			apiVersion: 3,
-		})
-		await useAuth(auth.value.token)
-		await navigateTo('/dashboard/revenue')
-		addNotification({
-			title: 'Withdrawal complete',
-			text:
-				selectedMethod.value.type === 'tremendous'
-					? 'An email has been sent to your account with further instructions on how to redeem your payout!'
-					: `Payment has been sent to your ${formatWallet(selectedMethod.value.type)} account!`,
-			type: 'success',
-		})
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
-}
-</script>
-
-<style lang="scss" scoped>
-.withdraw-options-scroll {
-	max-height: 460px;
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: var(--gap-md);
-		border: 3px solid var(--color-bg);
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--color-bg);
-		border: 3px solid var(--color-bg);
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: var(--color-raised-bg);
-		border-radius: var(--radius-lg);
-		border: 3px solid var(--color-bg);
-	}
-}
-
-.withdraw-options {
-	display: grid;
-	grid-template-columns: repeat(1, 1fr);
-	gap: var(--gap-lg);
-	padding-right: 0.5rem;
-
-	@media screen and (min-width: 300px) {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media screen and (min-width: 600px) {
-		grid-template-columns: repeat(3, 1fr);
-	}
-}
-
-.withdraw-option {
-	width: 100%;
-	border-radius: var(--radius-md);
-	padding: 0;
-	overflow: hidden;
-	border: 1px solid var(--color-divider);
-	background-color: var(--color-button-bg);
-	color: var(--color-text);
-
-	&.selected {
-		color: var(--color-contrast);
-
-		.label svg {
-			color: var(--color-brand);
-		}
-	}
-
-	.preview {
-		display: flex;
-		justify-content: center;
-		aspect-ratio: 30 / 19;
-		position: relative;
-
-		.preview-badges {
-			// These will float over the image in the bottom right corner
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			padding: var(--gap-sm) var(--gap-xs);
-
-			.badge {
-				background-color: var(--color-button-bg);
-				border-radius: var(--radius-xs);
-				padding: var(--gap-xs) var(--gap-sm);
-				font-size: var(--font-size-xs);
-			}
-		}
-
-		&.show-bg {
-			background-color: var(--color-bg);
-		}
-
-		img {
-			-webkit-user-drag: none;
-			-khtml-user-drag: none;
-			-moz-user-drag: none;
-			-o-user-drag: none;
-			user-select: none;
-			width: 100%;
-			height: auto;
-			object-fit: cover;
-		}
-
-		.placeholder {
-			display: flex;
-			align-items: center;
-			gap: var(--gap-xs);
-
-			svg {
-				width: 2rem;
-				height: auto;
-			}
-
-			span {
-				font-weight: var(--font-weight-bold);
-				font-size: 2rem;
-				font-style: italic;
-			}
-
-			.enlarge {
-				width: auto;
-				height: 1.5rem;
-			}
-		}
-	}
-
-	.label {
-		display: flex;
-		align-items: center;
-		padding: var(--gap-md) var(--gap-lg);
-
-		svg {
-			min-height: 1rem;
-			min-width: 1rem;
-			margin-right: 0.5rem;
-		}
-
-		span {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-		}
-	}
-}
-
-.invalid {
-	color: var(--color-red);
-}
-
-.confirm-text {
-	margin: var(--spacing-card-md) 0;
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-card-sm);
-}
-
-.iconified-input {
-	margin-bottom: var(--spacing-card-md);
-}
-
-.country-multiselect,
-.iconified-input {
-	max-width: 16rem;
-}
-
-.rewards-checkbox {
-	a {
-		margin-left: 0.5ch;
-	}
-}
-</style>
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index c4fa828026..667eaac4f2 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -21,6 +21,7 @@
 		<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
 			<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
 				<div
+					v-if="!props.mergeHeader"
 					data-tauri-drag-region
 					class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
 				>
@@ -37,7 +38,17 @@
 						</button>
 					</ButtonStyled>
 				</div>
-				<div class="overflow-y-auto p-6">
+
+				<ButtonStyled
+					v-if="props.mergeHeader && closable"
+					class="absolute top-4 right-4 z-10"
+					circular
+				>
+					<button v-tooltip="'Close'" aria-label="Close" @click="hide">
+						<XIcon aria-hidden="true" />
+					</button>
+				</ButtonStyled>
+				<div :class="['overflow-y-auto p-6', { 'pt-12': props.mergeHeader && closable }]">
 					<slot> You just lost the game.</slot>
 				</div>
 			</div>
@@ -63,6 +74,7 @@ const props = withDefaults(
 		header?: string
 		onHide?: () => void
 		onShow?: () => void
+		mergeHeader?: boolean
 	}>(),
 	{
 		type: true,
@@ -74,6 +86,7 @@ const props = withDefaults(
 		header: undefined,
 		onHide: () => {},
 		onShow: () => {},
+		mergeHeader: false,
 	},
 )
 

From 25a5bb36fce8317dd64253928dc0eaced4a29ebf Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 28 Aug 2025 11:06:06 +0100
Subject: [PATCH 15/49] feat: segment generation for bar

---
 .../src/pages/dashboard/revenue/index.vue     | 232 ++++++++++++------
 1 file changed, 160 insertions(+), 72 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 618eaf4d46..846f60d0c8 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -2,71 +2,66 @@
 	<div class="flex flex-col gap-8 p-2">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
-				<span class="text-2xl text-contrast">Revenue</span>
+				<span class="text-2xl font-semibold text-contrast">Balance</span>
 				<span
-					class="via-bg-brand-button bg-gradient-to-r from-brand-green via-20% to-brand-blue bg-clip-text text-4xl font-extrabold text-transparent"
+					class="bg-gradient-to-r from-brand-purple via-brand-orange via-20% to-brand-orange bg-clip-text text-4xl font-extrabold text-transparent"
 					>{{ formatMoney(grandTotal) }}</span
 				>
 			</div>
-			<div class="flex h-3 w-full overflow-hidden rounded-full">
+			<div class="flex h-3 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
 				<span
-					class="zone zone--green h-full flex-none bg-brand-green"
-					:style="{ width: zoneGreenPct }"
-				></span>
-				<span
-					class="zone zone--striped--green h-full flex-none bg-highlight"
-					:style="{ width: zoneStripedPct }"
-				></span>
-				<span
-					class="zone zone--striped--gray h-full flex-none bg-button-bg"
-					:style="{ width: zoneBgPct }"
+					v-for="seg in segments"
+					:key="seg.key"
+					class="h-full flex-none"
+					:class="seg.class"
+					:style="{ width: seg.widthPct }"
 				></span>
 			</div>
-			<div class="grid grid-cols-3 gap-4">
-				<div class="border-0 !border-r-[2px] border-solid border-button-bg">
-					<span class="flex flex-row gap-2 align-middle text-xl"
-						><span class="my-auto block size-4 rounded-full bg-brand-green px-2"></span> Available
+			<div class="flex flex-col">
+				<div
+					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
+				>
+					<span class="text-md flex flex-row gap-2 align-middle"
+						><span class="my-auto block size-4 rounded-full bg-brand-green"></span> Available
 						now</span
 					>
-					<span class="text-2xl font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
+					<span class="text-md font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
 				</div>
-				<div class="border-0 !border-r-[2px] border-solid border-button-bg">
-					<span class="flex flex-row gap-2 align-middle text-xl"
+				<div
+					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
+					v-for="date in dateSegments"
+					:key="date.date"
+				>
+					<span class="text-md flex flex-row gap-2 align-middle"
 						><span
-							class="zone--striped--green zone--striped-small my-auto block size-4 rounded-full bg-highlight px-2"
+							class="zone--striped-small my-auto block size-4 rounded-full"
+							:class="[date.stripeClass, date.highlightClass]"
 						></span>
-						Available {{ nextDate?.date ? dayjs(nextDate.date).format('MMM D, YYYY') : '' }}</span
+						Available {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}</span
 					>
-					<span class="text-2xl font-bold text-contrast">{{
-						formatMoney(nextDate?.amount ?? 0)
-					}}</span>
+					<span class="text-md font-bold text-contrast">{{ formatMoney(date?.amount ?? 0) }}</span>
 				</div>
-				<div>
-					<div class="flex flex-row justify-between">
-						<span class="flex flex-row gap-2 align-middle text-xl"
-							><span
-								class="zone--striped--gray zone--striped-small my-auto block size-4 rounded-full bg-button-bg px-2"
-							></span>
-							Processing</span
-						>
-						<span class="my-auto block size-5">
-							<nuxt-link
-								v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-								class="align-middle text-link"
-								to="/legal/cmp-info#pending"
-							>
-								<UnknownIcon class="size-5" />
-							</nuxt-link>
-						</span>
-					</div>
-					<span class="text-2xl font-bold text-contrast">{{ formatMoney(remainingPending) }}</span>
+				<div
+					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
+				>
+					<span class="text-md flex flex-row gap-2 align-middle"
+						><span
+							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg"
+						></span>
+						Processing</span
+					>
+					<span class="text-md font-bold text-contrast">{{
+						formatMoney(processingDate?.amount ?? 0)
+					}}</span>
 				</div>
 			</div>
 		</div>
+		<div>
+			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { UnknownIcon } from '@modrinth/assets'
 import { formatMoney } from '@modrinth/utils'
 import dayjs from 'dayjs'
 
@@ -83,61 +78,148 @@ const { data: userBalance } = await useAsyncData(
 )
 
 const totalAvailable = computed(() => (userBalance.value ? Number(userBalance.value.available) : 0))
-const nextDate = computed<{ date: string; amount: number } | null>(() => {
+const nextDate = computed<{ date: string; amount: number }[]>(() => {
 	const dates = userBalance.value?.dates
-	if (!dates) return null
+	if (!dates) return []
 
 	const now = Date.now()
 
-	const upcoming = Object.entries(dates)
+	return Object.entries(dates)
 		.map(([date, amount]) => ({ date, amount: Number(amount) }))
 		.filter(({ date }) => new Date(date).getTime() > now)
-		.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())[0]
-
-	return upcoming ?? null
+		.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
 })
-const remainingPending = computed(() => {
-	return userBalance.value ? Number(userBalance.value.pending) - (nextDate.value?.amount ?? 0) : 0
+
+const processingDate = computed<{ date: string; amount: number }>(() => {
+	const nextDates = nextDate.value
+	if (!nextDates.length) return { date: '', amount: 0 }
+
+	return nextDates[nextDates.length - 1]
 })
-const grandTotal = computed(
-	() => totalAvailable.value + (nextDate.value?.amount ?? 0) + remainingPending.value,
+
+const grandTotal = computed(() =>
+	userBalance.value ? Number(userBalance.value.available) + Number(userBalance.value.pending) : 0,
 )
 
-const zoneGreen = ref(40)
-const zoneStriped = ref(20)
-const zoneGreenPct = computed(() => `${zoneGreen.value}%`)
-const zoneStripedPct = computed(() => `${zoneStriped.value}%`)
-const zoneBgPct = computed(() => `${Math.max(0, 100 - zoneGreen.value - zoneStriped.value)}%`)
+const dateStripeClasses = [
+	'zone--striped--blue',
+	'zone--striped--purple',
+	'zone--striped--orange',
+	'zone--striped--red',
+] as const
+
+const dateHighlightClasses = [
+	'bg-highlight-blue',
+	'bg-highlight-purple',
+	'bg-highlight-orange',
+	'bg-highlight-red',
+] as const
+
+const dateSegments = computed(() => {
+	const dates = nextDate.value
+	if (!dates?.length)
+		return [] as Array<{
+			date: string
+			amount: number
+			stripeClass: string
+			highlightClass: string
+		}>
+
+	return dates.slice(0, -1).map((d, i) => ({
+		...d,
+		stripeClass: dateStripeClasses[i % dateStripeClasses.length],
+		highlightClass: dateHighlightClasses[i % dateHighlightClasses.length],
+	}))
+})
+
+const segments = computed(() => {
+	const available = totalAvailable.value || 0
+	const dates = nextDate.value || []
+	const processing = processingDate.value
+
+	const upcoming = dates.slice(0, Math.max(0, dates.length - 1))
+	const totalPending = dates.reduce((sum, d) => sum + (Number(d.amount) || 0), 0)
+	const total = available + totalPending
+
+	if (total <= 0) return [] as Array<{ key: string; class: string; widthPct: string }>
+
+	const segs: Array<{ key: string; class: string; width: number }> = []
+
+	if (available > 0) {
+		segs.push({ key: 'available', class: 'bg-brand-green', width: available / total })
+	}
+
+	upcoming.forEach((d, i) => {
+		const amt = Number(d.amount) || 0
+		if (amt <= 0) return
+		const stripe = dateStripeClasses[i % dateStripeClasses.length]
+		const hi = dateHighlightClasses[i % dateHighlightClasses.length]
+		segs.push({
+			key: `upcoming-${d.date}-${i}`,
+			class: `${stripe} ${hi}`,
+			width: amt / total,
+		})
+	})
+
+	if (processing?.amount) {
+		segs.push({
+			key: 'processing',
+			class: 'zone--striped--gray bg-button-bg',
+			width: (Number(processing.amount) || 0) / total,
+		})
+	}
+
+	let acc = 0
+	// normalize widths to sum to 100%, then drop any that are 0% and re-adjust the last
+	const normalized = segs.map((s, idx) => {
+		let pct = Math.round(s.width * 10000) / 100 // keep 2 decimals
+		if (idx === segs.length - 1) {
+			pct = Math.max(0, 100 - acc)
+		}
+		acc += pct
+		return { key: s.key, class: s.class, pct }
+	})
+
+	const filtered = normalized.filter((s) => s.pct > 0)
+	if (!filtered.length) return []
+
+	const sumExceptLast = filtered.slice(0, -1).reduce((sum, s) => sum + s.pct, 0)
+	filtered[filtered.length - 1].pct = Math.max(0, 100 - sumExceptLast)
+
+	return filtered.map((s) => ({ key: s.key, class: s.class, widthPct: `${s.pct}%` }))
+})
 </script>
 
 <style scoped lang="scss">
-.zone--striped--green,
-.zone--striped--gray {
+%zone--striped-common {
 	background-attachment: fixed;
 	background-position: 0 0;
 	background-size: 9.38px 9.38px;
 }
 
-.zone--striped-small {
-	background-size: 6.19px 6.19px !important;
-	background-position: unset !important;
-	background-attachment: unset !important;
-}
-
-.zone--striped--green {
+@mixin striped-background($color-variable) {
 	background-image: linear-gradient(
 		135deg,
-		var(--color-green) 11.54%,
+		$color-variable 11.54%,
 		transparent 11.54%,
 		transparent 50%,
-		var(--color-green) 50%,
-		var(--color-green) 61.54%,
+		$color-variable 50%,
+		$color-variable 61.54%,
 		transparent 61.54%,
 		transparent 100%
 	);
 }
 
+$striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
+@each $color in $striped-colors {
+	.zone--striped--#{$color} {
+		@include striped-background(var(--color-#{$color}));
+		@extend %zone--striped-common;
+	}
+}
+
 .zone--striped--gray {
+	@extend %zone--striped-common;
 	background-image: linear-gradient(
 		135deg,
 		var(--color-button-bg-hover) 11.54%,
@@ -149,4 +231,10 @@ const zoneBgPct = computed(() => `${Math.max(0, 100 - zoneGreen.value - zoneStri
 		transparent 100%
 	);
 }
+
+.zone--striped-small {
+	background-size: 6.19px 6.19px !important;
+	background-position: unset !important;
+	background-attachment: unset !important;
+}
 </style>

From 82983649e1eaddf2a901ded4ae5ee194d29c1c32 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 28 Aug 2025 11:44:14 +0100
Subject: [PATCH 16/49] feat: tooltips and links

---
 .../src/pages/dashboard/revenue/index.vue     | 78 ++++++++++++++-----
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 846f60d0c8..88611d1100 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -9,13 +9,14 @@
 				>
 			</div>
 			<div class="flex h-3 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
-				<span
-					v-for="seg in segments"
-					:key="seg.key"
-					class="h-full flex-none"
-					:class="seg.class"
-					:style="{ width: seg.widthPct }"
-				></span>
+				<template v-for="seg in segments" :key="seg.key">
+					<span
+						v-tooltip="formatMoney(seg.amount)"
+						class="block h-full"
+						:class="seg.class"
+						:style="{ width: seg.widthPct }"
+					></span>
+				</template>
 			</div>
 			<div class="flex flex-col">
 				<div
@@ -37,8 +38,19 @@
 							class="zone--striped-small my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
-						Available {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}</span
-					>
+						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']">
+							<nuxt-link class="align-middle text-link" to="/legal/cmp-info#pending">
+								<UnknownIcon />
+							</nuxt-link>
+							<template #popper>
+								<div class="w-[250px] font-normal text-primary">
+									Estimated revenue may be subject to change until it is made available.<br /><br />Click
+									to read about how Modrinth handles your revenue.
+								</div>
+							</template>
+						</Tooltip>
+					</span>
 					<span class="text-md font-bold text-contrast">{{ formatMoney(date?.amount ?? 0) }}</span>
 				</div>
 				<div
@@ -48,8 +60,17 @@
 						><span
 							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg"
 						></span>
-						Processing</span
-					>
+						Processing
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']">
+							<InProgressIcon class="my-auto" />
+							<template #popper>
+								<div class="w-[250px] font-normal text-primary">
+									Revenue stays in processing until the end of the month, then becomes available 60
+									days later.
+								</div>
+							</template>
+						</Tooltip>
+					</span>
 					<span class="text-md font-bold text-contrast">{{
 						formatMoney(processingDate?.amount ?? 0)
 					}}</span>
@@ -62,8 +83,10 @@
 	</div>
 </template>
 <script setup lang="ts">
+import { InProgressIcon, UnknownIcon } from '@modrinth/assets'
 import { formatMoney } from '@modrinth/utils'
 import dayjs from 'dayjs'
+import { Tooltip } from 'floating-vue'
 
 interface UserBalanceResponse {
 	available: number
@@ -72,6 +95,13 @@ interface UserBalanceResponse {
 	dates: Record<string, number>
 }
 
+type RevenueBarSegment = {
+	key: string
+	class: string
+	widthPct: string
+	amount: number
+}
+
 const { data: userBalance } = await useAsyncData(
 	`payout/balance`,
 	() => useBaseFetch(`payout/balance`, { apiVersion: 3 }) as Promise<UserBalanceResponse>,
@@ -132,7 +162,7 @@ const dateSegments = computed(() => {
 	}))
 })
 
-const segments = computed(() => {
+const segments = computed<RevenueBarSegment[]>(() => {
 	const available = totalAvailable.value || 0
 	const dates = nextDate.value || []
 	const processing = processingDate.value
@@ -141,12 +171,17 @@ const segments = computed(() => {
 	const totalPending = dates.reduce((sum, d) => sum + (Number(d.amount) || 0), 0)
 	const total = available + totalPending
 
-	if (total <= 0) return [] as Array<{ key: string; class: string; widthPct: string }>
+	if (total <= 0) return [] as RevenueBarSegment[]
 
-	const segs: Array<{ key: string; class: string; width: number }> = []
+	const segs: Array<{ key: string; class: string; width: number; amount: number }> = []
 
 	if (available > 0) {
-		segs.push({ key: 'available', class: 'bg-brand-green', width: available / total })
+		segs.push({
+			key: 'available',
+			class: 'bg-brand-green',
+			width: available / total,
+			amount: available,
+		})
 	}
 
 	upcoming.forEach((d, i) => {
@@ -158,6 +193,7 @@ const segments = computed(() => {
 			key: `upcoming-${d.date}-${i}`,
 			class: `${stripe} ${hi}`,
 			width: amt / total,
+			amount: amt,
 		})
 	})
 
@@ -166,6 +202,7 @@ const segments = computed(() => {
 			key: 'processing',
 			class: 'zone--striped--gray bg-button-bg',
 			width: (Number(processing.amount) || 0) / total,
+			amount: Number(processing.amount) || 0,
 		})
 	}
 
@@ -177,16 +214,21 @@ const segments = computed(() => {
 			pct = Math.max(0, 100 - acc)
 		}
 		acc += pct
-		return { key: s.key, class: s.class, pct }
+		return { key: s.key, class: s.class, pct, amount: s.amount }
 	})
 
 	const filtered = normalized.filter((s) => s.pct > 0)
-	if (!filtered.length) return []
+	if (!filtered.length) return [] as RevenueBarSegment[]
 
 	const sumExceptLast = filtered.slice(0, -1).reduce((sum, s) => sum + s.pct, 0)
 	filtered[filtered.length - 1].pct = Math.max(0, 100 - sumExceptLast)
 
-	return filtered.map((s) => ({ key: s.key, class: s.class, widthPct: `${s.pct}%` }))
+	return filtered.map((s) => ({
+		key: s.key,
+		class: s.class,
+		widthPct: `${s.pct}%`,
+		amount: s.amount,
+	})) as RevenueBarSegment[]
 })
 </script>
 

From ba8bf6ac85a6b49f1215325a5e887cad015d9df2 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 28 Aug 2025 22:31:19 +0100
Subject: [PATCH 17/49] fix: tooltip border

---
 .../frontend/src/pages/dashboard/revenue/index.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 88611d1100..45b50db928 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -279,4 +279,18 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	background-position: unset !important;
 	background-attachment: unset !important;
 }
+
+:deep(.v-popper--theme-dismissable-prompt) {
+	.v-popper__inner {
+		border: none !important;
+	}
+
+	.v-popper__arrow-outer {
+		border-color: transparent !important;
+	}
+
+	.v-popper__arrow-inner {
+		border-color: var(--color-raised-bg) !important;
+	}
+}
 </style>

From 4baec595c5d1dd2d174b066192f8508437bf242e Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 29 Aug 2025 15:44:06 +0100
Subject: [PATCH 18/49] feat: finish initial layout, start on withdraw modal

---
 .../src/pages/dashboard/revenue/index.vue     | 136 +++++++++++++++---
 packages/assets/generated-icons.ts            |   4 +
 packages/assets/icons/arrow-up-right.svg      |  15 ++
 packages/assets/icons/arrow-up.svg            |  15 ++
 packages/utils/types.ts                       |  52 +++++++
 5 files changed, 200 insertions(+), 22 deletions(-)
 create mode 100644 packages/assets/icons/arrow-up-right.svg
 create mode 100644 packages/assets/icons/arrow-up.svg

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 45b50db928..58c366b5e9 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-8 p-2">
+	<div class="mb-6 flex flex-col gap-8 p-2">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
 				<span class="text-2xl font-semibold text-contrast">Balance</span>
@@ -39,12 +39,12 @@
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
 						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']">
+						<Tooltip :triggers="['hover', 'focus']">
 							<nuxt-link class="align-middle text-link" to="/legal/cmp-info#pending">
 								<UnknownIcon />
 							</nuxt-link>
 							<template #popper>
-								<div class="w-[250px] font-normal text-primary">
+								<div class="w-[250px] font-semibold text-contrast">
 									Estimated revenue may be subject to change until it is made available.<br /><br />Click
 									to read about how Modrinth handles your revenue.
 								</div>
@@ -61,10 +61,10 @@
 							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg"
 						></span>
 						Processing
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']">
+						<Tooltip :triggers="['hover', 'focus']">
 							<InProgressIcon class="my-auto" />
 							<template #popper>
-								<div class="w-[250px] font-normal text-primary">
+								<div class="w-[250px] font-semibold text-contrast">
 									Revenue stays in processing until the end of the month, then becomes available 60
 									days later.
 								</div>
@@ -77,14 +77,79 @@
 				</div>
 			</div>
 		</div>
-		<div>
+		<div class="flex flex-col gap-4">
 			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
+			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
+				<button
+					class="flex flex-col rounded-2xl bg-brand p-5 text-inverted shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
+				>
+					<div class="flex flex-row justify-between">
+						<span class="text-lg font-semibold">Withdraw</span>
+						<ArrowUpRightIcon class="my-auto size-4" />
+					</div>
+					<div class="text-left">Withdraw from your available balance to any payout method.</div>
+				</button>
+				<button
+					class="flex flex-col rounded-2xl bg-button-bg p-5 shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
+				>
+					<div class="flex flex-row justify-between">
+						<span class="text-lg font-semibold text-contrast">PayPal</span>
+						<ArrowUpRightIcon class="my-auto size-4" />
+					</div>
+					<div class="text-left text-primary">
+						Withdraw from your available balance to PayPal again.
+					</div>
+				</button>
+			</div>
+			<span class="text-sm text-secondary"
+				>By uploading projects to Modrinth and withdrawing money from your account, you agree to the
+				<nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. Learn more
+				about the
+				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
+			>
+		</div>
+		<div class="flex flex-col gap-4">
+			<div class="flex flex-row justify-between">
+				<span class="text-3xl font-semibold text-contrast">Transactions</span>
+				<nuxt-link
+					class="my-auto font-semibold text-contrast underline underline-offset-2"
+					to="/dashboard/revenue/transfers"
+					>See all</nuxt-link
+				>
+			</div>
+			<div v-for="transaction in sortedPayouts.slice(0, 3)" class="flex flex-row gap-3">
+				<div
+					class="flex size-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised shadow-md"
+				>
+					<ArrowUpIcon class="my-auto size-8 text-contrast" />
+				</div>
+				<div class="flex w-full flex-row justify-between">
+					<div class="flex flex-col">
+						<span class="text-lg font-semibold text-contrast">{{
+							formatMethodName(transaction.method)
+						}}</span>
+						<span class="text-secondary"
+							>{{ formatTransactionStatus(transaction.status) }} |
+							{{ dayjs(transaction.created).format('MMM DD YYYY') }}</span
+						>
+					</div>
+					<span class="my-auto text-2xl font-bold text-contrast">{{
+						formatMoney(transaction.amount)
+					}}</span>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { InProgressIcon, UnknownIcon } from '@modrinth/assets'
-import { formatMoney } from '@modrinth/utils'
+import { ArrowUpIcon, ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
+import {
+	capitalizeString,
+	formatMoney,
+	type PayoutList,
+	type PayoutMethodType,
+	type PayoutStatus,
+} from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 
@@ -102,11 +167,52 @@ type RevenueBarSegment = {
 	amount: number
 }
 
+function formatTransactionStatus(status: PayoutStatus) {
+	switch (status) {
+		case 'in-transit':
+			return 'In Transit'
+		default:
+			return capitalizeString(status)
+	}
+}
+
+function formatMethodName(method: PayoutMethodType | null) {
+	if (!method) return 'Unknown'
+	switch (method) {
+		case 'paypal':
+			return 'PayPal'
+		case 'venmo':
+			return 'Venmo'
+		case 'tremendous':
+			return 'Tremendous'
+		default:
+			return capitalizeString(method)
+	}
+}
+
+const flags = useFeatureFlags()
+
 const { data: userBalance } = await useAsyncData(
 	`payout/balance`,
 	() => useBaseFetch(`payout/balance`, { apiVersion: 3 }) as Promise<UserBalanceResponse>,
 )
 
+const { data: payouts } = await useAsyncData<PayoutList>(
+	`payout`,
+	() =>
+		useBaseFetch(`payout`, {
+			apiVersion: 3,
+		}) as Promise<PayoutList>,
+)
+
+const sortedPayouts = computed<PayoutList>(() => {
+	if (!payouts.value) return []
+
+	return payouts.value.sort((a, b) => {
+		return new Date(b.created).getTime() - new Date(a.created).getTime()
+	})
+})
+
 const totalAvailable = computed(() => (userBalance.value ? Number(userBalance.value.available) : 0))
 const nextDate = computed<{ date: string; amount: number }[]>(() => {
 	const dates = userBalance.value?.dates
@@ -279,18 +385,4 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	background-position: unset !important;
 	background-attachment: unset !important;
 }
-
-:deep(.v-popper--theme-dismissable-prompt) {
-	.v-popper__inner {
-		border: none !important;
-	}
-
-	.v-popper__arrow-outer {
-		border-color: transparent !important;
-	}
-
-	.v-popper__arrow-inner {
-		border-color: var(--color-raised-bg) !important;
-	}
-}
 </style>
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4adb0cf0e4..361d98dc13 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -5,6 +5,8 @@ import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
 import _ArrowBigRightDashIcon from './icons/arrow-big-right-dash.svg?component'
 import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
+import _ArrowUpIcon from './icons/arrow-up.svg?component'
+import _ArrowUpRightIcon from './icons/arrow-up-right.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
 import _BadgeCheckIcon from './icons/badge-check.svg?component'
 import _BanIcon from './icons/ban.svg?component'
@@ -203,6 +205,8 @@ export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
 export const ArrowBigRightDashIcon = _ArrowBigRightDashIcon
 export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
+export const ArrowUpRightIcon = _ArrowUpRightIcon
+export const ArrowUpIcon = _ArrowUpIcon
 export const AsteriskIcon = _AsteriskIcon
 export const BadgeCheckIcon = _BadgeCheckIcon
 export const BanIcon = _BanIcon
diff --git a/packages/assets/icons/arrow-up-right.svg b/packages/assets/icons/arrow-up-right.svg
new file mode 100644
index 0000000000..e0d56094af
--- /dev/null
+++ b/packages/assets/icons/arrow-up-right.svg
@@ -0,0 +1,15 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"
+>
+	<path d="M7 7h10v10" />
+	<path d="M7 17 17 7" />
+</svg>
diff --git a/packages/assets/icons/arrow-up.svg b/packages/assets/icons/arrow-up.svg
new file mode 100644
index 0000000000..8e249fed5c
--- /dev/null
+++ b/packages/assets/icons/arrow-up.svg
@@ -0,0 +1,15 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-arrow-up-icon lucide-arrow-up"
+>
+	<path d="m5 12 7-7 7 7" />
+	<path d="M12 19V5" />
+</svg>
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index d57ba3dd56..bdfc8df86f 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -597,3 +597,55 @@ export interface DelphiReport {
 	status: 'pending' | 'approved' | 'rejected'
 	content?: string
 }
+
+export type PayoutId = string
+export type UserId = string
+export type PayoutStatus =
+	| 'success'
+	| 'in-transit'
+	| 'cancelled'
+	| 'cancelling'
+	| 'failed'
+	| 'unknown'
+export type PayoutMethodType = 'venmo' | 'paypal' | 'tremendous' | 'unknown'
+
+export interface Payout {
+	id: PayoutId
+	user_id: UserId
+	status: PayoutStatus
+	created: string // ISO 8601
+	amount: number
+	fee: number | null
+	method: PayoutMethodType | null
+	method_address: string | null
+	platform_id: string | null
+}
+
+export type PayoutList = Payout[]
+
+export interface PayoutMethodFee {
+	percentage: number
+	min: number
+	max: number | null
+}
+
+export type PayoutInterval =
+	| {
+			type: 'standard'
+			min: number
+			max: number
+	  }
+	| {
+			type: 'fixed'
+			values: number[]
+	  }
+
+export interface PayoutMethod {
+	id: string
+	type: PayoutMethodType
+	name: string
+	supported_countries: string[]
+	image_url: string | null
+	interval: PayoutInterval
+	fee: PayoutMethodFee
+}

From f78fcb0e18bcf07074ef5e32c6b3c51ae5929894 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 29 Aug 2025 17:19:54 +0100
Subject: [PATCH 19/49] feat: start on withdrawal limit stage

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |   6 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     | 117 ++++++++++++++++--
 .../src/pages/dashboard/revenue/index.vue     |  18 ++-
 .../ui/src/components/base/Admonition.vue     |  41 +++---
 4 files changed, 154 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 16aa1cc258..a0a75ae1eb 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -118,6 +118,10 @@ async function startTaxForm(e: MouseEvent) {
 	taxFormModal.value?.show(e)
 }
 
+defineExpose({
+	startTaxForm,
+})
+
 const avalaraState = ref<ReturnType<typeof useAvalara1099> | null>(null)
 const loading = computed(() =>
 	avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false,
@@ -166,7 +170,7 @@ watch(isUSCitizen, (newValue) => {
 })
 
 defineOptions({
-	inheritAttrs: false,
+	inheritAttrs: true,
 })
 </script>
 
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index 4c31997d38..28f9ec7655 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -1,4 +1,5 @@
 <template>
+	<CreatorTaxFormModal ref="taxFormModal" :on-hide="reopenAfterTaxForm" />
 	<NewModal
 		ref="withdrawModal"
 		:header="currentStageLabel"
@@ -7,20 +8,93 @@
 		:merge-header="!currentStageLabel"
 		@onHide="currentStage = undefined"
 	>
-		<template>
-			<p>Test</p>
-			<button @click="open('withdraw-limit')">Set withdraw-limit stage</button>
-			<button @click="open('payment-method')">Set payment-method stage</button>
-			<button @click="open('withdraw-amount')">Set withdraw-amount stage</button>
-			<button @click="open('confirmation')">Set confirmation stage</button>
-		</template>
+		<div class="flex w-full flex-col gap-4 sm:w-[540px]">
+			<template v-if="currentStage === 'withdraw-limit'">
+				<div class="flex w-full flex-row justify-between">
+					<span class="font-semibold text-contrast">Withdraw Remaining</span>
+					<div>
+						<span class="text-orange">{{ formatMoney(usedLimit) }}</span> / {{ formatMoney(600) }}
+					</div>
+				</div>
+				<div class="flex h-2 w-full overflow-hidden rounded-full bg-button-bg">
+					<div class="bg-orange" :style="{ width: `${(usedLimit / 600) * 100}%` }"></div>
+				</div>
+				<template v-if="usedLimit !== 600">
+					<span
+						>You're nearing the {{ formatMoney(600) }} withdrawal threshold. You can withdraw up to
+						<b>{{ formatMoney(usedLimit) }}</b> now, but you'll need to complete a tax form to
+						withdraw more.</span
+					>
+					<Admonition type="info" show-actions-underneath header="Tax form required">
+						To withdraw your full <b>{{ formatMoney(balance?.available) }}</b> available balance
+						please complete the form below. It is required for tax reporting and only needs to be
+						done once.
+						<template v-slot:icon="{ iconClass }">
+							<FileTextIcon :class="iconClass" />
+						</template>
+						<template #actions>
+							<ButtonStyled color="blue">
+								<button @click="showTaxFormModal">Complete tax form</button>
+							</ButtonStyled>
+						</template>
+					</Admonition>
+				</template>
+				<template v-else>
+					<span>
+						You've used up your <b>{{ formatMoney(600) }}</b> withdrawal limit. You must complete a
+						tax form to withdraw more.
+					</span>
+					<div class="ml-auto">
+						<ButtonStyled color="blue">
+							<button @click="showTaxFormModal"><FileTextIcon />Complete tax form</button>
+						</ButtonStyled>
+					</div>
+				</template>
+			</template>
+		</div>
 	</NewModal>
 </template>
 <script lang="ts" setup>
-import { NewModal } from '@modrinth/ui'
+import { FileTextIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
+import { formatMoney } from '@modrinth/utils'
+import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
 type Stage = 'withdraw-limit' | 'payment-method' | 'withdraw-amount' | 'confirmation'
 
+// TODO: Deduplicate in @modrinth/api-client PR.
+type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
+
+interface UserBalanceResponse {
+	available: number
+	withdrawn_lifetime: number
+	withdrawn_ytd: number
+	pending: number
+	// ISO 8601 date string -> amount
+	dates: Record<string, number>
+	// backend returns null when not applicable
+	requested_form_type: string | null
+	form_completion_status: FormCompletionStatus | null
+}
+
+const props = defineProps<{
+	balance: UserBalanceResponse | null
+}>()
+
+const usedLimit = computed(() => {
+	return 600 - (props.balance?.withdrawn_ytd ?? 0)
+})
+
+const taxFormModal = ref<InstanceType<typeof CreatorTaxFormModal> | null>(null)
+function showTaxFormModal(e: MouseEvent) {
+	withdrawModal.value?.hide()
+	taxFormModal.value?.startTaxForm(e)
+}
+
+function reopenAfterTaxForm() {
+	withdrawModal.value?.show()
+}
+
 const stageLabels = readonly<Record<Stage, string | undefined>>({
 	'withdraw-limit': 'Withdraw Limit',
 	'payment-method': 'Payment Method',
@@ -39,4 +113,31 @@ function open(stage: Stage) {
 	currentStage.value = stage
 	withdrawModal.value?.show()
 }
+
+function show(preferred?: Stage) {
+	if (preferred) {
+		open(preferred)
+		return
+	}
+
+	const b = props.balance
+
+	if (!b || b.available <= 0) {
+		open('withdraw-limit')
+		return
+	}
+
+	const needsCompliance =
+		b.form_completion_status !== null && b.form_completion_status !== 'complete'
+	if (needsCompliance) {
+		open('withdraw-limit')
+		return
+	}
+
+	open('payment-method')
+}
+
+defineExpose({
+	show,
+})
 </script>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 58c366b5e9..0ea188b3e5 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,4 +1,5 @@
 <template>
+	<CreatorWithdrawModal ref="withdrawModal" :balance="userBalance" />
 	<div class="mb-6 flex flex-col gap-8 p-2">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
@@ -81,6 +82,7 @@
 			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
 				<button
+					@click="openWithdrawModal"
 					class="flex flex-col rounded-2xl bg-brand p-5 text-inverted shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
 				>
 					<div class="flex flex-row justify-between">
@@ -152,12 +154,21 @@ import {
 } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
+import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal.vue'
+
+// TODO: Deduplicate in @modrinth/api-client PR.
+type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
 
 interface UserBalanceResponse {
 	available: number
+	withdrawn_lifetime: number
+	withdrawn_ytd: number
 	pending: number
-	// ISO 8601 date string: number
+	// ISO 8601 date string -> amount
 	dates: Record<string, number>
+	// backend returns null when not applicable
+	requested_form_type: string | null
+	form_completion_status: FormCompletionStatus | null
 }
 
 type RevenueBarSegment = {
@@ -167,6 +178,11 @@ type RevenueBarSegment = {
 	amount: number
 }
 
+const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal> | null>(null)
+function openWithdrawModal() {
+	withdrawModal.value?.show()
+}
+
 function formatTransactionStatus(status: PayoutStatus) {
 	switch (status) {
 		case 'in-transit':
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 16cdf23cbf..0ed9f1c2b8 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -5,10 +5,12 @@
 			typeClasses[type],
 		]"
 	>
-		<component
-			:is="icons[type]"
-			:class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
-		/>
+		<slot name="icon" :iconClass="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]">
+			<component
+				:is="icons[type]"
+				:class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
+			/>
+		</slot>
 		<div class="flex flex-col gap-2">
 			<div class="font-semibold flex justify-between gap-4">
 				<slot name="header">{{ header }}</slot>
@@ -16,8 +18,11 @@
 			<div class="font-normal">
 				<slot>{{ body }}</slot>
 			</div>
+			<div v-if="showActionsUnderneath">
+				<slot name="actions" />
+			</div>
 		</div>
-		<div class="ml-auto w-fit">
+		<div v-if="!showActionsUnderneath" class="ml-auto w-fit">
 			<slot name="actions" />
 		</div>
 	</div>
@@ -26,20 +31,20 @@
 <script setup lang="ts">
 import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
 
-defineProps({
-	type: {
-		type: String as () => 'info' | 'warning' | 'critical',
-		default: 'info',
-	},
-	header: {
-		type: String,
-		default: '',
-	},
-	body: {
-		type: String,
-		default: '',
+withDefaults(
+	defineProps<{
+		type?: 'info' | 'warning' | 'critical'
+		header?: string
+		body?: string
+		showActionsUnderneath?: boolean
+	}>(),
+	{
+		type: 'info',
+		header: '',
+		body: '',
+		showActionsUnderneath: false,
 	},
-})
+)
 
 const typeClasses = {
 	info: 'border-brand-blue bg-bg-blue',

From 87ad59b1ee36aea1a2de826b89c6ffb8276bb35f Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Wed, 3 Sep 2025 11:09:55 +0100
Subject: [PATCH 20/49] feat: shade support for primary colors

---
 apps/app-frontend/tailwind.config.js  |  87 +++++++++++++-
 apps/frontend/tailwind.config.ts      |  89 +++++++++++++-
 packages/assets/styles/variables.scss | 166 ++++++++++++++++++++++++--
 3 files changed, 322 insertions(+), 20 deletions(-)

diff --git a/apps/app-frontend/tailwind.config.js b/apps/app-frontend/tailwind.config.js
index 167087d311..2820446f2d 100644
--- a/apps/app-frontend/tailwind.config.js
+++ b/apps/app-frontend/tailwind.config.js
@@ -22,9 +22,90 @@ export default {
 				dark: 'var(--color-text-dark)',
 				inverted: 'var(--color-text-inverted)',
 				heading: 'var(--color-heading)',
-				red: 'var(--color-red)',
-				orange: 'var(--color-orange)',
-				purple: 'var(--color-purple)',
+				red: {
+					DEFAULT: 'var(--color-red)',
+					50: 'var(--color-red-50)',
+					100: 'var(--color-red-100)',
+					200: 'var(--color-red-200)',
+					300: 'var(--color-red-300)',
+					400: 'var(--color-red-400)',
+					500: 'var(--color-red-500)',
+					600: 'var(--color-red-600)',
+					700: 'var(--color-red-700)',
+					800: 'var(--color-red-800)',
+					900: 'var(--color-red-900)',
+					950: 'var(--color-red-950)',
+				},
+				orange: {
+					DEFAULT: 'var(--color-orange)',
+					50: 'var(--color-orange-50)',
+					100: 'var(--color-orange-100)',
+					200: 'var(--color-orange-200)',
+					300: 'var(--color-orange-300)',
+					400: 'var(--color-orange-400)',
+					500: 'var(--color-orange-500)',
+					600: 'var(--color-orange-600)',
+					700: 'var(--color-orange-700)',
+					800: 'var(--color-orange-800)',
+					900: 'var(--color-orange-900)',
+					950: 'var(--color-orange-950)',
+				},
+				green: {
+					DEFAULT: 'var(--color-green)',
+					50: 'var(--color-green-50)',
+					100: 'var(--color-green-100)',
+					200: 'var(--color-green-200)',
+					300: 'var(--color-green-300)',
+					400: 'var(--color-green-400)',
+					500: 'var(--color-green-500)',
+					600: 'var(--color-green-600)',
+					700: 'var(--color-green-700)',
+					800: 'var(--color-green-800)',
+					900: 'var(--color-green-900)',
+					950: 'var(--color-green-950)',
+				},
+				blue: {
+					DEFAULT: 'var(--color-blue)',
+					50: 'var(--color-blue-50)',
+					100: 'var(--color-blue-100)',
+					200: 'var(--color-blue-200)',
+					300: 'var(--color-blue-300)',
+					400: 'var(--color-blue-400)',
+					500: 'var(--color-blue-500)',
+					600: 'var(--color-blue-600)',
+					700: 'var(--color-blue-700)',
+					800: 'var(--color-blue-800)',
+					900: 'var(--color-blue-900)',
+					950: 'var(--color-blue-950)',
+				},
+				purple: {
+					DEFAULT: 'var(--color-purple)',
+					50: 'var(--color-purple-50)',
+					100: 'var(--color-purple-100)',
+					200: 'var(--color-purple-200)',
+					300: 'var(--color-purple-300)',
+					400: 'var(--color-purple-400)',
+					500: 'var(--color-purple-500)',
+					600: 'var(--color-purple-600)',
+					700: 'var(--color-purple-700)',
+					800: 'var(--color-purple-800)',
+					900: 'var(--color-purple-900)',
+					950: 'var(--color-purple-950)',
+				},
+				gray: {
+					DEFAULT: 'var(--color-gray)',
+					50: 'var(--color-gray-50)',
+					100: 'var(--color-gray-100)',
+					200: 'var(--color-gray-200)',
+					300: 'var(--color-gray-300)',
+					400: 'var(--color-gray-400)',
+					500: 'var(--color-gray-500)',
+					600: 'var(--color-gray-600)',
+					700: 'var(--color-gray-700)',
+					800: 'var(--color-gray-800)',
+					900: 'var(--color-gray-900)',
+					950: 'var(--color-gray-950)',
+				},
 				bg: {
 					DEFAULT: 'var(--color-bg)',
 					red: 'var(--color-red-bg)',
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 8ecce39e94..4d20856f88 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -23,11 +23,90 @@ const config: Config = {
 				dark: 'var(--color-text-dark)',
 				inverted: 'var(--color-text-inverted)',
 				heading: 'var(--color-heading)',
-				red: 'var(--color-red)',
-				orange: 'var(--color-orange)',
-				green: 'var(--color-green)',
-				blue: 'var(--color-blue)',
-				purple: 'var(--color-purple)',
+				red: {
+					DEFAULT: 'var(--color-red)',
+					50: 'var(--color-red-50)',
+					100: 'var(--color-red-100)',
+					200: 'var(--color-red-200)',
+					300: 'var(--color-red-300)',
+					400: 'var(--color-red-400)',
+					500: 'var(--color-red-500)',
+					600: 'var(--color-red-600)',
+					700: 'var(--color-red-700)',
+					800: 'var(--color-red-800)',
+					900: 'var(--color-red-900)',
+					950: 'var(--color-red-950)',
+				},
+				orange: {
+					DEFAULT: 'var(--color-orange)',
+					50: 'var(--color-orange-50)',
+					100: 'var(--color-orange-100)',
+					200: 'var(--color-orange-200)',
+					300: 'var(--color-orange-300)',
+					400: 'var(--color-orange-400)',
+					500: 'var(--color-orange-500)',
+					600: 'var(--color-orange-600)',
+					700: 'var(--color-orange-700)',
+					800: 'var(--color-orange-800)',
+					900: 'var(--color-orange-900)',
+					950: 'var(--color-orange-950)',
+				},
+				green: {
+					DEFAULT: 'var(--color-green)',
+					50: 'var(--color-green-50)',
+					100: 'var(--color-green-100)',
+					200: 'var(--color-green-200)',
+					300: 'var(--color-green-300)',
+					400: 'var(--color-green-400)',
+					500: 'var(--color-green-500)',
+					600: 'var(--color-green-600)',
+					700: 'var(--color-green-700)',
+					800: 'var(--color-green-800)',
+					900: 'var(--color-green-900)',
+					950: 'var(--color-green-950)',
+				},
+				blue: {
+					DEFAULT: 'var(--color-blue)',
+					50: 'var(--color-blue-50)',
+					100: 'var(--color-blue-100)',
+					200: 'var(--color-blue-200)',
+					300: 'var(--color-blue-300)',
+					400: 'var(--color-blue-400)',
+					500: 'var(--color-blue-500)',
+					600: 'var(--color-blue-600)',
+					700: 'var(--color-blue-700)',
+					800: 'var(--color-blue-800)',
+					900: 'var(--color-blue-900)',
+					950: 'var(--color-blue-950)',
+				},
+				purple: {
+					DEFAULT: 'var(--color-purple)',
+					50: 'var(--color-purple-50)',
+					100: 'var(--color-purple-100)',
+					200: 'var(--color-purple-200)',
+					300: 'var(--color-purple-300)',
+					400: 'var(--color-purple-400)',
+					500: 'var(--color-purple-500)',
+					600: 'var(--color-purple-600)',
+					700: 'var(--color-purple-700)',
+					800: 'var(--color-purple-800)',
+					900: 'var(--color-purple-900)',
+					950: 'var(--color-purple-950)',
+				},
+				gray: {
+					DEFAULT: 'var(--color-gray)',
+					50: 'var(--color-gray-50)',
+					100: 'var(--color-gray-100)',
+					200: 'var(--color-gray-200)',
+					300: 'var(--color-gray-300)',
+					400: 'var(--color-gray-400)',
+					500: 'var(--color-gray-500)',
+					600: 'var(--color-gray-600)',
+					700: 'var(--color-gray-700)',
+					800: 'var(--color-gray-800)',
+					900: 'var(--color-gray-900)',
+					950: 'var(--color-gray-950)',
+				},
 				bg: {
 					DEFAULT: 'var(--color-bg)',
 					red: 'var(--color-red-bg)',
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 77f2407107..40f07a21e9 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -14,12 +14,83 @@
 	--color-contrast: #1a202c;
 	--color-accent-contrast: #ffffff;
 
-	--color-red: #cb2245;
-	--color-orange: #e08325;
-	--color-green: #00af5c;
-	--color-blue: #1f68c0;
-	--color-purple: #8e32f3;
-	--color-gray: #595b61;
+	--color-red: oklch(54.79% 0.20045 16.81);
+	--color-red-50: oklch(82.665% 0.07645 4.4005);
+	--color-red-100: oklch(78.955% 0.09449 6.0185);
+	--color-red-200: oklch(71.745% 0.13308 7.8923);
+	--color-red-300: oklch(65.426% 0.17112 10.661);
+	--color-red-400: oklch(60.135% 0.20113 14.4);
+	--color-red-500: oklch(54.79% 0.20045 16.81);
+	--color-red-600: oklch(45.078% 0.16231 16.12);
+	--color-red-700: oklch(34.816% 0.12146 15.606);
+	--color-red-800: oklch(23.841% 0.07598 13.46);
+	--color-red-900: oklch(11.056% 0.02566 1.8713);
+	--color-red-950: oklch(0% 0 none);
+
+	--color-orange: oklch(69.638% 0.15114 59.719);
+	--color-orange-50: oklch(91.483% 0.04225 66.104);
+	--color-orange-100: oklch(88.873% 0.05554 67.009);
+	--color-orange-200: oklch(83.823% 0.08272 66.893);
+	--color-orange-300: oklch(78.922% 0.10887 66.007);
+	--color-orange-400: oklch(74.057% 0.13202 63.095);
+	--color-orange-500: oklch(69.638% 0.15114 59.719);
+	--color-orange-600: oklch(58.779% 0.12853 59.552);
+	--color-orange-700: oklch(46.846% 0.09973 60.398);
+	--color-orange-800: oklch(34.102% 0.06847 61.988);
+	--color-orange-900: oklch(19.782% 0.03334 63.742);
+	--color-orange-950: oklch(11.077% 0.01645 78.539);
+
+	--color-green: oklch(66.083% 0.1712 152.71);
+	--color-green-50: oklch(90.034% 0.16454 159.52);
+	--color-green-100: oklch(89.282% 0.18066 158.49);
+	--color-green-200: oklch(88.193% 0.20849 155.43);
+	--color-green-300: oklch(87.619% 0.22852 152.35);
+	--color-green-400: oklch(77.289% 0.20205 152.29);
+	--color-green-500: oklch(66.083% 0.1712 152.71);
+	--color-green-600: oklch(49.936% 0.12692 153.62);
+	--color-green-700: oklch(32.306% 0.07933 155.35);
+	--color-green-800: oklch(11.429% 0.02278 169.4);
+	--color-green-900: oklch(0% 0 none);
+	--color-green-950: oklch(0% 0 none);
+
+	--color-blue: oklch(52.214% 0.15479 255.86);
+	--color-blue-50: oklch(82.21% 0.06863 253.35);
+	--color-blue-100: oklch(78.662% 0.08294 253.25);
+	--color-blue-200: oklch(71.717% 0.1114 253.75);
+	--color-blue-300: oklch(64.978% 0.13975 254.43);
+	--color-blue-400: oklch(58.892% 0.16686 255.46);
+	--color-blue-500: oklch(52.214% 0.15479 255.86);
+	--color-blue-600: oklch(42.649% 0.12275 255.6);
+	--color-blue-700: oklch(32.447% 0.08691 254.68);
+	--color-blue-800: oklch(21.53% 0.04801 253.76);
+	--color-blue-900: oklch(0% 0 none);
+	--color-blue-950: oklch(0% 0 none);
+
+	--color-purple: oklch(55.837% 0.26106 298.9);
+	--color-purple-50: oklch(92.466% 0.04319 307.94);
+	--color-purple-100: oklch(87.948% 0.06947 306.69);
+	--color-purple-200: oklch(79.117% 0.12332 305.6);
+	--color-purple-300: oklch(70.367% 0.17766 303.95);
+	--color-purple-400: oklch(62.504% 0.22432 302.08);
+	--color-purple-500: oklch(55.837% 0.26106 298.9);
+	--color-purple-600: oklch(48.735% 0.26241 294.5);
+	--color-purple-700: oklch(40.133% 0.21355 295.1);
+	--color-purple-800: oklch(31.062% 0.16149 296.14);
+	--color-purple-900: oklch(21.286% 0.10458 298.52);
+	--color-purple-950: oklch(15.712% 0.07375 301.52);
+
+	--color-gray: oklch(47.148% 0.00995 271.2);
+	--color-gray-50: oklch(78.014% 0.00712 277.13);
+	--color-gray-100: oklch(74.753% 0.00748 268.53);
+	--color-gray-200: oklch(68.023% 0.01048 273.29);
+	--color-gray-300: oklch(61.09% 0.01224 274.78);
+	--color-gray-400: oklch(54.232% 0.0111 273.23);
+	--color-gray-500: oklch(47.148% 0.00995 271.2);
+	--color-gray-600: oklch(37.106% 0.00734 264.48);
+	--color-gray-700: oklch(26.008% 0.004 264.5);
+	--color-gray-800: oklch(13.846% 0.00189 196.94);
+	--color-gray-900: oklch(0% 0 none);
+	--color-gray-950: oklch(0% 0 none);
 
 	--color-red-highlight: rgba(203, 34, 69, 0.25);
 	--color-orange-highlight: rgba(224, 131, 37, 0.25);
@@ -148,12 +219,83 @@ html {
 	--color-contrast: var(--dark-color-contrast);
 	--color-accent-contrast: #000000;
 
-	--color-red: #ff496e;
-	--color-orange: #ffa347;
-	--color-green: #1bd96a;
-	--color-blue: #4f9cff;
-	--color-purple: #c78aff;
-	--color-gray: #9fa4b3;
+	--color-red: oklch(67.504% 0.21702 13.672);
+	--color-red-50: oklch(100% 0 none);
+	--color-red-100: oklch(95.931% 0.02124 3.0767);
+	--color-red-200: oklch(87.448% 0.07041 4.2178);
+	--color-red-300: oklch(79.721% 0.12111 7.2525);
+	--color-red-400: oklch(72.855% 0.17298 9.6403);
+	--color-red-500: oklch(67.504% 0.21702 13.672);
+	--color-red-600: oklch(63.543% 0.2508 21.162);
+	--color-red-700: oklch(55.666% 0.2247 23.054);
+	--color-red-800: oklch(44.556% 0.17962 22.374);
+	--color-red-900: oklch(32.714% 0.13145 20.426);
+	--color-red-950: oklch(26.382% 0.10578 18.735);
+
+	--color-orange: oklch(79.232% 0.15079 62.215);
+	--color-orange-50: oklch(100% 0 none);
+	--color-orange-100: oklch(97.496% 0.01812 70.245);
+	--color-orange-200: oklch(92.45% 0.05334 67.086);
+	--color-orange-300: oklch(87.825% 0.08767 66.27);
+	--color-orange-400: oklch(83.265% 0.12128 64.429);
+	--color-orange-500: oklch(79.232% 0.15079 62.215);
+	--color-orange-600: oklch(74.291% 0.1802 55.302);
+	--color-orange-700: oklch(64.222% 0.16237 53.305);
+	--color-orange-800: oklch(51.546% 0.12847 54.455);
+	--color-orange-900: oklch(38.035% 0.09224 56.795);
+	--color-orange-950: oklch(30.833% 0.0729 59.177);
+
+	--color-green: oklch(77.601% 0.20683 150.32);
+	--color-green-50: oklch(91.992% 0.08269 158.23);
+	--color-green-100: oklch(90.283% 0.10205 157.8);
+	--color-green-200: oklch(86.862% 0.13857 156.47);
+	--color-green-300: oklch(84.151% 0.17171 154.41);
+	--color-green-400: oklch(81.65% 0.19801 152.19);
+	--color-green-500: oklch(77.601% 0.20683 150.32);
+	--color-green-600: oklch(63.906% 0.16796 150.67);
+	--color-green-700: oklch(49.417% 0.12753 150.94);
+	--color-green-800: oklch(33.775% 0.08243 152.28);
+	--color-green-900: oklch(15.945% 0.02977 161.35);
+	--color-green-950: oklch(0% 0 none);
+
+	--color-blue: oklch(69.042% 0.165 255.81);
+	--color-blue-50: oklch(100% 0 none);
+	--color-blue-100: oklch(97.662% 0.01133 252.09);
+	--color-blue-200: oklch(90.161% 0.04865 254.08);
+	--color-blue-300: oklch(82.86% 0.08683 255.07);
+	--color-blue-400: oklch(75.741% 0.12626 255.25);
+	--color-blue-500: oklch(69.042% 0.165 255.81);
+	--color-blue-600: oklch(60.893% 0.21346 258.05);
+	--color-blue-700: oklch(52.569% 0.20596 259.22);
+	--color-blue-800: oklch(42.616% 0.16415 258.87);
+	--color-blue-900: oklch(32.28% 0.1181 257.73);
+	--color-blue-950: oklch(26.81% 0.09341 256.53);
+
+	--color-purple: oklch(73.974% 0.17277 306.71);
+	--color-purple-50: oklch(100% 0 none);
+	--color-purple-100: oklch(100% 0 none);
+	--color-purple-200: oklch(100% 0 none);
+	--color-purple-300: oklch(91.963% 0.05063 308.45);
+	--color-purple-400: oklch(82.806% 0.11213 308.11);
+	--color-purple-500: oklch(73.974% 0.17277 306.71);
+	--color-purple-600: oklch(63.332% 0.24523 303.97);
+	--color-purple-700: oklch(55.731% 0.28718 298.86);
+	--color-purple-800: oklch(48.813% 0.26696 295.71);
+	--color-purple-900: oklch(39.636% 0.21576 296.52);
+	--color-purple-950: oklch(34.784% 0.18898 296.86);
+
+	--color-gray: oklch(71.947% 0.02244 271.09);
+	--color-gray-50: oklch(100% 0 none);
+	--color-gray-100: oklch(98.538% 0.00132 286.38);
+	--color-gray-200: oklch(92.152% 0.00582 264.53);
+	--color-gray-300: oklch(85.532% 0.01123 274.87);
+	--color-gray-400: oklch(78.912% 0.01614 269.94);
+	--color-gray-500: oklch(71.947% 0.02244 271.09);
+	--color-gray-600: oklch(62.194% 0.03093 272.26);
+	--color-gray-700: oklch(52.645% 0.03231 272.1);
+	--color-gray-800: oklch(43.25% 0.02562 270.76);
+	--color-gray-900: oklch(33.012% 0.01814 272.19);
+	--color-gray-950: oklch(27.82% 0.01501 274.31);
 
 	--color-red-highlight: rgba(255, 73, 110, 0.25);
 	--color-orange-highlight: rgba(255, 163, 71, 0.25);

From 2fa47850c52618bdad039ae4fcee0d0576486cd0 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Wed, 3 Sep 2025 11:46:48 +0100
Subject: [PATCH 21/49] feat: start on withdraw details stage

---
 .../ui/dashboard/CreatorWithdrawModal.vue     | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index 28f9ec7655..bc8846a7c6 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -51,16 +51,45 @@
 					</div>
 				</template>
 			</template>
+			<template v-if="currentStage === 'withdraw-details'">
+				<span class="font-semibold text-contrast">Withdraw from</span>
+				<div class="flex flex-col rounded-xl bg-bg p-4">
+					<span class="text-sm text-primary">Available balance</span>
+					<span class="font-semibold text-contrast">{{ formatMoney(balance?.available) }}</span>
+				</div>
+				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
+					<span class="text-brand-red">*</span> <span>Region</span>
+					<span class="my-auto text-blue"
+						><UnknownIcon v-tooltip="`something here`" class="size-5"
+					/></span>
+				</div>
+				<Multiselect
+					id="country-multiselect"
+					v-model="country"
+					class="country-multiselect"
+					placeholder="Select country..."
+					track-by="id"
+					label="name"
+					:options="countries"
+					:searchable="true"
+					:close-on-select="true"
+					:show-labels="false"
+					:allow-empty="false"
+					:use-teleport="true"
+					open-direction="below"
+				/>
+			</template>
 		</div>
 	</NewModal>
 </template>
 <script lang="ts" setup>
-import { FileTextIcon } from '@modrinth/assets'
+import { FileTextIcon, UnknownIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
+import { all } from 'iso-3166-1'
+import { Multiselect } from 'vue-multiselect'
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
-
-type Stage = 'withdraw-limit' | 'payment-method' | 'withdraw-amount' | 'confirmation'
+type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
 
 // TODO: Deduplicate in @modrinth/api-client PR.
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
@@ -77,6 +106,15 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
+const countries = computed(() =>
+	all().map((x) => ({
+		id: x.alpha2,
+		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
+	})),
+)
+
+const country = ref<string | null>(null)
+
 const props = defineProps<{
 	balance: UserBalanceResponse | null
 }>()
@@ -97,8 +135,7 @@ function reopenAfterTaxForm() {
 
 const stageLabels = readonly<Record<Stage, string | undefined>>({
 	'withdraw-limit': 'Withdraw Limit',
-	'payment-method': 'Payment Method',
-	'withdraw-amount': 'Withdraw Amount',
+	'withdraw-details': 'Withdraw Details',
 	confirmation: undefined,
 })
 
@@ -134,7 +171,7 @@ function show(preferred?: Stage) {
 		return
 	}
 
-	open('payment-method')
+	open('withdraw-details')
 }
 
 defineExpose({

From f10ae6a9c2bd67db6ba966cb7a2011fdd789f434 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 4 Sep 2025 11:41:14 +0100
Subject: [PATCH 22/49] fix: convert swatches to hex

---
 packages/assets/styles/variables.scss | 308 +++++++++++++-------------
 1 file changed, 154 insertions(+), 154 deletions(-)

diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 40f07a21e9..6664b900c7 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -14,83 +14,83 @@
 	--color-contrast: #1a202c;
 	--color-accent-contrast: #ffffff;
 
-	--color-red: oklch(54.79% 0.20045 16.81);
-	--color-red-50: oklch(82.665% 0.07645 4.4005);
-	--color-red-100: oklch(78.955% 0.09449 6.0185);
-	--color-red-200: oklch(71.745% 0.13308 7.8923);
-	--color-red-300: oklch(65.426% 0.17112 10.661);
-	--color-red-400: oklch(60.135% 0.20113 14.4);
-	--color-red-500: oklch(54.79% 0.20045 16.81);
-	--color-red-600: oklch(45.078% 0.16231 16.12);
-	--color-red-700: oklch(34.816% 0.12146 15.606);
-	--color-red-800: oklch(23.841% 0.07598 13.46);
-	--color-red-900: oklch(11.056% 0.02566 1.8713);
-	--color-red-950: oklch(0% 0 none);
-
-	--color-orange: oklch(69.638% 0.15114 59.719);
-	--color-orange-50: oklch(91.483% 0.04225 66.104);
-	--color-orange-100: oklch(88.873% 0.05554 67.009);
-	--color-orange-200: oklch(83.823% 0.08272 66.893);
-	--color-orange-300: oklch(78.922% 0.10887 66.007);
-	--color-orange-400: oklch(74.057% 0.13202 63.095);
-	--color-orange-500: oklch(69.638% 0.15114 59.719);
-	--color-orange-600: oklch(58.779% 0.12853 59.552);
-	--color-orange-700: oklch(46.846% 0.09973 60.398);
-	--color-orange-800: oklch(34.102% 0.06847 61.988);
-	--color-orange-900: oklch(19.782% 0.03334 63.742);
-	--color-orange-950: oklch(11.077% 0.01645 78.539);
-
-	--color-green: oklch(66.083% 0.1712 152.71);
-	--color-green-50: oklch(90.034% 0.16454 159.52);
-	--color-green-100: oklch(89.282% 0.18066 158.49);
-	--color-green-200: oklch(88.193% 0.20849 155.43);
-	--color-green-300: oklch(87.619% 0.22852 152.35);
-	--color-green-400: oklch(77.289% 0.20205 152.29);
-	--color-green-500: oklch(66.083% 0.1712 152.71);
-	--color-green-600: oklch(49.936% 0.12692 153.62);
-	--color-green-700: oklch(32.306% 0.07933 155.35);
-	--color-green-800: oklch(11.429% 0.02278 169.4);
-	--color-green-900: oklch(0% 0 none);
-	--color-green-950: oklch(0% 0 none);
-
-	--color-blue: oklch(52.214% 0.15479 255.86);
-	--color-blue-50: oklch(82.21% 0.06863 253.35);
-	--color-blue-100: oklch(78.662% 0.08294 253.25);
-	--color-blue-200: oklch(71.717% 0.1114 253.75);
-	--color-blue-300: oklch(64.978% 0.13975 254.43);
-	--color-blue-400: oklch(58.892% 0.16686 255.46);
-	--color-blue-500: oklch(52.214% 0.15479 255.86);
-	--color-blue-600: oklch(42.649% 0.12275 255.6);
-	--color-blue-700: oklch(32.447% 0.08691 254.68);
-	--color-blue-800: oklch(21.53% 0.04801 253.76);
-	--color-blue-900: oklch(0% 0 none);
-	--color-blue-950: oklch(0% 0 none);
-
-	--color-purple: oklch(55.837% 0.26106 298.9);
-	--color-purple-50: oklch(92.466% 0.04319 307.94);
-	--color-purple-100: oklch(87.948% 0.06947 306.69);
-	--color-purple-200: oklch(79.117% 0.12332 305.6);
-	--color-purple-300: oklch(70.367% 0.17766 303.95);
-	--color-purple-400: oklch(62.504% 0.22432 302.08);
-	--color-purple-500: oklch(55.837% 0.26106 298.9);
-	--color-purple-600: oklch(48.735% 0.26241 294.5);
-	--color-purple-700: oklch(40.133% 0.21355 295.1);
-	--color-purple-800: oklch(31.062% 0.16149 296.14);
-	--color-purple-900: oklch(21.286% 0.10458 298.52);
-	--color-purple-950: oklch(15.712% 0.07375 301.52);
-
-	--color-gray: oklch(47.148% 0.00995 271.2);
-	--color-gray-50: oklch(78.014% 0.00712 277.13);
-	--color-gray-100: oklch(74.753% 0.00748 268.53);
-	--color-gray-200: oklch(68.023% 0.01048 273.29);
-	--color-gray-300: oklch(61.09% 0.01224 274.78);
-	--color-gray-400: oklch(54.232% 0.0111 273.23);
-	--color-gray-500: oklch(47.148% 0.00995 271.2);
-	--color-gray-600: oklch(37.106% 0.00734 264.48);
-	--color-gray-700: oklch(26.008% 0.004 264.5);
-	--color-gray-800: oklch(13.846% 0.00189 196.94);
-	--color-gray-900: oklch(0% 0 none);
-	--color-gray-950: oklch(0% 0 none);
+	--color-red-50: #fef2f2;
+	--color-red-100: #fee5e7;
+	--color-red-200: #fccfd3;
+	--color-red-300: #faa7b1;
+	--color-red-400: #f67687;
+	--color-red-500: #ed4661;
+	--color-red-600: #cb2245;
+	--color-red-700: #b7193d;
+	--color-red-800: #9a1739;
+	--color-red-900: #841738;
+	--color-red-950: #490819;
+	--color-red: var(--color-red-600);
+
+	--color-orange-50: #fdf8ed;
+	--color-orange-100: #f9eacc;
+	--color-orange-200: #f2d495;
+	--color-orange-300: #ecb85d;
+	--color-orange-400: #e7a038;
+	--color-orange-500: #e08325;
+	--color-orange-600: #c66019;
+	--color-orange-700: #a44419;
+	--color-orange-800: #86351a;
+	--color-orange-900: #6e2d19;
+	--color-orange-950: #3f1509;
+	--color-orange: var(--color-orange-500);
+
+	--color-green-50: #eefff6;
+	--color-green-100: #d7ffeb;
+	--color-green-200: #b2ffd9;
+	--color-green-300: #76ffbc;
+	--color-green-400: #33f598;
+	--color-green-500: #09de78;
+	--color-green-600: #00af5c;
+	--color-green-700: #04914f;
+	--color-green-800: #0a7141;
+	--color-green-900: #0a5d38;
+	--color-green-950: #00341d;
+	--color-green: var(--color-green-600);
+
+	--color-blue-50: #f2f7fd;
+	--color-blue-100: #e4ecfa;
+	--color-blue-200: #c3d9f4;
+	--color-blue-300: #8ebaeb;
+	--color-blue-400: #5196df;
+	--color-blue-500: #2b79cc;
+	--color-blue-600: #1f68c0;
+	--color-blue-700: #184b8c;
+	--color-blue-800: #184174;
+	--color-blue-900: #193861;
+	--color-blue-950: #112340;
+	--color-blue: var(--color-blue-600);
+
+	--color-purple-50: #faf5ff;
+	--color-purple-100: #f2e7ff;
+	--color-purple-200: #e7d3ff;
+	--color-purple-300: #d4b1ff;
+	--color-purple-400: #ba7eff;
+	--color-purple-500: #9f4dff;
+	--color-purple-600: #8e32f3;
+	--color-purple-700: #761ad6;
+	--color-purple-800: #651bae;
+	--color-purple-900: #53178c;
+	--color-purple-950: #370368;
+	--color-purple: var(--color-purple-600);
+
+	--color-gray-50: #f5f5f6;
+	--color-gray-100: #e5e5e8;
+	--color-gray-200: #cecfd3;
+	--color-gray-300: #adb0b3;
+	--color-gray-400: #83868d;
+	--color-gray-500: #686a72;
+	--color-gray-600: #595b61;
+	--color-gray-700: #4c4e52;
+	--color-gray-800: #434447;
+	--color-gray-900: #3b3b3e;
+	--color-gray-950: #252627;
+	--color-gray: var(--color-gray-600);
 
 	--color-red-highlight: rgba(203, 34, 69, 0.25);
 	--color-orange-highlight: rgba(224, 131, 37, 0.25);
@@ -219,83 +219,83 @@ html {
 	--color-contrast: var(--dark-color-contrast);
 	--color-accent-contrast: #000000;
 
-	--color-red: oklch(67.504% 0.21702 13.672);
-	--color-red-50: oklch(100% 0 none);
-	--color-red-100: oklch(95.931% 0.02124 3.0767);
-	--color-red-200: oklch(87.448% 0.07041 4.2178);
-	--color-red-300: oklch(79.721% 0.12111 7.2525);
-	--color-red-400: oklch(72.855% 0.17298 9.6403);
-	--color-red-500: oklch(67.504% 0.21702 13.672);
-	--color-red-600: oklch(63.543% 0.2508 21.162);
-	--color-red-700: oklch(55.666% 0.2247 23.054);
-	--color-red-800: oklch(44.556% 0.17962 22.374);
-	--color-red-900: oklch(32.714% 0.13145 20.426);
-	--color-red-950: oklch(26.382% 0.10578 18.735);
-
-	--color-orange: oklch(79.232% 0.15079 62.215);
-	--color-orange-50: oklch(100% 0 none);
-	--color-orange-100: oklch(97.496% 0.01812 70.245);
-	--color-orange-200: oklch(92.45% 0.05334 67.086);
-	--color-orange-300: oklch(87.825% 0.08767 66.27);
-	--color-orange-400: oklch(83.265% 0.12128 64.429);
-	--color-orange-500: oklch(79.232% 0.15079 62.215);
-	--color-orange-600: oklch(74.291% 0.1802 55.302);
-	--color-orange-700: oklch(64.222% 0.16237 53.305);
-	--color-orange-800: oklch(51.546% 0.12847 54.455);
-	--color-orange-900: oklch(38.035% 0.09224 56.795);
-	--color-orange-950: oklch(30.833% 0.0729 59.177);
-
-	--color-green: oklch(77.601% 0.20683 150.32);
-	--color-green-50: oklch(91.992% 0.08269 158.23);
-	--color-green-100: oklch(90.283% 0.10205 157.8);
-	--color-green-200: oklch(86.862% 0.13857 156.47);
-	--color-green-300: oklch(84.151% 0.17171 154.41);
-	--color-green-400: oklch(81.65% 0.19801 152.19);
-	--color-green-500: oklch(77.601% 0.20683 150.32);
-	--color-green-600: oklch(63.906% 0.16796 150.67);
-	--color-green-700: oklch(49.417% 0.12753 150.94);
-	--color-green-800: oklch(33.775% 0.08243 152.28);
-	--color-green-900: oklch(15.945% 0.02977 161.35);
-	--color-green-950: oklch(0% 0 none);
-
-	--color-blue: oklch(69.042% 0.165 255.81);
-	--color-blue-50: oklch(100% 0 none);
-	--color-blue-100: oklch(97.662% 0.01133 252.09);
-	--color-blue-200: oklch(90.161% 0.04865 254.08);
-	--color-blue-300: oklch(82.86% 0.08683 255.07);
-	--color-blue-400: oklch(75.741% 0.12626 255.25);
-	--color-blue-500: oklch(69.042% 0.165 255.81);
-	--color-blue-600: oklch(60.893% 0.21346 258.05);
-	--color-blue-700: oklch(52.569% 0.20596 259.22);
-	--color-blue-800: oklch(42.616% 0.16415 258.87);
-	--color-blue-900: oklch(32.28% 0.1181 257.73);
-	--color-blue-950: oklch(26.81% 0.09341 256.53);
-
-	--color-purple: oklch(73.974% 0.17277 306.71);
-	--color-purple-50: oklch(100% 0 none);
-	--color-purple-100: oklch(100% 0 none);
-	--color-purple-200: oklch(100% 0 none);
-	--color-purple-300: oklch(91.963% 0.05063 308.45);
-	--color-purple-400: oklch(82.806% 0.11213 308.11);
-	--color-purple-500: oklch(73.974% 0.17277 306.71);
-	--color-purple-600: oklch(63.332% 0.24523 303.97);
-	--color-purple-700: oklch(55.731% 0.28718 298.86);
-	--color-purple-800: oklch(48.813% 0.26696 295.71);
-	--color-purple-900: oklch(39.636% 0.21576 296.52);
-	--color-purple-950: oklch(34.784% 0.18898 296.86);
-
-	--color-gray: oklch(71.947% 0.02244 271.09);
-	--color-gray-50: oklch(100% 0 none);
-	--color-gray-100: oklch(98.538% 0.00132 286.38);
-	--color-gray-200: oklch(92.152% 0.00582 264.53);
-	--color-gray-300: oklch(85.532% 0.01123 274.87);
-	--color-gray-400: oklch(78.912% 0.01614 269.94);
-	--color-gray-500: oklch(71.947% 0.02244 271.09);
-	--color-gray-600: oklch(62.194% 0.03093 272.26);
-	--color-gray-700: oklch(52.645% 0.03231 272.1);
-	--color-gray-800: oklch(43.25% 0.02562 270.76);
-	--color-gray-900: oklch(33.012% 0.01814 272.19);
-	--color-gray-950: oklch(27.82% 0.01501 274.31);
+	--color-red-50: #fff0f1;
+	--color-red-100: #ffe2e6;
+	--color-red-200: #ffcad3;
+	--color-red-300: #ff9fae;
+	--color-red-400: #ff6984;
+	--color-red-500: #ff496e;
+	--color-red-600: #ed1148;
+	--color-red-700: #c8083d;
+	--color-red-800: #a8093a;
+	--color-red-900: #8f0c38;
+	--color-red-950: #50011a;
+	--color-red: var(--color-red-500);
+
+	--color-orange-50: #fff8ed;
+	--color-orange-100: #ffefd4;
+	--color-orange-200: #ffdba8;
+	--color-orange-300: #ffc171;
+	--color-orange-400: #ffa347;
+	--color-orange-500: #fe7e11;
+	--color-orange-600: #ef6307;
+	--color-orange-700: #c64808;
+	--color-orange-800: #9d3a0f;
+	--color-orange-900: #7e3110;
+	--color-orange-950: #441606;
+	--color-orange: var(--color-orange-400);
+
+	--color-green-50: #effef5;
+	--color-green-100: #dafee8;
+	--color-green-200: #b8fad2;
+	--color-green-300: #81f4af;
+	--color-green-400: #42e686;
+	--color-green-500: #1bd96a;
+	--color-green-600: #0faa4f;
+	--color-green-700: #0f8642;
+	--color-green-800: #126937;
+	--color-green-900: #11562f;
+	--color-green-950: #033018;
+	--color-green: var(--color-green-500);
+
+	--color-blue-50: #eef6ff;
+	--color-blue-100: #daeaff;
+	--color-blue-200: #bddaff;
+	--color-blue-300: #90c4ff;
+	--color-blue-400: #4f9cff;
+	--color-blue-500: #357ffc;
+	--color-blue-600: #1f5ff1;
+	--color-blue-700: #1749de;
+	--color-blue-800: #193cb4;
+	--color-blue-900: #1a378e;
+	--color-blue-950: #152356;
+	--color-blue: var(--color-blue-400);
+
+	--color-purple-50: #faf5ff;
+	--color-purple-100: #f4e7ff;
+	--color-purple-200: #ead4ff;
+	--color-purple-300: #dab2ff;
+	--color-purple-400: #c78aff;
+	--color-purple-500: #ac51fb;
+	--color-purple-600: #972eef;
+	--color-purple-700: #821ed2;
+	--color-purple-800: #6e1eab;
+	--color-purple-900: #5a198a;
+	--color-purple-950: #3d0566;
+	--color-purple: var(--color-purple-400);
+
+	--color-gray-50: #f5f7f8;
+	--color-gray-100: #edeff2;
+	--color-gray-200: #dfe2e6;
+	--color-gray-300: #cad0d7;
+	--color-gray-400: #b4bac5;
+	--color-gray-500: #9fa4b3;
+	--color-gray-600: #8a8da1;
+	--color-gray-700: #777b8b;
+	--color-gray-800: #616472;
+	--color-gray-900: #52555d;
+	--color-gray-950: #303136;
+	--color-gray: var(--color-gray-500);
 
 	--color-red-highlight: rgba(255, 73, 110, 0.25);
 	--color-orange-highlight: rgba(255, 163, 71, 0.25);

From 5f03e67eaf34120106688ceb731eac06eaad6842 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 4 Sep 2025 17:30:48 +0100
Subject: [PATCH 23/49] feat: payout method/region dropdown temporarily using
 multiselect

---
 .../ui/dashboard/CreatorWithdrawModal.vue     | 72 +++++++++++++++++--
 1 file changed, 66 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index bc8846a7c6..2adfe6bd31 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -25,7 +25,7 @@
 						<b>{{ formatMoney(usedLimit) }}</b> now, but you'll need to complete a tax form to
 						withdraw more.</span
 					>
-					<Admonition type="info" show-actions-underneath header="Tax form required">
+					<Admonition type="warning" show-actions-underneath header="Tax form required">
 						To withdraw your full <b>{{ formatMoney(balance?.available) }}</b> available balance
 						please complete the form below. It is required for tax reporting and only needs to be
 						done once.
@@ -58,10 +58,8 @@
 					<span class="font-semibold text-contrast">{{ formatMoney(balance?.available) }}</span>
 				</div>
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span class="text-brand-red">*</span> <span>Region</span>
-					<span class="my-auto text-blue"
-						><UnknownIcon v-tooltip="`something here`" class="size-5"
-					/></span>
+					<span>Region</span><span class="text-brand-red">*</span>
+					<UnknownIcon v-tooltip="`something here`" class="my-auto size-4 text-secondary" />
 				</div>
 				<Multiselect
 					id="country-multiselect"
@@ -78,6 +76,27 @@
 					:use-teleport="true"
 					open-direction="below"
 				/>
+				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
+					<span>Withdraw to</span><span class="text-brand-red">*</span>
+				</div>
+				<Multiselect
+					id="payment-method"
+					v-model="paymentMethod"
+					class="country-multiselect"
+					placeholder="Select method..."
+					track-by="id"
+					label="name"
+					:options="paymentMethods"
+					:searchable="true"
+					:close-on-select="true"
+					:show-labels="false"
+					:allow-empty="false"
+					:use-teleport="true"
+					open-direction="below"
+				/>
+				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
+					<span>Amount</span><span class="text-brand-red">*</span>
+				</div>
 			</template>
 		</div>
 	</NewModal>
@@ -106,6 +125,12 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
+interface PayoutMethod {
+	id: string
+	name: string
+	type: string
+}
+
 const countries = computed(() =>
 	all().map((x) => ({
 		id: x.alpha2,
@@ -113,7 +138,20 @@ const countries = computed(() =>
 	})),
 )
 
-const country = ref<string | null>(null)
+const country = ref<{ id: string; name: string } | null>(null)
+const paymentMethod = ref<PayoutMethod | null>(null)
+
+const {
+	data: payoutMethods,
+	refresh: refreshPayoutMethods,
+	pending: payoutMethodsPending,
+} = await useAsyncData(
+	'payout-methods',
+	() => useBaseFetch(`payout/methods?country=${country.value?.id ?? 'US'}`, { apiVersion: 3 }),
+	{ default: () => [] as PayoutMethod[], watch: [country] },
+)
+
+const paymentMethods = computed<PayoutMethod[]>(() => (payoutMethods.value as PayoutMethod[]) ?? [])
 
 const props = defineProps<{
 	balance: UserBalanceResponse | null
@@ -174,6 +212,28 @@ function show(preferred?: Stage) {
 	open('withdraw-details')
 }
 
+// Initialize default country (fallback to US if available)
+if (!country.value) {
+	const us = countries.value.find((c) => c.id === 'US')
+	country.value = us ?? countries.value[0] ?? null
+}
+
+// Keep selected method in sync with fetched options
+watch(
+	() => paymentMethods.value,
+	(list) => {
+		if (!list?.length) {
+			paymentMethod.value = null
+			return
+		}
+		// Reset selection if current selection is not in the new list
+		if (!paymentMethod.value || !list.some((m) => m.id === paymentMethod.value?.id)) {
+			paymentMethod.value = list[0]
+		}
+	},
+	{ immediate: true },
+)
+
 defineExpose({
 	show,
 })

From c879cb36c67364f58c2547612db7e56ded7ae7ae Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 5 Sep 2025 17:37:35 +0100
Subject: [PATCH 24/49] feat: fix modal open issues and use teleport dropdowns

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |  18 ++-
 .../ui/dashboard/CreatorWithdrawModal.vue     | 106 ++++++++++--------
 .../src/pages/dashboard/revenue/index.vue     |  56 ++++++++-
 3 files changed, 123 insertions(+), 57 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index a0a75ae1eb..b6c6486a2b 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -1,5 +1,10 @@
 <template>
-	<NewModal ref="taxFormModal" header="Submitting tax form" :closable="false">
+	<NewModal
+		ref="taxFormModal"
+		header="Submitting tax form"
+		@on-hide="emit('onHide')"
+		:closable="false"
+	>
 		<div class="max-w-[40rem]">
 			<Admonition
 				type="info"
@@ -61,7 +66,7 @@
 				</div>
 			</Transition>
 			<div class="mt-4 flex w-full flex-row justify-between gap-2">
-				<ButtonStyled @click="$emit('close')">
+				<ButtonStyled @click="emit('close')">
 					<button @click="hideModal"><XIcon /> Cancel</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
@@ -122,6 +127,11 @@ defineExpose({
 	startTaxForm,
 })
 
+const emit = defineEmits<{
+	(event: 'onHide'): void
+	(event: 'close'): void
+}>()
+
 const avalaraState = ref<ReturnType<typeof useAvalara1099> | null>(null)
 const loading = computed(() =>
 	avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false,
@@ -168,10 +178,6 @@ watch(isUSCitizen, (newValue) => {
 		entityType.value = null
 	}
 })
-
-defineOptions({
-	inheritAttrs: true,
-})
 </script>
 
 <style>
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index 2adfe6bd31..a9085295a3 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -1,5 +1,4 @@
 <template>
-	<CreatorTaxFormModal ref="taxFormModal" :on-hide="reopenAfterTaxForm" />
 	<NewModal
 		ref="withdrawModal"
 		:header="currentStageLabel"
@@ -61,52 +60,43 @@
 					<span>Region</span><span class="text-brand-red">*</span>
 					<UnknownIcon v-tooltip="`something here`" class="my-auto size-4 text-secondary" />
 				</div>
-				<Multiselect
+				<TeleportDropdownMenu
 					id="country-multiselect"
-					v-model="country"
+					v-model="countryProxy"
 					class="country-multiselect"
-					placeholder="Select country..."
-					track-by="id"
-					label="name"
+					name="country"
 					:options="countries"
-					:searchable="true"
-					:close-on-select="true"
-					:show-labels="false"
-					:allow-empty="false"
-					:use-teleport="true"
-					open-direction="below"
+					:display-name="(o: { id: string; name: string }) => o.name"
+					placeholder="Select country..."
 				/>
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
 					<span>Withdraw to</span><span class="text-brand-red">*</span>
 				</div>
-				<Multiselect
+				<TeleportDropdownMenu
 					id="payment-method"
 					v-model="paymentMethod"
 					class="country-multiselect"
-					placeholder="Select method..."
-					track-by="id"
-					label="name"
+					name="payment-method"
 					:options="paymentMethods"
-					:searchable="true"
-					:close-on-select="true"
-					:show-labels="false"
-					:allow-empty="false"
-					:use-teleport="true"
-					open-direction="below"
+					:display-name="(m: PayoutMethod) => m.name"
+					placeholder="Select method..."
 				/>
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
 					<span>Amount</span><span class="text-brand-red">*</span>
 				</div>
+				<span class="text-secondary"
+					>The minimum transfer amount is {{ formatMoney(minWithdrawAmount) }}.</span
+				>
 			</template>
 		</div>
 	</NewModal>
+	<CreatorTaxFormModal ref="taxFormModal" @on-hide="reopenAfterTaxForm" />
 </template>
 <script lang="ts" setup>
 import { FileTextIcon, UnknownIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
+import { Admonition, ButtonStyled, NewModal, TeleportDropdownMenu } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
-import { Multiselect } from 'vue-multiselect'
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
 
@@ -125,10 +115,24 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
+type PayoutMethodType = 'venmo' | 'paypal' | 'tremendous' | 'unknown'
+
+type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
+
+interface PayoutMethodFee {
+	percentage: number
+	min: number
+	max?: number | null
+}
+
 interface PayoutMethod {
 	id: string
 	name: string
-	type: string
+	type: PayoutMethodType
+	supported_countries: string[]
+	image_url?: string | null
+	interval: PayoutInterval
+	fee: PayoutMethodFee
 }
 
 const countries = computed(() =>
@@ -137,26 +141,42 @@ const countries = computed(() =>
 		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
 	})),
 )
-
-const country = ref<{ id: string; name: string } | null>(null)
 const paymentMethod = ref<PayoutMethod | null>(null)
 
-const {
-	data: payoutMethods,
-	refresh: refreshPayoutMethods,
-	pending: payoutMethodsPending,
-} = await useAsyncData(
-	'payout-methods',
-	() => useBaseFetch(`payout/methods?country=${country.value?.id ?? 'US'}`, { apiVersion: 3 }),
-	{ default: () => [] as PayoutMethod[], watch: [country] },
-)
-
-const paymentMethods = computed<PayoutMethod[]>(() => (payoutMethods.value as PayoutMethod[]) ?? [])
-
 const props = defineProps<{
 	balance: UserBalanceResponse | null
+	payoutMethods?: PayoutMethod[]
+	payoutMethodsPending?: boolean
+	country: { id: string; name: string } | null
 }>()
 
+const emit = defineEmits<{
+	(e: 'update:country', value: { id: string; name: string } | null): void
+}>()
+
+const countryProxy = computed({
+	get: () => props.country,
+	set: (v) => emit('update:country', v),
+})
+
+const paymentMethods = computed<PayoutMethod[]>(() => props.payoutMethods ?? [])
+
+const maxWithdrawAmount = computed(() => {
+	if (!paymentMethod.value) return props.balance?.available ?? 0
+
+	const interval = paymentMethod.value.interval
+	return 'standard' in interval
+		? interval.standard.max
+		: (interval?.fixed?.values.slice(-1)[0] ?? 0)
+})
+
+const minWithdrawAmount = computed(() => {
+	if (!paymentMethod.value) return 0.25
+
+	const interval = paymentMethod.value.interval
+	return 'standard' in interval ? interval.standard.min : (interval?.fixed?.values?.[0] ?? 0.25)
+})
+
 const usedLimit = computed(() => {
 	return 600 - (props.balance?.withdrawn_ytd ?? 0)
 })
@@ -212,13 +232,6 @@ function show(preferred?: Stage) {
 	open('withdraw-details')
 }
 
-// Initialize default country (fallback to US if available)
-if (!country.value) {
-	const us = countries.value.find((c) => c.id === 'US')
-	country.value = us ?? countries.value[0] ?? null
-}
-
-// Keep selected method in sync with fetched options
 watch(
 	() => paymentMethods.value,
 	(list) => {
@@ -226,7 +239,6 @@ watch(
 			paymentMethod.value = null
 			return
 		}
-		// Reset selection if current selection is not in the new list
 		if (!paymentMethod.value || !list.some((m) => m.id === paymentMethod.value?.id)) {
 			paymentMethod.value = list[0]
 		}
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 0ea188b3e5..4908f4444a 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,5 +1,11 @@
 <template>
-	<CreatorWithdrawModal ref="withdrawModal" :balance="userBalance" />
+	<CreatorWithdrawModal
+		ref="withdrawModal"
+		:balance="userBalance"
+		v-model:country="withdrawCountry"
+		:payout-methods="paymentMethods"
+		:payout-methods-pending="payoutMethodsPending"
+	/>
 	<div class="mb-6 flex flex-col gap-8 p-2">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
@@ -154,6 +160,7 @@ import {
 } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
+import { all } from 'iso-3166-1'
 import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal.vue'
 
 // TODO: Deduplicate in @modrinth/api-client PR.
@@ -171,6 +178,36 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
+// Types for payout methods and related shapes
+type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
+interface PayoutMethodFee {
+	percentage: number
+	min: number
+	max?: number | null
+}
+interface PayoutMethod {
+	id: string
+	name: string
+	type: PayoutMethodType
+	supported_countries: string[]
+	image_url?: string | null
+	interval: PayoutInterval
+	fee: PayoutMethodFee
+}
+
+const countries = computed(() =>
+	all().map((x) => ({
+		id: x.alpha2,
+		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
+	})),
+)
+const withdrawCountry = ref<{ id: string; name: string } | null>(null)
+
+if (!withdrawCountry.value) {
+	const us = countries.value.find((c) => c.id === 'US')
+	withdrawCountry.value = us ?? countries.value[0] ?? null
+}
+
 type RevenueBarSegment = {
 	key: string
 	class: string
@@ -178,9 +215,10 @@ type RevenueBarSegment = {
 	amount: number
 }
 
-const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal> | null>(null)
-function openWithdrawModal() {
-	withdrawModal.value?.show()
+const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal>>()
+async function openWithdrawModal() {
+	withdrawModal.value?.show?.()
+	console.log(withdrawModal.value?.show)
 }
 
 function formatTransactionStatus(status: PayoutStatus) {
@@ -229,6 +267,16 @@ const sortedPayouts = computed<PayoutList>(() => {
 	})
 })
 
+// Fetch payout methods based on selected country
+const { data: payoutMethods, pending: payoutMethodsPending } = await useAsyncData(
+	'payout-methods',
+	() =>
+		useBaseFetch(`payout/methods?country=${withdrawCountry.value?.id ?? 'US'}`, { apiVersion: 3 }),
+	{ default: () => [] as PayoutMethod[], watch: [withdrawCountry] },
+)
+
+const paymentMethods = computed<PayoutMethod[]>(() => (payoutMethods.value as PayoutMethod[]) ?? [])
+
 const totalAvailable = computed(() => (userBalance.value ? Number(userBalance.value.available) : 0))
 const nextDate = computed<{ date: string; amount: number }[]>(() => {
 	const dates = userBalance.value?.dates

From c2faa56750f50f24fba3f2c466d9c93df600bd78 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 5 Sep 2025 17:38:50 +0100
Subject: [PATCH 25/49] feat: hide transactions section if there are no
 transactions

---
 apps/frontend/src/pages/dashboard/revenue/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 4908f4444a..3a2bdc64b9 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -116,7 +116,7 @@
 				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
 			>
 		</div>
-		<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-4" v-if="sortedPayouts.length > 0">
 			<div class="flex flex-row justify-between">
 				<span class="text-3xl font-semibold text-contrast">Transactions</span>
 				<nuxt-link

From 18651205dfd68ac89239a90b5e82c8b6a8d12b19 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 6 Sep 2025 15:37:51 +0100
Subject: [PATCH 26/49] refactor: NavStack surfaces

---
 apps/frontend/src/components/ui/NavStack.vue  | 137 ++++++++++++--
 .../src/components/ui/NavStackItem.vue        |  64 -------
 .../src/pages/[type]/[id]/settings.vue        | 173 ++++++++----------
 apps/frontend/src/pages/dashboard.vue         |  54 ++----
 apps/frontend/src/pages/legal.vue             |  49 ++---
 apps/frontend/src/pages/organization/[id].vue |  82 ++++-----
 apps/frontend/src/pages/settings.vue          | 137 +++++++-------
 apps/frontend/tailwind.config.ts              |   9 +
 packages/assets/styles/variables.scss         |  27 +++
 9 files changed, 364 insertions(+), 368 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/NavStackItem.vue

diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index f7bb9fccf4..e30e9f7ef1 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -1,32 +1,129 @@
 <template>
-	<nav>
-		<ul>
-			<slot />
+	<nav :aria-label="ariaLabel" class="w-full">
+		<ul
+			class="border-surface-4 bg-surface-1 m-0 flex list-none flex-col items-start gap-1.5 rounded-2xl border border-solid p-4"
+		>
+			<slot v-if="hasSlotContent" />
+
+			<template v-else>
+				<li v-for="(item, idx) in items" :key="getKey(item, idx)" class="contents">
+					<hr v-if="isSeparator(item)" class="border-surface-4 my-1 w-full border-t border-solid" />
+
+					<div
+						v-else-if="isHeading(item)"
+						class="px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-secondary"
+					>
+						{{ item.label }}
+					</div>
+
+					<NuxtLink
+						v-else-if="item.link ?? item.to"
+						:to="(item.link ?? item.to) as string"
+						class="nav-item inline-flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
+					>
+						<component
+							v-if="item.icon"
+							:is="item.icon"
+							aria-hidden="true"
+							class="h-5 w-5 shrink-0"
+						/>
+						<span>{{ item.label }}</span>
+						<span
+							v-if="item.badge != null"
+							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
+						>
+							{{ String(item.badge) }}
+						</span>
+						<span v-if="item.chevron" class="ml-auto"><ChevronRightIcon /></span>
+					</NuxtLink>
+
+					<button
+						v-else-if="item.action"
+						class="nav-item inline-flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
+						:class="{ 'danger-button': item.danger }"
+						@click="item.action"
+					>
+						<component
+							v-if="item.icon"
+							:is="item.icon"
+							aria-hidden="true"
+							class="h-5 w-5 shrink-0"
+						/>
+						<span>{{ item.label }}</span>
+						<span
+							v-if="item.badge != null"
+							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
+						>
+							{{ String(item.badge) }}
+						</span>
+					</button>
+
+					<span v-else>You frog. 🐸</span>
+				</li>
+			</template>
 		</ul>
 	</nav>
 </template>
 
-<script>
-export default {}
-</script>
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { computed, useSlots, type Component } from 'vue'
 
-<style lang="scss" scoped>
-ul {
-	display: flex;
-	flex-direction: column;
-	grid-gap: var(--spacing-card-xs);
-	flex-wrap: wrap;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-
-	> :first-child {
-		margin-top: 0;
-	}
+type NavStackBaseItem = {
+	label: string
+	icon?: Component | string
+	badge?: string | number | null
+	chevron?: boolean
+	danger?: boolean
+}
+
+type NavStackLinkItem = NavStackBaseItem & {
+	type?: 'item'
+	link?: string | null
+	to?: string | null
+	action?: (() => void) | null
 }
 
+type NavStackSeparator = { type: 'separator' }
+type NavStackHeading = { type: 'heading'; label: string }
+
+export type NavStackEntry = NavStackLinkItem | NavStackSeparator | NavStackHeading
+
+const props = defineProps<{
+	items?: NavStackEntry[]
+	ariaLabel?: string
+}>()
+
+const ariaLabel = computed(() => props.ariaLabel ?? 'Section navigation')
+
+const slots = useSlots()
+const hasSlotContent = computed(() => {
+	const content = slots.default?.()
+	return !!(content && content.length)
+})
+
+function isSeparator(item: NavStackEntry): item is NavStackSeparator {
+	return (item as any).type === 'separator'
+}
+
+function isHeading(item: NavStackEntry): item is NavStackHeading {
+	return (item as any).type === 'heading'
+}
+
+function getKey(item: NavStackEntry, idx: number) {
+	if (isSeparator(item)) return `sep-${idx}`
+	if (isHeading(item)) return `head-${item.label}-${idx}`
+	const link = (item as NavStackLinkItem).link ?? (item as NavStackLinkItem).to
+	return link ? `link-${link}` : `action-${(item as NavStackLinkItem).label}-${idx}`
+}
+</script>
+
+<style lang="scss" scoped>
 li {
-	display: unset;
 	text-align: unset;
 }
+.router-link-exact-active.nav-item {
+	background: var(--color-button-bg-selected);
+	color: var(--color-button-text-selected);
+}
 </style>
diff --git a/apps/frontend/src/components/ui/NavStackItem.vue b/apps/frontend/src/components/ui/NavStackItem.vue
deleted file mode 100644
index aff9b434e3..0000000000
--- a/apps/frontend/src/components/ui/NavStackItem.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-	<NuxtLink v-if="link !== null" :to="link" class="nav-item">
-		<slot />
-		<span>{{ label }}</span>
-		<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
-			badge
-		}}</span>
-		<span v-if="chevron" class="ml-auto"><ChevronRightIcon /></span>
-	</NuxtLink>
-	<button v-else-if="action" class="nav-item" :class="{ 'danger-button': danger }" @click="action">
-		<slot />
-		<span>{{ label }}</span>
-		<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
-			badge
-		}}</span>
-	</button>
-	<span v-else>i forgor 💀</span>
-</template>
-
-<script>
-import { ChevronRightIcon } from '@modrinth/assets'
-
-export default {
-	components: {
-		ChevronRightIcon,
-	},
-	props: {
-		link: {
-			default: null,
-			type: String,
-		},
-		action: {
-			default: null,
-			type: Function,
-		},
-		label: {
-			required: true,
-			type: String,
-		},
-		badge: {
-			default: null,
-			type: String,
-		},
-		chevron: {
-			default: false,
-			type: Boolean,
-		},
-		danger: {
-			default: false,
-			type: Boolean,
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.nav-item {
-	@apply flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2 text-left font-semibold text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97];
-}
-
-.router-link-exact-active.nav-item {
-	@apply bg-button-bgSelected text-button-textSelected;
-}
-</style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index 99c7c33abe..948abe5c49 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -14,9 +14,9 @@ import {
 import { commonMessages, commonProjectSettingsMessages } from '@modrinth/ui'
 import type { Project, ProjectV3Partial } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
 
 import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -38,106 +38,85 @@ const members = defineModel<any>('members')
 const allMembers = defineModel<any>('allMembers')
 const dependencies = defineModel<any>('dependencies')
 const organization = defineModel<any>('organization')
+
+const navItems = computed(() => {
+	const base = `${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
+	const items = [
+		{
+			link: `/${base}/settings`,
+			label: formatMessage(commonProjectSettingsMessages.general),
+			icon: InfoIcon,
+		},
+		flags.value.newProjectGeneralSettings
+			? {
+					link: `/${base}/settings/general`,
+					label: formatMessage(commonProjectSettingsMessages.general),
+					badge: formatMessage(commonMessages.newBadge),
+					icon: InfoIcon,
+				}
+			: null,
+		flags.value.newProjectEnvironmentSettings &&
+		projectV3.value.project_types.some((type: string) => ['mod', 'modpack'].includes(type))
+			? {
+					link: `/${base}/settings/environment`,
+					label: formatMessage(commonProjectSettingsMessages.environment),
+					badge: formatMessage(commonMessages.newBadge),
+					icon: GlobeIcon,
+				}
+			: null,
+		{
+			link: `/${base}/settings/tags`,
+			label: formatMessage(commonProjectSettingsMessages.tags),
+			icon: TagsIcon,
+		},
+		{
+			link: `/${base}/settings/description`,
+			label: formatMessage(commonProjectSettingsMessages.description),
+			icon: AlignLeftIcon,
+		},
+		{
+			link: `/${base}/settings/license`,
+			label: formatMessage(commonProjectSettingsMessages.license),
+			icon: BookTextIcon,
+		},
+		{
+			link: `/${base}/settings/links`,
+			label: formatMessage(commonProjectSettingsMessages.links),
+			icon: LinkIcon,
+		},
+		{
+			link: `/${base}/settings/members`,
+			label: formatMessage(commonProjectSettingsMessages.members),
+			icon: UsersIcon,
+		},
+		{ type: 'heading', label: formatMessage(commonProjectSettingsMessages.view) },
+		{
+			link: `/${base}/settings/analytics`,
+			label: formatMessage(commonProjectSettingsMessages.analytics),
+			icon: ChartIcon,
+			chevron: true,
+		},
+		{ type: 'heading', label: formatMessage(commonProjectSettingsMessages.upload) },
+		{
+			link: `/${base}/gallery`,
+			label: formatMessage(commonProjectSettingsMessages.gallery),
+			icon: ImageIcon,
+			chevron: true,
+		},
+		{
+			link: `/${base}/versions`,
+			label: formatMessage(commonProjectSettingsMessages.versions),
+			icon: VersionIcon,
+			chevron: true,
+		},
+	]
+	return items.filter(Boolean) as any[]
+})
 </script>
 <template>
 	<div class="experimental-styles-within grid gap-4 lg:grid-cols-[1fr_3fr]">
 		<div>
-			<aside class="universal-card">
-				<NavStack>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-						:label="formatMessage(commonProjectSettingsMessages.general)"
-					>
-						<InfoIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						v-if="flags.newProjectGeneralSettings"
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings/general`"
-						:label="formatMessage(commonProjectSettingsMessages.general)"
-						:badge="formatMessage(commonMessages.newBadge)"
-					>
-						<InfoIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						v-if="
-							flags.newProjectEnvironmentSettings &&
-							projectV3.project_types.some((type) => ['mod', 'modpack'].includes(type))
-						"
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/environment`"
-						:label="formatMessage(commonProjectSettingsMessages.environment)"
-						:badge="formatMessage(commonMessages.newBadge)"
-					>
-						<GlobeIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/tags`"
-						:label="formatMessage(commonProjectSettingsMessages.tags)"
-					>
-						<TagsIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/description`"
-						:label="formatMessage(commonProjectSettingsMessages.description)"
-					>
-						<AlignLeftIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/license`"
-						:label="formatMessage(commonProjectSettingsMessages.license)"
-					>
-						<BookTextIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/links`"
-						:label="formatMessage(commonProjectSettingsMessages.links)"
-					>
-						<LinkIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/members`"
-						:label="formatMessage(commonProjectSettingsMessages.members)"
-					>
-						<UsersIcon aria-hidden="true" />
-					</NavStackItem>
-					<h3>{{ formatMessage(commonProjectSettingsMessages.view) }}</h3>
-					<NavStackItem
-						:link="`/${project.project_type}/${
-							project.slug ? project.slug : project.id
-						}/settings/analytics`"
-						:label="formatMessage(commonProjectSettingsMessages.analytics)"
-						chevron
-					>
-						<ChartIcon aria-hidden="true" />
-					</NavStackItem>
-					<h3>{{ formatMessage(commonProjectSettingsMessages.upload) }}</h3>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/gallery`"
-						:label="formatMessage(commonProjectSettingsMessages.gallery)"
-						chevron
-					>
-						<ImageIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
-						:label="formatMessage(commonProjectSettingsMessages.versions)"
-						chevron
-					>
-						<VersionIcon aria-hidden="true" />
-					</NavStackItem>
-				</NavStack>
-			</aside>
+			<NavStack :items="navItems" />
 		</div>
 		<div class="min-w-0">
 			<NuxtPage
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 1496b6aaa5..06b99032fe 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -1,40 +1,23 @@
 <template>
 	<div class="normal-page">
 		<div class="normal-page__sidebar">
-			<aside class="universal-card">
-				<h1>Dashboard</h1>
-				<NavStack>
-					<NavStackItem link="/dashboard" label="Overview">
-						<DashboardIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/dashboard/notifications" label="Notifications">
-						<NotificationsIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/dashboard/reports" label="Active reports">
-						<ReportIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/dashboard/analytics" label="Analytics">
-						<ChartIcon aria-hidden="true" />
-					</NavStackItem>
-
-					<h3>Manage</h3>
-					<NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
-						<ListIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
-						<OrganizationIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem
-						link="/dashboard/collections"
-						:label="formatMessage(commonMessages.collectionsLabel)"
-					>
-						<LibraryIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/dashboard/revenue" label="Revenue">
-						<CurrencyIcon aria-hidden="true" />
-					</NavStackItem>
-				</NavStack>
-			</aside>
+			<NavStack
+				:items="[
+					{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
+					{ link: '/dashboard/notifications', label: 'Notifications', icon: NotificationsIcon },
+					{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
+					{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
+					{ type: 'separator' },
+					{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
+					{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
+					{
+						link: '/dashboard/collections',
+						label: formatMessage(commonMessages.collectionsLabel),
+						icon: LibraryIcon,
+					},
+					{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon },
+				]"
+			/>
 		</div>
 		<div class="normal-page__content">
 			<NuxtPage :route="route" />
@@ -43,19 +26,18 @@
 </template>
 <script setup>
 import {
-	BellIcon as NotificationsIcon,
 	ChartIcon,
 	CurrencyIcon,
 	DashboardIcon,
 	LibraryIcon,
 	ListIcon,
+	BellIcon as NotificationsIcon,
 	OrganizationIcon,
 	ReportIcon,
 } from '@modrinth/assets'
 import { commonMessages } from '@modrinth/ui'
 
 import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 const { formatMessage } = useVIntl()
 
diff --git a/apps/frontend/src/pages/legal.vue b/apps/frontend/src/pages/legal.vue
index 2308e2aba4..14023de1e4 100644
--- a/apps/frontend/src/pages/legal.vue
+++ b/apps/frontend/src/pages/legal.vue
@@ -1,39 +1,21 @@
 <template>
 	<div class="normal-page">
 		<div class="normal-page__sidebar">
-			<aside class="universal-card">
-				<h1>Legal</h1>
-				<NavStack>
-					<NavStackItem link="/legal/terms" label="Terms of Use">
-						<HeartHandshakeIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/legal/rules" label="Content Rules">
-						<ScaleIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/legal/copyright" label="Copyright Policy">
-						<CopyrightIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/legal/security" label="Security Notice">
-						<ShieldIcon aria-hidden="true" />
-					</NavStackItem>
-
-					<h3>Privacy</h3>
-					<NavStackItem link="/legal/privacy" label="Privacy Policy">
-						<LockIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/legal/ccpa" label="California Privacy Notice">
-						<InfoIcon aria-hidden="true" />
-					</NavStackItem>
-
-					<h3>Rewards Program</h3>
-					<NavStackItem link="/legal/cmp" label="Rewards Program Terms">
-						<CurrencyIcon aria-hidden="true" />
-					</NavStackItem>
-					<NavStackItem link="/legal/cmp-info" label="Rewards Program Info">
-						<InfoIcon aria-hidden="true" />
-					</NavStackItem>
-				</NavStack>
-			</aside>
+			<NavStack
+				:items="[
+					{ type: 'heading', label: 'Platform' },
+					{ link: '/legal/terms', label: 'Terms of Use', icon: HeartHandshakeIcon },
+					{ link: '/legal/rules', label: 'Content Rules', icon: ScaleIcon },
+					{ link: '/legal/copyright', label: 'Copyright Policy', icon: CopyrightIcon },
+					{ link: '/legal/security', label: 'Security Notice', icon: ShieldIcon },
+					{ type: 'heading', label: 'Privacy' },
+					{ link: '/legal/privacy', label: 'Privacy Policy', icon: LockIcon },
+					{ link: '/legal/ccpa', label: 'California Privacy Notice', icon: InfoIcon },
+					{ type: 'heading', label: 'Rewards Program' },
+					{ link: '/legal/cmp', label: 'Rewards Program Terms', icon: CurrencyIcon },
+					{ link: '/legal/cmp-info', label: 'Rewards Program Info', icon: InfoIcon },
+				]"
+			/>
 		</div>
 		<div class="normal-page__content">
 			<NuxtPage class="universal-card" :route="route" />
@@ -53,7 +35,6 @@ import {
 } from '@modrinth/assets'
 
 import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 const route = useNativeRoute()
 </script>
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index a62864bce2..8ecb36221b 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -7,22 +7,13 @@
 		<ModalCreation ref="modal_creation" :organization-id="organization.id" />
 		<template v-if="routeHasSettings">
 			<div class="normal-page__sidebar">
-				<div class="universal-card">
-					<Breadcrumbs
-						current-title="Settings"
-						:link-stack="[
-							{ href: `/dashboard/organizations`, label: 'Organizations' },
-							{
-								href: `/organization/${organization.slug}`,
-								label: organization.name,
-								allowTrimming: true,
-							},
-						]"
-					/>
-					<div class="page-header__settings">
+				<div
+					class="bg-surface border-surface-4 mb-4 flex flex-col rounded-xl border border-solid p-4"
+				>
+					<div class="flex items-center gap-4">
 						<Avatar size="sm" :src="organization.icon_url" />
-						<div class="title-section">
-							<h2 class="settings-title">
+						<div class="flex flex-col justify-center gap-1">
+							<h2 class="m-0 text-base">
 								<nuxt-link :to="`/organization/${organization.slug}/settings`">
 									{{ organization.name }}
 								</nuxt-link>
@@ -33,33 +24,32 @@
 							</span>
 						</div>
 					</div>
-
-					<h2>Organization settings</h2>
-
-					<NavStack>
-						<NavStackItem :link="`/organization/${organization.slug}/settings`" label="Overview">
-							<SettingsIcon />
-						</NavStackItem>
-						<NavStackItem
-							:link="`/organization/${organization.slug}/settings/members`"
-							label="Members"
-						>
-							<UsersIcon />
-						</NavStackItem>
-						<NavStackItem
-							:link="`/organization/${organization.slug}/settings/projects`"
-							label="Projects"
-						>
-							<BoxIcon />
-						</NavStackItem>
-						<NavStackItem
-							:link="`/organization/${organization.slug}/settings/analytics`"
-							label="Analytics"
-						>
-							<ChartIcon />
-						</NavStackItem>
-					</NavStack>
 				</div>
+
+				<NavStack
+					:items="[
+						{
+							link: `/organization/${organization.slug}/settings`,
+							label: 'Overview',
+							icon: SettingsIcon,
+						},
+						{
+							link: `/organization/${organization.slug}/settings/members`,
+							label: 'Members',
+							icon: UsersIcon,
+						},
+						{
+							link: `/organization/${organization.slug}/settings/projects`,
+							label: 'Projects',
+							icon: BoxIcon,
+						},
+						{
+							link: `/organization/${organization.slug}/settings/analytics`,
+							label: 'Analytics',
+							icon: ChartIcon,
+						},
+					]"
+				/>
 			</div>
 			<div class="normal-page__content">
 				<NuxtPage />
@@ -271,14 +261,7 @@ import {
 	UsersIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Avatar,
-	Breadcrumbs,
-	ButtonStyled,
-	commonMessages,
-	ContentPageHeader,
-	OverflowMenu,
-} from '@modrinth/ui'
+import { Avatar, ButtonStyled, commonMessages, ContentPageHeader, OverflowMenu } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'
 import { formatNumber } from '@modrinth/utils'
 
@@ -286,7 +269,6 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
 import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index 8c04d1c283..33893f8896 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -5,72 +5,76 @@
 		</div>
 		<div class="normal-page">
 			<div class="normal-page__sidebar">
-				<aside class="universal-card">
-					<NavStack>
-						<h3>Display</h3>
-						<NavStackItem
-							link="/settings"
-							:label="formatMessage(commonSettingsMessages.appearance)"
-						>
-							<PaintbrushIcon />
-						</NavStackItem>
-						<NavStackItem
-							v-if="isStaging"
-							link="/settings/language"
-							:label="formatMessage(commonSettingsMessages.language)"
-						>
-							<LanguagesIcon />
-						</NavStackItem>
-						<template v-if="auth.user">
-							<h3>Account</h3>
-							<NavStackItem
-								link="/settings/profile"
-								:label="formatMessage(commonSettingsMessages.profile)"
-							>
-								<UserIcon />
-							</NavStackItem>
-							<NavStackItem
-								link="/settings/account"
-								:label="formatMessage(commonSettingsMessages.account)"
-							>
-								<ShieldIcon />
-							</NavStackItem>
-							<NavStackItem
-								link="/settings/authorizations"
-								:label="formatMessage(commonSettingsMessages.authorizedApps)"
-							>
-								<GridIcon />
-							</NavStackItem>
-							<NavStackItem
-								link="/settings/sessions"
-								:label="formatMessage(commonSettingsMessages.sessions)"
-							>
-								<MonitorSmartphoneIcon />
-							</NavStackItem>
-							<NavStackItem
-								link="/settings/billing"
-								:label="formatMessage(commonSettingsMessages.billing)"
-							>
-								<CardIcon />
-							</NavStackItem>
-						</template>
-						<template v-if="auth.user">
-							<h3>Developer</h3>
-							<NavStackItem
-								link="/settings/pats"
-								:label="formatMessage(commonSettingsMessages.pats)"
-							>
-								<KeyIcon />
-							</NavStackItem>
-							<NavStackItem
-								link="/settings/applications"
-								:label="formatMessage(commonSettingsMessages.applications)"
-							>
-								<ServerIcon />
-							</NavStackItem>
-						</template>
-					</NavStack>
-				</aside>
+				<NavStack
+					:items="
+						[
+							{ type: 'heading', label: 'Display' },
+							{
+								link: '/settings',
+								label: formatMessage(commonSettingsMessages.appearance),
+								icon: PaintbrushIcon,
+							},
+							isStaging
+								? {
+										link: '/settings/language',
+										label: formatMessage(commonSettingsMessages.language),
+										icon: LanguagesIcon,
+									}
+								: null,
+							auth.user ? { type: 'heading', label: 'Account' } : null,
+							auth.user
+								? {
+										link: '/settings/profile',
+										label: formatMessage(commonSettingsMessages.profile),
+										icon: UserIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/account',
+										label: formatMessage(commonSettingsMessages.account),
+										icon: ShieldIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/authorizations',
+										label: formatMessage(commonSettingsMessages.authorizedApps),
+										icon: GridIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/sessions',
+										label: formatMessage(commonSettingsMessages.sessions),
+										icon: MonitorSmartphoneIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/billing',
+										label: formatMessage(commonSettingsMessages.billing),
+										icon: CardIcon,
+									}
+								: null,
+							auth.user ? { type: 'heading', label: 'Developer' } : null,
+							auth.user
+								? {
+										link: '/settings/pats',
+										label: formatMessage(commonSettingsMessages.pats),
+										icon: KeyIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/applications',
+										label: formatMessage(commonSettingsMessages.applications),
+										icon: ServerIcon,
+									}
+								: null,
+						].filter(Boolean)
+					"
+				/>
 			</div>
 			<div class="normal-page__content">
 				<NuxtPage :route="route" />
@@ -93,7 +97,6 @@ import {
 import { commonMessages, commonSettingsMessages } from '@modrinth/ui'
 
 import NavStack from '~/components/ui/NavStack.vue'
-import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 const { formatMessage } = useVIntl()
 
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 4d20856f88..11260ad361 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -23,6 +23,15 @@ const config: Config = {
 				dark: 'var(--color-text-dark)',
 				inverted: 'var(--color-text-inverted)',
 				heading: 'var(--color-heading)',
+				surface: {
+					DEFAULT: 'var(--color-surface)',
+					0: 'var(--color-surface-0)',
+					1: 'var(--color-surface-1)',
+					2: 'var(--color-surface-2)',
+					3: 'var(--color-surface-3)',
+					4: 'var(--color-surface-4)',
+					5: 'var(--color-surface-5)',
+				},
 				red: {
 					DEFAULT: 'var(--color-red)',
 					50: 'var(--color-red-50)',
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 6664b900c7..93f2915f55 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -14,6 +14,18 @@
 	--color-contrast: #1a202c;
 	--color-accent-contrast: #ffffff;
 
+	// #region New Standards
+
+	// TODO: Light mode surface colors
+	--color-surface: var(--color-surface-1);
+	--color-surface-0: #16181c;
+	--color-surface-1: #27292e;
+	--color-surface-2: #1d1f23;
+	--color-surface-3: #34363c;
+	--color-surface-4: #42444a;
+	// TODO: Impl surface-5
+	--color-surface-5: #42444a;
+
 	--color-red-50: #fef2f2;
 	--color-red-100: #fee5e7;
 	--color-red-200: #fccfd3;
@@ -92,6 +104,8 @@
 	--color-gray-950: #252627;
 	--color-gray: var(--color-gray-600);
 
+	// #endregion
+
 	--color-red-highlight: rgba(203, 34, 69, 0.25);
 	--color-orange-highlight: rgba(224, 131, 37, 0.25);
 	--color-green-highlight: rgba(0, 175, 92, 0.25);
@@ -219,6 +233,17 @@ html {
 	--color-contrast: var(--dark-color-contrast);
 	--color-accent-contrast: #000000;
 
+	// #region New Standards
+
+	--color-surface: var(--color-surface-1);
+	--color-surface-0: #16181c;
+	--color-surface-1: #27292e;
+	--color-surface-2: #1d1f23;
+	--color-surface-3: #34363c;
+	--color-surface-4: #42444a;
+	// TODO: Impl surface-5
+	--color-surface-5: #42444a;
+
 	--color-red-50: #fff0f1;
 	--color-red-100: #ffe2e6;
 	--color-red-200: #ffcad3;
@@ -297,6 +322,8 @@ html {
 	--color-gray-950: #303136;
 	--color-gray: var(--color-gray-500);
 
+	// #endregion
+
 	--color-red-highlight: rgba(255, 73, 110, 0.25);
 	--color-orange-highlight: rgba(255, 163, 71, 0.25);
 	--color-green-highlight: rgba(27, 217, 106, 0.25);

From 03ea9104c6cc1f7deb91705d6d7b359e547665f5 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 8 Sep 2025 14:02:22 +0100
Subject: [PATCH 27/49] feat: new dropdown component

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |  14 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     | 518 ++++++++++++++++--
 .../components/ui/dashboard/FancyDropdown.vue | 457 +++++++++++++++
 .../src/pages/dashboard/revenue/index.vue     |   3 +
 4 files changed, 955 insertions(+), 37 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/dashboard/FancyDropdown.vue

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index b6c6486a2b..772d9d005d 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -142,7 +142,7 @@ async function continueForm() {
 	if (!determinedFormType.value) return
 
 	const response = (await useBaseFetch('payout/compliance', {
-		version: 3,
+		apiVersion: 3,
 		method: 'POST',
 		body: {
 			form_type: determinedFormType.value,
@@ -161,7 +161,17 @@ async function continueForm() {
 	try {
 		if (avalaraState.value) {
 			await avalaraState.value.start()
-			console.log(avalaraState.value.status)
+			if (avalaraState.value.status === 'signed') {
+				hideModal()
+				emit('close')
+				return
+			}
+
+			addNotification({
+				title: 'Tax form incomplete',
+				text: 'You have not completed the tax form. Please try again.',
+				type: 'warning',
+			})
 		}
 	} catch (error) {
 		console.error('Error occurred while continuing tax form:', error)
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index a9085295a3..301ebb14cd 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -12,16 +12,17 @@
 				<div class="flex w-full flex-row justify-between">
 					<span class="font-semibold text-contrast">Withdraw Remaining</span>
 					<div>
-						<span class="text-orange">{{ formatMoney(usedLimit) }}</span> / {{ formatMoney(600) }}
+						<span class="text-orange">{{ formatMoney(remainingLimit) }}</span> /
+						{{ formatMoney(600) }}
 					</div>
 				</div>
 				<div class="flex h-2 w-full overflow-hidden rounded-full bg-button-bg">
 					<div class="bg-orange" :style="{ width: `${(usedLimit / 600) * 100}%` }"></div>
 				</div>
-				<template v-if="usedLimit !== 600">
+				<template v-if="remainingLimit > 0">
 					<span
 						>You're nearing the {{ formatMoney(600) }} withdrawal threshold. You can withdraw up to
-						<b>{{ formatMoney(usedLimit) }}</b> now, but you'll need to complete a tax form to
+						<b>{{ formatMoney(remainingLimit) }}</b> now, but you'll need to complete a tax form to
 						withdraw more.</span
 					>
 					<Admonition type="warning" show-actions-underneath header="Tax form required">
@@ -49,55 +50,222 @@
 						</ButtonStyled>
 					</div>
 				</template>
+				<div class="mt-2 flex gap-3">
+					<ButtonStyled color="standard">
+						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
+					</ButtonStyled>
+					<ButtonStyled color="standard">
+						<button @click="currentStage = 'withdraw-details'" :disabled="remainingLimit <= 0">
+							Continue with limit<ChevronRightIcon />
+						</button>
+					</ButtonStyled>
+				</div>
 			</template>
+
 			<template v-if="currentStage === 'withdraw-details'">
 				<span class="font-semibold text-contrast">Withdraw from</span>
 				<div class="flex flex-col rounded-xl bg-bg p-4">
 					<span class="text-sm text-primary">Available balance</span>
 					<span class="font-semibold text-contrast">{{ formatMoney(balance?.available) }}</span>
 				</div>
+
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
 					<span>Region</span><span class="text-brand-red">*</span>
-					<UnknownIcon v-tooltip="`something here`" class="my-auto size-4 text-secondary" />
+					<UnknownIcon
+						v-tooltip="`Select your country or region`"
+						class="my-auto size-4 text-secondary"
+					/>
 				</div>
-				<TeleportDropdownMenu
-					id="country-multiselect"
-					v-model="countryProxy"
-					class="country-multiselect"
-					name="country"
-					:options="countries"
-					:display-name="(o: { id: string; name: string }) => o.name"
+				<FancyDropdown
+					:listbox="true"
+					:searchable="true"
+					v-model="countryId"
+					:options="countryOptions"
 					placeholder="Select country..."
+					:displayValue="countryProxy?.name ?? 'Select country...'"
 				/>
+
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
 					<span>Withdraw to</span><span class="text-brand-red">*</span>
 				</div>
-				<TeleportDropdownMenu
-					id="payment-method"
-					v-model="paymentMethod"
-					class="country-multiselect"
-					name="payment-method"
-					:options="paymentMethods"
-					:display-name="(m: PayoutMethod) => m.name"
-					placeholder="Select method..."
-				/>
+				<div class="relative">
+					<FancyDropdown
+						:listbox="true"
+						v-model="paymentMethodId"
+						class="payment-method-select w-full"
+						:options="paymentMethodOptions"
+						placeholder="Select method..."
+						:displayValue="
+							paymentMethod ? formatPaymentMethodName(paymentMethod) : 'Select method...'
+						"
+					>
+						<template #extra>
+							<div v-if="paymentMethod && showPaymentDetails" class="w-full">
+								<div class="flex items-center justify-between text-sm">
+									<span class="text-primary">{{ paymentAccountDisplay }}</span>
+									<button
+										@click="editPaymentMethod"
+										class="flex items-center gap-1 text-primary hover:text-contrast"
+									>
+										<span>Change</span>
+										<EditIcon class="h-4 w-4" />
+									</button>
+								</div>
+							</div>
+
+							<div v-else-if="paymentMethod && isPayPalSelected" class="flex w-full flex-col gap-2">
+								<div class="flex items-center gap-2">
+									<ButtonStyled color="brand">
+										<button @click="verifyPayPal" :disabled="isVerifying">
+											Sign in with PayPal
+										</button>
+									</ButtonStyled>
+									<button
+										v-if="hasLinkedPayPal"
+										class="text-sm text-secondary underline-offset-2 hover:underline"
+										@click="cancelEditingLink"
+									>
+										Cancel
+									</button>
+								</div>
+								<p class="text-xs text-secondary">
+									We'll redirect you to PayPal to connect your account.
+								</p>
+							</div>
+
+							<div v-else-if="paymentMethod && isVenmoSelected" class="flex w-full flex-col gap-2">
+								<label for="venmo-handle" class="text-sm text-primary">Venmo username</label>
+								<input
+									id="venmo-handle"
+									v-model="venmoHandle"
+									type="text"
+									autocomplete="off"
+									placeholder="@username"
+									class="rounded-xl border border-divider bg-button-bg px-3 py-2 text-sm focus:outline-none"
+								/>
+								<div class="flex items-center gap-2">
+									<ButtonStyled color="standard">
+										<button @click="verifyVenmo" :disabled="isVerifying || !venmoHandleValid">
+											Verify
+										</button>
+									</ButtonStyled>
+									<button
+										v-if="hasLinkedVenmo"
+										class="text-sm text-secondary underline-offset-2 hover:underline"
+										@click="cancelEditingLink"
+									>
+										Cancel
+									</button>
+								</div>
+								<p class="text-xs text-secondary">
+									Enter your Venmo username. We'll save it to your account.
+								</p>
+							</div>
+
+							<div v-else class="text-sm text-secondary">
+								Tremendous™️ will contact you with redeem instructions using your Modrinth email.
+							</div>
+						</template>
+					</FancyDropdown>
+				</div>
+
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
 					<span>Amount</span><span class="text-brand-red">*</span>
 				</div>
 				<span class="text-secondary"
 					>The minimum transfer amount is {{ formatMoney(minWithdrawAmount) }}.</span
 				>
+				<div class="flex items-center gap-0">
+					<input
+						v-model="withdrawAmount"
+						type="text"
+						pattern="^\d*(\.\d{0,2})?$"
+						placeholder="Enter amount..."
+						class="flex-1 rounded-l-xl border-y border-l border-divider bg-button-bg px-4 py-2.5 placeholder-secondary focus:outline-none"
+					/>
+					<ButtonStyled color="standard" class="rounded-l-none">
+						<button @click="withdrawAmount = maxWithdrawAmount.toString()">Max</button>
+					</ButtonStyled>
+				</div>
+
+				<div v-if="withdrawErrors.length > 0" class="space-y-2">
+					<span v-for="error in withdrawErrors" :key="error" class="block text-red">
+						{{ error }}
+					</span>
+				</div>
+
+				<div class="mt-2 flex gap-3">
+					<ButtonStyled color="standard">
+						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
+					</ButtonStyled>
+					<ButtonStyled color="green" :disabled="!canProceedToWithdraw">
+						<button @click="initiateWithdraw"><TransferIcon />Withdraw</button>
+					</ButtonStyled>
+				</div>
+			</template>
+
+			<template v-if="currentStage === 'confirmation'">
+				<div class="relative flex min-h-[400px] flex-col items-center justify-center">
+					<!-- Animated background particles -->
+					<div class="absolute inset-0 overflow-hidden opacity-70">
+						<div v-for="i in 20" :key="i" class="particle" :style="getParticleStyle(i)"></div>
+					</div>
+
+					<!-- Success content -->
+					<div class="relative z-10 flex flex-col items-center gap-6">
+						<div class="relative flex h-28 w-28 items-center justify-center">
+							<div class="bg-green/10 absolute inset-0 rounded-full"></div>
+							<div
+								class="h-22 w-22 to-green-dark border-green-dark flex items-center justify-center rounded-full border bg-gradient-to-b from-green"
+							>
+								<CheckIcon class="h-14 w-14 text-white" />
+							</div>
+						</div>
+
+						<div class="flex flex-col items-center gap-3 text-center">
+							<h2 class="text-3xl font-semibold text-contrast">Withdraw Complete</h2>
+							<p class="text-secondary">
+								You have successfully withdrawn <b>{{ formatMoney(parsedWithdrawAmount) }}</b> from
+								your Modrinth Balance to {{ formatPaymentMethodName(paymentMethod) }}.
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="mt-6 flex gap-3">
+					<ButtonStyled color="standard" class="flex-1">
+						<button @click="goToPayouts">Payouts</button>
+					</ButtonStyled>
+					<ButtonStyled color="standard" class="flex-1">
+						<button @click="goToTransactions">Transactions</button>
+					</ButtonStyled>
+				</div>
 			</template>
 		</div>
 	</NewModal>
 	<CreatorTaxFormModal ref="taxFormModal" @on-hide="reopenAfterTaxForm" />
 </template>
+
 <script lang="ts" setup>
-import { FileTextIcon, UnknownIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, NewModal, TeleportDropdownMenu } from '@modrinth/ui'
+import {
+	CheckIcon,
+	ChevronRightIcon,
+	EditIcon,
+	FileTextIcon,
+	TransferIcon,
+	UnknownIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Admonition, ButtonStyled, NewModal, injectNotificationManager } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
+import type { CSSProperties } from 'vue'
+import { getAuthUrl } from '~/composables/auth.js'
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
+import FancyDropdown from './FancyDropdown.vue'
+
+const { addNotification, handleError } = injectNotificationManager()
+
 type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
 
 // TODO: Deduplicate in @modrinth/api-client PR.
@@ -108,9 +276,7 @@ interface UserBalanceResponse {
 	withdrawn_lifetime: number
 	withdrawn_ytd: number
 	pending: number
-	// ISO 8601 date string -> amount
 	dates: Record<string, number>
-	// backend returns null when not applicable
 	requested_form_type: string | null
 	form_completion_status: FormCompletionStatus | null
 }
@@ -141,17 +307,33 @@ const countries = computed(() =>
 		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
 	})),
 )
-const paymentMethod = ref<PayoutMethod | null>(null)
+
+// FancyDropdown-compatible country options and model binding
+const countryOptions = computed(() => countries.value.map((c) => ({ value: c.id, label: c.name })))
+
+const countryId = computed<string | null>({
+	get: () => countryProxy.value?.id ?? null,
+	set: (v) => {
+		const selected = countries.value.find((c) => c.id === v) ?? null
+		emit('update:country', selected)
+	},
+})
 
 const props = defineProps<{
+	auth: any
 	balance: UserBalanceResponse | null
 	payoutMethods?: PayoutMethod[]
 	payoutMethodsPending?: boolean
 	country: { id: string; name: string } | null
+	userPayoutData?: {
+		paypal_address?: string
+		venmo_handle?: string
+	}
 }>()
 
 const emit = defineEmits<{
 	(e: 'update:country', value: { id: string; name: string } | null): void
+	(e: 'withdraw', amount: number, method: PayoutMethod): void
 }>()
 
 const countryProxy = computed({
@@ -159,28 +341,273 @@ const countryProxy = computed({
 	set: (v) => emit('update:country', v),
 })
 
-const paymentMethods = computed<PayoutMethod[]>(() => props.payoutMethods ?? [])
+const paymentMethod = ref<PayoutMethod | null>(null)
+const withdrawAmount = ref('')
+
+// Linking state
+const editingLink = ref(false)
+const isVerifying = ref(false)
+const paypalEmail = ref(props.userPayoutData?.paypal_address ?? '')
+const venmoHandle = ref(props.userPayoutData?.venmo_handle ?? '')
+
+const isPayPalSelected = computed(() => paymentMethod.value?.type === 'paypal')
+const isVenmoSelected = computed(() => paymentMethod.value?.type === 'venmo')
+const hasLinkedPayPal = computed(() => !!props.userPayoutData?.paypal_address)
+const hasLinkedVenmo = computed(() => !!props.userPayoutData?.venmo_handle)
+
+const availablePaymentMethods = computed<PayoutMethod[]>(() => {
+	if (!props.payoutMethods) return []
+	return props.payoutMethods.filter((m) => {
+		// Filter based on country support
+		if (countryProxy.value && !m.supported_countries.includes(countryProxy.value.id)) {
+			return false
+		}
+		return true
+	})
+})
+
+// FancyDropdown-compatible payment method options and model binding
+const paymentMethodOptions = computed(() =>
+	availablePaymentMethods.value.map((m) => ({ value: m.id, label: formatPaymentMethodName(m) })),
+)
+
+const paymentMethodId = computed<string | null>({
+	get: () => paymentMethod.value?.id ?? null,
+	set: (id) => {
+		paymentMethod.value = availablePaymentMethods.value.find((m) => m.id === id) ?? null
+	},
+})
 
 const maxWithdrawAmount = computed(() => {
 	if (!paymentMethod.value) return props.balance?.available ?? 0
-
 	const interval = paymentMethod.value.interval
-	return 'standard' in interval
-		? interval.standard.max
-		: (interval?.fixed?.values.slice(-1)[0] ?? 0)
+	const methodMax =
+		'standard' in interval ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0)
+	return Math.min(methodMax, props.balance?.available ?? 0, remainingLimit.value)
 })
 
 const minWithdrawAmount = computed(() => {
 	if (!paymentMethod.value) return 0.25
-
 	const interval = paymentMethod.value.interval
 	return 'standard' in interval ? interval.standard.min : (interval?.fixed?.values?.[0] ?? 0.25)
 })
 
-const usedLimit = computed(() => {
-	return 600 - (props.balance?.withdrawn_ytd ?? 0)
+const parsedWithdrawAmount = computed(() => {
+	const regex = /^\$?(\d*(\.\d{2})?)$/gm
+	const matches = regex.exec(withdrawAmount.value)
+	return matches && matches[1] ? parseFloat(matches[1]) : 0.0
+})
+
+const usedLimit = computed(() => props.balance?.withdrawn_ytd ?? 0)
+const remainingLimit = computed(() => Math.max(0, 600 - usedLimit.value))
+
+const withdrawErrors = computed(() => {
+	const errors: string[] = []
+
+	if (!parsedWithdrawAmount.value && withdrawAmount.value.length > 0) {
+		errors.push(`${withdrawAmount.value} is not a valid amount`)
+	} else if (parsedWithdrawAmount.value > maxWithdrawAmount.value) {
+		errors.push(`The amount must be no more than ${formatMoney(maxWithdrawAmount.value)}`)
+	} else if (
+		parsedWithdrawAmount.value < minWithdrawAmount.value &&
+		parsedWithdrawAmount.value > 0
+	) {
+		errors.push(`The amount must be at least ${formatMoney(minWithdrawAmount.value)}`)
+	}
+
+	if (paymentMethod.value?.type === 'paypal' && !props.userPayoutData?.paypal_address) {
+		errors.push('Please link your PayPal account to proceed.')
+	}
+
+	if (paymentMethod.value?.type === 'venmo' && !props.userPayoutData?.venmo_handle) {
+		errors.push('Please set your Venmo handle to proceed.')
+	}
+
+	return errors
+})
+
+const canProceedToWithdraw = computed(() => {
+	return (
+		withdrawErrors.value.length === 0 &&
+		parsedWithdrawAmount.value > 0 &&
+		paymentMethod.value !== null &&
+		countryProxy.value !== null
+	)
+})
+
+const showPaymentDetails = computed(() => {
+	if (!paymentMethod.value) return false
+	if (editingLink.value) return false
+	if (paymentMethod.value.type === 'paypal') return !!props.userPayoutData?.paypal_address
+	if (paymentMethod.value.type === 'venmo') return !!props.userPayoutData?.venmo_handle
+	return false
+})
+
+const paymentAccountDisplay = computed(() => {
+	if (!paymentMethod.value) return ''
+	if (paymentMethod.value.type === 'paypal') return props.userPayoutData?.paypal_address ?? ''
+	if (paymentMethod.value.type === 'venmo') return props.userPayoutData?.venmo_handle ?? ''
+	return ''
+})
+
+function formatPaymentMethodName(method: PayoutMethod | null): string {
+	if (!method) return ''
+	return method.name
+}
+
+function getPaymentIcon(method: PayoutMethod) {
+	// Return appropriate icon component based on payment method type
+	// This would need to be implemented with actual icon imports
+	return 'div'
+}
+
+function editPaymentMethod() {
+	// Switch to inline editing mode
+	editingLink.value = true
+}
+
+// Validate inputs
+const paypalEmailValid = computed(() => {
+	if (!isPayPalSelected.value) return false
+	const v = paypalEmail.value?.trim()
+	return !!v && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
+})
+
+const venmoHandleValid = computed(() => {
+	if (!isVenmoSelected.value) return false
+	const v = venmoHandle.value?.trim() ?? ''
+	const name = v.startsWith('@') ? v.slice(1) : v
+	return name.length >= 3 && name.length <= 30 && /^[A-Za-z0-9_]+$/.test(name)
 })
 
+function startEditingLink() {
+	editingLink.value = true
+}
+
+function cancelEditingLink() {
+	editingLink.value = false
+	paypalEmail.value = props.userPayoutData?.paypal_address ?? ''
+	venmoHandle.value = props.userPayoutData?.venmo_handle ?? ''
+}
+
+async function refreshAuthSilently() {
+	try {
+		await useAuth()
+	} catch {
+		// ignore
+	}
+}
+
+async function verifyVenmo() {
+	if (!venmoHandleValid.value) return
+	isVerifying.value = true
+	try {
+		const userId = props.auth.user?.id
+		if (!userId) throw new Error('Not signed in')
+		await useBaseFetch(`user/${userId}`, {
+			method: 'PATCH',
+			body: {
+				venmo_handle: (venmoHandle.value || null) as string | null,
+			},
+			apiVersion: 3,
+		})
+		await refreshAuthSilently()
+		addNotification({
+			title: 'Venmo linked',
+			text: 'Your Venmo username has been saved.',
+			type: 'success',
+		})
+		editingLink.value = false
+	} catch (err: any) {
+		handleError(err)
+	} finally {
+		isVerifying.value = false
+	}
+}
+
+const paypalAuthUrl = getAuthUrl('paypal')
+
+async function verifyPayPal() {
+	if (!paypalEmailValid.value) return
+	isVerifying.value = true
+	try {
+		const url = new URL(`${paypalAuthUrl}&token=${props.auth.token}`)
+		const popup = window.open(url, 'paypal_oauth', 'width=520,height=700')
+		if (!popup) throw new Error('Popup blocked')
+
+		await new Promise<void>((resolve) => {
+			const timer = setInterval(() => {
+				if (popup.closed) {
+					clearInterval(timer)
+					resolve()
+				}
+			}, 500)
+		})
+
+		await refreshAuthSilently()
+		addNotification({
+			title: 'PayPal linked',
+			text: 'Your PayPal account has been connected.',
+			type: 'success',
+		})
+		editingLink.value = false
+	} catch (err: any) {
+		handleError(err)
+	} finally {
+		isVerifying.value = false
+	}
+}
+
+async function initiateWithdraw() {
+	if (!canProceedToWithdraw.value || !paymentMethod.value) return
+
+	// Emit withdraw event to parent
+	emit('withdraw', parsedWithdrawAmount.value, paymentMethod.value)
+
+	// Show confirmation
+	currentStage.value = 'confirmation'
+}
+
+function goToPayouts() {
+	navigateTo('/dashboard/revenue/transfers')
+}
+
+function goToTransactions() {
+	navigateTo('/dashboard/revenue')
+}
+
+function getParticleStyle(index: number): CSSProperties {
+	const colors = [
+		'#ff21fb',
+		'#9ded1a',
+		'#755ffd',
+		'#f44620',
+		'#470ba7',
+		'#c9fcbe',
+		'#fc9e1c',
+		'#4bc8ef',
+		'#ba3d02',
+	]
+	const size = Math.random() * 15 + 5
+	const x = Math.random() * 100
+	const y = Math.random() * 100
+	const duration = Math.random() * 20 + 10
+	const delay = Math.random() * 5
+
+	return {
+		position: 'absolute',
+		width: `${size}px`,
+		height: `${size}px`,
+		left: `${x}%`,
+		top: `${y}%`,
+		backgroundColor: colors[index % colors.length],
+		opacity: Math.random() * 0.6 + 0.2,
+		borderRadius: Math.random() > 0.5 ? '50%' : '0',
+		transform: `rotate(${Math.random() * 360}deg)`,
+		animation: `float ${duration}s ${delay}s infinite ease-in-out`,
+	} as CSSProperties
+}
+
 const taxFormModal = ref<InstanceType<typeof CreatorTaxFormModal> | null>(null)
 function showTaxFormModal(e: MouseEvent) {
 	withdrawModal.value?.hide()
@@ -204,6 +631,7 @@ const currentStageLabel = computed<string | undefined>(() => {
 
 const withdrawModal = ref<InstanceType<typeof NewModal> | null>(null)
 const currentStage = ref<Stage | undefined>()
+
 function open(stage: Stage) {
 	currentStage.value = stage
 	withdrawModal.value?.show()
@@ -216,7 +644,6 @@ function show(preferred?: Stage) {
 	}
 
 	const b = props.balance
-
 	if (!b || b.available <= 0) {
 		open('withdraw-limit')
 		return
@@ -233,7 +660,7 @@ function show(preferred?: Stage) {
 }
 
 watch(
-	() => paymentMethods.value,
+	() => availablePaymentMethods.value,
 	(list) => {
 		if (!list?.length) {
 			paymentMethod.value = null
@@ -242,6 +669,11 @@ watch(
 		if (!paymentMethod.value || !list.some((m) => m.id === paymentMethod.value?.id)) {
 			paymentMethod.value = list[0]
 		}
+		// Initialize linking mode depending on whether method is already linked
+		editingLink.value = !showPaymentDetails.value
+		// Reset inputs to current stored values
+		paypalEmail.value = props.userPayoutData?.paypal_address ?? ''
+		venmoHandle.value = props.userPayoutData?.venmo_handle ?? ''
 	},
 	{ immediate: true },
 )
@@ -250,3 +682,19 @@ defineExpose({
 	show,
 })
 </script>
+
+<style scoped>
+@keyframes float {
+	0%,
+	100% {
+		transform: translateY(0) rotate(0deg);
+	}
+	50% {
+		transform: translateY(-20px) rotate(180deg);
+	}
+}
+
+.particle {
+	pointer-events: none;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/dashboard/FancyDropdown.vue b/apps/frontend/src/components/ui/dashboard/FancyDropdown.vue
new file mode 100644
index 0000000000..c0340530dd
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/FancyDropdown.vue
@@ -0,0 +1,457 @@
+<template>
+	<div ref="containerRef" class="relative inline-block w-full max-w-[496px]">
+		<div
+			v-if="$slots.extra && isOpen"
+			class="absolute left-0 right-0 z-[9998] px-4 pb-2.5 pt-10"
+			:class="extraPosition === 'top' ? 'bottom-full' : 'top-full'"
+		>
+			<div
+				class="flex items-end justify-between rounded-b-xl bg-[#1d1f23] px-4 py-2.5"
+				@mousedown.stop
+			>
+				<slot name="extra"></slot>
+			</div>
+		</div>
+
+		<button
+			ref="triggerRef"
+			type="button"
+			class="relative flex h-11 w-full items-center justify-between overflow-hidden rounded-xl bg-[#34363c] px-4 py-2.5 text-left outline outline-1 outline-offset-[-1px] outline-[#42444a] transition-all duration-200"
+			:class="[
+				triggerClasses,
+				{
+					'z-[9999] rounded-b-none': isOpen,
+					'cursor-not-allowed opacity-50': disabled,
+				},
+			]"
+			:aria-expanded="isOpen"
+			:aria-haspopup="listbox ? 'listbox' : 'menu'"
+			:disabled="disabled"
+			@click="handleTriggerClick"
+			@keydown="handleTriggerKeydown"
+		>
+			<div class="flex items-center gap-2">
+				<slot name="prefix"></slot>
+				<span class="text-base font-semibold leading-tight text-white">
+					<slot name="selected">{{ displayValue }}</slot>
+				</span>
+			</div>
+			<div class="flex items-center gap-1">
+				<slot name="suffix"></slot>
+				<svg
+					v-if="showChevron"
+					width="20"
+					height="20"
+					viewBox="0 0 20 20"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					class="transition-transform duration-200"
+					:class="{ 'rotate-180': isOpen }"
+				>
+					<path
+						d="M5 7.5L10 12.5L15 7.5"
+						stroke="#B0BAC5"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</div>
+		</button>
+
+		<Teleport to="#teleports">
+			<div
+				v-if="isOpen"
+				ref="dropdownRef"
+				class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] rounded-t-none bg-[#34363c] outline outline-1 outline-offset-[-1px] outline-[#42444a]"
+				:style="dropdownStyle"
+				:role="listbox ? 'listbox' : 'menu'"
+				@mousedown.stop
+				@keydown="handleDropdownKeydown"
+			>
+				<div v-if="searchable" class="p-4">
+					<div
+						class="flex items-center gap-2 overflow-hidden rounded-xl bg-[#34363c] px-4 py-2.5 outline outline-1 outline-offset-[-1px] outline-[#42444a] focus-within:shadow-[0px_0px_0px_2px_rgba(52,54,60,1.00)] focus-within:shadow-[0px_0px_0px_4px_rgba(27,217,106,1.00)]"
+					>
+						<SearchIcon class="size-5" />
+						<input
+							ref="searchInputRef"
+							v-model="searchQuery"
+							type="text"
+							:placeholder="searchPlaceholder"
+							class="flex-1 bg-transparent text-sm font-medium leading-[18px] text-white placeholder-[#7e868e] !shadow-none !outline-none"
+							@keydown.stop="handleSearchKeydown"
+						/>
+					</div>
+				</div>
+
+				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-[#4b4f59]"></div>
+
+				<div
+					v-if="filteredOptions.length > 0"
+					ref="optionsContainerRef"
+					class="flex flex-col gap-2 overflow-y-auto p-3"
+					:style="{ maxHeight: `${maxHeight}px` }"
+				>
+					<template v-for="(item, index) in filteredOptions" :key="item.key">
+						<div v-if="item.type === 'divider'" class="h-px bg-[#4b4f59]"></div>
+						<component
+							:is="item.type === 'link' ? 'a' : 'button'"
+							v-else
+							:ref="(el: HTMLElement) => setOptionRef(el as HTMLElement, index)"
+							:href="item.type === 'link' ? item.href : undefined"
+							:target="item.type === 'link' ? item.target : undefined"
+							type="button"
+							:role="listbox ? 'option' : 'menuitem'"
+							:aria-selected="listbox && item.value === modelValue"
+							:data-focused="focusedIndex === index"
+							class="flex items-center gap-2.5 rounded-xl bg-transparent px-4 py-3 text-left transition-colors duration-150"
+							:class="[
+								item.class,
+								{
+									'bg-[#42444a]': focusedIndex === index || (listbox && item.value === modelValue),
+									'cursor-not-allowed opacity-50': item.disabled,
+								},
+							]"
+							:disabled="item.disabled"
+							@click="handleOptionClick(item, index)"
+							@mouseenter="focusedIndex = index"
+						>
+							<slot :name="`option-${item.value}`" :item="item">
+								<div class="flex items-center gap-2">
+									<component :is="item.icon" v-if="item.icon" class="h-5 w-5" />
+									<span class="text-base font-semibold leading-tight text-white">
+										{{ item.label }}
+									</span>
+								</div>
+							</slot>
+						</component>
+					</template>
+				</div>
+
+				<div v-else-if="searchQuery" class="p-4 text-center text-sm text-[#7e868e]">
+					No results found
+				</div>
+			</div>
+		</Teleport>
+	</div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { SearchIcon } from '@modrinth/assets'
+import { onClickOutside } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+
+export interface DropdownOption<T> {
+	value: T
+	label: string
+	icon?: any
+	disabled?: boolean
+	class?: string
+	type?: 'button' | 'link' | 'divider'
+	href?: string
+	target?: string
+	action?: () => void
+}
+
+interface Props {
+	modelValue?: T
+	options: (DropdownOption<T> | { type: 'divider' })[]
+	placeholder?: string
+	disabled?: boolean
+	searchable?: boolean
+	searchPlaceholder?: string
+	listbox?: boolean
+	showChevron?: boolean
+	maxHeight?: number
+	displayValue?: string
+	extraPosition?: 'top' | 'bottom'
+	triggerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: 'Select an option',
+	disabled: false,
+	searchable: false,
+	searchPlaceholder: 'Search...',
+	listbox: true,
+	showChevron: true,
+	maxHeight: 300,
+	extraPosition: 'bottom',
+})
+
+const emit = defineEmits<{
+	'update:modelValue': [value: T]
+	select: [option: DropdownOption<T>]
+	open: []
+	close: []
+}>()
+
+const slots = useSlots()
+
+const isOpen = ref(false)
+const searchQuery = ref('')
+const focusedIndex = ref(-1)
+const containerRef = ref<HTMLElement>()
+const triggerRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
+const searchInputRef = ref<HTMLInputElement>()
+const optionsContainerRef = ref<HTMLElement>()
+const optionRefs = ref<(HTMLElement | null)[]>([])
+
+const dropdownStyle = ref({
+	top: '0px',
+	left: '0px',
+	width: '0px',
+})
+
+const triggerClasses = computed(() => {
+	const classes = [props.triggerClass]
+	if (isOpen.value) {
+		if (props.extraPosition === 'bottom' && slots?.extra) {
+			classes.push('!rounded-b-none')
+		} else if (props.extraPosition === 'top' && slots?.extra) {
+			classes.push('!rounded-t-none')
+		}
+	}
+	return classes
+})
+
+const filteredOptions = computed(() => {
+	const opts = props.options.map((opt, index) => ({
+		...opt,
+		key: opt.type === 'divider' ? `divider-${index}` : `option-${(opt as DropdownOption<T>).value}`,
+	}))
+
+	if (!searchQuery.value || !props.searchable) {
+		return opts
+	}
+
+	const query = searchQuery.value.toLowerCase()
+	return opts.filter((opt) => {
+		if (opt.type === 'divider') return false
+		return (opt as DropdownOption<T>).label.toLowerCase().includes(query)
+	})
+})
+
+function setOptionRef(el: HTMLElement | null, index: number) {
+	optionRefs.value[index] = el
+}
+
+async function updateDropdownPosition() {
+	if (!triggerRef.value || !dropdownRef.value) return
+
+	await nextTick()
+
+	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const dropdownRect = dropdownRef.value.getBoundingClientRect()
+	const viewportHeight = window.innerHeight
+	const viewportWidth = window.innerWidth
+	const margin = 8
+
+	let top = triggerRect.bottom
+	let left = triggerRect.left
+
+	if (triggerRect.bottom + dropdownRect.height + margin > viewportHeight) {
+		if (triggerRect.top - dropdownRect.height - margin > 0) {
+			top = triggerRect.top - dropdownRect.height
+		}
+	}
+
+	if (left + dropdownRect.width > viewportWidth - margin) {
+		left = Math.max(margin, viewportWidth - dropdownRect.width - margin)
+	}
+
+	dropdownStyle.value = {
+		top: `${top}px`,
+		left: `${left}px`,
+		width: `${triggerRect.width}px`,
+	}
+}
+
+async function open() {
+	if (props.disabled || isOpen.value) return
+
+	isOpen.value = true
+	searchQuery.value = ''
+	focusedIndex.value = props.listbox
+		? props.options.findIndex((opt) => opt.type !== 'divider' && opt.value === props.modelValue)
+		: -1
+
+	emit('open')
+
+	await nextTick()
+	await updateDropdownPosition()
+
+	if (props.searchable && searchInputRef.value) {
+		searchInputRef.value.focus()
+	}
+}
+
+function close() {
+	if (!isOpen.value) return
+
+	isOpen.value = false
+	searchQuery.value = ''
+	focusedIndex.value = -1
+	emit('close')
+
+	nextTick(() => {
+		triggerRef.value?.focus()
+	})
+}
+
+function handleTriggerClick() {
+	if (isOpen.value) {
+		close()
+	} else {
+		open()
+	}
+}
+
+function handleOptionClick(option: DropdownOption<T>, index: number) {
+	if (option.disabled || option.type === 'divider') return
+
+	focusedIndex.value = index
+
+	if (option.action) {
+		option.action()
+	}
+
+	if (props.listbox && option.value !== undefined) {
+		emit('update:modelValue', option.value)
+	}
+
+	emit('select', option)
+
+	if (option.type !== 'link') {
+		close()
+	}
+}
+
+function focusOption(index: number) {
+	if (index < 0 || index >= filteredOptions.value.length) return
+
+	const option = filteredOptions.value[index]
+	if (option.type === 'divider' || (option as DropdownOption<T>).disabled) return
+
+	focusedIndex.value = index
+	optionRefs.value[index]?.focus()
+	optionRefs.value[index]?.scrollIntoView({ block: 'nearest' })
+}
+
+function focusNextOption() {
+	let nextIndex = focusedIndex.value
+	do {
+		nextIndex = (nextIndex + 1) % filteredOptions.value.length
+	} while (
+		filteredOptions.value[nextIndex].type === 'divider' ||
+		(filteredOptions.value[nextIndex] as DropdownOption<T>).disabled
+	)
+	focusOption(nextIndex)
+}
+
+function focusPreviousOption() {
+	let prevIndex = focusedIndex.value
+	do {
+		prevIndex = (prevIndex - 1 + filteredOptions.value.length) % filteredOptions.value.length
+	} while (
+		filteredOptions.value[prevIndex].type === 'divider' ||
+		(filteredOptions.value[prevIndex] as DropdownOption<T>).disabled
+	)
+	focusOption(prevIndex)
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+	switch (event.key) {
+		case 'Enter':
+		case ' ':
+		case 'ArrowDown':
+			event.preventDefault()
+			open()
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			open()
+			break
+	}
+}
+
+function handleDropdownKeydown(event: KeyboardEvent) {
+	switch (event.key) {
+		case 'Escape':
+			event.preventDefault()
+			close()
+			break
+		case 'ArrowDown':
+			event.preventDefault()
+			focusNextOption()
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			focusPreviousOption()
+			break
+		case 'Enter':
+		case ' ':
+			event.preventDefault()
+			if (focusedIndex.value >= 0) {
+				const option = filteredOptions.value[focusedIndex.value]
+				if (option.type !== 'divider') {
+					handleOptionClick(option as DropdownOption<T>, focusedIndex.value)
+				}
+			}
+			break
+		case 'Tab':
+			event.preventDefault()
+			if (event.shiftKey) {
+				focusPreviousOption()
+			} else {
+				focusNextOption()
+			}
+			break
+	}
+}
+
+function handleSearchKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		close()
+	} else if (event.key === 'ArrowDown') {
+		event.preventDefault()
+		focusNextOption()
+	} else if (event.key === 'ArrowUp') {
+		event.preventDefault()
+		focusPreviousOption()
+	}
+}
+
+function handleResize() {
+	if (isOpen.value) {
+		updateDropdownPosition()
+	}
+}
+
+onClickOutside(
+	dropdownRef,
+	() => {
+		close()
+	},
+	{ ignore: [triggerRef] },
+)
+
+onMounted(() => {
+	window.addEventListener('resize', handleResize)
+	window.addEventListener('scroll', handleResize, true)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize)
+	window.removeEventListener('scroll', handleResize, true)
+})
+
+watch(isOpen, (value) => {
+	if (value) {
+		updateDropdownPosition()
+	}
+})
+</script>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 3a2bdc64b9..ee230110f4 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,6 +1,7 @@
 <template>
 	<CreatorWithdrawModal
 		ref="withdrawModal"
+		:auth="auth"
 		:balance="userBalance"
 		v-model:country="withdrawCountry"
 		:payout-methods="paymentMethods"
@@ -166,6 +167,8 @@ import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal
 // TODO: Deduplicate in @modrinth/api-client PR.
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
 
+const auth = await useAuth()
+
 interface UserBalanceResponse {
 	available: number
 	withdrawn_lifetime: number

From 38ada32b1909731cfba8bbb5a8faba4d8ed20aa8 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 14:45:23 +0100
Subject: [PATCH 28/49] feat: remove teleport dropdown modal in favour of new
 combobox component

---
 .../InstallationSettings.vue                  |  32 ++--
 .../ui/settings/AppearanceSettings.vue        |  11 +-
 .../ui/world/modal/ServerModalBody.vue        |  17 ++-
 apps/frontend/src/components/ui/NavStack.vue  |  10 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     |  84 ++---------
 .../ui/servers/BackupSettingsModal.vue        |  13 +-
 .../ui/servers/ContentVersionEditModal.vue    |  29 ++--
 .../PlatformChangeModpackVersionModal.vue     |  14 +-
 .../ui/servers/PlatformVersionSelectModal.vue |  20 ++-
 .../src/pages/admin/servers/notices.vue       |   8 +-
 .../manage/[id]/options/properties.vue        |   8 +-
 .../servers/manage/[id]/options/startup.vue   |  14 +-
 apps/frontend/tailwind.config.ts              |   9 --
 packages/assets/styles/variables.scss         |  27 ----
 .../ui/src/components/base/Combobox.vue       | 141 +++++++++---------
 packages/ui/src/components/index.ts           |  10 +-
 16 files changed, 182 insertions(+), 265 deletions(-)
 rename apps/frontend/src/components/ui/dashboard/FancyDropdown.vue => packages/ui/src/components/base/Combobox.vue (77%)

diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index 72474057cb..ad69e84e71 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -15,8 +15,8 @@ import {
 	ButtonStyled,
 	Checkbox,
 	Chips,
+	Combobox,
 	injectNotificationManager,
-	TeleportDropdownMenu,
 } from '@modrinth/ui'
 import {
 	formatCategory,
@@ -158,6 +158,21 @@ const selectableGameVersionNumbers = computed(() => {
 		.map((x) => x.version)
 })
 
+const gameVersionOptions = computed(() =>
+	(selectableGameVersionNumbers.value ?? []).map((v) => ({ value: v, label: v })),
+)
+
+const loaderVersionOptions = computed(() =>
+	(selectableLoaderVersions.value ?? []).map((opt, index) => ({ value: index, label: opt.id })),
+)
+
+const loaderVersionLabel = computed(() => {
+	const idx = loaderVersionIndex.value
+	return idx >= 0 && selectableLoaderVersions.value
+		? selectableLoaderVersions.value[idx]?.id
+		: 'Select version'
+})
+
 const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
 	if (gameVersion.value) {
 		if (loader.value === 'fabric') {
@@ -647,11 +662,11 @@ const messages = defineMessages({
 				{{ formatMessage(messages.gameVersion) }}
 			</h2>
 			<div class="flex flex-wrap mt-2 gap-2">
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableGameVersionNumbers !== undefined"
 					v-model="gameVersion"
-					:options="selectableGameVersionNumbers"
-					name="Game Version Dropdown"
+					:options="gameVersionOptions"
+					:display-value="gameVersion || formatMessage(messages.unknownVersion)"
 				/>
 				<Checkbox
 					v-if="hasSnapshots"
@@ -663,14 +678,13 @@ const messages = defineMessages({
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
 					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
 				</h2>
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableLoaderVersions"
-					:model-value="selectableLoaderVersions[loaderVersionIndex]"
-					:options="selectableLoaderVersions"
-					:display-name="(option: ManifestLoaderVersion) => option?.id"
+					v-model="loaderVersionIndex"
+					:options="loaderVersionOptions"
+					:display-value="loaderVersionLabel"
 					name="Version selector"
 					class="mt-2"
-					@change="(value) => (loaderVersionIndex = value.index)"
 				/>
 				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
 					<IssuesIcon />
diff --git a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
index 04473bb8f2..e66b3befa3 100644
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
@@ -50,7 +50,7 @@ watch(
 			:model-value="themeStore.advancedRendering"
 			@update:model-value="
 				(e) => {
-					themeStore.advancedRendering = e
+					themeStore.advancedRendering = !!e
 					settings.advanced_rendering = themeStore.advancedRendering
 				}
 			"
@@ -86,12 +86,13 @@ watch(
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
 			<p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
 		</div>
-		<TeleportDropdownMenu
+		<Combobox
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
 			class="w-40"
-			:options="['Home', 'Library']"
+			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
+			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>
 
@@ -122,7 +123,7 @@ watch(
 			:model-value="settings.toggle_sidebar"
 			@update:model-value="
 				(e) => {
-					settings.toggle_sidebar = e
+					settings.toggle_sidebar = !!e
 					themeStore.toggleSidebar = settings.toggle_sidebar
 				}
 			"
diff --git a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
index 48b6905047..ce8b557ff2 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu } from '@modrinth/ui'
+import { Combobox } from '@modrinth/ui'
 import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
@@ -74,12 +74,19 @@ defineExpose({ resourcePackOptions })
 			{{ formatMessage(messages.resourcePack) }}
 		</h2>
 		<div>
-			<TeleportDropdownMenu
+			<Combobox
 				v-model="resourcePack"
-				:options="resourcePackOptions"
+				:options="
+					resourcePackOptions.map((o) => ({
+						value: o,
+						label: formatMessage(resourcePackOptionMessages[o]),
+					}))
+				"
 				name="Server resource pack"
-				:display-name="
-					(option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+				:display-value="
+					resourcePack
+						? formatMessage(resourcePackOptionMessages[resourcePack])
+						: 'Select an option'
 				"
 			/>
 		</div>
diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index e30e9f7ef1..c568f25163 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -1,13 +1,11 @@
 <template>
 	<nav :aria-label="ariaLabel" class="w-full">
-		<ul
-			class="border-surface-4 bg-surface-1 m-0 flex list-none flex-col items-start gap-1.5 rounded-2xl border border-solid p-4"
-		>
+		<ul class="m-0 flex list-none flex-col items-start gap-1.5 rounded-2xl bg-bg-raised p-4">
 			<slot v-if="hasSlotContent" />
 
 			<template v-else>
 				<li v-for="(item, idx) in items" :key="getKey(item, idx)" class="contents">
-					<hr v-if="isSeparator(item)" class="border-surface-4 my-1 w-full border-t border-solid" />
+					<hr v-if="isSeparator(item)" class="my-1 w-full border-t border-solid" />
 
 					<div
 						v-else-if="isHeading(item)"
@@ -27,7 +25,7 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span>{{ item.label }}</span>
+						<span class="text-contrast">{{ item.label }}</span>
 						<span
 							v-if="item.badge != null"
 							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
@@ -49,7 +47,7 @@
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
-						<span>{{ item.label }}</span>
+						<span class="text-contrast">{{ item.label }}</span>
 						<span
 							v-if="item.badge != null"
 							class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index 301ebb14cd..e55b228bff 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -76,7 +76,7 @@
 						class="my-auto size-4 text-secondary"
 					/>
 				</div>
-				<FancyDropdown
+				<Combobox
 					:listbox="true"
 					:searchable="true"
 					v-model="countryId"
@@ -89,7 +89,7 @@
 					<span>Withdraw to</span><span class="text-brand-red">*</span>
 				</div>
 				<div class="relative">
-					<FancyDropdown
+					<Combobox
 						:listbox="true"
 						v-model="paymentMethodId"
 						class="payment-method-select w-full"
@@ -98,75 +98,7 @@
 						:displayValue="
 							paymentMethod ? formatPaymentMethodName(paymentMethod) : 'Select method...'
 						"
-					>
-						<template #extra>
-							<div v-if="paymentMethod && showPaymentDetails" class="w-full">
-								<div class="flex items-center justify-between text-sm">
-									<span class="text-primary">{{ paymentAccountDisplay }}</span>
-									<button
-										@click="editPaymentMethod"
-										class="flex items-center gap-1 text-primary hover:text-contrast"
-									>
-										<span>Change</span>
-										<EditIcon class="h-4 w-4" />
-									</button>
-								</div>
-							</div>
-
-							<div v-else-if="paymentMethod && isPayPalSelected" class="flex w-full flex-col gap-2">
-								<div class="flex items-center gap-2">
-									<ButtonStyled color="brand">
-										<button @click="verifyPayPal" :disabled="isVerifying">
-											Sign in with PayPal
-										</button>
-									</ButtonStyled>
-									<button
-										v-if="hasLinkedPayPal"
-										class="text-sm text-secondary underline-offset-2 hover:underline"
-										@click="cancelEditingLink"
-									>
-										Cancel
-									</button>
-								</div>
-								<p class="text-xs text-secondary">
-									We'll redirect you to PayPal to connect your account.
-								</p>
-							</div>
-
-							<div v-else-if="paymentMethod && isVenmoSelected" class="flex w-full flex-col gap-2">
-								<label for="venmo-handle" class="text-sm text-primary">Venmo username</label>
-								<input
-									id="venmo-handle"
-									v-model="venmoHandle"
-									type="text"
-									autocomplete="off"
-									placeholder="@username"
-									class="rounded-xl border border-divider bg-button-bg px-3 py-2 text-sm focus:outline-none"
-								/>
-								<div class="flex items-center gap-2">
-									<ButtonStyled color="standard">
-										<button @click="verifyVenmo" :disabled="isVerifying || !venmoHandleValid">
-											Verify
-										</button>
-									</ButtonStyled>
-									<button
-										v-if="hasLinkedVenmo"
-										class="text-sm text-secondary underline-offset-2 hover:underline"
-										@click="cancelEditingLink"
-									>
-										Cancel
-									</button>
-								</div>
-								<p class="text-xs text-secondary">
-									Enter your Venmo username. We'll save it to your account.
-								</p>
-							</div>
-
-							<div v-else class="text-sm text-secondary">
-								Tremendous™️ will contact you with redeem instructions using your Modrinth email.
-							</div>
-						</template>
-					</FancyDropdown>
+					/>
 				</div>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
@@ -250,19 +182,23 @@
 import {
 	CheckIcon,
 	ChevronRightIcon,
-	EditIcon,
 	FileTextIcon,
 	TransferIcon,
 	UnknownIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, NewModal, injectNotificationManager } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	Combobox,
+	NewModal,
+	injectNotificationManager,
+} from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
 import type { CSSProperties } from 'vue'
 import { getAuthUrl } from '~/composables/auth.js'
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
-import FancyDropdown from './FancyDropdown.vue'
 
 const { addNotification, handleError } = injectNotificationManager()
 
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
index b3166d99bb..bbc6911eae 100644
--- a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
@@ -27,13 +27,13 @@
 					</p>
 				</div>
 
-				<TeleportDropdownMenu
+				<Combobox
 					:id="'interval-field'"
 					v-model="backupIntervalsLabel"
 					:disabled="!autoBackupEnabled || isSaving"
 					name="interval"
-					:options="Object.keys(backupIntervals)"
-					placeholder="Backup interval"
+					:options="Object.keys(backupIntervals).map((k) => ({ value: k, label: k }))"
+					:display-value="backupIntervalsLabel"
 				/>
 
 				<div class="mt-4 flex justify-start gap-4">
@@ -57,12 +57,7 @@
 
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	injectNotificationManager,
-	NewModal,
-	TeleportDropdownMenu,
-} from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index f952f11b74..acdec82600 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -60,16 +60,24 @@
 							</NuxtLink>
 						</div>
 					</div>
-					<TeleportDropdownMenu
+					<Combobox
 						v-model="selectedVersion"
 						name="Project"
-						:options="filteredVersions"
-						placeholder="No valid versions found"
+						:options="
+							filteredVersions.map((v) => ({
+								value: v,
+								label: typeof v === 'object' ? v.version_number : String(v),
+							}))
+						"
+						:display-value="
+							selectedVersion
+								? typeof selectedVersion === 'object'
+									? selectedVersion.version_number
+									: String(selectedVersion)
+								: 'No valid versions found'
+						"
 						class="!min-w-full"
 						:disabled="filteredVersions.length === 0"
-						:display-name="
-							(version) => (typeof version === 'object' ? version?.version_number : version)
-						"
 					/>
 					<Checkbox v-model="showBetaAlphaReleases"> Show any beta and alpha releases </Checkbox>
 				</template>
@@ -237,14 +245,7 @@ import {
 	LockOpenIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	CopyCode,
-	NewModal,
-	TeleportDropdownMenu,
-} from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Combobox, CopyCode, NewModal } from '@modrinth/ui'
 import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
index 87cf2c6e58..0b31fce762 100644
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -17,10 +17,11 @@
 			</div>
 
 			<div class="flex w-full flex-col gap-4">
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="props.versions?.length"
 					v-model="selectedVersion"
-					:options="versionOptions"
+					:options="versionOptions.map((v) => ({ value: v, label: v }))"
+					:display-value="selectedVersion || 'Select version...'"
 					placeholder="Select version..."
 					name="version"
 					class="w-full max-w-full"
@@ -68,12 +69,7 @@
 
 <script setup lang="ts">
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	injectNotificationManager,
-	NewModal,
-	TeleportDropdownMenu,
-} from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -96,7 +92,7 @@ const emit = defineEmits<{
 const modal = ref()
 const hardReset = ref(false)
 const isLoading = ref(false)
-const selectedVersion = ref('')
+const selectedVersion = ref(props.currentVersion?.version_number || '')
 
 const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || [])
 
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
index ebbab8e02b..95f10596c6 100644
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -54,11 +54,12 @@
 
 				<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
 					<div class="text-lg font-bold text-contrast">Minecraft version</div>
-					<TeleportDropdownMenu
+					<Combobox
 						v-model="selectedMCVersion"
 						name="mcVersion"
-						:options="mcVersions"
-						class="w-full max-w-[100%]"
+						:options="mcVersions.map((v) => ({ value: v, label: v }))"
+						:display-value="selectedMCVersion || 'Select Minecraft version...'"
+						class="!w-full"
 						placeholder="Select Minecraft version..."
 					/>
 					<div class="mt-2 flex items-center justify-between gap-2">
@@ -108,10 +109,17 @@
 							</div>
 						</template>
 						<template v-else-if="selectedLoaderVersions.length > 0">
-							<TeleportDropdownMenu
+							<Combobox
 								v-model="selectedLoaderVersion"
 								name="loaderVersion"
-								:options="selectedLoaderVersions"
+								:options="selectedLoaderVersions.map((v) => ({ value: v, label: v }))"
+								:display-value="
+									selectedLoaderVersion ||
+									(selectedLoader.toLowerCase() === 'paper' ||
+									selectedLoader.toLowerCase() === 'purpur'
+										? 'Select build number...'
+										: 'Select loader version...')
+								"
 								class="w-full max-w-[100%]"
 								:placeholder="
 									selectedLoader.toLowerCase() === 'paper' ||
@@ -201,9 +209,9 @@ import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from '@modrinth/asset
 import {
 	BackupWarning,
 	ButtonStyled,
+	Combobox,
 	injectNotificationManager,
 	NewModal,
-	TeleportDropdownMenu,
 	Toggle,
 } from '@modrinth/ui'
 import { type Loaders, ModrinthServersFetchError } from '@modrinth/utils'
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index b9bc34df5d..bc22a53dea 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -11,12 +11,12 @@
 					<span class="text-lg font-semibold text-contrast"> Level </span>
 					<span>Determines how the notice should be styled.</span>
 				</label>
-				<TeleportDropdownMenu
+				<Combobox
 					id="level-selector"
 					v-model="newNoticeLevel"
 					class="max-w-[10rem]"
-					:options="levelOptions"
-					:display-name="(x) => formatMessage(x.name)"
+					:options="levelOptions.map((x) => ({ value: x, label: formatMessage(x.name) }))"
+					:display-value="newNoticeLevel ? formatMessage(newNoticeLevel.name) : 'Select level'"
 					name="Level"
 				/>
 			</div>
@@ -264,13 +264,13 @@
 import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
+	Combobox,
 	commonMessages,
 	CopyCode,
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
 	TagItem,
-	TeleportDropdownMenu,
 	Toggle,
 	useRelativeTime,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
index f0c59b2e80..56680b7b63 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -77,13 +77,13 @@
 							v-if="overrides[index] && overrides[index].type === 'dropdown'"
 							class="mt-2 flex w-full sm:w-[320px] sm:justify-end"
 						>
-							<TeleportDropdownMenu
+							<Combobox
 								:id="`server-property-${index}`"
 								v-model="liveProperties[index]"
 								:name="formatPropertyName(index)"
-								:options="overrides[index].options || []"
+								:options="(overrides[index].options || []).map((v) => ({ value: v, label: v }))"
 								:aria-labelledby="`property-label-${index}`"
-								placeholder="Select..."
+								:display-value="String(liveProperties[index] ?? 'Select...')"
 							/>
 						</div>
 						<div v-else-if="typeof property === 'boolean'" class="flex justify-end">
@@ -144,7 +144,7 @@
 
 <script setup lang="ts">
 import { EyeIcon, IssuesIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, TeleportDropdownMenu } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
index f1fbcc27ce..de33503506 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -77,12 +77,12 @@
 							/>
 							<label for="show-all-versions" class="text-sm">Show all Java versions</label>
 						</div>
-						<TeleportDropdownMenu
+						<Combobox
 							:id="'java-version-field'"
 							v-model="jdkVersion"
 							name="java-version"
-							:options="displayedJavaVersions"
-							placeholder="Java Version"
+							:options="displayedJavaVersions.map((v) => ({ value: v, label: v }))"
+							:display-value="jdkVersion ?? 'Java Version'"
 						/>
 					</div>
 					<div class="flex flex-col gap-4">
@@ -90,12 +90,12 @@
 							<span class="text-lg font-bold text-contrast">Runtime</span>
 							<span> The Java runtime your server will use. </span>
 						</div>
-						<TeleportDropdownMenu
+						<Combobox
 							:id="'runtime-field'"
 							v-model="jdkBuild"
 							name="runtime"
-							:options="['Corretto', 'Temurin', 'GraalVM']"
-							placeholder="Runtime"
+							:options="['Corretto', 'Temurin', 'GraalVM'].map((v) => ({ value: v, label: v }))"
+							:display-value="jdkBuild ?? 'Runtime'"
 						/>
 					</div>
 				</div>
@@ -113,7 +113,7 @@
 
 <script setup lang="ts">
 import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, TeleportDropdownMenu } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 11260ad361..4d20856f88 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -23,15 +23,6 @@ const config: Config = {
 				dark: 'var(--color-text-dark)',
 				inverted: 'var(--color-text-inverted)',
 				heading: 'var(--color-heading)',
-				surface: {
-					DEFAULT: 'var(--color-surface)',
-					0: 'var(--color-surface-0)',
-					1: 'var(--color-surface-1)',
-					2: 'var(--color-surface-2)',
-					3: 'var(--color-surface-3)',
-					4: 'var(--color-surface-4)',
-					5: 'var(--color-surface-5)',
-				},
 				red: {
 					DEFAULT: 'var(--color-red)',
 					50: 'var(--color-red-50)',
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 93f2915f55..6664b900c7 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -14,18 +14,6 @@
 	--color-contrast: #1a202c;
 	--color-accent-contrast: #ffffff;
 
-	// #region New Standards
-
-	// TODO: Light mode surface colors
-	--color-surface: var(--color-surface-1);
-	--color-surface-0: #16181c;
-	--color-surface-1: #27292e;
-	--color-surface-2: #1d1f23;
-	--color-surface-3: #34363c;
-	--color-surface-4: #42444a;
-	// TODO: Impl surface-5
-	--color-surface-5: #42444a;
-
 	--color-red-50: #fef2f2;
 	--color-red-100: #fee5e7;
 	--color-red-200: #fccfd3;
@@ -104,8 +92,6 @@
 	--color-gray-950: #252627;
 	--color-gray: var(--color-gray-600);
 
-	// #endregion
-
 	--color-red-highlight: rgba(203, 34, 69, 0.25);
 	--color-orange-highlight: rgba(224, 131, 37, 0.25);
 	--color-green-highlight: rgba(0, 175, 92, 0.25);
@@ -233,17 +219,6 @@ html {
 	--color-contrast: var(--dark-color-contrast);
 	--color-accent-contrast: #000000;
 
-	// #region New Standards
-
-	--color-surface: var(--color-surface-1);
-	--color-surface-0: #16181c;
-	--color-surface-1: #27292e;
-	--color-surface-2: #1d1f23;
-	--color-surface-3: #34363c;
-	--color-surface-4: #42444a;
-	// TODO: Impl surface-5
-	--color-surface-5: #42444a;
-
 	--color-red-50: #fff0f1;
 	--color-red-100: #ffe2e6;
 	--color-red-200: #ffcad3;
@@ -322,8 +297,6 @@ html {
 	--color-gray-950: #303136;
 	--color-gray: var(--color-gray-500);
 
-	// #endregion
-
 	--color-red-highlight: rgba(255, 73, 110, 0.25);
 	--color-orange-highlight: rgba(255, 163, 71, 0.25);
 	--color-green-highlight: rgba(27, 217, 106, 0.25);
diff --git a/apps/frontend/src/components/ui/dashboard/FancyDropdown.vue b/packages/ui/src/components/base/Combobox.vue
similarity index 77%
rename from apps/frontend/src/components/ui/dashboard/FancyDropdown.vue
rename to packages/ui/src/components/base/Combobox.vue
index c0340530dd..fbcacd180f 100644
--- a/apps/frontend/src/components/ui/dashboard/FancyDropdown.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -1,26 +1,15 @@
 <template>
-	<div ref="containerRef" class="relative inline-block w-full max-w-[496px]">
-		<div
-			v-if="$slots.extra && isOpen"
-			class="absolute left-0 right-0 z-[9998] px-4 pb-2.5 pt-10"
-			:class="extraPosition === 'top' ? 'bottom-full' : 'top-full'"
-		>
-			<div
-				class="flex items-end justify-between rounded-b-xl bg-[#1d1f23] px-4 py-2.5"
-				@mousedown.stop
-			>
-				<slot name="extra"></slot>
-			</div>
-		</div>
-
-		<button
+	<div ref="containerRef" class="relative inline-block w-full">
+		<span
 			ref="triggerRef"
 			type="button"
-			class="relative flex h-11 w-full items-center justify-between overflow-hidden rounded-xl bg-[#34363c] px-4 py-2.5 text-left outline outline-1 outline-offset-[-1px] outline-[#42444a] transition-all duration-200"
+			class="relative cursor-pointer flex h-11 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left outline outline-1 outline-offset-[-1px] outline-button-border transition-all duration-200"
 			:class="[
 				triggerClasses,
 				{
-					'z-[9999] rounded-b-none': isOpen,
+					'z-[9999]': isOpen,
+					'rounded-b-none': isOpen && openDirection === 'down',
+					'rounded-t-none': isOpen && openDirection === 'up',
 					'cursor-not-allowed opacity-50': disabled,
 				},
 			]"
@@ -32,38 +21,26 @@
 		>
 			<div class="flex items-center gap-2">
 				<slot name="prefix"></slot>
-				<span class="text-base font-semibold leading-tight text-white">
-					<slot name="selected">{{ displayValue }}</slot>
+				<span class="text-base font-semibold leading-tight text-contrast">
+					<slot name="selected">{{ triggerText }}</slot>
 				</span>
 			</div>
 			<div class="flex items-center gap-1">
 				<slot name="suffix"></slot>
-				<svg
+				<ChevronLeftIcon
 					v-if="showChevron"
-					width="20"
-					height="20"
-					viewBox="0 0 20 20"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-					class="transition-transform duration-200"
-					:class="{ 'rotate-180': isOpen }"
-				>
-					<path
-						d="M5 7.5L10 12.5L15 7.5"
-						stroke="#B0BAC5"
-						stroke-width="1.5"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
+					class="size-5 shrink-0 rotate-90 transition-transform duration-200"
+					:class="{ '-rotate-90': isOpen }"
+				/>
 			</div>
-		</button>
+		</span>
 
 		<Teleport to="#teleports">
 			<div
 				v-if="isOpen"
 				ref="dropdownRef"
-				class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] rounded-t-none bg-[#34363c] outline outline-1 outline-offset-[-1px] outline-[#42444a]"
+				class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-button-bg outline outline-1 outline-offset-[-1px] outline-button-border"
+				:class="openDirection === 'down' ? 'rounded-t-none' : 'rounded-b-none'"
 				:style="dropdownStyle"
 				:role="listbox ? 'listbox' : 'menu'"
 				@mousedown.stop
@@ -71,7 +48,7 @@
 			>
 				<div v-if="searchable" class="p-4">
 					<div
-						class="flex items-center gap-2 overflow-hidden rounded-xl bg-[#34363c] px-4 py-2.5 outline outline-1 outline-offset-[-1px] outline-[#42444a] focus-within:shadow-[0px_0px_0px_2px_rgba(52,54,60,1.00)] focus-within:shadow-[0px_0px_0px_4px_rgba(27,217,106,1.00)]"
+						class="flex items-center gap-2 overflow-hidden rounded-xl bg-bg-raised px-4 py-2.5 outline outline-1 outline-offset-[-1px] outline-button-border focus-within:shadow-[0px_0px_0px_2px_rgba(52,54,60,1.00)]"
 					>
 						<SearchIcon class="size-5" />
 						<input
@@ -79,13 +56,13 @@
 							v-model="searchQuery"
 							type="text"
 							:placeholder="searchPlaceholder"
-							class="flex-1 bg-transparent text-sm font-medium leading-[18px] text-white placeholder-[#7e868e] !shadow-none !outline-none"
+							class="flex-1 !bg-bg-raised text-sm font-medium leading-[18px] text-contrast placeholder-secondary !shadow-none !outline-none"
 							@keydown.stop="handleSearchKeydown"
 						/>
 					</div>
 				</div>
 
-				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-[#4b4f59]"></div>
+				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-button-bg"></div>
 
 				<div
 					v-if="filteredOptions.length > 0"
@@ -94,9 +71,9 @@
 					:style="{ maxHeight: `${maxHeight}px` }"
 				>
 					<template v-for="(item, index) in filteredOptions" :key="item.key">
-						<div v-if="item.type === 'divider'" class="h-px bg-[#4b4f59]"></div>
+						<div v-if="item.type === 'divider'" class="h-px bg-button-border"></div>
 						<component
-							:is="item.type === 'link' ? 'a' : 'button'"
+							:is="item.type === 'link' ? 'a' : 'span'"
 							v-else
 							:ref="(el: HTMLElement) => setOptionRef(el as HTMLElement, index)"
 							:href="item.type === 'link' ? item.href : undefined"
@@ -105,7 +82,7 @@
 							:role="listbox ? 'option' : 'menuitem'"
 							:aria-selected="listbox && item.value === modelValue"
 							:data-focused="focusedIndex === index"
-							class="flex items-center gap-2.5 rounded-xl bg-transparent px-4 py-3 text-left transition-colors duration-150"
+							class="flex items-center gap-2.5 cursor-pointer rounded-xl bg-transparent px-4 py-3 text-left transition-colors duration-150"
 							:class="[
 								item.class,
 								{
@@ -120,7 +97,7 @@
 							<slot :name="`option-${item.value}`" :item="item">
 								<div class="flex items-center gap-2">
 									<component :is="item.icon" v-if="item.icon" class="h-5 w-5" />
-									<span class="text-base font-semibold leading-tight text-white">
+									<span class="text-base font-semibold leading-tight text-contrast">
 										{{ item.label }}
 									</span>
 								</div>
@@ -129,7 +106,7 @@
 					</template>
 				</div>
 
-				<div v-else-if="searchQuery" class="p-4 text-center text-sm text-[#7e868e]">
+				<div v-else-if="searchQuery" class="p-4 text-center text-sm text-secondary">
 					No results found
 				</div>
 			</div>
@@ -138,7 +115,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { SearchIcon } from '@modrinth/assets'
+import { ChevronLeftIcon, SearchIcon } from '@modrinth/assets'
 import { onClickOutside } from '@vueuse/core'
 import { computed, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 
@@ -154,31 +131,32 @@ export interface DropdownOption<T> {
 	action?: () => void
 }
 
-interface Props {
-	modelValue?: T
-	options: (DropdownOption<T> | { type: 'divider' })[]
-	placeholder?: string
-	disabled?: boolean
-	searchable?: boolean
-	searchPlaceholder?: string
-	listbox?: boolean
-	showChevron?: boolean
-	maxHeight?: number
-	displayValue?: string
-	extraPosition?: 'top' | 'bottom'
-	triggerClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	placeholder: 'Select an option',
-	disabled: false,
-	searchable: false,
-	searchPlaceholder: 'Search...',
-	listbox: true,
-	showChevron: true,
-	maxHeight: 300,
-	extraPosition: 'bottom',
-})
+const props = withDefaults(
+	defineProps<{
+		modelValue?: T
+		options: (DropdownOption<T> | { type: 'divider' })[]
+		placeholder?: string
+		disabled?: boolean
+		searchable?: boolean
+		searchPlaceholder?: string
+		listbox?: boolean
+		showChevron?: boolean
+		maxHeight?: number
+		displayValue?: string
+		extraPosition?: 'top' | 'bottom'
+		triggerClass?: string
+	}>(),
+	{
+		placeholder: 'Select an option',
+		disabled: false,
+		searchable: false,
+		searchPlaceholder: 'Search...',
+		listbox: true,
+		showChevron: true,
+		maxHeight: 300,
+		extraPosition: 'bottom',
+	},
+)
 
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
@@ -205,6 +183,8 @@ const dropdownStyle = ref({
 	width: '0px',
 })
 
+const openDirection = ref<'down' | 'up'>('down')
+
 const triggerClasses = computed(() => {
 	const classes = [props.triggerClass]
 	if (isOpen.value) {
@@ -217,6 +197,19 @@ const triggerClasses = computed(() => {
 	return classes
 })
 
+const selectedOption = computed<DropdownOption<T> | undefined>(() => {
+	return props.options.find(
+		(opt) =>
+			(opt as any).type !== 'divider' && (opt as DropdownOption<T>).value === props.modelValue,
+	) as DropdownOption<T> | undefined
+})
+
+const triggerText = computed(() => {
+	if (props.displayValue !== undefined) return props.displayValue
+	if (selectedOption.value) return selectedOption.value.label
+	return props.placeholder
+})
+
 const filteredOptions = computed(() => {
 	const opts = props.options.map((opt, index) => ({
 		...opt,
@@ -251,10 +244,12 @@ async function updateDropdownPosition() {
 
 	let top = triggerRect.bottom
 	let left = triggerRect.left
+	let opensUp = false
 
 	if (triggerRect.bottom + dropdownRect.height + margin > viewportHeight) {
 		if (triggerRect.top - dropdownRect.height - margin > 0) {
 			top = triggerRect.top - dropdownRect.height
+			opensUp = true
 		}
 	}
 
@@ -267,6 +262,8 @@ async function updateDropdownPosition() {
 		left: `${left}px`,
 		width: `${triggerRect.width}px`,
 	}
+
+	openDirection.value = opensUp ? 'up' : 'down'
 }
 
 async function open() {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 61268afba3..b1ee194a2e 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -11,6 +11,7 @@ export { default as Checkbox } from './base/Checkbox.vue'
 export { default as Chips } from './base/Chips.vue'
 export { default as Collapsible } from './base/Collapsible.vue'
 export { default as CollapsibleRegion } from './base/CollapsibleRegion.vue'
+export { default as Combobox } from './base/Combobox.vue'
 export { default as ContentPageHeader } from './base/ContentPageHeader.vue'
 export { default as CopyCode } from './base/CopyCode.vue'
 export { default as DoubleIcon } from './base/DoubleIcon.vue'
@@ -19,16 +20,16 @@ export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
 export { default as ErrorInformationCard } from './base/ErrorInformationCard.vue'
 export { default as FileInput } from './base/FileInput.vue'
-export type { FilterBarOption } from './base/FilterBar.vue'
 export { default as FilterBar } from './base/FilterBar.vue'
+export type { FilterBarOption } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as IconSelect } from './base/IconSelect.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
 export { default as OptionGroup } from './base/OptionGroup.vue'
-export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
 export { default as OverflowMenu } from './base/OverflowMenu.vue'
+export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
 export { default as Page } from './base/Page.vue'
 export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
@@ -45,7 +46,6 @@ export { default as Slider } from './base/Slider.vue'
 export { default as SmartClickable } from './base/SmartClickable.vue'
 export { default as StatItem } from './base/StatItem.vue'
 export { default as TagItem } from './base/TagItem.vue'
-export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
 export { default as Timeline } from './base/Timeline.vue'
 export { default as Toggle } from './base/Toggle.vue'
 export { default as UnsavedChangesPopup } from './base/UnsavedChangesPopup.vue'
@@ -63,16 +63,16 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 
 // Content
 export { default as ContentListPanel } from './content/ContentListPanel.vue'
-export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
 export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
+export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
 
 // Modals
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as NewModal } from './modal/NewModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
-export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
 export { default as TabbedModal } from './modal/TabbedModal.vue'
+export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
 
 // Navigation
 export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'

From c4c3a578752a475ae58f5a15cc9c498aae47e398 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 15:07:19 +0100
Subject: [PATCH 29/49] fix: lint

---
 apps/frontend/src/components/ui/NavStack.vue   |  6 +++---
 .../ui/dashboard/CreatorTaxFormModal.vue       |  2 +-
 .../ui/dashboard/CreatorWithdrawModal.vue      | 18 ++++++++++--------
 apps/frontend/src/pages/dashboard.vue          |  2 +-
 .../src/pages/dashboard/revenue/index.vue      |  9 +++++----
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index c568f25163..bf67b771be 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -20,8 +20,8 @@
 						class="nav-item inline-flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
 					>
 						<component
-							v-if="item.icon"
 							:is="item.icon"
+							v-if="item.icon"
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
@@ -42,8 +42,8 @@
 						@click="item.action"
 					>
 						<component
-							v-if="item.icon"
 							:is="item.icon"
+							v-if="item.icon"
 							aria-hidden="true"
 							class="h-5 w-5 shrink-0"
 						/>
@@ -65,7 +65,7 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, useSlots, type Component } from 'vue'
+import { type Component,computed, useSlots } from 'vue'
 
 type NavStackBaseItem = {
 	label: string
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 772d9d005d..5c6667cfa5 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -2,8 +2,8 @@
 	<NewModal
 		ref="taxFormModal"
 		header="Submitting tax form"
-		@on-hide="emit('onHide')"
 		:closable="false"
+		@on-hide="emit('onHide')"
 	>
 		<div class="max-w-[40rem]">
 			<Admonition
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index e55b228bff..dc643166b5 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -5,7 +5,7 @@
 		:noblur="true"
 		:closable="currentStage !== 'confirmation'"
 		:merge-header="!currentStageLabel"
-		@onHide="currentStage = undefined"
+		@on-hide="currentStage = undefined"
 	>
 		<div class="flex w-full flex-col gap-4 sm:w-[540px]">
 			<template v-if="currentStage === 'withdraw-limit'">
@@ -29,7 +29,7 @@
 						To withdraw your full <b>{{ formatMoney(balance?.available) }}</b> available balance
 						please complete the form below. It is required for tax reporting and only needs to be
 						done once.
-						<template v-slot:icon="{ iconClass }">
+						<template #icon="{ iconClass }">
 							<FileTextIcon :class="iconClass" />
 						</template>
 						<template #actions>
@@ -55,7 +55,7 @@
 						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
 					</ButtonStyled>
 					<ButtonStyled color="standard">
-						<button @click="currentStage = 'withdraw-details'" :disabled="remainingLimit <= 0">
+						<button :disabled="remainingLimit <= 0" @click="currentStage = 'withdraw-details'">
 							Continue with limit<ChevronRightIcon />
 						</button>
 					</ButtonStyled>
@@ -77,12 +77,12 @@
 					/>
 				</div>
 				<Combobox
+					v-model="countryId"
 					:listbox="true"
 					:searchable="true"
-					v-model="countryId"
 					:options="countryOptions"
 					placeholder="Select country..."
-					:displayValue="countryProxy?.name ?? 'Select country...'"
+					:display-value="countryProxy?.name ?? 'Select country...'"
 				/>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
@@ -90,12 +90,12 @@
 				</div>
 				<div class="relative">
 					<Combobox
-						:listbox="true"
 						v-model="paymentMethodId"
+						:listbox="true"
 						class="payment-method-select w-full"
 						:options="paymentMethodOptions"
 						placeholder="Select method..."
-						:displayValue="
+						:display-value="
 							paymentMethod ? formatPaymentMethodName(paymentMethod) : 'Select method...'
 						"
 					/>
@@ -191,13 +191,15 @@ import {
 	Admonition,
 	ButtonStyled,
 	Combobox,
-	NewModal,
 	injectNotificationManager,
+	NewModal,
 } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
 import type { CSSProperties } from 'vue'
+
 import { getAuthUrl } from '~/composables/auth.js'
+
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
 const { addNotification, handleError } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 06b99032fe..69fb215d4c 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -26,12 +26,12 @@
 </template>
 <script setup>
 import {
+	BellIcon as NotificationsIcon,
 	ChartIcon,
 	CurrencyIcon,
 	DashboardIcon,
 	LibraryIcon,
 	ListIcon,
-	BellIcon as NotificationsIcon,
 	OrganizationIcon,
 	ReportIcon,
 } from '@modrinth/assets'
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index ee230110f4..3ed74874c8 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -1,9 +1,9 @@
 <template>
 	<CreatorWithdrawModal
 		ref="withdrawModal"
+		v-model:country="withdrawCountry"
 		:auth="auth"
 		:balance="userBalance"
-		v-model:country="withdrawCountry"
 		:payout-methods="paymentMethods"
 		:payout-methods-pending="payoutMethodsPending"
 	/>
@@ -37,9 +37,9 @@
 					<span class="text-md font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
 				</div>
 				<div
-					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 					v-for="date in dateSegments"
 					:key="date.date"
+					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
 					<span class="text-md flex flex-row gap-2 align-middle"
 						><span
@@ -89,8 +89,8 @@
 			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
 				<button
-					@click="openWithdrawModal"
 					class="flex flex-col rounded-2xl bg-brand p-5 text-inverted shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
+					@click="openWithdrawModal"
 				>
 					<div class="flex flex-row justify-between">
 						<span class="text-lg font-semibold">Withdraw</span>
@@ -117,7 +117,7 @@
 				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
 			>
 		</div>
-		<div class="flex flex-col gap-4" v-if="sortedPayouts.length > 0">
+		<div v-if="sortedPayouts.length > 0" class="flex flex-col gap-4">
 			<div class="flex flex-row justify-between">
 				<span class="text-3xl font-semibold text-contrast">Transactions</span>
 				<nuxt-link
@@ -162,6 +162,7 @@ import {
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import { all } from 'iso-3166-1'
+
 import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal.vue'
 
 // TODO: Deduplicate in @modrinth/api-client PR.

From c1a9f8e0d71d760e70d16d7b56f911dfe500a7de Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 15:11:34 +0100
Subject: [PATCH 30/49] refactor: dashboard sidebar layout

---
 apps/frontend/src/pages/dashboard.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 69fb215d4c..d962545010 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -3,18 +3,19 @@
 		<div class="normal-page__sidebar">
 			<NavStack
 				:items="[
+					{ type: 'heading', label: 'Dashboard' },
 					{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
 					{ link: '/dashboard/notifications', label: 'Notifications', icon: NotificationsIcon },
 					{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
-					{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
-					{ type: 'separator' },
-					{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
-					{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
 					{
 						link: '/dashboard/collections',
 						label: formatMessage(commonMessages.collectionsLabel),
 						icon: LibraryIcon,
 					},
+					{ type: 'heading', label: 'Creators' },
+					{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
+					{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
+					{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
 					{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon },
 				]"
 			/>
@@ -26,12 +27,12 @@
 </template>
 <script setup>
 import {
-	BellIcon as NotificationsIcon,
 	ChartIcon,
 	CurrencyIcon,
 	DashboardIcon,
 	LibraryIcon,
 	ListIcon,
+	BellIcon as NotificationsIcon,
 	OrganizationIcon,
 	ReportIcon,
 } from '@modrinth/assets'

From 2efdf214bd696a511b49713938c6fe051d580cb2 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 17:27:51 +0100
Subject: [PATCH 31/49] feat: cleanup

---
 apps/frontend/src/components/ui/NavStack.vue  |   5 +-
 .../ui/dashboard/CreatorTaxFormModal.vue      |  41 ++-
 .../ui/dashboard/CreatorWithdrawModal.vue     | 296 +++---------------
 .../src/pages/dashboard/revenue/index.vue     | 108 +++++--
 4 files changed, 155 insertions(+), 295 deletions(-)

diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index bf67b771be..5d7c50d744 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -65,7 +65,7 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { type Component,computed, useSlots } from 'vue'
+import { type Component, computed, useSlots } from 'vue'
 
 type NavStackBaseItem = {
 	label: string
@@ -124,4 +124,7 @@ li {
 	background: var(--color-button-bg-selected);
 	color: var(--color-button-text-selected);
 }
+.router-link-exact-active.nav-item .text-contrast {
+	color: var(--color-button-text-selected);
+}
 </style>
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 5c6667cfa5..50c9d575ae 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -1,10 +1,5 @@
 <template>
-	<NewModal
-		ref="taxFormModal"
-		header="Submitting tax form"
-		:closable="false"
-		@on-hide="emit('onHide')"
-	>
+	<NewModal ref="taxFormModal" header="Submitting tax form" :closable="false">
 		<div class="max-w-[40rem]">
 			<Admonition
 				type="info"
@@ -66,8 +61,8 @@
 				</div>
 			</Transition>
 			<div class="mt-4 flex w-full flex-row justify-between gap-2">
-				<ButtonStyled @click="emit('close')">
-					<button @click="hideModal"><XIcon /> Cancel</button>
+				<ButtonStyled @click="handleCancel">
+					<button><XIcon /> Cancel</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
 					<button :disabled="!canContinue || loading" @click="continueForm">
@@ -90,15 +85,20 @@ const { addNotification } = injectNotificationManager()
 
 const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
 const auth = await useAuth()
-console.log(auth.value.user)
 
 const isUSCitizen = ref<'yes' | 'no' | null>(null)
 const entityType = ref<'private-individual' | 'foreign-entity' | null>(null)
 
 function hideModal() {
+	manualLoading.value = false
 	taxFormModal.value?.hide()
 }
 
+function handleCancel() {
+	emit('cancelled')
+	hideModal()
+}
+
 const determinedFormType = computed(() => {
 	if (isUSCitizen.value === 'yes') {
 		return 'W-9'
@@ -128,19 +128,24 @@ defineExpose({
 })
 
 const emit = defineEmits<{
-	(event: 'onHide'): void
-	(event: 'close'): void
+	(event: 'success'): void
+	(event: 'cancelled'): void
 }>()
 
 const avalaraState = ref<ReturnType<typeof useAvalara1099> | null>(null)
-const loading = computed(() =>
-	avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false,
+const manualLoading = ref(false)
+const loading = computed(
+	() =>
+		manualLoading.value ||
+		(avalaraState.value ? ((avalaraState.value as any).loading?.value ?? false) : false),
 )
 
 async function continueForm() {
 	if (!import.meta.client) return
 	if (!determinedFormType.value) return
 
+	manualLoading.value = true
+
 	const response = (await useBaseFetch('payout/compliance', {
 		apiVersion: 3,
 		method: 'POST',
@@ -162,8 +167,13 @@ async function continueForm() {
 		if (avalaraState.value) {
 			await avalaraState.value.start()
 			if (avalaraState.value.status === 'signed') {
+				addNotification({
+					title: 'Tax form submitted',
+					text: 'You can now withdraw your full balance.',
+					type: 'success',
+				})
+				emit('success')
 				hideModal()
-				emit('close')
 				return
 			}
 
@@ -180,6 +190,9 @@ async function continueForm() {
 			text: error instanceof Error ? error.message : String(error),
 			type: 'error',
 		})
+	} finally {
+		// Clear manual spinner when control returns to the app
+		manualLoading.value = false
 	}
 }
 
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index dc643166b5..afad729a27 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -33,7 +33,7 @@
 							<FileTextIcon :class="iconClass" />
 						</template>
 						<template #actions>
-							<ButtonStyled color="blue">
+							<ButtonStyled color="orange">
 								<button @click="showTaxFormModal">Complete tax form</button>
 							</ButtonStyled>
 						</template>
@@ -44,21 +44,19 @@
 						You've used up your <b>{{ formatMoney(600) }}</b> withdrawal limit. You must complete a
 						tax form to withdraw more.
 					</span>
-					<div class="ml-auto">
-						<ButtonStyled color="blue">
-							<button @click="showTaxFormModal"><FileTextIcon />Complete tax form</button>
-						</ButtonStyled>
-					</div>
 				</template>
-				<div class="mt-2 flex gap-3">
+				<div class="ml-auto flex gap-3">
 					<ButtonStyled color="standard">
 						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
 					</ButtonStyled>
-					<ButtonStyled color="standard">
-						<button :disabled="remainingLimit <= 0" @click="currentStage = 'withdraw-details'">
-							Continue with limit<ChevronRightIcon />
+					<ButtonStyled v-if="remainingLimit > 0" color="standard">
+						<button @click="currentStage = 'withdraw-details'">
+							Continue with limit <ChevronRightIcon />
 						</button>
 					</ButtonStyled>
+					<ButtonStyled v-else color="orange">
+						<button @click="showTaxFormModal">Complete tax form <ChevronRightIcon /></button>
+					</ButtonStyled>
 				</div>
 			</template>
 
@@ -116,7 +114,7 @@
 						class="flex-1 rounded-l-xl border-y border-l border-divider bg-button-bg px-4 py-2.5 placeholder-secondary focus:outline-none"
 					/>
 					<ButtonStyled color="standard" class="rounded-l-none">
-						<button @click="withdrawAmount = maxWithdrawAmount.toString()">Max</button>
+						<button @click="withdrawAmount = maxWithdrawAmount.toFixed(2)">Max</button>
 					</ButtonStyled>
 				</div>
 
@@ -136,57 +134,18 @@
 				</div>
 			</template>
 
-			<template v-if="currentStage === 'confirmation'">
-				<div class="relative flex min-h-[400px] flex-col items-center justify-center">
-					<!-- Animated background particles -->
-					<div class="absolute inset-0 overflow-hidden opacity-70">
-						<div v-for="i in 20" :key="i" class="particle" :style="getParticleStyle(i)"></div>
-					</div>
-
-					<!-- Success content -->
-					<div class="relative z-10 flex flex-col items-center gap-6">
-						<div class="relative flex h-28 w-28 items-center justify-center">
-							<div class="bg-green/10 absolute inset-0 rounded-full"></div>
-							<div
-								class="h-22 w-22 to-green-dark border-green-dark flex items-center justify-center rounded-full border bg-gradient-to-b from-green"
-							>
-								<CheckIcon class="h-14 w-14 text-white" />
-							</div>
-						</div>
-
-						<div class="flex flex-col items-center gap-3 text-center">
-							<h2 class="text-3xl font-semibold text-contrast">Withdraw Complete</h2>
-							<p class="text-secondary">
-								You have successfully withdrawn <b>{{ formatMoney(parsedWithdrawAmount) }}</b> from
-								your Modrinth Balance to {{ formatPaymentMethodName(paymentMethod) }}.
-							</p>
-						</div>
-					</div>
-				</div>
-
-				<div class="mt-6 flex gap-3">
-					<ButtonStyled color="standard" class="flex-1">
-						<button @click="goToPayouts">Payouts</button>
-					</ButtonStyled>
-					<ButtonStyled color="standard" class="flex-1">
-						<button @click="goToTransactions">Transactions</button>
-					</ButtonStyled>
-				</div>
-			</template>
+			<template v-if="currentStage === 'confirmation'"> </template>
 		</div>
 	</NewModal>
-	<CreatorTaxFormModal ref="taxFormModal" @on-hide="reopenAfterTaxForm" />
+	<CreatorTaxFormModal
+		ref="taxFormModal"
+		@success="onTaxFormSuccess"
+		@cancelled="onTaxFormCancelled"
+	/>
 </template>
 
 <script lang="ts" setup>
-import {
-	CheckIcon,
-	ChevronRightIcon,
-	FileTextIcon,
-	TransferIcon,
-	UnknownIcon,
-	XIcon,
-} from '@modrinth/assets'
+import { ChevronRightIcon, FileTextIcon, TransferIcon, UnknownIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	ButtonStyled,
@@ -196,17 +155,14 @@ import {
 } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
-import type { CSSProperties } from 'vue'
-
-import { getAuthUrl } from '~/composables/auth.js'
+import { nextTick } from 'vue'
 
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
-const { addNotification, handleError } = injectNotificationManager()
+const { addNotification } = injectNotificationManager()
 
 type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
 
-// TODO: Deduplicate in @modrinth/api-client PR.
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
 
 interface UserBalanceResponse {
@@ -246,7 +202,6 @@ const countries = computed(() =>
 	})),
 )
 
-// FancyDropdown-compatible country options and model binding
 const countryOptions = computed(() => countries.value.map((c) => ({ value: c.id, label: c.name })))
 
 const countryId = computed<string | null>({
@@ -272,6 +227,7 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(e: 'update:country', value: { id: string; name: string } | null): void
 	(e: 'withdraw', amount: number, method: PayoutMethod): void
+	(e: 'refresh-data'): void
 }>()
 
 const countryProxy = computed({
@@ -282,21 +238,9 @@ const countryProxy = computed({
 const paymentMethod = ref<PayoutMethod | null>(null)
 const withdrawAmount = ref('')
 
-// Linking state
-const editingLink = ref(false)
-const isVerifying = ref(false)
-const paypalEmail = ref(props.userPayoutData?.paypal_address ?? '')
-const venmoHandle = ref(props.userPayoutData?.venmo_handle ?? '')
-
-const isPayPalSelected = computed(() => paymentMethod.value?.type === 'paypal')
-const isVenmoSelected = computed(() => paymentMethod.value?.type === 'venmo')
-const hasLinkedPayPal = computed(() => !!props.userPayoutData?.paypal_address)
-const hasLinkedVenmo = computed(() => !!props.userPayoutData?.venmo_handle)
-
 const availablePaymentMethods = computed<PayoutMethod[]>(() => {
 	if (!props.payoutMethods) return []
 	return props.payoutMethods.filter((m) => {
-		// Filter based on country support
 		if (countryProxy.value && !m.supported_countries.includes(countryProxy.value.id)) {
 			return false
 		}
@@ -304,7 +248,6 @@ const availablePaymentMethods = computed<PayoutMethod[]>(() => {
 	})
 })
 
-// FancyDropdown-compatible payment method options and model binding
 const paymentMethodOptions = computed(() =>
 	availablePaymentMethods.value.map((m) => ({ value: m.id, label: formatPaymentMethodName(m) })),
 )
@@ -321,7 +264,8 @@ const maxWithdrawAmount = computed(() => {
 	const interval = paymentMethod.value.interval
 	const methodMax =
 		'standard' in interval ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0)
-	return Math.min(methodMax, props.balance?.available ?? 0, remainingLimit.value)
+	const max = Math.min(methodMax, props.balance?.available ?? 0, remainingLimit.value)
+	return Math.floor(max * 100) / 100
 })
 
 const minWithdrawAmount = computed(() => {
@@ -331,13 +275,18 @@ const minWithdrawAmount = computed(() => {
 })
 
 const parsedWithdrawAmount = computed(() => {
-	const regex = /^\$?(\d*(\.\d{2})?)$/gm
-	const matches = regex.exec(withdrawAmount.value)
-	return matches && matches[1] ? parseFloat(matches[1]) : 0.0
+	const s = (withdrawAmount.value ?? '').trim()
+	const match = s.match(/^\$?(\d*(?:\.\d{1,2})?)$/)
+	return match && match[1] ? parseFloat(match[1]) : 0.0
 })
 
 const usedLimit = computed(() => props.balance?.withdrawn_ytd ?? 0)
-const remainingLimit = computed(() => Math.max(0, 600 - usedLimit.value))
+const remainingLimit = computed(() => {
+	const raw = 600 - usedLimit.value
+	if (raw <= 0) return 0
+	const cents = Math.floor(raw * 100)
+	return cents / 100
+})
 
 const withdrawErrors = computed(() => {
 	const errors: string[] = []
@@ -375,185 +324,39 @@ const canProceedToWithdraw = computed(() => {
 
 const showPaymentDetails = computed(() => {
 	if (!paymentMethod.value) return false
-	if (editingLink.value) return false
 	if (paymentMethod.value.type === 'paypal') return !!props.userPayoutData?.paypal_address
 	if (paymentMethod.value.type === 'venmo') return !!props.userPayoutData?.venmo_handle
 	return false
 })
 
-const paymentAccountDisplay = computed(() => {
-	if (!paymentMethod.value) return ''
-	if (paymentMethod.value.type === 'paypal') return props.userPayoutData?.paypal_address ?? ''
-	if (paymentMethod.value.type === 'venmo') return props.userPayoutData?.venmo_handle ?? ''
-	return ''
-})
-
 function formatPaymentMethodName(method: PayoutMethod | null): string {
 	if (!method) return ''
 	return method.name
 }
 
-function getPaymentIcon(method: PayoutMethod) {
-	// Return appropriate icon component based on payment method type
-	// This would need to be implemented with actual icon imports
-	return 'div'
-}
-
-function editPaymentMethod() {
-	// Switch to inline editing mode
-	editingLink.value = true
-}
-
-// Validate inputs
-const paypalEmailValid = computed(() => {
-	if (!isPayPalSelected.value) return false
-	const v = paypalEmail.value?.trim()
-	return !!v && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
-})
-
-const venmoHandleValid = computed(() => {
-	if (!isVenmoSelected.value) return false
-	const v = venmoHandle.value?.trim() ?? ''
-	const name = v.startsWith('@') ? v.slice(1) : v
-	return name.length >= 3 && name.length <= 30 && /^[A-Za-z0-9_]+$/.test(name)
-})
-
-function startEditingLink() {
-	editingLink.value = true
-}
-
-function cancelEditingLink() {
-	editingLink.value = false
-	paypalEmail.value = props.userPayoutData?.paypal_address ?? ''
-	venmoHandle.value = props.userPayoutData?.venmo_handle ?? ''
-}
-
-async function refreshAuthSilently() {
-	try {
-		await useAuth()
-	} catch {
-		// ignore
-	}
-}
-
-async function verifyVenmo() {
-	if (!venmoHandleValid.value) return
-	isVerifying.value = true
-	try {
-		const userId = props.auth.user?.id
-		if (!userId) throw new Error('Not signed in')
-		await useBaseFetch(`user/${userId}`, {
-			method: 'PATCH',
-			body: {
-				venmo_handle: (venmoHandle.value || null) as string | null,
-			},
-			apiVersion: 3,
-		})
-		await refreshAuthSilently()
-		addNotification({
-			title: 'Venmo linked',
-			text: 'Your Venmo username has been saved.',
-			type: 'success',
-		})
-		editingLink.value = false
-	} catch (err: any) {
-		handleError(err)
-	} finally {
-		isVerifying.value = false
-	}
-}
-
-const paypalAuthUrl = getAuthUrl('paypal')
-
-async function verifyPayPal() {
-	if (!paypalEmailValid.value) return
-	isVerifying.value = true
-	try {
-		const url = new URL(`${paypalAuthUrl}&token=${props.auth.token}`)
-		const popup = window.open(url, 'paypal_oauth', 'width=520,height=700')
-		if (!popup) throw new Error('Popup blocked')
-
-		await new Promise<void>((resolve) => {
-			const timer = setInterval(() => {
-				if (popup.closed) {
-					clearInterval(timer)
-					resolve()
-				}
-			}, 500)
-		})
-
-		await refreshAuthSilently()
-		addNotification({
-			title: 'PayPal linked',
-			text: 'Your PayPal account has been connected.',
-			type: 'success',
-		})
-		editingLink.value = false
-	} catch (err: any) {
-		handleError(err)
-	} finally {
-		isVerifying.value = false
-	}
-}
-
 async function initiateWithdraw() {
 	if (!canProceedToWithdraw.value || !paymentMethod.value) return
 
-	// Emit withdraw event to parent
 	emit('withdraw', parsedWithdrawAmount.value, paymentMethod.value)
 
-	// Show confirmation
 	currentStage.value = 'confirmation'
 }
 
-function goToPayouts() {
-	navigateTo('/dashboard/revenue/transfers')
-}
-
-function goToTransactions() {
-	navigateTo('/dashboard/revenue')
-}
-
-function getParticleStyle(index: number): CSSProperties {
-	const colors = [
-		'#ff21fb',
-		'#9ded1a',
-		'#755ffd',
-		'#f44620',
-		'#470ba7',
-		'#c9fcbe',
-		'#fc9e1c',
-		'#4bc8ef',
-		'#ba3d02',
-	]
-	const size = Math.random() * 15 + 5
-	const x = Math.random() * 100
-	const y = Math.random() * 100
-	const duration = Math.random() * 20 + 10
-	const delay = Math.random() * 5
-
-	return {
-		position: 'absolute',
-		width: `${size}px`,
-		height: `${size}px`,
-		left: `${x}%`,
-		top: `${y}%`,
-		backgroundColor: colors[index % colors.length],
-		opacity: Math.random() * 0.6 + 0.2,
-		borderRadius: Math.random() > 0.5 ? '50%' : '0',
-		transform: `rotate(${Math.random() * 360}deg)`,
-		animation: `float ${duration}s ${delay}s infinite ease-in-out`,
-	} as CSSProperties
-}
-
 const taxFormModal = ref<InstanceType<typeof CreatorTaxFormModal> | null>(null)
 function showTaxFormModal(e: MouseEvent) {
 	withdrawModal.value?.hide()
 	taxFormModal.value?.startTaxForm(e)
 }
 
-function reopenAfterTaxForm() {
-	withdrawModal.value?.show()
+function onTaxFormSuccess() {
+	emit('refresh-data')
+	nextTick(() => {
+		show('withdraw-details')
+	})
+}
+
+function onTaxFormCancelled() {
+	show('withdraw-limit')
 }
 
 const stageLabels = readonly<Record<Stage, string | undefined>>({
@@ -607,11 +410,6 @@ watch(
 		if (!paymentMethod.value || !list.some((m) => m.id === paymentMethod.value?.id)) {
 			paymentMethod.value = list[0]
 		}
-		// Initialize linking mode depending on whether method is already linked
-		editingLink.value = !showPaymentDetails.value
-		// Reset inputs to current stored values
-		paypalEmail.value = props.userPayoutData?.paypal_address ?? ''
-		venmoHandle.value = props.userPayoutData?.venmo_handle ?? ''
 	},
 	{ immediate: true },
 )
@@ -620,19 +418,3 @@ defineExpose({
 	show,
 })
 </script>
-
-<style scoped>
-@keyframes float {
-	0%,
-	100% {
-		transform: translateY(0) rotate(0deg);
-	}
-	50% {
-		transform: translateY(-20px) rotate(180deg);
-	}
-}
-
-.particle {
-	pointer-events: none;
-}
-</style>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 3ed74874c8..995b6c382c 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -6,6 +6,8 @@
 		:balance="userBalance"
 		:payout-methods="paymentMethods"
 		:payout-methods-pending="payoutMethodsPending"
+		@withdraw="handleWithdraw"
+		@refresh-data="refreshData"
 	/>
 	<div class="mb-6 flex flex-col gap-8 p-2">
 		<div class="flex flex-col gap-5">
@@ -89,25 +91,46 @@
 			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
 				<button
-					class="flex flex-col rounded-2xl bg-brand p-5 text-inverted shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
+					class="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-green to-green-800 p-5 text-inverted shadow-md transition-all duration-200 hover:brightness-110"
 					@click="openWithdrawModal"
 				>
-					<div class="flex flex-row justify-between">
+					<div class="relative z-10 flex flex-row justify-between">
 						<span class="text-lg font-semibold">Withdraw</span>
 						<ArrowUpRightIcon class="my-auto size-4" />
 					</div>
-					<div class="text-left">Withdraw from your available balance to any payout method.</div>
-				</button>
-				<button
-					class="flex flex-col rounded-2xl bg-button-bg p-5 shadow-xl brightness-90 transition-all duration-200 hover:brightness-105"
-				>
-					<div class="flex flex-row justify-between">
-						<span class="text-lg font-semibold text-contrast">PayPal</span>
-						<ArrowUpRightIcon class="my-auto size-4" />
-					</div>
-					<div class="text-left text-primary">
-						Withdraw from your available balance to PayPal again.
+					<div class="relative z-10 text-left">
+						Withdraw from your available balance to any payout method.
 					</div>
+					<svg
+						aria-hidden="true"
+						class="pointer-events-none absolute bottom-0 right-0 z-0 h-[105px] w-[271px]"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 266 100"
+						fill="none"
+					>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M319.052 54.2233C319.058 37.6952 315.689 21.3441 309.156 6.19864C302.624 -8.94682 293.07 -22.559 281.094 -33.7816C269.119 -45.0042 254.982 -53.5944 239.573 -59.012C224.164 -64.4295 207.815 -66.5571 191.556 -65.2609C175.297 -63.9648 159.479 -59.2729 145.097 -51.4805C130.715 -43.688 118.08 -32.9636 107.987 -19.9818C97.8942 -6.99995 90.5617 7.95837 86.4509 23.9523C82.3401 39.9462 81.5398 56.6297 84.1004 72.9533L103.415 67.7101C100.452 45.7823 104.805 23.4811 115.783 4.35031C126.761 -14.7805 143.734 -29.6435 164.005 -37.8768C184.275 -46.1102 206.681 -47.2415 227.661 -41.0911C248.641 -34.9407 266.991 -21.8613 279.797 -3.93146L262.376 6.25239C255.476 -2.83248 246.698 -10.2779 236.659 -15.5617C226.619 -20.8455 215.561 -23.8398 204.26 -24.3345L206.032 -3.60929C217.266 -2.58081 227.949 1.79213 236.737 8.95915C245.524 16.1262 252.024 25.767 255.418 36.6684C258.812 47.5697 258.949 59.2444 255.81 70.223C252.672 81.2017 246.398 90.9937 237.78 98.3668L248.048 116.384C261.575 105.867 271.303 91.124 275.725 74.437C280.146 57.7501 279.016 40.0505 272.507 24.079L289.873 13.9453C295.192 26.0533 298.028 39.1299 298.209 52.3816L319.052 54.2233Z"
+							fill="#1BD96A"
+							fill-opacity="0.16"
+						/>
+						<path
+							d="M145.331 -51.0364C159.653 -58.796 175.404 -63.4691 191.595 -64.7598C207.786 -66.0504 224.065 -63.9308 239.41 -58.5361C254.754 -53.1414 268.832 -44.5878 280.757 -33.4124C292.682 -22.2369 302.196 -8.68194 308.702 6.39988C315.134 21.3138 318.483 37.4019 318.551 53.6733L298.696 51.919C298.455 38.7552 295.611 25.7724 290.326 13.7409L290.103 13.2307L289.625 13.5089L272.26 23.6428L271.882 23.8634L272.048 24.2711C278.514 40.1402 279.638 57.7262 275.245 74.3061C270.901 90.7012 261.401 105.207 248.194 115.632L238.415 98.4753C246.945 91.0702 253.16 81.3016 256.287 70.3626C259.453 59.2887 259.315 47.5128 255.892 36.5169C252.469 25.5209 245.912 15.7962 237.048 8.56694C228.292 1.42595 217.67 -2.9636 206.491 -4.06957L204.803 -23.8035C215.835 -23.2382 226.622 -20.2771 236.429 -15.1154L236.43 -15.1156C246.405 -9.8657 255.126 -2.46736 261.982 6.5593L262.247 6.9086L262.624 6.68831L280.046 -3.49542L280.522 -3.7744L280.2 -4.2262C267.329 -22.247 248.885 -35.3926 227.798 -41.5743C206.712 -47.7558 184.193 -46.6194 163.82 -38.3444C143.447 -30.0694 126.388 -15.1307 115.354 4.09694C104.394 23.1968 100.004 45.441 102.865 67.338L84.5078 72.3214C82.0618 56.2426 82.8841 39.8252 86.9313 24.0789C91.0248 8.15219 98.3266 -6.74338 108.377 -19.6706C118.427 -32.5979 131.01 -43.2767 145.331 -51.0364Z"
+							stroke="#1BD96A"
+							stroke-opacity="0.12"
+						/>
+						<path
+							d="M260.003 157.491C244.923 166.318 228.106 171.665 210.752 173.15C193.397 174.636 175.935 172.223 159.61 166.084C143.286 159.945 128.503 150.231 116.318 137.637C104.132 125.042 94.8439 109.878 89.1171 93.226L108.448 87.9782C110.395 93.3018 112.784 98.4486 115.59 103.363C118.525 108.52 121.913 113.398 125.713 117.939L140.152 102.814C131.996 92.3742 126.591 80.0086 124.444 66.8751C122.296 53.7416 123.476 40.2699 127.873 27.7219C132.27 15.1739 139.74 3.96017 149.584 -4.86882C159.427 -13.6978 171.322 -19.8532 184.154 -22.7584L185.891 -2.02536C177.437 0.311457 169.624 4.57902 163.052 10.4495C156.48 16.3201 151.323 23.6373 147.979 31.8393C144.634 40.0412 143.191 48.9096 143.759 57.7633C144.327 66.6169 146.892 75.2202 151.257 82.9123C152.243 84.6198 153.258 86.3022 154.382 87.7452L172.854 68.4135L161.573 52.4568L176.638 25.2047L201.398 12.3472L211.468 19.805L202.636 35.5055L192.974 41.7298L187.498 51.6422L193.955 61.0422C193.955 61.0422 203.56 67.0702 203.576 67.0659L213.41 61.3547L218.72 50.9454L233.753 41.2004L241.537 51.0445L230.214 76.6512L204.201 93.4501L187.642 82.5445L169.003 102.096C176.464 107.133 184.988 110.331 193.89 111.432C202.792 112.534 211.826 111.509 220.268 108.44L230.553 126.503C218.179 131.679 204.694 133.531 191.407 131.879C178.121 130.227 165.481 125.128 154.715 117.075L140.327 132.134C153.557 142.488 169.184 149.244 185.722 151.759C202.26 154.274 219.16 152.465 234.815 146.503C250.471 140.542 264.362 130.626 275.169 117.699C285.976 104.771 293.339 89.2611 296.56 72.6427L317.419 74.4794C314.438 91.7283 307.75 108.104 297.828 122.449C287.906 136.794 274.993 148.756 260.003 157.491Z"
+							fill="#1BD96A"
+							fill-opacity="0.16"
+						/>
+						<path
+							d="M149.913 -4.49238C159.551 -13.1371 171.169 -19.2006 183.706 -22.1377L185.36 -2.39778C176.987 -0.0177107 169.248 4.24324 162.723 10.0719C156.094 15.9933 150.893 23.3739 147.519 31.6468C144.146 39.9199 142.69 48.8658 143.263 57.7963C143.837 66.7266 146.424 75.4045 150.826 83.1632L150.828 83.1668C151.816 84.8756 152.845 86.5845 153.993 88.0571L154.344 88.5081L154.739 88.0956L173.211 68.7634L173.5 68.4621L173.258 68.1208L162.16 52.4243L176.998 25.5829L201.351 12.9363L210.816 19.9464L202.265 35.1485L192.707 41.3047L192.602 41.373L192.541 41.4842L187.064 51.3967L186.912 51.6708L187.09 51.9298L193.547 61.3299L193.606 61.4157L193.693 61.4702L193.7 61.4744C193.705 61.4773 193.712 61.4815 193.721 61.4871C193.739 61.4985 193.766 61.5158 193.801 61.5377C193.871 61.5819 193.975 61.6461 194.106 61.7285C194.369 61.8933 194.744 62.1297 195.194 62.4122C196.095 62.9772 197.296 63.7303 198.498 64.4836C199.7 65.2368 200.903 65.9902 201.806 66.5549C202.257 66.8371 202.634 67.0726 202.898 67.2372C203.03 67.3195 203.136 67.3844 203.208 67.4289C203.244 67.4509 203.273 67.4687 203.293 67.4811C203.303 67.487 203.312 67.4932 203.321 67.498C203.324 67.5001 203.332 67.5044 203.341 67.5089C203.344 67.5108 203.354 67.516 203.367 67.522C203.375 67.5257 203.397 67.5353 203.411 67.5406C203.444 67.5507 203.59 67.5693 203.705 67.5525L203.767 67.5355L203.823 67.5021L213.656 61.7911L213.783 61.7179L213.851 61.5856L219.099 51.2968L233.644 41.8683L240.959 51.1188L229.821 76.3076L204.202 92.8511L187.912 82.1225L187.569 81.8961L187.285 82.1952L168.646 101.746L168.233 102.18L168.728 102.515C176.254 107.596 184.85 110.821 193.829 111.932C202.671 113.026 211.64 112.038 220.043 109.052L229.836 126.252C217.685 131.229 204.482 132.997 191.468 131.379C178.266 129.738 165.708 124.671 155.01 116.67L154.66 116.409L154.358 116.725L139.97 131.784L139.584 132.189L140.024 132.532C153.321 142.939 169.026 149.729 185.648 152.257C202.269 154.785 219.255 152.966 234.99 146.974C250.724 140.983 264.686 131.017 275.548 118.024C286.313 105.146 293.676 89.7174 296.957 73.1823L316.833 74.9331C313.819 91.9106 307.198 108.026 297.421 122.16C287.541 136.444 274.683 148.357 259.755 157.055L259.754 157.055C244.738 165.845 227.991 171.169 210.71 172.648C193.429 174.128 176.039 171.725 159.783 165.612C143.528 159.499 128.806 149.826 116.672 137.284C104.662 124.872 95.4819 109.951 89.7657 93.5707L108.141 88.5822C109.945 93.4461 112.116 98.1617 114.637 102.686L115.16 103.615C118.11 108.797 121.515 113.7 125.333 118.264L125.689 118.688L126.07 118.289L140.509 103.163L140.811 102.847L140.541 102.501C132.438 92.1288 127.067 79.8422 124.933 66.7929C122.799 53.7434 123.973 40.3579 128.341 27.8902C132.71 15.4225 140.132 4.28013 149.913 -4.49238Z"
+							stroke="#1BD96A"
+							stroke-opacity="0.12"
+						/>
+					</svg>
 				</button>
 			</div>
 			<span class="text-sm text-secondary"
@@ -152,9 +175,11 @@
 </template>
 <script setup lang="ts">
 import { ArrowUpIcon, ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
 import {
 	capitalizeString,
 	formatMoney,
+	formatWallet,
 	type PayoutList,
 	type PayoutMethodType,
 	type PayoutStatus,
@@ -168,6 +193,7 @@ import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal
 // TODO: Deduplicate in @modrinth/api-client PR.
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
 
+const { addNotification } = injectNotificationManager()
 const auth = await useAuth()
 
 interface UserBalanceResponse {
@@ -222,7 +248,6 @@ type RevenueBarSegment = {
 const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal>>()
 async function openWithdrawModal() {
 	withdrawModal.value?.show?.()
-	console.log(withdrawModal.value?.show)
 }
 
 function formatTransactionStatus(status: PayoutStatus) {
@@ -248,14 +273,12 @@ function formatMethodName(method: PayoutMethodType | null) {
 	}
 }
 
-const flags = useFeatureFlags()
-
-const { data: userBalance } = await useAsyncData(
+const { data: userBalance, refresh: refreshUserBalance } = await useAsyncData(
 	`payout/balance`,
 	() => useBaseFetch(`payout/balance`, { apiVersion: 3 }) as Promise<UserBalanceResponse>,
 )
 
-const { data: payouts } = await useAsyncData<PayoutList>(
+const { data: payouts, refresh: refreshPayouts } = await useAsyncData<PayoutList>(
 	`payout`,
 	() =>
 		useBaseFetch(`payout`, {
@@ -305,11 +328,50 @@ const grandTotal = computed(() =>
 	userBalance.value ? Number(userBalance.value.available) + Number(userBalance.value.pending) : 0,
 )
 
+async function handleWithdraw(amount: number, method: PayoutMethod) {
+	startLoading()
+	try {
+		await useBaseFetch(`payout`, {
+			method: 'POST',
+			body: {
+				amount,
+				method: method.type,
+				method_id: method.id,
+			},
+			apiVersion: 3,
+		})
+		addNotification({
+			title: 'Withdrawal complete',
+			text:
+				method.type === 'tremendous'
+					? 'An email has been sent to your account with further instructions on how to redeem your payout!'
+					: `Payment has been sent to your ${formatWallet(method.type)} account!`,
+			type: 'success',
+		})
+		await refreshData()
+	} catch (err) {
+		addNotification({
+			title: 'An error occurred',
+			text: (err as any)?.data ? (err as any)?.data?.description : (err as string),
+			type: 'error',
+		})
+	}
+	stopLoading()
+}
+
+async function refreshData() {
+	try {
+		await Promise.all([refreshUserBalance(), refreshPayouts()])
+	} catch (error) {
+		console.error('Failed to refresh data:', error)
+	}
+}
+
 const dateStripeClasses = [
-	'zone--striped--blue',
-	'zone--striped--purple',
-	'zone--striped--orange',
-	'zone--striped--red',
+	'zone--striped--blue bg-gradient-to-r from-blue-400 to-blue-600',
+	'zone--striped--purple bg-gradient-to-r from-purple-400 to-purple-600',
+	'zone--striped--orange bg-gradient-to-r from-orange-400 to-orange-600',
+	'zone--striped--red bg-gradient-to-r from-red-400 to-red-600',
 ] as const
 
 const dateHighlightClasses = [
@@ -352,7 +414,7 @@ const segments = computed<RevenueBarSegment[]>(() => {
 	if (available > 0) {
 		segs.push({
 			key: 'available',
-			class: 'bg-brand-green',
+			class: 'bg-gradient-to-r from-green to-green-700',
 			width: available / total,
 			amount: available,
 		})

From 32ff787ea74474af42dc58e3aa0e12bb9655b5fe Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 18:02:37 +0100
Subject: [PATCH 32/49] fix: niche bugs

---
 .../src/components/ui/dashboard/CreatorTaxFormModal.vue         | 2 +-
 apps/frontend/src/pages/dashboard/revenue/index.vue             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 50c9d575ae..f4976df166 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -67,7 +67,7 @@
 				<ButtonStyled color="brand">
 					<button :disabled="!canContinue || loading" @click="continueForm">
 						<template v-if="!loading">Continue <RightArrowIcon /></template>
-						<template v-else><SpinnerIcon /> Loading…</template>
+						<template v-else><SpinnerIcon class="animate-spin" /> Loading…</template>
 					</button>
 				</ButtonStyled>
 			</div>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 995b6c382c..50aa249a8a 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -9,7 +9,7 @@
 		@withdraw="handleWithdraw"
 		@refresh-data="refreshData"
 	/>
-	<div class="mb-6 flex flex-col gap-8 p-2">
+	<div class="mb-6 flex flex-col gap-8 p-8">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
 				<span class="text-2xl font-semibold text-contrast">Balance</span>

From 63b3fb1fa349463a49e06b5a1e25805fb204c1ed Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 18:13:36 +0100
Subject: [PATCH 33/49] fix: ComboBox styling

---
 packages/ui/src/components/base/Combobox.vue | 40 +++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index fbcacd180f..90dfdc37fa 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -2,8 +2,9 @@
 	<div ref="containerRef" class="relative inline-block w-full">
 		<span
 			ref="triggerRef"
-			type="button"
-			class="relative cursor-pointer flex h-11 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left outline outline-1 outline-offset-[-1px] outline-button-border transition-all duration-200"
+			role="button"
+			tabindex="0"
+			class="relative cursor-pointer flex h-11 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left outline outline-1 outline-offset-[-1px] outline-button-border transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
 			:class="[
 				triggerClasses,
 				{
@@ -15,13 +16,13 @@
 			]"
 			:aria-expanded="isOpen"
 			:aria-haspopup="listbox ? 'listbox' : 'menu'"
-			:disabled="disabled"
+			:aria-disabled="disabled || undefined"
 			@click="handleTriggerClick"
 			@keydown="handleTriggerKeydown"
 		>
 			<div class="flex items-center gap-2">
 				<slot name="prefix"></slot>
-				<span class="text-base font-semibold leading-tight text-contrast">
+				<span class="text-base font-semibold leading-tight">
 					<slot name="selected">{{ triggerText }}</slot>
 				</span>
 			</div>
@@ -39,7 +40,7 @@
 			<div
 				v-if="isOpen"
 				ref="dropdownRef"
-				class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-button-bg outline outline-1 outline-offset-[-1px] outline-button-border"
+				class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-dropdown-bg outline outline-1 outline-offset-[-1px] outline-button-border"
 				:class="openDirection === 'down' ? 'rounded-t-none' : 'rounded-b-none'"
 				:style="dropdownStyle"
 				:role="listbox ? 'listbox' : 'menu'"
@@ -48,7 +49,7 @@
 			>
 				<div v-if="searchable" class="p-4">
 					<div
-						class="flex items-center gap-2 overflow-hidden rounded-xl bg-bg-raised px-4 py-2.5 outline outline-1 outline-offset-[-1px] outline-button-border focus-within:shadow-[0px_0px_0px_2px_rgba(52,54,60,1.00)]"
+						class="flex items-center gap-2 overflow-hidden rounded-xl bg-bg-raised px-4 py-2.5 outline outline-1 outline-offset-[-1px] outline-button-border focus-within:outline-2 focus-within:outline-contrast"
 					>
 						<SearchIcon class="size-5" />
 						<input
@@ -56,13 +57,13 @@
 							v-model="searchQuery"
 							type="text"
 							:placeholder="searchPlaceholder"
-							class="flex-1 !bg-bg-raised text-sm font-medium leading-[18px] text-contrast placeholder-secondary !shadow-none !outline-none"
+							class="flex-1 !bg-bg-raised text-sm font-medium leading-[18px] text-dropdown-text placeholder-secondary !shadow-none !outline-none"
 							@keydown.stop="handleSearchKeydown"
 						/>
 					</div>
 				</div>
 
-				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-button-bg"></div>
+				<div v-if="searchable && filteredOptions.length > 0" class="h-px bg-divider"></div>
 
 				<div
 					v-if="filteredOptions.length > 0"
@@ -71,33 +72,36 @@
 					:style="{ maxHeight: `${maxHeight}px` }"
 				>
 					<template v-for="(item, index) in filteredOptions" :key="item.key">
-						<div v-if="item.type === 'divider'" class="h-px bg-button-border"></div>
+						<div v-if="item.type === 'divider'" class="h-px bg-divider"></div>
 						<component
 							:is="item.type === 'link' ? 'a' : 'span'"
 							v-else
 							:ref="(el: HTMLElement) => setOptionRef(el as HTMLElement, index)"
-							:href="item.type === 'link' ? item.href : undefined"
-							:target="item.type === 'link' ? item.target : undefined"
-							type="button"
+							:href="item.type === 'link' && !item.disabled ? item.href : undefined"
+							:target="item.type === 'link' && !item.disabled ? item.target : undefined"
 							:role="listbox ? 'option' : 'menuitem'"
 							:aria-selected="listbox && item.value === modelValue"
+							:aria-disabled="item.disabled || undefined"
 							:data-focused="focusedIndex === index"
-							class="flex items-center gap-2.5 cursor-pointer rounded-xl bg-transparent px-4 py-3 text-left transition-colors duration-150"
+							class="flex items-center gap-2.5 cursor-pointer rounded-xl px-4 py-3 text-left transition-colors duration-150 text-dropdown-text hover:bg-button-bgHover focus:bg-button-bgHover"
 							:class="[
 								item.class,
 								{
-									'bg-[#42444a]': focusedIndex === index || (listbox && item.value === modelValue),
-									'cursor-not-allowed opacity-50': item.disabled,
+									'bg-button-bgSelected text-button-textSelected':
+										listbox && item.value === modelValue,
+									'bg-button-bgHover':
+										focusedIndex === index && !(listbox && item.value === modelValue),
+									'cursor-not-allowed opacity-50 pointer-events-none': item.disabled,
 								},
 							]"
-							:disabled="item.disabled"
+							tabindex="-1"
 							@click="handleOptionClick(item, index)"
-							@mouseenter="focusedIndex = index"
+							@mouseenter="!item.disabled && (focusedIndex = index)"
 						>
 							<slot :name="`option-${item.value}`" :item="item">
 								<div class="flex items-center gap-2">
 									<component :is="item.icon" v-if="item.icon" class="h-5 w-5" />
-									<span class="text-base font-semibold leading-tight text-contrast">
+									<span class="text-base font-semibold leading-tight">
 										{{ item.label }}
 									</span>
 								</div>

From 20085d1728f3d7416707f7c02af294c30e74b121 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Fri, 12 Sep 2025 23:38:17 +0100
Subject: [PATCH 34/49] feat: first part of qa

---
 apps/frontend/src/pages/dashboard.vue         |   2 +-
 .../src/pages/dashboard/revenue/index.vue     | 129 +++++++++++-------
 2 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index d962545010..b93bfbd83d 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="normal-page">
+	<div class="normal-page !mt-8">
 		<div class="normal-page__sidebar">
 			<NavStack
 				:items="[
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 50aa249a8a..0692f336df 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -9,7 +9,7 @@
 		@withdraw="handleWithdraw"
 		@refresh-data="refreshData"
 	/>
-	<div class="mb-6 flex flex-col gap-8 p-8">
+	<div class="mb-6 flex flex-col gap-8 p-12 py-0">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
 				<span class="text-2xl font-semibold text-contrast">Balance</span>
@@ -19,39 +19,51 @@
 				>
 			</div>
 			<div class="flex h-3 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
-				<template v-for="seg in segments" :key="seg.key">
-					<span
-						v-tooltip="formatMoney(seg.amount)"
-						class="block h-full"
-						:class="seg.class"
-						:style="{ width: seg.widthPct }"
-					></span>
-				</template>
+				<div v-for="seg in segments" :key="seg.key" class="h-full" :style="{ width: seg.widthPct }">
+					<Tooltip
+						theme="dismissable-prompt"
+						:triggers="['hover', 'focus']"
+						noAutoFocus
+						placement="top"
+						class="block h-full w-full"
+					>
+						<span
+							class="block h-full w-full transition duration-150 hover:brightness-150"
+							:class="seg.class"
+						></span>
+						<template #popper>
+							<div class="font-semibold text-contrast">{{ formatMoney(seg.amount) }}</div>
+						</template>
+					</Tooltip>
+				</div>
 			</div>
 			<div class="flex flex-col">
 				<div
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="text-md flex flex-row gap-2 align-middle"
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						><span class="my-auto block size-4 rounded-full bg-brand-green"></span> Available
 						now</span
 					>
-					<span class="text-md font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
+					<span class="text-2xl font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
 				</div>
 				<div
 					v-for="date in dateSegments"
 					:key="date.date"
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="text-md flex flex-row gap-2 align-middle"
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						><span
 							class="zone--striped-small my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
 						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
-						<Tooltip :triggers="['hover', 'focus']">
-							<nuxt-link class="align-middle text-link" to="/legal/cmp-info#pending">
-								<UnknownIcon />
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" noAutoFocus>
+							<nuxt-link
+								class="inline-flex items-center justify-center text-link"
+								to="/legal/cmp-info#pending"
+							>
+								<UnknownIcon class="inline-block size-5 align-middle" />
 							</nuxt-link>
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
@@ -61,18 +73,16 @@
 							</template>
 						</Tooltip>
 					</span>
-					<span class="text-md font-bold text-contrast">{{ formatMoney(date?.amount ?? 0) }}</span>
+					<span class="text-2xl font-bold text-contrast">{{ formatMoney(date?.amount ?? 0) }}</span>
 				</div>
-				<div
-					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
-				>
-					<span class="text-md flex flex-row gap-2 align-middle"
+				<div class="flex flex-row justify-between p-2">
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						><span
-							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg"
+							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
 						Processing
-						<Tooltip :triggers="['hover', 'focus']">
-							<InProgressIcon class="my-auto" />
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" noAutoFocus>
+							<InProgressIcon class="inline-block size-5 align-middle" />
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
 									Revenue stays in processing until the end of the month, then becomes available 60
@@ -81,29 +91,29 @@
 							</template>
 						</Tooltip>
 					</span>
-					<span class="text-md font-bold text-contrast">{{
+					<span class="text-2xl font-bold text-contrast">{{
 						formatMoney(processingDate?.amount ?? 0)
 					}}</span>
 				</div>
 			</div>
 		</div>
 		<div class="flex flex-col gap-4">
-			<span class="text-3xl font-semibold text-contrast">Withdraw</span>
+			<span class="text-2xl font-semibold text-contrast">Withdraw</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
 				<button
-					class="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-green to-green-800 p-5 text-inverted shadow-md transition-all duration-200 hover:brightness-110"
+					class="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-green to-green-700 p-5 text-inverted shadow-md transition-all duration-200 hover:brightness-110"
 					@click="openWithdrawModal"
 				>
 					<div class="relative z-10 flex flex-row justify-between">
-						<span class="text-lg font-semibold">Withdraw</span>
-						<ArrowUpRightIcon class="my-auto size-4" />
+						<span class="text-md font-semibold">Withdraw</span>
+						<ArrowUpRightIcon class="my-auto size-6" />
 					</div>
-					<div class="relative z-10 text-left">
+					<div class="relative z-10 text-left text-sm font-medium">
 						Withdraw from your available balance to any payout method.
 					</div>
 					<svg
 						aria-hidden="true"
-						class="pointer-events-none absolute bottom-0 right-0 z-0 h-[105px] w-[271px]"
+						class="pointer-events-none absolute bottom-0 right-0 z-0 h-full w-auto"
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 266 100"
 						fill="none"
@@ -140,7 +150,7 @@
 				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
 			>
 		</div>
-		<div v-if="sortedPayouts.length > 0" class="flex flex-col gap-4">
+		<div class="flex flex-col gap-4">
 			<div class="flex flex-row justify-between">
 				<span class="text-3xl font-semibold text-contrast">Transactions</span>
 				<nuxt-link
@@ -149,27 +159,32 @@
 					>See all</nuxt-link
 				>
 			</div>
-			<div v-for="transaction in sortedPayouts.slice(0, 3)" class="flex flex-row gap-3">
-				<div
-					class="flex size-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised shadow-md"
-				>
-					<ArrowUpIcon class="my-auto size-8 text-contrast" />
-				</div>
-				<div class="flex w-full flex-row justify-between">
-					<div class="flex flex-col">
-						<span class="text-lg font-semibold text-contrast">{{
-							formatMethodName(transaction.method)
+			<div v-if="sortedPayouts.length > 0">
+				<div v-for="transaction in sortedPayouts.slice(0, 3)" class="flex flex-row gap-3">
+					<div
+						class="flex size-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised shadow-md"
+					>
+						<ArrowUpIcon class="my-auto size-8 text-contrast" />
+					</div>
+					<div class="flex w-full flex-row justify-between">
+						<div class="flex flex-col">
+							<span class="text-lg font-semibold text-contrast">{{
+								formatMethodName(transaction.method)
+							}}</span>
+							<span class="text-secondary"
+								>{{ formatTransactionStatus(transaction.status) }} |
+								{{ dayjs(transaction.created).format('MMM DD YYYY') }}</span
+							>
+						</div>
+						<span class="my-auto text-2xl font-bold text-contrast">{{
+							formatMoney(transaction.amount)
 						}}</span>
-						<span class="text-secondary"
-							>{{ formatTransactionStatus(transaction.status) }} |
-							{{ dayjs(transaction.created).format('MMM DD YYYY') }}</span
-						>
 					</div>
-					<span class="my-auto text-2xl font-bold text-contrast">{{
-						formatMoney(transaction.amount)
-					}}</span>
 				</div>
 			</div>
+			<div v-else class="rounded-xl border border-button-bg p-4 text-secondary">
+				No transactions found
+			</div>
 		</div>
 	</div>
 </template>
@@ -208,7 +223,6 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
-// Types for payout methods and related shapes
 type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
 interface PayoutMethodFee {
 	percentage: number
@@ -500,11 +514,11 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	@extend %zone--striped-common;
 	background-image: linear-gradient(
 		135deg,
-		var(--color-button-bg-hover) 11.54%,
+		var(--color-divider-dark) 11.54%,
 		transparent 11.54%,
 		transparent 50%,
-		var(--color-button-bg-hover) 50%,
-		var(--color-button-bg-hover) 61.54%,
+		var(--color-divider-dark) 50%,
+		var(--color-divider-dark) 61.54%,
 		transparent 61.54%,
 		transparent 100%
 	);
@@ -516,3 +530,14 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	background-attachment: unset !important;
 }
 </style>
+
+<style>
+.v-popper--theme-dismissable-prompt .v-popper__inner {
+	border-color: transparent !important;
+}
+
+.v-popper--theme-dismissable-prompt .v-popper__arrow-outer,
+.v-popper--theme-dismissable-prompt .v-popper__arrow-inner {
+	border-color: transparent !important;
+}
+</style>

From 07c6c4b676f3d40b799fe77618d2700fdec38d81 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 00:03:41 +0100
Subject: [PATCH 35/49] feat: animate flash rather than tooltip

---
 .../src/pages/dashboard/revenue/index.vue     | 126 ++++++++++++++----
 1 file changed, 97 insertions(+), 29 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 0692f336df..0673f689ca 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -18,42 +18,53 @@
 					>{{ formatMoney(grandTotal) }}</span
 				>
 			</div>
+
 			<div class="flex h-3 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
-				<div v-for="seg in segments" :key="seg.key" class="h-full" :style="{ width: seg.widthPct }">
-					<Tooltip
-						theme="dismissable-prompt"
-						:triggers="['hover', 'focus']"
-						noAutoFocus
-						placement="top"
-						class="block h-full w-full"
-					>
-						<span
-							class="block h-full w-full transition duration-150 hover:brightness-150"
-							:class="seg.class"
-						></span>
-						<template #popper>
-							<div class="font-semibold text-contrast">{{ formatMoney(seg.amount) }}</div>
-						</template>
-					</Tooltip>
+				<div
+					v-for="seg in segments"
+					:key="seg.key"
+					class="h-full"
+					:style="{ width: seg.widthPct }"
+					@mouseenter="hoveredSeg = seg.key"
+					@mouseleave="hoveredSeg = null"
+				>
+					<span
+						class="block h-full w-full transition duration-150 hover:brightness-150"
+						:class="seg.class"
+					></span>
 				</div>
 			</div>
+
 			<div class="flex flex-col">
 				<div
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
+					<span
+						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
+						:class="{ 'animate-flash-green text-green': hoveredSeg === 'available' }"
 						><span class="my-auto block size-4 rounded-full bg-brand-green"></span> Available
 						now</span
 					>
-					<span class="text-2xl font-bold text-contrast">{{ formatMoney(totalAvailable) }}</span>
+					<span
+						class="text-2xl font-bold text-contrast"
+						:class="{ 'animate-flash-green text-green': hoveredSeg === 'available' }"
+						>{{ formatMoney(totalAvailable) }}</span
+					>
 				</div>
+
 				<div
-					v-for="date in dateSegments"
+					v-for="(date, i) in dateSegments"
 					:key="date.date"
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
-						><span
+					<span
+						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
+						:class="{
+							[date.textClass]: hoveredSeg === `upcoming-${date.date}-${i}`,
+							'animate-flash-color': hoveredSeg === `upcoming-${date.date}-${i}`,
+						}"
+					>
+						<span
 							class="zone--striped-small my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
@@ -73,11 +84,22 @@
 							</template>
 						</Tooltip>
 					</span>
-					<span class="text-2xl font-bold text-contrast">{{ formatMoney(date?.amount ?? 0) }}</span>
+					<span
+						class="text-2xl font-bold text-contrast"
+						:class="{
+							[date.textClass]: hoveredSeg === `upcoming-${date.date}-${i}`,
+							'animate-flash-color': hoveredSeg === `upcoming-${date.date}-${i}`,
+						}"
+						>{{ formatMoney(date?.amount ?? 0) }}</span
+					>
 				</div>
+
 				<div class="flex flex-row justify-between p-2">
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
-						><span
+					<span
+						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
+						:class="{ 'animate-flash-gray text-gray-500': hoveredSeg === 'processing' }"
+					>
+						<span
 							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
 						Processing
@@ -91,12 +113,15 @@
 							</template>
 						</Tooltip>
 					</span>
-					<span class="text-2xl font-bold text-contrast">{{
-						formatMoney(processingDate?.amount ?? 0)
-					}}</span>
+					<span
+						class="text-2xl font-bold text-contrast"
+						:class="{ 'animate-flash-gray text-gray-500': hoveredSeg === 'processing' }"
+						>{{ formatMoney(processingDate?.amount ?? 0) }}</span
+					>
 				</div>
 			</div>
 		</div>
+
 		<div class="flex flex-col gap-4">
 			<span class="text-2xl font-semibold text-contrast">Withdraw</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
@@ -150,6 +175,7 @@
 				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
 			>
 		</div>
+
 		<div class="flex flex-col gap-4">
 			<div class="flex flex-row justify-between">
 				<span class="text-3xl font-semibold text-contrast">Transactions</span>
@@ -188,6 +214,7 @@
 		</div>
 	</div>
 </template>
+
 <script setup lang="ts">
 import { ArrowUpIcon, ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
 import { injectNotificationManager } from '@modrinth/ui'
@@ -223,6 +250,7 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
+// Types for payout methods and related shapes
 type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
 interface PayoutMethodFee {
 	percentage: number
@@ -259,6 +287,8 @@ type RevenueBarSegment = {
 	amount: number
 }
 
+const hoveredSeg = ref<string | null>(null)
+
 const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal>>()
 async function openWithdrawModal() {
 	withdrawModal.value?.show?.()
@@ -395,6 +425,8 @@ const dateHighlightClasses = [
 	'bg-highlight-red',
 ] as const
 
+const dateTextClasses = ['text-blue', 'text-purple', 'text-orange', 'text-red'] as const
+
 const dateSegments = computed(() => {
 	const dates = nextDate.value
 	if (!dates?.length)
@@ -403,12 +435,14 @@ const dateSegments = computed(() => {
 			amount: number
 			stripeClass: string
 			highlightClass: string
+			textClass: string
 		}>
 
 	return dates.slice(0, -1).map((d, i) => ({
 		...d,
 		stripeClass: dateStripeClasses[i % dateStripeClasses.length],
 		highlightClass: dateHighlightClasses[i % dateHighlightClasses.length],
+		textClass: dateTextClasses[i % dateTextClasses.length],
 	}))
 })
 
@@ -457,9 +491,8 @@ const segments = computed<RevenueBarSegment[]>(() => {
 	}
 
 	let acc = 0
-	// normalize widths to sum to 100%, then drop any that are 0% and re-adjust the last
 	const normalized = segs.map((s, idx) => {
-		let pct = Math.round(s.width * 10000) / 100 // keep 2 decimals
+		let pct = Math.round(s.width * 10000) / 100
 		if (idx === segs.length - 1) {
 			pct = Math.max(0, 100 - acc)
 		}
@@ -529,6 +562,41 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	background-position: unset !important;
 	background-attachment: unset !important;
 }
+
+$flash-colors: 'green', 'blue', 'purple', 'orange', 'red';
+@each $color in $flash-colors {
+	@keyframes flash-#{$color} {
+		0%,
+		100% {
+			color: inherit;
+		}
+		50% {
+			color: var(--color-#{$color});
+		}
+	}
+
+	.animate-flash-#{$color} {
+		animation: flash-#{$color} 1.5s ease-in-out infinite;
+	}
+
+	.text-#{$color}.animate-flash-color {
+		animation: flash-#{$color} 1.5s ease-in-out infinite;
+	}
+}
+
+@keyframes flash-gray {
+	0%,
+	100% {
+		color: inherit;
+	}
+	50% {
+		color: var(--color-divider-dark);
+	}
+}
+
+.animate-flash-gray {
+	animation: flash-gray 1s ease-in-out infinite;
+}
 </style>
 
 <style>

From ae336bd8d6d2c2d04d5c8225d4f305ce525eb844 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 00:09:15 +0100
Subject: [PATCH 36/49] fix: lint

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |  20 +--
 .../ui/dashboard/CreatorWithdrawModal.vue     |  17 +--
 .../ui/servers/FileManagerError.vue           |   2 +-
 apps/frontend/src/pages/dashboard.vue         |   2 +-
 .../src/pages/dashboard/revenue/index.vue     |  12 +-
 apps/frontend/src/pages/settings.vue          | 142 +++++++++---------
 .../ui/src/components/base/Admonition.vue     |   2 +-
 packages/ui/src/components/base/Combobox.vue  |  18 ++-
 packages/ui/src/components/index.ts           |   8 +-
 9 files changed, 110 insertions(+), 113 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index f4976df166..d97bf387a8 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -84,6 +84,15 @@ import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1
 const { addNotification } = injectNotificationManager()
 
 const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
+
+async function startTaxForm(e: MouseEvent) {
+	taxFormModal.value?.show(e)
+}
+
+defineExpose({
+	startTaxForm,
+})
+
 const auth = await useAuth()
 
 const isUSCitizen = ref<'yes' | 'no' | null>(null)
@@ -119,17 +128,8 @@ const canContinue = computed(() => {
 	return false
 })
 
-async function startTaxForm(e: MouseEvent) {
-	taxFormModal.value?.show(e)
-}
-
-defineExpose({
-	startTaxForm,
-})
-
 const emit = defineEmits<{
-	(event: 'success'): void
-	(event: 'cancelled'): void
+	(event: 'success' | 'cancelled'): void
 }>()
 
 const avalaraState = ref<ReturnType<typeof useAvalara1099> | null>(null)
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index afad729a27..dc00e9cd77 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -146,21 +146,13 @@
 
 <script lang="ts" setup>
 import { ChevronRightIcon, FileTextIcon, TransferIcon, UnknownIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	Combobox,
-	injectNotificationManager,
-	NewModal,
-} from '@modrinth/ui'
+import { Admonition, ButtonStyled, Combobox, NewModal } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
 import { all } from 'iso-3166-1'
 import { nextTick } from 'vue'
 
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
-const { addNotification } = injectNotificationManager()
-
 type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
 
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
@@ -322,13 +314,6 @@ const canProceedToWithdraw = computed(() => {
 	)
 })
 
-const showPaymentDetails = computed(() => {
-	if (!paymentMethod.value) return false
-	if (paymentMethod.value.type === 'paypal') return !!props.userPayoutData?.paypal_address
-	if (paymentMethod.value.type === 'venmo') return !!props.userPayoutData?.venmo_handle
-	return false
-})
-
 function formatPaymentMethodName(method: PayoutMethod | null): string {
 	if (!method) return ''
 	return method.name
diff --git a/apps/frontend/src/components/ui/servers/FileManagerError.vue b/apps/frontend/src/components/ui/servers/FileManagerError.vue
index e451008a1c..c9e984daf7 100644
--- a/apps/frontend/src/components/ui/servers/FileManagerError.vue
+++ b/apps/frontend/src/components/ui/servers/FileManagerError.vue
@@ -2,7 +2,7 @@
 	<div class="flex h-full w-full items-center justify-center gap-6 p-20">
 		<FileIcon class="size-28" />
 		<div class="flex flex-col gap-2">
-			<h3 class="text-red-500 m-0 text-2xl font-bold">{{ title }}</h3>
+			<h3 class="m-0 text-2xl font-bold text-red-500">{{ title }}</h3>
 			<p class="m-0 text-sm text-secondary">
 				{{ message }}
 			</p>
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index b93bfbd83d..d425113e68 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -27,12 +27,12 @@
 </template>
 <script setup>
 import {
+	BellIcon as NotificationsIcon,
 	ChartIcon,
 	CurrencyIcon,
 	DashboardIcon,
 	LibraryIcon,
 	ListIcon,
-	BellIcon as NotificationsIcon,
 	OrganizationIcon,
 	ReportIcon,
 } from '@modrinth/assets'
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 0673f689ca..b4ec10c6fe 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -69,7 +69,7 @@
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
 						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" noAutoFocus>
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
 							<nuxt-link
 								class="inline-flex items-center justify-center text-link"
 								to="/legal/cmp-info#pending"
@@ -103,7 +103,7 @@
 							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
 						Processing
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" noAutoFocus>
+						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
 							<InProgressIcon class="inline-block size-5 align-middle" />
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
@@ -186,7 +186,11 @@
 				>
 			</div>
 			<div v-if="sortedPayouts.length > 0">
-				<div v-for="transaction in sortedPayouts.slice(0, 3)" class="flex flex-row gap-3">
+				<div
+					v-for="transaction in sortedPayouts.slice(0, 3)"
+					:key="transaction.id || transaction.created"
+					class="flex flex-row gap-3"
+				>
 					<div
 						class="flex size-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised shadow-md"
 					>
@@ -333,7 +337,7 @@ const { data: payouts, refresh: refreshPayouts } = await useAsyncData<PayoutList
 const sortedPayouts = computed<PayoutList>(() => {
 	if (!payouts.value) return []
 
-	return payouts.value.sort((a, b) => {
+	return [...payouts.value].sort((a, b) => {
 		return new Date(b.created).getTime() - new Date(a.created).getTime()
 	})
 })
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index 3fa89e8f23..68136dcb58 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -5,77 +5,77 @@
 		</div>
 		<div class="normal-page">
 			<div class="normal-page__sidebar">
-        <NavStack
-          :items="
-            [
-              { type: 'heading', label: 'Display' },
-              {
-                link: '/settings',
-                label: formatMessage(commonSettingsMessages.appearance),
-                icon: PaintbrushIcon,
-              },
-              isStaging
-                ? {
-                    link: '/settings/language',
-                    label: formatMessage(commonSettingsMessages.language),
-                    icon: LanguagesIcon,
-                    badge: `${formatMessage(commonMessages.beta)}`,
-                  }
-                : null,
-              auth.user ? { type: 'heading', label: 'Account' } : null,
-              auth.user
-                ? {
-                    link: '/settings/profile',
-                    label: formatMessage(commonSettingsMessages.profile),
-                    icon: UserIcon,
-                  }
-                : null,
-              auth.user
-                ? {
-                    link: '/settings/account',
-                    label: formatMessage(commonSettingsMessages.account),
-                    icon: ShieldIcon,
-                  }
-                : null,
-              auth.user
-                ? {
-                    link: '/settings/authorizations',
-                    label: formatMessage(commonSettingsMessages.authorizedApps),
-                    icon: GridIcon,
-                  }
-                : null,
-              auth.user
-                ? {
-                    link: '/settings/sessions',
-                    label: formatMessage(commonSettingsMessages.sessions),
-                    icon: MonitorSmartphoneIcon,
-                  }
-                : null,
-              auth.user
-                ? {
-                    link: '/settings/billing',
-                    label: formatMessage(commonSettingsMessages.billing),
-                    icon: CardIcon,
-                  }
-                : null,
-              auth.user ? { type: 'heading', label: 'Developer' } : null,
-              auth.user
-                ? {
-                    link: '/settings/pats',
-                    label: formatMessage(commonSettingsMessages.pats),
-                    icon: KeyIcon,
-                  }
-                : null,
-              auth.user
-                ? {
-                    link: '/settings/applications',
-                    label: formatMessage(commonSettingsMessages.applications),
-                    icon: ServerIcon,
-                  }
-                : null,
-            ].filter(Boolean)
-          "
-        />
+				<NavStack
+					:items="
+						[
+							{ type: 'heading', label: 'Display' },
+							{
+								link: '/settings',
+								label: formatMessage(commonSettingsMessages.appearance),
+								icon: PaintbrushIcon,
+							},
+							isStaging
+								? {
+										link: '/settings/language',
+										label: formatMessage(commonSettingsMessages.language),
+										icon: LanguagesIcon,
+										badge: `${formatMessage(commonMessages.beta)}`,
+									}
+								: null,
+							auth.user ? { type: 'heading', label: 'Account' } : null,
+							auth.user
+								? {
+										link: '/settings/profile',
+										label: formatMessage(commonSettingsMessages.profile),
+										icon: UserIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/account',
+										label: formatMessage(commonSettingsMessages.account),
+										icon: ShieldIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/authorizations',
+										label: formatMessage(commonSettingsMessages.authorizedApps),
+										icon: GridIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/sessions',
+										label: formatMessage(commonSettingsMessages.sessions),
+										icon: MonitorSmartphoneIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/billing',
+										label: formatMessage(commonSettingsMessages.billing),
+										icon: CardIcon,
+									}
+								: null,
+							auth.user ? { type: 'heading', label: 'Developer' } : null,
+							auth.user
+								? {
+										link: '/settings/pats',
+										label: formatMessage(commonSettingsMessages.pats),
+										icon: KeyIcon,
+									}
+								: null,
+							auth.user
+								? {
+										link: '/settings/applications',
+										label: formatMessage(commonSettingsMessages.applications),
+										icon: ServerIcon,
+									}
+								: null,
+						].filter(Boolean)
+					"
+				/>
 			</div>
 			<div class="normal-page__content">
 				<NuxtPage :route="route" />
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index bdf1322352..13097939d3 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -5,7 +5,7 @@
 			typeClasses[type],
 		]"
 	>
-		<slot name="icon" :iconClass="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]">
+		<slot name="icon" :icon-class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]">
 			<component
 				:is="icons[type]"
 				:class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 90dfdc37fa..ea66c23d15 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -121,12 +121,21 @@
 <script setup lang="ts" generic="T">
 import { ChevronLeftIcon, SearchIcon } from '@modrinth/assets'
 import { onClickOutside } from '@vueuse/core'
-import { computed, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+import {
+	type Component,
+	computed,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	useSlots,
+	watch,
+} from 'vue'
 
 export interface DropdownOption<T> {
 	value: T
 	label: string
-	icon?: any
+	icon?: Component
 	disabled?: boolean
 	class?: string
 	type?: 'button' | 'link' | 'divider'
@@ -203,9 +212,8 @@ const triggerClasses = computed(() => {
 
 const selectedOption = computed<DropdownOption<T> | undefined>(() => {
 	return props.options.find(
-		(opt) =>
-			(opt as any).type !== 'divider' && (opt as DropdownOption<T>).value === props.modelValue,
-	) as DropdownOption<T> | undefined
+		(opt): opt is DropdownOption<T> => 'value' in opt && opt.value === props.modelValue,
+	)
 })
 
 const triggerText = computed(() => {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index b1ee194a2e..c820defa7a 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -20,16 +20,16 @@ export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
 export { default as ErrorInformationCard } from './base/ErrorInformationCard.vue'
 export { default as FileInput } from './base/FileInput.vue'
-export { default as FilterBar } from './base/FilterBar.vue'
 export type { FilterBarOption } from './base/FilterBar.vue'
+export { default as FilterBar } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as IconSelect } from './base/IconSelect.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
 export { default as OptionGroup } from './base/OptionGroup.vue'
-export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
+export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export { default as Page } from './base/Page.vue'
 export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
@@ -63,16 +63,16 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 
 // Content
 export { default as ContentListPanel } from './content/ContentListPanel.vue'
-export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
 export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
+export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
 
 // Modals
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as NewModal } from './modal/NewModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
-export { default as TabbedModal } from './modal/TabbedModal.vue'
 export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
+export { default as TabbedModal } from './modal/TabbedModal.vue'
 
 // Navigation
 export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'

From 7473d0b6f130562b497a5b09b571b2c2876a0e51 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 13:07:25 +0100
Subject: [PATCH 37/49] feat: qa border gradient

---
 .../src/pages/dashboard/revenue/index.vue     | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index b4ec10c6fe..17ce12f14b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -19,9 +19,9 @@
 				>
 			</div>
 
-			<div class="flex h-3 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
+			<div class="flex h-4 w-full gap-2 overflow-hidden rounded-full bg-bg-raised">
 				<div
-					v-for="seg in segments"
+					v-for="(seg, index) in segments"
 					:key="seg.key"
 					class="h-full"
 					:style="{ width: seg.widthPct }"
@@ -29,8 +29,12 @@
 					@mouseleave="hoveredSeg = null"
 				>
 					<span
-						class="block h-full w-full transition duration-150 hover:brightness-150"
-						:class="seg.class"
+						class="gradient-border block h-full w-full transition duration-150 hover:brightness-150"
+						:class="[
+							seg.class,
+							index === 0 ? 'rounded-l-full' : '',
+							index === segments.length - 1 ? 'rounded-r-full' : '',
+						]"
 					></span>
 				</div>
 			</div>
@@ -42,8 +46,8 @@
 					<span
 						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						:class="{ 'animate-flash-green text-green': hoveredSeg === 'available' }"
-						><span class="my-auto block size-4 rounded-full bg-brand-green"></span> Available
-						now</span
+						><span class="gradient-border my-auto block size-4 rounded-full bg-brand-green"></span>
+						Available now</span
 					>
 					<span
 						class="text-2xl font-bold text-contrast"
@@ -65,7 +69,7 @@
 						}"
 					>
 						<span
-							class="zone--striped-small my-auto block size-4 rounded-full"
+							class="zone--striped-small gradient-border my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
 						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
@@ -100,7 +104,7 @@
 						:class="{ 'animate-flash-gray text-gray-500': hoveredSeg === 'processing' }"
 					>
 						<span
-							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90"
+							class="zone--striped-small zone--striped--gray gradient-border my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
 						Processing
 						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
@@ -466,7 +470,7 @@ const segments = computed<RevenueBarSegment[]>(() => {
 	if (available > 0) {
 		segs.push({
 			key: 'available',
-			class: 'bg-gradient-to-r from-green to-green-700',
+			class: 'bg-gradient-to-r from-green-500 to-green-800',
 			width: available / total,
 			amount: available,
 		})
@@ -601,6 +605,24 @@ $flash-colors: 'green', 'blue', 'purple', 'orange', 'red';
 .animate-flash-gray {
 	animation: flash-gray 1s ease-in-out infinite;
 }
+
+.gradient-border {
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
+		border-radius: inherit;
+		mask:
+			linear-gradient(#fff 0 0) content-box,
+			linear-gradient(#fff 0 0);
+		mask-composite: xor;
+		padding: 2px;
+		pointer-events: none;
+	}
+}
 </style>
 
 <style>

From b033be42b45eca6992e195e63e1196e281e057da Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 13:10:06 +0100
Subject: [PATCH 38/49] fix: seg hover flashes

---
 .../src/pages/dashboard/revenue/index.vue     | 39 ++++---------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 17ce12f14b..6577447e40 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -43,15 +43,13 @@
 				<div
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span
-						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
-						:class="{ 'animate-flash-green text-green': hoveredSeg === 'available' }"
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						><span class="gradient-border my-auto block size-4 rounded-full bg-brand-green"></span>
 						Available now</span
 					>
 					<span
 						class="text-2xl font-bold text-contrast"
-						:class="{ 'animate-flash-green text-green': hoveredSeg === 'available' }"
+						:class="{ 'animate-flash-green': hoveredSeg === 'available' }"
 						>{{ formatMoney(totalAvailable) }}</span
 					>
 				</div>
@@ -61,13 +59,7 @@
 					:key="date.date"
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span
-						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
-						:class="{
-							[date.textClass]: hoveredSeg === `upcoming-${date.date}-${i}`,
-							'animate-flash-color': hoveredSeg === `upcoming-${date.date}-${i}`,
-						}"
-					>
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none">
 						<span
 							class="zone--striped-small gradient-border my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
@@ -99,10 +91,7 @@
 				</div>
 
 				<div class="flex flex-row justify-between p-2">
-					<span
-						class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
-						:class="{ 'animate-flash-gray text-gray-500': hoveredSeg === 'processing' }"
-					>
+					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none">
 						<span
 							class="zone--striped-small zone--striped--gray gradient-border my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
@@ -119,7 +108,7 @@
 					</span>
 					<span
 						class="text-2xl font-bold text-contrast"
-						:class="{ 'animate-flash-gray text-gray-500': hoveredSeg === 'processing' }"
+						:class="{ 'animate-flash-gray': hoveredSeg === 'processing' }"
 						>{{ formatMoney(processingDate?.amount ?? 0) }}</span
 					>
 				</div>
@@ -571,12 +560,12 @@ $striped-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	background-attachment: unset !important;
 }
 
-$flash-colors: 'green', 'blue', 'purple', 'orange', 'red';
+$flash-colors: 'green', 'blue', 'purple', 'orange', 'red', 'gray';
 @each $color in $flash-colors {
 	@keyframes flash-#{$color} {
 		0%,
 		100% {
-			color: inherit;
+			color: var(--color-contrast);
 		}
 		50% {
 			color: var(--color-#{$color});
@@ -592,20 +581,6 @@ $flash-colors: 'green', 'blue', 'purple', 'orange', 'red';
 	}
 }
 
-@keyframes flash-gray {
-	0%,
-	100% {
-		color: inherit;
-	}
-	50% {
-		color: var(--color-divider-dark);
-	}
-}
-
-.animate-flash-gray {
-	animation: flash-gray 1s ease-in-out infinite;
-}
-
 .gradient-border {
 	position: relative;
 

From 960a87c5ea77b5f140770278005c82038edb8328 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 14:19:06 +0100
Subject: [PATCH 39/49] feat: i18n

---
 .../instructions/i18n-convert.instructions.md |  71 ++++++++++++
 apps/frontend/src/locales/en-US/index.json    |  42 +++++++
 .../src/pages/dashboard/revenue/index.vue     | 108 ++++++++++++++----
 3 files changed, 200 insertions(+), 21 deletions(-)
 create mode 100644 .github/instructions/i18n-convert.instructions.md

diff --git a/.github/instructions/i18n-convert.instructions.md b/.github/instructions/i18n-convert.instructions.md
new file mode 100644
index 0000000000..44a98ce4bc
--- /dev/null
+++ b/.github/instructions/i18n-convert.instructions.md
@@ -0,0 +1,71 @@
+---
+applyTo: '**/*.vue'
+---
+
+You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using @vintl/vintl-nuxt (which wraps FormatJS).
+
+Please follow these rules precisely:
+
+1. Identify translatable strings
+
+- Scan the <template> for all user-visible strings (inner text, alt attributes, placeholders, button labels, etc.). Do not extract dynamic expressions (like {{ user.name }}) or HTML tags. Only extract static human-readable text.
+
+2. Create message definitions
+
+- In the <script setup> block, import `defineMessage` or `defineMessages` from `@vintl/vintl`.
+- For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
+  Example:
+  const messages = defineMessages({
+  welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
+  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You’re now part of the community…' },
+  })
+
+3. Handle variables and ICU formats
+
+- Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
+- For numbers/dates/times, use ICU/FormatJS options (e.g., currency): `{price, number, ::currency/USD}`
+- For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
+
+4. Rich-text messages (links/markup)
+
+- In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
+  "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
+- Render rich-text messages with `<IntlFormatted>` from `@vintl/vintl/components` and map tags via `values`:
+  <IntlFormatted
+    :message="messages.tosLabel"
+    :values="{
+      'terms-link': (chunks) => <NuxtLink to='/terms'>{chunks}</NuxtLink>,
+      'privacy-link': (chunks) => <NuxtLink to='/privacy'>{chunks}</NuxtLink>,
+    }"
+  />
+- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` and map `'strong': (c) => <strong>{c}</strong>`
+
+5. Formatting in templates
+
+- Import and use `useVIntl()`; prefer `formatMessage` for simple strings:
+  `const { formatMessage } = useVIntl()`
+  `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
+- Vue methods like `$formatMessage`, `$formatNumber`, `$formatDate` are also available if needed.
+
+6. Naming conventions and id stability
+
+- Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
+
+7. Avoid Vue/ICU delimiter collisions
+
+- If an ICU placeholder would end right before `}}` in a Vue template, insert a space so it becomes `} }` to avoid parsing issues.
+
+8. Update imports and remove literals
+
+- Ensure imports for `defineMessage`/`defineMessages`, `useVIntl`, and `<IntlFormatted>` are present. Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
+
+9. Preserve functionality
+
+- Do not change logic, layout, reactivity, or bindings—only refactor strings into i18n.
+
+Use existing patterns from our codebase:
+
+- Variables/plurals: see `apps/frontend/src/pages/frog.vue`
+- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+
+When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 2f4bb73067..0a507ecc1e 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -425,6 +425,48 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
+  "dashboard.revenue.available-now": {
+    "message": "Available now"
+  },
+  "dashboard.revenue.balance": {
+    "message": "Balance"
+  },
+  "dashboard.revenue.estimated-tooltip.msg1": {
+    "message": "Estimated revenue may be subject to change until it is made available."
+  },
+  "dashboard.revenue.estimated-tooltip.msg2": {
+    "message": "Click to read about how Modrinth handles your revenue."
+  },
+  "dashboard.revenue.estimated-with-date": {
+    "message": "Estimated {date}"
+  },
+  "dashboard.revenue.processing": {
+    "message": "Processing"
+  },
+  "dashboard.revenue.processing.tooltip": {
+    "message": "Revenue stays in processing until the end of the month, then becomes available 60 days later."
+  },
+  "dashboard.revenue.tos": {
+    "message": "By uploading projects to Modrinth and withdrawing money from your account, you agree to our <terms-link>Rewards Program Terms</terms-link>. Learn more about the <info-link>Reward Program</info-link>."
+  },
+  "dashboard.revenue.transactions.header": {
+    "message": "Transactions"
+  },
+  "dashboard.revenue.transactions.none": {
+    "message": "No transactions found"
+  },
+  "dashboard.revenue.transactions.see-all": {
+    "message": "See all"
+  },
+  "dashboard.revenue.withdraw.card.description": {
+    "message": "Withdraw from your available balance to any payout method."
+  },
+  "dashboard.revenue.withdraw.card.title": {
+    "message": "Withdraw"
+  },
+  "dashboard.revenue.withdraw.header": {
+    "message": "Withdraw"
+  },
   "error.collection.404.list_item.1": {
     "message": "You may have mistyped the collection's URL."
   },
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 6577447e40..54986bb4fe 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -12,7 +12,9 @@
 	<div class="mb-6 flex flex-col gap-8 p-12 py-0">
 		<div class="flex flex-col gap-5">
 			<div class="flex flex-col">
-				<span class="text-2xl font-semibold text-contrast">Balance</span>
+				<span class="text-2xl font-semibold text-contrast">{{
+					formatMessage(messages.balanceLabel)
+				}}</span>
 				<span
 					class="bg-gradient-to-r from-brand-purple via-brand-orange via-20% to-brand-orange bg-clip-text text-4xl font-extrabold text-transparent"
 					>{{ formatMoney(grandTotal) }}</span
@@ -45,7 +47,7 @@
 				>
 					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
 						><span class="gradient-border my-auto block size-4 rounded-full bg-brand-green"></span>
-						Available now</span
+						{{ formatMessage(messages.availableNow) }}</span
 					>
 					<span
 						class="text-2xl font-bold text-contrast"
@@ -64,7 +66,11 @@
 							class="zone--striped-small gradient-border my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
-						Estimated {{ date.date ? dayjs(date.date).format('MMM D, YYYY') : '' }}
+						{{
+							formatMessage(messages.estimatedWithDate, {
+								date: date.date ? dayjs(date.date).format('MMM D, YYYY') : '',
+							})
+						}}
 						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
 							<nuxt-link
 								class="inline-flex items-center justify-center text-link"
@@ -74,8 +80,9 @@
 							</nuxt-link>
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
-									Estimated revenue may be subject to change until it is made available.<br /><br />Click
-									to read about how Modrinth handles your revenue.
+									{{ formatMessage(messages.estimatedTooltip1) }}
+									<br /><br />
+									{{ formatMessage(messages.estimatedTooltip2) }}
 								</div>
 							</template>
 						</Tooltip>
@@ -95,13 +102,12 @@
 						<span
 							class="zone--striped-small zone--striped--gray gradient-border my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
-						Processing
+						{{ formatMessage(messages.processing) }}
 						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
 							<InProgressIcon class="inline-block size-5 align-middle" />
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
-									Revenue stays in processing until the end of the month, then becomes available 60
-									days later.
+									{{ formatMessage(messages.processingTooltip) }}
 								</div>
 							</template>
 						</Tooltip>
@@ -116,18 +122,22 @@
 		</div>
 
 		<div class="flex flex-col gap-4">
-			<span class="text-2xl font-semibold text-contrast">Withdraw</span>
+			<span class="text-2xl font-semibold text-contrast">{{
+				formatMessage(messages.withdrawHeader)
+			}}</span>
 			<div class="grid grid-cols-3 gap-x-4 gap-y-2">
 				<button
 					class="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-green to-green-700 p-5 text-inverted shadow-md transition-all duration-200 hover:brightness-110"
 					@click="openWithdrawModal"
 				>
 					<div class="relative z-10 flex flex-row justify-between">
-						<span class="text-md font-semibold">Withdraw</span>
+						<span class="text-md font-semibold">{{
+							formatMessage(messages.withdrawCardTitle)
+						}}</span>
 						<ArrowUpRightIcon class="my-auto size-6" />
 					</div>
 					<div class="relative z-10 text-left text-sm font-medium">
-						Withdraw from your available balance to any payout method.
+						{{ formatMessage(messages.withdrawCardDescription) }}
 					</div>
 					<svg
 						aria-hidden="true"
@@ -161,21 +171,31 @@
 					</svg>
 				</button>
 			</div>
-			<span class="text-sm text-secondary"
-				>By uploading projects to Modrinth and withdrawing money from your account, you agree to the
-				<nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. Learn more
-				about the
-				<nuxt-link class="text-link" to="/legal/cmp-info">Reward Program</nuxt-link>.</span
-			>
+			<span class="text-sm text-secondary">
+				<IntlFormatted :message-id="messages.tosLabel">
+					<template #terms-link="{ children }">
+						<nuxt-link class="text-link" to="/legal/cmp">
+							<component :is="() => normalizeChildren(children)" />
+						</nuxt-link>
+					</template>
+					<template #info-link="{ children }">
+						<nuxt-link class="text-link" to="/legal/cmp-info">
+							<component :is="() => normalizeChildren(children)" />
+						</nuxt-link>
+					</template>
+				</IntlFormatted>
+			</span>
 		</div>
 
 		<div class="flex flex-col gap-4">
 			<div class="flex flex-row justify-between">
-				<span class="text-3xl font-semibold text-contrast">Transactions</span>
+				<span class="text-3xl font-semibold text-contrast">{{
+					formatMessage(messages.transactionsHeader)
+				}}</span>
 				<nuxt-link
 					class="my-auto font-semibold text-contrast underline underline-offset-2"
 					to="/dashboard/revenue/transfers"
-					>See all</nuxt-link
+					>{{ formatMessage(messages.seeAll) }}</nuxt-link
 				>
 			</div>
 			<div v-if="sortedPayouts.length > 0">
@@ -206,7 +226,7 @@
 				</div>
 			</div>
 			<div v-else class="rounded-xl border border-button-bg p-4 text-secondary">
-				No transactions found
+				{{ formatMessage(messages.noTransactions) }}
 			</div>
 		</div>
 	</div>
@@ -223,11 +243,15 @@ import {
 	type PayoutMethodType,
 	type PayoutStatus,
 } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import { all } from 'iso-3166-1'
 
+import { normalizeChildren } from '@/utils/vue-children.ts'
 import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal.vue'
+const { formatMessage } = useVIntl()
 
 // TODO: Deduplicate in @modrinth/api-client PR.
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
@@ -247,7 +271,6 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
-// Types for payout methods and related shapes
 type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
 interface PayoutMethodFee {
 	percentage: number
@@ -291,6 +314,49 @@ async function openWithdrawModal() {
 	withdrawModal.value?.show?.()
 }
 
+const messages = defineMessages({
+	balanceLabel: { id: 'dashboard.revenue.balance', defaultMessage: 'Balance' },
+	availableNow: { id: 'dashboard.revenue.available-now', defaultMessage: 'Available now' },
+	estimatedWithDate: {
+		id: 'dashboard.revenue.estimated-with-date',
+		defaultMessage: 'Estimated {date}',
+	},
+	estimatedTooltip1: {
+		id: 'dashboard.revenue.estimated-tooltip.msg1',
+		defaultMessage: 'Estimated revenue may be subject to change until it is made available.',
+	},
+	estimatedTooltip2: {
+		id: 'dashboard.revenue.estimated-tooltip.msg2',
+		defaultMessage: 'Click to read about how Modrinth handles your revenue.',
+	},
+	processing: { id: 'dashboard.revenue.processing', defaultMessage: 'Processing' },
+	processingTooltip: {
+		id: 'dashboard.revenue.processing.tooltip',
+		defaultMessage:
+			'Revenue stays in processing until the end of the month, then becomes available 60 days later.',
+	},
+	withdrawHeader: { id: 'dashboard.revenue.withdraw.header', defaultMessage: 'Withdraw' },
+	withdrawCardTitle: { id: 'dashboard.revenue.withdraw.card.title', defaultMessage: 'Withdraw' },
+	withdrawCardDescription: {
+		id: 'dashboard.revenue.withdraw.card.description',
+		defaultMessage: 'Withdraw from your available balance to any payout method.',
+	},
+	tosLabel: {
+		id: 'dashboard.revenue.tos',
+		defaultMessage:
+			'By uploading projects to Modrinth and withdrawing money from your account, you agree to our <terms-link>Rewards Program Terms</terms-link>. Learn more about the <info-link>Reward Program</info-link>.',
+	},
+	transactionsHeader: {
+		id: 'dashboard.revenue.transactions.header',
+		defaultMessage: 'Transactions',
+	},
+	seeAll: { id: 'dashboard.revenue.transactions.see-all', defaultMessage: 'See all' },
+	noTransactions: {
+		id: 'dashboard.revenue.transactions.none',
+		defaultMessage: 'No transactions found',
+	},
+})
+
 function formatTransactionStatus(status: PayoutStatus) {
 	switch (status) {
 		case 'in-transit':

From d1159b54da5cefb544726e8340887cf473db4b08 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 14:59:22 +0100
Subject: [PATCH 40/49] feat: i18n and final QA

---
 .../ui/dashboard/CreatorTaxFormModal.vue      | 107 +++++---
 .../ui/dashboard/CreatorWithdrawModal.vue     | 251 +++++++++++++++---
 2 files changed, 285 insertions(+), 73 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index d97bf387a8..854ddcb2ce 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -1,29 +1,34 @@
 <template>
-	<NewModal ref="taxFormModal" header="Submitting tax form" :closable="false">
-		<div class="max-w-[40rem]">
-			<Admonition
-				type="info"
-				header="Modrinth uses third-party provider Track1099 to securely collect and store your tax forms."
-			>
-				<a
-					href="https://www.track1099.com/info/security"
-					class="flex w-fit flex-row gap-1 align-middle text-link"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Learn more about their security practices here. <ExternalIcon class="my-auto" />
-				</a>
+	<NewModal ref="taxFormModal" :header="formatMessage(messages.taxFormHeader)">
+		<div class="w-full sm:w-[540px]">
+			<Admonition type="info" :header="formatMessage(messages.securityHeader)">
+				<IntlFormatted :message-id="messages.securityDescription">
+					<template #security-link="{ children }">
+						<a
+							href="https://www.track1099.com/info/security"
+							class="flex w-fit flex-row gap-1 align-middle text-link"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<component :is="() => normalizeChildren(children)" />
+							<ExternalIcon class="my-auto" />
+						</a>
+					</template>
+				</IntlFormatted>
 			</Admonition>
 			<div class="mt-4 flex flex-col gap-2">
 				<label>
 					<span class="text-lg font-semibold text-contrast">
-						Are you a US citizen?
+						{{ formatMessage(messages.usCitizenQuestion) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
 				<Chips
 					v-model="isUSCitizen"
 					:items="['yes', 'no']"
+					:format-label="
+						(item) => (item === 'yes' ? formatMessage(messages.yes) : formatMessage(messages.no))
+					"
 					:never-empty="false"
 					:capitalize="true"
 				/>
@@ -40,19 +45,21 @@
 				<div v-if="isUSCitizen === 'no'" class="flex flex-col gap-1">
 					<label class="mt-4">
 						<span class="text-lg font-semibold text-contrast">
-							Are you a private individual or part of a foreign entity?
+							{{ formatMessage(messages.entityQuestion) }}
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
 					<span class="text-md leading-tight">
-						A foreign entity means a business entity organized outside the United States (such as a
-						non-US corporation, partnership, or LLC).
+						{{ formatMessage(messages.entityDescription) }}
 					</span>
 					<Chips
 						v-model="entityType"
 						:items="['private-individual', 'foreign-entity']"
 						:format-label="
-							(item) => (item === 'private-individual' ? 'Private individual' : 'Foreign entity')
+							(item) =>
+								item === 'private-individual'
+									? formatMessage(messages.privateIndividual)
+									: formatMessage(messages.foreignEntity)
 						"
 						:never-empty="false"
 						:capitalize="false"
@@ -60,14 +67,14 @@
 					/>
 				</div>
 			</Transition>
-			<div class="mt-4 flex w-full flex-row justify-between gap-2">
+			<div class="mt-4 flex justify-end gap-3">
 				<ButtonStyled @click="handleCancel">
-					<button><XIcon /> Cancel</button>
+					<button><XIcon /> {{ formatMessage(messages.cancel) }}</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand">
+				<ButtonStyled>
 					<button :disabled="!canContinue || loading" @click="continueForm">
-						<template v-if="!loading">Continue <RightArrowIcon /></template>
-						<template v-else><SpinnerIcon class="animate-spin" /> Loading…</template>
+						{{ formatMessage(messages.continue) }}
+						<RightArrowIcon v-if="!loading" /> <SpinnerIcon class="animate-spin" v-else />
 					</button>
 				</ButtonStyled>
 			</div>
@@ -78,7 +85,10 @@
 <script setup lang="ts">
 import { ExternalIcon, RightArrowIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
 
+import { normalizeChildren } from '@/utils/vue-children.ts'
 import { type FormRequestResponse, useAvalara1099 } from '~/composables/avalara1099'
 
 const { addNotification } = injectNotificationManager()
@@ -95,6 +105,49 @@ defineExpose({
 
 const auth = await useAuth()
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	taxFormHeader: {
+		id: 'dashboard.creator-tax-form-modal.header',
+		defaultMessage: 'Tax form',
+	},
+	securityHeader: {
+		id: 'dashboard.creator-tax-form-modal.security.header',
+		defaultMessage: 'Security practices',
+	},
+	securityDescription: {
+		id: 'dashboard.creator-tax-form-modal.security.description',
+		defaultMessage:
+			'Modrinth uses third-party provider Track1099 to securely collect and store your tax forms. <security-link>Learn more here.</security-link>',
+	},
+	usCitizenQuestion: {
+		id: 'dashboard.creator-tax-form-modal.us-citizen.question',
+		defaultMessage: 'Are you a US citizen?',
+	},
+	yes: { id: 'common.yes', defaultMessage: 'Yes' },
+	no: { id: 'common.no', defaultMessage: 'No' },
+	entityQuestion: {
+		id: 'dashboard.creator-tax-form-modal.entity.question',
+		defaultMessage: 'Are you a private individual or part of a foreign entity?',
+	},
+	entityDescription: {
+		id: 'dashboard.creator-tax-form-modal.entity.description',
+		defaultMessage:
+			'A foreign entity means a business entity organized outside the United States (such as a non-US corporation, partnership, or LLC).',
+	},
+	privateIndividual: {
+		id: 'dashboard.creator-tax-form-modal.entity.private-individual',
+		defaultMessage: 'Private individual',
+	},
+	foreignEntity: {
+		id: 'dashboard.creator-tax-form-modal.entity.foreign-entity',
+		defaultMessage: 'Foreign entity',
+	},
+	cancel: { id: 'action.cancel', defaultMessage: 'Cancel' },
+	continue: { id: 'action.continue', defaultMessage: 'Continue' },
+})
+
 const isUSCitizen = ref<'yes' | 'no' | null>(null)
 const entityType = ref<'private-individual' | 'foreign-entity' | null>(null)
 
@@ -185,13 +238,7 @@ async function continueForm() {
 		}
 	} catch (error) {
 		console.error('Error occurred while continuing tax form:', error)
-		addNotification({
-			title: 'Error occurred while continuing tax form',
-			text: error instanceof Error ? error.message : String(error),
-			type: 'error',
-		})
 	} finally {
-		// Clear manual spinner when control returns to the app
 		manualLoading.value = false
 	}
 }
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index dc00e9cd77..f076fbf02d 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -10,7 +10,9 @@
 		<div class="flex w-full flex-col gap-4 sm:w-[540px]">
 			<template v-if="currentStage === 'withdraw-limit'">
 				<div class="flex w-full flex-row justify-between">
-					<span class="font-semibold text-contrast">Withdraw Remaining</span>
+					<span class="font-semibold text-contrast">{{
+						formatMessage(messages.withdrawRemaining)
+					}}</span>
 					<div>
 						<span class="text-orange">{{ formatMoney(remainingLimit) }}</span> /
 						{{ formatMoney(600) }}
@@ -20,57 +22,89 @@
 					<div class="bg-orange" :style="{ width: `${(usedLimit / 600) * 100}%` }"></div>
 				</div>
 				<template v-if="remainingLimit > 0">
-					<span
-						>You're nearing the {{ formatMoney(600) }} withdrawal threshold. You can withdraw up to
-						<b>{{ formatMoney(remainingLimit) }}</b> now, but you'll need to complete a tax form to
-						withdraw more.</span
+					<span>
+						<IntlFormatted
+							:message-id="messages.nearingThreshold"
+							:values="{
+								amount600: formatMoney(600),
+								amountRemaining: formatMoney(remainingLimit),
+							}"
+						>
+							<template #b="{ children }">
+								<b><component :is="() => normalizeChildren(children)" /></b>
+							</template>
+						</IntlFormatted>
+					</span>
+					<Admonition
+						type="warning"
+						show-actions-underneath
+						:header="formatMessage(messages.taxFormRequiredHeader)"
 					>
-					<Admonition type="warning" show-actions-underneath header="Tax form required">
-						To withdraw your full <b>{{ formatMoney(balance?.available) }}</b> available balance
-						please complete the form below. It is required for tax reporting and only needs to be
-						done once.
+						<span>
+							<IntlFormatted
+								:message-id="messages.taxFormRequiredBody"
+								:values="{ available: formatMoney(balance?.available) }"
+							>
+								<template #b="{ children }">
+									<b><component :is="() => normalizeChildren(children)" /></b>
+								</template>
+							</IntlFormatted>
+						</span>
 						<template #icon="{ iconClass }">
 							<FileTextIcon :class="iconClass" />
 						</template>
 						<template #actions>
 							<ButtonStyled color="orange">
-								<button @click="showTaxFormModal">Complete tax form</button>
+								<button @click="showTaxFormModal">
+									{{ formatMessage(messages.completeTaxForm) }}
+								</button>
 							</ButtonStyled>
 						</template>
 					</Admonition>
 				</template>
 				<template v-else>
 					<span>
-						You've used up your <b>{{ formatMoney(600) }}</b> withdrawal limit. You must complete a
-						tax form to withdraw more.
+						<IntlFormatted
+							:message-id="messages.withdrawLimitUsed"
+							:values="{ amount600: formatMoney(600) }"
+						>
+							<template #b="{ children }">
+								<b><component :is="() => normalizeChildren(children)" /></b>
+							</template>
+						</IntlFormatted>
 					</span>
 				</template>
 				<div class="ml-auto flex gap-3">
 					<ButtonStyled color="standard">
-						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
+						<button @click="withdrawModal?.hide()">
+							<XIcon />{{ formatMessage(messages.cancel) }}
+						</button>
 					</ButtonStyled>
 					<ButtonStyled v-if="remainingLimit > 0" color="standard">
 						<button @click="currentStage = 'withdraw-details'">
-							Continue with limit <ChevronRightIcon />
+							{{ formatMessage(messages.continueWithLimit) }} <ChevronRightIcon />
 						</button>
 					</ButtonStyled>
 					<ButtonStyled v-else color="orange">
-						<button @click="showTaxFormModal">Complete tax form <ChevronRightIcon /></button>
+						<button @click="showTaxFormModal">
+							{{ formatMessage(messages.completeTaxForm) }} <ChevronRightIcon />
+						</button>
 					</ButtonStyled>
 				</div>
 			</template>
 
 			<template v-if="currentStage === 'withdraw-details'">
-				<span class="font-semibold text-contrast">Withdraw from</span>
+				<span class="font-semibold text-contrast">{{ formatMessage(messages.withdrawFrom) }}</span>
 				<div class="flex flex-col rounded-xl bg-bg p-4">
-					<span class="text-sm text-primary">Available balance</span>
+					<span class="text-sm text-primary">{{ formatMessage(messages.availableBalance) }}</span>
 					<span class="font-semibold text-contrast">{{ formatMoney(balance?.available) }}</span>
 				</div>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>Region</span><span class="text-brand-red">*</span>
+					<span>{{ formatMessage(messages.region) }}</span
+					><span class="text-brand-red">*</span>
 					<UnknownIcon
-						v-tooltip="`Select your country or region`"
+						v-tooltip="formatMessage(messages.selectYourCountryOrRegion)"
 						class="my-auto size-4 text-secondary"
 					/>
 				</div>
@@ -79,12 +113,13 @@
 					:listbox="true"
 					:searchable="true"
 					:options="countryOptions"
-					placeholder="Select country..."
-					:display-value="countryProxy?.name ?? 'Select country...'"
+					:placeholder="formatMessage(messages.selectCountryPlaceholder)"
+					:display-value="countryProxy?.name ?? formatMessage(messages.selectCountryPlaceholder)"
 				/>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>Withdraw to</span><span class="text-brand-red">*</span>
+					<span>{{ formatMessage(messages.withdrawTo) }}</span
+					><span class="text-brand-red">*</span>
 				</div>
 				<div class="relative">
 					<Combobox
@@ -92,29 +127,36 @@
 						:listbox="true"
 						class="payment-method-select w-full"
 						:options="paymentMethodOptions"
-						placeholder="Select method..."
+						:placeholder="formatMessage(messages.selectMethodPlaceholder)"
 						:display-value="
-							paymentMethod ? formatPaymentMethodName(paymentMethod) : 'Select method...'
+							paymentMethod
+								? formatPaymentMethodName(paymentMethod)
+								: formatMessage(messages.selectMethodPlaceholder)
 						"
 					/>
 				</div>
 
 				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>Amount</span><span class="text-brand-red">*</span>
+					<span>{{ formatMessage(messages.amount) }}</span
+					><span class="text-brand-red">*</span>
 				</div>
-				<span class="text-secondary"
-					>The minimum transfer amount is {{ formatMoney(minWithdrawAmount) }}.</span
-				>
+				<span class="text-secondary">
+					{{
+						formatMessage(messages.minimumTransferAmount, { min: formatMoney(minWithdrawAmount) })
+					}}
+				</span>
 				<div class="flex items-center gap-0">
 					<input
 						v-model="withdrawAmount"
 						type="text"
 						pattern="^\d*(\.\d{0,2})?$"
-						placeholder="Enter amount..."
+						:placeholder="formatMessage(messages.enterAmountPlaceholder)"
 						class="flex-1 rounded-l-xl border-y border-l border-divider bg-button-bg px-4 py-2.5 placeholder-secondary focus:outline-none"
 					/>
 					<ButtonStyled color="standard" class="rounded-l-none">
-						<button @click="withdrawAmount = maxWithdrawAmount.toFixed(2)">Max</button>
+						<button @click="withdrawAmount = maxWithdrawAmount.toFixed(2)">
+							{{ formatMessage(messages.max) }}
+						</button>
 					</ButtonStyled>
 				</div>
 
@@ -124,12 +166,21 @@
 					</span>
 				</div>
 
-				<div class="mt-2 flex gap-3">
+				<div class="ml-auto mt-2 flex gap-3">
+					<ButtonStyled v-if="isDev" color="standard">
+						<button @click="showTaxFormModal($event)">
+							{{ formatMessage(messages.openTaxDebug) }}
+						</button>
+					</ButtonStyled>
 					<ButtonStyled color="standard">
-						<button @click="withdrawModal?.hide()"><XIcon />Cancel</button>
+						<button @click="withdrawModal?.hide()">
+							<XIcon />{{ formatMessage(messages.cancel) }}
+						</button>
 					</ButtonStyled>
 					<ButtonStyled color="green" :disabled="!canProceedToWithdraw">
-						<button @click="initiateWithdraw"><TransferIcon />Withdraw</button>
+						<button @click="initiateWithdraw">
+							<TransferIcon />{{ formatMessage(messages.actionWithdraw) }}
+						</button>
 					</ButtonStyled>
 				</div>
 			</template>
@@ -145,9 +196,12 @@
 </template>
 
 <script lang="ts" setup>
+import { normalizeChildren } from '@/utils/vue-children.ts'
 import { ChevronRightIcon, FileTextIcon, TransferIcon, UnknownIcon, XIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, Combobox, NewModal } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
 import { all } from 'iso-3166-1'
 import { nextTick } from 'vue'
 
@@ -284,22 +338,30 @@ const withdrawErrors = computed(() => {
 	const errors: string[] = []
 
 	if (!parsedWithdrawAmount.value && withdrawAmount.value.length > 0) {
-		errors.push(`${withdrawAmount.value} is not a valid amount`)
+		errors.push(formatMessage(messages.errorInvalidAmount, { input: withdrawAmount.value }))
 	} else if (parsedWithdrawAmount.value > maxWithdrawAmount.value) {
-		errors.push(`The amount must be no more than ${formatMoney(maxWithdrawAmount.value)}`)
+		errors.push(
+			formatMessage(messages.errorMaxAmount, {
+				max: formatMoney(maxWithdrawAmount.value),
+			}),
+		)
 	} else if (
 		parsedWithdrawAmount.value < minWithdrawAmount.value &&
 		parsedWithdrawAmount.value > 0
 	) {
-		errors.push(`The amount must be at least ${formatMoney(minWithdrawAmount.value)}`)
+		errors.push(
+			formatMessage(messages.errorMinAmount, {
+				min: formatMoney(minWithdrawAmount.value),
+			}),
+		)
 	}
 
 	if (paymentMethod.value?.type === 'paypal' && !props.userPayoutData?.paypal_address) {
-		errors.push('Please link your PayPal account to proceed.')
+		errors.push(formatMessage(messages.errorLinkPaypal))
 	}
 
 	if (paymentMethod.value?.type === 'venmo' && !props.userPayoutData?.venmo_handle) {
-		errors.push('Please set your Venmo handle to proceed.')
+		errors.push(formatMessage(messages.errorLinkVenmo))
 	}
 
 	return errors
@@ -344,15 +406,15 @@ function onTaxFormCancelled() {
 	show('withdraw-limit')
 }
 
-const stageLabels = readonly<Record<Stage, string | undefined>>({
-	'withdraw-limit': 'Withdraw Limit',
-	'withdraw-details': 'Withdraw Details',
+const stageLabels = computed<Record<Stage, string | undefined>>(() => ({
+	'withdraw-limit': formatMessage(messages.withdrawHeader),
+	'withdraw-details': formatMessage(messages.withdrawHeader),
 	confirmation: undefined,
-})
+}))
 
 const currentStageLabel = computed<string | undefined>(() => {
 	if (!currentStage.value) return undefined
-	return stageLabels[currentStage.value]
+	return stageLabels.value[currentStage.value]
 })
 
 const withdrawModal = ref<InstanceType<typeof NewModal> | null>(null)
@@ -402,4 +464,107 @@ watch(
 defineExpose({
 	show,
 })
+
+const isDev = import.meta.dev
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	withdrawHeader: {
+		id: 'dashboard.creator-withdraw-modal.withdraw.header',
+		defaultMessage: 'Withdraw',
+	},
+	withdrawRemaining: {
+		id: 'dashboard.creator-withdraw-modal.withdraw-remaining',
+		defaultMessage: 'Withdraw remaining',
+	},
+	withdrawFrom: {
+		id: 'dashboard.creator-withdraw-modal.withdraw-from',
+		defaultMessage: 'Withdraw from',
+	},
+	availableBalance: {
+		id: 'dashboard.creator-withdraw-modal.available-balance',
+		defaultMessage: 'Available balance',
+	},
+	region: { id: 'dashboard.creator-withdraw-modal.region', defaultMessage: 'Region' },
+	withdrawTo: { id: 'dashboard.creator-withdraw-modal.withdraw-to', defaultMessage: 'Withdraw to' },
+	amount: { id: 'dashboard.creator-withdraw-modal.amount', defaultMessage: 'Amount' },
+	selectYourCountryOrRegion: {
+		id: 'dashboard.creator-withdraw-modal.tooltip.select-country-region',
+		defaultMessage: 'Select your country or region',
+	},
+	selectCountryPlaceholder: {
+		id: 'dashboard.creator-withdraw-modal.placeholder.select-country',
+		defaultMessage: 'Select country...',
+	},
+	selectMethodPlaceholder: {
+		id: 'dashboard.creator-withdraw-modal.placeholder.select-method',
+		defaultMessage: 'Select method...',
+	},
+	enterAmountPlaceholder: {
+		id: 'dashboard.creator-withdraw-modal.placeholder.enter-amount',
+		defaultMessage: 'Enter amount...',
+	},
+	max: { id: 'action.max', defaultMessage: 'Max' },
+	nearingThreshold: {
+		id: 'dashboard.creator-withdraw-modal.nearing-threshold',
+		defaultMessage:
+			"You're nearing the {amount600} withdrawal threshold. You can withdraw up to <b>{amountRemaining}</b> now, but you'll need to complete a tax form to withdraw more.",
+	},
+	taxFormRequiredHeader: {
+		id: 'dashboard.creator-withdraw-modal.tax-form-required.header',
+		defaultMessage: 'Tax form required',
+	},
+	taxFormRequiredBody: {
+		id: 'dashboard.creator-withdraw-modal.tax-form-required.body',
+		defaultMessage:
+			'To withdraw your full <b>{available}</b> available balance please complete the form below. It is required for tax reporting and only needs to be done once.',
+	},
+	completeTaxForm: {
+		id: 'dashboard.creator-withdraw-modal.complete-tax-form',
+		defaultMessage: 'Complete tax form',
+	},
+	withdrawLimitUsed: {
+		id: 'dashboard.creator-withdraw-modal.withdraw-limit-used',
+		defaultMessage:
+			"You've used up your <b>{amount600}</b> withdrawal limit. You must complete a tax form to withdraw more.",
+	},
+	continueWithLimit: {
+		id: 'dashboard.creator-withdraw-modal.continue-with-limit',
+		defaultMessage: 'Continue with limit',
+	},
+
+	minimumTransferAmount: {
+		id: 'dashboard.creator-withdraw-modal.minimum-transfer-amount',
+		defaultMessage: 'The minimum transfer amount is {min}.',
+	},
+
+	cancel: { id: 'action.cancel', defaultMessage: 'Cancel' },
+	actionWithdraw: { id: 'action.withdraw', defaultMessage: 'Withdraw' },
+
+	errorInvalidAmount: {
+		id: 'dashboard.creator-withdraw-modal.error.invalid-amount',
+		defaultMessage: '{input} is not a valid amount',
+	},
+	errorMaxAmount: {
+		id: 'dashboard.creator-withdraw-modal.error.max-amount',
+		defaultMessage: 'The amount must be no more than {max}',
+	},
+	errorMinAmount: {
+		id: 'dashboard.creator-withdraw-modal.error.min-amount',
+		defaultMessage: 'The amount must be at least {min}',
+	},
+	errorLinkPaypal: {
+		id: 'dashboard.creator-withdraw-modal.error.link-paypal',
+		defaultMessage: 'Please link your PayPal account to proceed.',
+	},
+	errorLinkVenmo: {
+		id: 'dashboard.creator-withdraw-modal.error.link-venmo',
+		defaultMessage: 'Please set your Venmo handle to proceed.',
+	},
+	openTaxDebug: {
+		id: 'creator.withdraw.debug.openTaxForm',
+		defaultMessage: 'Open tax form (debug)',
+	},
+})
 </script>

From 39aced580ff4d193d225c387aa021e4fac7f242b Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 13 Sep 2025 15:00:33 +0100
Subject: [PATCH 41/49] fix: lint

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |   2 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     |   3 +-
 apps/frontend/src/locales/en-US/index.json    | 114 ++++++++++++++++++
 3 files changed, 117 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index 854ddcb2ce..ef5a0b26d9 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -74,7 +74,7 @@
 				<ButtonStyled>
 					<button :disabled="!canContinue || loading" @click="continueForm">
 						{{ formatMessage(messages.continue) }}
-						<RightArrowIcon v-if="!loading" /> <SpinnerIcon class="animate-spin" v-else />
+						<RightArrowIcon v-if="!loading" /> <SpinnerIcon v-else class="animate-spin" />
 					</button>
 				</ButtonStyled>
 			</div>
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index f076fbf02d..e990a33a43 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -196,7 +196,6 @@
 </template>
 
 <script lang="ts" setup>
-import { normalizeChildren } from '@/utils/vue-children.ts'
 import { ChevronRightIcon, FileTextIcon, TransferIcon, UnknownIcon, XIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, Combobox, NewModal } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
@@ -205,6 +204,8 @@ import { IntlFormatted } from '@vintl/vintl/components'
 import { all } from 'iso-3166-1'
 import { nextTick } from 'vue'
 
+import { normalizeChildren } from '@/utils/vue-children.ts'
+
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
 type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 0a507ecc1e..3884095c7b 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1,4 +1,16 @@
 {
+  "action.cancel": {
+    "message": "Cancel"
+  },
+  "action.continue": {
+    "message": "Continue"
+  },
+  "action.max": {
+    "message": "Max"
+  },
+  "action.withdraw": {
+    "message": "Withdraw"
+  },
   "admin.billing.error.not-found": {
     "message": "User not found"
   },
@@ -413,6 +425,15 @@
   "collection.title": {
     "message": "{name} - Collection"
   },
+  "common.no": {
+    "message": "No"
+  },
+  "common.yes": {
+    "message": "Yes"
+  },
+  "creator.withdraw.debug.openTaxForm": {
+    "message": "Open tax form (debug)"
+  },
   "dashboard.collections.button.create-new": {
     "message": "Create new"
   },
@@ -425,6 +446,99 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
+  "dashboard.creator-tax-form-modal.entity.description": {
+    "message": "A foreign entity means a business entity organized outside the United States (such as a non-US corporation, partnership, or LLC)."
+  },
+  "dashboard.creator-tax-form-modal.entity.foreign-entity": {
+    "message": "Foreign entity"
+  },
+  "dashboard.creator-tax-form-modal.entity.private-individual": {
+    "message": "Private individual"
+  },
+  "dashboard.creator-tax-form-modal.entity.question": {
+    "message": "Are you a private individual or part of a foreign entity?"
+  },
+  "dashboard.creator-tax-form-modal.header": {
+    "message": "Tax form"
+  },
+  "dashboard.creator-tax-form-modal.security.description": {
+    "message": "Modrinth uses third-party provider Track1099 to securely collect and store your tax forms. <security-link>Learn more here.</security-link>"
+  },
+  "dashboard.creator-tax-form-modal.security.header": {
+    "message": "Security practices"
+  },
+  "dashboard.creator-tax-form-modal.us-citizen.question": {
+    "message": "Are you a US citizen?"
+  },
+  "dashboard.creator-withdraw-modal.amount": {
+    "message": "Amount"
+  },
+  "dashboard.creator-withdraw-modal.available-balance": {
+    "message": "Available balance"
+  },
+  "dashboard.creator-withdraw-modal.complete-tax-form": {
+    "message": "Complete tax form"
+  },
+  "dashboard.creator-withdraw-modal.continue-with-limit": {
+    "message": "Continue with limit"
+  },
+  "dashboard.creator-withdraw-modal.error.invalid-amount": {
+    "message": "{input} is not a valid amount"
+  },
+  "dashboard.creator-withdraw-modal.error.link-paypal": {
+    "message": "Please link your PayPal account to proceed."
+  },
+  "dashboard.creator-withdraw-modal.error.link-venmo": {
+    "message": "Please set your Venmo handle to proceed."
+  },
+  "dashboard.creator-withdraw-modal.error.max-amount": {
+    "message": "The amount must be no more than {max}"
+  },
+  "dashboard.creator-withdraw-modal.error.min-amount": {
+    "message": "The amount must be at least {min}"
+  },
+  "dashboard.creator-withdraw-modal.minimum-transfer-amount": {
+    "message": "The minimum transfer amount is {min}."
+  },
+  "dashboard.creator-withdraw-modal.nearing-threshold": {
+    "message": "You're nearing the {amount600} withdrawal threshold. You can withdraw up to <b>{amountRemaining}</b> now, but you'll need to complete a tax form to withdraw more."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.enter-amount": {
+    "message": "Enter amount..."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.select-country": {
+    "message": "Select country..."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.select-method": {
+    "message": "Select method..."
+  },
+  "dashboard.creator-withdraw-modal.region": {
+    "message": "Region"
+  },
+  "dashboard.creator-withdraw-modal.tax-form-required.body": {
+    "message": "To withdraw your full <b>{available}</b> available balance please complete the form below. It is required for tax reporting and only needs to be done once."
+  },
+  "dashboard.creator-withdraw-modal.tax-form-required.header": {
+    "message": "Tax form required"
+  },
+  "dashboard.creator-withdraw-modal.tooltip.select-country-region": {
+    "message": "Select your country or region"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-from": {
+    "message": "Withdraw from"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-limit-used": {
+    "message": "You've used up your <b>{amount600}</b> withdrawal limit. You must complete a tax form to withdraw more."
+  },
+  "dashboard.creator-withdraw-modal.withdraw-remaining": {
+    "message": "Withdraw remaining"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-to": {
+    "message": "Withdraw to"
+  },
+  "dashboard.creator-withdraw-modal.withdraw.header": {
+    "message": "Withdraw"
+  },
   "dashboard.revenue.available-now": {
     "message": "Available now"
   },

From 6f4423bb574a2444359081a4c4c784709f089047 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 00:10:19 +0100
Subject: [PATCH 42/49] feat: QA

---
 apps/frontend/src/layouts/default.vue         |  27 +-
 .../src/pages/dashboard/revenue/index.vue     |  61 +++--
 .../src/pages/dashboard/revenue/old_idnex.vue | 256 ------------------
 3 files changed, 51 insertions(+), 293 deletions(-)
 delete mode 100644 apps/frontend/src/pages/dashboard/revenue/old_idnex.vue

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index e63bce77bb..bc1be37b0c 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -384,7 +384,8 @@
 					<DropdownIcon class="h-5 w-5 text-secondary" />
 					<template #profile> <UserIcon aria-hidden="true" /> Profile </template>
 					<template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
-					<template #saved> <BookmarkIcon aria-hidden="true" /> Saved projects </template>
+					<template #reports> <ReportIcon aria-hidden="true" /> Active reports </template>
+					<template #saved> <LibraryIcon aria-hidden="true" /> Collections </template>
 					<template #servers> <ServerIcon aria-hidden="true" /> My servers </template>
 					<template #plus>
 						<ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
@@ -677,7 +678,6 @@ import {
 	ArrowBigUpDashIcon,
 	BellIcon,
 	BlueskyIcon,
-	BookmarkIcon,
 	BoxIcon,
 	BracesIcon,
 	ChartIcon,
@@ -963,14 +963,6 @@ const userMenuOptions = computed(() => {
 			color: 'purple',
 			shown: !flags.value.hidePlusPromoInUserMenu && !isPermission(auth.value.user.badges, 1 << 0),
 		},
-		{
-			id: 'notifications',
-			link: '/dashboard/notifications',
-		},
-		{
-			id: 'saved',
-			link: '/dashboard/collections',
-		},
 		{
 			id: 'servers',
 			link: '/servers/manage',
@@ -992,6 +984,21 @@ const userMenuOptions = computed(() => {
 		{
 			divider: true,
 		},
+		{
+			id: 'notifications',
+			link: '/dashboard/notifications',
+		},
+		{
+			id: 'reports',
+			link: '/dashboard/reports',
+		},
+		{
+			id: 'saved',
+			link: '/dashboard/collections',
+		},
+		{
+			divider: true,
+		},
 		{
 			id: 'projects',
 			link: '/dashboard/projects',
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 54986bb4fe..ab72e9bf2b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -11,7 +11,7 @@
 	/>
 	<div class="mb-6 flex flex-col gap-8 p-12 py-0">
 		<div class="flex flex-col gap-5">
-			<div class="flex flex-col">
+			<div class="flex flex-col gap-1">
 				<span class="text-2xl font-semibold text-contrast">{{
 					formatMessage(messages.balanceLabel)
 				}}</span>
@@ -25,15 +25,16 @@
 				<div
 					v-for="(seg, index) in segments"
 					:key="seg.key"
-					class="h-full"
+					class="h-full hover:brightness-150"
 					:style="{ width: seg.widthPct }"
 					@mouseenter="hoveredSeg = seg.key"
 					@mouseleave="hoveredSeg = null"
 				>
 					<span
-						class="gradient-border block h-full w-full transition duration-150 hover:brightness-150"
+						class="block h-full w-full transition duration-150"
 						:class="[
 							seg.class,
+							seg.key === 'available' ? 'gradient-border' : '',
 							index === 0 ? 'rounded-l-full' : '',
 							index === segments.length - 1 ? 'rounded-r-full' : '',
 						]"
@@ -45,13 +46,13 @@
 				<div
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none"
+					<span class="text-md my-auto flex flex-row items-center gap-2 leading-none"
 						><span class="gradient-border my-auto block size-4 rounded-full bg-brand-green"></span>
 						{{ formatMessage(messages.availableNow) }}</span
 					>
 					<span
-						class="text-2xl font-bold text-contrast"
-						:class="{ 'animate-flash-green': hoveredSeg === 'available' }"
+						class="text-lg font-semibold text-contrast"
+						:class="{ 'text-green': hoveredSeg === 'available' }"
 						>{{ formatMoney(totalAvailable) }}</span
 					>
 				</div>
@@ -61,9 +62,9 @@
 					:key="date.date"
 					class="flex flex-row justify-between border-0 !border-b-[2px] border-solid border-button-bg p-2"
 				>
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none">
+					<span class="text-md my-auto flex flex-row items-center gap-2 leading-none">
 						<span
-							class="zone--striped-small gradient-border my-auto block size-4 rounded-full"
+							class="zone--striped-small my-auto block size-4 rounded-full"
 							:class="[date.stripeClass, date.highlightClass]"
 						></span>
 						{{
@@ -88,19 +89,16 @@
 						</Tooltip>
 					</span>
 					<span
-						class="text-2xl font-bold text-contrast"
-						:class="{
-							[date.textClass]: hoveredSeg === `upcoming-${date.date}-${i}`,
-							'animate-flash-color': hoveredSeg === `upcoming-${date.date}-${i}`,
-						}"
+						class="text-lg font-semibold text-contrast"
+						:class="{ [date.textClass]: hoveredSeg === `upcoming-${date.date}-${i}` }"
 						>{{ formatMoney(date?.amount ?? 0) }}</span
 					>
 				</div>
 
 				<div class="flex flex-row justify-between p-2">
-					<span class="my-auto flex flex-row items-center gap-2 text-lg leading-none">
+					<span class="text-md my-auto flex flex-row items-center gap-2 leading-none">
 						<span
-							class="zone--striped-small zone--striped--gray gradient-border my-auto block size-4 rounded-full bg-button-bg opacity-90"
+							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90"
 						></span>
 						{{ formatMessage(messages.processing) }}
 						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
@@ -113,8 +111,8 @@
 						</Tooltip>
 					</span>
 					<span
-						class="text-2xl font-bold text-contrast"
-						:class="{ 'animate-flash-gray': hoveredSeg === 'processing' }"
+						class="text-lg font-semibold text-contrast"
+						:class="{ 'text-gray': hoveredSeg === 'processing' }"
 						>{{ formatMoney(processingDate?.amount ?? 0) }}</span
 					>
 				</div>
@@ -219,14 +217,17 @@
 								{{ dayjs(transaction.created).format('MMM DD YYYY') }}</span
 							>
 						</div>
-						<span class="my-auto text-2xl font-bold text-contrast">{{
+						<span class="my-auto text-lg font-semibold text-contrast">{{
 							formatMoney(transaction.amount)
 						}}</span>
 					</div>
 				</div>
 			</div>
-			<div v-else class="rounded-xl border border-button-bg p-4 text-secondary">
-				{{ formatMessage(messages.noTransactions) }}
+			<div v-else class="mx-auto flex flex-col justify-center p-6 text-center">
+				<span class="text-xl text-contrast">{{ formatMessage(messages.noTransactions) }}</span>
+				<span class="max-w-[256px] text-lg text-secondary">{{
+					formatMessage(messages.noTransactionsDesc)
+				}}</span>
 			</div>
 		</div>
 	</div>
@@ -353,7 +354,11 @@ const messages = defineMessages({
 	seeAll: { id: 'dashboard.revenue.transactions.see-all', defaultMessage: 'See all' },
 	noTransactions: {
 		id: 'dashboard.revenue.transactions.none',
-		defaultMessage: 'No transactions found',
+		defaultMessage: 'No transactions',
+	},
+	noTransactionsDesc: {
+		id: 'dashboard.revenue.transactions.none.desc',
+		defaultMessage: 'Your payouts and withdrawals will appear here.',
 	},
 })
 
@@ -394,11 +399,12 @@ const { data: payouts, refresh: refreshPayouts } = await useAsyncData<PayoutList
 )
 
 const sortedPayouts = computed<PayoutList>(() => {
-	if (!payouts.value) return []
+	return []
+	// if (!payouts.value) return []
 
-	return [...payouts.value].sort((a, b) => {
-		return new Date(b.created).getTime() - new Date(a.created).getTime()
-	})
+	// return [...payouts.value].sort((a, b) => {
+	// 	return new Date(b.created).getTime() - new Date(a.created).getTime()
+	// })
 })
 
 // Fetch payout methods based on selected country
@@ -488,7 +494,7 @@ const dateHighlightClasses = [
 	'bg-highlight-red',
 ] as const
 
-const dateTextClasses = ['text-blue', 'text-purple', 'text-orange', 'text-red'] as const
+const dateTextClasses = ['text-blue-400', 'text-purple', 'text-orange', 'text-red'] as const
 
 const dateSegments = computed(() => {
 	const dates = nextDate.value
@@ -580,7 +586,8 @@ const segments = computed<RevenueBarSegment[]>(() => {
 
 <style scoped lang="scss">
 %zone--striped-common {
-	background-attachment: fixed;
+	/* Use scroll so stripes remain static relative to element when page scrolls */
+	background-attachment: scroll;
 	background-position: 0 0;
 	background-size: 9.38px 9.38px;
 }
diff --git a/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue b/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue
deleted file mode 100644
index 93e6e22088..0000000000
--- a/apps/frontend/src/pages/dashboard/revenue/old_idnex.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<template>
-	<div class="experimental-styles-within">
-		<CreatorTaxComplianceAlert v-if="needTaxForms" class="mb-3" />
-		<section class="universal-card">
-			<h2 class="text-2xl">Revenue</h2>
-			<div class="grid-display">
-				<div class="grid-display__item">
-					<div class="label">Available now</div>
-					<div class="value">
-						{{ $formatMoney(userBalance.available) }}
-					</div>
-				</div>
-				<div class="grid-display__item">
-					<div class="label">
-						Total pending
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
-							<UnknownIcon />
-						</nuxt-link>
-					</div>
-					<div class="value">
-						{{ $formatMoney(userBalance.pending) }}
-					</div>
-				</div>
-				<div class="grid-display__item">
-					<h3 class="label m-0">
-						Available soon
-						<nuxt-link
-							v-tooltip="`Click to read about how Modrinth handles your revenue.`"
-							class="align-middle text-link"
-							to="/legal/cmp-info#pending"
-						>
-							<UnknownIcon />
-						</nuxt-link>
-					</h3>
-					<ul class="m-0 list-none p-0">
-						<li
-							v-for="date in availableSoonDateKeys"
-							:key="date"
-							class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
-						>
-							<span
-								v-tooltip="
-									availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
-										? `Revenue period is ongoing. \nThis amount is not yet finalized.`
-										: null
-								"
-								:class="{
-									'cursor-help':
-										availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
-								}"
-								class="inline-flex items-center gap-1 font-bold"
-							>
-								{{ $formatMoney(availableSoonDates[date]) }}
-								<template
-									v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
-								>
-									<InProgressIcon />
-								</template>
-							</span>
-							<span class="text-sm text-secondary">
-								{{ formatDate(dayjs(date)) }}
-							</span>
-						</li>
-					</ul>
-				</div>
-			</div>
-			<div class="input-group mt-4">
-				<span :class="{ 'disabled-cursor-wrapper': shouldPreventWithdrawal }">
-					<nuxt-link
-						:aria-disabled="shouldPreventWithdrawal ? 'true' : 'false'"
-						:class="{ 'disabled-link': shouldPreventWithdrawal }"
-						:disabled="shouldPreventWithdrawal ? 'true' : 'false'"
-						:tabindex="shouldPreventWithdrawal ? -1 : undefined"
-						class="iconified-button brand-button"
-						to="/dashboard/revenue/withdraw"
-					>
-						<TransferIcon /> Withdraw
-					</nuxt-link>
-				</span>
-				<NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
-					<HistoryIcon />
-					View transfer history
-				</NuxtLink>
-			</div>
-			<p class="text-sm text-secondary">
-				By uploading projects to Modrinth and withdrawing money from your account, you agree to the
-				<nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. For more
-				information on how the rewards system works, see our information page
-				<nuxt-link class="text-link" to="/legal/cmp-info">here</nuxt-link>.
-			</p>
-		</section>
-		<section class="universal-card">
-			<h2 class="text-2xl">Payout methods</h2>
-			<h3>PayPal</h3>
-			<template v-if="auth.user.auth_providers.includes('paypal')">
-				<p>
-					Your PayPal {{ auth.user.payout_data.paypal_country }} account is currently connected with
-					email
-					{{ auth.user.payout_data.paypal_address }}
-				</p>
-				<button class="btn mt-4" @click="handleRemoveAuthProvider('paypal')">
-					<XIcon />
-					Disconnect account
-				</button>
-			</template>
-			<template v-else>
-				<p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
-				<a :href="`${getAuthUrl('paypal')}&token=${auth.token}`" class="btn mt-4">
-					<PayPalIcon />
-					Sign in with PayPal
-				</a>
-			</template>
-			<h3>Tremendous</h3>
-			<p>
-				Tremendous payments are sent to your Modrinth email. To change/set your Modrinth email,
-				visit
-				<nuxt-link class="text-link" to="/settings/account">here</nuxt-link>.
-			</p>
-			<h3>Venmo</h3>
-			<p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
-			<label class="hidden" for="venmo">Venmo address</label>
-			<input
-				id="venmo"
-				v-model="auth.user.payout_data.venmo_handle"
-				autocomplete="off"
-				class="mt-4"
-				name="search"
-				placeholder="@example"
-				type="search"
-			/>
-			<button class="btn btn-secondary" @click="updateVenmo">
-				<SaveIcon />
-				Save information
-			</button>
-		</section>
-	</div>
-</template>
-<script setup>
-import {
-	HistoryIcon,
-	InProgressIcon,
-	PayPalIcon,
-	SaveIcon,
-	TransferIcon,
-	UnknownIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { injectNotificationManager } from '@modrinth/ui'
-import { formatDate } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed } from 'vue'
-
-import CreatorTaxComplianceAlert from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
-import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
-
-const { addNotification, handleError } = injectNotificationManager()
-const auth = await useAuth()
-const flags = useFeatureFlags()
-const minWithdraw = ref(0.01)
-
-const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
-	useBaseFetch(`payout/balance`, { apiVersion: 3 }),
-)
-
-const needTaxForms = computed(() => {
-	if (!flags.value.showCreatorTaxCompliance) return false
-	const totalWithdrawn = userBalance.value?.total_annual_withdrawal ?? 0
-	return totalWithdrawn >= 600 && !userBalance.value?.tax_compliance_filled
-})
-
-const shouldPreventWithdrawal = computed(() => {
-	const available = userBalance.value?.available ?? 0
-	const balanceTooLow = available < (minWithdraw.value ?? 0)
-	return balanceTooLow || needTaxForms.value
-})
-
-const deadlineEnding = computed(() => {
-	let deadline = dayjs().subtract(2, 'month').endOf('month').add(60, 'days')
-	if (deadline.isBefore(dayjs().startOf('day'))) {
-		deadline = dayjs().subtract(1, 'month').endOf('month').add(60, 'days')
-	}
-	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)
-		.filter((date) => {
-			const dateObj = dayjs(date)
-			return (
-				dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, 'month'))
-			)
-		})
-		.sort((a, b) => dayjs(a).diff(dayjs(b)))
-
-	return dates.reduce((acc, date) => {
-		acc[date] = userBalance.value.dates[date]
-		return acc
-	}, {})
-})
-
-const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value))
-
-async function updateVenmo() {
-	startLoading()
-	try {
-		const data = {
-			venmo_handle: auth.value.user.payout_data.venmo_handle ?? null,
-		}
-
-		await useBaseFetch(`user/${auth.value.user.id}`, {
-			method: 'PATCH',
-			body: data,
-			apiVersion: 3,
-		})
-		await useAuth(auth.value.token)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
-}
-</script>
-<style lang="scss" scoped>
-strong {
-	color: var(--color-text-dark);
-	font-weight: 500;
-}
-
-.disabled-cursor-wrapper {
-	cursor: not-allowed;
-}
-
-.disabled-link {
-	pointer-events: none;
-}
-
-.grid-display {
-	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-}
-</style>

From 8c2e68418c26f40c64eb021c54573465cc5442d6 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 00:11:50 +0100
Subject: [PATCH 43/49] fix: lint

---
 apps/frontend/src/locales/en-US/index.json          | 5 ++++-
 apps/frontend/src/pages/dashboard/revenue/index.vue | 9 ++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 3884095c7b..f01fd28dd1 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -567,7 +567,10 @@
     "message": "Transactions"
   },
   "dashboard.revenue.transactions.none": {
-    "message": "No transactions found"
+    "message": "No transactions"
+  },
+  "dashboard.revenue.transactions.none.desc": {
+    "message": "Your payouts and withdrawals will appear here."
   },
   "dashboard.revenue.transactions.see-all": {
     "message": "See all"
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index ab72e9bf2b..e5e1c3bcda 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -399,12 +399,11 @@ const { data: payouts, refresh: refreshPayouts } = await useAsyncData<PayoutList
 )
 
 const sortedPayouts = computed<PayoutList>(() => {
-	return []
-	// if (!payouts.value) return []
+	if (!payouts.value) return []
 
-	// return [...payouts.value].sort((a, b) => {
-	// 	return new Date(b.created).getTime() - new Date(a.created).getTime()
-	// })
+	return [...payouts.value].sort((a, b) => {
+		return new Date(b.created).getTime() - new Date(a.created).getTime()
+	})
 })
 
 // Fetch payout methods based on selected country

From ec216c55523c49d1f05071820bbec2c60f5c17f2 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 09:08:06 +0100
Subject: [PATCH 44/49] fix: merge conflicts

---
 apps/frontend/src/layouts/default.vue | 50 +++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 5104b41eb9..1673450942 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -435,11 +435,21 @@
 				>
 					<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
 					<DropdownIcon class="h-5 w-5 text-secondary" />
-					<template #profile> <UserIcon aria-hidden="true" /> Profile </template>
-					<template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
-					<template #reports> <ReportIcon aria-hidden="true" /> Active reports </template>
-					<template #saved> <LibraryIcon aria-hidden="true" /> Collections </template>
-					<template #servers> <ServerIcon aria-hidden="true" /> My servers </template>
+					<template #profile>
+						<UserIcon aria-hidden="true" /> {{ formatMessage(messages.profile) }}
+					</template>
+					<template #notifications>
+						<BellIcon aria-hidden="true" /> {{ formatMessage(commonMessages.notificationsLabel) }}
+					</template>
+					<template #reports>
+						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.activeReports) }}
+					</template>
+					<template #saved>
+						<LibraryIcon aria-hidden="true" /> {{ formatMessage(commonMessages.collectionsLabel) }}
+					</template>
+					<template #servers>
+						<ServerIcon aria-hidden="true" /> {{ formatMessage(messages.myServers) }}
+					</template>
 					<template #plus>
 						<ArrowBigUpDashIcon aria-hidden="true" />
 						{{ formatMessage(messages.upgradeToModrinthPlus) }}
@@ -628,7 +638,9 @@
 				<button
 					class="tab button-animation"
 					:title="formatMessage(messages.toggleMenu)"
-					:aria-label="isMobileMenuOpen ? 'Close menu' : 'Open menu'"
+					:aria-label="
+						isMobileMenuOpen ? formatMessage(messages.closeMenu) : formatMessage(messages.openMenu)
+					"
 					@click="toggleMobileMenu()"
 				>
 					<template v-if="!auth.user">
@@ -703,7 +715,9 @@
 									</template>
 								</IntlFormatted>
 							</p>
-							<p class="m-0">© 2025 Rinth, Inc.</p>
+							<p class="m-0">
+								{{ formatMessage(footerMessages.copyright, { year: currentYear }) }}
+							</p>
 						</div>
 					</div>
 					<div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
@@ -1032,6 +1046,22 @@ const messages = defineMessages({
 		id: 'layout.nav.analytics',
 		defaultMessage: 'Analytics',
 	},
+	activeReports: {
+		id: 'layout.nav.active-reports',
+		defaultMessage: 'Active reports',
+	},
+	myServers: {
+		id: 'layout.nav.my-servers',
+		defaultMessage: 'My servers',
+	},
+	openMenu: {
+		id: 'layout.mobile.open-menu',
+		defaultMessage: 'Open menu',
+	},
+	closeMenu: {
+		id: 'layout.mobile.close-menu',
+		defaultMessage: 'Close menu',
+	},
 })
 
 const footerMessages = defineMessages({
@@ -1044,6 +1074,10 @@ const footerMessages = defineMessages({
 		defaultMessage:
 			'NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.',
 	},
+	copyright: {
+		id: 'layout.footer.copyright',
+		defaultMessage: '© {year} Rinth, Inc.',
+	},
 })
 
 useHead({
@@ -1086,6 +1120,8 @@ useSeoMeta({
 
 const developerModeCounter = ref(0)
 
+const currentYear = new Date().getFullYear()
+
 const isMobileMenuOpen = ref(false)
 const isBrowseMenuOpen = ref(false)
 const navRoutes = computed(() => [

From 25e33f9c97d7df30b1529ebe5c1e53e25860777e Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 09:08:59 +0100
Subject: [PATCH 45/49] fix: intl

---
 apps/frontend/src/locales/en-US/index.json | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 3ad16f5651..94c10bb5a0 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -911,6 +911,9 @@
   "layout.footer.about.status": {
     "message": "Status"
   },
+  "layout.footer.copyright": {
+    "message": "© {year} Rinth, Inc."
+  },
   "layout.footer.legal": {
     "message": "Legal"
   },
@@ -989,6 +992,15 @@
   "layout.meta.og-description": {
     "message": "Discover and publish Minecraft content!"
   },
+  "layout.mobile.close-menu": {
+    "message": "Close menu"
+  },
+  "layout.mobile.open-menu": {
+    "message": "Open menu"
+  },
+  "layout.nav.active-reports": {
+    "message": "Active reports"
+  },
   "layout.nav.analytics": {
     "message": "Analytics"
   },
@@ -1016,6 +1028,9 @@
   "layout.nav.modrinth-home-page": {
     "message": "Modrinth home page"
   },
+  "layout.nav.my-servers": {
+    "message": "My servers"
+  },
   "layout.nav.organizations": {
     "message": "Organizations"
   },

From 77e1b747795c1b8e221e3381abc2503384f04ee2 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 09:14:04 +0100
Subject: [PATCH 46/49] fix: blue hover

---
 apps/frontend/src/pages/dashboard/revenue/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index e5e1c3bcda..5fa169dbbe 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -52,7 +52,7 @@
 					>
 					<span
 						class="text-lg font-semibold text-contrast"
-						:class="{ 'text-green': hoveredSeg === 'available' }"
+						:class="{ '!text-green': hoveredSeg === 'available' }"
 						>{{ formatMoney(totalAvailable) }}</span
 					>
 				</div>
@@ -112,7 +112,7 @@
 					</span>
 					<span
 						class="text-lg font-semibold text-contrast"
-						:class="{ 'text-gray': hoveredSeg === 'processing' }"
+						:class="{ '!text-gray': hoveredSeg === 'processing' }"
 						>{{ formatMoney(processingDate?.amount ?? 0) }}</span
 					>
 				</div>
@@ -493,7 +493,7 @@ const dateHighlightClasses = [
 	'bg-highlight-red',
 ] as const
 
-const dateTextClasses = ['text-blue-400', 'text-purple', 'text-orange', 'text-red'] as const
+const dateTextClasses = ['!text-brand-blue', '!text-purple', '!text-orange', '!text-red'] as const
 
 const dateSegments = computed(() => {
 	const dates = nextDate.value

From 9f69a74fbee5bbc9e6aedc43e6666472b9c4aa5a Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Mon, 15 Sep 2025 09:28:26 +0100
Subject: [PATCH 47/49] fix: transfers page

---
 .../src/pages/dashboard/revenue/index.vue     |   4 +-
 .../src/pages/dashboard/revenue/transfers.vue | 256 +++++++++---------
 2 files changed, 123 insertions(+), 137 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 5fa169dbbe..2550f211b1 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -203,9 +203,9 @@
 					class="flex flex-row gap-3"
 				>
 					<div
-						class="flex size-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised shadow-md"
+						class="flex h-12 min-h-12 w-12 min-w-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised !p-0 shadow-md"
 					>
-						<ArrowUpIcon class="my-auto size-8 text-contrast" />
+						<ArrowUpIcon class="my-auto size-8 text-secondary" />
 					</div>
 					<div class="flex w-full flex-row justify-between">
 						<div class="flex flex-col">
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 4e651b2065..7f8a7dc29b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
@@ -1,112 +1,106 @@
 <template>
-	<div>
-		<section class="universal-card payout-history">
-			<Breadcrumbs
-				current-title="Transfer history"
-				:link-stack="[{ href: '/dashboard/revenue', label: 'Revenue' }]"
+	<div class="mb-6 flex flex-col gap-4 p-12 py-0">
+		<div class="flex flex-row justify-between">
+			<span class="text-2xl font-semibold text-contrast">{{
+				formatMessage(messages.transactionsHeader)
+			}}</span>
+		</div>
+
+		<div class="flex flex-wrap items-center gap-2">
+			<DropdownSelect
+				v-model="selectedYear"
+				:options="years"
+				:display-name="(x) => (x === 'all' ? 'All years' : x)"
+				name="Year filter"
 			/>
-			<h2>Transfer history</h2>
-			<p>All of your withdrawals from your Modrinth balance will be listed here:</p>
-			<div class="input-group">
-				<DropdownSelect
-					v-model="selectedYear"
-					:options="years"
-					:display-name="(x) => (x === 'all' ? 'All years' : x)"
-					name="Year filter"
-				/>
-				<DropdownSelect
-					v-model="selectedMethod"
-					:options="methods"
-					:display-name="
-						(x) => (x === 'all' ? 'Any method' : x === 'paypal' ? 'PayPal' : capitalizeString(x))
-					"
-					name="Method filter"
-				/>
-			</div>
-			<p>
-				{{
-					selectedYear !== 'all'
-						? selectedMethod !== 'all'
-							? formatMessage(messages.transfersTotalYearMethod, {
-									amount: $formatMoney(totalAmount),
-									year: selectedYear,
-									method: selectedMethod,
-								})
-							: formatMessage(messages.transfersTotalYear, {
-									amount: $formatMoney(totalAmount),
-									year: selectedYear,
-								})
-						: selectedMethod !== 'all'
-							? formatMessage(messages.transfersTotalMethod, {
-									amount: $formatMoney(totalAmount),
-									method: selectedMethod,
-								})
-							: formatMessage(messages.transfersTotal, {
-									amount: $formatMoney(totalAmount),
-								})
-				}}
-			</p>
-			<div
-				v-for="payout in filteredPayouts"
-				:key="payout.id"
-				class="universal-card recessed payout"
-			>
-				<div class="platform">
-					<PayPalIcon v-if="payout.method === 'paypal'" />
-					<TremendousIcon v-else-if="payout.method === 'tremendous'" />
-					<VenmoIcon v-else-if="payout.method === 'venmo'" />
-					<UnknownIcon v-else />
+			<DropdownSelect
+				v-model="selectedMethod"
+				:options="methods"
+				:display-name="
+					(x) => (x === 'all' ? 'Any method' : x === 'paypal' ? 'PayPal' : capitalizeString(x))
+				"
+				name="Method filter"
+			/>
+		</div>
+
+		<p class="text-secondary">
+			{{
+				selectedYear !== 'all'
+					? selectedMethod !== 'all'
+						? formatMessage(messages.transfersTotalYearMethod, {
+								amount: $formatMoney(totalAmount),
+								year: selectedYear,
+								method: selectedMethod,
+							})
+						: formatMessage(messages.transfersTotalYear, {
+								amount: $formatMoney(totalAmount),
+								year: selectedYear,
+							})
+					: selectedMethod !== 'all'
+						? formatMessage(messages.transfersTotalMethod, {
+								amount: $formatMoney(totalAmount),
+								method: selectedMethod,
+							})
+						: formatMessage(messages.transfersTotal, {
+								amount: $formatMoney(totalAmount),
+							})
+			}}
+		</p>
+
+		<div v-if="filteredPayouts.length > 0" class="flex flex-col gap-3">
+			<div v-for="payout in filteredPayouts" :key="payout.id" class="flex flex-row gap-3">
+				<div
+					class="flex h-12 min-h-12 w-12 min-w-12 justify-center rounded-full border-[1px] border-solid border-button-bg bg-bg-raised !p-0 shadow-md"
+				>
+					<ArrowUpIcon class="my-auto size-8 text-secondary" />
 				</div>
-				<div class="payout-info">
-					<div>
-						<strong>
-							{{ $dayjs(payout.created).format('MMMM D, YYYY [at] h:mm A') }}
-						</strong>
-					</div>
-					<div>
-						<span class="amount">{{ $formatMoney(payout.amount) }}</span>
-						<template v-if="payout.fee">⋅ Fee {{ $formatMoney(payout.fee) }}</template>
-					</div>
-					<div class="payout-status">
-						<span>
-							<Badge v-if="payout.status === 'success'" color="green" type="Success" />
-							<Badge v-else-if="payout.status === 'cancelling'" color="yellow" type="Cancelling" />
-							<Badge v-else-if="payout.status === 'cancelled'" color="red" type="Cancelled" />
-							<Badge v-else-if="payout.status === 'failed'" color="red" type="Failed" />
-							<Badge v-else-if="payout.status === 'in-transit'" color="yellow" type="In transit" />
-							<Badge v-else :type="payout.status" />
+				<div class="flex w-full flex-row justify-between">
+					<div class="flex flex-col">
+						<span class="text-lg font-semibold text-contrast">{{
+							formatMethodName(payout.method)
+						}}</span>
+						<span class="text-secondary">
+							{{ formatTransactionStatus(payout.status) }} |
+							{{ $dayjs(payout.created).format('MMM DD YYYY') }}
+							<template v-if="payout.fee"> | Fee {{ $formatMoney(payout.fee) }}</template>
+							<template v-if="payout.method_address">
+								| {{ formatWallet(payout.method) }} ({{ payout.method_address }})
+							</template>
 						</span>
-						<template v-if="payout.method">
-							<span>⋅</span>
-							<span>{{ formatWallet(payout.method) }} ({{ payout.method_address }})</span>
-						</template>
 					</div>
-				</div>
-				<div class="input-group">
-					<button
-						v-if="payout.status === 'in-transit'"
-						class="iconified-button raised-button"
-						@click="cancelPayout(payout.id)"
-					>
-						<XIcon /> Cancel payment
-					</button>
+					<div class="my-auto flex flex-col items-end">
+						<span class="text-lg font-semibold text-contrast">{{
+							$formatMoney(payout.amount)
+						}}</span>
+						<button
+							v-if="payout.status === 'in-transit'"
+							class="mt-1 inline-flex items-center gap-1 rounded-md border border-button-bg bg-button-bg px-3 py-1 text-sm text-contrast hover:brightness-110"
+							@click="cancelPayout(payout.id)"
+						>
+							<XIcon class="size-4" />
+							Cancel payment
+						</button>
+					</div>
 				</div>
 			</div>
-		</section>
+		</div>
+		<div v-else class="mx-auto flex flex-col justify-center p-6 text-center">
+			<span class="text-xl text-contrast">{{ formatMessage(messages.noTransactions) }}</span>
+			<span class="max-w-[256px] text-lg text-secondary">{{
+				formatMessage(messages.noTransactionsDesc)
+			}}</span>
+		</div>
 	</div>
 </template>
 <script setup>
-import { PayPalIcon, UnknownIcon, XIcon } from '@modrinth/assets'
-import { Badge, Breadcrumbs, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
+import { ArrowUpIcon, XIcon } from '@modrinth/assets'
+import { DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import { capitalizeString, formatWallet } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 
-import TremendousIcon from '~/assets/images/external/tremendous.svg?component'
-import VenmoIcon from '~/assets/images/external/venmo-small.svg?component'
-
 const { addNotification } = injectNotificationManager()
-const vintl = useVIntl()
-const { formatMessage } = vintl
+const { formatMessage } = useVIntl()
 
 useHead({
 	title: 'Transfer history - Modrinth',
@@ -167,7 +161,30 @@ async function cancelPayout(id) {
 	stopLoading()
 }
 
+function formatTransactionStatus(status) {
+	if (status === 'in-transit') return 'In Transit'
+	return capitalizeString(status)
+}
+
+function formatMethodName(method) {
+	if (!method) return 'Unknown'
+	switch (method) {
+		case 'paypal':
+			return 'PayPal'
+		case 'venmo':
+			return 'Venmo'
+		case 'tremendous':
+			return 'Tremendous'
+		default:
+			return capitalizeString(method)
+	}
+}
+
 const messages = defineMessages({
+	transactionsHeader: {
+		id: 'dashboard.revenue.transactions.header',
+		defaultMessage: 'Transactions',
+	},
 	transfersTotal: {
 		id: 'revenue.transfers.total',
 		defaultMessage: 'You have withdrawn {amount} in total.',
@@ -184,45 +201,14 @@ const messages = defineMessages({
 		id: 'revenue.transfers.total.year_method',
 		defaultMessage: 'You have withdrawn {amount} in {year} through {method}.',
 	},
+	noTransactions: {
+		id: 'dashboard.revenue.transactions.none',
+		defaultMessage: 'No transactions',
+	},
+	noTransactionsDesc: {
+		id: 'dashboard.revenue.transactions.none.desc',
+		defaultMessage: 'Your payouts and withdrawals will appear here.',
+	},
 })
 </script>
-<style lang="scss" scoped>
-.payout {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-
-	.platform {
-		display: flex;
-		padding: 0.75rem;
-		background-color: var(--color-raised-bg);
-		width: fit-content;
-		height: fit-content;
-		border-radius: 20rem;
-
-		svg {
-			width: 2rem;
-			height: 2rem;
-		}
-	}
-
-	.payout-status {
-		display: flex;
-		gap: 0.5ch;
-	}
-
-	.amount {
-		color: var(--color-heading);
-		font-weight: 500;
-	}
-
-	@media screen and (min-width: 800px) {
-		flex-direction: row;
-		align-items: center;
-
-		.input-group {
-			margin-left: auto;
-		}
-	}
-}
-</style>
+<style scoped></style>

From 8c0e0b7725a8fdee2e36d245c5bdabe54533c248 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Wed, 24 Sep 2025 15:38:02 +0100
Subject: [PATCH 48/49] fix: intl

---
 apps/frontend/src/locales/en-US/index.json | 4419 ++++++++++----------
 1 file changed, 2271 insertions(+), 2148 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 6244ad676b..7f60c50973 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1,2150 +1,2273 @@
 {
-	"action.cancel": {
-		"message": "Cancel"
-	},
-	"action.continue": {
-		"message": "Continue"
-	},
-	"admin.billing.error.not-found": {
-		"message": "User not found"
-	},
-	"app-marketing.download.description": {
-		"message": "Our desktop app is available across all platforms, choose your desired version."
-	},
-	"app-marketing.download.download-appimage": {
-		"message": "Download the AppImage"
-	},
-	"app-marketing.download.download-beta": {
-		"message": "Download the beta"
-	},
-	"app-marketing.download.download-deb": {
-		"message": "Download the DEB"
-	},
-	"app-marketing.download.download-rpm": {
-		"message": "Download the RPM"
-	},
-	"app-marketing.download.linux": {
-		"message": "Linux"
-	},
-	"app-marketing.download.linux-disclaimer": {
-		"message": "The Linux versions of Modrinth App are <issues-link>known to have issues</issues-link> on certain systems and configurations. If Modrinth App is unstable on your system, we encourage you to try other apps like <prism-link>Prism Launcher</prism-link> to easily install Modrinth content."
-	},
-	"app-marketing.download.mac": {
-		"message": "Mac"
-	},
-	"app-marketing.download.options-title": {
-		"message": "Download options"
-	},
-	"app-marketing.download.terms": {
-		"message": "By downloading Modrinth App you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
-	},
-	"app-marketing.download.third-party-packages": {
-		"message": "Third-party packages"
-	},
-	"app-marketing.download.title": {
-		"message": "Download Modrinth App (Beta)"
-	},
-	"app-marketing.download.windows": {
-		"message": "Windows"
-	},
-	"app-marketing.features.follow.description": {
-		"message": "Save content you love and receive updates with one click."
-	},
-	"app-marketing.features.follow.title": {
-		"message": "Follow projects"
-	},
-	"app-marketing.features.importing.description": {
-		"message": "Import all your favorite profiles from the launcher you were using before, and get started with Modrinth App in seconds!"
-	},
-	"app-marketing.features.importing.gdlauncher-alt": {
-		"message": "GDLauncher"
-	},
-	"app-marketing.features.importing.multimc-alt": {
-		"message": "MultiMC"
-	},
-	"app-marketing.features.importing.title": {
-		"message": "Profile importing"
-	},
-	"app-marketing.features.mod-management.actions": {
-		"message": "Actions"
-	},
-	"app-marketing.features.mod-management.byAuthor": {
-		"message": "by {author}"
-	},
-	"app-marketing.features.mod-management.description": {
-		"message": "Modrinth makes it easy to manage all your mods in one place. You can install, uninstall, and update mods with a single click."
-	},
-	"app-marketing.features.mod-management.installed-mods": {
-		"message": "Installed mods"
-	},
-	"app-marketing.features.mod-management.name": {
-		"message": "Name"
-	},
-	"app-marketing.features.mod-management.search-mods": {
-		"message": "Search mods"
-	},
-	"app-marketing.features.mod-management.title": {
-		"message": "Mod management"
-	},
-	"app-marketing.features.mod-management.version": {
-		"message": "Version"
-	},
-	"app-marketing.features.offline.description": {
-		"message": "Play your mods, whether you are connected to the internet, or not."
-	},
-	"app-marketing.features.offline.title": {
-		"message": "Offline mode"
-	},
-	"app-marketing.features.open-source.description": {
-		"message": "Modrinth's launcher is fully open source. You can view the source code on our <github-link>GitHub</github-link>!"
-	},
-	"app-marketing.features.open-source.title": {
-		"message": "Open source"
-	},
-	"app-marketing.features.performance.activity-monitor": {
-		"message": "Activity monitor"
-	},
-	"app-marketing.features.performance.cpu-percent": {
-		"message": "% CPU"
-	},
-	"app-marketing.features.performance.description": {
-		"message": "Modrinth App performs better than many of the leading mod managers, using just 150mb of RAM!"
-	},
-	"app-marketing.features.performance.discord": {
-		"message": "Discord"
-	},
-	"app-marketing.features.performance.good-performance": {
-		"message": "Good performance"
-	},
-	"app-marketing.features.performance.google-chrome": {
-		"message": "Google Chrome"
-	},
-	"app-marketing.features.performance.infinite-mb": {
-		"message": "∞ MB"
-	},
-	"app-marketing.features.performance.infinite-times-infinite-mb": {
-		"message": "∞ * ∞ MB"
-	},
-	"app-marketing.features.performance.less-than-150mb": {
-		"message": "< 150 MB"
-	},
-	"app-marketing.features.performance.modrinth-app": {
-		"message": "Modrinth App"
-	},
-	"app-marketing.features.performance.one-billion-percent": {
-		"message": "1 billion %"
-	},
-	"app-marketing.features.performance.process-name": {
-		"message": "Process name"
-	},
-	"app-marketing.features.performance.ram": {
-		"message": "RAM"
-	},
-	"app-marketing.features.performance.small": {
-		"message": "Small"
-	},
-	"app-marketing.features.performance.title": {
-		"message": "Performant"
-	},
-	"app-marketing.features.play.description": {
-		"message": "Use Modrinth App to download and play with your favorite mods and modpacks."
-	},
-	"app-marketing.features.play.title": {
-		"message": "Play with your favorite mods"
-	},
-	"app-marketing.features.sharing.description": {
-		"message": "Build, share, and play modpacks with any of the thousands of mods and modpacks hosted here on Modrinth."
-	},
-	"app-marketing.features.sharing.modpack": {
-		"message": "Modpack"
-	},
-	"app-marketing.features.sharing.share-button": {
-		"message": "Share"
-	},
-	"app-marketing.features.sharing.title": {
-		"message": "Share modpacks"
-	},
-	"app-marketing.features.unlike-any-launcher": {
-		"message": "Unlike any launcher"
-	},
-	"app-marketing.features.website.description": {
-		"message": "Modrinth App is fully integrated with the website, so you can access all your favorite projects from the app!"
-	},
-	"app-marketing.features.website.title": {
-		"message": "Website integration"
-	},
-	"app-marketing.features.youve-used-before": {
-		"message": "you've used before"
-	},
-	"app-marketing.hero.app-screenshot-alt": {
-		"message": "Screenshot of Modrinth App with a Cobblemon instance opened to the 'Content' page."
-	},
-	"app-marketing.hero.description": {
-		"message": "Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package."
-	},
-	"app-marketing.hero.download-button": {
-		"message": "Download Modrinth App"
-	},
-	"app-marketing.hero.download-modrinth-app": {
-		"message": "Download Modrinth App"
-	},
-	"app-marketing.hero.download-modrinth-app-for-os": {
-		"message": "Download Modrinth App for {os}"
-	},
-	"app-marketing.hero.minecraft-screenshot-alt": {
-		"message": "Screenshot of the Cobblemon instance's main menu screen."
-	},
-	"app-marketing.hero.more-download-options": {
-		"message": "More Download Options"
-	},
-	"auth.authorize.action.authorize": {
-		"message": "Authorize"
-	},
-	"auth.authorize.action.decline": {
-		"message": "Decline"
-	},
-	"auth.authorize.app-info": {
-		"message": "<strong>{appName}</strong> by <creator-link>{creator}</creator-link> will be able to:"
-	},
-	"auth.authorize.authorize-app-name": {
-		"message": "Authorize {appName}"
-	},
-	"auth.authorize.error.no-redirect-url": {
-		"message": "No redirect location found in response"
-	},
-	"auth.authorize.redirect-url": {
-		"message": "You will be redirected to <redirect-url>{url}</redirect-url>"
-	},
-	"auth.reset-password.method-choice.action": {
-		"message": "Send recovery email"
-	},
-	"auth.reset-password.method-choice.description": {
-		"message": "Enter your email below and we'll send a recovery link to allow you to recover your account."
-	},
-	"auth.reset-password.method-choice.email-username.label": {
-		"message": "Email or username"
-	},
-	"auth.reset-password.method-choice.email-username.placeholder": {
-		"message": "Email"
-	},
-	"auth.reset-password.notification.email-sent.text": {
-		"message": "An email with instructions has been sent to you if the email was previously saved on your account."
-	},
-	"auth.reset-password.notification.email-sent.title": {
-		"message": "Email sent"
-	},
-	"auth.reset-password.notification.password-reset.text": {
-		"message": "You can now log-in into your account with your new password."
-	},
-	"auth.reset-password.notification.password-reset.title": {
-		"message": "Password successfully reset"
-	},
-	"auth.reset-password.post-challenge.action": {
-		"message": "Reset password"
-	},
-	"auth.reset-password.post-challenge.confirm-password.label": {
-		"message": "Confirm password"
-	},
-	"auth.reset-password.post-challenge.description": {
-		"message": "Enter your new password below to gain access to your account."
-	},
-	"auth.reset-password.title": {
-		"message": "Reset Password"
-	},
-	"auth.reset-password.title.long": {
-		"message": "Reset your password"
-	},
-	"auth.sign-in.2fa.description": {
-		"message": "Please enter a two-factor code to proceed."
-	},
-	"auth.sign-in.2fa.label": {
-		"message": "Enter two-factor code"
-	},
-	"auth.sign-in.2fa.placeholder": {
-		"message": "Enter code..."
-	},
-	"auth.sign-in.additional-options": {
-		"message": "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>"
-	},
-	"auth.sign-in.email-username.label": {
-		"message": "Email or username"
-	},
-	"auth.sign-in.password.label": {
-		"message": "Password"
-	},
-	"auth.sign-in.sign-in-with": {
-		"message": "Sign in with"
-	},
-	"auth.sign-in.title": {
-		"message": "Sign In"
-	},
-	"auth.sign-in.use-password": {
-		"message": "Or use a password"
-	},
-	"auth.sign-up.action.create-account": {
-		"message": "Create account"
-	},
-	"auth.sign-up.confirm-password.label": {
-		"message": "Confirm password"
-	},
-	"auth.sign-up.email.label": {
-		"message": "Email"
-	},
-	"auth.sign-up.label.username": {
-		"message": "Username"
-	},
-	"auth.sign-up.legal-dislaimer": {
-		"message": "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
-	},
-	"auth.sign-up.notification.password-mismatch.text": {
-		"message": "Passwords do not match!"
-	},
-	"auth.sign-up.password.label": {
-		"message": "Password"
-	},
-	"auth.sign-up.sign-in-option.title": {
-		"message": "Already have an account?"
-	},
-	"auth.sign-up.subscribe.label": {
-		"message": "Subscribe to updates about Modrinth"
-	},
-	"auth.sign-up.title": {
-		"message": "Sign Up"
-	},
-	"auth.sign-up.title.create-account": {
-		"message": "Or create an account yourself"
-	},
-	"auth.sign-up.title.sign-up-with": {
-		"message": "Sign up with"
-	},
-	"auth.verify-email.action.account-settings": {
-		"message": "Account settings"
-	},
-	"auth.verify-email.action.sign-in": {
-		"message": "Sign in"
-	},
-	"auth.verify-email.already-verified.description": {
-		"message": "Your email is already verified!"
-	},
-	"auth.verify-email.already-verified.title": {
-		"message": "Email already verified"
-	},
-	"auth.verify-email.failed-verification.action": {
-		"message": "Resend verification email"
-	},
-	"auth.verify-email.failed-verification.description": {
-		"message": "We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in."
-	},
-	"auth.verify-email.failed-verification.description.logged-in": {
-		"message": "We were unable to verify your email. Try re-sending the verification email through the button below."
-	},
-	"auth.verify-email.failed-verification.title": {
-		"message": "Email verification failed"
-	},
-	"auth.verify-email.post-verification.description": {
-		"message": "Your email address has been successfully verified!"
-	},
-	"auth.verify-email.post-verification.title": {
-		"message": "Email verification"
-	},
-	"auth.verify-email.title": {
-		"message": "Verify Email"
-	},
-	"auth.welcome.checkbox.subscribe": {
-		"message": "Subscribe to updates about Modrinth"
-	},
-	"auth.welcome.description": {
-		"message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
-	},
-	"auth.welcome.label.tos": {
-		"message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
-	},
-	"auth.welcome.long-title": {
-		"message": "Welcome to Modrinth!"
-	},
-	"auth.welcome.title": {
-		"message": "Welcome"
-	},
-	"collection.button.delete-icon": {
-		"message": "Delete icon"
-	},
-	"collection.button.edit-icon": {
-		"message": "Edit icon"
-	},
-	"collection.button.remove-project": {
-		"message": "Remove project"
-	},
-	"collection.button.unfollow-project": {
-		"message": "Unfollow project"
-	},
-	"collection.delete-modal.description": {
-		"message": "This will remove this collection forever. This action cannot be undone."
-	},
-	"collection.delete-modal.title": {
-		"message": "Are you sure you want to delete this collection?"
-	},
-	"collection.description": {
-		"message": "{description} - View the collection {name} by {username} on Modrinth"
-	},
-	"collection.description.following": {
-		"message": "Auto-generated collection of all the projects you're following."
-	},
-	"collection.error.not-found": {
-		"message": "Collection not found"
-	},
-	"collection.label.collection": {
-		"message": "Collection"
-	},
-	"collection.label.created-at": {
-		"message": "Created {ago}"
-	},
-	"collection.label.curated-by": {
-		"message": "Curated by"
-	},
-	"collection.label.no-projects": {
-		"message": "This collection has no projects!"
-	},
-	"collection.label.no-projects-auth": {
-		"message": "You don't have any projects.\nWould you like to <create-link>add one</create-link>?"
-	},
-	"collection.label.owner": {
-		"message": "Owner"
-	},
-	"collection.label.projects-count": {
-		"message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
-	},
-	"collection.label.updated-at": {
-		"message": "Updated {ago}"
-	},
-	"collection.title": {
-		"message": "{name} - Collection"
-	},
-	"common.close": {
-		"message": "Close"
-	},
-	"common.no": {
-		"message": "No"
-	},
-	"common.yes": {
-		"message": "Yes"
-	},
-	"dashboard.collections.button.create-new": {
-		"message": "Create new"
-	},
-	"dashboard.collections.label.projects-count": {
-		"message": "{count, plural, one {{count} project} other {{count} projects}}"
-	},
-	"dashboard.collections.label.search-input": {
-		"message": "Search your collections"
-	},
-	"dashboard.collections.long-title": {
-		"message": "Your collections"
-	},
-	"dashboard.creator-tax-form-modal.entity.description": {
-		"message": "A foreign entity means a business entity organized outside the United States (such as a non-US corporation, partnership, or LLC)."
-	},
-	"dashboard.creator-tax-form-modal.entity.foreign-entity": {
-		"message": "Foreign entity"
-	},
-	"dashboard.creator-tax-form-modal.entity.private-individual": {
-		"message": "Private individual"
-	},
-	"dashboard.creator-tax-form-modal.entity.question": {
-		"message": "Are you a private individual or part of a foreign entity?"
-	},
-	"dashboard.creator-tax-form-modal.header": {
-		"message": "Tax form"
-	},
-	"dashboard.creator-tax-form-modal.security.description": {
-		"message": "Modrinth uses third-party provider Track1099 to securely collect and store your tax forms. <security-link>Learn more here.</security-link>"
-	},
-	"dashboard.creator-tax-form-modal.security.header": {
-		"message": "Security practices"
-	},
-	"dashboard.creator-tax-form-modal.us-citizen.question": {
-		"message": "Are you a US citizen?"
-	},
-	"error.collection.404.list_item.1": {
-		"message": "You may have mistyped the collection's URL."
-	},
-	"error.collection.404.list_item.2": {
-		"message": "The collection may be private."
-	},
-	"error.collection.404.list_item.3": {
-		"message": "The collection may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
-	},
-	"error.collection.404.list_title": {
-		"message": "Why?"
-	},
-	"error.collection.404.title": {
-		"message": "Collection not found"
-	},
-	"error.generic.404.subtitle": {
-		"message": "The page you were looking for doesn't seem to exist."
-	},
-	"error.generic.404.title": {
-		"message": "Page not found"
-	},
-	"error.generic.default.list_item.1": {
-		"message": "Check if Modrinth is down on our <status-link>Status page</status-link>."
-	},
-	"error.generic.default.list_item.2": {
-		"message": "If this keeps happening, you may want to let the Modrinth Team know by joining our <discord-link>Discord server</discord-link>."
-	},
-	"error.generic.default.list_title": {
-		"message": "Please try again in a few minutes."
-	},
-	"error.generic.default.subtitle": {
-		"message": "Something went wrong."
-	},
-	"error.generic.default.title": {
-		"message": "Uh oh!"
-	},
-	"error.organization.404.list_item.1": {
-		"message": "You may have mistyped the organization's URL."
-	},
-	"error.organization.404.list_item.2": {
-		"message": "The organization's owner may have changed the URL or deleted it."
-	},
-	"error.organization.404.list_item.3": {
-		"message": "The organization may have been removed by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
-	},
-	"error.organization.404.list_title": {
-		"message": "Why?"
-	},
-	"error.organization.404.title": {
-		"message": "Organization not found"
-	},
-	"error.project.404.list_item.1": {
-		"message": "You may have mistyped the project's URL."
-	},
-	"error.project.404.list_item.2": {
-		"message": "The project's owner may have changed the URL, made the project private, or deleted it."
-	},
-	"error.project.404.list_item.3": {
-		"message": "The project may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
-	},
-	"error.project.404.list_title": {
-		"message": "Why?"
-	},
-	"error.project.404.title": {
-		"message": "Project not found"
-	},
-	"error.user.404.list_item.1": {
-		"message": "You may have mistyped the user's username."
-	},
-	"error.user.404.list_item.2": {
-		"message": "The user may have changed their username or deleted their account."
-	},
-	"error.user.404.list_item.3": {
-		"message": "The user's account may have been terminated for violating Modrinth's <tou-link>Terms of Use</tou-link>."
-	},
-	"error.user.404.list_title": {
-		"message": "Why?"
-	},
-	"error.user.404.title": {
-		"message": "User not found"
-	},
-	"frog": {
-		"message": "You've been frogged! 🐸"
-	},
-	"frog.altText": {
-		"message": "A photorealistic painting of a frog labyrinth"
-	},
-	"frog.froggedPeople": {
-		"message": "{count, plural, one {{count} more person} other {{count} more people}} were also frogged!"
-	},
-	"frog.sinceOpened": {
-		"message": "This page was opened {ago}"
-	},
-	"frog.title": {
-		"message": "Frog"
-	},
-	"landing.button.discover-mods": {
-		"message": "Discover mods"
-	},
-	"landing.button.go-to-dashboard": {
-		"message": "Go to dashboard"
-	},
-	"landing.creator.feature.constantly-evolving.description": {
-		"message": "Get the best modding experience possible with constant updates from the Modrinth team"
-	},
-	"landing.creator.feature.constantly-evolving.title": {
-		"message": "Constantly Evolving"
-	},
-	"landing.creator.feature.data-statistics.description": {
-		"message": "Get detailed reports on page views, download counts, and revenue"
-	},
-	"landing.creator.feature.data-statistics.title": {
-		"message": "Data and Statistics"
-	},
-	"landing.creator.feature.discovery.description": {
-		"message": "Get your project discovered by thousands of users through search, our home page, Discord server, and more ways to come in the future!"
-	},
-	"landing.creator.feature.discovery.title": {
-		"message": "Discovery"
-	},
-	"landing.creator.feature.diverse-ecosystem.description": {
-		"message": "Integrate with your build tools through Minotaur for automatic uploads right when you release a new version"
-	},
-	"landing.creator.feature.diverse-ecosystem.title": {
-		"message": "Diverse Ecosystem"
-	},
-	"landing.creator.feature.monetization.description": {
-		"message": "Get paid ad revenue from your project pages and withdraw your funds at any time"
-	},
-	"landing.creator.feature.monetization.title": {
-		"message": "Monetization"
-	},
-	"landing.creator.feature.team-management.description": {
-		"message": "Invite your teammates and manage roles and permissions with ease"
-	},
-	"landing.creator.feature.team-management.title": {
-		"message": "Team Management"
-	},
-	"landing.error.failedToLoadRandomProjects": {
-		"message": "Failed to load random projects :("
-	},
-	"landing.feature.follow.description": {
-		"message": "Get notified every time your favorite projects update and stay in the loop."
-	},
-	"landing.feature.follow.heading": {
-		"message": "Follow projects you love"
-	},
-	"landing.feature.launcher.description": {
-		"message": "Modrinth's open-source API lets launchers add deep integration with Modrinth. You can use Modrinth through <link>our own app</link> and some of the most popular launchers like ATLauncher, MultiMC, and Prism Launcher."
-	},
-	"landing.feature.launcher.heading": {
-		"message": "Play with your favorite launcher"
-	},
-	"landing.feature.search.description": {
-		"message": "Modrinth's lightning-fast search and powerful filters let you find what you want as you type."
-	},
-	"landing.feature.search.heading": {
-		"message": "Find what you want, quickly and easily"
-	},
-	"landing.heading.the-place-for-minecraft": {
-		"message": "The place for Minecraft {content}"
-	},
-	"landing.heading.the-place-for-minecraft.data-packs": {
-		"message": "data packs"
-	},
-	"landing.heading.the-place-for-minecraft.modpacks": {
-		"message": "modpacks"
-	},
-	"landing.heading.the-place-for-minecraft.mods": {
-		"message": "mods"
-	},
-	"landing.heading.the-place-for-minecraft.plugins": {
-		"message": "plugins"
-	},
-	"landing.heading.the-place-for-minecraft.resource-packs": {
-		"message": "resource packs"
-	},
-	"landing.heading.the-place-for-minecraft.servers": {
-		"message": "servers"
-	},
-	"landing.heading.the-place-for-minecraft.shaders": {
-		"message": "shaders"
-	},
-	"landing.launcher.atlauncher-label": {
-		"message": "ATLauncher"
-	},
-	"landing.launcher.graphic-alt": {
-		"message": "A simplified representation of a Minecraft window, with the Mojang Studios logo in Modrinth green."
-	},
-	"landing.launcher.modrinth-app-label": {
-		"message": "Modrinth App"
-	},
-	"landing.launcher.prism-launcher-label": {
-		"message": "Prism Launcher"
-	},
-	"landing.notifications.has-been-updated": {
-		"message": "{title} has been updated!"
-	},
-	"landing.notifications.heading": {
-		"message": "Notifications"
-	},
-	"landing.notifications.received-time": {
-		"message": "Received {time}"
-	},
-	"landing.notifications.version-released": {
-		"message": "Version {version} has been released for {gameVersion}"
-	},
-	"landing.search.label": {
-		"message": "Search"
-	},
-	"landing.search.placeholder": {
-		"message": "Search..."
-	},
-	"landing.search.sort-by.label": {
-		"message": "Sort by"
-	},
-	"landing.section.for-creators.description": {
-		"message": "Give an online home to your creations and reach a massive audience of dedicated players."
-	},
-	"landing.section.for-creators.label": {
-		"message": "For Creators"
-	},
-	"landing.section.for-creators.tagline": {
-		"message": "Share your content with the world"
-	},
-	"landing.section.for-players.description": {
-		"message": "From magical biomes to cursed dungeons, you can be sure to find content to bring your gameplay to the next level."
-	},
-	"landing.section.for-players.label": {
-		"message": "For Players"
-	},
-	"landing.section.for-players.tagline": {
-		"message": "Discover over {count} creations"
-	},
-	"landing.subheading": {
-		"message": "Discover, play, and share Minecraft content through our open-source platform built for the community."
-	},
-	"layout.action.change-theme": {
-		"message": "Change theme"
-	},
-	"layout.action.close-banner": {
-		"message": "Close"
-	},
-	"layout.action.create-new": {
-		"message": "Create new..."
-	},
-	"layout.action.file-lookup": {
-		"message": "File lookup"
-	},
-	"layout.action.lookup-by-email": {
-		"message": "Lookup by email"
-	},
-	"layout.action.manage-server-notices": {
-		"message": "Manage server notices"
-	},
-	"layout.action.new-collection": {
-		"message": "New collection"
-	},
-	"layout.action.new-organization": {
-		"message": "New organization"
-	},
-	"layout.action.new-project": {
-		"message": "New project"
-	},
-	"layout.action.reports": {
-		"message": "Reports"
-	},
-	"layout.action.review-projects": {
-		"message": "Review projects"
-	},
-	"layout.avatar.alt": {
-		"message": "Your avatar"
-	},
-	"layout.banner.account-action": {
-		"message": "Account action required"
-	},
-	"layout.banner.add-email.button": {
-		"message": "Visit account settings"
-	},
-	"layout.banner.add-email.description": {
-		"message": "For security reasons, Modrinth needs you to register an email address to your account."
-	},
-	"layout.banner.build-fail.description": {
-		"message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
-	},
-	"layout.banner.build-fail.title": {
-		"message": "Error generating state from API when building."
-	},
-	"layout.banner.staging.description": {
-		"message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
-	},
-	"layout.banner.staging.title": {
-		"message": "You’re viewing Modrinth’s staging environment"
-	},
-	"layout.banner.subscription-payment-failed.button": {
-		"message": "Update billing info"
-	},
-	"layout.banner.subscription-payment-failed.description": {
-		"message": "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!"
-	},
-	"layout.banner.subscription-payment-failed.title": {
-		"message": "Billing action required."
-	},
-	"layout.banner.tax.action": {
-		"message": "Complete tax form"
-	},
-	"layout.banner.tax.description": {
-		"message": "You’ve already withdrawn over $600 from Modrinth this year. To comply with tax regulations, you need to complete a tax form. Your withdrawals are paused until this form is submitted."
-	},
-	"layout.banner.tax.title": {
-		"message": "Tax form required"
-	},
-	"layout.banner.verify-email.action": {
-		"message": "Re-send verification email"
-	},
-	"layout.banner.verify-email.description": {
-		"message": "For security reasons, Modrinth needs you to verify the email address associated with your account."
-	},
-	"layout.footer.about": {
-		"message": "About"
-	},
-	"layout.footer.about.careers": {
-		"message": "Careers"
-	},
-	"layout.footer.about.changelog": {
-		"message": "Changelog"
-	},
-	"layout.footer.about.news": {
-		"message": "News"
-	},
-	"layout.footer.about.rewards-program": {
-		"message": "Rewards Program"
-	},
-	"layout.footer.about.status": {
-		"message": "Status"
-	},
-	"layout.footer.copyright": {
-		"message": "© {year} Rinth, Inc."
-	},
-	"layout.footer.legal": {
-		"message": "Legal"
-	},
-	"layout.footer.legal-disclaimer": {
-		"message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
-	},
-	"layout.footer.legal.copyright-policy": {
-		"message": "Copyright Policy and DMCA"
-	},
-	"layout.footer.legal.privacy-policy": {
-		"message": "Privacy Policy"
-	},
-	"layout.footer.legal.rules": {
-		"message": "Content Rules"
-	},
-	"layout.footer.legal.security-notice": {
-		"message": "Security Notice"
-	},
-	"layout.footer.legal.terms-of-use": {
-		"message": "Terms of Use"
-	},
-	"layout.footer.modrinth-information": {
-		"message": "Modrinth information"
-	},
-	"layout.footer.open-source": {
-		"message": "Modrinth is <github-link>open source</github-link>."
-	},
-	"layout.footer.products": {
-		"message": "Products"
-	},
-	"layout.footer.products.app": {
-		"message": "Modrinth App"
-	},
-	"layout.footer.products.plus": {
-		"message": "Modrinth+"
-	},
-	"layout.footer.products.servers": {
-		"message": "Modrinth Servers"
-	},
-	"layout.footer.resources": {
-		"message": "Resources"
-	},
-	"layout.footer.resources.api-docs": {
-		"message": "API documentation"
-	},
-	"layout.footer.resources.help-center": {
-		"message": "Help Center"
-	},
-	"layout.footer.resources.report-issues": {
-		"message": "Report issues"
-	},
-	"layout.footer.resources.translate": {
-		"message": "Translate"
-	},
-	"layout.footer.social.bluesky": {
-		"message": "Bluesky"
-	},
-	"layout.footer.social.discord": {
-		"message": "Discord"
-	},
-	"layout.footer.social.github": {
-		"message": "GitHub"
-	},
-	"layout.footer.social.mastodon": {
-		"message": "Mastodon"
-	},
-	"layout.footer.social.x": {
-		"message": "X"
-	},
-	"layout.menu-toggle.action": {
-		"message": "Toggle menu"
-	},
-	"layout.meta.description": {
-		"message": "Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API."
-	},
-	"layout.meta.og-description": {
-		"message": "Discover and publish Minecraft content!"
-	},
-	"layout.mobile.close-menu": {
-		"message": "Close menu"
-	},
-	"layout.mobile.open-menu": {
-		"message": "Open menu"
-	},
-	"layout.nav.active-reports": {
-		"message": "Active reports"
-	},
-	"layout.nav.analytics": {
-		"message": "Analytics"
-	},
-	"layout.nav.discover": {
-		"message": "Discover"
-	},
-	"layout.nav.discover-content": {
-		"message": "Discover content"
-	},
-	"layout.nav.feature-flags": {
-		"message": "Feature flags"
-	},
-	"layout.nav.get-modrinth-app": {
-		"message": "Get Modrinth App"
-	},
-	"layout.nav.home": {
-		"message": "Home"
-	},
-	"layout.nav.host-a-server": {
-		"message": "Host a server"
-	},
-	"layout.nav.modrinth-app": {
-		"message": "Modrinth App"
-	},
-	"layout.nav.modrinth-home-page": {
-		"message": "Modrinth home page"
-	},
-	"layout.nav.my-servers": {
-		"message": "My servers"
-	},
-	"layout.nav.organizations": {
-		"message": "Organizations"
-	},
-	"layout.nav.profile": {
-		"message": "Profile"
-	},
-	"layout.nav.projects": {
-		"message": "Projects"
-	},
-	"layout.nav.revenue": {
-		"message": "Revenue"
-	},
-	"layout.nav.saved-projects": {
-		"message": "Saved projects"
-	},
-	"layout.nav.search": {
-		"message": "Search"
-	},
-	"layout.nav.upgrade-to-modrinth-plus": {
-		"message": "Upgrade to Modrinth+"
-	},
-	"moderation.filter.by": {
-		"message": "Filter by"
-	},
-	"moderation.moderate": {
-		"message": "Moderate"
-	},
-	"moderation.page.projects": {
-		"message": "Projects"
-	},
-	"moderation.page.reports": {
-		"message": "Reports"
-	},
-	"moderation.page.technicalReview": {
-		"message": "Technical Review"
-	},
-	"moderation.search.placeholder": {
-		"message": "Search..."
-	},
-	"moderation.sort.by": {
-		"message": "Sort by"
-	},
-	"moderation.technical.search.placeholder": {
-		"message": "Search tech reviews..."
-	},
-	"profile.button.billing": {
-		"message": "Manage user billing"
-	},
-	"profile.button.info": {
-		"message": "View user details"
-	},
-	"profile.button.manage-projects": {
-		"message": "Manage projects"
-	},
-	"profile.error.not-found": {
-		"message": "User not found"
-	},
-	"profile.joined-at": {
-		"message": "Joined <date>{ago}</date>"
-	},
-	"profile.label.badges": {
-		"message": "Badges"
-	},
-	"profile.label.details": {
-		"message": "Details"
-	},
-	"profile.label.no-collections": {
-		"message": "This user has no collections!"
-	},
-	"profile.label.no-collections-auth": {
-		"message": "You don't have any collections.\nWould you like to <create-link>create one</create-link>?"
-	},
-	"profile.label.no-projects": {
-		"message": "This user has no projects!"
-	},
-	"profile.label.no-projects-auth": {
-		"message": "You don't have any projects.\nWould you like to <create-link>create one</create-link>?"
-	},
-	"profile.label.organizations": {
-		"message": "Organizations"
-	},
-	"profile.meta.description": {
-		"message": "Download {username}'s projects on Modrinth"
-	},
-	"profile.meta.description-with-bio": {
-		"message": "{bio} - Download {username}'s projects on Modrinth"
-	},
-	"profile.stats.downloads": {
-		"message": "{count, plural, one {<stat>{count}</stat> project download} other {<stat>{count}</stat> project downloads}}"
-	},
-	"profile.stats.projects": {
-		"message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
-	},
-	"profile.stats.projects-followers": {
-		"message": "{count, plural, one {<stat>{count}</stat> project follower} other {<stat>{count}</stat> project followers}}"
-	},
-	"profile.user-id": {
-		"message": "User ID: {id}"
-	},
-	"project-member-header.accept": {
-		"message": "Accept"
-	},
-	"project-member-header.decline": {
-		"message": "Decline"
-	},
-	"project-member-header.error": {
-		"message": "Error"
-	},
-	"project-member-header.error-decline": {
-		"message": "Failed to decline team invitation"
-	},
-	"project-member-header.error-join": {
-		"message": "Failed to accept team invitation"
-	},
-	"project-member-header.invitation-no-role": {
-		"message": "You've been invited to join this project. Please accept or decline the invitation."
-	},
-	"project-member-header.invitation-title": {
-		"message": "Invitation to join project"
-	},
-	"project-member-header.invitation-with-role": {
-		"message": "You've been invited be a member of this project with the role of '{role}'."
-	},
-	"project-member-header.success": {
-		"message": "Success"
-	},
-	"project-member-header.success-decline": {
-		"message": "You have declined the team invitation"
-	},
-	"project-member-header.success-join": {
-		"message": "You have joined the project team"
-	},
-	"project-moderation-nags.publishing-checklist": {
-		"message": "Publishing checklist"
-	},
-	"project-moderation-nags.required": {
-		"message": "Required"
-	},
-	"project-moderation-nags.resubmit-for-review": {
-		"message": "Resubmit for review"
-	},
-	"project-moderation-nags.resubmit-for-review-desc": {
-		"message": "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message."
-	},
-	"project-moderation-nags.submit-checklist-tooltip": {
-		"message": "You must complete the required steps in the publishing checklist!"
-	},
-	"project-moderation-nags.submit-for-review": {
-		"message": "Submit for review"
-	},
-	"project-moderation-nags.submit-for-review-desc": {
-		"message": "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published."
-	},
-	"project-moderation-nags.suggestion": {
-		"message": "Suggestion"
-	},
-	"project-moderation-nags.visit-moderation-page": {
-		"message": "Visit moderation page"
-	},
-	"project-moderation-nags.warning": {
-		"message": "Warning"
-	},
-	"project-type.collection.plural": {
-		"message": "Collections"
-	},
-	"project-type.collection.singular": {
-		"message": "Collection"
-	},
-	"project-type.datapack.plural": {
-		"message": "Data Packs"
-	},
-	"project-type.datapack.singular": {
-		"message": "Data Pack"
-	},
-	"project-type.mod.plural": {
-		"message": "Mods"
-	},
-	"project-type.mod.singular": {
-		"message": "Mod"
-	},
-	"project-type.modpack.plural": {
-		"message": "Modpacks"
-	},
-	"project-type.modpack.singular": {
-		"message": "Modpack"
-	},
-	"project-type.plugin.plural": {
-		"message": "Plugins"
-	},
-	"project-type.plugin.singular": {
-		"message": "Plugin"
-	},
-	"project-type.project.plural": {
-		"message": "Projects"
-	},
-	"project-type.project.singular": {
-		"message": "Project"
-	},
-	"project-type.resourcepack.plural": {
-		"message": "Resource Packs"
-	},
-	"project-type.resourcepack.singular": {
-		"message": "Resource Pack"
-	},
-	"project-type.shader.plural": {
-		"message": "Shaders"
-	},
-	"project-type.shader.singular": {
-		"message": "Shader"
-	},
-	"project.about.details.created": {
-		"message": "Created {date}"
-	},
-	"project.about.details.licensed": {
-		"message": "Licensed {license}"
-	},
-	"project.about.details.published": {
-		"message": "Published {date}"
-	},
-	"project.about.details.submitted": {
-		"message": "Submitted {date}"
-	},
-	"project.about.details.title": {
-		"message": "Details"
-	},
-	"project.about.details.updated": {
-		"message": "Updated {date}"
-	},
-	"project.actions.create-server": {
-		"message": "Create a server"
-	},
-	"project.actions.create-server-tooltip": {
-		"message": "Create a server"
-	},
-	"project.actions.dont-show-again": {
-		"message": "Don't show again"
-	},
-	"project.actions.review-project": {
-		"message": "Review project"
-	},
-	"project.actions.servers-promo.description": {
-		"message": "Modrinth Servers is the easiest way to play with your friends without hassle!"
-	},
-	"project.actions.servers-promo.pricing": {
-		"message": "Starting at {price}<small> / month</small>"
-	},
-	"project.actions.servers-promo.title": {
-		"message": "Create a server"
-	},
-	"project.collections.create-new": {
-		"message": "Create new collection"
-	},
-	"project.collections.none-found": {
-		"message": "No collections found."
-	},
-	"project.description.title": {
-		"message": "Description"
-	},
-	"project.details.licensed": {
-		"message": "Licensed"
-	},
-	"project.download.game-version": {
-		"message": "Game version: {version}"
-	},
-	"project.download.game-version-error": {
-		"message": "Error: no game versions found"
-	},
-	"project.download.game-version-tooltip": {
-		"message": "{title} is only available for {version}"
-	},
-	"project.download.game-version-unsupported-tooltip": {
-		"message": "{title} does not support {gameVersion} for {platform}"
-	},
-	"project.download.install-with-app": {
-		"message": "Install with Modrinth App"
-	},
-	"project.download.no-app": {
-		"message": "Don't have Modrinth App?"
-	},
-	"project.download.no-versions-available": {
-		"message": "No versions available for {gameVersion} and {platform}."
-	},
-	"project.download.platform": {
-		"message": "Platform: {platform}"
-	},
-	"project.download.platform-error": {
-		"message": "Error: no platforms found"
-	},
-	"project.download.platform-tooltip": {
-		"message": "{title} is only available for {platform}"
-	},
-	"project.download.platform-unsupported-tooltip": {
-		"message": "{title} does not support {platform} for {gameVersion}"
-	},
-	"project.download.search-game-versions": {
-		"message": "Search game versions..."
-	},
-	"project.download.search-game-versions-label": {
-		"message": "Search game versions..."
-	},
-	"project.download.select-game-version": {
-		"message": "Select game version"
-	},
-	"project.download.select-platform": {
-		"message": "Select platform"
-	},
-	"project.download.show-all-versions": {
-		"message": "Show all versions"
-	},
-	"project.download.title": {
-		"message": "Download {title}"
-	},
-	"project.environment.migration-no-permission.message": {
-		"message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
-	},
-	"project.environment.migration-no-permission.title": {
-		"message": "Environment metadata needs to be reviewed"
-	},
-	"project.environment.migration.learn-more": {
-		"message": "Learn more about this change"
-	},
-	"project.environment.migration.message": {
-		"message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct."
-	},
-	"project.environment.migration.review-button": {
-		"message": "Review environment settings"
-	},
-	"project.environment.migration.title": {
-		"message": "Please review environment metadata"
-	},
-	"project.error.loading": {
-		"message": "Error loading project data{message}"
-	},
-	"project.error.page-not-found": {
-		"message": "The page could not be found"
-	},
-	"project.error.project-not-found": {
-		"message": "Project not found"
-	},
-	"project.gallery.title": {
-		"message": "Gallery"
-	},
-	"project.license.error": {
-		"message": "License text could not be retrieved."
-	},
-	"project.license.loading": {
-		"message": "Loading license text..."
-	},
-	"project.license.title": {
-		"message": "License"
-	},
-	"project.moderation.title": {
-		"message": "Moderation"
-	},
-	"project.navigation.changelog": {
-		"message": "Changelog"
-	},
-	"project.notification.icon-updated.message": {
-		"message": "Your project's icon has been updated."
-	},
-	"project.notification.icon-updated.title": {
-		"message": "Project icon updated"
-	},
-	"project.notification.updated.message": {
-		"message": "Your project has been updated."
-	},
-	"project.notification.updated.title": {
-		"message": "Project updated"
-	},
-	"project.settings.environment.notice.missing-env.description": {
-		"message": "Your project is missing environment metadata, please select the appropriate option below."
-	},
-	"project.settings.environment.notice.missing-env.title": {
-		"message": "Please select an environment for your project"
-	},
-	"project.settings.environment.notice.multiple-environments.description": {
-		"message": "Different versions of your project have different environments selected, so you can't edit them globally at this time."
-	},
-	"project.settings.environment.notice.multiple-environments.title": {
-		"message": "Your project has multiple environments"
-	},
-	"project.settings.environment.notice.review-options.description": {
-		"message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!"
-	},
-	"project.settings.environment.notice.review-options.title": {
-		"message": "Please review the options below"
-	},
-	"project.settings.environment.notice.wrong-project-type.description": {
-		"message": "Only mod or modpack projects can have environment metadata."
-	},
-	"project.settings.environment.notice.wrong-project-type.title": {
-		"message": "This project type does not support environment metadata"
-	},
-	"project.settings.environment.verification.verify-button": {
-		"message": "Verify"
-	},
-	"project.settings.environment.verification.verify-text": {
-		"message": "Verify that this project's environment is set correctly."
-	},
-	"project.settings.general.name.description": {
-		"message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name."
-	},
-	"project.settings.general.name.placeholder.1": {
-		"message": "e.g. Nether Overhaul 2"
-	},
-	"project.settings.general.name.placeholder.2": {
-		"message": "e.g. Construction Equipment"
-	},
-	"project.settings.general.name.placeholder.3": {
-		"message": "e.g. Better than Caving"
-	},
-	"project.settings.general.name.placeholder.4": {
-		"message": "e.g. Enhanced Portals"
-	},
-	"project.settings.general.name.placeholder.5": {
-		"message": "e.g. Dangerous Mobs"
-	},
-	"project.settings.general.name.title": {
-		"message": "Name"
-	},
-	"project.settings.general.tagline.description": {
-		"message": "Summarize your project in no more than one sentence."
-	},
-	"project.settings.general.tagline.placeholder.1": {
-		"message": "e.g. Overhauls game progression to revolve around the Nether."
-	},
-	"project.settings.general.tagline.placeholder.2": {
-		"message": "e.g. Adds wearable construction gear."
-	},
-	"project.settings.general.tagline.placeholder.3": {
-		"message": "e.g. Adds realistic mineshaft-building mechanics."
-	},
-	"project.settings.general.tagline.placeholder.4": {
-		"message": "e.g. Improves how Nether portals link to each other."
-	},
-	"project.settings.general.tagline.placeholder.5": {
-		"message": "e.g. Adds powerful boss versions of the normal mobs to encounter in the night."
-	},
-	"project.settings.general.tagline.title": {
-		"message": "Tagline"
-	},
-	"project.settings.general.url.title": {
-		"message": "URL"
-	},
-	"project.settings.title": {
-		"message": "Settings"
-	},
-	"project.settings.visit-dashboard": {
-		"message": "Visit projects dashboard"
-	},
-	"project.stats.downloads-label": {
-		"message": "download{count, plural, one {} other {s}}"
-	},
-	"project.stats.followers-label": {
-		"message": "follower{count, plural, one {} other {s}}"
-	},
-	"project.status.archived.message": {
-		"message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project."
-	},
-	"project.version.all-versions": {
-		"message": "All versions"
-	},
-	"project.version.back-to-versions": {
-		"message": "Back to versions"
-	},
-	"project.versions.title": {
-		"message": "Versions"
-	},
-	"report.already-reported": {
-		"message": "You've already reported {title}"
-	},
-	"report.already-reported-description": {
-		"message": "You have an open report for this {item} already. You can add more details to your report if you have more information to add."
-	},
-	"report.back-to-item": {
-		"message": "Back to {item}"
-	},
-	"report.body.description": {
-		"message": "Include links and images if possible and relevant. Empty or insufficient reports will be closed and ignored."
-	},
-	"report.body.title": {
-		"message": "Please provide additional context about your report"
-	},
-	"report.checking": {
-		"message": "Checking {item}..."
-	},
-	"report.could-not-find": {
-		"message": "Could not find {item}"
-	},
-	"report.for.violation": {
-		"message": "Violation of Modrinth <rules-link>Rules</rules-link> or <terms-link>Terms of Use</terms-link>"
-	},
-	"report.for.violation.description": {
-		"message": "Examples include malicious, spam, offensive, deceptive, misleading, and illegal content."
-	},
-	"report.form-not-for": {
-		"message": "This form is not for:"
-	},
-	"report.go-to-report": {
-		"message": "Go to report"
-	},
-	"report.not-for.bug-reports": {
-		"message": "Bug reports"
-	},
-	"report.not-for.bug-reports.description": {
-		"message": "You can report bugs to their <issues-link>issue tracker</issues-link>."
-	},
-	"report.not-for.dmca": {
-		"message": "DMCA takedowns"
-	},
-	"report.not-for.dmca.description": {
-		"message": "See our <policy-link>Copyright Policy</policy-link>."
-	},
-	"report.note.copyright.1": {
-		"message": "Please note that you are *not* submitting a DMCA takedown request, but rather a report of reuploaded content."
-	},
-	"report.note.copyright.2": {
-		"message": "If you meant to file a DMCA takedown request (which is a legal action) instead, please see our <copyright-policy-link>Copyright Policy</copyright-policy-link>."
-	},
-	"report.note.malicious.1": {
-		"message": "Reports for malicious or deceptive content must include substantial evidence of the behavior, such as code samples."
-	},
-	"report.note.malicious.2": {
-		"message": "Summaries from Microsoft Defender, VirusTotal, or AI malware detection are not sufficient forms of evidence and will not be accepted."
-	},
-	"report.please-report": {
-		"message": "Please report:"
-	},
-	"report.question.content-id": {
-		"message": "What is the ID of the {item}?"
-	},
-	"report.question.content-type": {
-		"message": "What type of content are you reporting?"
-	},
-	"report.question.report-reason": {
-		"message": "Which of Modrinth's rules is this {item} violating?"
-	},
-	"report.report-content": {
-		"message": "Report content to moderators"
-	},
-	"report.report-item": {
-		"message": "Report {title} to moderators"
-	},
-	"report.submit": {
-		"message": "Submit report"
-	},
-	"revenue.transfers.total": {
-		"message": "You have withdrawn {amount} in total."
-	},
-	"revenue.transfers.total.method": {
-		"message": "You have withdrawn {amount} through {method}."
-	},
-	"revenue.transfers.total.year": {
-		"message": "You have withdrawn {amount} in {year}."
-	},
-	"revenue.transfers.total.year_method": {
-		"message": "You have withdrawn {amount} in {year} through {method}."
-	},
-	"scopes.analytics.description": {
-		"message": "Access your analytics data"
-	},
-	"scopes.analytics.label": {
-		"message": "Read analytics"
-	},
-	"scopes.collectionCreate.description": {
-		"message": "Create collections"
-	},
-	"scopes.collectionCreate.label": {
-		"message": "Create collections"
-	},
-	"scopes.collectionDelete.description": {
-		"message": "Delete collections"
-	},
-	"scopes.collectionDelete.label": {
-		"message": "Delete collections"
-	},
-	"scopes.collectionRead.description": {
-		"message": "Read collections"
-	},
-	"scopes.collectionRead.label": {
-		"message": "Read collections"
-	},
-	"scopes.collectionWrite.description": {
-		"message": "Write to collections"
-	},
-	"scopes.collectionWrite.label": {
-		"message": "Write collections"
-	},
-	"scopes.notificationRead.description": {
-		"message": "Read your notifications"
-	},
-	"scopes.notificationRead.label": {
-		"message": "Read notifications"
-	},
-	"scopes.notificationWrite.description": {
-		"message": "Delete/View your notifications"
-	},
-	"scopes.notificationWrite.label": {
-		"message": "Write notifications"
-	},
-	"scopes.organizationCreate.description": {
-		"message": "Create organizations"
-	},
-	"scopes.organizationCreate.label": {
-		"message": "Create organizations"
-	},
-	"scopes.organizationDelete.description": {
-		"message": "Delete organizations"
-	},
-	"scopes.organizationDelete.label": {
-		"message": "Delete organizations"
-	},
-	"scopes.organizationRead.description": {
-		"message": "Read organizations"
-	},
-	"scopes.organizationRead.label": {
-		"message": "Read organizations"
-	},
-	"scopes.organizationWrite.description": {
-		"message": "Write to organizations"
-	},
-	"scopes.organizationWrite.label": {
-		"message": "Write organizations"
-	},
-	"scopes.patCreate.description": {
-		"message": "Create personal API tokens"
-	},
-	"scopes.patCreate.label": {
-		"message": "Create PATs"
-	},
-	"scopes.patDelete.description": {
-		"message": "Delete your personal API tokens"
-	},
-	"scopes.patDelete.label": {
-		"message": "Delete PATs"
-	},
-	"scopes.patRead.description": {
-		"message": "View created API tokens"
-	},
-	"scopes.patRead.label": {
-		"message": "Read PATs"
-	},
-	"scopes.patWrite.description": {
-		"message": "Edit personal API tokens"
-	},
-	"scopes.patWrite.label": {
-		"message": "Write PATs"
-	},
-	"scopes.payoutsRead.description": {
-		"message": "Read your payouts data"
-	},
-	"scopes.payoutsRead.label": {
-		"message": "Read payouts"
-	},
-	"scopes.payoutsWrite.description": {
-		"message": "Withdraw money"
-	},
-	"scopes.payoutsWrite.label": {
-		"message": "Write payouts"
-	},
-	"scopes.performAnalytics.description": {
-		"message": "Perform analytics actions"
-	},
-	"scopes.performAnalytics.label": {
-		"message": "Perform analytics"
-	},
-	"scopes.projectCreate.description": {
-		"message": "Create new projects"
-	},
-	"scopes.projectCreate.label": {
-		"message": "Create projects"
-	},
-	"scopes.projectDelete.description": {
-		"message": "Delete your projects"
-	},
-	"scopes.projectDelete.label": {
-		"message": "Delete projects"
-	},
-	"scopes.projectRead.description": {
-		"message": "Read all your projects"
-	},
-	"scopes.projectRead.label": {
-		"message": "Read projects"
-	},
-	"scopes.projectWrite.description": {
-		"message": "Write to project data"
-	},
-	"scopes.projectWrite.label": {
-		"message": "Write projects"
-	},
-	"scopes.reportCreate.description": {
-		"message": "Create reports"
-	},
-	"scopes.reportCreate.label": {
-		"message": "Create reports"
-	},
-	"scopes.reportDelete.description": {
-		"message": "Delete reports"
-	},
-	"scopes.reportDelete.label": {
-		"message": "Delete reports"
-	},
-	"scopes.reportRead.description": {
-		"message": "Read reports"
-	},
-	"scopes.reportRead.label": {
-		"message": "Read reports"
-	},
-	"scopes.reportWrite.description": {
-		"message": "Edit reports"
-	},
-	"scopes.reportWrite.label": {
-		"message": "Write reports"
-	},
-	"scopes.sessionAccess.description": {
-		"message": "Access modrinth-issued sessions"
-	},
-	"scopes.sessionAccess.label": {
-		"message": "Access sessions"
-	},
-	"scopes.sessionDelete.description": {
-		"message": "Delete sessions"
-	},
-	"scopes.sessionDelete.label": {
-		"message": "Delete sessions"
-	},
-	"scopes.sessionRead.description": {
-		"message": "Read active sessions"
-	},
-	"scopes.sessionRead.label": {
-		"message": "Read sessions"
-	},
-	"scopes.threadRead.description": {
-		"message": "Read threads"
-	},
-	"scopes.threadRead.label": {
-		"message": "Read threads"
-	},
-	"scopes.threadWrite.description": {
-		"message": "Write to threads"
-	},
-	"scopes.threadWrite.label": {
-		"message": "Write threads"
-	},
-	"scopes.userAuthWrite.description": {
-		"message": "Modify your authentication data"
-	},
-	"scopes.userAuthWrite.label": {
-		"message": "Write auth data"
-	},
-	"scopes.userDelete.description": {
-		"message": "Delete your account"
-	},
-	"scopes.userDelete.label": {
-		"message": "Delete your account"
-	},
-	"scopes.userRead.description": {
-		"message": "Access your public profile information"
-	},
-	"scopes.userRead.label": {
-		"message": "Read user data"
-	},
-	"scopes.userReadEmail.description": {
-		"message": "Read your email"
-	},
-	"scopes.userReadEmail.label": {
-		"message": "Read user email"
-	},
-	"scopes.userWrite.description": {
-		"message": "Write to your profile"
-	},
-	"scopes.userWrite.label": {
-		"message": "Write user data"
-	},
-	"scopes.versionCreate.description": {
-		"message": "Create new versions"
-	},
-	"scopes.versionCreate.label": {
-		"message": "Create versions"
-	},
-	"scopes.versionDelete.description": {
-		"message": "Delete a version"
-	},
-	"scopes.versionDelete.label": {
-		"message": "Delete versions"
-	},
-	"scopes.versionRead.description": {
-		"message": "Read all versions"
-	},
-	"scopes.versionRead.label": {
-		"message": "Read versions"
-	},
-	"scopes.versionWrite.description": {
-		"message": "Write to version data"
-	},
-	"scopes.versionWrite.label": {
-		"message": "Write versions"
-	},
-	"search.filter.locked.server": {
-		"message": "Provided by the server"
-	},
-	"search.filter.locked.server-game-version.title": {
-		"message": "Game version is provided by the server"
-	},
-	"search.filter.locked.server-loader.title": {
-		"message": "Loader is provided by the server"
-	},
-	"search.filter.locked.server.sync": {
-		"message": "Sync with server"
-	},
-	"servers.backup.create.in-progress.tooltip": {
-		"message": "Backup creation in progress"
-	},
-	"servers.backup.restore.in-progress.tooltip": {
-		"message": "Backup restore in progress"
-	},
-	"servers.backups.item.already-preparing": {
-		"message": "Already preparing backup for download"
-	},
-	"servers.backups.item.automated": {
-		"message": "Automated"
-	},
-	"servers.backups.item.creating-backup": {
-		"message": "Creating backup..."
-	},
-	"servers.backups.item.failed-to-create-backup": {
-		"message": "Failed to create backup"
-	},
-	"servers.backups.item.failed-to-prepare-backup": {
-		"message": "Failed to prepare download"
-	},
-	"servers.backups.item.failed-to-restore-backup": {
-		"message": "Failed to restore from backup"
-	},
-	"servers.backups.item.lock": {
-		"message": "Lock"
-	},
-	"servers.backups.item.locked": {
-		"message": "Locked"
-	},
-	"servers.backups.item.prepare-download": {
-		"message": "Prepare download"
-	},
-	"servers.backups.item.prepare-download-again": {
-		"message": "Try preparing again"
-	},
-	"servers.backups.item.preparing-download": {
-		"message": "Preparing download..."
-	},
-	"servers.backups.item.queued-for-backup": {
-		"message": "Queued for backup"
-	},
-	"servers.backups.item.rename": {
-		"message": "Rename"
-	},
-	"servers.backups.item.restore": {
-		"message": "Restore"
-	},
-	"servers.backups.item.restoring-backup": {
-		"message": "Restoring from backup..."
-	},
-	"servers.backups.item.retry": {
-		"message": "Retry"
-	},
-	"servers.backups.item.unlock": {
-		"message": "Unlock"
-	},
-	"servers.notice.actions": {
-		"message": "Actions"
-	},
-	"servers.notice.begins": {
-		"message": "Begins"
-	},
-	"servers.notice.dismissable": {
-		"message": "Dismissable"
-	},
-	"servers.notice.expires": {
-		"message": "Expires"
-	},
-	"servers.notice.id": {
-		"message": "ID"
-	},
-	"servers.notice.level": {
-		"message": "Level"
-	},
-	"servers.notice.undismissable": {
-		"message": "Undismissable"
-	},
-	"servers.notices.create-notice": {
-		"message": "Create notice"
-	},
-	"servers.notices.no-notices": {
-		"message": "No notices"
-	},
-	"servers.plan.large.description": {
-		"message": "Ideal for 15–25 players, modpacks, or heavy modding."
-	},
-	"servers.plan.large.name": {
-		"message": "Large"
-	},
-	"servers.plan.medium.description": {
-		"message": "Great for 6–15 players and multiple mods."
-	},
-	"servers.plan.medium.name": {
-		"message": "Medium"
-	},
-	"servers.plan.small.description": {
-		"message": "Perfect for 1–5 friends with a few light mods."
-	},
-	"servers.plan.small.name": {
-		"message": "Small"
-	},
-	"settings.billing.modal.cancel.action": {
-		"message": "Cancel subscription"
-	},
-	"settings.billing.modal.cancel.description": {
-		"message": "This will cancel your subscription. You will retain your perks until the end of the current billing cycle."
-	},
-	"settings.billing.modal.cancel.title": {
-		"message": "Are you sure you want to cancel your subscription?"
-	},
-	"settings.billing.modal.delete.action": {
-		"message": "Remove this payment method"
-	},
-	"settings.billing.modal.delete.description": {
-		"message": "This will remove this payment method forever (like really forever)."
-	},
-	"settings.billing.modal.delete.title": {
-		"message": "Are you sure you want to remove this payment method?"
-	},
-	"settings.billing.payment_method.action.add": {
-		"message": "Add payment method"
-	},
-	"settings.billing.payment_method.action.history": {
-		"message": "View past charges"
-	},
-	"settings.billing.payment_method.action.primary": {
-		"message": "Make primary"
-	},
-	"settings.billing.payment_method.card_display": {
-		"message": "{card_brand} ending in {last_four}"
-	},
-	"settings.billing.payment_method.card_expiry": {
-		"message": "Expires {month}/{year}"
-	},
-	"settings.billing.payment_method.none": {
-		"message": "You have not added any payment methods."
-	},
-	"settings.billing.payment_method.primary": {
-		"message": "Primary"
-	},
-	"settings.billing.payment_method.title": {
-		"message": "Payment methods"
-	},
-	"settings.billing.payment_method_type.amazon_pay": {
-		"message": "Amazon Pay"
-	},
-	"settings.billing.payment_method_type.amex": {
-		"message": "American Express"
-	},
-	"settings.billing.payment_method_type.cashapp": {
-		"message": "Cash App"
-	},
-	"settings.billing.payment_method_type.diners": {
-		"message": "Diners Club"
-	},
-	"settings.billing.payment_method_type.discover": {
-		"message": "Discover"
-	},
-	"settings.billing.payment_method_type.eftpos": {
-		"message": "EFTPOS"
-	},
-	"settings.billing.payment_method_type.jcb": {
-		"message": "JCB"
-	},
-	"settings.billing.payment_method_type.mastercard": {
-		"message": "MasterCard"
-	},
-	"settings.billing.payment_method_type.paypal": {
-		"message": "PayPal"
-	},
-	"settings.billing.payment_method_type.unionpay": {
-		"message": "UnionPay"
-	},
-	"settings.billing.payment_method_type.unknown": {
-		"message": "Unknown payment method"
-	},
-	"settings.billing.payment_method_type.visa": {
-		"message": "Visa"
-	},
-	"settings.billing.pyro_subscription.description": {
-		"message": "Manage your Modrinth Server subscriptions."
-	},
-	"settings.billing.pyro_subscription.title": {
-		"message": "Modrinth Server Subscriptions"
-	},
-	"settings.billing.subscription.description": {
-		"message": "Manage your Modrinth subscriptions."
-	},
-	"settings.billing.subscription.title": {
-		"message": "Subscriptions"
-	},
-	"settings.display.banner.developer-mode.button": {
-		"message": "Deactivate developer mode"
-	},
-	"settings.display.banner.developer-mode.description": {
-		"message": "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode."
-	},
-	"settings.display.flags.description": {
-		"message": "Enable or disable certain features on this device."
-	},
-	"settings.display.flags.title": {
-		"message": "Toggle features"
-	},
-	"settings.display.project-list-layouts.datapack": {
-		"message": "Data Packs page"
-	},
-	"settings.display.project-list-layouts.description": {
-		"message": "Select your preferred layout for each page that displays project lists on this device."
-	},
-	"settings.display.project-list-layouts.mod": {
-		"message": "Mods page"
-	},
-	"settings.display.project-list-layouts.modpack": {
-		"message": "Modpacks page"
-	},
-	"settings.display.project-list-layouts.plugin": {
-		"message": "Plugins page"
-	},
-	"settings.display.project-list-layouts.resourcepack": {
-		"message": "Resource Packs page"
-	},
-	"settings.display.project-list-layouts.shader": {
-		"message": "Shaders page"
-	},
-	"settings.display.project-list-layouts.title": {
-		"message": "Project list layouts"
-	},
-	"settings.display.project-list-layouts.user": {
-		"message": "User profile pages"
-	},
-	"settings.display.project-list.layouts.collection": {
-		"message": "Collection"
-	},
-	"settings.display.sidebar.advanced-rendering.description": {
-		"message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
-	},
-	"settings.display.sidebar.advanced-rendering.title": {
-		"message": "Advanced rendering"
-	},
-	"settings.display.sidebar.external-links-new-tab.description": {
-		"message": "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab."
-	},
-	"settings.display.sidebar.external-links-new-tab.title": {
-		"message": "Open external links in new tab"
-	},
-	"settings.display.sidebar.hide-app-promos.description": {
-		"message": "Hides the \"Get Modrinth App\" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer."
-	},
-	"settings.display.sidebar.hide-app-promos.title": {
-		"message": "Hide Modrinth App promotions"
-	},
-	"settings.display.sidebar.left-aligned-content-sidebar.title": {
-		"message": "Left-aligned sidebar on content pages"
-	},
-	"settings.display.sidebar.right-aligned-content-sidebar.description": {
-		"message": "Aligns the sidebar to the left of the page's content."
-	},
-	"settings.display.sidebar.right-aligned-filters-sidebar.description": {
-		"message": "Aligns the filters sidebar to the right of the search results."
-	},
-	"settings.display.sidebar.right-aligned-filters-sidebar.title": {
-		"message": "Right-aligned filters sidebar on search pages"
-	},
-	"settings.display.theme.description": {
-		"message": "Select your preferred color theme for Modrinth on this device."
-	},
-	"settings.display.theme.title": {
-		"message": "Color theme"
-	},
-	"settings.language.categories.auto": {
-		"message": "Automatic"
-	},
-	"settings.language.categories.default": {
-		"message": "Standard languages"
-	},
-	"settings.language.categories.experimental": {
-		"message": "Experimental languages"
-	},
-	"settings.language.categories.fun": {
-		"message": "Fun languages"
-	},
-	"settings.language.categories.search-result": {
-		"message": "Search results"
-	},
-	"settings.language.description": {
-		"message": "Choose your preferred language for the site. Translations are contributed by volunteers <crowdin-link>on Crowdin</crowdin-link>."
-	},
-	"settings.language.languages.automatic": {
-		"message": "Sync with the system language"
-	},
-	"settings.language.languages.language-label-applying": {
-		"message": "{label}. Applying..."
-	},
-	"settings.language.languages.language-label-error": {
-		"message": "{label}. Error"
-	},
-	"settings.language.languages.load-failed": {
-		"message": "Cannot load this language. Try again in a bit."
-	},
-	"settings.language.languages.search-field.description": {
-		"message": "Submit to focus the first search result"
-	},
-	"settings.language.languages.search-field.placeholder": {
-		"message": "Search for a language..."
-	},
-	"settings.language.languages.search-results-announcement": {
-		"message": "{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search."
-	},
-	"settings.language.languages.search.no-results": {
-		"message": "No languages match your search."
-	},
-	"settings.language.warning": {
-		"message": "Changing the site language may cause some content to appear in English if a translation is not available. The site is not yet fully translated, so some content may remain in English for certain languages. We are still working on improving our localization system, so occasionally content may appear broken."
-	},
-	"settings.pats.action.create": {
-		"message": "Create a PAT"
-	},
-	"settings.pats.description": {
-		"message": "PATs can be used to access Modrinth's API. For more information, see <doc-link>Modrinth's API documentation</doc-link>. They can be created and revoked at any time."
-	},
-	"settings.pats.modal.create.action": {
-		"message": "Create PAT"
-	},
-	"settings.pats.modal.create.expires.label": {
-		"message": "Expires"
-	},
-	"settings.pats.modal.create.name.label": {
-		"message": "Name"
-	},
-	"settings.pats.modal.create.name.placeholder": {
-		"message": "Enter the PAT's name..."
-	},
-	"settings.pats.modal.create.title": {
-		"message": "Create personal access token"
-	},
-	"settings.pats.modal.delete.action": {
-		"message": "Delete this token"
-	},
-	"settings.pats.modal.delete.description": {
-		"message": "This will remove this token forever (like really forever)."
-	},
-	"settings.pats.modal.delete.title": {
-		"message": "Are you sure you want to delete this token?"
-	},
-	"settings.pats.modal.edit.title": {
-		"message": "Edit personal access token"
-	},
-	"settings.pats.token.action.edit": {
-		"message": "Edit token"
-	},
-	"settings.pats.token.action.revoke": {
-		"message": "Revoke token"
-	},
-	"settings.pats.token.expired-ago": {
-		"message": "Expired {ago}"
-	},
-	"settings.pats.token.expires-in": {
-		"message": "Expires {inTime}"
-	},
-	"settings.pats.token.last-used": {
-		"message": "Last used {ago}"
-	},
-	"settings.pats.token.never-used": {
-		"message": "Never used"
-	},
-	"settings.profile.bio.description": {
-		"message": "A short description to tell everyone a little bit about you."
-	},
-	"settings.profile.bio.title": {
-		"message": "Bio"
-	},
-	"settings.profile.description": {
-		"message": "Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>."
-	},
-	"settings.profile.profile-info": {
-		"message": "Profile information"
-	},
-	"settings.profile.profile-picture.reset": {
-		"message": "Reset"
-	},
-	"settings.profile.profile-picture.title": {
-		"message": "Profile picture"
-	},
-	"settings.profile.username.description": {
-		"message": "A unique case-insensitive name to identify your profile."
-	},
-	"settings.profile.username.title": {
-		"message": "Username"
-	},
-	"settings.sessions.action.revoke-session": {
-		"message": "Revoke session"
-	},
-	"settings.sessions.created-ago": {
-		"message": "Created {ago}"
-	},
-	"settings.sessions.current-session": {
-		"message": "Current session"
-	},
-	"settings.sessions.description": {
-		"message": "Here are all the devices that are currently logged in with your Modrinth account. You can log out of each one individually.\n\nIf you see an entry you don't recognize, log out of that device and change your Modrinth account password immediately."
-	},
-	"settings.sessions.last-accessed-ago": {
-		"message": "Last accessed {ago}"
-	},
-	"settings.sessions.unknown-os": {
-		"message": "Unknown OS"
-	},
-	"settings.sessions.unknown-platform": {
-		"message": "Unknown platform"
-	},
-	"ui.latest-news-row.latest-news": {
-		"message": "Latest news from Modrinth"
-	},
-	"ui.latest-news-row.view-all": {
-		"message": "View all news"
-	}
+  "action.cancel": {
+    "message": "Cancel"
+  },
+  "action.continue": {
+    "message": "Continue"
+  },
+  "action.max": {
+    "message": "Max"
+  },
+  "action.withdraw": {
+    "message": "Withdraw"
+  },
+  "admin.billing.error.not-found": {
+    "message": "User not found"
+  },
+  "app-marketing.download.description": {
+    "message": "Our desktop app is available across all platforms, choose your desired version."
+  },
+  "app-marketing.download.download-appimage": {
+    "message": "Download the AppImage"
+  },
+  "app-marketing.download.download-beta": {
+    "message": "Download the beta"
+  },
+  "app-marketing.download.download-deb": {
+    "message": "Download the DEB"
+  },
+  "app-marketing.download.download-rpm": {
+    "message": "Download the RPM"
+  },
+  "app-marketing.download.linux": {
+    "message": "Linux"
+  },
+  "app-marketing.download.linux-disclaimer": {
+    "message": "The Linux versions of Modrinth App are <issues-link>known to have issues</issues-link> on certain systems and configurations. If Modrinth App is unstable on your system, we encourage you to try other apps like <prism-link>Prism Launcher</prism-link> to easily install Modrinth content."
+  },
+  "app-marketing.download.mac": {
+    "message": "Mac"
+  },
+  "app-marketing.download.options-title": {
+    "message": "Download options"
+  },
+  "app-marketing.download.terms": {
+    "message": "By downloading Modrinth App you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
+  },
+  "app-marketing.download.third-party-packages": {
+    "message": "Third-party packages"
+  },
+  "app-marketing.download.title": {
+    "message": "Download Modrinth App (Beta)"
+  },
+  "app-marketing.download.windows": {
+    "message": "Windows"
+  },
+  "app-marketing.features.follow.description": {
+    "message": "Save content you love and receive updates with one click."
+  },
+  "app-marketing.features.follow.title": {
+    "message": "Follow projects"
+  },
+  "app-marketing.features.importing.description": {
+    "message": "Import all your favorite profiles from the launcher you were using before, and get started with Modrinth App in seconds!"
+  },
+  "app-marketing.features.importing.gdlauncher-alt": {
+    "message": "GDLauncher"
+  },
+  "app-marketing.features.importing.multimc-alt": {
+    "message": "MultiMC"
+  },
+  "app-marketing.features.importing.title": {
+    "message": "Profile importing"
+  },
+  "app-marketing.features.mod-management.actions": {
+    "message": "Actions"
+  },
+  "app-marketing.features.mod-management.byAuthor": {
+    "message": "by {author}"
+  },
+  "app-marketing.features.mod-management.description": {
+    "message": "Modrinth makes it easy to manage all your mods in one place. You can install, uninstall, and update mods with a single click."
+  },
+  "app-marketing.features.mod-management.installed-mods": {
+    "message": "Installed mods"
+  },
+  "app-marketing.features.mod-management.name": {
+    "message": "Name"
+  },
+  "app-marketing.features.mod-management.search-mods": {
+    "message": "Search mods"
+  },
+  "app-marketing.features.mod-management.title": {
+    "message": "Mod management"
+  },
+  "app-marketing.features.mod-management.version": {
+    "message": "Version"
+  },
+  "app-marketing.features.offline.description": {
+    "message": "Play your mods, whether you are connected to the internet, or not."
+  },
+  "app-marketing.features.offline.title": {
+    "message": "Offline mode"
+  },
+  "app-marketing.features.open-source.description": {
+    "message": "Modrinth's launcher is fully open source. You can view the source code on our <github-link>GitHub</github-link>!"
+  },
+  "app-marketing.features.open-source.title": {
+    "message": "Open source"
+  },
+  "app-marketing.features.performance.activity-monitor": {
+    "message": "Activity monitor"
+  },
+  "app-marketing.features.performance.cpu-percent": {
+    "message": "% CPU"
+  },
+  "app-marketing.features.performance.description": {
+    "message": "Modrinth App performs better than many of the leading mod managers, using just 150mb of RAM!"
+  },
+  "app-marketing.features.performance.discord": {
+    "message": "Discord"
+  },
+  "app-marketing.features.performance.good-performance": {
+    "message": "Good performance"
+  },
+  "app-marketing.features.performance.google-chrome": {
+    "message": "Google Chrome"
+  },
+  "app-marketing.features.performance.infinite-mb": {
+    "message": "∞ MB"
+  },
+  "app-marketing.features.performance.infinite-times-infinite-mb": {
+    "message": "∞ * ∞ MB"
+  },
+  "app-marketing.features.performance.less-than-150mb": {
+    "message": "< 150 MB"
+  },
+  "app-marketing.features.performance.modrinth-app": {
+    "message": "Modrinth App"
+  },
+  "app-marketing.features.performance.one-billion-percent": {
+    "message": "1 billion %"
+  },
+  "app-marketing.features.performance.process-name": {
+    "message": "Process name"
+  },
+  "app-marketing.features.performance.ram": {
+    "message": "RAM"
+  },
+  "app-marketing.features.performance.small": {
+    "message": "Small"
+  },
+  "app-marketing.features.performance.title": {
+    "message": "Performant"
+  },
+  "app-marketing.features.play.description": {
+    "message": "Use Modrinth App to download and play with your favorite mods and modpacks."
+  },
+  "app-marketing.features.play.title": {
+    "message": "Play with your favorite mods"
+  },
+  "app-marketing.features.sharing.description": {
+    "message": "Build, share, and play modpacks with any of the thousands of mods and modpacks hosted here on Modrinth."
+  },
+  "app-marketing.features.sharing.modpack": {
+    "message": "Modpack"
+  },
+  "app-marketing.features.sharing.share-button": {
+    "message": "Share"
+  },
+  "app-marketing.features.sharing.title": {
+    "message": "Share modpacks"
+  },
+  "app-marketing.features.unlike-any-launcher": {
+    "message": "Unlike any launcher"
+  },
+  "app-marketing.features.website.description": {
+    "message": "Modrinth App is fully integrated with the website, so you can access all your favorite projects from the app!"
+  },
+  "app-marketing.features.website.title": {
+    "message": "Website integration"
+  },
+  "app-marketing.features.youve-used-before": {
+    "message": "you've used before"
+  },
+  "app-marketing.hero.app-screenshot-alt": {
+    "message": "Screenshot of Modrinth App with a Cobblemon instance opened to the 'Content' page."
+  },
+  "app-marketing.hero.description": {
+    "message": "Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package."
+  },
+  "app-marketing.hero.download-button": {
+    "message": "Download Modrinth App"
+  },
+  "app-marketing.hero.download-modrinth-app": {
+    "message": "Download Modrinth App"
+  },
+  "app-marketing.hero.download-modrinth-app-for-os": {
+    "message": "Download Modrinth App for {os}"
+  },
+  "app-marketing.hero.minecraft-screenshot-alt": {
+    "message": "Screenshot of the Cobblemon instance's main menu screen."
+  },
+  "app-marketing.hero.more-download-options": {
+    "message": "More Download Options"
+  },
+  "auth.authorize.action.authorize": {
+    "message": "Authorize"
+  },
+  "auth.authorize.action.decline": {
+    "message": "Decline"
+  },
+  "auth.authorize.app-info": {
+    "message": "<strong>{appName}</strong> by <creator-link>{creator}</creator-link> will be able to:"
+  },
+  "auth.authorize.authorize-app-name": {
+    "message": "Authorize {appName}"
+  },
+  "auth.authorize.error.no-redirect-url": {
+    "message": "No redirect location found in response"
+  },
+  "auth.authorize.redirect-url": {
+    "message": "You will be redirected to <redirect-url>{url}</redirect-url>"
+  },
+  "auth.reset-password.method-choice.action": {
+    "message": "Send recovery email"
+  },
+  "auth.reset-password.method-choice.description": {
+    "message": "Enter your email below and we'll send a recovery link to allow you to recover your account."
+  },
+  "auth.reset-password.method-choice.email-username.label": {
+    "message": "Email or username"
+  },
+  "auth.reset-password.method-choice.email-username.placeholder": {
+    "message": "Email"
+  },
+  "auth.reset-password.notification.email-sent.text": {
+    "message": "An email with instructions has been sent to you if the email was previously saved on your account."
+  },
+  "auth.reset-password.notification.email-sent.title": {
+    "message": "Email sent"
+  },
+  "auth.reset-password.notification.password-reset.text": {
+    "message": "You can now log-in into your account with your new password."
+  },
+  "auth.reset-password.notification.password-reset.title": {
+    "message": "Password successfully reset"
+  },
+  "auth.reset-password.post-challenge.action": {
+    "message": "Reset password"
+  },
+  "auth.reset-password.post-challenge.confirm-password.label": {
+    "message": "Confirm password"
+  },
+  "auth.reset-password.post-challenge.description": {
+    "message": "Enter your new password below to gain access to your account."
+  },
+  "auth.reset-password.title": {
+    "message": "Reset Password"
+  },
+  "auth.reset-password.title.long": {
+    "message": "Reset your password"
+  },
+  "auth.sign-in.2fa.description": {
+    "message": "Please enter a two-factor code to proceed."
+  },
+  "auth.sign-in.2fa.label": {
+    "message": "Enter two-factor code"
+  },
+  "auth.sign-in.2fa.placeholder": {
+    "message": "Enter code..."
+  },
+  "auth.sign-in.additional-options": {
+    "message": "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>"
+  },
+  "auth.sign-in.email-username.label": {
+    "message": "Email or username"
+  },
+  "auth.sign-in.password.label": {
+    "message": "Password"
+  },
+  "auth.sign-in.sign-in-with": {
+    "message": "Sign in with"
+  },
+  "auth.sign-in.title": {
+    "message": "Sign In"
+  },
+  "auth.sign-in.use-password": {
+    "message": "Or use a password"
+  },
+  "auth.sign-up.action.create-account": {
+    "message": "Create account"
+  },
+  "auth.sign-up.confirm-password.label": {
+    "message": "Confirm password"
+  },
+  "auth.sign-up.email.label": {
+    "message": "Email"
+  },
+  "auth.sign-up.label.username": {
+    "message": "Username"
+  },
+  "auth.sign-up.legal-dislaimer": {
+    "message": "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
+  },
+  "auth.sign-up.notification.password-mismatch.text": {
+    "message": "Passwords do not match!"
+  },
+  "auth.sign-up.password.label": {
+    "message": "Password"
+  },
+  "auth.sign-up.sign-in-option.title": {
+    "message": "Already have an account?"
+  },
+  "auth.sign-up.subscribe.label": {
+    "message": "Subscribe to updates about Modrinth"
+  },
+  "auth.sign-up.title": {
+    "message": "Sign Up"
+  },
+  "auth.sign-up.title.create-account": {
+    "message": "Or create an account yourself"
+  },
+  "auth.sign-up.title.sign-up-with": {
+    "message": "Sign up with"
+  },
+  "auth.verify-email.action.account-settings": {
+    "message": "Account settings"
+  },
+  "auth.verify-email.action.sign-in": {
+    "message": "Sign in"
+  },
+  "auth.verify-email.already-verified.description": {
+    "message": "Your email is already verified!"
+  },
+  "auth.verify-email.already-verified.title": {
+    "message": "Email already verified"
+  },
+  "auth.verify-email.failed-verification.action": {
+    "message": "Resend verification email"
+  },
+  "auth.verify-email.failed-verification.description": {
+    "message": "We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in."
+  },
+  "auth.verify-email.failed-verification.description.logged-in": {
+    "message": "We were unable to verify your email. Try re-sending the verification email through the button below."
+  },
+  "auth.verify-email.failed-verification.title": {
+    "message": "Email verification failed"
+  },
+  "auth.verify-email.post-verification.description": {
+    "message": "Your email address has been successfully verified!"
+  },
+  "auth.verify-email.post-verification.title": {
+    "message": "Email verification"
+  },
+  "auth.verify-email.title": {
+    "message": "Verify Email"
+  },
+  "auth.welcome.checkbox.subscribe": {
+    "message": "Subscribe to updates about Modrinth"
+  },
+  "auth.welcome.description": {
+    "message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
+  },
+  "auth.welcome.label.tos": {
+    "message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
+  },
+  "auth.welcome.long-title": {
+    "message": "Welcome to Modrinth!"
+  },
+  "auth.welcome.title": {
+    "message": "Welcome"
+  },
+  "collection.button.delete-icon": {
+    "message": "Delete icon"
+  },
+  "collection.button.edit-icon": {
+    "message": "Edit icon"
+  },
+  "collection.button.remove-project": {
+    "message": "Remove project"
+  },
+  "collection.button.unfollow-project": {
+    "message": "Unfollow project"
+  },
+  "collection.delete-modal.description": {
+    "message": "This will remove this collection forever. This action cannot be undone."
+  },
+  "collection.delete-modal.title": {
+    "message": "Are you sure you want to delete this collection?"
+  },
+  "collection.description": {
+    "message": "{description} - View the collection {name} by {username} on Modrinth"
+  },
+  "collection.description.following": {
+    "message": "Auto-generated collection of all the projects you're following."
+  },
+  "collection.error.not-found": {
+    "message": "Collection not found"
+  },
+  "collection.label.collection": {
+    "message": "Collection"
+  },
+  "collection.label.created-at": {
+    "message": "Created {ago}"
+  },
+  "collection.label.curated-by": {
+    "message": "Curated by"
+  },
+  "collection.label.no-projects": {
+    "message": "This collection has no projects!"
+  },
+  "collection.label.no-projects-auth": {
+    "message": "You don't have any projects.\nWould you like to <create-link>add one</create-link>?"
+  },
+  "collection.label.owner": {
+    "message": "Owner"
+  },
+  "collection.label.projects-count": {
+    "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
+  },
+  "collection.label.updated-at": {
+    "message": "Updated {ago}"
+  },
+  "collection.title": {
+    "message": "{name} - Collection"
+  },
+  "common.close": {
+    "message": "Close"
+  },
+  "common.no": {
+    "message": "No"
+  },
+  "common.yes": {
+    "message": "Yes"
+  },
+  "creator.withdraw.debug.openTaxForm": {
+    "message": "Open tax form (debug)"
+  },
+  "dashboard.collections.button.create-new": {
+    "message": "Create new"
+  },
+  "dashboard.collections.label.projects-count": {
+    "message": "{count, plural, one {{count} project} other {{count} projects}}"
+  },
+  "dashboard.collections.label.search-input": {
+    "message": "Search your collections"
+  },
+  "dashboard.collections.long-title": {
+    "message": "Your collections"
+  },
+  "dashboard.creator-tax-form-modal.entity.description": {
+    "message": "A foreign entity means a business entity organized outside the United States (such as a non-US corporation, partnership, or LLC)."
+  },
+  "dashboard.creator-tax-form-modal.entity.foreign-entity": {
+    "message": "Foreign entity"
+  },
+  "dashboard.creator-tax-form-modal.entity.private-individual": {
+    "message": "Private individual"
+  },
+  "dashboard.creator-tax-form-modal.entity.question": {
+    "message": "Are you a private individual or part of a foreign entity?"
+  },
+  "dashboard.creator-tax-form-modal.header": {
+    "message": "Tax form"
+  },
+  "dashboard.creator-tax-form-modal.security.description": {
+    "message": "Modrinth uses third-party provider Track1099 to securely collect and store your tax forms. <security-link>Learn more here.</security-link>"
+  },
+  "dashboard.creator-tax-form-modal.security.header": {
+    "message": "Security practices"
+  },
+  "dashboard.creator-tax-form-modal.us-citizen.question": {
+    "message": "Are you a US citizen?"
+  },
+  "dashboard.creator-withdraw-modal.amount": {
+    "message": "Amount"
+  },
+  "dashboard.creator-withdraw-modal.available-balance": {
+    "message": "Available balance"
+  },
+  "dashboard.creator-withdraw-modal.complete-tax-form": {
+    "message": "Complete tax form"
+  },
+  "dashboard.creator-withdraw-modal.continue-with-limit": {
+    "message": "Continue with limit"
+  },
+  "dashboard.creator-withdraw-modal.error.invalid-amount": {
+    "message": "{input} is not a valid amount"
+  },
+  "dashboard.creator-withdraw-modal.error.link-paypal": {
+    "message": "Please link your PayPal account to proceed."
+  },
+  "dashboard.creator-withdraw-modal.error.link-venmo": {
+    "message": "Please set your Venmo handle to proceed."
+  },
+  "dashboard.creator-withdraw-modal.error.max-amount": {
+    "message": "The amount must be no more than {max}"
+  },
+  "dashboard.creator-withdraw-modal.error.min-amount": {
+    "message": "The amount must be at least {min}"
+  },
+  "dashboard.creator-withdraw-modal.minimum-transfer-amount": {
+    "message": "The minimum transfer amount is {min}."
+  },
+  "dashboard.creator-withdraw-modal.nearing-threshold": {
+    "message": "You're nearing the {amount600} withdrawal threshold. You can withdraw up to <b>{amountRemaining}</b> now, but you'll need to complete a tax form to withdraw more."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.enter-amount": {
+    "message": "Enter amount..."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.select-country": {
+    "message": "Select country..."
+  },
+  "dashboard.creator-withdraw-modal.placeholder.select-method": {
+    "message": "Select method..."
+  },
+  "dashboard.creator-withdraw-modal.region": {
+    "message": "Region"
+  },
+  "dashboard.creator-withdraw-modal.tax-form-required.body": {
+    "message": "To withdraw your full <b>{available}</b> available balance please complete the form below. It is required for tax reporting and only needs to be done once."
+  },
+  "dashboard.creator-withdraw-modal.tax-form-required.header": {
+    "message": "Tax form required"
+  },
+  "dashboard.creator-withdraw-modal.tooltip.select-country-region": {
+    "message": "Select your country or region"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-from": {
+    "message": "Withdraw from"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-limit-used": {
+    "message": "You've used up your <b>{amount600}</b> withdrawal limit. You must complete a tax form to withdraw more."
+  },
+  "dashboard.creator-withdraw-modal.withdraw-remaining": {
+    "message": "Withdraw remaining"
+  },
+  "dashboard.creator-withdraw-modal.withdraw-to": {
+    "message": "Withdraw to"
+  },
+  "dashboard.creator-withdraw-modal.withdraw.header": {
+    "message": "Withdraw"
+  },
+  "dashboard.revenue.available-now": {
+    "message": "Available now"
+  },
+  "dashboard.revenue.balance": {
+    "message": "Balance"
+  },
+  "dashboard.revenue.estimated-tooltip.msg1": {
+    "message": "Estimated revenue may be subject to change until it is made available."
+  },
+  "dashboard.revenue.estimated-tooltip.msg2": {
+    "message": "Click to read about how Modrinth handles your revenue."
+  },
+  "dashboard.revenue.estimated-with-date": {
+    "message": "Estimated {date}"
+  },
+  "dashboard.revenue.processing": {
+    "message": "Processing"
+  },
+  "dashboard.revenue.processing.tooltip": {
+    "message": "Revenue stays in processing until the end of the month, then becomes available 60 days later."
+  },
+  "dashboard.revenue.tos": {
+    "message": "By uploading projects to Modrinth and withdrawing money from your account, you agree to our <terms-link>Rewards Program Terms</terms-link>. Learn more about the <info-link>Reward Program</info-link>."
+  },
+  "dashboard.revenue.transactions.header": {
+    "message": "Transactions"
+  },
+  "dashboard.revenue.transactions.none": {
+    "message": "No transactions"
+  },
+  "dashboard.revenue.transactions.none.desc": {
+    "message": "Your payouts and withdrawals will appear here."
+  },
+  "dashboard.revenue.transactions.see-all": {
+    "message": "See all"
+  },
+  "dashboard.revenue.withdraw.card.description": {
+    "message": "Withdraw from your available balance to any payout method."
+  },
+  "dashboard.revenue.withdraw.card.title": {
+    "message": "Withdraw"
+  },
+  "dashboard.revenue.withdraw.header": {
+    "message": "Withdraw"
+  },
+  "error.collection.404.list_item.1": {
+    "message": "You may have mistyped the collection's URL."
+  },
+  "error.collection.404.list_item.2": {
+    "message": "The collection may be private."
+  },
+  "error.collection.404.list_item.3": {
+    "message": "The collection may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
+  },
+  "error.collection.404.list_title": {
+    "message": "Why?"
+  },
+  "error.collection.404.title": {
+    "message": "Collection not found"
+  },
+  "error.generic.404.subtitle": {
+    "message": "The page you were looking for doesn't seem to exist."
+  },
+  "error.generic.404.title": {
+    "message": "Page not found"
+  },
+  "error.generic.default.list_item.1": {
+    "message": "Check if Modrinth is down on our <status-link>Status page</status-link>."
+  },
+  "error.generic.default.list_item.2": {
+    "message": "If this keeps happening, you may want to let the Modrinth Team know by joining our <discord-link>Discord server</discord-link>."
+  },
+  "error.generic.default.list_title": {
+    "message": "Please try again in a few minutes."
+  },
+  "error.generic.default.subtitle": {
+    "message": "Something went wrong."
+  },
+  "error.generic.default.title": {
+    "message": "Uh oh!"
+  },
+  "error.organization.404.list_item.1": {
+    "message": "You may have mistyped the organization's URL."
+  },
+  "error.organization.404.list_item.2": {
+    "message": "The organization's owner may have changed the URL or deleted it."
+  },
+  "error.organization.404.list_item.3": {
+    "message": "The organization may have been removed by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
+  },
+  "error.organization.404.list_title": {
+    "message": "Why?"
+  },
+  "error.organization.404.title": {
+    "message": "Organization not found"
+  },
+  "error.project.404.list_item.1": {
+    "message": "You may have mistyped the project's URL."
+  },
+  "error.project.404.list_item.2": {
+    "message": "The project's owner may have changed the URL, made the project private, or deleted it."
+  },
+  "error.project.404.list_item.3": {
+    "message": "The project may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>."
+  },
+  "error.project.404.list_title": {
+    "message": "Why?"
+  },
+  "error.project.404.title": {
+    "message": "Project not found"
+  },
+  "error.user.404.list_item.1": {
+    "message": "You may have mistyped the user's username."
+  },
+  "error.user.404.list_item.2": {
+    "message": "The user may have changed their username or deleted their account."
+  },
+  "error.user.404.list_item.3": {
+    "message": "The user's account may have been terminated for violating Modrinth's <tou-link>Terms of Use</tou-link>."
+  },
+  "error.user.404.list_title": {
+    "message": "Why?"
+  },
+  "error.user.404.title": {
+    "message": "User not found"
+  },
+  "frog": {
+    "message": "You've been frogged! 🐸"
+  },
+  "frog.altText": {
+    "message": "A photorealistic painting of a frog labyrinth"
+  },
+  "frog.froggedPeople": {
+    "message": "{count, plural, one {{count} more person} other {{count} more people}} were also frogged!"
+  },
+  "frog.sinceOpened": {
+    "message": "This page was opened {ago}"
+  },
+  "frog.title": {
+    "message": "Frog"
+  },
+  "landing.button.discover-mods": {
+    "message": "Discover mods"
+  },
+  "landing.button.go-to-dashboard": {
+    "message": "Go to dashboard"
+  },
+  "landing.creator.feature.constantly-evolving.description": {
+    "message": "Get the best modding experience possible with constant updates from the Modrinth team"
+  },
+  "landing.creator.feature.constantly-evolving.title": {
+    "message": "Constantly Evolving"
+  },
+  "landing.creator.feature.data-statistics.description": {
+    "message": "Get detailed reports on page views, download counts, and revenue"
+  },
+  "landing.creator.feature.data-statistics.title": {
+    "message": "Data and Statistics"
+  },
+  "landing.creator.feature.discovery.description": {
+    "message": "Get your project discovered by thousands of users through search, our home page, Discord server, and more ways to come in the future!"
+  },
+  "landing.creator.feature.discovery.title": {
+    "message": "Discovery"
+  },
+  "landing.creator.feature.diverse-ecosystem.description": {
+    "message": "Integrate with your build tools through Minotaur for automatic uploads right when you release a new version"
+  },
+  "landing.creator.feature.diverse-ecosystem.title": {
+    "message": "Diverse Ecosystem"
+  },
+  "landing.creator.feature.monetization.description": {
+    "message": "Get paid ad revenue from your project pages and withdraw your funds at any time"
+  },
+  "landing.creator.feature.monetization.title": {
+    "message": "Monetization"
+  },
+  "landing.creator.feature.team-management.description": {
+    "message": "Invite your teammates and manage roles and permissions with ease"
+  },
+  "landing.creator.feature.team-management.title": {
+    "message": "Team Management"
+  },
+  "landing.error.failedToLoadRandomProjects": {
+    "message": "Failed to load random projects :("
+  },
+  "landing.feature.follow.description": {
+    "message": "Get notified every time your favorite projects update and stay in the loop."
+  },
+  "landing.feature.follow.heading": {
+    "message": "Follow projects you love"
+  },
+  "landing.feature.launcher.description": {
+    "message": "Modrinth's open-source API lets launchers add deep integration with Modrinth. You can use Modrinth through <link>our own app</link> and some of the most popular launchers like ATLauncher, MultiMC, and Prism Launcher."
+  },
+  "landing.feature.launcher.heading": {
+    "message": "Play with your favorite launcher"
+  },
+  "landing.feature.search.description": {
+    "message": "Modrinth's lightning-fast search and powerful filters let you find what you want as you type."
+  },
+  "landing.feature.search.heading": {
+    "message": "Find what you want, quickly and easily"
+  },
+  "landing.heading.the-place-for-minecraft": {
+    "message": "The place for Minecraft {content}"
+  },
+  "landing.heading.the-place-for-minecraft.data-packs": {
+    "message": "data packs"
+  },
+  "landing.heading.the-place-for-minecraft.modpacks": {
+    "message": "modpacks"
+  },
+  "landing.heading.the-place-for-minecraft.mods": {
+    "message": "mods"
+  },
+  "landing.heading.the-place-for-minecraft.plugins": {
+    "message": "plugins"
+  },
+  "landing.heading.the-place-for-minecraft.resource-packs": {
+    "message": "resource packs"
+  },
+  "landing.heading.the-place-for-minecraft.servers": {
+    "message": "servers"
+  },
+  "landing.heading.the-place-for-minecraft.shaders": {
+    "message": "shaders"
+  },
+  "landing.launcher.atlauncher-label": {
+    "message": "ATLauncher"
+  },
+  "landing.launcher.graphic-alt": {
+    "message": "A simplified representation of a Minecraft window, with the Mojang Studios logo in Modrinth green."
+  },
+  "landing.launcher.modrinth-app-label": {
+    "message": "Modrinth App"
+  },
+  "landing.launcher.prism-launcher-label": {
+    "message": "Prism Launcher"
+  },
+  "landing.notifications.has-been-updated": {
+    "message": "{title} has been updated!"
+  },
+  "landing.notifications.heading": {
+    "message": "Notifications"
+  },
+  "landing.notifications.received-time": {
+    "message": "Received {time}"
+  },
+  "landing.notifications.version-released": {
+    "message": "Version {version} has been released for {gameVersion}"
+  },
+  "landing.search.label": {
+    "message": "Search"
+  },
+  "landing.search.placeholder": {
+    "message": "Search..."
+  },
+  "landing.search.sort-by.label": {
+    "message": "Sort by"
+  },
+  "landing.section.for-creators.description": {
+    "message": "Give an online home to your creations and reach a massive audience of dedicated players."
+  },
+  "landing.section.for-creators.label": {
+    "message": "For Creators"
+  },
+  "landing.section.for-creators.tagline": {
+    "message": "Share your content with the world"
+  },
+  "landing.section.for-players.description": {
+    "message": "From magical biomes to cursed dungeons, you can be sure to find content to bring your gameplay to the next level."
+  },
+  "landing.section.for-players.label": {
+    "message": "For Players"
+  },
+  "landing.section.for-players.tagline": {
+    "message": "Discover over {count} creations"
+  },
+  "landing.subheading": {
+    "message": "Discover, play, and share Minecraft content through our open-source platform built for the community."
+  },
+  "layout.action.change-theme": {
+    "message": "Change theme"
+  },
+  "layout.action.close-banner": {
+    "message": "Close"
+  },
+  "layout.action.create-new": {
+    "message": "Create new..."
+  },
+  "layout.action.file-lookup": {
+    "message": "File lookup"
+  },
+  "layout.action.lookup-by-email": {
+    "message": "Lookup by email"
+  },
+  "layout.action.manage-server-notices": {
+    "message": "Manage server notices"
+  },
+  "layout.action.new-collection": {
+    "message": "New collection"
+  },
+  "layout.action.new-organization": {
+    "message": "New organization"
+  },
+  "layout.action.new-project": {
+    "message": "New project"
+  },
+  "layout.action.reports": {
+    "message": "Reports"
+  },
+  "layout.action.review-projects": {
+    "message": "Review projects"
+  },
+  "layout.avatar.alt": {
+    "message": "Your avatar"
+  },
+  "layout.banner.account-action": {
+    "message": "Account action required"
+  },
+  "layout.banner.add-email.button": {
+    "message": "Visit account settings"
+  },
+  "layout.banner.add-email.description": {
+    "message": "For security reasons, Modrinth needs you to register an email address to your account."
+  },
+  "layout.banner.build-fail.description": {
+    "message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
+  },
+  "layout.banner.build-fail.title": {
+    "message": "Error generating state from API when building."
+  },
+  "layout.banner.staging.description": {
+    "message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
+  },
+  "layout.banner.staging.title": {
+    "message": "You’re viewing Modrinth’s staging environment"
+  },
+  "layout.banner.subscription-payment-failed.button": {
+    "message": "Update billing info"
+  },
+  "layout.banner.subscription-payment-failed.description": {
+    "message": "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!"
+  },
+  "layout.banner.subscription-payment-failed.title": {
+    "message": "Billing action required."
+  },
+  "layout.banner.tax.action": {
+    "message": "Complete tax form"
+  },
+  "layout.banner.tax.description": {
+    "message": "You’ve already withdrawn over $600 from Modrinth this year. To comply with tax regulations, you need to complete a tax form. Your withdrawals are paused until this form is submitted."
+  },
+  "layout.banner.tax.title": {
+    "message": "Tax form required"
+  },
+  "layout.banner.verify-email.action": {
+    "message": "Re-send verification email"
+  },
+  "layout.banner.verify-email.description": {
+    "message": "For security reasons, Modrinth needs you to verify the email address associated with your account."
+  },
+  "layout.footer.about": {
+    "message": "About"
+  },
+  "layout.footer.about.careers": {
+    "message": "Careers"
+  },
+  "layout.footer.about.changelog": {
+    "message": "Changelog"
+  },
+  "layout.footer.about.news": {
+    "message": "News"
+  },
+  "layout.footer.about.rewards-program": {
+    "message": "Rewards Program"
+  },
+  "layout.footer.about.status": {
+    "message": "Status"
+  },
+  "layout.footer.copyright": {
+    "message": "© {year} Rinth, Inc."
+  },
+  "layout.footer.legal": {
+    "message": "Legal"
+  },
+  "layout.footer.legal-disclaimer": {
+    "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
+  },
+  "layout.footer.legal.copyright-policy": {
+    "message": "Copyright Policy and DMCA"
+  },
+  "layout.footer.legal.privacy-policy": {
+    "message": "Privacy Policy"
+  },
+  "layout.footer.legal.rules": {
+    "message": "Content Rules"
+  },
+  "layout.footer.legal.security-notice": {
+    "message": "Security Notice"
+  },
+  "layout.footer.legal.terms-of-use": {
+    "message": "Terms of Use"
+  },
+  "layout.footer.modrinth-information": {
+    "message": "Modrinth information"
+  },
+  "layout.footer.open-source": {
+    "message": "Modrinth is <github-link>open source</github-link>."
+  },
+  "layout.footer.products": {
+    "message": "Products"
+  },
+  "layout.footer.products.app": {
+    "message": "Modrinth App"
+  },
+  "layout.footer.products.plus": {
+    "message": "Modrinth+"
+  },
+  "layout.footer.products.servers": {
+    "message": "Modrinth Servers"
+  },
+  "layout.footer.resources": {
+    "message": "Resources"
+  },
+  "layout.footer.resources.api-docs": {
+    "message": "API documentation"
+  },
+  "layout.footer.resources.help-center": {
+    "message": "Help Center"
+  },
+  "layout.footer.resources.report-issues": {
+    "message": "Report issues"
+  },
+  "layout.footer.resources.translate": {
+    "message": "Translate"
+  },
+  "layout.footer.social.bluesky": {
+    "message": "Bluesky"
+  },
+  "layout.footer.social.discord": {
+    "message": "Discord"
+  },
+  "layout.footer.social.github": {
+    "message": "GitHub"
+  },
+  "layout.footer.social.mastodon": {
+    "message": "Mastodon"
+  },
+  "layout.footer.social.x": {
+    "message": "X"
+  },
+  "layout.menu-toggle.action": {
+    "message": "Toggle menu"
+  },
+  "layout.meta.description": {
+    "message": "Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API."
+  },
+  "layout.meta.og-description": {
+    "message": "Discover and publish Minecraft content!"
+  },
+  "layout.mobile.close-menu": {
+    "message": "Close menu"
+  },
+  "layout.mobile.open-menu": {
+    "message": "Open menu"
+  },
+  "layout.nav.active-reports": {
+    "message": "Active reports"
+  },
+  "layout.nav.analytics": {
+    "message": "Analytics"
+  },
+  "layout.nav.discover": {
+    "message": "Discover"
+  },
+  "layout.nav.discover-content": {
+    "message": "Discover content"
+  },
+  "layout.nav.feature-flags": {
+    "message": "Feature flags"
+  },
+  "layout.nav.get-modrinth-app": {
+    "message": "Get Modrinth App"
+  },
+  "layout.nav.home": {
+    "message": "Home"
+  },
+  "layout.nav.host-a-server": {
+    "message": "Host a server"
+  },
+  "layout.nav.modrinth-app": {
+    "message": "Modrinth App"
+  },
+  "layout.nav.modrinth-home-page": {
+    "message": "Modrinth home page"
+  },
+  "layout.nav.my-servers": {
+    "message": "My servers"
+  },
+  "layout.nav.organizations": {
+    "message": "Organizations"
+  },
+  "layout.nav.profile": {
+    "message": "Profile"
+  },
+  "layout.nav.projects": {
+    "message": "Projects"
+  },
+  "layout.nav.revenue": {
+    "message": "Revenue"
+  },
+  "layout.nav.saved-projects": {
+    "message": "Saved projects"
+  },
+  "layout.nav.search": {
+    "message": "Search"
+  },
+  "layout.nav.upgrade-to-modrinth-plus": {
+    "message": "Upgrade to Modrinth+"
+  },
+  "moderation.filter.by": {
+    "message": "Filter by"
+  },
+  "moderation.moderate": {
+    "message": "Moderate"
+  },
+  "moderation.page.projects": {
+    "message": "Projects"
+  },
+  "moderation.page.reports": {
+    "message": "Reports"
+  },
+  "moderation.page.technicalReview": {
+    "message": "Technical Review"
+  },
+  "moderation.search.placeholder": {
+    "message": "Search..."
+  },
+  "moderation.sort.by": {
+    "message": "Sort by"
+  },
+  "moderation.technical.search.placeholder": {
+    "message": "Search tech reviews..."
+  },
+  "profile.button.billing": {
+    "message": "Manage user billing"
+  },
+  "profile.button.info": {
+    "message": "View user details"
+  },
+  "profile.button.manage-projects": {
+    "message": "Manage projects"
+  },
+  "profile.error.not-found": {
+    "message": "User not found"
+  },
+  "profile.joined-at": {
+    "message": "Joined <date>{ago}</date>"
+  },
+  "profile.label.badges": {
+    "message": "Badges"
+  },
+  "profile.label.details": {
+    "message": "Details"
+  },
+  "profile.label.no-collections": {
+    "message": "This user has no collections!"
+  },
+  "profile.label.no-collections-auth": {
+    "message": "You don't have any collections.\nWould you like to <create-link>create one</create-link>?"
+  },
+  "profile.label.no-projects": {
+    "message": "This user has no projects!"
+  },
+  "profile.label.no-projects-auth": {
+    "message": "You don't have any projects.\nWould you like to <create-link>create one</create-link>?"
+  },
+  "profile.label.organizations": {
+    "message": "Organizations"
+  },
+  "profile.meta.description": {
+    "message": "Download {username}'s projects on Modrinth"
+  },
+  "profile.meta.description-with-bio": {
+    "message": "{bio} - Download {username}'s projects on Modrinth"
+  },
+  "profile.stats.downloads": {
+    "message": "{count, plural, one {<stat>{count}</stat> project download} other {<stat>{count}</stat> project downloads}}"
+  },
+  "profile.stats.projects": {
+    "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
+  },
+  "profile.stats.projects-followers": {
+    "message": "{count, plural, one {<stat>{count}</stat> project follower} other {<stat>{count}</stat> project followers}}"
+  },
+  "profile.user-id": {
+    "message": "User ID: {id}"
+  },
+  "project-member-header.accept": {
+    "message": "Accept"
+  },
+  "project-member-header.decline": {
+    "message": "Decline"
+  },
+  "project-member-header.error": {
+    "message": "Error"
+  },
+  "project-member-header.error-decline": {
+    "message": "Failed to decline team invitation"
+  },
+  "project-member-header.error-join": {
+    "message": "Failed to accept team invitation"
+  },
+  "project-member-header.invitation-no-role": {
+    "message": "You've been invited to join this project. Please accept or decline the invitation."
+  },
+  "project-member-header.invitation-title": {
+    "message": "Invitation to join project"
+  },
+  "project-member-header.invitation-with-role": {
+    "message": "You've been invited be a member of this project with the role of '{role}'."
+  },
+  "project-member-header.success": {
+    "message": "Success"
+  },
+  "project-member-header.success-decline": {
+    "message": "You have declined the team invitation"
+  },
+  "project-member-header.success-join": {
+    "message": "You have joined the project team"
+  },
+  "project-moderation-nags.publishing-checklist": {
+    "message": "Publishing checklist"
+  },
+  "project-moderation-nags.required": {
+    "message": "Required"
+  },
+  "project-moderation-nags.resubmit-for-review": {
+    "message": "Resubmit for review"
+  },
+  "project-moderation-nags.resubmit-for-review-desc": {
+    "message": "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message."
+  },
+  "project-moderation-nags.submit-checklist-tooltip": {
+    "message": "You must complete the required steps in the publishing checklist!"
+  },
+  "project-moderation-nags.submit-for-review": {
+    "message": "Submit for review"
+  },
+  "project-moderation-nags.submit-for-review-desc": {
+    "message": "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published."
+  },
+  "project-moderation-nags.suggestion": {
+    "message": "Suggestion"
+  },
+  "project-moderation-nags.visit-moderation-page": {
+    "message": "Visit moderation page"
+  },
+  "project-moderation-nags.warning": {
+    "message": "Warning"
+  },
+  "project-type.collection.plural": {
+    "message": "Collections"
+  },
+  "project-type.collection.singular": {
+    "message": "Collection"
+  },
+  "project-type.datapack.plural": {
+    "message": "Data Packs"
+  },
+  "project-type.datapack.singular": {
+    "message": "Data Pack"
+  },
+  "project-type.mod.plural": {
+    "message": "Mods"
+  },
+  "project-type.mod.singular": {
+    "message": "Mod"
+  },
+  "project-type.modpack.plural": {
+    "message": "Modpacks"
+  },
+  "project-type.modpack.singular": {
+    "message": "Modpack"
+  },
+  "project-type.plugin.plural": {
+    "message": "Plugins"
+  },
+  "project-type.plugin.singular": {
+    "message": "Plugin"
+  },
+  "project-type.project.plural": {
+    "message": "Projects"
+  },
+  "project-type.project.singular": {
+    "message": "Project"
+  },
+  "project-type.resourcepack.plural": {
+    "message": "Resource Packs"
+  },
+  "project-type.resourcepack.singular": {
+    "message": "Resource Pack"
+  },
+  "project-type.shader.plural": {
+    "message": "Shaders"
+  },
+  "project-type.shader.singular": {
+    "message": "Shader"
+  },
+  "project.about.details.created": {
+    "message": "Created {date}"
+  },
+  "project.about.details.licensed": {
+    "message": "Licensed {license}"
+  },
+  "project.about.details.published": {
+    "message": "Published {date}"
+  },
+  "project.about.details.submitted": {
+    "message": "Submitted {date}"
+  },
+  "project.about.details.title": {
+    "message": "Details"
+  },
+  "project.about.details.updated": {
+    "message": "Updated {date}"
+  },
+  "project.actions.create-server": {
+    "message": "Create a server"
+  },
+  "project.actions.create-server-tooltip": {
+    "message": "Create a server"
+  },
+  "project.actions.dont-show-again": {
+    "message": "Don't show again"
+  },
+  "project.actions.review-project": {
+    "message": "Review project"
+  },
+  "project.actions.servers-promo.description": {
+    "message": "Modrinth Servers is the easiest way to play with your friends without hassle!"
+  },
+  "project.actions.servers-promo.pricing": {
+    "message": "Starting at {price}<small> / month</small>"
+  },
+  "project.actions.servers-promo.title": {
+    "message": "Create a server"
+  },
+  "project.collections.create-new": {
+    "message": "Create new collection"
+  },
+  "project.collections.none-found": {
+    "message": "No collections found."
+  },
+  "project.description.title": {
+    "message": "Description"
+  },
+  "project.details.licensed": {
+    "message": "Licensed"
+  },
+  "project.download.game-version": {
+    "message": "Game version: {version}"
+  },
+  "project.download.game-version-error": {
+    "message": "Error: no game versions found"
+  },
+  "project.download.game-version-tooltip": {
+    "message": "{title} is only available for {version}"
+  },
+  "project.download.game-version-unsupported-tooltip": {
+    "message": "{title} does not support {gameVersion} for {platform}"
+  },
+  "project.download.install-with-app": {
+    "message": "Install with Modrinth App"
+  },
+  "project.download.no-app": {
+    "message": "Don't have Modrinth App?"
+  },
+  "project.download.no-versions-available": {
+    "message": "No versions available for {gameVersion} and {platform}."
+  },
+  "project.download.platform": {
+    "message": "Platform: {platform}"
+  },
+  "project.download.platform-error": {
+    "message": "Error: no platforms found"
+  },
+  "project.download.platform-tooltip": {
+    "message": "{title} is only available for {platform}"
+  },
+  "project.download.platform-unsupported-tooltip": {
+    "message": "{title} does not support {platform} for {gameVersion}"
+  },
+  "project.download.search-game-versions": {
+    "message": "Search game versions..."
+  },
+  "project.download.search-game-versions-label": {
+    "message": "Search game versions..."
+  },
+  "project.download.select-game-version": {
+    "message": "Select game version"
+  },
+  "project.download.select-platform": {
+    "message": "Select platform"
+  },
+  "project.download.show-all-versions": {
+    "message": "Show all versions"
+  },
+  "project.download.title": {
+    "message": "Download {title}"
+  },
+  "project.environment.migration-no-permission.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
+  },
+  "project.environment.migration-no-permission.title": {
+    "message": "Environment metadata needs to be reviewed"
+  },
+  "project.environment.migration.learn-more": {
+    "message": "Learn more about this change"
+  },
+  "project.environment.migration.message": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct."
+  },
+  "project.environment.migration.review-button": {
+    "message": "Review environment settings"
+  },
+  "project.environment.migration.title": {
+    "message": "Please review environment metadata"
+  },
+  "project.error.loading": {
+    "message": "Error loading project data{message}"
+  },
+  "project.error.page-not-found": {
+    "message": "The page could not be found"
+  },
+  "project.error.project-not-found": {
+    "message": "Project not found"
+  },
+  "project.gallery.title": {
+    "message": "Gallery"
+  },
+  "project.license.error": {
+    "message": "License text could not be retrieved."
+  },
+  "project.license.loading": {
+    "message": "Loading license text..."
+  },
+  "project.license.title": {
+    "message": "License"
+  },
+  "project.moderation.title": {
+    "message": "Moderation"
+  },
+  "project.navigation.changelog": {
+    "message": "Changelog"
+  },
+  "project.notification.icon-updated.message": {
+    "message": "Your project's icon has been updated."
+  },
+  "project.notification.icon-updated.title": {
+    "message": "Project icon updated"
+  },
+  "project.notification.updated.message": {
+    "message": "Your project has been updated."
+  },
+  "project.notification.updated.title": {
+    "message": "Project updated"
+  },
+  "project.settings.environment.notice.missing-env.description": {
+    "message": "Your project is missing environment metadata, please select the appropriate option below."
+  },
+  "project.settings.environment.notice.missing-env.title": {
+    "message": "Please select an environment for your project"
+  },
+  "project.settings.environment.notice.multiple-environments.description": {
+    "message": "Different versions of your project have different environments selected, so you can't edit them globally at this time."
+  },
+  "project.settings.environment.notice.multiple-environments.title": {
+    "message": "Your project has multiple environments"
+  },
+  "project.settings.environment.notice.review-options.description": {
+    "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!"
+  },
+  "project.settings.environment.notice.review-options.title": {
+    "message": "Please review the options below"
+  },
+  "project.settings.environment.notice.wrong-project-type.description": {
+    "message": "Only mod or modpack projects can have environment metadata."
+  },
+  "project.settings.environment.notice.wrong-project-type.title": {
+    "message": "This project type does not support environment metadata"
+  },
+  "project.settings.environment.verification.verify-button": {
+    "message": "Verify"
+  },
+  "project.settings.environment.verification.verify-text": {
+    "message": "Verify that this project's environment is set correctly."
+  },
+  "project.settings.general.name.description": {
+    "message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name."
+  },
+  "project.settings.general.name.placeholder.1": {
+    "message": "e.g. Nether Overhaul 2"
+  },
+  "project.settings.general.name.placeholder.2": {
+    "message": "e.g. Construction Equipment"
+  },
+  "project.settings.general.name.placeholder.3": {
+    "message": "e.g. Better than Caving"
+  },
+  "project.settings.general.name.placeholder.4": {
+    "message": "e.g. Enhanced Portals"
+  },
+  "project.settings.general.name.placeholder.5": {
+    "message": "e.g. Dangerous Mobs"
+  },
+  "project.settings.general.name.title": {
+    "message": "Name"
+  },
+  "project.settings.general.tagline.description": {
+    "message": "Summarize your project in no more than one sentence."
+  },
+  "project.settings.general.tagline.placeholder.1": {
+    "message": "e.g. Overhauls game progression to revolve around the Nether."
+  },
+  "project.settings.general.tagline.placeholder.2": {
+    "message": "e.g. Adds wearable construction gear."
+  },
+  "project.settings.general.tagline.placeholder.3": {
+    "message": "e.g. Adds realistic mineshaft-building mechanics."
+  },
+  "project.settings.general.tagline.placeholder.4": {
+    "message": "e.g. Improves how Nether portals link to each other."
+  },
+  "project.settings.general.tagline.placeholder.5": {
+    "message": "e.g. Adds powerful boss versions of the normal mobs to encounter in the night."
+  },
+  "project.settings.general.tagline.title": {
+    "message": "Tagline"
+  },
+  "project.settings.general.url.title": {
+    "message": "URL"
+  },
+  "project.settings.title": {
+    "message": "Settings"
+  },
+  "project.settings.visit-dashboard": {
+    "message": "Visit projects dashboard"
+  },
+  "project.stats.downloads-label": {
+    "message": "download{count, plural, one {} other {s}}"
+  },
+  "project.stats.followers-label": {
+    "message": "follower{count, plural, one {} other {s}}"
+  },
+  "project.status.archived.message": {
+    "message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project."
+  },
+  "project.version.all-versions": {
+    "message": "All versions"
+  },
+  "project.version.back-to-versions": {
+    "message": "Back to versions"
+  },
+  "project.versions.title": {
+    "message": "Versions"
+  },
+  "report.already-reported": {
+    "message": "You've already reported {title}"
+  },
+  "report.already-reported-description": {
+    "message": "You have an open report for this {item} already. You can add more details to your report if you have more information to add."
+  },
+  "report.back-to-item": {
+    "message": "Back to {item}"
+  },
+  "report.body.description": {
+    "message": "Include links and images if possible and relevant. Empty or insufficient reports will be closed and ignored."
+  },
+  "report.body.title": {
+    "message": "Please provide additional context about your report"
+  },
+  "report.checking": {
+    "message": "Checking {item}..."
+  },
+  "report.could-not-find": {
+    "message": "Could not find {item}"
+  },
+  "report.for.violation": {
+    "message": "Violation of Modrinth <rules-link>Rules</rules-link> or <terms-link>Terms of Use</terms-link>"
+  },
+  "report.for.violation.description": {
+    "message": "Examples include malicious, spam, offensive, deceptive, misleading, and illegal content."
+  },
+  "report.form-not-for": {
+    "message": "This form is not for:"
+  },
+  "report.go-to-report": {
+    "message": "Go to report"
+  },
+  "report.not-for.bug-reports": {
+    "message": "Bug reports"
+  },
+  "report.not-for.bug-reports.description": {
+    "message": "You can report bugs to their <issues-link>issue tracker</issues-link>."
+  },
+  "report.not-for.dmca": {
+    "message": "DMCA takedowns"
+  },
+  "report.not-for.dmca.description": {
+    "message": "See our <policy-link>Copyright Policy</policy-link>."
+  },
+  "report.note.copyright.1": {
+    "message": "Please note that you are *not* submitting a DMCA takedown request, but rather a report of reuploaded content."
+  },
+  "report.note.copyright.2": {
+    "message": "If you meant to file a DMCA takedown request (which is a legal action) instead, please see our <copyright-policy-link>Copyright Policy</copyright-policy-link>."
+  },
+  "report.note.malicious.1": {
+    "message": "Reports for malicious or deceptive content must include substantial evidence of the behavior, such as code samples."
+  },
+  "report.note.malicious.2": {
+    "message": "Summaries from Microsoft Defender, VirusTotal, or AI malware detection are not sufficient forms of evidence and will not be accepted."
+  },
+  "report.please-report": {
+    "message": "Please report:"
+  },
+  "report.question.content-id": {
+    "message": "What is the ID of the {item}?"
+  },
+  "report.question.content-type": {
+    "message": "What type of content are you reporting?"
+  },
+  "report.question.report-reason": {
+    "message": "Which of Modrinth's rules is this {item} violating?"
+  },
+  "report.report-content": {
+    "message": "Report content to moderators"
+  },
+  "report.report-item": {
+    "message": "Report {title} to moderators"
+  },
+  "report.submit": {
+    "message": "Submit report"
+  },
+  "revenue.transfers.total": {
+    "message": "You have withdrawn {amount} in total."
+  },
+  "revenue.transfers.total.method": {
+    "message": "You have withdrawn {amount} through {method}."
+  },
+  "revenue.transfers.total.year": {
+    "message": "You have withdrawn {amount} in {year}."
+  },
+  "revenue.transfers.total.year_method": {
+    "message": "You have withdrawn {amount} in {year} through {method}."
+  },
+  "scopes.analytics.description": {
+    "message": "Access your analytics data"
+  },
+  "scopes.analytics.label": {
+    "message": "Read analytics"
+  },
+  "scopes.collectionCreate.description": {
+    "message": "Create collections"
+  },
+  "scopes.collectionCreate.label": {
+    "message": "Create collections"
+  },
+  "scopes.collectionDelete.description": {
+    "message": "Delete collections"
+  },
+  "scopes.collectionDelete.label": {
+    "message": "Delete collections"
+  },
+  "scopes.collectionRead.description": {
+    "message": "Read collections"
+  },
+  "scopes.collectionRead.label": {
+    "message": "Read collections"
+  },
+  "scopes.collectionWrite.description": {
+    "message": "Write to collections"
+  },
+  "scopes.collectionWrite.label": {
+    "message": "Write collections"
+  },
+  "scopes.notificationRead.description": {
+    "message": "Read your notifications"
+  },
+  "scopes.notificationRead.label": {
+    "message": "Read notifications"
+  },
+  "scopes.notificationWrite.description": {
+    "message": "Delete/View your notifications"
+  },
+  "scopes.notificationWrite.label": {
+    "message": "Write notifications"
+  },
+  "scopes.organizationCreate.description": {
+    "message": "Create organizations"
+  },
+  "scopes.organizationCreate.label": {
+    "message": "Create organizations"
+  },
+  "scopes.organizationDelete.description": {
+    "message": "Delete organizations"
+  },
+  "scopes.organizationDelete.label": {
+    "message": "Delete organizations"
+  },
+  "scopes.organizationRead.description": {
+    "message": "Read organizations"
+  },
+  "scopes.organizationRead.label": {
+    "message": "Read organizations"
+  },
+  "scopes.organizationWrite.description": {
+    "message": "Write to organizations"
+  },
+  "scopes.organizationWrite.label": {
+    "message": "Write organizations"
+  },
+  "scopes.patCreate.description": {
+    "message": "Create personal API tokens"
+  },
+  "scopes.patCreate.label": {
+    "message": "Create PATs"
+  },
+  "scopes.patDelete.description": {
+    "message": "Delete your personal API tokens"
+  },
+  "scopes.patDelete.label": {
+    "message": "Delete PATs"
+  },
+  "scopes.patRead.description": {
+    "message": "View created API tokens"
+  },
+  "scopes.patRead.label": {
+    "message": "Read PATs"
+  },
+  "scopes.patWrite.description": {
+    "message": "Edit personal API tokens"
+  },
+  "scopes.patWrite.label": {
+    "message": "Write PATs"
+  },
+  "scopes.payoutsRead.description": {
+    "message": "Read your payouts data"
+  },
+  "scopes.payoutsRead.label": {
+    "message": "Read payouts"
+  },
+  "scopes.payoutsWrite.description": {
+    "message": "Withdraw money"
+  },
+  "scopes.payoutsWrite.label": {
+    "message": "Write payouts"
+  },
+  "scopes.performAnalytics.description": {
+    "message": "Perform analytics actions"
+  },
+  "scopes.performAnalytics.label": {
+    "message": "Perform analytics"
+  },
+  "scopes.projectCreate.description": {
+    "message": "Create new projects"
+  },
+  "scopes.projectCreate.label": {
+    "message": "Create projects"
+  },
+  "scopes.projectDelete.description": {
+    "message": "Delete your projects"
+  },
+  "scopes.projectDelete.label": {
+    "message": "Delete projects"
+  },
+  "scopes.projectRead.description": {
+    "message": "Read all your projects"
+  },
+  "scopes.projectRead.label": {
+    "message": "Read projects"
+  },
+  "scopes.projectWrite.description": {
+    "message": "Write to project data"
+  },
+  "scopes.projectWrite.label": {
+    "message": "Write projects"
+  },
+  "scopes.reportCreate.description": {
+    "message": "Create reports"
+  },
+  "scopes.reportCreate.label": {
+    "message": "Create reports"
+  },
+  "scopes.reportDelete.description": {
+    "message": "Delete reports"
+  },
+  "scopes.reportDelete.label": {
+    "message": "Delete reports"
+  },
+  "scopes.reportRead.description": {
+    "message": "Read reports"
+  },
+  "scopes.reportRead.label": {
+    "message": "Read reports"
+  },
+  "scopes.reportWrite.description": {
+    "message": "Edit reports"
+  },
+  "scopes.reportWrite.label": {
+    "message": "Write reports"
+  },
+  "scopes.sessionAccess.description": {
+    "message": "Access modrinth-issued sessions"
+  },
+  "scopes.sessionAccess.label": {
+    "message": "Access sessions"
+  },
+  "scopes.sessionDelete.description": {
+    "message": "Delete sessions"
+  },
+  "scopes.sessionDelete.label": {
+    "message": "Delete sessions"
+  },
+  "scopes.sessionRead.description": {
+    "message": "Read active sessions"
+  },
+  "scopes.sessionRead.label": {
+    "message": "Read sessions"
+  },
+  "scopes.threadRead.description": {
+    "message": "Read threads"
+  },
+  "scopes.threadRead.label": {
+    "message": "Read threads"
+  },
+  "scopes.threadWrite.description": {
+    "message": "Write to threads"
+  },
+  "scopes.threadWrite.label": {
+    "message": "Write threads"
+  },
+  "scopes.userAuthWrite.description": {
+    "message": "Modify your authentication data"
+  },
+  "scopes.userAuthWrite.label": {
+    "message": "Write auth data"
+  },
+  "scopes.userDelete.description": {
+    "message": "Delete your account"
+  },
+  "scopes.userDelete.label": {
+    "message": "Delete your account"
+  },
+  "scopes.userRead.description": {
+    "message": "Access your public profile information"
+  },
+  "scopes.userRead.label": {
+    "message": "Read user data"
+  },
+  "scopes.userReadEmail.description": {
+    "message": "Read your email"
+  },
+  "scopes.userReadEmail.label": {
+    "message": "Read user email"
+  },
+  "scopes.userWrite.description": {
+    "message": "Write to your profile"
+  },
+  "scopes.userWrite.label": {
+    "message": "Write user data"
+  },
+  "scopes.versionCreate.description": {
+    "message": "Create new versions"
+  },
+  "scopes.versionCreate.label": {
+    "message": "Create versions"
+  },
+  "scopes.versionDelete.description": {
+    "message": "Delete a version"
+  },
+  "scopes.versionDelete.label": {
+    "message": "Delete versions"
+  },
+  "scopes.versionRead.description": {
+    "message": "Read all versions"
+  },
+  "scopes.versionRead.label": {
+    "message": "Read versions"
+  },
+  "scopes.versionWrite.description": {
+    "message": "Write to version data"
+  },
+  "scopes.versionWrite.label": {
+    "message": "Write versions"
+  },
+  "search.filter.locked.server": {
+    "message": "Provided by the server"
+  },
+  "search.filter.locked.server-game-version.title": {
+    "message": "Game version is provided by the server"
+  },
+  "search.filter.locked.server-loader.title": {
+    "message": "Loader is provided by the server"
+  },
+  "search.filter.locked.server.sync": {
+    "message": "Sync with server"
+  },
+  "servers.backup.create.in-progress.tooltip": {
+    "message": "Backup creation in progress"
+  },
+  "servers.backup.restore.in-progress.tooltip": {
+    "message": "Backup restore in progress"
+  },
+  "servers.backups.item.already-preparing": {
+    "message": "Already preparing backup for download"
+  },
+  "servers.backups.item.automated": {
+    "message": "Automated"
+  },
+  "servers.backups.item.creating-backup": {
+    "message": "Creating backup..."
+  },
+  "servers.backups.item.failed-to-create-backup": {
+    "message": "Failed to create backup"
+  },
+  "servers.backups.item.failed-to-prepare-backup": {
+    "message": "Failed to prepare download"
+  },
+  "servers.backups.item.failed-to-restore-backup": {
+    "message": "Failed to restore from backup"
+  },
+  "servers.backups.item.lock": {
+    "message": "Lock"
+  },
+  "servers.backups.item.locked": {
+    "message": "Locked"
+  },
+  "servers.backups.item.prepare-download": {
+    "message": "Prepare download"
+  },
+  "servers.backups.item.prepare-download-again": {
+    "message": "Try preparing again"
+  },
+  "servers.backups.item.preparing-download": {
+    "message": "Preparing download..."
+  },
+  "servers.backups.item.queued-for-backup": {
+    "message": "Queued for backup"
+  },
+  "servers.backups.item.rename": {
+    "message": "Rename"
+  },
+  "servers.backups.item.restore": {
+    "message": "Restore"
+  },
+  "servers.backups.item.restoring-backup": {
+    "message": "Restoring from backup..."
+  },
+  "servers.backups.item.retry": {
+    "message": "Retry"
+  },
+  "servers.backups.item.unlock": {
+    "message": "Unlock"
+  },
+  "servers.notice.actions": {
+    "message": "Actions"
+  },
+  "servers.notice.begins": {
+    "message": "Begins"
+  },
+  "servers.notice.dismissable": {
+    "message": "Dismissable"
+  },
+  "servers.notice.expires": {
+    "message": "Expires"
+  },
+  "servers.notice.id": {
+    "message": "ID"
+  },
+  "servers.notice.level": {
+    "message": "Level"
+  },
+  "servers.notice.undismissable": {
+    "message": "Undismissable"
+  },
+  "servers.notices.create-notice": {
+    "message": "Create notice"
+  },
+  "servers.notices.no-notices": {
+    "message": "No notices"
+  },
+  "servers.plan.large.description": {
+    "message": "Ideal for 15–25 players, modpacks, or heavy modding."
+  },
+  "servers.plan.large.name": {
+    "message": "Large"
+  },
+  "servers.plan.medium.description": {
+    "message": "Great for 6–15 players and multiple mods."
+  },
+  "servers.plan.medium.name": {
+    "message": "Medium"
+  },
+  "servers.plan.small.description": {
+    "message": "Perfect for 1–5 friends with a few light mods."
+  },
+  "servers.plan.small.name": {
+    "message": "Small"
+  },
+  "settings.billing.modal.cancel.action": {
+    "message": "Cancel subscription"
+  },
+  "settings.billing.modal.cancel.description": {
+    "message": "This will cancel your subscription. You will retain your perks until the end of the current billing cycle."
+  },
+  "settings.billing.modal.cancel.title": {
+    "message": "Are you sure you want to cancel your subscription?"
+  },
+  "settings.billing.modal.delete.action": {
+    "message": "Remove this payment method"
+  },
+  "settings.billing.modal.delete.description": {
+    "message": "This will remove this payment method forever (like really forever)."
+  },
+  "settings.billing.modal.delete.title": {
+    "message": "Are you sure you want to remove this payment method?"
+  },
+  "settings.billing.payment_method.action.add": {
+    "message": "Add payment method"
+  },
+  "settings.billing.payment_method.action.history": {
+    "message": "View past charges"
+  },
+  "settings.billing.payment_method.action.primary": {
+    "message": "Make primary"
+  },
+  "settings.billing.payment_method.card_display": {
+    "message": "{card_brand} ending in {last_four}"
+  },
+  "settings.billing.payment_method.card_expiry": {
+    "message": "Expires {month}/{year}"
+  },
+  "settings.billing.payment_method.none": {
+    "message": "You have not added any payment methods."
+  },
+  "settings.billing.payment_method.primary": {
+    "message": "Primary"
+  },
+  "settings.billing.payment_method.title": {
+    "message": "Payment methods"
+  },
+  "settings.billing.payment_method_type.amazon_pay": {
+    "message": "Amazon Pay"
+  },
+  "settings.billing.payment_method_type.amex": {
+    "message": "American Express"
+  },
+  "settings.billing.payment_method_type.cashapp": {
+    "message": "Cash App"
+  },
+  "settings.billing.payment_method_type.diners": {
+    "message": "Diners Club"
+  },
+  "settings.billing.payment_method_type.discover": {
+    "message": "Discover"
+  },
+  "settings.billing.payment_method_type.eftpos": {
+    "message": "EFTPOS"
+  },
+  "settings.billing.payment_method_type.jcb": {
+    "message": "JCB"
+  },
+  "settings.billing.payment_method_type.mastercard": {
+    "message": "MasterCard"
+  },
+  "settings.billing.payment_method_type.paypal": {
+    "message": "PayPal"
+  },
+  "settings.billing.payment_method_type.unionpay": {
+    "message": "UnionPay"
+  },
+  "settings.billing.payment_method_type.unknown": {
+    "message": "Unknown payment method"
+  },
+  "settings.billing.payment_method_type.visa": {
+    "message": "Visa"
+  },
+  "settings.billing.pyro_subscription.description": {
+    "message": "Manage your Modrinth Server subscriptions."
+  },
+  "settings.billing.pyro_subscription.title": {
+    "message": "Modrinth Server Subscriptions"
+  },
+  "settings.billing.subscription.description": {
+    "message": "Manage your Modrinth subscriptions."
+  },
+  "settings.billing.subscription.title": {
+    "message": "Subscriptions"
+  },
+  "settings.display.banner.developer-mode.button": {
+    "message": "Deactivate developer mode"
+  },
+  "settings.display.banner.developer-mode.description": {
+    "message": "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode."
+  },
+  "settings.display.flags.description": {
+    "message": "Enable or disable certain features on this device."
+  },
+  "settings.display.flags.title": {
+    "message": "Toggle features"
+  },
+  "settings.display.project-list-layouts.datapack": {
+    "message": "Data Packs page"
+  },
+  "settings.display.project-list-layouts.description": {
+    "message": "Select your preferred layout for each page that displays project lists on this device."
+  },
+  "settings.display.project-list-layouts.mod": {
+    "message": "Mods page"
+  },
+  "settings.display.project-list-layouts.modpack": {
+    "message": "Modpacks page"
+  },
+  "settings.display.project-list-layouts.plugin": {
+    "message": "Plugins page"
+  },
+  "settings.display.project-list-layouts.resourcepack": {
+    "message": "Resource Packs page"
+  },
+  "settings.display.project-list-layouts.shader": {
+    "message": "Shaders page"
+  },
+  "settings.display.project-list-layouts.title": {
+    "message": "Project list layouts"
+  },
+  "settings.display.project-list-layouts.user": {
+    "message": "User profile pages"
+  },
+  "settings.display.project-list.layouts.collection": {
+    "message": "Collection"
+  },
+  "settings.display.sidebar.advanced-rendering.description": {
+    "message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
+  },
+  "settings.display.sidebar.advanced-rendering.title": {
+    "message": "Advanced rendering"
+  },
+  "settings.display.sidebar.external-links-new-tab.description": {
+    "message": "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab."
+  },
+  "settings.display.sidebar.external-links-new-tab.title": {
+    "message": "Open external links in new tab"
+  },
+  "settings.display.sidebar.hide-app-promos.description": {
+    "message": "Hides the \"Get Modrinth App\" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer."
+  },
+  "settings.display.sidebar.hide-app-promos.title": {
+    "message": "Hide Modrinth App promotions"
+  },
+  "settings.display.sidebar.left-aligned-content-sidebar.title": {
+    "message": "Left-aligned sidebar on content pages"
+  },
+  "settings.display.sidebar.right-aligned-content-sidebar.description": {
+    "message": "Aligns the sidebar to the left of the page's content."
+  },
+  "settings.display.sidebar.right-aligned-filters-sidebar.description": {
+    "message": "Aligns the filters sidebar to the right of the search results."
+  },
+  "settings.display.sidebar.right-aligned-filters-sidebar.title": {
+    "message": "Right-aligned filters sidebar on search pages"
+  },
+  "settings.display.theme.description": {
+    "message": "Select your preferred color theme for Modrinth on this device."
+  },
+  "settings.display.theme.title": {
+    "message": "Color theme"
+  },
+  "settings.language.categories.auto": {
+    "message": "Automatic"
+  },
+  "settings.language.categories.default": {
+    "message": "Standard languages"
+  },
+  "settings.language.categories.experimental": {
+    "message": "Experimental languages"
+  },
+  "settings.language.categories.fun": {
+    "message": "Fun languages"
+  },
+  "settings.language.categories.search-result": {
+    "message": "Search results"
+  },
+  "settings.language.description": {
+    "message": "Choose your preferred language for the site. Translations are contributed by volunteers <crowdin-link>on Crowdin</crowdin-link>."
+  },
+  "settings.language.languages.automatic": {
+    "message": "Sync with the system language"
+  },
+  "settings.language.languages.language-label-applying": {
+    "message": "{label}. Applying..."
+  },
+  "settings.language.languages.language-label-error": {
+    "message": "{label}. Error"
+  },
+  "settings.language.languages.load-failed": {
+    "message": "Cannot load this language. Try again in a bit."
+  },
+  "settings.language.languages.search-field.description": {
+    "message": "Submit to focus the first search result"
+  },
+  "settings.language.languages.search-field.placeholder": {
+    "message": "Search for a language..."
+  },
+  "settings.language.languages.search-results-announcement": {
+    "message": "{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search."
+  },
+  "settings.language.languages.search.no-results": {
+    "message": "No languages match your search."
+  },
+  "settings.language.warning": {
+    "message": "Changing the site language may cause some content to appear in English if a translation is not available. The site is not yet fully translated, so some content may remain in English for certain languages. We are still working on improving our localization system, so occasionally content may appear broken."
+  },
+  "settings.pats.action.create": {
+    "message": "Create a PAT"
+  },
+  "settings.pats.description": {
+    "message": "PATs can be used to access Modrinth's API. For more information, see <doc-link>Modrinth's API documentation</doc-link>. They can be created and revoked at any time."
+  },
+  "settings.pats.modal.create.action": {
+    "message": "Create PAT"
+  },
+  "settings.pats.modal.create.expires.label": {
+    "message": "Expires"
+  },
+  "settings.pats.modal.create.name.label": {
+    "message": "Name"
+  },
+  "settings.pats.modal.create.name.placeholder": {
+    "message": "Enter the PAT's name..."
+  },
+  "settings.pats.modal.create.title": {
+    "message": "Create personal access token"
+  },
+  "settings.pats.modal.delete.action": {
+    "message": "Delete this token"
+  },
+  "settings.pats.modal.delete.description": {
+    "message": "This will remove this token forever (like really forever)."
+  },
+  "settings.pats.modal.delete.title": {
+    "message": "Are you sure you want to delete this token?"
+  },
+  "settings.pats.modal.edit.title": {
+    "message": "Edit personal access token"
+  },
+  "settings.pats.token.action.edit": {
+    "message": "Edit token"
+  },
+  "settings.pats.token.action.revoke": {
+    "message": "Revoke token"
+  },
+  "settings.pats.token.expired-ago": {
+    "message": "Expired {ago}"
+  },
+  "settings.pats.token.expires-in": {
+    "message": "Expires {inTime}"
+  },
+  "settings.pats.token.last-used": {
+    "message": "Last used {ago}"
+  },
+  "settings.pats.token.never-used": {
+    "message": "Never used"
+  },
+  "settings.profile.bio.description": {
+    "message": "A short description to tell everyone a little bit about you."
+  },
+  "settings.profile.bio.title": {
+    "message": "Bio"
+  },
+  "settings.profile.description": {
+    "message": "Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>."
+  },
+  "settings.profile.profile-info": {
+    "message": "Profile information"
+  },
+  "settings.profile.profile-picture.reset": {
+    "message": "Reset"
+  },
+  "settings.profile.profile-picture.title": {
+    "message": "Profile picture"
+  },
+  "settings.profile.username.description": {
+    "message": "A unique case-insensitive name to identify your profile."
+  },
+  "settings.profile.username.title": {
+    "message": "Username"
+  },
+  "settings.sessions.action.revoke-session": {
+    "message": "Revoke session"
+  },
+  "settings.sessions.created-ago": {
+    "message": "Created {ago}"
+  },
+  "settings.sessions.current-session": {
+    "message": "Current session"
+  },
+  "settings.sessions.description": {
+    "message": "Here are all the devices that are currently logged in with your Modrinth account. You can log out of each one individually.\n\nIf you see an entry you don't recognize, log out of that device and change your Modrinth account password immediately."
+  },
+  "settings.sessions.last-accessed-ago": {
+    "message": "Last accessed {ago}"
+  },
+  "settings.sessions.unknown-os": {
+    "message": "Unknown OS"
+  },
+  "settings.sessions.unknown-platform": {
+    "message": "Unknown platform"
+  },
+  "ui.latest-news-row.latest-news": {
+    "message": "Latest news from Modrinth"
+  },
+  "ui.latest-news-row.view-all": {
+    "message": "View all news"
+  }
 }

From e408e5febaef9c8dbe08635b54a96dd45f0d1898 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Thu, 25 Sep 2025 13:25:49 +0100
Subject: [PATCH 49/49] feat: stages

---
 .../ui/dashboard/CreatorTaxFormModal.vue      |   2 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     | 638 +++++-------------
 .../withdraw-stages/CompletionStage.vue       |  31 +
 .../withdraw-stages/MethodSelectionStage.vue  |  18 +
 .../withdraw-stages/MuralpayDetailsStage.vue  |  18 +
 .../withdraw-stages/MuralpayKycStage.vue      |  18 +
 .../withdraw-stages/TaxFormStage.vue          | 125 ++++
 .../TremendousDetailsStage.vue                |  20 +
 .../src/providers/creator-withdraw.ts         | 181 +++++
 9 files changed, 571 insertions(+), 480 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
 create mode 100644 apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
 create mode 100644 apps/frontend/src/providers/creator-withdraw.ts

diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index cd430a24a7..5bb4780c21 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -95,7 +95,7 @@ const { addNotification } = injectNotificationManager()
 
 const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
 
-async function startTaxForm(e: MouseEvent) {
+async function startTaxForm(e?: MouseEvent) {
 	taxFormModal.value?.show(e)
 }
 
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index e990a33a43..a38fb76920 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -1,191 +1,71 @@
 <template>
 	<NewModal
 		ref="withdrawModal"
-		:header="currentStageLabel"
 		:noblur="true"
-		:closable="currentStage !== 'confirmation'"
-		:merge-header="!currentStageLabel"
-		@on-hide="currentStage = undefined"
+		:closable="withdrawContext.currentStage.value !== 'completion'"
+		@on-hide="onModalHide"
 	>
-		<div class="flex w-full flex-col gap-4 sm:w-[540px]">
-			<template v-if="currentStage === 'withdraw-limit'">
-				<div class="flex w-full flex-row justify-between">
-					<span class="font-semibold text-contrast">{{
-						formatMessage(messages.withdrawRemaining)
-					}}</span>
-					<div>
-						<span class="text-orange">{{ formatMoney(remainingLimit) }}</span> /
-						{{ formatMoney(600) }}
-					</div>
-				</div>
-				<div class="flex h-2 w-full overflow-hidden rounded-full bg-button-bg">
-					<div class="bg-orange" :style="{ width: `${(usedLimit / 600) * 100}%` }"></div>
-				</div>
-				<template v-if="remainingLimit > 0">
-					<span>
-						<IntlFormatted
-							:message-id="messages.nearingThreshold"
-							:values="{
-								amount600: formatMoney(600),
-								amountRemaining: formatMoney(remainingLimit),
-							}"
-						>
-							<template #b="{ children }">
-								<b><component :is="() => normalizeChildren(children)" /></b>
-							</template>
-						</IntlFormatted>
-					</span>
-					<Admonition
-						type="warning"
-						show-actions-underneath
-						:header="formatMessage(messages.taxFormRequiredHeader)"
-					>
-						<span>
-							<IntlFormatted
-								:message-id="messages.taxFormRequiredBody"
-								:values="{ available: formatMoney(balance?.available) }"
-							>
-								<template #b="{ children }">
-									<b><component :is="() => normalizeChildren(children)" /></b>
-								</template>
-							</IntlFormatted>
-						</span>
-						<template #icon="{ iconClass }">
-							<FileTextIcon :class="iconClass" />
-						</template>
-						<template #actions>
-							<ButtonStyled color="orange">
-								<button @click="showTaxFormModal">
-									{{ formatMessage(messages.completeTaxForm) }}
-								</button>
-							</ButtonStyled>
-						</template>
-					</Admonition>
+		<template #title>
+			<div v-if="shouldShowTitle" class="flex items-center gap-1 font-bold text-secondary">
+				<template v-if="withdrawContext.currentStage.value === 'tax-form'">
+					<span class="text-contrast">{{ formatMessage(stageLabels['tax-form']) }}</span>
 				</template>
-				<template v-else>
-					<span>
-						<IntlFormatted
-							:message-id="messages.withdrawLimitUsed"
-							:values="{ amount600: formatMoney(600) }"
-						>
-							<template #b="{ children }">
-								<b><component :is="() => normalizeChildren(children)" /></b>
-							</template>
-						</IntlFormatted>
-					</span>
+				<template v-else-if="withdrawContext.currentStage.value === 'method-selection'">
+					<span class="text-contrast">{{ formatMessage(stageLabels['method-selection']) }}</span>
 				</template>
-				<div class="ml-auto flex gap-3">
-					<ButtonStyled color="standard">
-						<button @click="withdrawModal?.hide()">
-							<XIcon />{{ formatMessage(messages.cancel) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="remainingLimit > 0" color="standard">
-						<button @click="currentStage = 'withdraw-details'">
-							{{ formatMessage(messages.continueWithLimit) }} <ChevronRightIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="orange">
-						<button @click="showTaxFormModal">
-							{{ formatMessage(messages.completeTaxForm) }} <ChevronRightIcon />
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-
-			<template v-if="currentStage === 'withdraw-details'">
-				<span class="font-semibold text-contrast">{{ formatMessage(messages.withdrawFrom) }}</span>
-				<div class="flex flex-col rounded-xl bg-bg p-4">
-					<span class="text-sm text-primary">{{ formatMessage(messages.availableBalance) }}</span>
-					<span class="font-semibold text-contrast">{{ formatMoney(balance?.available) }}</span>
-				</div>
-
-				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>{{ formatMessage(messages.region) }}</span
-					><span class="text-brand-red">*</span>
-					<UnknownIcon
-						v-tooltip="formatMessage(messages.selectYourCountryOrRegion)"
-						class="my-auto size-4 text-secondary"
-					/>
-				</div>
-				<Combobox
-					v-model="countryId"
-					:listbox="true"
-					:searchable="true"
-					:options="countryOptions"
-					:placeholder="formatMessage(messages.selectCountryPlaceholder)"
-					:display-value="countryProxy?.name ?? formatMessage(messages.selectCountryPlaceholder)"
-				/>
-
-				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>{{ formatMessage(messages.withdrawTo) }}</span
-					><span class="text-brand-red">*</span>
-				</div>
-				<div class="relative">
-					<Combobox
-						v-model="paymentMethodId"
-						:listbox="true"
-						class="payment-method-select w-full"
-						:options="paymentMethodOptions"
-						:placeholder="formatMessage(messages.selectMethodPlaceholder)"
-						:display-value="
-							paymentMethod
-								? formatPaymentMethodName(paymentMethod)
-								: formatMessage(messages.selectMethodPlaceholder)
-						"
-					/>
-				</div>
-
-				<div class="flex gap-1 align-middle text-lg font-semibold text-contrast">
-					<span>{{ formatMessage(messages.amount) }}</span
-					><span class="text-brand-red">*</span>
-				</div>
-				<span class="text-secondary">
-					{{
-						formatMessage(messages.minimumTransferAmount, { min: formatMoney(minWithdrawAmount) })
-					}}
-				</span>
-				<div class="flex items-center gap-0">
-					<input
-						v-model="withdrawAmount"
-						type="text"
-						pattern="^\d*(\.\d{0,2})?$"
-						:placeholder="formatMessage(messages.enterAmountPlaceholder)"
-						class="flex-1 rounded-l-xl border-y border-l border-divider bg-button-bg px-4 py-2.5 placeholder-secondary focus:outline-none"
-					/>
-					<ButtonStyled color="standard" class="rounded-l-none">
-						<button @click="withdrawAmount = maxWithdrawAmount.toFixed(2)">
-							{{ formatMessage(messages.max) }}
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<div v-if="withdrawErrors.length > 0" class="space-y-2">
-					<span v-for="error in withdrawErrors" :key="error" class="block text-red">
-						{{ error }}
-					</span>
-				</div>
-
-				<div class="ml-auto mt-2 flex gap-3">
-					<ButtonStyled v-if="isDev" color="standard">
-						<button @click="showTaxFormModal($event)">
-							{{ formatMessage(messages.openTaxDebug) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="standard">
-						<button @click="withdrawModal?.hide()">
-							<XIcon />{{ formatMessage(messages.cancel) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="green" :disabled="!canProceedToWithdraw">
-						<button @click="initiateWithdraw">
-							<TransferIcon />{{ formatMessage(messages.actionWithdraw) }}
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-
-			<template v-if="currentStage === 'confirmation'"> </template>
+				<template v-else-if="isDetailsStage">
+					<button
+						class="bg-transparent p-0 font-bold text-secondary active:scale-95"
+						@click="goToBreadcrumbStage('method-selection')"
+					>
+						{{ formatMessage(stageLabels['method-selection']) }}
+					</button>
+					<ChevronRightIcon class="h-5 w-5 text-secondary" stroke-width="3" />
+					<span class="text-contrast">{{ formatMessage(messages.detailsLabel) }}</span>
+				</template>
+			</div>
+		</template>
+		<div class="w-[40rem] max-w-full">
+			<TaxFormStage
+				v-if="withdrawContext.currentStage.value === 'tax-form'"
+				:balance="balance"
+				:on-show-tax-form="showTaxFormModal"
+			/>
+			<MethodSelectionStage v-else-if="withdrawContext.currentStage.value === 'method-selection'" />
+			<TremendousDetailsStage
+				v-else-if="withdrawContext.currentStage.value === 'tremendous-details'"
+			/>
+			<MuralpayKycStage v-else-if="withdrawContext.currentStage.value === 'muralpay-kyc'" />
+			<MuralpayDetailsStage v-else-if="withdrawContext.currentStage.value === 'muralpay-details'" />
+			<CompletionStage v-else-if="withdrawContext.currentStage.value === 'completion'" />
+			<div v-else>Something went wrong</div>
+		</div>
+		<div class="mt-4 flex justify-between gap-2">
+			<ButtonStyled>
+				<button
+					v-if="withdrawContext.previousStep.value"
+					@click="withdrawContext.setStage(withdrawContext.previousStep.value, true)"
+				>
+					<LeftArrowIcon /> {{ formatMessage(commonMessages.backButton) }}
+				</button>
+				<button v-else @click="withdrawModal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled color="brand">
+				<button
+					:disabled="!withdrawContext.canProceed.value"
+					@click="withdrawContext.setStage(withdrawContext.nextStep.value)"
+				>
+					<template v-if="withdrawContext.currentStage.value === 'completion'">
+						<CheckCircleIcon /> Complete
+					</template>
+					<template v-else>
+						{{ formatMessage(commonMessages.nextButton) }} <RightArrowIcon />
+					</template>
+				</button>
+			</ButtonStyled>
 		</div>
 	</NewModal>
 	<CreatorTaxFormModal
@@ -195,20 +75,32 @@
 	/>
 </template>
 
-<script lang="ts" setup>
-import { ChevronRightIcon, FileTextIcon, TransferIcon, UnknownIcon, XIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Combobox, NewModal } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
-import { all } from 'iso-3166-1'
-import { nextTick } from 'vue'
-
-import { normalizeChildren } from '@/utils/vue-children.ts'
+<script setup lang="ts">
+import {
+	CheckCircleIcon,
+	ChevronRightIcon,
+	LeftArrowIcon,
+	RightArrowIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { ButtonStyled, commonMessages, NewModal } from '@modrinth/ui'
+import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
+
+import {
+	createWithdrawContext,
+	provideWithdrawContext,
+	type WithdrawStage,
+} from '@/providers/creator-withdraw.ts'
 
 import CreatorTaxFormModal from './CreatorTaxFormModal.vue'
 
-type Stage = 'withdraw-limit' | 'withdraw-details' | 'confirmation'
+import CompletionStage from './withdraw-stages/CompletionStage.vue'
+import MethodSelectionStage from './withdraw-stages/MethodSelectionStage.vue'
+import MuralpayDetailsStage from './withdraw-stages/MuralpayDetailsStage.vue'
+import MuralpayKycStage from './withdraw-stages/MuralpayKycStage.vue'
+import TaxFormStage from './withdraw-stages/TaxFormStage.vue'
+import TremendousDetailsStage from './withdraw-stages/TremendousDetailsStage.vue'
 
 type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
 
@@ -222,48 +114,10 @@ interface UserBalanceResponse {
 	form_completion_status: FormCompletionStatus | null
 }
 
-type PayoutMethodType = 'venmo' | 'paypal' | 'tremendous' | 'unknown'
-
-type PayoutInterval = { fixed: { values: number[] } } | { standard: { min: number; max: number } }
-
-interface PayoutMethodFee {
-	percentage: number
-	min: number
-	max?: number | null
-}
-
-interface PayoutMethod {
-	id: string
-	name: string
-	type: PayoutMethodType
-	supported_countries: string[]
-	image_url?: string | null
-	interval: PayoutInterval
-	fee: PayoutMethodFee
-}
-
-const countries = computed(() =>
-	all().map((x) => ({
-		id: x.alpha2,
-		name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
-	})),
-)
-
-const countryOptions = computed(() => countries.value.map((c) => ({ value: c.id, label: c.name })))
-
-const countryId = computed<string | null>({
-	get: () => countryProxy.value?.id ?? null,
-	set: (v) => {
-		const selected = countries.value.find((c) => c.id === v) ?? null
-		emit('update:country', selected)
-	},
-})
-
 const props = defineProps<{
 	auth: any
 	balance: UserBalanceResponse | null
-	payoutMethods?: PayoutMethod[]
-	payoutMethodsPending?: boolean
+	// TODO: Add payout methods and related props when backend is defined
 	country: { id: string; name: string } | null
 	userPayoutData?: {
 		paypal_address?: string
@@ -273,125 +127,39 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	(e: 'update:country', value: { id: string; name: string } | null): void
-	(e: 'withdraw', amount: number, method: PayoutMethod): void
+	(e: 'withdraw', amount: number, method: any): void // TODO: Define proper method type
 	(e: 'refresh-data'): void
+	(e: 'hide'): void
 }>()
 
-const countryProxy = computed({
-	get: () => props.country,
-	set: (v) => emit('update:country', v),
-})
-
-const paymentMethod = ref<PayoutMethod | null>(null)
-const withdrawAmount = ref('')
-
-const availablePaymentMethods = computed<PayoutMethod[]>(() => {
-	if (!props.payoutMethods) return []
-	return props.payoutMethods.filter((m) => {
-		if (countryProxy.value && !m.supported_countries.includes(countryProxy.value.id)) {
-			return false
-		}
-		return true
-	})
-})
-
-const paymentMethodOptions = computed(() =>
-	availablePaymentMethods.value.map((m) => ({ value: m.id, label: formatPaymentMethodName(m) })),
-)
-
-const paymentMethodId = computed<string | null>({
-	get: () => paymentMethod.value?.id ?? null,
-	set: (id) => {
-		paymentMethod.value = availablePaymentMethods.value.find((m) => m.id === id) ?? null
-	},
-})
-
-const maxWithdrawAmount = computed(() => {
-	if (!paymentMethod.value) return props.balance?.available ?? 0
-	const interval = paymentMethod.value.interval
-	const methodMax =
-		'standard' in interval ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0)
-	const max = Math.min(methodMax, props.balance?.available ?? 0, remainingLimit.value)
-	return Math.floor(max * 100) / 100
-})
-
-const minWithdrawAmount = computed(() => {
-	if (!paymentMethod.value) return 0.25
-	const interval = paymentMethod.value.interval
-	return 'standard' in interval ? interval.standard.min : (interval?.fixed?.values?.[0] ?? 0.25)
-})
-
-const parsedWithdrawAmount = computed(() => {
-	const s = (withdrawAmount.value ?? '').trim()
-	const match = s.match(/^\$?(\d*(?:\.\d{1,2})?)$/)
-	return match && match[1] ? parseFloat(match[1]) : 0.0
-})
-
-const usedLimit = computed(() => props.balance?.withdrawn_ytd ?? 0)
-const remainingLimit = computed(() => {
-	const raw = 600 - usedLimit.value
-	if (raw <= 0) return 0
-	const cents = Math.floor(raw * 100)
-	return cents / 100
-})
-
-const withdrawErrors = computed(() => {
-	const errors: string[] = []
+const { formatMessage } = useVIntl()
 
-	if (!parsedWithdrawAmount.value && withdrawAmount.value.length > 0) {
-		errors.push(formatMessage(messages.errorInvalidAmount, { input: withdrawAmount.value }))
-	} else if (parsedWithdrawAmount.value > maxWithdrawAmount.value) {
-		errors.push(
-			formatMessage(messages.errorMaxAmount, {
-				max: formatMoney(maxWithdrawAmount.value),
-			}),
-		)
-	} else if (
-		parsedWithdrawAmount.value < minWithdrawAmount.value &&
-		parsedWithdrawAmount.value > 0
-	) {
-		errors.push(
-			formatMessage(messages.errorMinAmount, {
-				min: formatMoney(minWithdrawAmount.value),
-			}),
-		)
-	}
+const withdrawContext = createWithdrawContext(props.balance, props.userPayoutData)
+provideWithdrawContext(withdrawContext)
 
-	if (paymentMethod.value?.type === 'paypal' && !props.userPayoutData?.paypal_address) {
-		errors.push(formatMessage(messages.errorLinkPaypal))
-	}
-
-	if (paymentMethod.value?.type === 'venmo' && !props.userPayoutData?.venmo_handle) {
-		errors.push(formatMessage(messages.errorLinkVenmo))
-	}
+const stageLabels = computed<Record<WithdrawStage, MessageDescriptor>>(() => ({
+	'tax-form': messages.taxFormStage,
+	'method-selection': messages.methodSelectionStage,
+	'tremendous-details': messages.tremendousDetailsStage,
+	'muralpay-kyc': messages.muralpayKycStage,
+	'muralpay-details': messages.muralpayDetailsStage,
+	completion: messages.completionStage,
+}))
 
-	return errors
+const shouldShowTitle = computed(() => {
+	return withdrawContext.currentStage.value !== 'completion'
 })
 
-const canProceedToWithdraw = computed(() => {
-	return (
-		withdrawErrors.value.length === 0 &&
-		parsedWithdrawAmount.value > 0 &&
-		paymentMethod.value !== null &&
-		countryProxy.value !== null
-	)
+const isDetailsStage = computed(() => {
+	const detailsStages: WithdrawStage[] = ['tremendous-details', 'muralpay-kyc', 'muralpay-details']
+	const currentStage = withdrawContext.currentStage.value
+	return currentStage ? detailsStages.includes(currentStage) : false
 })
 
-function formatPaymentMethodName(method: PayoutMethod | null): string {
-	if (!method) return ''
-	return method.name
-}
-
-async function initiateWithdraw() {
-	if (!canProceedToWithdraw.value || !paymentMethod.value) return
-
-	emit('withdraw', parsedWithdrawAmount.value, paymentMethod.value)
-
-	currentStage.value = 'confirmation'
-}
-
+const withdrawModal = useTemplateRef<InstanceType<typeof NewModal>>('withdrawModal')
 const taxFormModal = ref<InstanceType<typeof CreatorTaxFormModal> | null>(null)
-function showTaxFormModal(e: MouseEvent) {
+
+function showTaxFormModal(e?: MouseEvent) {
 	withdrawModal.value?.hide()
 	taxFormModal.value?.startTaxForm(e)
 }
@@ -399,173 +167,85 @@ function showTaxFormModal(e: MouseEvent) {
 function onTaxFormSuccess() {
 	emit('refresh-data')
 	nextTick(() => {
-		show('withdraw-details')
+		withdrawContext.setStage('method-selection')
+		show()
 	})
 }
 
 function onTaxFormCancelled() {
-	show('withdraw-limit')
+	show('tax-form')
 }
 
-const stageLabels = computed<Record<Stage, string | undefined>>(() => ({
-	'withdraw-limit': formatMessage(messages.withdrawHeader),
-	'withdraw-details': formatMessage(messages.withdrawHeader),
-	confirmation: undefined,
-}))
-
-const currentStageLabel = computed<string | undefined>(() => {
-	if (!currentStage.value) return undefined
-	return stageLabels.value[currentStage.value]
-})
-
-const withdrawModal = ref<InstanceType<typeof NewModal> | null>(null)
-const currentStage = ref<Stage | undefined>()
+function onModalHide() {
+	withdrawContext.resetData()
+	emit('hide')
+}
 
-function open(stage: Stage) {
-	currentStage.value = stage
-	withdrawModal.value?.show()
+function goToBreadcrumbStage(stage: WithdrawStage) {
+	withdrawContext.setStage(stage, true)
 }
 
-function show(preferred?: Stage) {
+function show(preferred?: WithdrawStage) {
 	if (preferred) {
-		open(preferred)
+		withdrawContext.setStage(preferred, true)
+		withdrawModal.value?.show()
 		return
 	}
 
+	// Determine initial stage based on balance and tax form status
 	const b = props.balance
 	if (!b || b.available <= 0) {
-		open('withdraw-limit')
+		withdrawContext.setStage('tax-form', true)
+		withdrawModal.value?.show()
 		return
 	}
 
-	const needsCompliance =
-		b.form_completion_status !== null && b.form_completion_status !== 'complete'
-	if (needsCompliance) {
-		open('withdraw-limit')
-		return
+	const usedLimit = b.withdrawn_ytd ?? 0
+	const remainingLimit = Math.max(0, 600 - usedLimit)
+	const needsTaxForm = b.form_completion_status !== 'complete' && remainingLimit <= 0
+
+	if (needsTaxForm) {
+		withdrawContext.setStage('tax-form', true)
+	} else {
+		withdrawContext.setStage('method-selection', true)
 	}
 
-	open('withdraw-details')
+	withdrawModal.value?.show()
 }
 
-watch(
-	() => availablePaymentMethods.value,
-	(list) => {
-		if (!list?.length) {
-			paymentMethod.value = null
-			return
-		}
-		if (!paymentMethod.value || !list.some((m) => m.id === paymentMethod.value?.id)) {
-			paymentMethod.value = list[0]
-		}
-	},
-	{ immediate: true },
-)
-
 defineExpose({
 	show,
 })
 
-const isDev = import.meta.dev
-
-const { formatMessage } = useVIntl()
-
 const messages = defineMessages({
-	withdrawHeader: {
-		id: 'dashboard.creator-withdraw-modal.withdraw.header',
-		defaultMessage: 'Withdraw',
-	},
-	withdrawRemaining: {
-		id: 'dashboard.creator-withdraw-modal.withdraw-remaining',
-		defaultMessage: 'Withdraw remaining',
-	},
-	withdrawFrom: {
-		id: 'dashboard.creator-withdraw-modal.withdraw-from',
-		defaultMessage: 'Withdraw from',
-	},
-	availableBalance: {
-		id: 'dashboard.creator-withdraw-modal.available-balance',
-		defaultMessage: 'Available balance',
-	},
-	region: { id: 'dashboard.creator-withdraw-modal.region', defaultMessage: 'Region' },
-	withdrawTo: { id: 'dashboard.creator-withdraw-modal.withdraw-to', defaultMessage: 'Withdraw to' },
-	amount: { id: 'dashboard.creator-withdraw-modal.amount', defaultMessage: 'Amount' },
-	selectYourCountryOrRegion: {
-		id: 'dashboard.creator-withdraw-modal.tooltip.select-country-region',
-		defaultMessage: 'Select your country or region',
-	},
-	selectCountryPlaceholder: {
-		id: 'dashboard.creator-withdraw-modal.placeholder.select-country',
-		defaultMessage: 'Select country...',
-	},
-	selectMethodPlaceholder: {
-		id: 'dashboard.creator-withdraw-modal.placeholder.select-method',
-		defaultMessage: 'Select method...',
-	},
-	enterAmountPlaceholder: {
-		id: 'dashboard.creator-withdraw-modal.placeholder.enter-amount',
-		defaultMessage: 'Enter amount...',
-	},
-	max: { id: 'action.max', defaultMessage: 'Max' },
-	nearingThreshold: {
-		id: 'dashboard.creator-withdraw-modal.nearing-threshold',
-		defaultMessage:
-			"You're nearing the {amount600} withdrawal threshold. You can withdraw up to <b>{amountRemaining}</b> now, but you'll need to complete a tax form to withdraw more.",
-	},
-	taxFormRequiredHeader: {
-		id: 'dashboard.creator-withdraw-modal.tax-form-required.header',
-		defaultMessage: 'Tax form required',
-	},
-	taxFormRequiredBody: {
-		id: 'dashboard.creator-withdraw-modal.tax-form-required.body',
-		defaultMessage:
-			'To withdraw your full <b>{available}</b> available balance please complete the form below. It is required for tax reporting and only needs to be done once.',
-	},
-	completeTaxForm: {
-		id: 'dashboard.creator-withdraw-modal.complete-tax-form',
-		defaultMessage: 'Complete tax form',
-	},
-	withdrawLimitUsed: {
-		id: 'dashboard.creator-withdraw-modal.withdraw-limit-used',
-		defaultMessage:
-			"You've used up your <b>{amount600}</b> withdrawal limit. You must complete a tax form to withdraw more.",
-	},
-	continueWithLimit: {
-		id: 'dashboard.creator-withdraw-modal.continue-with-limit',
-		defaultMessage: 'Continue with limit',
-	},
-
-	minimumTransferAmount: {
-		id: 'dashboard.creator-withdraw-modal.minimum-transfer-amount',
-		defaultMessage: 'The minimum transfer amount is {min}.',
-	},
-
-	cancel: { id: 'action.cancel', defaultMessage: 'Cancel' },
-	actionWithdraw: { id: 'action.withdraw', defaultMessage: 'Withdraw' },
-
-	errorInvalidAmount: {
-		id: 'dashboard.creator-withdraw-modal.error.invalid-amount',
-		defaultMessage: '{input} is not a valid amount',
-	},
-	errorMaxAmount: {
-		id: 'dashboard.creator-withdraw-modal.error.max-amount',
-		defaultMessage: 'The amount must be no more than {max}',
-	},
-	errorMinAmount: {
-		id: 'dashboard.creator-withdraw-modal.error.min-amount',
-		defaultMessage: 'The amount must be at least {min}',
-	},
-	errorLinkPaypal: {
-		id: 'dashboard.creator-withdraw-modal.error.link-paypal',
-		defaultMessage: 'Please link your PayPal account to proceed.',
-	},
-	errorLinkVenmo: {
-		id: 'dashboard.creator-withdraw-modal.error.link-venmo',
-		defaultMessage: 'Please set your Venmo handle to proceed.',
-	},
-	openTaxDebug: {
-		id: 'creator.withdraw.debug.openTaxForm',
-		defaultMessage: 'Open tax form (debug)',
+	// Stage labels for breadcrumb navigation
+	taxFormStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.tax-form',
+		defaultMessage: 'Tax Form',
+	},
+	methodSelectionStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.method-selection',
+		defaultMessage: 'Method',
+	},
+	tremendousDetailsStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.tremendous-details',
+		defaultMessage: 'Details',
+	},
+	muralpayKycStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.muralpay-kyc',
+		defaultMessage: 'Verification',
+	},
+	muralpayDetailsStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.muralpay-details',
+		defaultMessage: 'Account Details',
+	},
+	completionStage: {
+		id: 'dashboard.creator-withdraw-modal.stage.completion',
+		defaultMessage: 'Complete',
+	},
+	detailsLabel: {
+		id: 'dashboard.creator-withdraw-modal.details-label',
+		defaultMessage: 'Details',
 	},
 })
 </script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
new file mode 100644
index 0000000000..83f6f483dc
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<p>Completion Stage</p>
+		<!-- TBD: Implement completion confirmation display -->
+		<!-- Show summary of what was done/selected -->
+		<!-- Reference: https://www.figma.com/design/9bI55sqgicwUezmRXBo9bd/Design-System?node-id=524-3174&m=dev -->
+		<ConfettiExplosion v-if="showConfetti" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import ConfettiExplosion from 'vue-confetti-explosion'
+
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+
+const withdrawContext = useWithdrawContext()
+const showConfetti = ref(false)
+
+onMounted(() => {
+	// Show confetti when completion stage is mounted
+	showConfetti.value = true
+	// Hide confetti after 5 seconds like in moderation page
+	setTimeout(() => {
+		showConfetti.value = false
+	}, 5000)
+})
+
+// TBD: Implement completion summary display
+// TBD: Show selected provider, method, amounts, etc.
+</script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
new file mode 100644
index 0000000000..e8aabf5cd5
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<p>Method Selection Stage - Region and Payment Provider Selection</p>
+		<!-- TBD: Implement region selection and payment provider selection based on Figma design -->
+		<!-- This stage should allow users to select their country/region and then show available payment providers -->
+		<!-- Payment providers: Tremendous (gift card, PayPal, Venmo) and Muralpay (bank transfer, crypto) -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+
+const withdrawContext = useWithdrawContext()
+
+// TBD: Implement region selection logic
+// TBD: Implement payment provider filtering based on selected region
+// TBD: Update withdrawContext.withdrawData with selections
+</script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
new file mode 100644
index 0000000000..af48ce8a12
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<p>Muralpay Details Stage</p>
+		<!-- TBD: Implement bank account or crypto wallet details form -->
+		<!-- Show different fields based on selected method (bank transfer vs crypto) -->
+		<!-- Reference: https://www.figma.com/design/9bI55sqgicwUezmRXBo9bd/Design-System?node-id=295-14876&m=dev -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+
+const withdrawContext = useWithdrawContext()
+
+// TBD: Implement bank account details form (for bank transfer method)
+// TBD: Implement crypto wallet details form (for crypto method)
+// TBD: Update withdrawContext.withdrawData.accountDetails with form data
+</script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
new file mode 100644
index 0000000000..4836fe0e02
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<p>Muralpay KYC Stage</p>
+		<!-- TBD: Implement KYC form fields for Muralpay -->
+		<!-- Fields: Full Name, Address, Phone Number, etc. -->
+		<!-- Reference: https://www.figma.com/design/9bI55sqgicwUezmRXBo9bd/Design-System?node-id=522-2998&m=dev -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+
+const withdrawContext = useWithdrawContext()
+
+// TBD: Implement KYC form fields
+// TBD: Implement form validation
+// TBD: Update withdrawContext.withdrawData.kycData with form data
+</script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
new file mode 100644
index 0000000000..4380f5b6e5
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
@@ -0,0 +1,125 @@
+<template>
+	<div class="flex w-full flex-row justify-between">
+		<span class="font-semibold text-contrast">{{ formatMessage(messages.withdrawRemaining) }}</span>
+		<div>
+			<span class="text-orange">{{ formatMoney(remainingLimit) }}</span> /
+			{{ formatMoney(600) }}
+		</div>
+	</div>
+	<div class="flex h-2 w-full overflow-hidden rounded-full bg-button-bg">
+		<div class="bg-orange" :style="{ width: `${(usedLimit / 600) * 100}%` }"></div>
+	</div>
+	<template v-if="remainingLimit > 0">
+		<span>
+			<IntlFormatted
+				:message-id="messages.nearingThreshold"
+				:values="{
+					amount600: formatMoney(600),
+					amountRemaining: formatMoney(remainingLimit),
+				}"
+			>
+				<template #b="{ children }">
+					<b><component :is="() => normalizeChildren(children)" /></b>
+				</template>
+			</IntlFormatted>
+		</span>
+		<Admonition
+			type="warning"
+			show-actions-underneath
+			:header="formatMessage(messages.taxFormRequiredHeader)"
+		>
+			<span>
+				<IntlFormatted
+					:message-id="messages.taxFormRequiredBody"
+					:values="{ available: formatMoney(balance?.available) }"
+				>
+					<template #b="{ children }">
+						<b><component :is="() => normalizeChildren(children)" /></b>
+					</template>
+				</IntlFormatted>
+			</span>
+			<template #icon="{ iconClass }">
+				<FileTextIcon :class="iconClass" />
+			</template>
+			<template #actions>
+				<ButtonStyled color="orange">
+					<button @click="showTaxFormModal">
+						{{ formatMessage(messages.completeTaxForm) }}
+					</button>
+				</ButtonStyled>
+			</template>
+		</Admonition>
+	</template>
+	<template v-else>
+		<span>
+			<IntlFormatted
+				:message-id="messages.withdrawLimitUsed"
+				:values="{ amount600: formatMoney(600) }"
+			>
+				<template #b="{ children }">
+					<b><component :is="() => normalizeChildren(children)" /></b>
+				</template>
+			</IntlFormatted>
+		</span>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { FileTextIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled } from '@modrinth/ui'
+import { formatMoney } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { IntlFormatted } from '@vintl/vintl/components'
+import { computed } from 'vue'
+
+import { normalizeChildren } from '@/utils/vue-children.ts'
+
+const props = defineProps<{
+	balance: any
+	onShowTaxForm: () => void
+}>()
+
+const { formatMessage } = useVIntl()
+
+const usedLimit = computed(() => props.balance?.withdrawn_ytd ?? 0)
+const remainingLimit = computed(() => {
+	const raw = 600 - usedLimit.value
+	if (raw <= 0) return 0
+	const cents = Math.floor(raw * 100)
+	return cents / 100
+})
+
+function showTaxFormModal() {
+	props.onShowTaxForm()
+}
+
+const messages = defineMessages({
+	withdrawRemaining: {
+		id: 'dashboard.creator-withdraw-modal.withdraw-remaining',
+		defaultMessage: 'Withdraw remaining',
+	},
+	nearingThreshold: {
+		id: 'dashboard.creator-withdraw-modal.nearing-threshold',
+		defaultMessage:
+			"You're nearing the {amount600} withdrawal threshold. You can withdraw up to <b>{amountRemaining}</b> now, but you'll need to complete a tax form to withdraw more.",
+	},
+	taxFormRequiredHeader: {
+		id: 'dashboard.creator-withdraw-modal.tax-form-required.header',
+		defaultMessage: 'Tax form required',
+	},
+	taxFormRequiredBody: {
+		id: 'dashboard.creator-withdraw-modal.tax-form-required.body',
+		defaultMessage:
+			'To withdraw your full <b>{available}</b> available balance please complete the form below. It is required for tax reporting and only needs to be done once.',
+	},
+	completeTaxForm: {
+		id: 'dashboard.creator-withdraw-modal.complete-tax-form',
+		defaultMessage: 'Complete tax form',
+	},
+	withdrawLimitUsed: {
+		id: 'dashboard.creator-withdraw-modal.withdraw-limit-used',
+		defaultMessage:
+			"You've used up your <b>{amount600}</b> withdrawal limit. You must complete a tax form to withdraw more.",
+	},
+})
+</script>
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
new file mode 100644
index 0000000000..1ca67cd8e2
--- /dev/null
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<p>Tremendous Details Stage</p>
+		<!-- TBD: Implement Tremendous-specific details based on selected method -->
+		<!-- If gift card: show gift card type selector and amount input -->
+		<!-- If PayPal/Venmo: show selected method confirmation block -->
+		<!-- Reference: https://www.figma.com/design/9bI55sqgicwUezmRXBo9bd/Design-System?node-id=295-13229&m=dev -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
+
+const withdrawContext = useWithdrawContext()
+
+// TBD: Implement gift card type selection
+// TBD: Implement amount input for gift cards
+// TBD: Implement selected method display for PayPal/Venmo
+// TBD: Update withdrawContext.withdrawData with details
+</script>
diff --git a/apps/frontend/src/providers/creator-withdraw.ts b/apps/frontend/src/providers/creator-withdraw.ts
new file mode 100644
index 0000000000..119ee6c6b5
--- /dev/null
+++ b/apps/frontend/src/providers/creator-withdraw.ts
@@ -0,0 +1,181 @@
+import { createContext } from '@modrinth/ui'
+import { computed, type ComputedRef, type Ref, ref } from 'vue'
+
+export type WithdrawStage =
+	| 'tax-form'
+	| 'method-selection'
+	| 'tremendous-details'
+	| 'muralpay-kyc'
+	| 'muralpay-details'
+	| 'completion'
+
+export type PaymentProvider = 'tremendous' | 'muralpay'
+export type PaymentMethod = 'gift-card' | 'paypal' | 'venmo' | 'bank-transfer' | 'crypto'
+
+// TODO: need backend backend
+export interface WithdrawData {
+	selectedCountry: { id: string; name: string } | null
+	selectedProvider: PaymentProvider | null
+	selectedMethod: PaymentMethod | null
+	amount: number
+	giftCardDetails?: any
+	kycData?: any
+	accountDetails?: any
+}
+
+export interface WithdrawContextValue {
+	currentStage: Ref<WithdrawStage | undefined>
+	stages: ComputedRef<WithdrawStage[]>
+
+	canProceed: ComputedRef<boolean>
+	nextStep: ComputedRef<WithdrawStage | undefined>
+	previousStep: ComputedRef<WithdrawStage | undefined>
+	currentStepIndex: ComputedRef<number>
+
+	withdrawData: Ref<WithdrawData>
+
+	setStage: (stage: WithdrawStage | undefined, skipValidation?: boolean) => Promise<void>
+	validateCurrentStage: () => boolean
+	resetData: () => void
+}
+
+export const [injectWithdrawContext, provideWithdrawContext] =
+	createContext<WithdrawContextValue>('CreatorWithdrawModal')
+
+export function useWithdrawContext() {
+	return injectWithdrawContext()
+}
+
+export function createWithdrawContext(balance: any, userPayoutData: any): WithdrawContextValue {
+	const currentStage = ref<WithdrawStage | undefined>()
+
+	const withdrawData = ref<WithdrawData>({
+		selectedCountry: null,
+		selectedProvider: null,
+		selectedMethod: null,
+		amount: 0,
+	})
+
+	const stages = computed<WithdrawStage[]>(() => {
+		const dynamicStages: WithdrawStage[] = []
+
+		const usedLimit = balance?.withdrawn_ytd ?? 0
+		const remainingLimit = Math.max(0, 600 - usedLimit)
+		const needsTaxForm = balance?.form_completion_status !== 'complete' && remainingLimit <= 0
+
+		if (needsTaxForm) {
+			dynamicStages.push('tax-form')
+		}
+
+		dynamicStages.push('method-selection')
+
+		const selectedProvider = withdrawData.value.selectedProvider
+		if (selectedProvider === 'tremendous') {
+			dynamicStages.push('tremendous-details')
+		} else if (selectedProvider === 'muralpay') {
+			dynamicStages.push('muralpay-kyc')
+			dynamicStages.push('muralpay-details')
+		}
+
+		dynamicStages.push('completion')
+
+		return dynamicStages
+	})
+
+	const currentStepIndex = computed(() =>
+		currentStage.value ? stages.value.indexOf(currentStage.value) : -1,
+	)
+
+	const nextStep = computed(() => {
+		if (!currentStage.value) return undefined
+		const currentIndex = currentStepIndex.value
+		if (currentIndex === -1 || currentIndex >= stages.value.length - 1) return undefined
+		return stages.value[currentIndex + 1]
+	})
+
+	const previousStep = computed(() => {
+		if (!currentStage.value) return undefined
+		const currentIndex = currentStepIndex.value
+		if (currentIndex <= 0) return undefined
+		return stages.value[currentIndex - 1]
+	})
+
+	const canProceed = computed(() => {
+		return validateCurrentStage()
+	})
+
+	function validateCurrentStage(): boolean {
+		switch (currentStage.value) {
+			case 'tax-form':
+				// Tax form validation is handled by the existing tax form component
+				return true
+			case 'method-selection':
+				return !!(
+					withdrawData.value.selectedCountry &&
+					withdrawData.value.selectedProvider &&
+					withdrawData.value.selectedMethod
+				)
+			case 'tremendous-details':
+				if (withdrawData.value.selectedMethod === 'gift-card') {
+					return !!(
+						withdrawData.value.giftCardDetails?.type &&
+						withdrawData.value.giftCardDetails?.amount > 0
+					)
+				}
+				return true // For paypal/venmo, just need method selected
+			case 'muralpay-kyc':
+				return !!(
+					withdrawData.value.kycData?.fullName &&
+					withdrawData.value.kycData?.address &&
+					withdrawData.value.kycData?.phoneNumber
+				)
+			case 'muralpay-details':
+				return !!(
+					withdrawData.value.accountDetails?.bankAccount ||
+					withdrawData.value.accountDetails?.cryptoWallet
+				)
+			case 'completion':
+				return true
+			default:
+				return false
+		}
+	}
+
+	async function setStage(stage: WithdrawStage | undefined, skipValidation = false) {
+		if (!skipValidation && !canProceed.value) {
+			return
+		}
+
+		// If completing the withdraw process (no more stages)
+		if (!stage) {
+			// TBD: Handle final withdraw submission
+			console.log('Withdraw process completed!', withdrawData.value)
+			return
+		}
+
+		currentStage.value = stage
+	}
+
+	function resetData() {
+		withdrawData.value = {
+			selectedCountry: null,
+			selectedProvider: null,
+			selectedMethod: null,
+			amount: 0,
+		}
+		currentStage.value = undefined
+	}
+
+	return {
+		currentStage,
+		stages,
+		canProceed,
+		nextStep,
+		previousStep,
+		currentStepIndex,
+		withdrawData,
+		setStage,
+		validateCurrentStage,
+		resetData,
+	}
+}