feat: creator revenue page overhaul

.github/instructions/i18n-convert.instructions.md

@@ -9,6 +9,7 @@ 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.
+- There may be strings within the <script> block, e.g dropdown option labels, notifications etc.
 
 2. Create message definitions
 

.gitignore

@@ -65,3 +65,6 @@ app-playground-data/*
 
 .astro
 .claude
+
+# labrinth demo fixtures
+apps/labrinth/fixtures/demo

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

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

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>

apps/frontend/nuxt.config.ts

@@ -7,10 +7,16 @@ import { promises as fs } from 'fs'
 import { globIterate } from 'glob'
 import { defineNuxtConfig } from 'nuxt/config'
 import { $fetch } from 'ofetch'
+import Papa from 'papaparse'
 import { basename, relative, resolve } from 'pathe'
 import svgLoader from 'vite-svg-loader'
 
+import type { GeneratedState } from './src/composables/generated'
+
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
+// ISO 3166 data from https://github.com/ipregistry/iso3166
+// Licensed under CC BY-SA 4.0
+const ISO3166_REPO = 'https://raw.githubusercontent.com/ipregistry/iso3166/master'
 
 const preloadedFonts = [
 	'inter/Inter-Regular.woff2',
@@ -133,20 +139,7 @@ export default defineNuxtConfig({
 			// 30 minutes
 			const TTL = 30 * 60 * 1000
 
-			let state: {
-				lastGenerated?: string
-				apiUrl?: string
-				categories?: any[]
-				loaders?: any[]
-				gameVersions?: any[]
-				donationPlatforms?: any[]
-				reportTypes?: any[]
-				homePageProjects?: any[]
-				homePageSearch?: any[]
-				homePageNotifs?: any[]
-				products?: any[]
-				errors?: number[]
-			} = {}
+			let state: Partial<GeneratedState> = {}
 
 			try {
 				state = JSON.parse(await fs.readFile('./src/generated/state.json', 'utf8'))
@@ -200,6 +193,9 @@ export default defineNuxtConfig({
 				homePageSearch,
 				homePageNotifs,
 				products,
+				muralBankDetails,
+				countriesCSV,
+				subdivisionsCSV,
 			] = await Promise.all([
 				$fetch(`${API_URL}tag/category`, headers).catch((err) => handleFetchError(err, [])),
 				$fetch(`${API_URL}tag/loader`, headers).catch((err) => handleFetchError(err, [])),
@@ -220,8 +216,53 @@ export default defineNuxtConfig({
 				$fetch(`${API_URL.replace('/v2/', '/_internal/')}billing/products`, headers).catch((err) =>
 					handleFetchError(err, []),
 				),
+				$fetch(`${API_URL.replace('/v2/', '/_internal/')}mural/bank-details`, headers).catch(
+					(err) => handleFetchError(err, null),
+				),
+				$fetch<string>(`${ISO3166_REPO}/countries.csv`, {
+					...headers,
+					responseType: 'text',
+				}).catch((err) => handleFetchError(err, '')),
+				$fetch<string>(`${ISO3166_REPO}/subdivisions.csv`, {
+					...headers,
+					responseType: 'text',
+				}).catch((err) => handleFetchError(err, '')),
 			])
 
+			const countriesData = Papa.parse(countriesCSV, {
+				header: true,
+				skipEmptyLines: true,
+				transformHeader: (header) => (header.startsWith('#') ? header.slice(1) : header),
+			}).data
+			const subdivisionsData = Papa.parse(subdivisionsCSV, {
+				header: true,
+				skipEmptyLines: true,
+				transformHeader: (header) => (header.startsWith('#') ? header.slice(1) : header),
+			}).data
+
+			const subdivisionsByCountry = (subdivisionsData as any[]).reduce(
+				(acc, sub) => {
+					const countryCode = sub.country_code_alpha2
+
+					if (!countryCode || typeof countryCode !== 'string' || countryCode.trim() === '') {
+						return acc
+					}
+
+					if (!acc[countryCode]) acc[countryCode] = []
+
+					acc[countryCode].push({
+						code: sub['subdivision_code_iso3166-2'],
+						name: sub.subdivision_name,
+						localVariant: sub.localVariant || null,
+						category: sub.category,
+						parent: sub.parent_subdivision || null,
+						language: sub.language_code,
+					})
+					return acc
+				},
+				{} as Record<string, any[]>,
+			)
+
 			state.categories = categories
 			state.loaders = loaders
 			state.gameVersions = gameVersions
@@ -231,6 +272,15 @@ export default defineNuxtConfig({
 			state.homePageSearch = homePageSearch
 			state.homePageNotifs = homePageNotifs
 			state.products = products
+			state.muralBankDetails = muralBankDetails.bankDetails
+			state.countries = (countriesData as any[]).map((c) => ({
+				alpha2: c.country_code_alpha2,
+				alpha3: c.country_code_alpha3,
+				numeric: c.numeric_code,
+				nameShort: c.name_short,
+				nameLong: c.name_long,
+			}))
+			state.subdivisions = subdivisionsByCountry
 			state.errors = [...caughtErrorCodes]
 
 			await fs.writeFile('./src/generated/state.json', JSON.stringify(state))
@@ -475,6 +525,12 @@ export default defineNuxtConfig({
 				'Critical-CH': 'Sec-CH-Prefers-Color-Scheme',
 			},
 		},
+		'/dashboard/revenue/withdraw': {
+			redirect: {
+				to: '/dashboard/revenue',
+				statusCode: 410,
+			},
+		},
 		'/email/**': {
 			redirect: '/_internal/templates/email/**',
 		},

apps/frontend/package.json

@@ -18,6 +18,7 @@
 		"@nuxt/devtools": "^1.3.3",
 		"@types/dompurify": "^3.0.5",
 		"@types/node": "^20.1.0",
+		"@types/papaparse": "^5.3.15",
 		"@vintl/compact-number": "^2.0.5",
 		"@vintl/how-ago": "^3.0.1",
 		"@vintl/nuxt": "^1.9.2",
@@ -56,10 +57,10 @@
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
-		"iso-3166-1": "^2.1.1",
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
 		"markdown-it": "14.1.0",
+		"papaparse": "^5.4.1",
 		"pathe": "^1.1.2",
 		"pinia": "^2.1.7",
 		"pinia-plugin-persistedstate": "^4.4.1",

apps/frontend/src/components/brand/TextLogo.vue

@@ -53,12 +53,15 @@
 	</svg>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const loading = useLoading()
 
 const config = useRuntimeConfig()
+const flags = useFeatureFlags()
 
 const api = computed(() => {
+	if (flags.value.demoMode) return 'prod'
+
 	const apiUrl = config.public.apiBaseUrl
 	if (apiUrl.startsWith('https://api.modrinth.com')) {
 		return 'prod'

apps/frontend/src/components/ui/EnvironmentIndicator.vue

@@ -90,7 +90,7 @@ defineProps({
 	},
 })
 
-const tags = useTags()
+const tags = useGeneratedState()
 </script>
 <style lang="scss" scoped>
 .environment {