Files
AstralRinth/packages/ui/src/components/servers/ServerSetupModal.vue
T
Calum H. 7d92e4ec7f feat: content tab rewrite for worlds (#5136)
* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: base content tab internals rewrite

* feat: fix invalidmodal

* feat: add ContentModpackCard

* fix: extract types

* draft: layout

* feat: unlink modal

* feat: impl content tab

* fix: lint

* fix: toggling

* temp: disable updating stuff

* feat: selection v-model

* feat: bulk selection

* feat: mods tab rough draft

* feat: use fuse.js

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: use v-on

* feat: bulk actions + fix floating action bar width

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: use ContentCardTable + ContentCardItems

* feat: fix gap + border issues on last elm

* feat: cleanup + use proper searching

* fix: use TeleportOverflowMenu

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* feat: impl modal

* feat(app): backend changes for content tab refactor (#5237)

* feat: include_changelog=false for updater modal

* fix: hash overrides

* feat: update checking for modpack

* feat: qa

* feat: modpack content modal

* fix: padding in table to match modals + tightness

* fix: lint

* feat: delete modal

* feat: fix toggle bugs

* fix: prepr

* fix: duplicate messages

* qa: full width search

* qa: use bg-surface-1.5

* qa: animation for filter pills

* qa: standardize hover colors

* fix: border-[1px] is border

* qa: mass de-select actually mass selecting

* qa: match figma designs for floating action bar

* qa: modal fixes

* q: modal fixes x2

* fix: table border

* qa: confirm modals

* qa: modal alignment

* qa: re-add stuck heading + dedupe logic

* qa: dedupe virtual scrolling + remove dead components

* qa: responsiveness for content table + link fixes

* qa: version column link, tooltips + lint fixes

* qa: instance busy protections

* fix: installation freeze bug

* chore: remove old mods page

* refactor: deduplicate layout

* chore: delete old content page(s)

* qa

* qa

* qa

* feat: sort btn - to iterate

* fix: ml

* feat: date added

* fix: lint

* fix: formatting.ts removal

* feat: get_dependencies_as_content_items

* qa: final QA changes

* refactor: deduplicate + polish content.rs

* feat: hook up content.vue with v1

* feat: hide v1 content api behind frontend feature flag

* fix: query keys + copy on empty state

* chore: i18n pass

* feat: reimpl unlink + upload endpoint

* feat: use bulk endpoints v1

* fix: lint

* fix: flags

* fix: responsiveness via container queries

* fix: lint

* qa: 1

* qa: fixes

* qa: fix ssr issues with browse content

* qa: header page divider

* qa: modals

* fix: prepr

* fix: issues

* fix: lint

* fix: toggle v1 ff

* qa: 5

* qa: delete modal copy

* feat: creation flow modals (#5383)

* refactor: delete content v0 usages + impl

* feat: qa + fixes

* feat: installing banner using state event

* feat: fix modpack card bugs + filtering issues

* refactor: delete backups v0 api module

* feat: v1 servers GET endpoint

* fix: backups

* feat: swap to kyros upload v1 addon

* fix: use tanstack for loader.vue

* feat: finish install from discovery modal

* qa: bug fixes

* feat: set up installation settings

* fix: lint

* fix: typos

* fix: bugs

* fix: disable inline content

* feat: content tab improvements — upload UX, installation settings, and client-only indicators

   Upload cancellation and navigation guard:
   - Add ConfirmLeaveModal that prompts when navigating away during upload
   - Cancel in-flight XHR uploads when user confirms leaving the page
   - Add beforeunload handler to warn on browser/tab close during upload
   - Track uploadedBytes/totalBytes in UploadState for progress display
   - Replace Collapsible with Transition for upload progress admonition
   - Show byte progress and percentage in upload banner
   - Clamp upload progress to prevent exceeding 100%

   Installation settings (server.properties):
   - Add KnownPropertiesFields and PropertiesFields types to Archon types
   - Add buildProperties() to creation flow context to collect gamemode,
     difficulty, seed, world type, structures, and generator settings
   - Pass properties through installContent on onboarding, discovery, and
     ServerSetupModal flows

   Server setup and discovery flow improvements:
   - Migrate ServerSetupModal from servers_v0.reinstall to content_v1.installContent
   - Replace loaderApiNames lookup with toApiLoader() helper
   - Remove eraseDataOnInstall toggle — always use soft_override: false
   - Simplify modpack install on discovery page to use first available version
     and route through creation flow modal for both onboarding and non-onboarding
   - Differentiate post-install navigation: content page for onboarding,
     loader options for existing servers

   Modpack update flow:
   - Replace updateModpack() call with installContent() using soft_override: true
     to support version selection in the content updater modal

   Client-only mod indicators:
   - Add environment field to AddonVersion (reuses Labrinth.Projects.v3.Environment)
   - Add environment to ContentItem and isClientOnly to ContentCardTableItem
   - Show orange TriangleAlertIcon with tooltip on client-only mods in content table
   - Add "Client-only" filter pill to content filtering (controlled via
     showClientOnlyFilter on ContentManagerContext)
   - Apply client-only indicators in both ContentPageLayout and ModpackContentModal

   Misc:
   - Add CLAUDE.md note about using prepr commands for lint checks
   - Export ConfirmLeaveModal from instances barrel

* fix: piping

* fix: switch content disable for linked server instances

* feat: client only filter

* fix: prepr

* feat: hasUpdate shape update

* feat: bulk update endpoint impl for content in panel

* feat: websocket state impl again with new phases

* fix: ws

* fix: use timeout fn for sync admon + fix content card layout scroll for browsers with overflow anchor bug

* fix: qa bugs

* fix: lint, a11y and i18n

* refactor: set up layouts folder properly

* fix: linked data cache stuff + lint

* feat: move installationsettings to shared layout

* fix: lint

* fix: issues

* feat: temp fuck staging up

* fix: lockfile

* fix: data sync issues on loader.vue

* fix: lint

* Hide shader configuration files from content list (#5499)

* feat: workaround search problem + split out reset

* fix: qa

* fix: changelog not showing on first open

* fix: qa + optimistic updating improvements

* fix: prepr+lint

* fix: qa

* feat: qa

* fix: lint

* fix: lint

* fix: build

* fix: build

* fix: type errors

* fix: fade and JAVA_HOME passthrough

* feat: qa

* feat: impl diff shit

* fix: qa

* fix: app qa

* feat: update diff modal

* fix: endpoint

* fix: qa

* fix: qa

* fix: use bulk in modpack modal

* feat: abort signal impl + fix issues

* fix: diff modal trunc

* feat: qa

* fix: qa

* feat: tooltip content tab

* fix: prepr

* fix: dismiss on settings btn

* feat: qa

* feat: dont clear handlers on disconnect

* fix: lint

* fix: wrangler + introduce staging-archon env file

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Artyom Ezri <61311568+Artezon@users.noreply.github.com>
2026-03-12 13:24:32 -07:00

255 lines
7.6 KiB
Vue

<template>
<CreationFlowModal
ref="creationFlowRef"
type="reset-server"
:available-loaders="serverLoaders"
:show-snapshot-toggle="true"
:disable-close="props.initialSetup"
:is-initial-setup="props.initialSetup"
:initial-loader="initialLoader"
:initial-game-version="initialGameVersion"
:fade="props.initialSetup ? undefined : 'danger'"
:search-modpacks="searchModpacks"
:get-project-versions="getProjectVersions"
@create="onFlowComplete"
@hide="$emit('hide')"
@browse-modpacks="$emit('browse-modpacks')"
/>
<NewModal
ref="uploadModal"
:header="formatMessage(messages.uploadingModpackHeader)"
:closable="false"
>
<div class="flex flex-col gap-4 md:w-[400px]">
<AppearingProgressBar :max-value="totalBytes" :current-value="uploadedBytes" />
<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.uploadWarningText) }}</p>
</div>
</NewModal>
</template>
<script setup lang="ts">
import type { Archon, ModrinthApiError } from '@modrinth/api-client'
import { computed, nextTick, ref, useTemplateRef } from 'vue'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { defineMessages, useVIntl } from '../../composables/i18n'
import { injectModrinthClient } from '../../providers/api-client'
import { injectModrinthServerContext } from '../../providers/server-context'
import { injectNotificationManager } from '../../providers/web-notifications'
import { AppearingProgressBar } from '../base'
import type { CreationFlowContextValue } from '../flows/creation-flow-modal/creation-flow-context'
import CreationFlowModal from '../flows/creation-flow-modal/index.vue'
import { NewModal } from '../modal'
const { formatMessage } = useVIntl()
const messages = defineMessages({
uploadingModpackHeader: {
id: 'servers.setup.uploading-modpack.header',
defaultMessage: 'Uploading modpack',
},
uploadWarningText: {
id: 'servers.setup.upload-warning',
defaultMessage: "Please don't close this page while uploading.",
},
rateLimitTitle: {
id: 'servers.setup.rate-limit.title',
defaultMessage: 'Cannot reinstall server',
},
rateLimitText: {
id: 'servers.setup.rate-limit.text',
defaultMessage: 'You are being rate limited. Please try again later.',
},
reinstallFailedTitle: {
id: 'servers.setup.reinstall-failed.title',
defaultMessage: 'Reinstall Failed',
},
reinstallFailedText: {
id: 'servers.setup.reinstall-failed.text',
defaultMessage: 'An unexpected error occurred while reinstalling. Please try again later.',
},
})
const debug = useDebugLogger('ServerSetupModal')
const client = injectModrinthClient()
const serverContext = injectModrinthServerContext()
const { addNotification } = injectNotificationManager()
const serverLoaders = ['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']
async function searchModpacks(query: string, limit: number = 10) {
return client.labrinth.projects_v2.search({
query: query || undefined,
facets: [['project_type:modpack'], ['client_side:required'], ['server_side:required']],
limit,
})
}
async function getProjectVersions(projectId: string) {
const versions = await client.labrinth.versions_v3.getProjectVersions(projectId)
return versions.map((v) => ({ id: v.id }))
}
function toApiLoader(loader: string): Archon.Content.v1.Modloader {
if (loader === 'neoforge') return 'neo_forge'
return loader as Archon.Content.v1.Modloader
}
const props = defineProps<{
initialSetup?: boolean
}>()
const emit = defineEmits<{
reinstall: [args?: { loader: string; lVersion: string; mVersion: string | null }]
hide: []
'browse-modpacks': []
}>()
const initialLoader = computed(() => {
const loader = serverContext.server.value.loader
if (!loader || loader === 'Vanilla') return undefined
return loader.toLowerCase()
})
const initialGameVersion = computed(() => serverContext.server.value.mc_version ?? undefined)
const creationFlowRef = useTemplateRef<InstanceType<typeof CreationFlowModal>>('creationFlowRef')
const uploadModal = useTemplateRef<InstanceType<typeof NewModal>>('uploadModal')
const uploadedBytes = ref(0)
const totalBytes = ref(0)
async function onFlowComplete(ctx: CreationFlowContextValue) {
debug('onFlowComplete:', {
setupType: ctx.setupType.value,
hasModpackFile: !!ctx.modpackFile.value,
modpackSelection: ctx.modpackSelection.value,
selectedLoader: ctx.selectedLoader.value,
selectedGameVersion: ctx.selectedGameVersion.value,
selectedLoaderVersion: ctx.selectedLoaderVersion.value,
worldId: serverContext.worldId.value,
})
try {
if (ctx.setupType.value === 'modpack' && ctx.modpackFile.value) {
debug('onFlowComplete: mrpack upload path')
await handleMrpackUpload(ctx.modpackFile.value, ctx.buildProperties())
} else if (ctx.setupType.value === 'modpack' && ctx.modpackSelection.value) {
debug('onFlowComplete: modpack selection path, calling installContent')
await client.archon.content_v1.installContent(
serverContext.serverId,
serverContext.worldId.value!,
{
content_variant: 'modpack',
spec: {
platform: 'modrinth',
project_id: ctx.modpackSelection.value.projectId,
version_id: ctx.modpackSelection.value.versionId,
},
soft_override: false,
properties: ctx.buildProperties(),
},
)
debug('onFlowComplete: modpack installContent returned, emitting reinstall')
emitReinstall()
} else {
const loader = ctx.selectedLoader.value
const loaderVersion =
!loader || loader === 'vanilla' ? '' : (ctx.selectedLoaderVersion.value ?? '')
debug('onFlowComplete: bare install path', {
loader,
loaderVersion,
gameVersion: ctx.selectedGameVersion.value,
apiLoader: toApiLoader(loader ?? 'vanilla'),
})
await client.archon.content_v1.installContent(
serverContext.serverId,
serverContext.worldId.value!,
{
content_variant: 'bare',
loader: toApiLoader(loader ?? 'vanilla'),
version: loaderVersion,
game_version: ctx.selectedGameVersion.value ?? undefined,
soft_override: false,
properties: ctx.buildProperties(),
},
)
debug('onFlowComplete: bare installContent returned, emitting reinstall')
emitReinstall({
loader: loader ?? 'vanilla',
lVersion: loaderVersion,
mVersion: ctx.selectedGameVersion.value,
})
}
creationFlowRef.value?.hide()
} catch (error) {
debug('onFlowComplete: ERROR', error)
if ((error as ModrinthApiError).statusCode === 429) {
addNotification({
title: formatMessage(messages.rateLimitTitle),
text: formatMessage(messages.rateLimitText),
type: 'error',
})
} else {
addNotification({
title: formatMessage(messages.reinstallFailedTitle),
text: formatMessage(messages.reinstallFailedText),
type: 'error',
})
}
} finally {
ctx.loading.value = false
}
}
async function handleMrpackUpload(file: File, properties: Archon.Content.v1.PropertiesFields) {
uploadedBytes.value = 0
totalBytes.value = file.size
creationFlowRef.value?.hide()
await nextTick()
uploadModal.value?.show()
try {
const handle = client.kyros.content_v1.uploadModpackFile(
serverContext.worldId.value!,
file,
properties,
{
softOverride: false,
onProgress: ({ loaded, total }) => {
uploadedBytes.value = loaded
totalBytes.value = total
},
},
)
await handle.promise
emitReinstall()
} finally {
uploadModal.value?.hide()
}
}
function emitReinstall(args?: { loader: string; lVersion: string; mVersion: string | null }) {
debug('emitReinstall:', args)
emit('reinstall', args)
}
function show() {
creationFlowRef.value?.show()
}
function hide() {
creationFlowRef.value?.hide()
}
defineExpose({ show, hide, ctx: computed(() => creationFlowRef.value?.ctx) })
</script>