feat: start of cross platform page system (#4731)

* feat: abstract api-client DI into ui package

* feat: cross platform page system

* feat: tanstack as cross platform useAsyncData

* feat: archon servers routes + labrinth billing routes

* fix: dont use partial

* feat: migrate server list page to tanstack + api-client + re-enabled broken features!

* feat: migrate servers manage page to api-client before page system

* feat: migrate manage page to page system

* fix: type issues

* fix: upgrade wrapper bugs

* refactor: move state types into api-client

* feat: disable financial stuff on app frontend

* feat: finalize cross platform page system for now

* fix: lint

* fix: build issues

* feat: remove papaparse

* fix: lint

* fix: interface error

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

Author: IMB11

apps/app-frontend/package.json

@@ -13,11 +13,13 @@
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
-		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
+		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
 		"@tauri-apps/plugin-http": "^2.5.0",
@@ -41,9 +43,9 @@
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
-		"@modrinth/tooling-config": "workspace:*",
 		"@eslint/compat": "^1.1.1",
 		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
 		"@nuxt/eslint-config": "^0.5.6",
 		"@taijased/vue-render-tracker": "^1.0.7",
 		"@vitejs/plugin-vue": "^5.0.4",

apps/app-frontend/src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { AuthFeature, TauriModrinthClient } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
@@ -18,6 +19,7 @@ import {
 	RefreshCwIcon,
 	RestoreIcon,
 	RightArrowIcon,
+	ServerIcon,
 	SettingsIcon,
 	UserIcon,
 	WorldIcon,
@@ -32,6 +34,7 @@ import {
 	NotificationPanel,
 	OverflowMenu,
 	ProgressSpinner,
+	provideModrinthClient,
 	provideNotificationManager,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
@@ -102,6 +105,16 @@ const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
 const { handleError, addNotification } = notificationManager
 
+const tauriApiClient = new TauriModrinthClient({
+	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
+	features: [
+		new AuthFeature({
+			token: async () => (await getCreds()).session,
+		}),
+	],
+})
+provideModrinthClient(tauriApiClient)
+
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -742,6 +755,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/servers/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"

apps/app-frontend/src/main.js

@@ -2,6 +2,7 @@ import 'floating-vue/dist/style.css'
 
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 import { createPlugin } from '@vintl/vintl/plugin'
 import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
@@ -45,6 +46,7 @@ Sentry.init({
 	tracesSampleRate: 0.1,
 })
 
+app.use(VueQueryPlugin)
 app.use(vueScan)
 app.use(router)
 app.use(pinia)

apps/app-frontend/src/routes.js

@@ -1,3 +1,4 @@
+import { ServersManagePageIndex } from '@modrinth/ui'
 import { createRouter, createWebHistory } from 'vue-router'
 
 import * as Pages from '@/pages'
@@ -27,6 +28,14 @@ export default new createRouter({
 				breadcrumb: [{ name: 'Worlds' }],
 			},
 		},
+		{
+			path: '/servers/manage/',
+			name: 'Servers',
+			component: ServersManagePageIndex,
+			meta: {
+				breadcrumb: [{ name: 'Servers' }],
+			},
+		},
 		{
 			path: '/browse/:projectType',
 			name: 'Discover content',

apps/app-frontend/src/store/theme.ts

@@ -5,6 +5,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	page_path: false,
 	worlds_tab: false,
 	worlds_in_home: true,
+	servers_in_app: false,
 }
 
 export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const

apps/frontend/nuxt.config.ts

@@ -1,22 +1,16 @@
 import { pathToFileURL } from 'node:url'
 
 import { match as matchLocale } from '@formatjs/intl-localematcher'
+import { GenericModrinthClient, type Labrinth } from '@modrinth/api-client'
 import serverSidedVue from '@vitejs/plugin-vue'
 import { consola } from 'consola'
 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',
@@ -139,7 +133,7 @@ export default defineNuxtConfig({
 			// 30 minutes
 			const TTL = 30 * 60 * 1000
 
-			let state: Partial<GeneratedState> = {}
+			let state: Partial<Labrinth.State.GeneratedState & Record<string, any>> = {}
 
 			try {
 				state = JSON.parse(await fs.readFile('./src/generated/state.json', 'utf8'))
@@ -165,124 +159,19 @@ export default defineNuxtConfig({
 				return
 			}
 
-			state.lastGenerated = new Date().toISOString()
+			const client = new GenericModrinthClient({
+				labrinthBaseUrl: API_URL.replace('/v2/', ''),
+				userAgent: 'Knossos generator (support@modrinth.com)',
+			})
 
+			const generatedState = await client.labrinth.state.build()
+			state.lastGenerated = new Date().toISOString()
 			state.apiUrl = API_URL
-
-			const headers = {
-				headers: {
-					'user-agent': 'Knossos generator (support@modrinth.com)',
-				},
-			}
-
-			const caughtErrorCodes = new Set<number>()
-
-			function handleFetchError(err: any, defaultValue: any) {
-				console.error('Error generating state: ', err)
-				caughtErrorCodes.add(err.status)
-				return defaultValue
+			state = {
+				...state,
+				...generatedState,
 			}
 
-			const [
-				categories,
-				loaders,
-				gameVersions,
-				donationPlatforms,
-				reportTypes,
-				homePageProjects,
-				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, [])),
-				$fetch(`${API_URL}tag/game_version`, headers).catch((err) => handleFetchError(err, [])),
-				$fetch(`${API_URL}tag/donation_platform`, headers).catch((err) =>
-					handleFetchError(err, []),
-				),
-				$fetch(`${API_URL}tag/report_type`, headers).catch((err) => handleFetchError(err, [])),
-				$fetch(`${API_URL}projects_random?count=60`, headers).catch((err) =>
-					handleFetchError(err, []),
-				),
-				$fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers).catch((err) =>
-					handleFetchError(err, {}),
-				),
-				$fetch(`${API_URL}search?limit=3&query=&index=updated`, headers).catch((err) =>
-					handleFetchError(err, {}),
-				),
-				$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
-			state.donationPlatforms = donationPlatforms
-			state.reportTypes = reportTypes
-			state.homePageProjects = homePageProjects
-			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))
 
 			console.log('Tags generated!')

apps/frontend/package.json

@@ -18,7 +18,6 @@
 		"@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",
@@ -38,13 +37,14 @@
 		"@formatjs/intl-localematcher": "^0.5.4",
 		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@ltd/j-toml": "^1.38.0",
+		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/moderation": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@modrinth/api-client": "workspace:*",
 		"@pinia/nuxt": "^0.5.1",
+		"@tanstack/vue-query": "^5.90.7",
 		"@types/three": "^0.172.0",
 		"@vintl/vintl": "^4.4.1",
 		"@vitejs/plugin-vue": "^5.0.4",
@@ -61,7 +61,6 @@
 		"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/app.vue

@@ -6,12 +6,11 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { NotificationPanel, provideNotificationManager } from '@modrinth/ui'
+import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
 
 import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
-
-import { createModrinthClient, provideModrinthClient } from './providers/api-client.ts'
-import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
+import { createModrinthClient } from '~/helpers/api.ts'
+import { FrontendNotificationManager } from '~/providers/frontend-notifications.ts'
 
 const auth = await useAuth()
 const config = useRuntimeConfig()

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

@@ -120,7 +120,7 @@ import {
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Checkbox, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Checkbox, NewModal, ServerInfoLabels } from '@modrinth/ui'
 import type { PowerAction as ServerPowerAction, ServerState } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
 import { computed, ref } from 'vue'
@@ -130,7 +130,6 @@ import type { BackupInProgressReason } from '~/pages/servers/manage/[id].vue'
 
 import LoadingIcon from './icons/LoadingIcon.vue'
 import PanelSpinner from './PanelSpinner.vue'
-import ServerInfoLabels from './ServerInfoLabels.vue'
 import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
 
 const flags = useFeatureFlags()