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 20:24:32 +00:00
committed by GitHub
parent f0224dfff7
commit 7d92e4ec7f
302 changed files with 20016 additions and 12142 deletions

View File

@@ -0,0 +1,70 @@
import { onBeforeUnmount, ref, watch } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
export type BulkOperationType = 'enable' | 'disable' | 'delete' | 'update'
export function useBulkOperation() {
const isBulkOperating = ref(false)
const bulkProgress = ref(0)
const bulkTotal = ref(0)
const bulkOperation = ref<BulkOperationType | null>(null)
async function runBulk<T>(
operation: BulkOperationType,
items: T[],
fn: (item: T) => Promise<void>,
options?: { delayMs?: number; onComplete?: () => void },
) {
const delayMs = options?.delayMs ?? 250
isBulkOperating.value = true
bulkOperation.value = operation
bulkTotal.value = items.length
bulkProgress.value = 0
try {
for (const item of items) {
await fn(item)
bulkProgress.value++
if (delayMs > 0 && bulkProgress.value < items.length) {
await new Promise((resolve) => setTimeout(resolve, delayMs))
}
}
} finally {
options?.onComplete?.()
isBulkOperating.value = false
bulkOperation.value = null
bulkProgress.value = 0
bulkTotal.value = 0
}
}
function handleBeforeUnload(e: BeforeUnloadEvent) {
if (isBulkOperating.value) {
e.preventDefault()
return ''
}
}
if (typeof window !== 'undefined') {
watch(isBulkOperating, (operating) => {
if (operating) {
window.addEventListener('beforeunload', handleBeforeUnload)
} else {
window.removeEventListener('beforeunload', handleBeforeUnload)
}
})
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', handleBeforeUnload)
})
onBeforeRouteLeave(() => {
if (isBulkOperating.value) {
return window.confirm('A bulk operation is in progress. Are you sure you want to leave?')
}
return true
})
}
return { isBulkOperating, bulkProgress, bulkTotal, bulkOperation, runBulk }
}

View File

@@ -0,0 +1,21 @@
import { ref } from 'vue'
export function useChangingItems() {
const changingItems = ref(new Set<string>())
function markChanging(id: string) {
changingItems.value = new Set([...changingItems.value, id])
}
function unmarkChanging(id: string) {
const next = new Set(changingItems.value)
next.delete(id)
changingItems.value = next
}
function isChanging(id: string): boolean {
return changingItems.value.has(id)
}
return { changingItems, markChanging, unmarkChanging, isChanging }
}

View File

@@ -0,0 +1,98 @@
import type { Ref } from 'vue'
import { computed, ref, watch } from 'vue'
import type { ContentItem } from '../types'
const CLIENT_ONLY_ENVIRONMENTS = new Set([
'client_only',
'client_only_server_optional',
'singleplayer_only',
])
export function isClientOnlyEnvironment(env?: string | null): boolean {
return !!env && CLIENT_ONLY_ENVIRONMENTS.has(env)
}
export interface ContentFilterOption {
id: string
label: string
}
export interface ContentFilterConfig {
showTypeFilters?: boolean
showUpdateFilter?: boolean
showClientOnlyFilter?: boolean
isPackLocked?: Ref<boolean>
formatProjectType?: (type: string) => string
}
export function useContentFilters(items: Ref<ContentItem[]>, config?: ContentFilterConfig) {
const selectedFilters = ref<string[]>([])
const filterOptions = computed<ContentFilterOption[]>(() => {
const options: ContentFilterOption[] = []
if (config?.showTypeFilters) {
const frequency = items.value.reduce((map: Record<string, number>, item) => {
map[item.project_type] = (map[item.project_type] || 0) + 1
return map
}, {})
const types = Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a])
for (const type of types) {
const label = config.formatProjectType ? config.formatProjectType(type) + 's' : type + 's'
options.push({ id: type, label })
}
}
if (
config?.showUpdateFilter &&
!config?.isPackLocked?.value &&
items.value.some((m) => m.has_update)
) {
options.push({ id: 'updates', label: 'Updates' })
}
if (
config?.showClientOnlyFilter &&
items.value.some((m) => isClientOnlyEnvironment(m.environment))
) {
options.push({ id: 'client-only', label: 'Client-only' })
}
if (items.value.some((m) => !m.enabled)) {
options.push({ id: 'disabled', label: 'Disabled' })
}
return options
})
watch(filterOptions, () => {
selectedFilters.value = selectedFilters.value.filter((f) =>
filterOptions.value.some((opt) => opt.id === f),
)
})
function toggleFilter(filterId: string) {
const index = selectedFilters.value.indexOf(filterId)
if (index === -1) {
selectedFilters.value.push(filterId)
} else {
selectedFilters.value.splice(index, 1)
}
}
function applyFilters(source: ContentItem[]): ContentItem[] {
if (selectedFilters.value.length === 0) return source
return source.filter((item) => {
for (const filter of selectedFilters.value) {
if (filter === 'updates' && item.has_update) return true
if (filter === 'disabled' && !item.enabled) return true
if (filter === 'client-only' && isClientOnlyEnvironment(item.environment)) return true
if (item.project_type === filter) return true
}
return false
})
}
return { selectedFilters, filterOptions, toggleFilter, applyFilters }
}

View File

@@ -0,0 +1,25 @@
import Fuse from 'fuse.js'
import type { Ref } from 'vue'
import { ref, watchSyncEffect } from 'vue'
export function useContentSearch<T>(
items: Ref<T[]>,
keys: string[],
options?: { threshold?: number; distance?: number },
) {
const searchQuery = ref('')
const fuse = new Fuse<T>([], {
keys,
threshold: options?.threshold ?? 0.4,
distance: options?.distance ?? 100,
})
watchSyncEffect(() => fuse.setCollection(items.value))
function search(source: T[]): T[] {
const query = searchQuery.value.trim()
if (!query) return source
return fuse.search(query).map(({ item }) => item)
}
return { searchQuery, search }
}

View File

@@ -0,0 +1,34 @@
import type { Ref } from 'vue'
import { computed, ref, watch } from 'vue'
import type { ContentItem } from '../types'
export function useContentSelection(
items: Ref<ContentItem[]>,
getItemId: (item: ContentItem) => string,
) {
const selectedIds = ref<string[]>([])
const selectedItems = computed(() =>
items.value.filter((item) => selectedIds.value.includes(getItemId(item))),
)
watch(items, (newItems) => {
if (selectedIds.value.length === 0) return
const validIds = new Set(newItems.map(getItemId))
const pruned = selectedIds.value.filter((id) => validIds.has(id))
if (pruned.length !== selectedIds.value.length) {
selectedIds.value = pruned
}
})
function clearSelection() {
selectedIds.value = []
}
function removeFromSelection(id: string) {
selectedIds.value = selectedIds.value.filter((i) => i !== id)
}
return { selectedIds, selectedItems, clearSelection, removeFromSelection }
}

View File

@@ -0,0 +1,6 @@
export * from './bulk-operations'
export * from './changing-items'
export * from './content-filtering'
export * from './content-search'
export * from './content-selection'
export * from './use-inline-backup'

View File

@@ -0,0 +1,235 @@
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import {
injectAppBackup,
injectModrinthClient,
injectModrinthServerContext,
injectNotificationManager,
} from '#ui/providers/'
export function useInlineBackup(backupName: string | (() => string)) {
const serverCtx = injectModrinthServerContext(null)
const appBackup = injectAppBackup(null)
if (!serverCtx) {
if (appBackup) {
const isBackingUp = ref(false)
const backupFailed = ref(false)
const backupComplete = ref(false)
return {
available: true as const,
isServer: false as const,
isBackingUp,
isCancelling: ref(false),
backupFailed,
backupComplete,
backupCancelled: ref(false),
externalBackupInProgress: computed(() => false),
startBackup: async () => {
isBackingUp.value = true
backupFailed.value = false
backupComplete.value = false
try {
await appBackup.createBackup()
backupComplete.value = true
} catch {
backupFailed.value = true
} finally {
isBackingUp.value = false
}
},
cancelBackup: async () => {},
}
}
return {
available: false as const,
isServer: false as const,
isBackingUp: ref(false),
isCancelling: ref(false),
backupFailed: ref(false),
backupComplete: ref(false),
backupCancelled: ref(false),
externalBackupInProgress: ref(false),
startBackup: async () => {},
cancelBackup: async () => {},
}
}
const client = injectModrinthClient()
const { addNotification } = injectNotificationManager()
const { serverId, worldId, backupsState, markBackupCancelled } = serverCtx
const isBackingUp = ref(false)
const backupFailed = ref(false)
const backupComplete = ref(false)
const backupCancelled = ref(false)
const isCancelling = ref(false)
const createdBackupId = ref<string | null>(null)
const externalBackupInProgress = computed(() => {
for (const [id, entry] of backupsState.entries()) {
if (id !== createdBackupId.value && entry.create?.state === 'ongoing') return true
}
return false
})
// Watch backupsState for websocket progress events from Kyros
watch(
() => {
if (!createdBackupId.value) return null
return backupsState.get(createdBackupId.value)
},
(entry) => {
if (!entry?.create) return
if (entry.create.state === 'done') {
isBackingUp.value = false
backupComplete.value = true
} else if (entry.create.state === 'cancelled') {
isBackingUp.value = false
isCancelling.value = false
backupCancelled.value = true
} else if (entry.create.state === 'failed') {
isBackingUp.value = false
backupFailed.value = true
}
},
{ deep: true },
)
// Fallback: poll the REST API in case websocket events don't arrive
let pollTimer: ReturnType<typeof setInterval> | null = null
function stopPolling() {
if (pollTimer !== null) {
clearInterval(pollTimer)
pollTimer = null
}
}
async function pollBackupStatus(backupId: string) {
if (!isBackingUp.value) {
stopPolling()
return
}
try {
const backup = await client.archon.backups_v1.get(serverId, worldId.value!, backupId)
if (!backup.ongoing) {
stopPolling()
if (backup.interrupted) {
isBackingUp.value = false
backupFailed.value = true
} else {
isBackingUp.value = false
backupComplete.value = true
}
}
} catch {
stopPolling()
isBackingUp.value = false
backupFailed.value = true
}
}
async function startBackup() {
if (!worldId.value) return
const name = typeof backupName === 'function' ? backupName() : backupName
isBackingUp.value = true
backupFailed.value = false
backupComplete.value = false
backupCancelled.value = false
isCancelling.value = false
createdBackupId.value = null
try {
const { id } = await client.archon.backups_v1.create(serverId, worldId.value, { name })
createdBackupId.value = id
stopPolling()
pollTimer = setInterval(() => pollBackupStatus(id), 3000)
} catch (error) {
isBackingUp.value = false
backupFailed.value = true
const message = error instanceof Error ? error.message : String(error)
const isRateLimit = message.includes('429')
addNotification({
type: 'error',
title: 'Error creating backup',
text: isRateLimit ? "You're creating backups too fast." : message,
})
}
}
async function cancelBackup() {
if (!worldId.value || !createdBackupId.value || !isBackingUp.value) return
isCancelling.value = true
stopPolling()
markBackupCancelled(createdBackupId.value)
try {
await client.archon.backups_v1.delete(serverId, worldId.value, createdBackupId.value)
isBackingUp.value = false
isCancelling.value = false
backupCancelled.value = true
addNotification({
type: 'info',
title: 'Backup cancelled',
text: 'The backup has been cancelled. You can create a new one or proceed without a backup.',
})
} catch {
isCancelling.value = false
}
}
function handleBeforeUnload(e: BeforeUnloadEvent) {
if (isBackingUp.value) {
e.preventDefault()
return ''
}
}
if (typeof window !== 'undefined') {
watch(isBackingUp, (operating) => {
if (operating) {
window.addEventListener('beforeunload', handleBeforeUnload)
} else {
window.removeEventListener('beforeunload', handleBeforeUnload)
}
})
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', handleBeforeUnload)
stopPolling()
})
onBeforeRouteLeave(() => {
if (isBackingUp.value) {
return window.confirm('A backup is being created. Are you sure you want to leave?')
}
return true
})
}
return {
available: true as const,
isServer: true as const,
isBackingUp,
isCancelling,
backupFailed,
backupComplete,
backupCancelled,
externalBackupInProgress,
startBackup,
cancelBackup,
}
}