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>

apps/app-frontend/src/providers/server-install.ts

@@ -0,0 +1,368 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { AbstractPopupNotificationManager } from '@modrinth/ui'
+import { createContext } from '@modrinth/ui'
+import { type Ref, ref } from 'vue'
+import type { Router } from 'vue-router'
+
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_project_v3, get_version } from '@/helpers/cache.js'
+import { install_to_existing_profile } from '@/helpers/pack.js'
+import { create, edit, edit_icon, get, install as installProfile, list } from '@/helpers/profile.js'
+import type { GameInstance } from '@/helpers/types'
+import { start_join_server } from '@/helpers/worlds.ts'
+import { handleSevereError } from '@/store/error.js'
+import { ensureManagedServerWorldExists, getServerAddress } from '@/store/install.js'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface ModalRef<TShow extends (...args: any[]) => void = () => void> {
+	show: TShow
+	hide: () => void
+}
+
+export interface ServerInstallContext {
+	installingServerProjects: Ref<string[]>
+	startInstallingServer: (projectId: string) => void
+	stopInstallingServer: (projectId: string) => void
+	isServerInstalling: (projectId: string) => boolean
+	installServerProject: (serverProjectId: string) => Promise<void>
+	playServerProject: (projectId: string) => Promise<void>
+	setInstallToPlayModal: (
+		ref: ModalRef<
+			(
+				project: Labrinth.Projects.v3.Project,
+				modpackVersionId: string | null,
+				callback?: () => void,
+			) => void
+		>,
+	) => void
+	setUpdateToPlayModal: (
+		ref: ModalRef<
+			(instance: GameInstance, activeVersionId: string | null, callback?: () => void) => void
+		>,
+	) => void
+	setAddServerToInstanceModal: (
+		ref: ModalRef<(serverName: string, serverAddress: string) => void>,
+	) => void
+	showAddServerToInstanceModal: (serverName: string, serverAddress: string) => void
+}
+
+export const [injectServerInstall, provideServerInstall] = createContext<ServerInstallContext>(
+	'root',
+	'serverInstall',
+)
+
+export function createServerInstall(opts: {
+	router: Router
+	handleError: (err: unknown) => void
+	popupNotificationManager: AbstractPopupNotificationManager
+}): ServerInstallContext {
+	const installingServerProjects = ref<string[]>([])
+
+	let installToPlayModalRef: ModalRef<
+		(
+			project: Labrinth.Projects.v3.Project,
+			modpackVersionId: string | null,
+			callback?: () => void,
+		) => void
+	> | null = null
+	let updateToPlayModalRef: ModalRef<
+		(instance: GameInstance, activeVersionId: string | null, callback?: () => void) => void
+	> | null = null
+	let addServerToInstanceModalRef: ModalRef<
+		(serverName: string, serverAddress: string) => void
+	> | null = null
+
+	function startInstallingServer(projectId: string) {
+		if (!installingServerProjects.value.includes(projectId)) {
+			installingServerProjects.value.push(projectId)
+		}
+	}
+
+	function stopInstallingServer(projectId: string) {
+		installingServerProjects.value = installingServerProjects.value.filter((id) => id !== projectId)
+	}
+
+	function isServerInstalling(projectId: string) {
+		return installingServerProjects.value.includes(projectId)
+	}
+
+	async function joinServer(profilePath: string, serverAddress: string | null) {
+		if (!serverAddress) return
+		await start_join_server(profilePath, serverAddress)
+	}
+
+	async function findInstalledInstance(projectId: string) {
+		const packs = await list()
+		return packs.find((pack) => pack.linked_data?.project_id === projectId) ?? null
+	}
+
+	async function createVanillaInstance(
+		project: Labrinth.Projects.v2.Project,
+		gameVersion: string,
+		serverAddress: string | null,
+	) {
+		const profilePath = await create(
+			project.title,
+			gameVersion,
+			'vanilla',
+			null,
+			project.icon_url ?? null,
+			false,
+			{
+				project_id: project.id,
+				version_id: '',
+				locked: true,
+			},
+		)
+
+		await ensureManagedServerWorldExists(profilePath, project.title, serverAddress)
+
+		return profilePath
+	}
+
+	async function updateVanillaGameVersion(instance: GameInstance, targetGameVersion: string) {
+		if (instance.game_version === targetGameVersion) return
+
+		await edit(instance.path, { game_version: targetGameVersion })
+		await installProfile(instance.path, false)
+	}
+
+	function showModpackInstallSuccess(project: GameInstance, serverAddress: string | null) {
+		opts.popupNotificationManager.addPopupNotification({
+			title: 'Install complete',
+			text: `${project.name} is installed and ready to play.`,
+			type: 'success',
+			buttons: [
+				...(serverAddress
+					? [
+							{
+								label: 'Launch game',
+								action: async () => {
+									try {
+										await joinServer(project.path, serverAddress)
+										trackEvent('InstanceStart', {
+											loader: project.loader,
+											game_version: project.game_version,
+											source: 'ServerProject',
+										})
+									} catch (err) {
+										handleSevereError(err, { profilePath: project.path })
+									}
+								},
+								color: 'brand' as const,
+							},
+						]
+					: []),
+				{
+					label: 'Instance',
+					action: () => opts.router.push(`/instance/${encodeURIComponent(project.path)}`),
+				},
+			],
+			autoCloseMs: null,
+		})
+	}
+
+	function showUpdateSuccess(instance: GameInstance, serverAddress: string | null) {
+		opts.popupNotificationManager.addPopupNotification({
+			title: 'Update complete',
+			text: `${instance.name} has been updated and is ready to play.`,
+			type: 'success',
+			buttons: [
+				...(serverAddress
+					? [
+							{
+								label: 'Launch game',
+								action: async () => {
+									try {
+										if (serverAddress) await start_join_server(instance.path, serverAddress)
+										trackEvent('InstanceStart', {
+											loader: instance.loader,
+											game_version: instance.game_version,
+											source: 'ServerProject',
+										})
+									} catch (err) {
+										handleSevereError(err, { profilePath: instance.path })
+									}
+								},
+								color: 'brand' as const,
+							},
+						]
+					: []),
+				{
+					label: 'Instance',
+					action: () => opts.router.push(`/instance/${encodeURIComponent(instance.path)}`),
+				},
+			],
+			autoCloseMs: null,
+		})
+	}
+
+	/**
+	 * Server projects that use modpack content have linked_data.project_id as
+	 * the server project id and linked_data.version_id as the modpack content version id.
+	 * The modpack content version can be of the same server project, or from a different project.
+	 */
+	async function installServerProject(serverProjectId: string) {
+		const [project, projectV3] = await Promise.all([
+			get_project(serverProjectId, 'bypass'),
+			get_project_v3(serverProjectId, 'bypass'),
+		])
+
+		const serverAddress = getServerAddress(projectV3?.minecraft_java_server)
+
+		const content = projectV3?.minecraft_java_server?.content
+		if (!content || content.kind !== 'modpack') return
+
+		const contentVersionId = content.version_id
+		const contentVersion = await get_version(contentVersionId, 'bypass')
+		const contentProjectId = contentVersion.project_id
+		const gameVersion = contentVersion.game_versions?.[0] ?? ''
+
+		const profilePath = await create(
+			project.title,
+			gameVersion,
+			'vanilla',
+			null,
+			project.icon_url,
+			true,
+			{
+				project_id: serverProjectId,
+				version_id: contentVersionId,
+				locked: true,
+			},
+		)
+
+		// Save the icon path before pack install overwrites it
+		const profileBeforeInstall = await get(profilePath)
+		const originalIconPath = profileBeforeInstall?.icon_path ?? null
+
+		await install_to_existing_profile(
+			contentProjectId,
+			contentVersionId,
+			project.title,
+			profilePath,
+		)
+
+		// Pack install overwrites name, icon, and linked_data with the content project's values.
+		// Restore them to point to the server project.
+		await edit(profilePath, {
+			name: project.title,
+			linked_data: {
+				project_id: serverProjectId,
+				version_id: contentVersionId,
+				locked: true,
+			},
+		})
+		await edit_icon(profilePath, originalIconPath)
+
+		await ensureManagedServerWorldExists(profilePath, project.title, serverAddress)
+	}
+
+	/**
+	 * Handles logic when clicking "Play" on a server project. This includes:
+	 * - Checking if need to install modpack content. If so, opens install to play modal
+	 * - Checking if need to update modpack content. If so, open update to play modal
+	 * - Checking if need to create instance for vanilla server. If so, creates instance.
+	 * - Adding server to worlds list if not already there
+	 * - Joining server
+	 */
+	async function playServerProject(projectId: string) {
+		const [project, projectV3] = await Promise.all([
+			get_project(projectId, 'bypass'),
+			get_project_v3(projectId, 'bypass'),
+		])
+
+		if (projectV3?.minecraft_server == null) {
+			console.warn('playServerProject failed: project is not a server project')
+			return
+		}
+
+		const content = projectV3?.minecraft_java_server?.content
+		const serverAddress = getServerAddress(projectV3?.minecraft_java_server)
+		const isVanilla = content?.kind === 'vanilla'
+		const isModpack = content?.kind === 'modpack'
+		const modpackVersionId = content?.version_id ?? null
+		const recommendedGameVersion = content?.recommended_game_version
+
+		let instance = await findInstalledInstance(project.id)
+
+		if (isVanilla && !instance) {
+			if (installingServerProjects.value.includes(projectId)) return
+			startInstallingServer(projectId)
+			try {
+				const path = await createVanillaInstance(project, recommendedGameVersion, serverAddress)
+				if (path) {
+					instance = await get(path)
+					if (instance) showModpackInstallSuccess(instance, serverAddress)
+				}
+			} finally {
+				stopInstallingServer(projectId)
+			}
+			return
+		}
+		if (isModpack && !instance) {
+			installToPlayModalRef?.show(projectV3, modpackVersionId, async () => {
+				const newInstance = await findInstalledInstance(project.id)
+				if (!newInstance) return
+				showModpackInstallSuccess(newInstance, serverAddress)
+			})
+			return
+		}
+
+		if (!instance) return
+
+		await ensureManagedServerWorldExists(instance.path, project.title, serverAddress)
+
+		// Update existing instance if needed
+		if (isModpack && instance.linked_data?.version_id !== modpackVersionId) {
+			updateToPlayModalRef?.show(instance, modpackVersionId, () => {
+				showUpdateSuccess(instance, serverAddress)
+			})
+			return
+		}
+		if (isVanilla && instance.game_version !== recommendedGameVersion) {
+			if (installingServerProjects.value.includes(projectId)) return
+			startInstallingServer(projectId)
+			try {
+				await updateVanillaGameVersion(instance, recommendedGameVersion)
+				showUpdateSuccess(instance, serverAddress)
+			} finally {
+				stopInstallingServer(projectId)
+			}
+			return
+		}
+
+		// Join server
+		try {
+			await joinServer(instance.path, serverAddress)
+			trackEvent('InstanceStart', {
+				loader: instance.loader,
+				game_version: instance.game_version,
+				source: 'ServerProject',
+			})
+		} catch (err) {
+			handleSevereError(err, { profilePath: instance.path })
+		}
+	}
+
+	return {
+		installingServerProjects,
+		startInstallingServer,
+		stopInstallingServer,
+		isServerInstalling,
+		installServerProject,
+		playServerProject,
+		setInstallToPlayModal(ref) {
+			installToPlayModalRef = ref
+		},
+		setUpdateToPlayModal(ref) {
+			updateToPlayModalRef = ref
+		},
+		setAddServerToInstanceModal(ref) {
+			addServerToInstanceModalRef = ref
+		},
+		showAddServerToInstanceModal(serverName: string, serverAddress: string) {
+			addServerToInstanceModalRef?.show(serverName, serverAddress)
+		},
+	}
+}