Skip to content

feat: start of cross platform page system #4731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Nov 14, 2025
Merged

feat: start of cross platform page system #4731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
18a4647
feat: abstract api-client DI into ui package
IMB11 Nov 7, 2025
7bf2f33
feat: cross platform page system
IMB11 Nov 7, 2025
6b0e96c
feat: tanstack as cross platform useAsyncData
IMB11 Nov 8, 2025
120af74
feat: archon servers routes + labrinth billing routes
IMB11 Nov 8, 2025
6823375
fix: dont use partial
IMB11 Nov 8, 2025
94039cc
feat: migrate server list page to tanstack + api-client + re-enabled …
IMB11 Nov 8, 2025
48970ce
feat: migrate servers manage page to api-client before page system
IMB11 Nov 8, 2025
4957f02
feat: migrate manage page to page system
IMB11 Nov 8, 2025
5f3ad68
fix: type issues
IMB11 Nov 9, 2025
acf4bcd
fix: upgrade wrapper bugs
IMB11 Nov 9, 2025
b672cbd
refactor: move state types into api-client
IMB11 Nov 9, 2025
1445df5
feat: disable financial stuff on app frontend
IMB11 Nov 9, 2025
a677842
feat: finalize cross platform page system for now
IMB11 Nov 9, 2025
be33c00
fix: lint
IMB11 Nov 9, 2025
7d55d73
Merge branch 'main' into cal/dev-391
Prospector Nov 13, 2025
cf778c7
fix: build issues
IMB11 Nov 14, 2025
19e09b0
feat: remove papaparse
IMB11 Nov 14, 2025
6df726f
fix: lint
IMB11 Nov 14, 2025
08c811b
fix: interface error
IMB11 Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/app-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions apps/app-frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup>
import { AuthFeature, TauriModrinthClient } from '@modrinth/api-client'
import {
ArrowBigUpDashIcon,
ChangeSkinIcon,
Expand All @@ -18,6 +19,7 @@ import {
RefreshCwIcon,
RestoreIcon,
RightArrowIcon,
ServerIcon,
SettingsIcon,
UserIcon,
WorldIcon,
Expand All @@ -32,6 +34,7 @@ import {
NotificationPanel,
OverflowMenu,
ProgressSpinner,
provideModrinthClient,
provideNotificationManager,
} from '@modrinth/ui'
import { renderString } from '@modrinth/utils'
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions apps/app-frontend/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -45,6 +46,7 @@ Sentry.init({
tracesSampleRate: 0.1,
})

app.use(VueQueryPlugin)
app.use(vueScan)
app.use(router)
app.use(pinia)
Expand Down
9 changes: 9 additions & 0 deletions apps/app-frontend/src/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ServersManagePageIndex } from '@modrinth/ui'
import { createRouter, createWebHistory } from 'vue-router'

import * as Pages from '@/pages'
Expand Down Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions apps/app-frontend/src/store/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
133 changes: 11 additions & 122 deletions apps/frontend/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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'))
Expand All @@ -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 [
Copy link
Member Author

@IMB11 IMB11 Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to api-client, see notion, we need to figure out how we're going to do this (the full thing, not just tags) for the app-frontend.

Copy link
Member

@Prospector Prospector Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this no longer catch errors and display the errors generating state banner?

Copy link
Member Author

@IMB11 IMB11 Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Errors are stored still;

		const errors: unknown[] = []
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		const handleError = (err: any, defaultValue: any) => {
			console.error('Error fetching state data:', err)
			errors.push(err)
			return defaultValue
		}

Copy link
Member Author

@IMB11 IMB11 Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Inside the impl)

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!')
Expand Down
5 changes: 2 additions & 3 deletions apps/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
7 changes: 3 additions & 4 deletions apps/frontend/src/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
3 changes: 1 addition & 2 deletions apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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()
Expand Down
24 changes: 0 additions & 24 deletions apps/frontend/src/components/ui/servers/ServerListingSkeleton.vue
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
View file
Open in desktop

This file was deleted.

Loading