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>
This commit is contained in:
Calum H.
2026-03-12 13:24:32 -07:00
committed by GitHub
co-authored by tdgao Artyom Ezri
parent f0224dfff7
commit 7d92e4ec7f
302 changed files with 20016 additions and 12142 deletions
@@ -0,0 +1,396 @@
import type { Archon } from '@modrinth/api-client'
import { computed, type ComputedRef, type Ref, ref, type ShallowRef, watch } from 'vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { createContext } from '../../../providers'
import type { ImportableLauncher } from '../../../providers/instance-import'
import type { MultiStageModal, StageConfigInput } from '../../base'
import type { ComboboxOption } from '../../base/Combobox.vue'
import { stageConfigs } from './stages'
export type FlowType = 'world' | 'server-onboarding' | 'reset-server' | 'instance'
export type SetupType = 'modpack' | 'custom' | 'vanilla'
export type Gamemode = 'survival' | 'creative' | 'hardcore'
export type Difficulty = 'peaceful' | 'easy' | 'normal' | 'hard'
export type LoaderVersionType = 'stable' | 'latest' | 'other'
export type GeneratorSettingsMode = 'default' | 'flat' | 'custom'
export interface ModpackSelection {
projectId: string
versionId: string
name: string
iconUrl?: string
}
export interface ModpackSearchHit {
title: string
iconUrl?: string
latestVersion?: string
}
export interface ModpackSearchResult {
hits: {
project_id: string
title: string
icon_url: string
latest_version?: string
}[]
total_hits: number
offset: number
limit: number
}
export const flowTypeHeadings: Record<FlowType, string> = {
world: 'Create world',
'server-onboarding': 'Set up server',
'reset-server': 'Reset server',
instance: 'Create instance',
}
export interface CreationFlowContextValue {
// Flow
flowType: FlowType
// Configuration
availableLoaders: string[]
showSnapshotToggle: boolean
disableClose: boolean
isInitialSetup: boolean
// Initial values
initialLoader: string | null
initialGameVersion: string | null
// State
setupType: Ref<SetupType | null>
isImportMode: Ref<boolean>
worldName: Ref<string>
gamemode: Ref<Gamemode>
difficulty: Ref<Difficulty>
worldSeed: Ref<string>
worldTypeOption: Ref<string>
generateStructures: Ref<boolean>
generatorSettingsMode: Ref<GeneratorSettingsMode>
generatorSettingsCustom: Ref<string>
// Instance-specific state
instanceName: Ref<string>
instanceIcon: Ref<File | null>
instanceIconUrl: Ref<string | null>
instanceIconPath: Ref<string | null>
// Loader/version state (custom setup)
selectedLoader: Ref<string | null>
selectedGameVersion: Ref<string | null>
loaderVersionType: Ref<LoaderVersionType>
selectedLoaderVersion: Ref<string | null>
hideLoaderChips: ComputedRef<boolean>
hideLoaderVersion: ComputedRef<boolean>
showSnapshots: Ref<boolean>
// Modpack state
modpackSelection: Ref<ModpackSelection | null>
modpackFile: Ref<File | null>
modpackFilePath: Ref<string | null>
// Modpack search state (persisted across stage navigation)
modpackSearchProjectId: Ref<string | undefined>
modpackSearchVersionId: Ref<string | undefined>
modpackSearchOptions: Ref<ComboboxOption<string>[]>
modpackVersionOptions: Ref<ComboboxOption<string>[]>
modpackSearchHits: Ref<Record<string, ModpackSearchHit>>
// Import state (instance flow only)
importLaunchers: Ref<ImportableLauncher[]>
importSelectedInstances: Ref<Record<string, Set<string>>>
importSearchQuery: Ref<string>
// Confirm stage
hardReset: Ref<boolean>
// Loading state (set when finish() is called, cleared on reset)
loading: Ref<boolean>
// Modal
modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
stageConfigs: StageConfigInput<CreationFlowContextValue>[]
// Callbacks
onBack: (() => void) | null
// Methods
reset: (instanceCount?: number) => void
setSetupType: (type: SetupType) => void
setImportMode: () => void
browseModpacks: () => void
finish: () => void
buildProperties: () => Archon.Content.v1.PropertiesFields
// Platform-provided search
searchModpacks: (query: string, limit?: number) => Promise<ModpackSearchResult>
getProjectVersions: (projectId: string) => Promise<{ id: string }[]>
}
export const [injectCreationFlowContext, provideCreationFlowContext] =
createContext<CreationFlowContextValue>('CreationFlowModal')
// TODO: replace with actual world count from the world list once available
let worldCounter = 0
let instanceCounter = 0
export interface CreationFlowOptions {
availableLoaders?: string[]
showSnapshotToggle?: boolean
disableClose?: boolean
isInitialSetup?: boolean
initialLoader?: string
initialGameVersion?: string
onBack?: () => void
searchModpacks?: (query: string, limit?: number) => Promise<ModpackSearchResult>
getProjectVersions?: (projectId: string) => Promise<{ id: string }[]>
}
export function createCreationFlowContext(
modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>,
flowType: FlowType,
emit: {
browseModpacks: () => void
create: (config: CreationFlowContextValue) => void
},
options: CreationFlowOptions = {},
): CreationFlowContextValue {
const debug = useDebugLogger('CreationFlow')
const availableLoaders = options.availableLoaders ?? ['fabric', 'neoforge', 'forge', 'quilt']
const showSnapshotToggle = options.showSnapshotToggle ?? false
const disableClose = options.disableClose ?? false
const isInitialSetup = options.isInitialSetup ?? false
const initialLoader = options.initialLoader ?? null
const initialGameVersion = options.initialGameVersion ?? null
const onBack = options.onBack ?? null
const setupType = ref<SetupType | null>(null)
const isImportMode = ref(false)
const worldName = ref('')
const gamemode = ref<Gamemode>('survival')
const difficulty = ref<Difficulty>('normal')
const worldSeed = ref('')
const worldTypeOption = ref('minecraft:normal')
const generateStructures = ref(true)
const generatorSettingsMode = ref<GeneratorSettingsMode>('default')
const generatorSettingsCustom = ref('')
// Instance-specific state
const instanceName = ref('')
const instanceIcon = ref<File | null>(null)
const instanceIconUrl = ref<string | null>(null)
const instanceIconPath = ref<string | null>(null)
// Revoke old object URL when icon is cleared to avoid memory leaks
watch(instanceIconUrl, (_newUrl, oldUrl) => {
if (oldUrl && oldUrl.startsWith('blob:')) {
URL.revokeObjectURL(oldUrl)
}
})
const selectedLoader = ref<string | null>(null)
const selectedGameVersion = ref<string | null>(null)
const loaderVersionType = ref<LoaderVersionType>('stable')
const selectedLoaderVersion = ref<string | null>(null)
const showSnapshots = ref(false)
const modpackSelection = ref<ModpackSelection | null>(null)
const modpackFile = ref<File | null>(null)
const modpackFilePath = ref<string | null>(null)
// Modpack search state (persisted across stage navigation)
const modpackSearchProjectId = ref<string | undefined>()
const modpackSearchVersionId = ref<string | undefined>()
const modpackSearchOptions = ref<ComboboxOption<string>[]>([])
const modpackVersionOptions = ref<ComboboxOption<string>[]>([])
const modpackSearchHits = ref<Record<string, ModpackSearchHit>>({})
// Import state (instance flow only)
const importLaunchers = ref<ImportableLauncher[]>([])
const importSelectedInstances = ref<Record<string, Set<string>>>({})
const importSearchQuery = ref('')
const hardReset = ref(isInitialSetup)
const loading = ref(false)
// hideLoaderChips: hides the entire loader chips section (only for vanilla world type in world/server flows)
const hideLoaderChips = computed(() => setupType.value === 'vanilla')
// hideLoaderVersion: hides the loader version section (vanilla world type OR vanilla selected as loader chip)
const hideLoaderVersion = computed(
() => setupType.value === 'vanilla' || selectedLoader.value === 'vanilla',
)
function reset(instanceCount?: number) {
setupType.value = null
isImportMode.value = false
worldCounter++
worldName.value = flowType === 'world' ? `World ${worldCounter}` : ''
if (instanceCount != null) {
instanceCounter = instanceCount
}
instanceCounter++
gamemode.value = 'survival'
difficulty.value = 'normal'
worldSeed.value = ''
worldTypeOption.value = 'minecraft:normal'
generateStructures.value = true
generatorSettingsMode.value = 'default'
generatorSettingsCustom.value = ''
// Instance-specific
instanceName.value = flowType === 'instance' ? `New instance (${instanceCounter})` : ''
instanceIconUrl.value = null
instanceIcon.value = null
instanceIconPath.value = null
selectedLoader.value = null
selectedGameVersion.value = null
loaderVersionType.value = 'stable'
selectedLoaderVersion.value = null
showSnapshots.value = false
modpackSelection.value = null
modpackFile.value = null
modpackFilePath.value = null
modpackSearchProjectId.value = undefined
modpackSearchVersionId.value = undefined
modpackSearchOptions.value = []
modpackVersionOptions.value = []
modpackSearchHits.value = {}
// Import state
importLaunchers.value = []
importSelectedInstances.value = {}
importSearchQuery.value = ''
hardReset.value = isInitialSetup
loading.value = false
}
function setSetupType(type: SetupType) {
debug('setSetupType:', type)
isImportMode.value = false
setupType.value = type
if (type === 'modpack') {
modal.value?.setStage('modpack')
} else {
// both custom and vanilla go to custom-setup
// vanilla just hides loader chips via hideLoaderChips computed
modal.value?.setStage('custom-setup')
}
}
function setImportMode() {
isImportMode.value = true
setupType.value = null
modal.value?.setStage('import-instance')
}
function browseModpacks() {
modal.value?.hide()
emit.browseModpacks()
}
function finish() {
debug('finish() called, state:', {
setupType: setupType.value,
selectedLoader: selectedLoader.value,
selectedGameVersion: selectedGameVersion.value,
selectedLoaderVersion: selectedLoaderVersion.value,
modpackSelection: modpackSelection.value,
hasModpackFile: !!modpackFile.value,
})
loading.value = true
emit.create(contextValue)
}
function buildProperties(): Archon.Content.v1.PropertiesFields {
const isHardcore = gamemode.value === 'hardcore'
const known: Archon.Content.v1.KnownPropertiesFields = {
gamemode: isHardcore ? 'survival' : gamemode.value,
hardcore: isHardcore ? 'true' : 'false',
difficulty: difficulty.value,
level_seed: worldSeed.value || null,
level_type: worldTypeOption.value,
generate_structures: String(generateStructures.value),
}
if (generatorSettingsMode.value === 'flat') {
known.generator_settings = ''
} else if (generatorSettingsMode.value === 'custom' && generatorSettingsCustom.value) {
known.generator_settings = generatorSettingsCustom.value
}
return { known }
}
const searchModpacks = options.searchModpacks!
const getProjectVersions = options.getProjectVersions!
const resolvedStageConfigs = disableClose
? stageConfigs.map((stage) => ({ ...stage, disableClose: true }))
: stageConfigs
const contextValue: CreationFlowContextValue = {
flowType,
availableLoaders,
showSnapshotToggle,
disableClose,
isInitialSetup,
initialLoader,
initialGameVersion,
setupType,
isImportMode,
worldName,
gamemode,
difficulty,
worldSeed,
worldTypeOption,
generateStructures,
generatorSettingsMode,
generatorSettingsCustom,
instanceName,
instanceIcon,
instanceIconUrl,
instanceIconPath,
selectedLoader,
selectedGameVersion,
loaderVersionType,
selectedLoaderVersion,
hideLoaderChips,
hideLoaderVersion,
showSnapshots,
modpackSelection,
modpackFile,
modpackFilePath,
modpackSearchProjectId,
modpackSearchVersionId,
modpackSearchOptions,
modpackVersionOptions,
modpackSearchHits,
importLaunchers,
importSelectedInstances,
importSearchQuery,
hardReset,
loading,
modal,
stageConfigs: resolvedStageConfigs,
onBack,
reset,
setSetupType,
setImportMode,
browseModpacks,
finish,
buildProperties,
searchModpacks,
getProjectVersions,
}
return contextValue
}