MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: clean up browse shared layout logic + introduce queuing (#6030)

Browse Source 
* feat: clean up edge case behaviour and add queued to install logic

* fix: remove version choice modal

* feat: queued flow

* feat: standardize headers in app on proj pages

* fix: clear btn

* feat: installing floating popup

* fix: lint

* fix: onboarding/reset logic change for modpacks

* qa: big ol qa

* fix: lint

* fix: lint

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Calum H.
2026-05-09 20:01:23 +01:00
committed by GitHub
parent 671f6d264a
commit a79b8e0777
40 changed files with 3726 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app-frontend/src/App.vue
View File

@@ -1571,11 +1571,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
.app-grid-navbar {
grid-area: nav;
position: relative;
z-index: 2;
}
.app-grid-statusbar {
grid-area: status;
padding-right: var(--window-controls-width, 0px);
position: relative;
z-index: 2;
}
[data-tauri-drag-region-exclude] {
@@ -1665,7 +1669,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
}
.app-contents::before {
z-index: 1;
z-index: 30;
content: '';
position: fixed;
left: var(--left-bar-width);

332
apps/app-frontend/src/composables/browse/use-app-server-browse.ts Normal file
View File

@@ -0,0 +1,332 @@
import type { Labrinth } from '@modrinth/api-client'
import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
import type { CardAction } from '@modrinth/ui'
import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
import { openUrl } from '@tauri-apps/plugin-opener'
import type { ComputedRef, Ref } from 'vue'
import { onUnmounted, ref, shallowRef } from 'vue'
import type { Router } from 'vue-router'
import { process_listener } from '@/helpers/events'
import { get_by_profile_path } from '@/helpers/process'
import { kill, list as listInstances } from '@/helpers/profile.js'
import type { GameInstance } from '@/helpers/types'
import { add_server_to_profile, getServerLatency } from '@/helpers/worlds'
import { getServerAddress } from '@/store/install.js'
interface BrowseServerInstance {
name: string
path: string
}
interface ContextMenuHandle {
showMenu: (
event: MouseEvent,
result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
options: { name: string }[],
) => void
}
interface ContextMenuOptionClick {
option: 'open_link' | 'copy_link'
item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject
}
export interface UseAppServerBrowseOptions {
instance: Ref<BrowseServerInstance | null>
isFromWorlds: ComputedRef<boolean>
allInstalledIds: ComputedRef<Set<string>>
newlyInstalled: Ref<string[]>
installingServerProjects: Ref<string[]>
playServerProject: (projectId: string) => Promise<void>
showAddServerToInstanceModal: (serverName: string, serverAddress: string) => void
handleError: (error: unknown) => void
router: Router
}
const messages = defineMessages({
addToInstance: {
id: 'app.browse.add-to-instance',
defaultMessage: 'Add to instance',
},
addToInstanceName: {
id: 'app.browse.add-to-instance-name',
defaultMessage: 'Add to {instanceName}',
},
added: {
id: 'app.browse.added',
defaultMessage: 'Added',
},
alreadyAdded: {
id: 'app.browse.already-added',
defaultMessage: 'Already added',
},
})
export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
const { formatMessage } = useVIntl()
const debugLog = useDebugLogger('BrowseServer')
const serverPings = shallowRef<Record<string, number | undefined>>({})
const serverPingCache = new Map<string, number | undefined>()
const pendingServerPings = new Map<string, Promise<number | undefined>>()
const runningServerProjects = ref<Record<string, string>>({})
const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
const contextMenuRef = ref<ContextMenuHandle | null>(null)
let serverPingCacheActive = true
let unlistenProcesses: (() => void) | null = null
async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
debugLog('checkServerRunningStates', { hitCount: hits.length })
const packs = await listInstances().catch((error) => {
options.handleError(error)
return []
})
const newRunning: Record<string, string> = {}
for (const hit of hits) {
const inst = packs.find(
(pack: GameInstance) => pack.linked_data?.project_id === hit.project_id,
)
if (inst) {
const processes = await get_by_profile_path(inst.path).catch(() => [])
if (Array.isArray(processes) && processes.length > 0) {
newRunning[hit.project_id] = inst.path
}
}
}
debugLog('runningServerProjects updated', newRunning)
runningServerProjects.value = newRunning
}
async function handleStopServerProject(projectId: string) {
debugLog('handleStopServerProject', projectId)
const instancePath = runningServerProjects.value[projectId]
if (!instancePath) return
await kill(instancePath).catch(() => {})
const { [projectId]: _, ...rest } = runningServerProjects.value
runningServerProjects.value = rest
}
async function handlePlayServerProject(projectId: string) {
debugLog('handlePlayServerProject', projectId)
await options.playServerProject(projectId)
checkServerRunningStates(lastServerHits.value)
}
async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
const address = getServerAddress(project.minecraft_java_server)
if (!address) return
if (options.instance.value) {
try {
await add_server_to_profile(
options.instance.value.path,
project.name,
address,
'prompt',
project.project_id,
project.minecraft_java_server?.content?.kind,
)
options.newlyInstalled.value.push(project.project_id)
} catch (error) {
options.handleError(error)
}
} else {
options.showAddServerToInstanceModal(project.name, address)
}
}
async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
debugLog('pingServerHits', { hitCount: hits.length })
const pingsToFetch = hits.flatMap((hit) => {
const address = hit.minecraft_java_server?.address
if (!address) return []
return [{ hit, address }]
})
const nextPings = { ...serverPings.value }
for (const { hit, address } of pingsToFetch) {
if (serverPingCache.has(address)) {
nextPings[hit.project_id] = serverPingCache.get(address)
}
}
serverPings.value = nextPings
await Promise.all(
pingsToFetch.map(async ({ hit, address }) => {
if (serverPingCache.has(address)) return
let pending = pendingServerPings.get(address)
if (!pending) {
pending = getServerLatency(address)
.then((latency) => {
if (serverPingCacheActive) serverPingCache.set(address, latency)
return latency
})
.catch((error) => {
console.error(`Failed to ping server ${address}:`, error)
if (serverPingCacheActive) serverPingCache.set(address, undefined)
return undefined
})
.finally(() => {
pendingServerPings.delete(address)
})
pendingServerPings.set(address, pending)
}
const latency = await pending
if (!serverPingCacheActive) return
serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
}),
)
}
function updateServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
lastServerHits.value = hits
pingServerHits(hits)
checkServerRunningStates(hits)
}
function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
const content = project.minecraft_java_server?.content
if (content?.kind === 'modpack') {
const { project_name, project_icon, project_id } = content
if (!project_name) return undefined
return {
name: project_name,
icon: project_icon ?? undefined,
onclick:
project_id !== project.project_id
? () => {
options.router.push(`/project/${project_id}`)
}
: undefined,
showCustomModpackTooltip: project_id === project.project_id,
}
}
return undefined
}
function getServerCardActions(
serverResult: Labrinth.Search.v3.ResultSearchProject,
): CardAction[] {
const isInstalled = options.allInstalledIds.value.has(serverResult.project_id)
if (options.isFromWorlds.value && options.instance.value) {
return [
{
key: 'add-to-instance',
label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
icon: isInstalled ? CheckIcon : PlusIcon,
disabled: isInstalled,
color: 'brand',
type: 'outlined',
onClick: () => handleAddServerToInstance(serverResult),
},
]
}
const actions: CardAction[] = []
actions.push({
key: 'add',
label: '',
icon: isInstalled ? CheckIcon : PlusIcon,
disabled: isInstalled,
circular: true,
tooltip: isInstalled
? formatMessage(messages.alreadyAdded)
: options.instance.value
? formatMessage(messages.addToInstanceName, {
instanceName: options.instance.value.name,
})
: formatMessage(commonMessages.addServerToInstanceButton),
onClick: () => handleAddServerToInstance(serverResult),
})
if (runningServerProjects.value[serverResult.project_id]) {
actions.push({
key: 'stop',
label: formatMessage(commonMessages.stopButton),
icon: StopCircleIcon,
color: 'red',
type: 'outlined',
onClick: () => handleStopServerProject(serverResult.project_id),
})
} else {
const isInstalling = options.installingServerProjects.value.includes(serverResult.project_id)
actions.push({
key: 'play',
label: formatMessage(
isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
),
icon: PlayIcon,
disabled: isInstalling,
color: 'brand',
type: 'outlined',
onClick: () => handlePlayServerProject(serverResult.project_id),
})
}
return actions
}
function handleRightClick(
event: MouseEvent,
result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
) {
contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
}
function handleOptionsClick(args: ContextMenuOptionClick) {
const url = getProjectUrl(args.item)
switch (args.option) {
case 'open_link':
openUrl(url)
break
case 'copy_link':
navigator.clipboard.writeText(url)
break
}
}
process_listener((event: { event: string; profile_path_id: string }) => {
debugLog('process event', event)
if (event.event === 'finished') {
const projectId = Object.entries(runningServerProjects.value).find(
([, path]) => path === event.profile_path_id,
)?.[0]
if (projectId) {
const { [projectId]: _, ...rest } = runningServerProjects.value
runningServerProjects.value = rest
}
}
})
.then((unlisten) => {
unlistenProcesses = unlisten
})
.catch(options.handleError)
onUnmounted(() => {
serverPingCacheActive = false
unlistenProcesses?.()
serverPingCache.clear()
pendingServerPings.clear()
})
return {
serverPings,
contextMenuRef,
updateServerHits,
getServerModpackContent,
getServerCardActions,
handleRightClick,
handleOptionsClick,
}
}
function getProjectUrl(
item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
) {
const projectType = 'project_types' in item ? item.project_types?.[0] : item.project_type
return `https://modrinth.com/${projectType ?? 'project'}/${item.slug ?? item.project_id}`
}

33
apps/app-frontend/src/locales/en-US/index.json
View File

@@ -104,11 +104,11 @@
"app.auth-servers.unreachable.header": {
"message": "Cannot reach authentication servers"
},
"app.browse.add-server-to-instance": {
"message": "Add server to instance"
},
"app.browse.add-servers-to-instance": {
"message": "Add servers to your instance"
"message": "Adding server to instance"
},
"app.browse.add-to-an-instance": {
"message": "Add to an instance"
},
"app.browse.add-to-instance": {
"message": "Add to instance"
@@ -122,6 +122,9 @@
"app.browse.already-added": {
"message": "Already added"
},
"app.browse.back-to-instance": {
"message": "Back to instance"
},
"app.browse.discover-content": {
"message": "Discover content"
},
@@ -131,20 +134,11 @@
"app.browse.hide-added-servers": {
"message": "Hide already added servers"
},
"app.browse.hide-installed-content": {
"message": "Hide already installed content"
},
"app.browse.install-content-to-instance": {
"message": "Install content to instance"
},
"app.browse.project-type.modpacks": {
"message": "Modpacks"
},
"app.browse.server.install": {
"message": "Install"
},
"app.browse.server.installed": {
"message": "Installed"
"app.browse.server-instance-content-warning": {
"message": "Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content."
},
"app.browse.server.installing": {
"message": "Installing"
@@ -305,6 +299,15 @@
"app.modal.update-to-play.update-required-description": {
"message": "An update is required to play {name}. Please update to the latest version to launch the game."
},
"app.project.install-button.already-installed": {
"message": "This project is already installed"
},
"app.project.install-context.back-to-browse": {
"message": "Back to browse"
},
"app.project.install-context.install-content-to-instance": {
"message": "Install content to instance"
},
"app.settings.developer-mode-enabled": {
"message": "Developer mode enabled."
},

622
apps/app-frontend/src/pages/Browse.vue
View File

@@ -5,46 +5,49 @@ import {
ClipboardCopyIcon,
ExternalIcon,
GlobeIcon,
PlayIcon,
PlusIcon,
SpinnerIcon,
StopCircleIcon,
} from '@modrinth/assets'
import type { CardAction, ProjectType, Tags } from '@modrinth/ui'
import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
import {
BrowsePageLayout,
BrowseSidebar,
commonMessages,
CreationFlowModal,
defineMessages,
getLatestMatchingInstallVersion,
getSelectedInstallPreferences,
getTargetInstallPreferences,
injectNotificationManager,
preferencesDiffer,
provideBrowseManager,
requestInstall,
useBrowseSearch,
useDebugLogger,
useVIntl,
} from '@modrinth/ui'
import { useQueryClient } from '@tanstack/vue-query'
import { convertFileSrc } from '@tauri-apps/api/core'
import { openUrl } from '@tauri-apps/plugin-opener'
import type { Ref } from 'vue'
import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
import { computed, ref, watch } from 'vue'
import type { LocationQuery } from 'vue-router'
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
import ContextMenu from '@/components/ui/ContextMenu.vue'
import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
import { process_listener } from '@/helpers/events'
import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
import {
get_project,
get_project_v3,
get_search_results_v3,
get_version_many,
} from '@/helpers/cache.js'
import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
import { get_by_profile_path } from '@/helpers/process'
import {
get as getInstance,
get_installed_project_ids as getInstalledProjectIds,
kill,
list as listInstances,
} from '@/helpers/profile.js'
import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
import type { GameInstance } from '@/helpers/types'
import { add_server_to_profile, get_profile_worlds, getServerLatency } from '@/helpers/worlds'
import { get_profile_worlds } from '@/helpers/worlds'
import { injectContentInstall } from '@/providers/content-install'
import { injectServerInstall } from '@/providers/server-install'
import {
@@ -52,7 +55,6 @@ import {
provideServerInstallContent,
} from '@/providers/setup/server-install-content'
import { useBreadcrumbs } from '@/store/breadcrumbs'
import { getServerAddress } from '@/store/install.js'
const { handleError } = injectNotificationManager()
const { formatMessage } = useVIntl()
@@ -76,15 +78,27 @@ const {
effectiveServerWorldId,
serverContextServerData,
serverContentProjectIds,
queuedServerInstallProjectIds,
queuedServerInstallCount,
selectedServerInstallProjects,
isInstallingQueuedServerInstalls,
queuedInstallProgress,
serverBackUrl,
serverBackLabel,
serverBrowseHeading,
clearQueuedServerInstalls,
removeQueuedServerInstall,
flushQueuedServerInstalls,
discardQueuedServerInstallsAndBack,
installQueuedServerInstallsAndBack,
initServerContext,
watchServerContextChanges,
searchServerModpacks,
getServerProjectVersions,
enforceSetupModpackRoute,
installProjectToServer,
getQueuedServerInstallPlans,
setQueuedServerInstallPlans,
openServerModpackInstallFlow,
onServerFlowBack,
handleServerModpackFlowCreate,
markServerProjectInstalled,
@@ -254,6 +268,7 @@ const instanceFilters = computed(() => {
})
const serverHideInstalled = ref(false)
const hideSelectedServerInstalls = ref(false)
if (route.query.shi) {
serverHideInstalled.value = route.query.shi === 'true'
}
@@ -291,6 +306,12 @@ const serverContextFilters = computed(() => {
filters.push({ type: 'plugin_loader', option: platform })
if (pt === 'mod') filters.push({ type: 'environment', option: 'server' })
if (hideSelectedServerInstalls.value && queuedServerInstallProjectIds.value.size > 0) {
for (const id of queuedServerInstallProjectIds.value) {
filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
}
}
}
if (pt === 'modpack') {
@@ -313,134 +334,24 @@ const combinedProvidedFilters = computed(() =>
isServerContext.value ? serverContextFilters.value : instanceFilters.value,
)
const serverPings = shallowRef<Record<string, number | undefined>>({})
const serverPingCache = new Map<string, number | undefined>()
const pendingServerPings = new Map<string, Promise<number | undefined>>()
let serverPingCacheActive = true
const runningServerProjects = ref<Record<string, string>>({})
async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
debugLog('checkServerRunningStates', { hitCount: hits.length })
const packs = await listInstances()
const newRunning: Record<string, string> = {}
for (const hit of hits) {
const inst = packs.find((p: GameInstance) => p.linked_data?.project_id === hit.project_id)
if (inst) {
const processes = await get_by_profile_path(inst.path).catch(() => [])
if (Array.isArray(processes) && processes.length > 0) {
newRunning[hit.project_id] = inst.path
}
}
}
debugLog('runningServerProjects updated', newRunning)
runningServerProjects.value = newRunning
}
async function handleStopServerProject(projectId: string) {
debugLog('handleStopServerProject', projectId)
const instancePath = runningServerProjects.value[projectId]
if (!instancePath) return
await kill(instancePath).catch(() => {})
const { [projectId]: _, ...rest } = runningServerProjects.value
runningServerProjects.value = rest
}
async function handlePlayServerProject(projectId: string) {
debugLog('handlePlayServerProject', projectId)
await playServerProject(projectId)
checkServerRunningStates(lastServerHits.value)
}
const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
const address = getServerAddress(project.minecraft_java_server)
if (!address) return
if (instance.value) {
try {
await add_server_to_profile(
instance.value.path,
project.name,
address,
'prompt',
project.project_id,
project.minecraft_java_server?.content?.kind,
)
newlyInstalled.value.push(project.project_id)
} catch (err) {
handleError(err as Error)
}
} else {
showAddServerToInstanceModal(project.name, address)
}
}
async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
debugLog('pingServerHits', { hitCount: hits.length })
const pingsToFetch = hits.flatMap((hit) => {
const address = hit.minecraft_java_server?.address
if (!address) return []
return [{ hit, address }]
})
const nextPings = { ...serverPings.value }
for (const { hit, address } of pingsToFetch) {
if (serverPingCache.has(address)) {
nextPings[hit.project_id] = serverPingCache.get(address)
}
}
serverPings.value = nextPings
await Promise.all(
pingsToFetch.map(async ({ hit, address }) => {
if (serverPingCache.has(address)) return
let pending = pendingServerPings.get(address)
if (!pending) {
pending = getServerLatency(address)
.then((latency) => {
if (serverPingCacheActive) serverPingCache.set(address, latency)
return latency
})
.catch((err) => {
console.error(`Failed to ping server ${address}:`, err)
if (serverPingCacheActive) serverPingCache.set(address, undefined)
return undefined
})
.finally(() => {
pendingServerPings.delete(address)
})
pendingServerPings.set(address, pending)
}
const latency = await pending
if (!serverPingCacheActive) return
serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
}),
)
}
const unlistenProcesses = await process_listener(
(e: { event: string; profile_path_id: string }) => {
debugLog('process event', e)
if (e.event === 'finished') {
const projectId = Object.entries(runningServerProjects.value).find(
([, path]) => path === e.profile_path_id,
)?.[0]
if (projectId) {
const { [projectId]: _, ...rest } = runningServerProjects.value
runningServerProjects.value = rest
}
}
},
)
onUnmounted(() => {
serverPingCacheActive = false
unlistenProcesses()
serverPingCache.clear()
pendingServerPings.clear()
const {
serverPings,
contextMenuRef,
updateServerHits,
getServerModpackContent,
getServerCardActions,
handleRightClick,
handleOptionsClick,
} = useAppServerBrowse({
instance,
isFromWorlds,
allInstalledIds,
newlyInstalled,
installingServerProjects,
playServerProject,
showAddServerToInstanceModal,
handleError,
router,
})
const offline = ref(!navigator.onLine)
@@ -454,29 +365,13 @@ window.addEventListener('online', () => {
})
const messages = defineMessages({
addServerToInstance: {
id: 'app.browse.add-server-to-instance',
defaultMessage: 'Add server to instance',
},
addServersToInstance: {
id: 'app.browse.add-servers-to-instance',
defaultMessage: 'Add servers to your instance',
defaultMessage: 'Adding server to instance',
},
addToInstance: {
id: 'app.browse.add-to-instance',
defaultMessage: 'Add to instance',
},
addToInstanceName: {
id: 'app.browse.add-to-instance-name',
defaultMessage: 'Add to {instanceName}',
},
added: {
id: 'app.browse.added',
defaultMessage: 'Added',
},
alreadyAdded: {
id: 'app.browse.already-added',
defaultMessage: 'Already added',
addToAnInstance: {
id: 'app.browse.add-to-an-instance',
defaultMessage: 'Add to an instance',
},
discoverContent: {
id: 'app.browse.discover-content',
@@ -502,26 +397,19 @@ const messages = defineMessages({
id: 'app.browse.hide-added-servers',
defaultMessage: 'Hide already added servers',
},
hideInstalledContent: {
id: 'app.browse.hide-installed-content',
defaultMessage: 'Hide already installed content',
},
installContentToInstance: {
id: 'app.browse.install-content-to-instance',
defaultMessage: 'Install content to instance',
},
installToServer: {
id: 'app.browse.server.install',
defaultMessage: 'Install',
},
installedToServer: {
id: 'app.browse.server.installed',
defaultMessage: 'Installed',
},
installingToServer: {
id: 'app.browse.server.installing',
defaultMessage: 'Installing',
},
backToInstance: {
id: 'app.browse.back-to-instance',
defaultMessage: 'Back to instance',
},
serverInstanceContentWarning: {
id: 'app.browse.server-instance-content-warning',
defaultMessage:
'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.',
},
modLoaderProvidedByInstance: {
id: 'search.filter.locked.instance-loader.title',
defaultMessage: 'Loader is provided by the instance',
@@ -654,46 +542,6 @@ const selectableProjectTypes = computed(() => {
]
})
const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject) => {
const content = project.minecraft_java_server?.content
if (content?.kind === 'modpack') {
const { project_name, project_icon, project_id } = content
if (!project_name) return undefined
return {
name: project_name,
icon: project_icon ?? undefined,
onclick:
project_id !== project.project_id
? () => {
router.push(`/project/${project_id}`)
}
: undefined,
showCustomModpackTooltip: project_id === project.project_id,
}
}
return undefined
}
const contextMenuRef = ref(null)
// @ts-expect-error - no event types
const handleRightClick = (event, result) => {
// @ts-ignore
contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
}
// @ts-expect-error - no event types
const handleOptionsClick = (args) => {
switch (args.option) {
case 'open_link':
openUrl(`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`)
break
case 'copy_link':
navigator.clipboard.writeText(
`https://modrinth.com/${args.item.project_types?.[0] ?? 'project'}/${args.item.slug}`,
)
break
}
}
const installContext = computed(() => {
if (isServerContext.value && serverContextServerData.value) {
return {
@@ -707,6 +555,15 @@ const installContext = computed(() => {
backUrl: serverBackUrl.value,
backLabel: serverBackLabel.value,
heading: serverBrowseHeading.value,
queuedCount: queuedServerInstallCount.value,
selectedProjects: selectedServerInstallProjects.value,
isInstallingSelected: isInstallingQueuedServerInstalls.value,
installProgress: queuedInstallProgress.value,
clearQueued: clearQueuedServerInstalls,
clearSelected: clearQueuedServerInstalls,
onBack: flushQueuedServerInstalls,
discardSelectedAndBack: discardQueuedServerInstallsAndBack,
installSelected: installQueuedServerInstallsAndBack,
}
}
if (instance.value) {
@@ -716,13 +573,13 @@ const installContext = computed(() => {
gameVersion: instance.value.game_version,
iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
backUrl: `/instance/${encodeURIComponent(instance.value.path)}${isFromWorlds.value ? '/worlds' : ''}`,
backLabel: 'Back to instance',
backLabel: formatMessage(messages.backToInstance),
heading: formatMessage(
isFromWorlds.value ? messages.addServersToInstance : messages.installContentToInstance,
isFromWorlds.value ? messages.addServersToInstance : commonMessages.installingContentLabel,
),
warning:
isServerInstance.value && !isFromWorlds.value
? 'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.'
? formatMessage(messages.serverInstanceContentWarning)
: undefined,
}
}
@@ -741,71 +598,82 @@ function setProjectInstalling(projectId: string, installing: boolean) {
installingProjectIds.value = next
}
const serverInstallQueue = {
get: getQueuedServerInstallPlans,
set: setQueuedServerInstallPlans,
}
function getCurrentSelectedInstallPreferences(projectTypeValue: string) {
return getSelectedInstallPreferences({
contentType: projectTypeValue,
selectedFilters: searchState.currentFilters.value,
providedFilters: combinedProvidedFilters.value,
overriddenProvidedFilterTypes: searchState.overriddenProvidedFilterTypes.value,
})
}
function getServerInstallTargetPreferences(contentType: BrowseInstallContentType) {
return getTargetInstallPreferences(
{
gameVersion: serverContextServerData.value?.mc_version,
loader: serverContextServerData.value?.loader,
},
contentType,
)
}
function getInstanceInstallTargetPreferences(projectTypeValue: string) {
return getTargetInstallPreferences(
{
gameVersion: instance.value?.game_version,
loader: instance.value?.loader,
},
projectTypeValue,
)
}
async function getInstallProjectVersions(projectId: string) {
const project = await get_project(projectId, 'must_revalidate')
return (await get_version_many(
project.versions,
'must_revalidate',
)) as Labrinth.Versions.v2.Version[]
}
async function chooseInstanceInstallVersion(
project: Labrinth.Search.v2.ResultSearchProject & Labrinth.Search.v3.ResultSearchProject,
projectTypeValue: string,
) {
const targetInstance = instance.value
if (!targetInstance) {
return { versionId: null as string | null }
}
const selectedPreferences = getCurrentSelectedInstallPreferences(projectTypeValue)
const targetPreferences = getInstanceInstallTargetPreferences(projectTypeValue)
if (!preferencesDiffer(selectedPreferences, targetPreferences)) {
return { versionId: null as string | null }
}
const selectedVersion = getLatestMatchingInstallVersion(
await getInstallProjectVersions(project.project_id),
selectedPreferences,
projectTypeValue,
)
if (!selectedVersion) {
return { versionId: null as string | null }
}
return { versionId: selectedVersion.id }
}
function getCardActions(
result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
currentProjectType: string,
): CardAction[] {
if (currentProjectType === 'server') {
const serverResult = result as Labrinth.Search.v3.ResultSearchProject
const isInstalled = allInstalledIds.value.has(serverResult.project_id)
if (isFromWorlds.value && instance.value) {
return [
{
key: 'add-to-instance',
label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
icon: isInstalled ? CheckIcon : PlusIcon,
disabled: isInstalled,
color: 'brand',
type: 'outlined',
onClick: () => handleAddServerToInstance(serverResult),
},
]
}
const actions: CardAction[] = []
actions.push({
key: 'add',
label: '',
icon: isInstalled ? CheckIcon : PlusIcon,
disabled: isInstalled,
circular: true,
tooltip: isInstalled
? formatMessage(messages.alreadyAdded)
: instance.value
? formatMessage(messages.addToInstanceName, { instanceName: instance.value.name })
: formatMessage(messages.addServerToInstance),
onClick: () => handleAddServerToInstance(serverResult),
})
if (runningServerProjects.value[serverResult.project_id]) {
actions.push({
key: 'stop',
label: formatMessage(commonMessages.stopButton),
icon: StopCircleIcon,
color: 'red',
type: 'outlined',
onClick: () => handleStopServerProject(serverResult.project_id),
})
} else {
const isInstalling = (installingServerProjects.value as string[]).includes(
serverResult.project_id,
)
actions.push({
key: 'play',
label: formatMessage(
isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
),
icon: PlayIcon,
disabled: isInstalling,
color: 'brand',
type: 'outlined',
onClick: () => handlePlayServerProject(serverResult.project_id),
})
}
return actions
return getServerCardActions(result as Labrinth.Search.v3.ResultSearchProject)
}
// Non-server project actions
@@ -817,39 +685,84 @@ function getCardActions(
const isInstalled =
projectResult.installed ||
allInstalledIds.value.has(projectResult.project_id || '') ||
serverContentProjectIds.value.has(projectResult.project_id || '')
serverContentProjectIds.value.has(projectResult.project_id || '') ||
serverContextServerData.value?.upstream?.project_id === projectResult.project_id
const isInstalling = installingProjectIds.value.has(projectResult.project_id)
if (
isServerContext.value &&
['modpack', 'mod', 'plugin', 'datapack'].includes(currentProjectType)
) {
const isQueued = queuedServerInstallProjectIds.value.has(projectResult.project_id)
const isInstallingSelection = isInstallingQueuedServerInstalls.value
const validatingInstall =
isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
const installLabel = isInstalled
? commonMessages.installedLabel
: isQueued
? isInstalling || isInstallingSelection
? validatingInstall
? commonMessages.validatingLabel
: messages.installingToServer
: commonMessages.selectedLabel
: isInstalling || isInstallingSelection
? validatingInstall
? commonMessages.validatingLabel
: messages.installingToServer
: commonMessages.installButton
return [
{
key: 'install',
label: formatMessage(
isInstalling
? messages.installingToServer
: isInstalled
? messages.installedToServer
: messages.installToServer,
),
icon: isInstalled ? CheckIcon : PlusIcon,
iconClass: isInstalling ? 'animate-spin' : undefined,
disabled: isInstalled || isInstalling,
color: 'brand',
label: formatMessage(installLabel),
icon:
isInstalling || isInstallingSelection
? SpinnerIcon
: isQueued || isInstalled
? CheckIcon
: PlusIcon,
iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
disabled: isInstalled || isInstalling || isInstallingSelection,
color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
type: 'outlined',
onClick: async () => {
setProjectInstalling(projectResult.project_id, true)
if (isQueued) {
removeQueuedServerInstall(projectResult.project_id)
return
}
const contentType = currentProjectType as BrowseInstallContentType
const isModpack = contentType === 'modpack'
const shouldShowInstalling = isModpack || !isQueued
if (shouldShowInstalling) {
setProjectInstalling(projectResult.project_id, true)
}
try {
const didInstall = await installProjectToServer(projectResult)
if (didInstall !== false) {
onSearchResultInstalled(projectResult.project_id)
}
await requestInstall({
project: projectResult,
contentType,
mode: isModpack ? 'immediate' : 'queue',
selectedFilters: isModpack ? [] : searchState.currentFilters.value,
providedFilters: isModpack ? [] : combinedProvidedFilters.value,
overriddenProvidedFilterTypes: isModpack
? []
: searchState.overriddenProvidedFilterTypes.value,
targetPreferences: getServerInstallTargetPreferences(contentType),
getProjectVersions: getInstallProjectVersions,
queue: serverInstallQueue,
install: (plan) =>
openServerModpackInstallFlow({
projectId: plan.projectId,
versionId: plan.versionId,
name: plan.project.name,
iconUrl: plan.project.icon_url ?? undefined,
}),
})
} catch (err) {
handleError(err as Error)
} finally {
setProjectInstalling(projectResult.project_id, false)
if (shouldShowInstalling) {
setProjectInstalling(projectResult.project_id, false)
}
}
},
},
@@ -862,13 +775,15 @@ function getCardActions(
return [
{
key: 'install',
label: isInstalling
? 'Installing'
: isInstalled
? 'Installed'
: shouldUseInstallIcon
? 'Install'
: 'Add to an instance',
label: formatMessage(
isInstalling
? messages.installingToServer
: isInstalled
? commonMessages.installedLabel
: shouldUseInstallIcon
? commonMessages.installButton
: messages.addToAnInstance,
),
icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : PlusIcon,
iconClass: isInstalling ? 'animate-spin' : undefined,
disabled: isInstalled || isInstalling,
@@ -876,28 +791,39 @@ function getCardActions(
type: 'outlined',
onClick: async () => {
setProjectInstalling(projectResult.project_id, true)
await installVersion(
projectResult.project_id,
null,
instance.value ? instance.value.path : null,
'SearchCard',
(versionId) => {
try {
const selectedInstall = instance.value
? await chooseInstanceInstallVersion(projectResult, currentProjectType)
: { versionId: null as string | null }
if (selectedInstall === null) {
setProjectInstalling(projectResult.project_id, false)
if (versionId) {
onSearchResultInstalled(projectResult.project_id)
}
},
(profile) => {
router.push(`/instance/${profile}`)
},
{
preferredLoader: instance.value?.loader ?? undefined,
preferredGameVersion: instance.value?.game_version ?? undefined,
},
).catch((err) => {
return
}
const selectedPreferences = getCurrentSelectedInstallPreferences(currentProjectType)
await installVersion(
projectResult.project_id,
selectedInstall.versionId,
instance.value ? instance.value.path : null,
'SearchCard',
(versionId) => {
setProjectInstalling(projectResult.project_id, false)
if (versionId) {
onSearchResultInstalled(projectResult.project_id)
}
},
(profile) => {
router.push(`/instance/${profile}`)
},
{
preferredLoader: instance.value?.loader ?? selectedPreferences.loaders?.[0],
preferredGameVersion:
instance.value?.game_version ?? selectedPreferences.gameVersions?.[0],
},
)
} catch (err) {
setProjectInstalling(projectResult.project_id, false)
handleError(err)
})
}
},
},
]
@@ -937,9 +863,7 @@ async function search(requestParams: string) {
if (isServer) {
const hits = rawResults.result.hits ?? []
lastServerHits.value = hits
pingServerHits(hits)
checkServerRunningStates(hits)
updateServerHits(hits)
return {
projectHits: [],
serverHits: hits,
@@ -1024,6 +948,12 @@ watch(
{ deep: true },
)
watch(queuedServerInstallCount, (count) => {
if (count === 0) {
hideSelectedServerInstalls.value = false
}
})
if (instance.value?.game_version) {
const gv = instance.value.game_version
const alreadyHasGv = searchState.serverCurrentFilters.value.some(
@@ -1036,16 +966,26 @@ if (instance.value?.game_version) {
await searchState.refreshSearch()
function getProjectBrowseQuery() {
if (!installContext.value) return undefined
return {
...route.query,
b: route.fullPath,
}
}
provideBrowseManager({
tags,
projectType,
...searchState,
getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => ({
path: `/project/${result.project_id ?? result.slug}`,
query: instance.value ? { i: instance.value.path } : undefined,
query: getProjectBrowseQuery(),
}),
getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) => ({
path: `/project/${result.slug ?? result.project_id}`,
query: getProjectBrowseQuery(),
}),
getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
`/project/${result.slug ?? result.project_id}`,
selectableProjectTypes,
showProjectTypeTabs: computed(() => !isServerContext.value),
variant: 'app',
@@ -1068,8 +1008,18 @@ provideBrowseManager({
() => (isServerContext.value && projectType.value !== 'modpack') || !!instance.value,
),
hideInstalledLabel: computed(() =>
formatMessage(isFromWorlds.value ? messages.hideAddedServers : messages.hideInstalledContent),
formatMessage(
isFromWorlds.value ? messages.hideAddedServers : commonMessages.hideInstalledContentLabel,
),
),
hideSelected: hideSelectedServerInstalls,
showHideSelected: computed(
() =>
isServerContext.value &&
projectType.value !== 'modpack' &&
queuedServerInstallCount.value > 0,
),
hideSelectedLabel: computed(() => formatMessage(commonMessages.hideSelectedContentLabel)),
onInstalled: onSearchResultInstalled,
serverPings,
getServerModpackContent,
@@ -1084,8 +1034,12 @@ provideBrowseManager({
<BrowsePageLayout>
<template #after>
<ContextMenu ref="contextMenuRef" @option-clicked="handleOptionsClick">
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
<template #open_link>
<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
</template>
<template #copy_link>
<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
</template>
</ContextMenu>
</template>
</BrowsePageLayout>

258
apps/app-frontend/src/pages/project/Index.vue
View File

@@ -45,7 +45,13 @@
/>
</Teleport>
<div class="flex flex-col gap-4 p-6">
<InstanceIndicator v-if="instance" :instance="instance" />
<div
v-if="projectInstallContext"
class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
>
<BrowseInstallHeader :install-context="projectInstallContext" />
</div>
<InstanceIndicator v-if="instance && !projectInstallContext" :instance="instance" />
<template v-if="data">
<Teleport
v-if="themeStore.featureFlags.project_background"
@@ -64,7 +70,7 @@
<ButtonStyled v-if="serverPlaying" size="large" color="red">
<button @click="handleStopServer">
<StopCircleIcon />
Stop
{{ formatMessage(commonMessages.stopButton) }}
</button>
</ButtonStyled>
<ButtonStyled v-else size="large" color="brand">
@@ -73,11 +79,18 @@
@click="handleClickPlay"
>
<PlayIcon />
{{ data && installingServerProjects.includes(data.id) ? 'Installing...' : 'Play' }}
{{
data && installingServerProjects.includes(data.id)
? formatMessage(commonMessages.installingLabel)
: formatMessage(commonMessages.playButton)
}}
</button>
</ButtonStyled>
<ButtonStyled size="large" circular>
<button v-tooltip="'Add server to instance'" @click="handleAddServerToInstance">
<button
v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
@click="handleAddServerToInstance"
>
<PlusIcon />
</button>
</ButtonStyled>
@@ -111,13 +124,17 @@
<template v-else #actions>
<ButtonStyled size="large" color="brand">
<button
v-tooltip="installed ? `This project is already installed` : null"
:disabled="installed || installing"
v-tooltip="installButtonTooltip"
:disabled="installButtonDisabled"
@click="install(null)"
>
<DownloadIcon v-if="!installed && !installing" />
<CheckIcon v-else-if="installed" />
{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
<SpinnerIcon
v-if="installButtonLoading && !installButtonInstalled"
class="animate-spin"
/>
<DownloadIcon v-else-if="!installButtonInstalled && !serverProjectSelected" />
<CheckIcon v-else />
{{ installButtonLabel }}
</button>
</ButtonStyled>
<ButtonStyled size="large" circular type="transparent">
@@ -166,7 +183,7 @@
:links="[
{
label: 'Description',
href: `/project/${$route.params.id}`,
href: projectDescriptionHref,
},
{
label: 'Versions',
@@ -176,7 +193,7 @@
},
{
label: 'Gallery',
href: `/project/${$route.params.id}/gallery`,
href: projectGalleryHref,
shown: data.gallery.length > 0,
},
]"
@@ -195,11 +212,39 @@
</template>
<template v-else> Project data couldn't not be loaded. </template>
</div>
<SelectedProjectsFloatingBar
v-if="projectInstallContext"
:install-context="projectInstallContext"
/>
<ContextMenu ref="options" @option-clicked="handleOptionsClick">
<template #install> <DownloadIcon /> Install </template>
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
<template #install>
<DownloadIcon /> {{ formatMessage(commonMessages.installButton) }}
</template>
<template #open_link>
<GlobeIcon /> {{ formatMessage(commonMessages.openInModrinthButton) }} <ExternalIcon />
</template>
<template #copy_link>
<ClipboardCopyIcon /> {{ formatMessage(commonMessages.copyLinkButton) }}
</template>
</ContextMenu>
<CreationFlowModal
v-if="serverInstallContent.isServerContext.value && data?.project_type === 'modpack'"
ref="serverSetupModalRef"
:type="
serverInstallContent.serverFlowFrom.value === 'reset-server'
? 'reset-server'
: 'server-onboarding'
"
:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
:show-snapshot-toggle="true"
:on-back="serverInstallContent.onServerFlowBack"
:search-modpacks="serverInstallContent.searchServerModpacks"
:get-project-versions="serverInstallContent.getServerProjectVersions"
:get-loader-manifest="getLoaderManifest"
@hide="() => {}"
@browse-modpacks="() => {}"
@create="serverInstallContent.handleServerModpackFlowCreate"
/>
</div>
</template>
@@ -216,10 +261,16 @@ import {
PlayIcon,
PlusIcon,
ReportIcon,
SpinnerIcon,
StopCircleIcon,
} from '@modrinth/assets'
import {
BrowseInstallHeader,
ButtonStyled,
commonMessages,
CreationFlowModal,
defineMessages,
getTargetInstallPreferences,
injectNotificationManager,
NavTabs,
OverflowMenu,
@@ -231,7 +282,11 @@ import {
ProjectSidebarLinks,
ProjectSidebarServerInfo,
ProjectSidebarTags,
requestInstall,
SelectedProjectsFloatingBar,
useVIntl,
} from '@modrinth/ui'
import { convertFileSrc } from '@tauri-apps/api/core'
import { openUrl } from '@tauri-apps/plugin-opener'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
@@ -249,6 +304,7 @@ import {
get_version_many,
} from '@/helpers/cache.js'
import { process_listener } from '@/helpers/events'
import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
import { get_by_profile_path } from '@/helpers/process'
import {
get as getInstance,
@@ -260,6 +316,7 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
import { getServerLatency } from '@/helpers/worlds'
import { injectContentInstall } from '@/providers/content-install'
import { injectServerInstall } from '@/providers/server-install'
import { createServerInstallContent } from '@/providers/setup/server-install-content'
import { useBreadcrumbs } from '@/store/breadcrumbs'
import { getServerAddress } from '@/store/install.js'
import { useTheming } from '@/store/state.js'
@@ -272,6 +329,22 @@ const route = useRoute()
const router = useRouter()
const breadcrumbs = useBreadcrumbs()
const themeStore = useTheming()
const { formatMessage } = useVIntl()
const messages = defineMessages({
backToBrowse: {
id: 'app.project.install-context.back-to-browse',
defaultMessage: 'Back to browse',
},
installContentToInstance: {
id: 'app.project.install-context.install-content-to-instance',
defaultMessage: 'Install content to instance',
},
alreadyInstalled: {
id: 'app.project.install-button.already-installed',
defaultMessage: 'This project is already installed',
},
})
const { installingServerProjects, playServerProject, showAddServerToInstanceModal } =
injectServerInstall()
@@ -296,6 +369,11 @@ const serverPing = ref(undefined)
const serverStatusOnline = ref(false)
const serverInstancePath = ref(null)
const serverPlaying = ref(false)
const serverSetupModalRef = ref(null)
const serverInstallContent = createServerInstallContent({ serverSetupModalRef })
serverInstallContent.watchServerContextChanges()
await serverInstallContent.initServerContext()
const instanceFilters = computed(() => {
if (!instance.value) {
@@ -315,11 +393,9 @@ const instanceFilters = computed(() => {
return { l: loaders, g: instance.value.game_version }
})
const versionsHref = computed(() => {
const base = `/project/${route.params.id}/versions`
const filters = instanceFilters.value
function buildProjectHref(path, extraQuery = {}) {
const params = new URLSearchParams()
for (const [key, val] of Object.entries(filters)) {
for (const [key, val] of Object.entries({ ...route.query, ...extraQuery })) {
if (Array.isArray(val)) {
for (const v of val) params.append(key, v)
} else if (val) {
@@ -327,7 +403,102 @@ const versionsHref = computed(() => {
}
}
const qs = params.toString()
return qs ? `${base}?${qs}` : base
return qs ? `${path}?${qs}` : path
}
const projectDescriptionHref = computed(() => buildProjectHref(`/project/${route.params.id}`))
const versionsHref = computed(() =>
buildProjectHref(`/project/${route.params.id}/versions`, instanceFilters.value),
)
const projectGalleryHref = computed(() => buildProjectHref(`/project/${route.params.id}/gallery`))
const projectBrowseBackUrl = computed(() => {
const browsePath = route.query.b
if (typeof browsePath === 'string' && browsePath.startsWith('/browse/')) return browsePath
const type = data.value?.project_type ? `${data.value.project_type}s` : 'mods'
return `/browse/${type}`
})
const projectInstallContext = computed(() => {
const serverData = serverInstallContent.serverContextServerData.value
if (serverData) {
return {
name: serverData.name,
loader: serverData.loader ?? '',
gameVersion: serverData.mc_version ?? '',
serverId: serverInstallContent.serverIdQuery.value,
upstream: serverData.upstream,
iconSrc: null,
isMedal: serverData.is_medal,
backUrl: projectBrowseBackUrl.value,
backLabel: formatMessage(messages.backToBrowse),
heading: serverInstallContent.serverBrowseHeading.value,
queuedCount: serverInstallContent.queuedServerInstallCount.value,
selectedProjects: serverInstallContent.selectedServerInstallProjects.value,
isInstallingSelected: serverInstallContent.isInstallingQueuedServerInstalls.value,
installProgress: serverInstallContent.queuedInstallProgress.value,
clearQueued: serverInstallContent.clearQueuedServerInstalls,
clearSelected: serverInstallContent.clearQueuedServerInstalls,
discardSelectedAndBack: serverInstallContent.discardQueuedServerInstallsAndBack,
installSelected: serverInstallContent.installQueuedServerInstallsAndBack,
}
}
if (instance.value) {
return {
name: instance.value.name,
loader: instance.value.loader,
gameVersion: instance.value.game_version,
iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
backUrl: projectBrowseBackUrl.value,
backLabel: formatMessage(messages.backToBrowse),
heading: formatMessage(messages.installContentToInstance),
}
}
return null
})
const serverProjectInstallContext = computed(
() =>
!!serverInstallContent.serverContextServerData.value &&
['modpack', 'mod', 'plugin', 'datapack'].includes(data.value?.project_type),
)
const serverProjectSelected = computed(
() => !!data.value && serverInstallContent.queuedServerInstallProjectIds.value.has(data.value.id),
)
const serverProjectInstalled = computed(
() =>
!!data.value &&
(serverInstallContent.serverContentProjectIds.value.has(data.value.id) ||
serverInstallContent.serverContextServerData.value?.upstream?.project_id === data.value.id),
)
const installButtonLoading = computed(
() => installing.value || serverInstallContent.isInstallingQueuedServerInstalls.value,
)
const installButtonValidating = computed(
() =>
serverProjectInstallContext.value &&
installing.value &&
data.value?.project_type !== 'modpack' &&
!serverInstallContent.isInstallingQueuedServerInstalls.value,
)
const installButtonInstalled = computed(() =>
serverProjectInstallContext.value ? serverProjectInstalled.value : installed.value,
)
const installButtonDisabled = computed(
() => installButtonInstalled.value || installButtonLoading.value,
)
const installButtonLabel = computed(() => {
if (installButtonInstalled.value) return formatMessage(commonMessages.installedLabel)
if (installButtonValidating.value) return formatMessage(commonMessages.validatingLabel)
if (installButtonLoading.value) return formatMessage(commonMessages.installingLabel)
if (serverProjectSelected.value) return formatMessage(commonMessages.selectedLabel)
return formatMessage(commonMessages.installButton)
})
const installButtonTooltip = computed(() => {
if (installButtonInstalled.value) return formatMessage(messages.alreadyInstalled)
return null
})
const [allLoaders, allGameVersions] = await Promise.all([
@@ -499,6 +670,55 @@ watch(
)
async function install(version) {
if (serverProjectInstallContext.value && data.value) {
if (serverProjectSelected.value) {
serverInstallContent.removeQueuedServerInstall(data.value.id)
return
}
if (installButtonDisabled.value) return
installing.value = true
try {
const contentType = data.value.project_type
await requestInstall({
project: {
...data.value,
project_id: data.value.id,
icon_url: data.value.icon_url,
},
contentType,
mode: contentType === 'modpack' ? 'immediate' : 'queue',
selectedFilters: [],
providedFilters: [],
overriddenProvidedFilterTypes: [],
targetPreferences: getTargetInstallPreferences(
{
gameVersion: serverInstallContent.serverContextServerData.value?.mc_version,
loader: serverInstallContent.serverContextServerData.value?.loader,
},
contentType,
),
getProjectVersions: async () => versions.value,
queue: {
get: serverInstallContent.getQueuedServerInstallPlans,
set: serverInstallContent.setQueuedServerInstallPlans,
},
install: (plan) =>
serverInstallContent.openServerModpackInstallFlow({
projectId: plan.projectId,
versionId: plan.versionId,
name: plan.project.title ?? plan.project.name ?? data.value.title,
iconUrl: plan.project.icon_url ?? undefined,
}),
})
} catch (err) {
handleError(err)
} finally {
installing.value = false
}
return
}
installing.value = true
await installVersion(
data.value.id,

406
apps/app-frontend/src/providers/setup/server-install-content.ts
View File

@@ -1,22 +1,32 @@
import type { Archon, Labrinth } from '@modrinth/api-client'
import type { AbstractModrinthClient, Archon, Labrinth } from '@modrinth/api-client'
import {
addPendingServerContentInstalls,
type BrowseInstallPlan,
type BrowseSelectedProject,
createContext,
type CreationFlowContextValue,
flushInstallQueue,
injectModrinthClient,
injectNotificationManager,
type PendingServerContentInstall,
type PendingServerContentInstallType,
readPendingServerContentInstalls,
removePendingServerContentInstall,
writePendingServerContentInstallBaseline,
} from '@modrinth/ui'
import { computed, type ComputedRef, nextTick, type Ref, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
type ServerFlowFrom = 'onboarding' | 'reset-server'
type ServerInstallableType = 'modpack' | 'mod' | 'plugin' | 'datapack'
type InstallableSearchResult = Labrinth.Search.v3.ResultSearchProject & {
title?: string
installing?: boolean
installed?: boolean
}
type PendingServerContentInstallInput = Omit<PendingServerContentInstall, 'createdAt'>
interface ServerModpackSelectionRequest {
export interface ServerModpackSelectionRequest {
projectId: string
versionId: string
name: string
@@ -40,9 +50,19 @@ export interface ServerInstallContentContext {
effectiveServerWorldId: ComputedRef<string | null>
serverContextServerData: Ref<Archon.Servers.v0.Server | null>
serverContentProjectIds: Ref<Set<string>>
queuedServerInstallProjectIds: ComputedRef<Set<string>>
queuedServerInstallCount: ComputedRef<number>
selectedServerInstallProjects: ComputedRef<BrowseSelectedProject[]>
isInstallingQueuedServerInstalls: Ref<boolean>
queuedInstallProgress: Ref<{ completed: number; total: number }>
serverBackUrl: ComputedRef<string>
serverBackLabel: ComputedRef<string>
serverBrowseHeading: ComputedRef<string>
clearQueuedServerInstalls: () => void
removeQueuedServerInstall: (projectId: string) => void
flushQueuedServerInstalls: () => Promise<boolean>
discardQueuedServerInstallsAndBack: () => Promise<void>
installQueuedServerInstallsAndBack: () => Promise<boolean>
initServerContext: () => Promise<void>
watchServerContextChanges: () => void
searchServerModpacks: (
@@ -51,7 +71,11 @@ export interface ServerInstallContentContext {
) => Promise<Labrinth.Projects.v2.SearchResult>
getServerProjectVersions: (projectId: string) => Promise<{ id: string }[]>
enforceSetupModpackRoute: (currentProjectType: string | undefined) => void
installProjectToServer: (project: InstallableSearchResult) => Promise<boolean>
getQueuedServerInstallPlans: () => Map<string, BrowseInstallPlan<InstallableSearchResult>>
setQueuedServerInstallPlans: (
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) => void
openServerModpackInstallFlow: (request: ServerModpackSelectionRequest) => Promise<void>
onServerFlowBack: () => void
handleServerModpackFlowCreate: (config: CreationFlowContextValue) => Promise<void>
markServerProjectInstalled: (id: string) => void
@@ -65,6 +89,145 @@ function readQueryString(value: unknown): string | null {
return typeof value === 'string' && value.length > 0 ? value : null
}
function getQueueStorageKey(serverId: string | null, worldId: string | null) {
if (!serverId || !worldId) return null
return `server-install-queue:${serverId}:${worldId}`
}
function readStoredQueue(serverId: string | null, worldId: string | null) {
const key = getQueueStorageKey(serverId, worldId)
if (!key) return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
try {
const raw = localStorage.getItem(key)
if (!raw) return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
return new Map<string, BrowseInstallPlan<InstallableSearchResult>>(JSON.parse(raw))
} catch {
return new Map<string, BrowseInstallPlan<InstallableSearchResult>>()
}
}
function writeStoredQueue(
serverId: string | null,
worldId: string | null,
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
const key = getQueueStorageKey(serverId, worldId)
if (!key) return
if (plans.size === 0) {
localStorage.removeItem(key)
return
}
localStorage.setItem(key, JSON.stringify(Array.from(plans.entries())))
}
function getQueuedInstallOwnerFallback(project: InstallableSearchResult) {
if (project.organization) {
const ownerId = project.organization_id ?? project.organization
return {
id: ownerId,
name: project.organization,
type: 'organization' as const,
link: `https://modrinth.com/organization/${ownerId}`,
}
}
if (!project.author) return null
const ownerId = project.author_id ?? project.author
return {
id: ownerId,
name: project.author,
type: 'user' as const,
link: `https://modrinth.com/user/${ownerId}`,
}
}
async function getQueuedInstallOwner(
client: AbstractModrinthClient,
project: InstallableSearchResult,
) {
const fallback = getQueuedInstallOwnerFallback(project)
try {
if (project.organization) {
const organization = await client.labrinth.projects_v3.getOrganization(project.project_id)
if (organization) {
return {
id: organization.id,
name: organization.name,
type: 'organization' as const,
avatar_url: organization.icon_url ?? undefined,
link: `https://modrinth.com/organization/${organization.slug}`,
}
}
}
const members = await client.labrinth.projects_v3.getMembers(project.project_id)
const owner =
members.find((member) => member.user.id === project.author_id)?.user ??
members.find((member) => member.is_owner || member.role === 'Owner')?.user ??
members[0]?.user
if (owner) {
return {
id: owner.id,
name: owner.username,
type: 'user' as const,
avatar_url: owner.avatar_url,
link: `https://modrinth.com/user/${owner.username}`,
}
}
} catch {
return fallback
}
return fallback
}
function getQueuedAddonInstallPlans(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return Array.from(plans.values()).filter((plan) => plan.contentType !== 'modpack')
}
function getQueuedInstallPlaceholder(
plan: BrowseInstallPlan<InstallableSearchResult>,
owner: PendingServerContentInstallInput['owner'],
): PendingServerContentInstallInput {
const project = plan.project as InstallableSearchResult & { slug?: string | null }
return {
projectId: plan.projectId,
versionId: plan.versionId,
contentType: plan.contentType as PendingServerContentInstallType,
title: project.title ?? project.name ?? 'Project',
versionName: plan.versionName ?? null,
versionNumber: plan.versionNumber ?? null,
fileName: plan.fileName ?? null,
owner,
slug: project.slug ?? plan.projectId,
iconUrl: project.icon_url ?? null,
}
}
function getQueuedInstallPlaceholderFallbacks(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return getQueuedAddonInstallPlans(plans).map((plan) =>
getQueuedInstallPlaceholder(plan, getQueuedInstallOwnerFallback(plan.project)),
)
}
async function getQueuedInstallPlaceholders(
client: AbstractModrinthClient,
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return Promise.all(
getQueuedAddonInstallPlans(plans).map(async (plan) =>
getQueuedInstallPlaceholder(plan, await getQueuedInstallOwner(client, plan.project)),
),
)
}
export function createServerInstallContent(opts: {
serverSetupModalRef: Ref<ServerSetupModalHandle | null>
}) {
@@ -72,7 +235,7 @@ export function createServerInstallContent(opts: {
const route = useRoute()
const router = useRouter()
const client = injectModrinthClient()
const { handleError } = injectNotificationManager()
const { addNotification, handleError } = injectNotificationManager()
const serverIdQuery = computed(() => readQueryString(route.query.sid))
const worldIdQuery = computed(() => readQueryString(route.query.wid))
@@ -90,8 +253,22 @@ export function createServerInstallContent(opts: {
const serverContextWorldId = ref<string | null>(worldIdQuery.value)
const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
const serverContentProjectIds = ref<Set<string>>(new Set())
const serverContentInstallKeys = ref<Set<string>>(new Set())
const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(
new Map(),
)
const queuedServerInstallProjectIds = computed(() => new Set(queuedServerInstalls.value.keys()))
const queuedServerInstallCount = computed(() => queuedServerInstalls.value.size)
const selectedServerInstallProjects = computed<BrowseSelectedProject[]>(() =>
Array.from(queuedServerInstalls.value.values()).map((plan) => ({
id: plan.projectId,
name: plan.project.title ?? plan.project.name ?? 'Project',
iconUrl: plan.project.icon_url ?? null,
})),
)
const isInstallingQueuedServerInstalls = ref(false)
const queuedInstallProgress = ref({ completed: 0, total: 0 })
const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
const serverBackUrl = computed(() => {
const sid = serverIdQuery.value
if (!sid) return '/hosting/manage'
@@ -110,9 +287,9 @@ export function createServerInstallContent(opts: {
})
const serverBrowseHeading = computed(() => {
if (serverFlowFrom.value === 'reset-server') {
return 'Select modpack to install after reset'
return 'Selecting modpack to install after reset'
}
return 'Install content to server'
return 'Installing content'
})
async function resolveServerContextWorldId(serverId: string) {
@@ -134,7 +311,11 @@ export function createServerInstallContent(opts: {
.map((addon) => addon.project_id)
.filter((projectId): projectId is string => !!projectId),
)
const keys = new Set(
(content.addons ?? []).map((addon) => addon.project_id ?? addon.filename),
)
serverContentProjectIds.value = ids
serverContentInstallKeys.value = keys
} catch (err) {
handleError(err as Error)
}
@@ -159,6 +340,7 @@ export function createServerInstallContent(opts: {
}
if (resolvedWorldId) {
queuedServerInstalls.value = readStoredQueue(sid, resolvedWorldId)
await refreshServerInstalledContent(sid, resolvedWorldId)
}
}
@@ -168,11 +350,15 @@ export function createServerInstallContent(opts: {
if (!sid) {
serverContextServerData.value = null
serverContentProjectIds.value = new Set()
serverContentInstallKeys.value = new Set()
setQueuedServerInstallPlans(new Map())
return
}
if (sid !== prevSid) {
serverContentProjectIds.value = new Set()
serverContentInstallKeys.value = new Set()
queuedServerInstalls.value = readStoredQueue(sid, wid)
try {
serverContextServerData.value = await client.archon.servers_v0.get(sid)
} catch (err) {
@@ -180,28 +366,16 @@ export function createServerInstallContent(opts: {
}
}
if (wid !== prevWid) {
queuedServerInstalls.value = readStoredQueue(sid, wid)
}
if (wid && (sid !== prevSid || wid !== prevWid)) {
await refreshServerInstalledContent(sid, wid)
}
})
}
function normalizeLoader(loader: string) {
return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
}
function getCompatibleLoaders(loader: string) {
const normalized = normalizeLoader(loader)
if (!normalized) return new Set<string>()
if (normalized === 'paper' || normalized === 'purpur' || normalized === 'spigot') {
return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
}
if (normalized === 'neoforge' || normalized === 'neo') {
return new Set(['neoforge', 'neo'])
}
return new Set([normalized])
}
function enforceSetupModpackRoute(currentProjectType: string | undefined) {
if (!isSetupServerContext.value || currentProjectType === 'modpack') return
router.replace({
@@ -248,82 +422,132 @@ export function createServerInstallContent(opts: {
ctx.modal.value?.setStage('final-config')
}
function getCurrentServerInstallType(): ServerInstallableType {
const raw = Array.isArray(route.params.projectType)
? route.params.projectType[0]
: route.params.projectType
if (raw === 'modpack' || raw === 'mod' || raw === 'plugin' || raw === 'datapack') {
return raw
}
throw new Error('This content type cannot be installed to a server from browse.')
function clearQueuedServerInstalls() {
setQueuedServerInstallPlans(new Map())
}
async function installProjectToServer(project: InstallableSearchResult) {
const contentType = getCurrentServerInstallType()
const sid = serverIdQuery.value
const wid = effectiveServerWorldId.value
if (!sid || !wid) {
throw new Error('No server world is available for install.')
}
function removeQueuedServerInstall(projectId: string) {
const nextPlans = new Map(queuedServerInstalls.value)
nextPlans.delete(projectId)
setQueuedServerInstallPlans(nextPlans)
}
if (contentType === 'modpack') {
const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
include_changelog: false,
})
const versionId = versions[0]?.id ?? project.version_id
if (!versionId) {
throw new Error('No version found for this modpack')
}
async function flushQueuedServerInstalls(
serverId: string | null = serverIdQuery.value,
worldId: string | null = effectiveServerWorldId.value,
) {
if (queuedServerInstalls.value.size === 0) return true
if (isInstallingQueuedServerInstalls.value) return false
await openServerModpackInstallFlow({
projectId: project.project_id,
versionId,
name: project.name,
iconUrl: project.icon_url ?? undefined,
})
if (!serverId || !worldId) {
handleError(new Error('No server world is available for install.'))
return false
}
const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
include_changelog: false,
})
const serverLoader = (serverContextServerData.value?.loader ?? '').toLowerCase()
const serverGameVersion = (serverContextServerData.value?.mc_version ?? '').trim()
const compatibleLoaders = getCompatibleLoaders(serverLoader)
const hasGameVersionMatch = (version: Labrinth.Versions.v2.Version) =>
!serverGameVersion || version.game_versions.includes(serverGameVersion)
const hasLoaderMatch = (version: Labrinth.Versions.v2.Version) => {
if (contentType === 'datapack') return true
if (compatibleLoaders.size === 0) return true
return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoader(loader)))
const installedProjectIds = new Set<string>()
isInstallingQueuedServerInstalls.value = true
queuedInstallProgress.value = {
completed: 0,
total: queuedServerInstalls.value.size,
}
let matchingVersion = versions.find(
(version) => hasGameVersionMatch(version) && hasLoaderMatch(version),
)
if (!matchingVersion) {
matchingVersion = versions.find((version) => hasLoaderMatch(version))
try {
const result = await flushInstallQueue({
queue: {
get: () => queuedServerInstalls.value,
set: (plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>) => {
queuedServerInstalls.value = plans
writeStoredQueue(serverId, worldId, plans)
},
},
install: async (plan) => {
await client.archon.content_v1.addAddon(serverId, worldId, {
project_id: plan.projectId,
version_id: plan.versionId,
})
installedProjectIds.add(plan.projectId)
},
onError: (error, plan) => {
removePendingServerContentInstall(serverId, worldId, plan.projectId)
handleError(error as Error)
},
onProgress: (completed, total) => {
queuedInstallProgress.value = { completed, total }
},
})
if (installedProjectIds.size > 0) {
serverContentProjectIds.value = new Set([
...serverContentProjectIds.value,
...installedProjectIds,
])
serverContentInstallKeys.value = new Set([
...serverContentInstallKeys.value,
...installedProjectIds,
])
}
return result.ok
} finally {
isInstallingQueuedServerInstalls.value = false
queuedInstallProgress.value = { completed: 0, total: 0 }
}
if (!matchingVersion) {
matchingVersion = versions.find((version) => hasGameVersionMatch(version))
}
async function discardQueuedServerInstallsAndBack() {
clearQueuedServerInstalls()
await router.push(serverBackUrl.value)
}
async function installQueuedServerInstallsAndBack() {
const sid = serverIdQuery.value
const wid = effectiveServerWorldId.value
const backUrl = serverBackUrl.value
const plans = new Map(queuedServerInstalls.value)
if (sid && wid) {
writePendingServerContentInstallBaseline(sid, wid, serverContentInstallKeys.value)
addPendingServerContentInstalls(sid, wid, getQueuedInstallPlaceholderFallbacks(plans))
void getQueuedInstallPlaceholders(client, plans)
.then((items) => {
const pendingProjectIds = new Set(
readPendingServerContentInstalls(sid, wid).map((item) => item.projectId),
)
addPendingServerContentInstalls(
sid,
wid,
items.filter((item) => pendingProjectIds.has(item.projectId)),
)
})
.catch((err) => handleError(err as Error))
}
if (!matchingVersion) {
matchingVersion = versions[0]
}
if (!matchingVersion) {
throw new Error('No installable version was found for this project.')
await router.push(backUrl)
const ok = await flushQueuedServerInstalls(sid, wid)
if (!ok) {
queuedServerInstalls.value = new Map()
writeStoredQueue(sid, wid, new Map())
addNotification({
type: 'error',
title: 'Some projects failed to install',
text: 'Failed projects were not added. You can try installing them again.',
})
}
await client.archon.content_v1.addAddon(sid, wid, {
project_id: matchingVersion.project_id,
version_id: matchingVersion.id,
})
serverContentProjectIds.value = new Set([...serverContentProjectIds.value, project.project_id])
return true
}
function getQueuedServerInstallPlans() {
return queuedServerInstalls.value
}
function setQueuedServerInstallPlans(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
queuedServerInstalls.value = plans
writeStoredQueue(serverIdQuery.value, effectiveServerWorldId.value, plans)
}
function onServerFlowBack() {
serverSetupModalRef.value?.hide()
}
@@ -377,15 +601,27 @@ export function createServerInstallContent(opts: {
effectiveServerWorldId,
serverContextServerData,
serverContentProjectIds,
queuedServerInstallProjectIds,
queuedServerInstallCount,
selectedServerInstallProjects,
isInstallingQueuedServerInstalls,
queuedInstallProgress,
serverBackUrl,
serverBackLabel,
serverBrowseHeading,
clearQueuedServerInstalls,
removeQueuedServerInstall,
flushQueuedServerInstalls,
discardQueuedServerInstallsAndBack,
installQueuedServerInstallsAndBack,
initServerContext,
watchServerContextChanges,
searchServerModpacks,
getServerProjectVersions,
enforceSetupModpackRoute,
installProjectToServer,
getQueuedServerInstallPlans,
setQueuedServerInstallPlans,
openServerModpackInstallFlow,
onServerFlowBack,
handleServerModpackFlowCreate,
markServerProjectInstalled,

36
apps/frontend/src/locales/en-US/index.json
View File

@@ -1229,6 +1229,39 @@
"dashboard.withdraw.error.tax-form.title": {
"message": "Please complete tax form"
},
"discover.install.back-to-server": {
"message": "Back to server"
},
"discover.install.back-to-setup": {
"message": "Back to setup"
},
"discover.install.cancel-reset": {
"message": "Cancel reset"
},
"discover.install.error.no-server-world": {
"message": "No server world is available for install."
},
"discover.install.error.some-projects-failed.description": {
"message": "Failed projects were not added. You can try installing them again."
},
"discover.install.error.some-projects-failed.title": {
"message": "Some projects failed to install"
},
"discover.install.error.unsupported-content-type": {
"message": "This content type cannot be installed to a server from browse."
},
"discover.install.heading.reset-modpack": {
"message": "Selecting modpack to install after reset"
},
"discover.seo.description": {
"message": "Search and browse thousands of Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}."
},
"discover.seo.title": {
"message": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}"
},
"discover.seo.title-with-query": {
"message": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} | {query}"
},
"error.collection.404.list_item.1": {
"message": "You may have mistyped the collection's URL."
},
@@ -3062,6 +3095,9 @@
"search.filter.locked.server.sync": {
"message": "Sync with server"
},
"servers.manage.content.title": {
"message": "Content - {serverName} - Modrinth"
},
"servers.notice.actions": {
"message": "Actions"
},

564
apps/frontend/src/pages/discover/[type]/index.vue
View File

@@ -11,20 +11,37 @@ import {
MoreVerticalIcon,
SpinnerIcon,
} from '@modrinth/assets'
import type { CardAction, CreationFlowContextValue } from '@modrinth/ui'
import type {
BrowseInstallContentType,
BrowseInstallPlan,
CardAction,
CreationFlowContextValue,
PendingServerContentInstall,
PendingServerContentInstallType,
} from '@modrinth/ui'
import {
addPendingServerContentInstalls,
BrowseInstallHeader,
BrowsePageLayout,
BrowseSidebar,
commonMessages,
CreationFlowModal,
defineMessages,
flushInstallQueue,
getTargetInstallPreferences,
injectModrinthClient,
injectNotificationManager,
PROJECT_DEP_MARKER_QUERY,
provideBrowseManager,
readPendingServerContentInstalls,
removePendingServerContentInstall,
requestInstall,
SelectedProjectsFloatingBar,
useBrowseSearch,
useDebugLogger,
useStickyObserver,
useVIntl,
writePendingServerContentInstallBaseline,
} from '@modrinth/ui'
import { cycleValue } from '@modrinth/utils'
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
@@ -47,6 +64,9 @@ const client = injectModrinthClient()
const queryClient = useQueryClient()
const filtersMenuOpen = ref(false)
const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
useStickyObserver(stickyInstallHeaderRef, 'DiscoverInstallHeader')
const route = useRoute()
@@ -55,7 +75,7 @@ const tags = useGeneratedState()
const flags = useFeatureFlags()
const auth = await useAuth()
const { handleError } = injectNotificationManager()
const { addNotification, handleError } = injectNotificationManager()
let prefetchTimeout: ReturnType<typeof useTimeoutFn> | null = null
const HOVER_DURATION_TO_PREFETCH_MS = 500
@@ -143,7 +163,7 @@ function cycleSearchDisplayMode() {
const currentServerId = computed(() => queryAsString(route.query.sid) || null)
const fromContext = computed(() => queryAsString(route.query.from) || null)
const currentWorldId = computed(() => queryAsString(route.query.wid) || undefined)
const currentWorldId = computed(() => queryAsString(route.query.wid) || null)
const {
data: serverData,
@@ -176,11 +196,139 @@ const serverIcon = computed(() => {
})
const serverHideInstalled = ref(false)
const hideSelectedServerInstalls = ref(false)
const installingProjectIds = ref<Set<string>>(new Set())
const optimisticallyInstalledProjectIds = ref<Set<string>>(new Set())
const hiddenInstalledProjectIds = ref<Set<string>>(new Set())
const hiddenInstalledProjectIdsInitialized = ref(false)
interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
installed?: boolean
}
type PendingServerContentInstallInput = Omit<PendingServerContentInstall, 'createdAt'>
const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(new Map())
const queuedServerInstallProjectIds = computed(() => new Set(queuedServerInstalls.value.keys()))
const queuedServerInstallCount = computed(() => queuedServerInstalls.value.size)
const selectedServerInstallProjects = computed(() =>
Array.from(queuedServerInstalls.value.values()).map((plan) => ({
id: plan.projectId,
name: plan.project.title ?? formatMessage(commonMessages.projectLabel),
iconUrl: plan.project.icon_url ?? null,
})),
)
const isInstallingQueuedServerInstalls = ref(false)
const queuedInstallProgress = ref({ completed: 0, total: 0 })
const serverInstallQueue = {
get: () => queuedServerInstalls.value,
set: (plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>) => {
queuedServerInstalls.value = plans
},
}
function getQueuedInstallOwnerFallback(project: InstallableSearchResult) {
if (project.organization) {
const ownerId = project.organization_id ?? project.organization
return {
id: ownerId,
name: project.organization,
type: 'organization' as const,
link: `/organization/${ownerId}`,
}
}
if (!project.author) return null
const ownerId = project.author_id ?? project.author
return {
id: ownerId,
name: project.author,
type: 'user' as const,
link: `/user/${ownerId}`,
}
}
async function getQueuedInstallOwner(project: InstallableSearchResult) {
const fallback = getQueuedInstallOwnerFallback(project)
try {
if (project.organization) {
const organization = await client.labrinth.projects_v3.getOrganization(project.project_id)
if (organization) {
return {
id: organization.id,
name: organization.name,
type: 'organization' as const,
avatar_url: organization.icon_url ?? undefined,
link: `/organization/${organization.slug}`,
}
}
}
const members = await client.labrinth.projects_v3.getMembers(project.project_id)
const owner =
members.find((member) => member.user.id === project.author_id)?.user ??
members.find((member) => member.is_owner || member.role === 'Owner')?.user ??
members[0]?.user
if (owner) {
return {
id: owner.id,
name: owner.username,
type: 'user' as const,
avatar_url: owner.avatar_url,
link: `/user/${owner.username}`,
}
}
} catch {
return fallback
}
return fallback
}
function getQueuedAddonInstallPlans(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return Array.from(plans.values()).filter((plan) => plan.contentType !== 'modpack')
}
function getQueuedInstallPlaceholder(
plan: BrowseInstallPlan<InstallableSearchResult>,
owner: PendingServerContentInstallInput['owner'],
): PendingServerContentInstallInput {
return {
projectId: plan.projectId,
versionId: plan.versionId,
contentType: plan.contentType as PendingServerContentInstallType,
title: plan.project.title ?? formatMessage(commonMessages.projectLabel),
versionName: plan.versionName ?? null,
versionNumber: plan.versionNumber ?? null,
fileName: plan.fileName ?? null,
owner,
slug: plan.project.slug ?? plan.projectId,
iconUrl: plan.project.icon_url ?? null,
}
}
function getQueuedInstallPlaceholderFallbacks(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return getQueuedAddonInstallPlans(plans).map((plan) =>
getQueuedInstallPlaceholder(plan, getQueuedInstallOwnerFallback(plan.project)),
)
}
async function getQueuedInstallPlaceholders(
plans: Map<string, BrowseInstallPlan<InstallableSearchResult>>,
) {
return Promise.all(
getQueuedAddonInstallPlans(plans).map(async (plan) =>
getQueuedInstallPlaceholder(plan, await getQueuedInstallOwner(plan.project)),
),
)
}
function setProjectInstalling(projectId: string, installing: boolean) {
const next = new Set(installingProjectIds.value)
if (installing) {
@@ -206,6 +354,10 @@ function getServerInstalledProjectIds(data = serverContentData.value) {
)
}
function getServerInstalledContentKeys(data = serverContentData.value) {
return new Set((data?.addons ?? []).map((addon) => addon.project_id ?? addon.filename))
}
function syncHiddenInstalledProjectIds() {
hiddenInstalledProjectIds.value = new Set([
...getServerInstalledProjectIds(),
@@ -242,21 +394,22 @@ watch(
const installContentMutation = useMutation({
mutationFn: ({
serverId,
worldId,
projectId,
versionId,
}: {
serverId: string
worldId: string
projectId: string
versionId: string
}) =>
client.archon.content_v1.addAddon(serverId, currentWorldId.value!, {
client.archon.content_v1.addAddon(serverId, worldId, {
project_id: projectId,
version_id: versionId,
}),
onSuccess: () => {
if (currentServerId.value) {
queryClient.refetchQueries({ queryKey: ['content', 'list', currentServerId.value] })
}
onSuccess: (_data, variables) => {
queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', variables.serverId] })
queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
},
})
@@ -309,6 +462,16 @@ const serverFilters = computed(() => {
})
}
}
if (hideSelectedServerInstalls.value && queuedServerInstallProjectIds.value.size > 0) {
for (const id of queuedServerInstallProjectIds.value) {
filters.push({
type: 'project_id',
option: `project_id:${id}`,
negative: true,
})
}
}
}
if (currentServerId.value && projectType.value?.id === 'modpack') {
@@ -321,78 +484,199 @@ const serverFilters = computed(() => {
return filters
})
interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
installed?: boolean
function getCurrentServerInstallType(): BrowseInstallContentType {
const type = projectType.value?.id
if (type === 'modpack' || type === 'mod' || type === 'plugin' || type === 'datapack') {
return type
}
throw new Error(formatMessage(messages.unsupportedContentType))
}
function getServerInstallTargetPreferences(contentType: BrowseInstallContentType) {
return getTargetInstallPreferences(
{
gameVersion: serverData.value?.mc_version,
loader: serverData.value?.loader,
},
contentType,
)
}
function getInstallProjectVersions(projectId: string) {
return client.labrinth.versions_v2.getProjectVersions(projectId, {
include_changelog: false,
})
}
function clearQueuedServerInstalls() {
queuedServerInstalls.value = new Map()
}
function removeQueuedServerInstall(projectId: string) {
const nextPlans = new Map(queuedServerInstalls.value)
nextPlans.delete(projectId)
queuedServerInstalls.value = nextPlans
}
watch([currentServerId, currentWorldId], ([serverId, worldId], [prevServerId, prevWorldId]) => {
if (serverId !== prevServerId || worldId !== prevWorldId) {
clearQueuedServerInstalls()
}
})
async function flushQueuedServerInstalls(
serverId: string | null = currentServerId.value,
worldId: string | null = currentWorldId.value,
) {
if (queuedServerInstalls.value.size === 0) return true
if (isInstallingQueuedServerInstalls.value) return false
if (!serverId || !worldId) {
handleError(new Error(formatMessage(messages.noServerWorld)))
return false
}
isInstallingQueuedServerInstalls.value = true
queuedInstallProgress.value = {
completed: 0,
total: queuedServerInstalls.value.size,
}
try {
const result = await flushInstallQueue({
queue: serverInstallQueue,
install: async (plan) => {
await installContentMutation.mutateAsync({
serverId,
worldId,
projectId: plan.projectId,
versionId: plan.versionId,
})
markProjectInstalled(plan.projectId)
},
onError: (error, plan) => {
removePendingServerContentInstall(serverId, worldId, plan.projectId)
handleError(error as Error)
},
onProgress: (completed, total) => {
queuedInstallProgress.value = { completed, total }
},
})
return result.ok
} finally {
isInstallingQueuedServerInstalls.value = false
queuedInstallProgress.value = { completed: 0, total: 0 }
}
}
async function discardQueuedServerInstallsAndBack() {
clearQueuedServerInstalls()
await navigateTo(serverBackUrl.value)
}
async function installQueuedServerInstallsAndBack() {
const sid = currentServerId.value
const wid = currentWorldId.value
const backUrl = serverBackUrl.value
const plans = new Map(queuedServerInstalls.value)
if (sid && wid) {
writePendingServerContentInstallBaseline(sid, wid, [
...getServerInstalledContentKeys(),
...optimisticallyInstalledProjectIds.value,
])
addPendingServerContentInstalls(sid, wid, getQueuedInstallPlaceholderFallbacks(plans))
void getQueuedInstallPlaceholders(plans)
.then((items) => {
const pendingProjectIds = new Set(
readPendingServerContentInstalls(sid, wid).map((item) => item.projectId),
)
addPendingServerContentInstalls(
sid,
wid,
items.filter((item) => pendingProjectIds.has(item.projectId)),
)
})
.catch((err) => handleError(err as Error))
}
await navigateTo(backUrl)
const ok = await flushQueuedServerInstalls(sid, wid)
if (!ok) {
queuedServerInstalls.value = new Map()
addNotification({
type: 'error',
title: formatMessage(messages.someProjectsFailedTitle),
text: formatMessage(messages.someProjectsFailedText),
})
}
return true
}
async function serverInstall(project: InstallableSearchResult) {
if (!serverData.value || !currentServerId.value) {
if (!serverData.value || !currentServerId.value || !currentWorldId.value) {
handleError(new Error('No server to install to.'))
return
}
setProjectInstalling(project.project_id, true)
const contentType = getCurrentServerInstallType()
const isModpack = contentType === 'modpack'
try {
if (projectType.value?.id === 'modpack') {
const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
include_changelog: false,
})
const versionId = versions[0]?.id ?? project.latest_version
if (!versionId) {
handleError(new Error('No version found for this modpack'))
setProjectInstalling(project.project_id, false)
return
}
const modalInstance = onboardingModalRef.value
if (modalInstance) {
onboardingInstallingProject.value = project
if (!isModpack && queuedServerInstallProjectIds.value.has(project.project_id)) {
removeQueuedServerInstall(project.project_id)
return
}
if (isModpack || !queuedServerInstallProjectIds.value.has(project.project_id)) {
setProjectInstalling(project.project_id, true)
}
await requestInstall({
project,
contentType,
mode: isModpack ? 'immediate' : 'queue',
selectedFilters: isModpack ? [] : searchState.currentFilters.value,
providedFilters: isModpack ? [] : serverFilters.value,
overriddenProvidedFilterTypes: isModpack
? []
: searchState.overriddenProvidedFilterTypes.value,
targetPreferences: getServerInstallTargetPreferences(contentType),
getProjectVersions: getInstallProjectVersions,
queue: serverInstallQueue,
install: async (plan) => {
const modalInstance = onboardingModalRef.value
if (!modalInstance) {
setProjectInstalling(plan.projectId, false)
return
}
onboardingInstallingProject.value = plan.project
modalInstance.show()
await nextTick()
const ctx = modalInstance.ctx
ctx.setupType.value = 'modpack'
ctx.modpackSelection.value = {
projectId: project.project_id,
versionId,
name: project.title,
iconUrl: project.icon_url ?? undefined,
projectId: plan.projectId,
versionId: plan.versionId,
name: plan.project.title,
iconUrl: plan.project.icon_url ?? undefined,
}
ctx.modal.value?.setStage('final-config')
}
return
} else if (
projectType.value?.id === 'mod' ||
projectType.value?.id === 'plugin' ||
projectType.value?.id === 'datapack'
) {
const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id)
const isDatapack = projectType.value?.id === 'datapack'
const version = versions.find((x) => {
if (!x.game_versions.includes(serverData.value!.mc_version!)) return false
if (isDatapack) return true
return x.loaders.includes(serverData.value!.loader!.toLowerCase())
})
if (!version) {
handleError(
new Error(
isDatapack
? `No compatible version found for ${serverData.value!.mc_version}`
: `No compatible version found for ${serverData.value!.mc_version} / ${serverData.value!.loader}`,
),
)
setProjectInstalling(project.project_id, false)
return
}
await installContentMutation.mutateAsync({
serverId: currentServerId.value,
projectId: version.project_id,
versionId: version.id,
})
markProjectInstalled(project.project_id)
}
},
})
} catch (e) {
console.error(e)
handleError(new Error(`Error installing content ${e}`))
if (isModpack) {
setProjectInstalling(project.project_id, false)
}
handleError(e instanceof Error ? e : new Error(`Error installing content ${e}`))
} finally {
if (!isModpack) {
setProjectInstalling(project.project_id, false)
}
}
setProjectInstalling(project.project_id, false)
}
function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
@@ -503,6 +787,7 @@ function getCardActions(
}
if (serverData.value) {
const isQueued = queuedServerInstallProjectIds.value.has(result.project_id)
const isInstalled =
projectResult.installed ||
optimisticallyInstalledProjectIds.value.has(result.project_id) ||
@@ -510,15 +795,36 @@ function getCardActions(
(serverContentData.value.addons ?? []).find((x) => x.project_id === result.project_id)) ||
serverData.value.upstream?.project_id === result.project_id
const isInstalling = installingProjectIds.value.has(result.project_id)
const isInstallingSelection = isInstallingQueuedServerInstalls.value
const validatingInstall =
isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
const installLabel = isInstalled
? formatMessage(commonMessages.installedLabel)
: isQueued
? isInstalling || isInstallingSelection
? validatingInstall
? formatMessage(commonMessages.validatingLabel)
: formatMessage(commonMessages.installingLabel)
: formatMessage(commonMessages.selectedLabel)
: isInstalling || isInstallingSelection
? validatingInstall
? formatMessage(commonMessages.validatingLabel)
: formatMessage(commonMessages.installingLabel)
: formatMessage(commonMessages.installButton)
return [
{
key: 'install',
label: isInstalling ? 'Installing...' : isInstalled ? 'Installed' : 'Install',
icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : DownloadIcon,
iconClass: isInstalling ? 'animate-spin' : undefined,
disabled: !!isInstalled || isInstalling,
color: 'brand',
label: installLabel,
icon:
isInstalling || isInstallingSelection
? SpinnerIcon
: isQueued || isInstalled
? CheckIcon
: DownloadIcon,
iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
disabled: !!isInstalled || isInstalling || isInstallingSelection,
color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
type: 'outlined',
onClick: () => serverInstall(projectResult),
},
@@ -579,15 +885,15 @@ const serverBackUrl = computed(() => {
})
const serverBackLabel = computed(() => {
if (fromContext.value === 'onboarding') return 'Back to setup'
if (fromContext.value === 'reset-server') return 'Cancel reset'
return 'Back to server'
if (fromContext.value === 'onboarding') return formatMessage(messages.backToSetup)
if (fromContext.value === 'reset-server') return formatMessage(messages.cancelReset)
return formatMessage(messages.backToServer)
})
const serverBrowseHeading = computed(() =>
fromContext.value === 'reset-server'
? 'Select modpack to install after reset'
: 'Install content to server',
? formatMessage(messages.resetModpackHeading)
: formatMessage(commonMessages.installingContentLabel),
)
const installContext = computed(() => {
@@ -603,10 +909,51 @@ const installContext = computed(() => {
backUrl: serverBackUrl.value,
backLabel: serverBackLabel.value,
heading: serverBrowseHeading.value,
queuedCount: queuedServerInstallCount.value,
selectedProjects: selectedServerInstallProjects.value,
isInstallingSelected: isInstallingQueuedServerInstalls.value,
installProgress: queuedInstallProgress.value,
clearQueued: clearQueuedServerInstalls,
clearSelected: clearQueuedServerInstalls,
onBack: flushQueuedServerInstalls,
discardSelectedAndBack: discardQueuedServerInstallsAndBack,
installSelected: installQueuedServerInstallsAndBack,
}
})
const messages = defineMessages({
unsupportedContentType: {
id: 'discover.install.error.unsupported-content-type',
defaultMessage: 'This content type cannot be installed to a server from browse.',
},
noServerWorld: {
id: 'discover.install.error.no-server-world',
defaultMessage: 'No server world is available for install.',
},
someProjectsFailedTitle: {
id: 'discover.install.error.some-projects-failed.title',
defaultMessage: 'Some projects failed to install',
},
someProjectsFailedText: {
id: 'discover.install.error.some-projects-failed.description',
defaultMessage: 'Failed projects were not added. You can try installing them again.',
},
backToSetup: {
id: 'discover.install.back-to-setup',
defaultMessage: 'Back to setup',
},
cancelReset: {
id: 'discover.install.cancel-reset',
defaultMessage: 'Cancel reset',
},
backToServer: {
id: 'discover.install.back-to-server',
defaultMessage: 'Back to server',
},
resetModpackHeading: {
id: 'discover.install.heading.reset-modpack',
defaultMessage: 'Selecting modpack to install after reset',
},
gameVersionProvidedByServer: {
id: 'search.filter.locked.server-game-version.title',
defaultMessage: 'Game version is provided by the server',
@@ -623,6 +970,21 @@ const messages = defineMessages({
id: 'search.filter.locked.server.sync',
defaultMessage: 'Sync with server',
},
seoTitle: {
id: 'discover.seo.title',
defaultMessage:
'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}',
},
seoTitleWithQuery: {
id: 'discover.seo.title-with-query',
defaultMessage:
'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} | {query}',
},
seoDescription: {
id: 'discover.seo.description',
defaultMessage:
'Search and browse thousands of Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}.',
},
gameVersionShaderMessage: {
id: 'search.filter.game-version-shader-message',
defaultMessage:
@@ -648,6 +1010,12 @@ const searchState = useBrowseSearch({
displayMode: resultsDisplayMode,
})
watch(queuedServerInstallCount, (count) => {
if (count === 0) {
hideSelectedServerInstalls.value = false
}
})
watch(
() =>
searchState.isServerType.value
@@ -673,13 +1041,16 @@ watch(
debug('calling initial refreshSearch')
searchState.refreshSearch()
const ogTitle = computed(
() =>
`Search ${projectType.value?.display ?? 'project'}s${searchState.query.value ? ' | ' + searchState.query.value : ''}`,
const ogTitle = computed(() =>
searchState.query.value
? formatMessage(messages.seoTitleWithQuery, {
projectType: projectType.value?.id ?? 'project',
query: searchState.query.value,
})
: formatMessage(messages.seoTitle, { projectType: projectType.value?.id ?? 'project' }),
)
const description = computed(
() =>
`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
const description = computed(() =>
formatMessage(messages.seoDescription, { projectType: projectType.value?.id ?? 'project' }),
)
useSeoMeta({
@@ -705,7 +1076,15 @@ provideBrowseManager({
providedFilters: serverFilters,
hideInstalled: serverHideInstalled,
showHideInstalled: computed(() => !!serverData.value && projectType.value?.id !== 'modpack'),
hideInstalledLabel: computed(() => 'Hide already installed content'),
hideInstalledLabel: computed(() => formatMessage(commonMessages.hideInstalledContentLabel)),
hideSelected: hideSelectedServerInstalls,
showHideSelected: computed(
() =>
!!serverData.value &&
projectType.value?.id !== 'modpack' &&
queuedServerInstallCount.value > 0,
),
hideSelectedLabel: computed(() => formatMessage(commonMessages.hideSelectedContentLabel)),
displayMode: resultsDisplayMode,
cycleDisplayMode: cycleSearchDisplayMode,
maxResultsOptions: currentMaxResultsOptions,
@@ -728,10 +1107,15 @@ provideBrowseManager({
<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
<div class="search-background"></div>
</Teleport>
<div v-if="installContext" class="normal-page__header mb-4 flex flex-col gap-2">
<div
v-if="installContext"
ref="stickyInstallHeaderRef"
class="normal-page__header browse-install-header-bleed sticky top-0 z-20 mb-4 flex flex-col gap-2 border-0 bg-surface-1 py-3"
>
<BrowseInstallHeader />
</div>
<aside class="normal-page__sidebar" aria-label="Filters">
<SelectedProjectsFloatingBar v-if="installContext" :install-context="installContext" />
<aside class="normal-page__sidebar" :aria-label="formatMessage(commonMessages.filtersLabel)">
<AdPlaceholder v-if="!auth.user && !serverData" />
<BrowseSidebar />
</aside>
@@ -759,6 +1143,22 @@ provideBrowseManager({
</section>
</template>
<style lang="scss" scoped>
.browse-install-header-bleed {
grid-column: 1 / -1;
margin-inline: -1.5rem;
padding-inline: 0.75rem !important;
&::after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
width: 100vw;
border-bottom: 1px solid var(--surface-5);
transform: translateX(50%);
}
}
.normal-page__content {
display: contents;

49
apps/frontend/src/pages/hosting/manage/[id]/content.vue
View File

@@ -1,33 +1,72 @@
<script setup lang="ts">
import {
commonMessages,
defineMessages,
injectModrinthClient,
injectModrinthServerContext,
ServersManageContentPage,
useVIntl,
} from '@modrinth/ui'
import { useQueryClient } from '@tanstack/vue-query'
const client = injectModrinthClient()
const { server, serverId, worldId } = injectModrinthServerContext()
const queryClient = useQueryClient()
const { formatMessage } = useVIntl()
if (worldId.value) {
const messages = defineMessages({
title: {
id: 'servers.manage.content.title',
defaultMessage: 'Content - {serverName} - Modrinth',
},
})
async function getContentWorldId() {
if (worldId.value) return worldId.value
const serverFull = await queryClient.ensureQueryData({
queryKey: ['servers', 'v1', 'detail', serverId],
queryFn: () => client.archon.servers_v1.get(serverId),
staleTime: 30_000,
})
const activeWorld = serverFull.worlds.find((world) => world.is_active)
return activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
}
const contentWorldId = await getContentWorldId()
if (contentWorldId) {
try {
await queryClient.ensureQueryData({
const content = await queryClient.ensureQueryData({
queryKey: ['content', 'list', 'v1', serverId],
queryFn: () =>
client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
client.archon.content_v1.getAddons(serverId, contentWorldId, { from_modpack: false }),
staleTime: 30_000,
})
const modpackProjectId =
content.modpack?.spec.platform === 'modrinth' ? content.modpack.spec.project_id : null
if (modpackProjectId) {
await queryClient.ensureQueryData({
queryKey: ['labrinth', 'project', modpackProjectId],
queryFn: () => client.labrinth.projects_v2.get(modpackProjectId),
staleTime: 30_000,
})
}
} catch {
// Let mounted layouts' useQuery surface errors; do not fail route setup.
}
}
useHead({
title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,
title: () =>
formatMessage(messages.title, {
serverName: server.value?.name ?? formatMessage(commonMessages.serverLabel),
}),
})
</script>
<template>
<ServersManageContentPage />
<ServersManageContentPage :owner-avatar-url-base="''" />
</template>

43
apps/frontend/src/server/routes/organization/[id]/avatar.get.ts Normal file
View File

@@ -0,0 +1,43 @@
import { type Labrinth, ModrinthApiError } from '@modrinth/api-client'
import { useServerModrinthClient } from '~/server/utils/api-client'
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id')
if (!id) {
throw createError({
statusCode: 400,
message: 'Missing organization',
})
}
const client = useServerModrinthClient({ event })
let organization: Labrinth.Organizations.v3.Organization
try {
organization = await client.labrinth.organizations_v3.get(id)
} catch (error) {
if (error instanceof ModrinthApiError && error.statusCode === 404) {
throw createError({
statusCode: 404,
message: 'Organization not found',
})
}
throw createError({
statusCode: 502,
message: 'Failed to resolve organization avatar',
})
}
if (!organization.icon_url) {
throw createError({
statusCode: 404,
message: 'Organization avatar not found',
})
}
setHeader(event, 'cache-control', 'public, max-age=300, s-maxage=600')
return sendRedirect(event, organization.icon_url, 302)
})

43
apps/frontend/src/server/routes/user/[username]/avatar.get.ts Normal file
View File

@@ -0,0 +1,43 @@
import { type Labrinth, ModrinthApiError } from '@modrinth/api-client'
import { useServerModrinthClient } from '~/server/utils/api-client'
export default defineEventHandler(async (event) => {
const username = getRouterParam(event, 'username')
if (!username) {
throw createError({
statusCode: 400,
message: 'Missing username',
})
}
const client = useServerModrinthClient({ event })
let user: Labrinth.Users.v2.User
try {
user = await client.labrinth.users_v2.get(username)
} catch (error) {
if (error instanceof ModrinthApiError && error.statusCode === 404) {
throw createError({
statusCode: 404,
message: 'User not found',
})
}
throw createError({
statusCode: 502,
message: 'Failed to resolve user avatar',
})
}
if (!user.avatar_url) {
throw createError({
statusCode: 404,
message: 'User avatar not found',
})
}
setHeader(event, 'cache-control', 'public, max-age=300, s-maxage=600')
return sendRedirect(event, user.avatar_url, 302)
})

4
apps/frontend/src/utils/router.ts
View File

@@ -9,8 +9,8 @@ export function queryAsString(query: LocationQueryValue | LocationQueryValue[]):
}
export function queryAsStringArray(
query: LocationQueryValue | LocationQueryValue[],
): string | null {
query: LocationQueryValue | LocationQueryValue[] | undefined,
): string[] {
if (query === undefined || query === null) {
return []
}

14
packages/api-client/src/modules/archon/content/v1.ts
View File

@@ -49,6 +49,20 @@ export class ArchonContentV1Module extends AbstractModule {
})
}
/** POST /v1/:server_id/worlds/:world_id/addons/install-many */
public async addAddons(
serverId: string,
worldId: string,
addons: Archon.Content.v1.AddAddonRequest[],
): Promise<void> {
await this.client.request<void>(`/servers/${serverId}/worlds/${worldId}/addons/install-many`, {
api: 'archon',
version: 1,
method: 'POST',
body: { addons } satisfies Archon.Content.v1.AddAddonsRequest,
})
}
/** POST /v1/:server_id/worlds/:world_id/addons/delete */
public async deleteAddon(
serverId: string,

4
packages/api-client/src/modules/archon/types.ts
View File

@@ -51,6 +51,10 @@ export namespace Archon {
kind?: AddonKind
}
export type AddAddonsRequest = {
addons: AddAddonRequest[]
}
export type RemoveAddonRequest = {
kind: AddonKind
filename: string

2
packages/ui/src/components/base/Checkbox.vue
View File

@@ -17,7 +17,7 @@
:class="{
'bg-brand border-button-border text-brand-inverted': modelValue,
'bg-surface-2 border-surface-5 text-primary': !modelValue,
'checkbox-shadow group-active:scale-95': disabled,
'checkbox-shadow group-active:scale-95': !disabled,
}"
>
<MinusIcon v-if="indeterminate" aria-hidden="true" stroke-width="3" />

17
packages/ui/src/components/base/FloatingActionBar.vue
View File

@@ -8,6 +8,7 @@ const props = defineProps<{
shown: boolean
ariaLabel?: string
belowModal?: boolean
hideWhenModalOpen?: boolean
}>()
const INTERCOM_BUBBLE_GAP = 8
@@ -18,7 +19,7 @@ const compact = ref(false)
const { stackCount } = useModalStack()
const pageContext = injectPageContext(null)
const shown = computed(() => props.shown)
const shown = computed(() => props.shown && (!props.hideWhenModalOpen || stackCount.value === 0))
const intercomBubbleClearanceRequestId = Symbol('floating-action-bar')
const zIndex = computed(() => 100 + stackCount.value * 10 + 8 + (!props.belowModal ? 1 : 0))
const leftOffset = computed(
@@ -82,11 +83,11 @@ function updateIntercomBubbleClearance() {
)
}
function updateBodyState(shown = props.shown) {
function updateBodyState(isShown = shown.value) {
if (typeof document === 'undefined') return
document.body.classList.toggle('floating-action-bar-shown', shown)
if (!shown) {
document.body.classList.toggle('floating-action-bar-shown', isShown)
if (!isShown) {
clearIntercomBubbleClearance()
}
}
@@ -123,10 +124,10 @@ watch(
)
watch(
() => props.shown,
async (shown) => {
shown,
async (isShown) => {
await nextTick()
updateBodyState(shown)
updateBodyState(isShown)
scheduleIntercomBubbleClearanceUpdate()
},
{ immediate: true },
@@ -175,7 +176,7 @@ onUnmounted(() => {
ref="toolbarEl"
role="toolbar"
:aria-label="ariaLabel"
class="relative overflow-clip flex items-center gap-2 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-4 py-3 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
class="relative overflow-clip flex items-center gap-1.5 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto max-w-[60vw] px-3 py-2.5 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
:class="{ 'bar-compact': compact }"
>
<slot />

133
packages/ui/src/components/servers/InstallingBanner.vue
View File

@@ -7,18 +7,13 @@
:waiting="isWaiting"
@dismiss="emit('dismiss')"
>
<template #icon>
<slot v-if="!contentError" name="icon">
<SpinnerIcon class="h-6 w-6 flex-none animate-spin text-brand-blue" />
</slot>
</template>
<template #header>
{{ contentError ? 'Installation failed' : "We're preparing your server" }}
{{ headerLabel }}
</template>
<template v-if="contentError">
{{ errorLabel }}
</template>
<template v-else-if="progress">{{ phaseLabel }}</template>
<template v-else-if="effectivePhase">{{ phaseLabel }}</template>
<div v-else class="ticker-container">
<div class="ticker-content">
<div
@@ -35,7 +30,7 @@
<ButtonStyled color="red" type="outlined">
<button class="!border" type="button" @click="emit('retry')">
<RotateCounterClockwiseIcon class="size-5" />
Retry
{{ formatMessage(commonMessages.retryButton) }}
</button>
</ButtonStyled>
</template>
@@ -44,9 +39,11 @@
<script setup lang="ts">
import { RotateCounterClockwiseIcon } from '@modrinth/assets'
import SpinnerIcon from '@modrinth/assets/icons/spinner.svg'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
import Admonition from '../base/Admonition.vue'
import ButtonStyled from '../base/ButtonStyled.vue'
@@ -62,6 +59,7 @@ export interface ContentError {
const props = defineProps<{
progress?: SyncProgress | null
fallbackPhase?: SyncProgress['phase'] | null
contentError?: ContentError | null
dismissible?: boolean
}>()
@@ -71,44 +69,123 @@ const emit = defineEmits<{
dismiss: []
}>()
const { formatMessage } = useVIntl()
const messages = defineMessages({
errorHeader: {
id: 'servers.installing-banner.error.header',
defaultMessage: 'Installation failed',
},
preparingHeader: {
id: 'servers.installing-banner.preparing.header',
defaultMessage: "We're preparing your server",
},
invalidLoaderVersionError: {
id: 'servers.installing-banner.error.invalid-loader-version',
defaultMessage:
'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.',
},
unsupportedLoaderVersionError: {
id: 'servers.installing-banner.error.unsupported-loader-version',
defaultMessage: 'This version of Minecraft or loader is not yet supported by Modrinth Hosting.',
},
internalPlatformError: {
id: 'servers.installing-banner.error.internal-platform',
defaultMessage: 'An internal error occurred while installing the platform. Please try again.',
},
noPrimaryFileError: {
id: 'servers.installing-banner.error.no-primary-file',
defaultMessage:
'This modpack version does not include a downloadable file. It may have been packaged incorrectly.',
},
modpackInstallFailedError: {
id: 'servers.installing-banner.error.modpack-install-failed',
defaultMessage: 'The modpack could not be installed. It may be corrupted or incompatible.',
},
unknownError: {
id: 'servers.installing-banner.error.unknown',
defaultMessage: 'An unexpected error occurred during installation.',
},
installingPlatform: {
id: 'servers.installing-banner.phase.installing-platform',
defaultMessage: 'Installing platform...',
},
installingModpack: {
id: 'servers.installing-banner.phase.installing-modpack',
defaultMessage: 'Installing modpack...',
},
installingAddons: {
id: 'servers.installing-banner.phase.installing-addons',
defaultMessage: 'Installing addons...',
},
tickerOrganizingFiles: {
id: 'servers.installing-banner.ticker.organizing-files',
defaultMessage: 'Organizing files...',
},
tickerDownloadingMods: {
id: 'servers.installing-banner.ticker.downloading-mods',
defaultMessage: 'Downloading mods...',
},
tickerConfiguringServer: {
id: 'servers.installing-banner.ticker.configuring-server',
defaultMessage: 'Configuring server...',
},
tickerSettingUpEnvironment: {
id: 'servers.installing-banner.ticker.setting-up-environment',
defaultMessage: 'Setting up environment...',
},
tickerAddingJava: {
id: 'servers.installing-banner.ticker.adding-java',
defaultMessage: 'Adding Java...',
},
})
const errorLabel = computed(() => {
const desc = props.contentError?.description?.toLowerCase()
const step = props.contentError?.step
if (step === 'modloader') {
if (desc === 'the specified version may be incorrect') {
return 'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.'
return formatMessage(messages.invalidLoaderVersionError)
}
if (desc === 'this version is not yet supported') {
return 'This version of Minecraft or loader is not yet supported by Modrinth Hosting.'
return formatMessage(messages.unsupportedLoaderVersionError)
}
if (desc === 'internal error') {
return 'An internal error occurred while installing the platform. Please try again.'
return formatMessage(messages.internalPlatformError)
}
}
if (step === 'modpack') {
if (desc?.includes('no primary file')) {
return 'This modpack version does not include a downloadable file. It may have been packaged incorrectly.'
return formatMessage(messages.noPrimaryFileError)
}
if (desc?.includes('failed to install')) {
return 'The modpack could not be installed. It may be corrupted or incompatible.'
return formatMessage(messages.modpackInstallFailedError)
}
}
return props.contentError?.description ?? 'An unexpected error occurred during installation.'
return props.contentError?.description ?? formatMessage(messages.unknownError)
})
const effectivePhase = computed(() => props.progress?.phase ?? props.fallbackPhase ?? null)
const headerLabel = computed(() => {
if (props.contentError) return formatMessage(messages.errorHeader)
if (effectivePhase.value === 'Addons') return formatMessage(commonMessages.installingContentLabel)
return formatMessage(messages.preparingHeader)
})
const phaseLabel = computed(() => {
switch (props.progress?.phase) {
switch (effectivePhase.value) {
case 'InstallingLoader':
return 'Installing platform...'
return formatMessage(messages.installingPlatform)
case 'InstallingPack':
return 'Installing modpack...'
return formatMessage(messages.installingModpack)
case 'Addons':
return 'Installing addons...'
return formatMessage(messages.installingAddons)
default:
return 'Installing...'
return formatMessage(commonMessages.installingLabel)
}
})
@@ -122,13 +199,13 @@ const isWaiting = computed(() => {
return !props.progress || props.progress.percent <= 0
})
const tickerMessages = [
'Organizing files...',
'Downloading mods...',
'Configuring server...',
'Setting up environment...',
'Adding Java...',
]
const tickerMessages = computed(() => [
formatMessage(messages.tickerOrganizingFiles),
formatMessage(messages.tickerDownloadingMods),
formatMessage(messages.tickerConfiguringServer),
formatMessage(messages.tickerSettingUpEnvironment),
formatMessage(messages.tickerAddingJava),
])
const currentIndex = ref(0)
@@ -136,7 +213,7 @@ let intervalId: ReturnType<typeof setInterval> | null = null
onMounted(() => {
intervalId = setInterval(() => {
currentIndex.value = (currentIndex.value + 1) % tickerMessages.length
currentIndex.value = (currentIndex.value + 1) % tickerMessages.value.length
}, 3000)
})

20
packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
View File

@@ -6,7 +6,6 @@ import Admonition from '#ui/components/base/Admonition.vue'
import StackedAdmonitions, {
type StackedAdmonitionItem,
} from '#ui/components/base/StackedAdmonitions.vue'
import { ServerIcon } from '#ui/components/servers/icons'
import InstallingBanner, {
type ContentError,
type SyncProgress,
@@ -23,7 +22,6 @@ import UploadAdmonition from './UploadAdmonition.vue'
const props = defineProps<{
syncProgress?: SyncProgress | null
contentError?: ContentError | null
serverImage?: string
}>()
const emit = defineEmits<{
@@ -59,7 +57,13 @@ const isOnContentTab = computed(() => route.path.includes('/content'))
const isOnFilesTab = computed(() => route.path.includes('/files'))
const bannerCoversInstalling = computed(
() => ctx.server.value?.status === 'installing' || ctx.isSyncingContent.value,
() =>
ctx.server.value?.status === 'installing' ||
ctx.isSyncingContent.value ||
ctx.busyReasons.value.some(
(r) =>
r.reason.id === 'servers.busy.installing' || r.reason.id === 'servers.busy.syncing-content',
),
)
function isBackupReason(id: string) {
@@ -165,8 +169,7 @@ type ServerAdmonitionItem = StackedAdmonitionItem & {
const showInstallingBanner = computed(() => {
if (!ctx.server.value) return false
const installing =
ctx.server.value.status === 'installing' || ctx.isSyncingContent.value || !!props.contentError
const installing = bannerCoversInstalling.value || !!props.contentError
if (!installing) return false
if (contentErrorKey.value && dismissedContentErrorKey.value === contentErrorKey.value)
return false
@@ -366,15 +369,12 @@ function onContentErrorDismiss() {
<InstallingBanner
v-if="item.kind === 'installing'"
:progress="syncProgress"
:fallback-phase="isOnContentTab && !syncProgress ? 'Addons' : null"
:content-error="contentError"
:dismissible="dismissible && !!contentError"
@dismiss="onContentErrorDismiss"
@retry="emit('content-retry')"
>
<template #icon>
<ServerIcon :image="serverImage" class="!h-6 !w-6" />
</template>
</InstallingBanner>
/>
<UploadAdmonition v-else-if="item.kind === 'upload'" />
<FileOperationAdmonition
v-else-if="item.kind === 'fs-op'"

14
packages/ui/src/components/servers/server-header/use-server-power-action.ts
View File

@@ -12,10 +12,20 @@ export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
const { formatMessage } = useVIntl()
const client = injectModrinthClient()
const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
const { serverId, server, powerState, isSyncingContent, busyReasons } =
injectModrinthServerContext()
const { addNotification } = injectNotificationManager()
const isInstalling = computed(() => server.value.status === 'installing')
const isInstalling = computed(
() =>
server.value.status === 'installing' ||
isSyncingContent.value ||
busyReasons.value.some(
(r) =>
r.reason.id === 'servers.busy.installing' ||
r.reason.id === 'servers.busy.syncing-content',
),
)
const isRunning = computed(() => powerState.value === 'running')
const isStopping = computed(() => powerState.value === 'stopping')
const isStarting = computed(() => powerState.value === 'starting')

14
packages/ui/src/composables/virtual-scroll.ts
View File

@@ -4,13 +4,21 @@ import { computed, ref, watch, watchEffect } from 'vue'
export interface VirtualScrollOptions {
itemHeight: number
bufferSize?: number
initialItemCount?: number
enabled?: Ref<boolean>
onNearEnd?: () => void
nearEndThreshold?: number
}
export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptions) {
const { itemHeight, bufferSize = 5, enabled, onNearEnd, nearEndThreshold = 0.2 } = options
const {
itemHeight,
bufferSize = 5,
initialItemCount = 20,
enabled,
onNearEnd,
nearEndThreshold = 0.2,
} = options
const listContainer = ref<HTMLElement | null>(null)
const scrollContainer = ref<HTMLElement | Window | null>(null)
@@ -68,7 +76,9 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
return { start: 0, end: items.value.length }
}
if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
if (!listContainer.value || !scrollContainer.value) {
return { start: 0, end: Math.min(items.value.length, initialItemCount) }
}
const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset.value)

137
packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<FloatingActionBar
:shown="shown"
:aria-label="formatMessage(messages.ariaLabel)"
hide-when-modal-open
>
<div class="flex min-w-0 items-center gap-0.5">
<div
v-if="selectedCount > 0"
class="relative h-8 shrink-0"
:style="{ width: `${iconStackWidth}px` }"
aria-hidden="true"
>
<div
v-for="(project, index) in visibleProjects"
:key="project.id"
v-tooltip="project.name"
class="absolute top-0 flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4"
:style="{ left: `${index * iconStackOffset}px`, zIndex: visibleProjects.length - index }"
>
<Avatar
:src="project.iconUrl"
:alt="project.name"
:tint-by="project.id"
size="100%"
no-shadow
class="selected-project-avatar"
/>
</div>
<div
v-if="overflowCount > 0"
class="absolute top-0 flex h-8 w-8 items-center justify-center rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4 text-xs font-bold text-contrast"
:style="{ left: `${visibleProjects.length * iconStackOffset}px`, zIndex: 0 }"
>
+{{ overflowCount }}
</div>
</div>
<span class="px-3 py-2 text-base font-semibold text-contrast tabular-nums">
{{ selectedCountText }}
</span>
<div class="mx-0.5 h-6 w-px bg-surface-5" />
<ButtonStyled type="transparent">
<button
type="button"
class="!text-primary"
:disabled="isInstallingSelected"
@click="clearSelected"
>
<span>{{ formatMessage(commonMessages.clearButton) }}</span>
</button>
</ButtonStyled>
</div>
<div class="ml-auto shrink-0">
<ButtonStyled color="green">
<button type="button" :disabled="isInstallingSelected" @click="installSelected">
<PlusIcon />
{{ installButtonText }}
</button>
</ButtonStyled>
</div>
</FloatingActionBar>
</template>
<script setup lang="ts">
import { PlusIcon } from '@modrinth/assets'
import { computed } from 'vue'
import Avatar from '#ui/components/base/Avatar.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
import { injectBrowseManager } from '../providers/browse-manager'
import type { BrowseInstallContext } from '../types'
const { formatMessage } = useVIntl()
const messages = defineMessages({
ariaLabel: {
id: 'browse.selected-projects-floating-bar.aria-label',
defaultMessage: 'Selected projects',
},
selectedCount: {
id: 'browse.selected-projects-floating-bar.selected-count',
defaultMessage: '{count, plural, one {# project selected} other {# projects selected}}',
},
installButton: {
id: 'browse.selected-projects-floating-bar.install',
defaultMessage: 'Install {count, plural, one {# project} other {# projects}}',
},
})
const props = defineProps<{
installContext?: BrowseInstallContext | null
}>()
const ctx = injectBrowseManager(null)
const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
const selectedProjects = computed(() => installContext.value?.selectedProjects ?? [])
const selectedCount = computed(() => selectedProjects.value.length)
const iconStackOffset = 24
const isInstallingSelected = computed(() => installContext.value?.isInstallingSelected ?? false)
const shown = computed(() => selectedCount.value > 0 && !isInstallingSelected.value)
const visibleProjects = computed(() => selectedProjects.value.slice(0, 3))
const overflowCount = computed(() => Math.max(0, selectedCount.value - 3))
const iconStackWidth = computed(() => {
if (selectedCount.value === 0) return 0
return (
32 + (visibleProjects.value.length - 1 + (overflowCount.value > 0 ? 1 : 0)) * iconStackOffset
)
})
const selectedCountText = computed(() =>
formatMessage(messages.selectedCount, { count: selectedCount.value }),
)
const installButtonText = computed(() =>
formatMessage(messages.installButton, { count: selectedCount.value }),
)
function clearSelected() {
if (isInstallingSelected.value) return
void (installContext.value?.clearSelected ?? installContext.value?.clearQueued)?.()
}
function installSelected() {
if (isInstallingSelected.value) return
void installContext.value?.installSelected?.()
}
</script>
<style scoped>
:deep(.selected-project-avatar) {
background-color: var(--color-button-bg);
}
</style>

87
packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
<div class="flex flex-col gap-6">
{{ formatMessage(messages.admonitionBody, { count }) }}
</div>
<template #actions>
<div class="flex flex-wrap justify-end gap-2">
<ButtonStyled type="outlined">
<button @click="resolve('cancel')">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="red">
<button :disabled="installing" @click="resolve('discard')">
<TrashIcon />
{{ formatMessage(messages.discardButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="green">
<button :disabled="installing" @click="resolve('install')">
<PlusIcon />
{{ formatMessage(commonMessages.installButton) }}
</button>
</ButtonStyled>
</div>
</template>
</NewModal>
</template>
<script setup lang="ts">
import { PlusIcon, TrashIcon, XIcon } from '@modrinth/assets'
import { ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
const { formatMessage } = useVIntl()
const messages = defineMessages({
header: {
id: 'browse.selected-projects-leave-modal.header',
defaultMessage: 'Selected projects not installed yet',
},
admonitionHeader: {
id: 'browse.selected-projects-leave-modal.admonition-header',
defaultMessage: 'Selected projects not installed yet',
},
admonitionBody: {
id: 'browse.selected-projects-leave-modal.admonition-body',
defaultMessage:
'You have selected {count, plural, one {# project} other {# projects}} to install. Install them now or go back without installing them.',
},
discardButton: {
id: 'browse.selected-projects-leave-modal.discard',
defaultMessage: 'Discard',
},
})
defineProps<{
count: number
installing?: boolean
}>()
type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
const modal = ref<InstanceType<typeof NewModal>>()
let resolvePromise: ((value: SelectedProjectsLeaveResult) => void) | null = null
function prompt(): Promise<SelectedProjectsLeaveResult> {
return new Promise((resolve) => {
resolvePromise = resolve
modal.value?.show()
})
}
function resolve(result: SelectedProjectsLeaveResult) {
modal.value?.hide()
resolvePromise?.(result)
resolvePromise = null
}
defineExpose({ prompt })
</script>

1
packages/ui/src/layouts/shared/browse-tab/composables/index.ts
View File

@@ -1 +1,2 @@
export * from './install-logic'
export * from './use-browse-search'

540
packages/ui/src/layouts/shared/browse-tab/composables/install-logic.ts Normal file
View File

@@ -0,0 +1,540 @@
import type { Labrinth } from '@modrinth/api-client'
import type { FilterValue } from '#ui/utils/search'
export type BrowseInstallContentType = 'modpack' | 'mod' | 'plugin' | 'datapack'
export type BrowseInstallAddonContentType = Exclude<BrowseInstallContentType, 'modpack'>
/**
* Indicates why a concrete version was selected.
*
* `filtered` means the current browse filters resolved the version.
* `target` means filter resolution failed or matched the target exactly, so the server/instance target won.
*/
export type BrowseInstallPlanSource = 'filtered' | 'target'
/**
* Version constraints used during install resolution.
*
* Empty arrays and blank values are normalized away, so missing properties mean "do not constrain".
*/
export interface BrowseInstallPreferences {
gameVersions?: string[]
loaders?: string[]
}
/**
* Server or instance metadata that should be used as the fallback compatibility target.
*/
export interface BrowseInstallTarget {
gameVersion?: string | null
loader?: string | null
}
/**
* Minimal project shape needed by shared install resolution.
*/
export interface BrowseInstallProject {
project_id: string
latest_version?: string | null
version_id?: string | null
title?: string
name?: string
icon_url?: string | null
}
/**
* Fully resolved install work item.
*
* This is intentionally concrete so queued installs can be flushed later without re-resolving
* against filters that may have changed since the user clicked install.
*/
export interface BrowseInstallPlan<TProject extends BrowseInstallProject = BrowseInstallProject> {
project: TProject
projectId: string
versionId: string
versionName?: string
versionNumber?: string
fileName?: string
contentType: BrowseInstallContentType
preferences: BrowseInstallPreferences
source: BrowseInstallPlanSource
}
/**
* Small adapter around caller-owned queue state.
*
* Callers keep their own reactive storage; shared logic only replaces the whole map.
*/
export interface BrowseInstallQueue<TProject extends BrowseInstallProject = BrowseInstallProject> {
get: () => Map<string, BrowseInstallPlan<TProject>>
set: (plans: Map<string, BrowseInstallPlan<TProject>>) => void
}
/**
* Filter inputs for deriving selected install preferences.
*
* Provided filters come from a target context, and overridden filter types are ignored so user
* choices can replace the target-provided constraints.
*/
export interface SelectedInstallPreferencesOptions {
contentType: string
selectedFilters?: readonly FilterValue[]
providedFilters?: readonly FilterValue[]
overriddenProvidedFilterTypes?: readonly string[]
}
/**
* Inputs for resolving one concrete install plan.
*
* Version fetching is injected so this module stays platform-agnostic and can be used by both web
* and app frontends.
*/
export interface ResolveInstallPlanOptions<
TProject extends BrowseInstallProject,
> extends SelectedInstallPreferencesOptions {
project: TProject
contentType: BrowseInstallContentType
targetPreferences?: BrowseInstallPreferences
getProjectVersions: (projectId: string) => Promise<Labrinth.Versions.v2.Version[]>
}
/**
* Install request wrapper around plan resolution.
*
* Queue mode stores the resolved plan; immediate mode passes it to the caller's install handler.
*/
export interface RequestInstallOptions<
TProject extends BrowseInstallProject,
> extends ResolveInstallPlanOptions<TProject> {
mode: 'queue' | 'immediate'
queue?: BrowseInstallQueue<TProject>
install?: (plan: BrowseInstallPlan<TProject>) => void | Promise<void>
}
/**
* Inputs for committing queued plans without re-running version matching.
*/
export interface FlushInstallQueueOptions<TProject extends BrowseInstallProject> {
queue: BrowseInstallQueue<TProject>
install: (plan: BrowseInstallPlan<TProject>) => void | Promise<void>
onError?: (error: unknown, plan: BrowseInstallPlan<TProject>) => void
onProgress?: (
completed: number,
total: number,
plan: BrowseInstallPlan<TProject>,
) => void | Promise<void>
}
/**
* Result of a queue flush. Failed plans are also written back to the queue.
*/
export interface FlushInstallQueueResult<TProject extends BrowseInstallProject> {
ok: boolean
successfulPlans: BrowseInstallPlan<TProject>[]
failedPlans: Map<string, BrowseInstallPlan<TProject>>
}
interface InstallCandidate {
preferences: BrowseInstallPreferences
source: BrowseInstallPlanSource
}
/**
* Maps a project/content type to the browse filter keys that represent its loader.
*/
export function getLoaderFilterTypes(contentType: string) {
if (contentType === 'mod') return ['mod_loader']
if (contentType === 'plugin') return ['plugin_loader', 'plugin_platform']
if (contentType === 'modpack') return ['modpack_loader']
if (contentType === 'shader') return ['shader_loader']
return []
}
/**
* Merges user-selected filters with target-provided filters for install decisions.
*
* User filters win per filter type, provided filters are dropped when overridden, and negative
* filters are excluded because they are browse-only constraints.
*/
export function getEffectiveInstallFilters({
selectedFilters = [],
providedFilters = [],
overriddenProvidedFilterTypes = [],
}: Omit<SelectedInstallPreferencesOptions, 'contentType'>) {
const effectiveProvidedFilters = providedFilters.filter(
(providedFilter) => !overriddenProvidedFilterTypes.includes(providedFilter.type),
)
const userFilters = selectedFilters.filter(
(userFilter) =>
!effectiveProvidedFilters.some((providedFilter) => providedFilter.type === userFilter.type),
)
return [...userFilters, ...effectiveProvidedFilters].filter((filter) => !filter.negative)
}
/**
* Converts effective browse filters into install preferences for a specific content type.
*/
export function getInstallPreferencesFromFilters(
contentType: string,
filters: readonly FilterValue[],
): BrowseInstallPreferences {
const loaderFilterTypes = getLoaderFilterTypes(contentType)
const gameVersions = uniqueDefined(
filters.filter((filter) => filter.type === 'game_version').map((filter) => filter.option),
)
const loaders = uniqueDefined(
filters
.filter((filter) => loaderFilterTypes.includes(filter.type))
.map((filter) => filter.option),
)
return normalizeInstallPreferences({
gameVersions: gameVersions.length > 0 ? gameVersions : undefined,
loaders: loaders.length > 0 ? loaders : undefined,
})
}
/**
* Derives the preferences represented by the current browse selection plus active provided filters.
*/
export function getSelectedInstallPreferences(
options: SelectedInstallPreferencesOptions,
): BrowseInstallPreferences {
return getInstallPreferencesFromFilters(options.contentType, getEffectiveInstallFilters(options))
}
/**
* Converts server/instance metadata into fallback install preferences.
*/
export function getTargetInstallPreferences(
target: BrowseInstallTarget,
contentType?: string,
): BrowseInstallPreferences {
const gameVersion = target.gameVersion?.trim()
const loader = target.loader?.trim()
const shouldUseTargetRuntime = contentType !== 'modpack'
return normalizeInstallPreferences({
gameVersions: gameVersion && shouldUseTargetRuntime ? [gameVersion] : undefined,
loaders: loader && shouldUseTargetRuntime ? [loader] : undefined,
})
}
/**
* Normalizes loader identifiers so API and UI aliases compare consistently.
*/
export function normalizeLoaderAlias(loader: string) {
return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
}
/**
* Returns aliases that should be considered mutually compatible for install matching.
*/
export function getCompatibleLoaderAliases(loader: string) {
const normalized = normalizeLoaderAlias(loader)
if (!normalized) return new Set<string>()
if (['paper', 'purpur', 'spigot', 'bukkit'].includes(normalized)) {
return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
}
if (normalized === 'neoforge' || normalized === 'neo') {
return new Set(['neoforge', 'neo'])
}
return new Set([normalized])
}
/**
* Checks whether selected filters conflict with the target constraints.
*/
export function preferencesDiffer(
selected: BrowseInstallPreferences,
target: BrowseInstallPreferences,
) {
return (
preferencesConflict(selected.gameVersions, target.gameVersions) ||
loaderPreferencesConflict(selected.loaders, target.loaders)
)
}
/**
* Fills missing selected preferences from the target.
*
* This preserves the user's explicit filter choices while still constraining unconstrained axes to
* the server/instance target.
*/
export function mergeInstallPreferences(
selected: BrowseInstallPreferences,
target: BrowseInstallPreferences,
): BrowseInstallPreferences {
return normalizeInstallPreferences({
gameVersions: selected.gameVersions?.length ? selected.gameVersions : target.gameVersions,
loaders: selected.loaders?.length ? selected.loaders : target.loaders,
})
}
/**
* Finds the newest version matching the given preferences.
*/
export function getLatestMatchingInstallVersion(
versions: readonly Labrinth.Versions.v2.Version[],
preferences: BrowseInstallPreferences,
contentType: string,
) {
return [...versions]
.filter((version) => versionMatchesPreferences(version, preferences, contentType))
.sort((a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime())[0]
}
/**
* Resolves the concrete version to install.
*
* The resolver tries the filtered plan first, with target values filling any missing axes. If that
* cannot resolve and differs from the target, it falls back to the target-only plan.
*/
export async function resolveInstallPlan<TProject extends BrowseInstallProject>(
options: ResolveInstallPlanOptions<TProject>,
): Promise<BrowseInstallPlan<TProject>> {
const projectId = options.project.project_id
if (!projectId) {
throw new Error('No project is available for install.')
}
const selectedPreferences = getSelectedInstallPreferences(options)
const targetPreferences = normalizeInstallPreferences(options.targetPreferences)
const candidates = getInstallCandidates(selectedPreferences, targetPreferences)
const versions = await options.getProjectVersions(projectId)
let lastError: Error | null = null
for (const candidate of candidates) {
const version = getLatestMatchingInstallVersion(
versions,
candidate.preferences,
options.contentType,
)
if (version) {
const fileName =
version.files.find((file) => file.primary)?.filename ?? version.files[0]?.filename
return {
project: options.project,
projectId,
versionId: version.id,
versionName: version.name,
versionNumber: version.version_number,
fileName,
contentType: options.contentType,
preferences: candidate.preferences,
source: candidate.source,
}
}
lastError = createNoCompatibleVersionError(options.contentType, candidate.preferences)
}
throw lastError ?? new Error('No version found for this project.')
}
/**
* Resolves and either queues or immediately installs a project.
*
* Queue replacement is keyed by project ID, so clicking install again after changing filters
* replaces the previously resolved plan.
*/
export async function requestInstall<TProject extends BrowseInstallProject>(
options: RequestInstallOptions<TProject>,
) {
const plan = await resolveInstallPlan(options)
if (options.mode === 'queue') {
if (!options.queue) {
throw new Error('No install queue is available.')
}
const nextPlans = new Map(options.queue.get())
nextPlans.set(plan.projectId, plan)
options.queue.set(nextPlans)
return plan
}
await options.install?.(plan)
return plan
}
/**
* Commits queued install plans exactly as stored.
*
* Successful plans are removed; failed plans remain in the queue for retry or user action.
*/
export async function flushInstallQueue<TProject extends BrowseInstallProject>({
queue,
install,
onError,
onProgress,
}: FlushInstallQueueOptions<TProject>): Promise<FlushInstallQueueResult<TProject>> {
const queuedPlans = Array.from(queue.get().values())
const failedPlans = new Map<string, BrowseInstallPlan<TProject>>()
const successfulPlans: BrowseInstallPlan<TProject>[] = []
let completed = 0
for (const plan of queuedPlans) {
try {
await install(plan)
successfulPlans.push(plan)
} catch (error) {
failedPlans.set(plan.projectId, plan)
onError?.(error, plan)
} finally {
completed++
await onProgress?.(completed, queuedPlans.length, plan)
}
}
queue.set(failedPlans)
return {
ok: failedPlans.size === 0,
successfulPlans,
failedPlans,
}
}
/**
* Builds the ordered resolution attempts for an install request.
*/
function getInstallCandidates(
selectedPreferences: BrowseInstallPreferences,
targetPreferences: BrowseInstallPreferences,
): InstallCandidate[] {
const filteredPreferences = mergeInstallPreferences(selectedPreferences, targetPreferences)
const candidates: InstallCandidate[] = []
if (hasPreferences(filteredPreferences)) {
candidates.push({
preferences: filteredPreferences,
source: preferencesEquivalent(selectedPreferences, targetPreferences) ? 'target' : 'filtered',
})
} else {
candidates.push({ preferences: {}, source: 'filtered' })
}
if (
hasPreferences(targetPreferences) &&
preferencesDiffer(filteredPreferences, targetPreferences)
) {
candidates.push({ preferences: targetPreferences, source: 'target' })
}
return candidates
}
function hasPreferences(preferences: BrowseInstallPreferences) {
return !!preferences.gameVersions?.length || !!preferences.loaders?.length
}
function versionMatchesPreferences(
version: Labrinth.Versions.v2.Version,
preferences: BrowseInstallPreferences,
contentType: string,
) {
const gameVersionMatches =
!preferences.gameVersions?.length ||
version.game_versions.some((gameVersion) => preferences.gameVersions?.includes(gameVersion))
if (!gameVersionMatches) return false
if (contentType === 'datapack') return true
if (!preferences.loaders?.length) return true
const compatibleLoaders = getCompatibleLoaderAliasSet(preferences.loaders)
return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoaderAlias(loader)))
}
function preferencesConflict(
selected: readonly string[] | undefined,
target: readonly string[] | undefined,
) {
if (!selected?.length || !target?.length) return false
return !selected.some((value) => target.includes(value))
}
function loaderPreferencesConflict(
selected: readonly string[] | undefined,
target: readonly string[] | undefined,
) {
if (!selected?.length || !target?.length) return false
const selectedLoaders = getCompatibleLoaderAliasSet(selected)
const targetLoaders = getCompatibleLoaderAliasSet(target)
return !Array.from(selectedLoaders).some((loader) => targetLoaders.has(loader))
}
function preferencesEquivalent(
selected: BrowseInstallPreferences,
target: BrowseInstallPreferences,
) {
return (
valueSetsEquivalent(selected.gameVersions, target.gameVersions) &&
loaderSetsEquivalent(selected.loaders, target.loaders)
)
}
function valueSetsEquivalent(
selected: readonly string[] | undefined,
target: readonly string[] | undefined,
) {
return setsEquivalent(new Set(selected ?? []), new Set(target ?? []))
}
function loaderSetsEquivalent(
selected: readonly string[] | undefined,
target: readonly string[] | undefined,
) {
return setsEquivalent(
getCompatibleLoaderAliasSet(selected ?? []),
getCompatibleLoaderAliasSet(target ?? []),
)
}
function getCompatibleLoaderAliasSet(loaders: readonly string[]) {
const aliases = new Set<string>()
for (const loader of loaders) {
for (const alias of getCompatibleLoaderAliases(loader)) {
aliases.add(alias)
}
}
return aliases
}
function setsEquivalent(a: Set<string>, b: Set<string>) {
if (a.size !== b.size) return false
return Array.from(a).every((value) => b.has(value))
}
function normalizeInstallPreferences(
preferences?: BrowseInstallPreferences,
): BrowseInstallPreferences {
return {
gameVersions: uniqueDefined(preferences?.gameVersions),
loaders: uniqueDefined(preferences?.loaders),
}
}
function uniqueDefined(values: readonly (string | null | undefined)[] = []) {
return Array.from(
new Set(values.map((value) => value?.trim()).filter((value): value is string => !!value)),
)
}
function createNoCompatibleVersionError(
contentType: BrowseInstallContentType,
preferences: BrowseInstallPreferences,
) {
const versionLabel = preferences.gameVersions?.length
? preferences.gameVersions.join(', ')
: 'any game version'
const loaderLabel = preferences.loaders?.length ? preferences.loaders.join(', ') : 'any loader'
return new Error(
contentType === 'datapack'
? `No compatible version found for ${versionLabel}.`
: `No compatible version found for ${versionLabel} / ${loaderLabel}.`,
)
}

127
packages/ui/src/layouts/shared/browse-tab/header.vue
View File

@@ -1,22 +1,29 @@
<script setup lang="ts">
import { GameIcon, LeftArrowIcon, MinecraftServerIcon } from '@modrinth/assets'
import { computed } from 'vue'
import { LeftArrowIcon } from '@modrinth/assets'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import Admonition from '#ui/components/base/Admonition.vue'
import Avatar from '#ui/components/base/Avatar.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import ContentPageHeader from '#ui/components/base/ContentPageHeader.vue'
import { useServerImage } from '#ui/composables/use-server-image'
import { formatLoaderLabel } from '#ui/utils/loaders'
import SelectedProjectsLeaveModal from './components/SelectedProjectsLeaveModal.vue'
import { injectBrowseManager } from './providers/browse-manager'
import type { BrowseInstallContext } from './types'
const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
const ctx = injectBrowseManager()
const router = useRouter()
const installContext = computed(() => ctx.installContext?.value ?? null)
const props = defineProps<{
installContext?: BrowseInstallContext | null
}>()
type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
const ctx = injectBrowseManager(null)
const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
const selectedProjectsLeaveModal = ref<InstanceType<typeof SelectedProjectsLeaveModal>>()
const serverId = computed(() => installContext.value?.serverId ?? '')
const upstream = computed(() => installContext.value?.upstream ?? null)
@@ -27,35 +34,97 @@ const { image: fetchedIcon } = useServerImage(serverId, upstream, {
const iconSrc = computed(() => {
if (installContext.value?.isMedal) return MEDAL_ICON_URL
return fetchedIcon.value ?? installContext.value?.iconSrc ?? MinecraftServerIcon
return fetchedIcon.value ?? installContext.value?.iconSrc ?? null
})
const metadataItems = computed(() => {
const context = installContext.value
if (!context) return []
return [
context.heading,
context.gameVersion ? `MC ${context.gameVersion}` : '',
context.loader ? formatLoaderLabel(context.loader) : '',
].filter(Boolean)
})
const selectedCount = computed(() => installContext.value?.selectedProjects?.length ?? 0)
const isInstallingSelected = computed(() => installContext.value?.isInstallingSelected ?? false)
async function handleBack() {
const context = installContext.value
if (!context) return
if (selectedCount.value > 0 && !isInstallingSelected.value) {
const result = await selectedProjectsLeaveModal.value?.prompt()
await handleSelectedProjectsLeaveResult(result ?? 'cancel', context)
return
}
const shouldNavigate = await context.onBack?.()
if (shouldNavigate === false) return
await router.push(context.backUrl)
}
async function handleSelectedProjectsLeaveResult(
result: SelectedProjectsLeaveResult,
context: BrowseInstallContext,
) {
if (result === 'cancel') return
if (result === 'install') {
const shouldNavigate = await context.installSelected?.()
if (shouldNavigate === false) return
return
}
if (context.discardSelectedAndBack) {
await context.discardSelectedAndBack()
return
}
await (context.clearSelected ?? context.clearQueued)?.()
await router.push(context.backUrl)
}
</script>
<template>
<template v-if="installContext">
<ContentPageHeader class="mb-2">
<template #icon>
<Avatar :src="iconSrc" size="64px" />
</template>
<template #title>
{{ installContext.name }}
</template>
<template #summary>
<span class="flex items-center gap-2 text-sm font-semibold text-secondary">
<GameIcon class="h-5 w-5 text-secondary" />
{{ formatLoaderLabel(installContext.loader) }} {{ installContext.gameVersion }}
</span>
</template>
<template #actions>
<ButtonStyled>
<button @click="router.push(installContext.backUrl)">
<LeftArrowIcon />
{{ installContext.backLabel }}
</button>
</ButtonStyled>
</template>
</ContentPageHeader>
<h1 class="m-0 mb-1 text-xl font-extrabold">{{ installContext.heading }}</h1>
<SelectedProjectsLeaveModal
ref="selectedProjectsLeaveModal"
:count="selectedCount"
:installing="isInstallingSelected"
/>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex min-w-0 items-center gap-4">
<ButtonStyled circular size="large">
<button :aria-label="installContext.backLabel" @click="handleBack">
<LeftArrowIcon />
</button>
</ButtonStyled>
<Avatar v-if="iconSrc" :src="iconSrc" size="48px" class="shrink-0" />
<div class="flex min-w-0 flex-col justify-center gap-1">
<h1 class="m-0 truncate text-2xl font-semibold leading-8 text-contrast">
{{ installContext.name }}
</h1>
<div
v-if="metadataItems.length"
class="flex flex-wrap items-center gap-2 text-base font-medium leading-6 text-primary"
>
<template v-for="(item, index) in metadataItems" :key="item">
<span
v-if="index > 0"
class="h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-60"
/>
<span>{{ item }}</span>
</template>
</div>
</div>
</div>
</div>
</div>
<Admonition v-if="installContext.warning" type="warning" class="mb-1">
{{ installContext.warning }}
</Admonition>

1
packages/ui/src/layouts/shared/browse-tab/index.ts
View File

@@ -1,3 +1,4 @@
export { default as SelectedProjectsFloatingBar } from './components/SelectedProjectsFloatingBar.vue'
export * from './composables'
export { default as BrowseInstallHeader } from './header.vue'
export { default as BrowsePageLayout } from './layout.vue'

63
packages/ui/src/layouts/shared/browse-tab/layout.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { Labrinth } from '@modrinth/api-client'
import { SearchIcon } from '@modrinth/assets'
import { computed, toValue } from 'vue'
import { computed, ref, toValue } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
@@ -12,13 +12,23 @@ import StyledInput from '#ui/components/base/StyledInput.vue'
import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { useStickyObserver } from '#ui/composables/sticky-observer'
import { commonMessages } from '#ui/utils/common-messages'
import type { SortType } from '#ui/utils/search'
import SelectedProjectsFloatingBar from './components/SelectedProjectsFloatingBar.vue'
import BrowseInstallHeader from './header.vue'
import { injectBrowseManager } from './providers/browse-manager'
const ctx = injectBrowseManager()
const { formatMessage } = useVIntl()
const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
const { isStuck: isInstallHeaderStuck } = useStickyObserver(
stickyInstallHeaderRef,
'BrowseInstallHeader',
)
const sortOptions = computed<ComboboxOption<SortType>[]>(() =>
ctx.effectiveSortTypes.value.map((st) => ({
@@ -33,12 +43,43 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
label: String(n),
})),
)
const messages = defineMessages({
searchPlaceholder: {
id: 'browse.search.placeholder',
defaultMessage:
'Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} server {servers} other {projects}}...',
},
viewPrefix: {
id: 'browse.view-prefix',
defaultMessage: 'View:',
},
filterResults: {
id: 'browse.filter-results',
defaultMessage: 'Filter results...',
},
offline: {
id: 'browse.offline',
defaultMessage: 'You are currently offline. Connect to the internet to browse Modrinth!',
},
noResults: {
id: 'browse.no-results',
defaultMessage: 'No results found for your query!',
},
})
</script>
<template>
<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
<BrowseInstallHeader />
<div
ref="stickyInstallHeaderRef"
class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
:class="[isInstallHeaderStuck ? 'border-t' : '']"
>
<BrowseInstallHeader />
</div>
</template>
<SelectedProjectsFloatingBar v-if="ctx.installContext?.value && ctx.variant !== 'web'" />
<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
@@ -47,7 +88,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
:icon="SearchIcon"
type="text"
autocomplete="off"
:placeholder="`Search ${ctx.projectType.value}s...`"
:placeholder="formatMessage(messages.searchPlaceholder, { projectType: ctx.projectType.value })"
clearable
wrapper-class="w-full"
:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
@@ -62,7 +103,9 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
>
<template #prefix>
<span class="font-semibold text-primary">Sort by:</span>
<span class="font-semibold text-primary">{{
formatMessage(commonMessages.sortByLabel)
}}</span>
</template>
</Combobox>
@@ -70,17 +113,19 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
:model-value="ctx.maxResults.value"
:options="maxResultsOptions"
:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[9rem]'"
placeholder="View"
:placeholder="formatMessage(commonMessages.viewLabel)"
@update:model-value="(val: number) => (ctx.maxResults.value = val)"
>
<template #prefix>
<span class="font-semibold text-primary">View:</span>
<span class="font-semibold text-primary">{{ formatMessage(messages.viewPrefix) }}</span>
</template>
</Combobox>
<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
<ButtonStyled>
<button @click="ctx.filtersMenuOpen.value = true">Filter results...</button>
<button @click="ctx.filtersMenuOpen.value = true">
{{ formatMessage(messages.filterResults) }}
</button>
</ButtonStyled>
</div>
@@ -119,7 +164,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
<component :is="ctx.loadingComponent ?? LoadingIndicator" />
</section>
<section v-else-if="ctx.offline?.value && ctx.totalHits.value === 0" class="offline">
You are currently offline. Connect to the internet to browse Modrinth!
{{ formatMessage(messages.offline) }}
</section>
<section
v-else-if="
@@ -129,7 +174,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
"
class="offline"
>
<p>No results found for your query!</p>
<p>{{ formatMessage(messages.noResults) }}</p>
</section>
<ProjectCardList v-else :layout="ctx.effectiveLayout.value">

3
packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
View File

@@ -66,6 +66,9 @@ export interface BrowseManagerContext {
hideInstalled?: Ref<boolean>
showHideInstalled?: ComputedRef<boolean>
hideInstalledLabel?: ComputedRef<string>
hideSelected?: Ref<boolean>
showHideSelected?: ComputedRef<boolean>
hideSelectedLabel?: ComputedRef<string>
onInstalled?: (projectId: string) => void
displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>

26
packages/ui/src/layouts/shared/browse-tab/sidebar.vue
View File

@@ -5,10 +5,13 @@ import { computed, toValue } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import Checkbox from '#ui/components/base/Checkbox.vue'
import SearchSidebarFilter from '#ui/components/search/SearchSidebarFilter.vue'
import { useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
import { injectBrowseManager } from './providers/browse-manager'
const ctx = injectBrowseManager()
const { formatMessage } = useVIntl()
const isApp = computed(() => ctx.variant === 'app')
const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
@@ -80,7 +83,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
v-if="ctx.filtersMenuOpen?.value"
class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
>
<h3 class="m-0 text-lg text-contrast">Filters</h3>
<h3 class="m-0 text-lg text-contrast">{{ formatMessage(commonMessages.filtersLabel) }}</h3>
<ButtonStyled circular>
<button @click="closeFiltersMenu">
<XIcon />
@@ -89,16 +92,29 @@ function getFilterOpenByDefault(filterId: string): boolean {
</div>
<div
v-if="ctx.showHideInstalled?.value"
v-if="ctx.showHideInstalled?.value || ctx.showHideSelected?.value"
:class="
isApp
? 'border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
: 'card-shadow rounded-2xl bg-bg-raised p-4'
? 'flex flex-col gap-3 border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
: 'card-shadow flex flex-col gap-3 rounded-2xl bg-bg-raised p-4'
"
>
<Checkbox
v-if="ctx.showHideInstalled?.value"
v-model="ctx.hideInstalled!.value"
:label="ctx.hideInstalledLabel?.value ?? 'Hide already installed content'"
:label="
ctx.hideInstalledLabel?.value ?? formatMessage(commonMessages.hideInstalledContentLabel)
"
class="filter-checkbox"
@update:model-value="ctx.onFilterChange()"
@click.prevent.stop
/>
<Checkbox
v-if="ctx.showHideSelected?.value"
v-model="ctx.hideSelected!.value"
:label="
ctx.hideSelectedLabel?.value ?? formatMessage(commonMessages.hideSelectedContentLabel)
"
class="filter-checkbox"
@update:model-value="ctx.onFilterChange()"
@click.prevent.stop

21
packages/ui/src/layouts/shared/browse-tab/types.ts
View File

@@ -12,6 +12,12 @@ export interface BrowseSearchResponse {
per_page: number
}
export interface BrowseSelectedProject {
id: string
name: string
iconUrl?: string | null
}
export interface BrowseInstallContext {
name: string
loader: string
@@ -24,6 +30,19 @@ export interface BrowseInstallContext {
backLabel: string
heading: string
warning?: string
queuedCount?: number
queuedLabel?: string
clearQueued?: () => void | Promise<void>
onBack?: () => boolean | void | Promise<boolean | void>
selectedProjects?: BrowseSelectedProject[]
isInstallingSelected?: boolean
installProgress?: {
completed: number
total: number
}
clearSelected?: () => void | Promise<void>
discardSelectedAndBack?: () => void | Promise<void>
installSelected?: () => boolean | void | Promise<boolean | void>
}
export interface CardAction {
@@ -32,7 +51,7 @@ export interface CardAction {
icon: Component
iconClass?: string
disabled?: boolean
color?: 'brand' | 'red'
color?: 'brand' | 'red' | 'green'
type?: 'standard' | 'outlined' | 'transparent'
circular?: boolean
tooltip?: string

16
packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
View File

@@ -21,7 +21,7 @@ import Checkbox from '#ui/components/base/Checkbox.vue'
import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
import Toggle from '#ui/components/base/Toggle.vue'
import { useVIntl } from '#ui/composables/i18n'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
import { truncatedTooltip } from '#ui/utils/truncate'
@@ -34,6 +34,13 @@ import type {
const { formatMessage } = useVIntl()
const messages = defineMessages({
selectProject: {
id: 'content.card.select-project',
defaultMessage: 'Select {project}',
},
})
interface Props {
project: ContentCardProject
projectLink?: string | RouteLocationRaw
@@ -111,7 +118,10 @@ const deleteHovered = ref(false)
<div
role="row"
class="flex h-[74px] items-center justify-between gap-4 px-3"
:class="{ 'opacity-50': disabled }"
:class="{
'opacity-50 grayscale': disabled && !installing,
'opacity-50': installing,
}"
>
<div
class="flex min-w-0 items-center gap-4"
@@ -122,7 +132,7 @@ const deleteHovered = ref(false)
<Checkbox
v-if="showCheckbox"
:model-value="selected ?? false"
:aria-label="`Select ${project.title}`"
:aria-label="formatMessage(messages.selectProject, { project: project.title })"
class="shrink-0"
@update:model-value="selected = $event"
/>

1
packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
View File

@@ -89,6 +89,7 @@ const { listContainer, totalHeight, visibleRange, visibleTop, visibleItems } = u
{
itemHeight: 74,
bufferSize: 5,
initialItemCount: 20,
enabled: toRef(props, 'virtualized'),
},
)

14
packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
View File

@@ -119,16 +119,18 @@ const collapsedOptions = computed(() => {
const containerRef = ref<HTMLElement | null>(null)
const isExpanded = ref(true)
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
isExpanded.value = entry.contentRect.width >= 700
}
})
let observer: ResizeObserver | null = null
onMounted(() => {
observer = new ResizeObserver((entries) => {
for (const entry of entries) {
isExpanded.value = entry.contentRect.width >= 700
}
})
if (containerRef.value) observer.observe(containerRef.value)
})
onUnmounted(() => {
observer.disconnect()
observer?.disconnect()
observer = null
})
</script>

47
packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
View File

@@ -2,6 +2,7 @@
import { PowerIcon, PowerOffIcon, XIcon } from '@modrinth/assets'
import { computed } from 'vue'
import Avatar from '#ui/components/base/Avatar.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -93,6 +94,13 @@ const emit = defineEmits<{
}>()
const shown = computed(() => props.selectedItems.length > 0 || props.isBulkOperating)
const iconStackOffset = 24
const visibleItems = computed(() => props.selectedItems.slice(0, 3))
const overflowCount = computed(() => Math.max(0, props.selectedItems.length - 3))
const iconStackWidth = computed(() => {
if (props.selectedItems.length === 0) return 0
return 32 + (visibleItems.value.length - 1 + (overflowCount.value > 0 ? 1 : 0)) * iconStackOffset
})
const allDisabled = computed(() => props.selectedItems.every((m) => !m.enabled))
const allEnabled = computed(() => props.selectedItems.every((m) => m.enabled))
@@ -130,10 +138,41 @@ const bulkProgressMessage = computed(() => {
<template>
<FloatingActionBar :shown="shown" :aria-label="ariaLabel">
<div class="flex items-center gap-0.5">
<span class="px-4 py-2.5 text-base font-semibold text-contrast tabular-nums">
<div
v-if="selectedItems.length > 0"
class="relative h-8 shrink-0"
:style="{ width: `${iconStackWidth}px` }"
aria-hidden="true"
>
<div
v-for="(item, index) in visibleItems"
:key="item.id"
v-tooltip="item.project?.title ?? item.file_name"
class="absolute top-0 flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4"
:style="{ left: `${index * iconStackOffset}px`, zIndex: visibleItems.length - index }"
>
<Avatar
:src="item.project?.icon_url"
:alt="item.project?.title ?? item.file_name"
:tint-by="item.id"
size="100%"
no-shadow
class="selected-content-avatar"
/>
</div>
<div
v-if="overflowCount > 0"
class="absolute top-0 flex h-8 w-8 items-center justify-center rounded-lg border-[1.5px] border-solid border-surface-3 bg-surface-4 text-xs font-bold text-contrast"
:style="{ left: `${visibleItems.length * iconStackOffset}px`, zIndex: 0 }"
>
+{{ overflowCount }}
</div>
</div>
<span class="px-3 py-2 text-base font-semibold text-contrast tabular-nums">
{{ selectedCountText }}
</span>
<div class="mx-1 h-6 w-px bg-surface-5" />
<div class="mx-0.5 h-6 w-px bg-surface-5" />
<ButtonStyled type="transparent">
<button
v-tooltip="formatMessage(commonMessages.clearButton)"
@@ -223,4 +262,8 @@ const bulkProgressMessage = computed(() => {
.animate-indeterminate {
animation: indeterminate 1.5s ease-in-out infinite;
}
:deep(.selected-content-avatar) {
background-color: var(--color-button-bg);
}
</style>

275
packages/ui/src/layouts/wrapped/hosting/manage/content.vue
View File

@@ -2,11 +2,10 @@
import type { Archon, Labrinth } from '@modrinth/api-client'
import { ClipboardCopyIcon } from '@modrinth/assets'
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import { computed, nextTick, ref } from 'vue'
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
import { useReadyState } from '#ui/composables'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import {
injectModrinthClient,
@@ -15,6 +14,12 @@ import {
injectServerSettingsModal,
} from '#ui/providers'
import { commonMessages } from '#ui/utils/common-messages'
import {
type PendingServerContentInstall,
pendingServerContentInstallsEvent,
readPendingServerContentInstallBaseline,
readPendingServerContentInstalls,
} from '#ui/utils/server-content-installing'
import ConfirmModpackUpdateModal from '../../../shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
@@ -31,6 +36,19 @@ import type {
} from '../../../shared/content-tab/types'
type AddonWithUiState = Archon.Content.v1.Addon & { installing?: boolean }
type ContentOwnerAvatarSource = {
id: string
name: string
type: 'user' | 'organization'
}
const props = withDefaults(
defineProps<{
ownerAvatarUrlBase?: string
}>(),
{
ownerAvatarUrlBase: 'https://modrinth.com',
},
)
const { formatMessage } = useVIntl()
@@ -100,6 +118,11 @@ const type = computed(() => {
const queryKey = computed(() => ['content', 'list', 'v1', serverId])
function getContentOwnerAvatarUrl(owner: ContentOwnerAvatarSource) {
const ownerId = owner.type === 'user' ? owner.name || owner.id : owner.id
return `${props.ownerAvatarUrlBase}/${owner.type}/${encodeURIComponent(ownerId)}/avatar`
}
const contentQuery = useQuery({
queryKey,
queryFn: () =>
@@ -108,8 +131,6 @@ const contentQuery = useQuery({
staleTime: 0,
})
const contentReadyPending = useReadyState(contentQuery)
const modpackProjectId = computed(() => {
const spec = contentQuery.data.value?.modpack?.spec
return spec?.platform === 'modrinth' ? spec.project_id : null
@@ -163,8 +184,8 @@ const modpack = computed<ContentModpackData | null>(() => {
? {
id: mp.owner.id,
name: mp.owner.name,
avatar_url: mp.owner.icon_url ?? undefined,
type: mp.owner.type,
avatar_url: getContentOwnerAvatarUrl(mp.owner),
link:
mp.owner.type === 'organization'
? `/organization/${mp.owner.id}`
@@ -202,8 +223,228 @@ const addonLookup = computed(() => {
return map
})
const contentItems = computed<ContentItem[]>(() => {
return (contentQuery.data.value?.addons ?? []).map(addonToContentItem)
const pendingServerContentInstalls = ref<PendingServerContentInstall[]>([])
const lastStableContentKeys = ref<Set<string>>(new Set())
const contentInstallBaselineKeys = ref<Set<string> | null>(null)
const contentInstallAddedKeys = ref<Set<string>>(new Set())
function syncPendingServerContentInstalls() {
pendingServerContentInstalls.value = readPendingServerContentInstalls(serverId, worldId.value)
}
function handlePendingServerContentInstallsChanged(event: Event) {
const detail = (event as CustomEvent<{ serverId?: string | null; worldId?: string | null }>)
.detail
if (detail?.serverId !== serverId || detail?.worldId !== worldId.value) return
syncPendingServerContentInstalls()
}
function getAddonInstallKey(addon: Archon.Content.v1.Addon) {
return addon.project_id ?? addon.filename
}
function getAddonInstallKeys(addons: Archon.Content.v1.Addon[]) {
const keys = new Set<string>()
for (const addon of addons) {
keys.add(getAddonInstallKey(addon))
}
return keys
}
function syncContentInstallKeys(
addons: Archon.Content.v1.Addon[] = contentQuery.data.value?.addons ?? [],
) {
const currentKeys = getAddonInstallKeys(addons)
if (isSyncingContent.value) {
if (!contentInstallBaselineKeys.value) {
contentInstallBaselineKeys.value =
readPendingServerContentInstallBaseline(serverId, worldId.value) ??
new Set(lastStableContentKeys.value)
}
const nextAddedKeys = new Set(contentInstallAddedKeys.value)
for (const key of currentKeys) {
if (!contentInstallBaselineKeys.value.has(key)) {
nextAddedKeys.add(key)
}
}
contentInstallAddedKeys.value = nextAddedKeys
return
}
lastStableContentKeys.value = currentKeys
contentInstallBaselineKeys.value = null
contentInstallAddedKeys.value = new Set()
}
function pendingInstallToContentItem(item: PendingServerContentInstall): ContentItem {
return {
project: {
id: item.projectId,
slug: item.slug ?? item.projectId,
title: item.title,
icon_url: item.iconUrl ?? undefined,
},
version: {
id: item.versionId,
version_number:
item.versionName ?? item.versionNumber ?? formatMessage(commonMessages.installingLabel),
file_name: item.fileName ?? formatMessage(commonMessages.installingLabel),
},
owner: item.owner
? {
id: item.owner.id,
name: item.owner.name,
type: item.owner.type,
avatar_url: getContentOwnerAvatarUrl(item.owner),
link: item.owner.link,
}
: undefined,
id: `installing:${item.projectId}`,
enabled: true,
file_name: `installing:${item.projectId}`,
project_type: item.contentType,
has_update: false,
update_version_id: null,
installing: true,
}
}
const rawContentItems = computed<ContentItem[]>(() => {
const addons = contentQuery.data.value?.addons ?? []
const pendingProjectIds = new Set(
pendingServerContentInstalls.value.map((item) => item.projectId),
)
const pendingInstallByProjectId = new Map(
pendingServerContentInstalls.value.map((item) => [item.projectId, item]),
)
const installingContentKeys = new Set([...pendingProjectIds, ...contentInstallAddedKeys.value])
const installedProjectIds = new Set(
addons.map((addon) => addon.project_id).filter((id): id is string => !!id),
)
const pendingItems = pendingServerContentInstalls.value
.filter((item) => !installedProjectIds.has(item.projectId))
.map(pendingInstallToContentItem)
const addonItems = addons.map((addon) => {
const contentItem = addonToContentItem(addon)
const installing = installingContentKeys.has(getAddonInstallKey(addon))
const pendingItem = addon.project_id ? pendingInstallByProjectId.get(addon.project_id) : null
if (!installing || !pendingItem) {
return {
...contentItem,
installing,
}
}
const pendingContentItem = pendingInstallToContentItem(pendingItem)
return {
...contentItem,
project: {
...contentItem.project,
slug: pendingContentItem.project.slug,
title: pendingContentItem.project.title,
icon_url: contentItem.project.icon_url ?? pendingContentItem.project.icon_url,
},
version: {
id: pendingContentItem.version?.id ?? contentItem.version?.id ?? contentItem.file_name,
version_number:
pendingContentItem.version?.version_number ??
contentItem.version?.version_number ??
formatMessage(commonMessages.installingLabel),
file_name:
pendingContentItem.version?.file_name ??
contentItem.version?.file_name ??
contentItem.file_name,
},
owner: pendingContentItem.owner ?? contentItem.owner,
installing,
}
})
return [...addonItems, ...pendingItems]
})
const displayedContentItems = ref<ContentItem[]>([])
const contentItems = computed<ContentItem[]>(() => displayedContentItems.value)
const contentReadyPending = computed(
() =>
contentQuery.isLoading.value &&
contentQuery.data.value === undefined &&
pendingServerContentInstalls.value.length === 0 &&
displayedContentItems.value.length === 0,
)
function getContentItemDisplayKey(item: ContentItem) {
return item.project?.id ?? item.file_name ?? item.id
}
function mergeFragileContentItems(items: ContentItem[]) {
const nextItems = new Map(items.map((item) => [getContentItemDisplayKey(item), item]))
const mergedItems = displayedContentItems.value.map((item) => {
const key = getContentItemDisplayKey(item)
const nextItem = nextItems.get(key)
if (!nextItem) return item
nextItems.delete(key)
return nextItem
})
return [...mergedItems, ...nextItems.values()]
}
watch(
[
rawContentItems,
isSyncingContent,
() => contentQuery.isFetching.value,
() => contentQuery.isLoading.value,
],
([items, syncing, isFetching, isLoading]) => {
if (syncing) {
if (items.length > 0) {
displayedContentItems.value = mergeFragileContentItems(items)
}
return
}
if (items.length > 0 || (!isFetching && !isLoading)) {
displayedContentItems.value = items
}
},
{ deep: true, immediate: true },
)
watch(
[isSyncingContent, () => contentQuery.data.value?.addons],
([, addons]) => {
syncContentInstallKeys(addons ?? [])
},
{ deep: true, immediate: true },
)
watch(
worldId,
() => {
syncPendingServerContentInstalls()
syncContentInstallKeys()
},
{ immediate: true },
)
onMounted(() => {
syncPendingServerContentInstalls()
window.addEventListener(
pendingServerContentInstallsEvent,
handlePendingServerContentInstallsChanged,
)
})
onUnmounted(() => {
window.removeEventListener(
pendingServerContentInstallsEvent,
handlePendingServerContentInstallsChanged,
)
})
const deleteMutation = useMutation({
@@ -471,7 +712,7 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
id: addon.owner.id,
name: addon.owner.name,
type: addon.owner.type,
avatar_url: addon.owner.icon_url ?? undefined,
avatar_url: getContentOwnerAvatarUrl(addon.owner),
link: `/${addon.owner.type}/${addon.owner.id}`,
}
: undefined,
@@ -785,7 +1026,14 @@ provideContentManager({
isPackLocked: ref(false),
isBusy: computed(() => busyReasons.value.length > 0),
busyMessage: computed(() => {
const bannerCoversInstalling = server.value?.status === 'installing' || isSyncingContent.value
const bannerCoversInstalling =
server.value?.status === 'installing' ||
isSyncingContent.value ||
busyReasons.value.some(
(r) =>
r.reason.id === 'servers.busy.installing' ||
r.reason.id === 'servers.busy.syncing-content',
)
const filteredReasons = busyReasons.value.filter((r) => {
if (
bannerCoversInstalling &&
@@ -826,18 +1074,19 @@ provideContentManager({
mapToTableItem: (item) => {
const projectType = item.project_type ?? type.value
const addon = addonLookup.value.get(item.file_name)
const hasModrinthProject = !!addon?.project_id
const hasModrinthProject = !!addon?.project_id || (!!item.installing && !!item.project?.id)
const projectSlugOrId = item.project.slug ?? item.project.id
return {
id: item.id,
project: item.project,
projectLink: hasModrinthProject ? `/${projectType}/${item.project.id}` : undefined,
projectLink: hasModrinthProject ? `/${projectType}/${projectSlugOrId}` : undefined,
version: item.version,
versionLink:
hasModrinthProject && item.version?.id
? `/${projectType}/${item.project.id}/version/${item.version.id}`
? `/${projectType}/${projectSlugOrId}/version/${item.version.id}`
: undefined,
owner: item.owner
? { ...item.owner, link: `/${item.owner.type}/${item.owner.id}` }
? { ...item.owner, link: item.owner.link ?? `/${item.owner.type}/${item.owner.id}` }
: undefined,
enabled: item.enabled,
}

49
packages/ui/src/layouts/wrapped/hosting/manage/root.vue
View File

@@ -311,7 +311,6 @@
class="mb-4"
:sync-progress="syncProgress"
:content-error="contentError"
:server-image="serverImage"
@content-retry="handleContentRetry"
/>
<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
@@ -404,6 +403,11 @@ import {
provideServerSettingsModal,
} from '#ui/providers'
import { formatLoaderLabel } from '#ui/utils/loaders'
import {
pendingServerContentInstallsEvent,
readPendingServerContentInstalls,
writePendingServerContentInstalls,
} from '#ui/utils/server-content-installing'
import ServerOnboardingPanelPage from './[id]/onboarding.vue'
@@ -571,6 +575,8 @@ const { data: serverProject } = useServerProject(computed(() => serverData.value
const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
const syncProgressActive = ref(false)
const hasPendingServerContentInstalls = ref(false)
const hasSeenPendingServerContentSync = ref(false)
const isAwaitingPostInstallRefresh = ref(false)
const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
() => (syncProgressActive.value = false),
@@ -582,15 +588,45 @@ watch(syncProgress, (progress) => {
if (progress != null) {
cancelSyncHide()
syncProgressActive.value = true
if (progress.phase !== 'Analyzing' && hasPendingServerContentInstalls.value) {
hasSeenPendingServerContentSync.value = true
}
} else if (syncProgressActive.value) {
startSyncHide()
if (hasSeenPendingServerContentSync.value) {
writePendingServerContentInstalls(props.serverId, worldId.value, [])
hasSeenPendingServerContentSync.value = false
}
}
})
watch(contentError, (error) => {
if (!error || !hasPendingServerContentInstalls.value) return
writePendingServerContentInstalls(props.serverId, worldId.value, [])
hasSeenPendingServerContentSync.value = false
})
const isSyncingContent = computed(
() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
() =>
syncProgressActive.value ||
isAwaitingPostInstallRefresh.value ||
hasPendingServerContentInstalls.value,
)
function syncPendingServerContentInstalls() {
hasPendingServerContentInstalls.value =
readPendingServerContentInstalls(props.serverId, worldId.value).length > 0
}
function handlePendingServerContentInstallsChanged(event: Event) {
const detail = (event as CustomEvent<{ serverId?: string | null; worldId?: string | null }>)
.detail
if (detail?.serverId !== props.serverId || detail?.worldId !== worldId.value) return
syncPendingServerContentInstalls()
}
watch(worldId, syncPendingServerContentInstalls, { immediate: true })
let hasSeenInstallProgress = false
const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
@@ -1346,6 +1382,11 @@ const cleanup = () => {
onMounted(() => {
isMounted.value = true
syncPendingServerContentInstalls()
window.addEventListener(
pendingServerContentInstallsEvent,
handlePendingServerContentInstallsChanged,
)
if (serverData.value) {
initializeServer()
@@ -1434,6 +1475,10 @@ onMounted(() => {
})
onUnmounted(() => {
window.removeEventListener(
pendingServerContentInstallsEvent,
handlePendingServerContentInstallsChanged,
)
cleanup()
})
</script>

120
packages/ui/src/locales/en-US/index.json
View File

@@ -95,9 +95,48 @@
"billing.resubscribe-modal.title": {
"defaultMessage": "Resubscribe to Server"
},
"browse.filter-results": {
"defaultMessage": "Filter results..."
},
"browse.no-results": {
"defaultMessage": "No results found for your query!"
},
"browse.offline": {
"defaultMessage": "You are currently offline. Connect to the internet to browse Modrinth!"
},
"browse.search.placeholder": {
"defaultMessage": "Search {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} server {servers} other {projects}}..."
},
"browse.selected-projects-floating-bar.aria-label": {
"defaultMessage": "Selected projects"
},
"browse.selected-projects-floating-bar.install": {
"defaultMessage": "Install {count, plural, one {# project} other {# projects}}"
},
"browse.selected-projects-floating-bar.selected-count": {
"defaultMessage": "{count, plural, one {# project selected} other {# projects selected}}"
},
"browse.selected-projects-leave-modal.admonition-body": {
"defaultMessage": "You have selected {count, plural, one {# project} other {# projects}} to install. Install them now or go back without installing them."
},
"browse.selected-projects-leave-modal.admonition-header": {
"defaultMessage": "Selected projects not installed yet"
},
"browse.selected-projects-leave-modal.discard": {
"defaultMessage": "Discard"
},
"browse.selected-projects-leave-modal.header": {
"defaultMessage": "Selected projects not installed yet"
},
"browse.view-prefix": {
"defaultMessage": "View:"
},
"button.accept": {
"defaultMessage": "Accept"
},
"button.add-server-to-instance": {
"defaultMessage": "Add server to instance"
},
"button.affiliate-links": {
"defaultMessage": "Affiliate links"
},
@@ -167,6 +206,9 @@
"button.hide-snapshots": {
"defaultMessage": "Hide snapshots"
},
"button.install": {
"defaultMessage": "Install"
},
"button.max": {
"defaultMessage": "Max"
},
@@ -185,6 +227,9 @@
"button.open-in-folder": {
"defaultMessage": "Open in folder"
},
"button.open-in-modrinth": {
"defaultMessage": "Open in Modrinth"
},
"button.play": {
"defaultMessage": "Play"
},
@@ -278,6 +323,9 @@
"collections.label.private": {
"defaultMessage": "Private"
},
"content.card.select-project": {
"defaultMessage": "Select {project}"
},
"content.confirm-bulk-update.admonition-body": {
"defaultMessage": "Are you sure you want to update {count, plural, one {# project} other {# projects}} to their latest compatible version? It's recommended to update content one-by-one."
},
@@ -1721,21 +1769,36 @@
"label.filter-by": {
"defaultMessage": "Filter by"
},
"label.filters": {
"defaultMessage": "Filters"
},
"label.followed-projects": {
"defaultMessage": "Followed projects"
},
"label.game-version": {
"defaultMessage": "Game version"
},
"label.hide-installed-content": {
"defaultMessage": "Hide already installed content"
},
"label.hide-selected-content": {
"defaultMessage": "Hide selected content"
},
"label.installation-info": {
"defaultMessage": "Installation info"
},
"label.installed": {
"defaultMessage": "Installed"
},
"label.installed-modpack": {
"defaultMessage": "Installed modpack"
},
"label.installing": {
"defaultMessage": "Installing..."
},
"label.installing-content": {
"defaultMessage": "Installing content"
},
"label.loading": {
"defaultMessage": "Loading..."
},
@@ -1811,6 +1874,9 @@
"label.select-all": {
"defaultMessage": "Select all"
},
"label.selected": {
"defaultMessage": "Selected"
},
"label.selection-actions": {
"defaultMessage": "Selection actions"
},
@@ -1853,9 +1919,15 @@
"label.username": {
"defaultMessage": "Username"
},
"label.validating": {
"defaultMessage": "Validating"
},
"label.version": {
"defaultMessage": "Version"
},
"label.view": {
"defaultMessage": "View"
},
"label.visibility": {
"defaultMessage": "Visibility"
},
@@ -3119,6 +3191,54 @@
"servers.busy.syncing-content": {
"defaultMessage": "Content sync in progress"
},
"servers.installing-banner.error.header": {
"defaultMessage": "Installation failed"
},
"servers.installing-banner.error.internal-platform": {
"defaultMessage": "An internal error occurred while installing the platform. Please try again."
},
"servers.installing-banner.error.invalid-loader-version": {
"defaultMessage": "The specified loader or Minecraft version could not be installed. It may be invalid or unsupported."
},
"servers.installing-banner.error.modpack-install-failed": {
"defaultMessage": "The modpack could not be installed. It may be corrupted or incompatible."
},
"servers.installing-banner.error.no-primary-file": {
"defaultMessage": "This modpack version does not include a downloadable file. It may have been packaged incorrectly."
},
"servers.installing-banner.error.unknown": {
"defaultMessage": "An unexpected error occurred during installation."
},
"servers.installing-banner.error.unsupported-loader-version": {
"defaultMessage": "This version of Minecraft or loader is not yet supported by Modrinth Hosting."
},
"servers.installing-banner.phase.installing-addons": {
"defaultMessage": "Installing addons..."
},
"servers.installing-banner.phase.installing-modpack": {
"defaultMessage": "Installing modpack..."
},
"servers.installing-banner.phase.installing-platform": {
"defaultMessage": "Installing platform..."
},
"servers.installing-banner.preparing.header": {
"defaultMessage": "We're preparing your server"
},
"servers.installing-banner.ticker.adding-java": {
"defaultMessage": "Adding Java..."
},
"servers.installing-banner.ticker.configuring-server": {
"defaultMessage": "Configuring server..."
},
"servers.installing-banner.ticker.downloading-mods": {
"defaultMessage": "Downloading mods..."
},
"servers.installing-banner.ticker.organizing-files": {
"defaultMessage": "Organizing files..."
},
"servers.installing-banner.ticker.setting-up-environment": {
"defaultMessage": "Setting up environment..."
},
"servers.list-empty.already-have-server-label": {
"defaultMessage": "Already have a server?"
},

44
packages/ui/src/utils/common-messages.ts
View File

@@ -29,6 +29,10 @@ export const commonMessages = defineMessages({
id: 'project-type.all',
defaultMessage: 'All',
},
addServerToInstanceButton: {
id: 'button.add-server-to-instance',
defaultMessage: 'Add server to instance',
},
backButton: {
id: 'button.back',
defaultMessage: 'Back',
@@ -133,6 +137,10 @@ export const commonMessages = defineMessages({
id: 'label.filter-by',
defaultMessage: 'Filter by',
},
filtersLabel: {
id: 'label.filters',
defaultMessage: 'Filters',
},
followButton: {
id: 'button.follow',
defaultMessage: 'Follow',
@@ -189,6 +197,10 @@ export const commonMessages = defineMessages({
id: 'button.open-folder',
defaultMessage: 'Open folder',
},
openInModrinthButton: {
id: 'button.open-in-modrinth',
defaultMessage: 'Open in Modrinth',
},
orLabel: {
id: 'label.or',
defaultMessage: 'or',
@@ -385,6 +397,34 @@ export const commonMessages = defineMessages({
id: 'label.installation-info',
defaultMessage: 'Installation info',
},
installButton: {
id: 'button.install',
defaultMessage: 'Install',
},
installedLabel: {
id: 'label.installed',
defaultMessage: 'Installed',
},
validatingLabel: {
id: 'label.validating',
defaultMessage: 'Validating',
},
selectedLabel: {
id: 'label.selected',
defaultMessage: 'Selected',
},
installingContentLabel: {
id: 'label.installing-content',
defaultMessage: 'Installing content',
},
hideInstalledContentLabel: {
id: 'label.hide-installed-content',
defaultMessage: 'Hide already installed content',
},
hideSelectedContentLabel: {
id: 'label.hide-selected-content',
defaultMessage: 'Hide selected content',
},
installedModpackTitle: {
id: 'label.installed-modpack',
defaultMessage: 'Installed modpack',
@@ -451,6 +491,10 @@ export const commonMessages = defineMessages({
id: 'label.version',
defaultMessage: 'Version',
},
viewLabel: {
id: 'label.view',
defaultMessage: 'View',
},
projectLabel: {
id: 'label.project',
defaultMessage: 'Project',

1
packages/ui/src/utils/index.ts
View File

@@ -7,6 +7,7 @@ export * from './loaders'
export * from './notices'
export * from './savable'
export * from './search'
export * from './server-content-installing'
export * from './server-search'
export * from './tag-messages'
export * from './truncate'

203
packages/ui/src/utils/server-content-installing.ts Normal file
View File

@@ -0,0 +1,203 @@
import type {
ContentCardProject,
ContentCardVersion,
ContentOwner,
} from '../layouts/shared/content-tab/types'
export type PendingServerContentInstallType = 'mod' | 'plugin' | 'datapack'
type PendingServerContentOwner = Omit<ContentOwner, 'link'> & { link?: string }
export interface PendingServerContentInstall {
projectId: string
versionId: string
contentType: PendingServerContentInstallType
title: ContentCardProject['title']
versionName?: ContentCardVersion['version_number'] | null
versionNumber?: ContentCardVersion['version_number'] | null
fileName?: ContentCardVersion['file_name'] | null
owner?: PendingServerContentOwner | null
slug?: ContentCardProject['slug'] | null
iconUrl?: ContentCardProject['icon_url'] | null
createdAt: number
}
interface PendingServerContentInstallBaseline {
contentKeys: string[]
projectIds?: string[]
createdAt: number
}
export const pendingServerContentInstallsEvent = 'modrinth:pending-server-content-installs'
const stalePendingInstallAge = 30 * 60 * 1000
function getPendingServerContentInstallsKey(serverId: string | null, worldId: string | null) {
if (!serverId || !worldId) return null
return `server-content-installing:${serverId}:${worldId}`
}
function getPendingServerContentInstallBaselineKey(
serverId: string | null,
worldId: string | null,
) {
if (!serverId || !worldId) return null
return `server-content-installing-baseline:${serverId}:${worldId}`
}
function isPendingServerContentInstall(value: unknown): value is PendingServerContentInstall {
if (!value || typeof value !== 'object') return false
const record = value as Record<string, unknown>
return (
typeof record.projectId === 'string' &&
typeof record.versionId === 'string' &&
(record.contentType === 'mod' ||
record.contentType === 'plugin' ||
record.contentType === 'datapack') &&
typeof record.title === 'string' &&
typeof record.createdAt === 'number'
)
}
function isPendingServerContentInstallBaseline(
value: unknown,
): value is PendingServerContentInstallBaseline {
if (!value || typeof value !== 'object') return false
const record = value as Record<string, unknown>
const contentKeys = record.contentKeys ?? record.projectIds
return (
Array.isArray(contentKeys) &&
contentKeys.every((contentKey) => typeof contentKey === 'string') &&
typeof record.createdAt === 'number'
)
}
function filterFreshPendingServerContentInstalls(items: PendingServerContentInstall[]) {
const cutoff = Date.now() - stalePendingInstallAge
return items.filter((item) => item.createdAt >= cutoff)
}
function isFreshPendingServerContentInstallBaseline(item: PendingServerContentInstallBaseline) {
return item.createdAt >= Date.now() - stalePendingInstallAge
}
function emitPendingServerContentInstallsChanged(serverId: string | null, worldId: string | null) {
if (typeof window === 'undefined') return
window.dispatchEvent(
new CustomEvent(pendingServerContentInstallsEvent, {
detail: { serverId, worldId },
}),
)
}
export function readPendingServerContentInstalls(serverId: string | null, worldId: string | null) {
const key = getPendingServerContentInstallsKey(serverId, worldId)
if (!key || typeof localStorage === 'undefined') return []
try {
const raw = localStorage.getItem(key)
if (!raw) return []
const parsed = JSON.parse(raw)
if (!Array.isArray(parsed)) return []
const freshItems = filterFreshPendingServerContentInstalls(
parsed.filter(isPendingServerContentInstall),
)
if (freshItems.length !== parsed.length) {
writePendingServerContentInstalls(serverId, worldId, freshItems)
}
return freshItems
} catch {
return []
}
}
export function writePendingServerContentInstalls(
serverId: string | null,
worldId: string | null,
items: PendingServerContentInstall[],
) {
const key = getPendingServerContentInstallsKey(serverId, worldId)
if (!key || typeof localStorage === 'undefined') return
const freshItems = filterFreshPendingServerContentInstalls(items)
if (freshItems.length === 0) {
localStorage.removeItem(key)
const baselineKey = getPendingServerContentInstallBaselineKey(serverId, worldId)
if (baselineKey) {
localStorage.removeItem(baselineKey)
}
} else {
localStorage.setItem(key, JSON.stringify(freshItems))
}
emitPendingServerContentInstallsChanged(serverId, worldId)
}
export function readPendingServerContentInstallBaseline(
serverId: string | null,
worldId: string | null,
) {
const key = getPendingServerContentInstallBaselineKey(serverId, worldId)
if (!key || typeof localStorage === 'undefined') return null
try {
const raw = localStorage.getItem(key)
if (!raw) return null
const parsed = JSON.parse(raw)
if (!isPendingServerContentInstallBaseline(parsed)) return null
if (!isFreshPendingServerContentInstallBaseline(parsed)) {
localStorage.removeItem(key)
return null
}
return new Set(parsed.contentKeys ?? parsed.projectIds)
} catch {
return null
}
}
export function writePendingServerContentInstallBaseline(
serverId: string | null,
worldId: string | null,
contentKeys: Iterable<string>,
) {
const key = getPendingServerContentInstallBaselineKey(serverId, worldId)
if (!key || typeof localStorage === 'undefined') return
localStorage.setItem(
key,
JSON.stringify({
contentKeys: Array.from(new Set(contentKeys)),
createdAt: Date.now(),
} satisfies PendingServerContentInstallBaseline),
)
emitPendingServerContentInstallsChanged(serverId, worldId)
}
export function addPendingServerContentInstalls(
serverId: string | null,
worldId: string | null,
items: Omit<PendingServerContentInstall, 'createdAt'>[],
) {
if (items.length === 0) return
const now = Date.now()
const next = new Map(
readPendingServerContentInstalls(serverId, worldId).map((item) => [item.projectId, item]),
)
for (const item of items) {
next.set(item.projectId, { ...item, createdAt: now })
}
writePendingServerContentInstalls(serverId, worldId, Array.from(next.values()))
}
export function removePendingServerContentInstall(
serverId: string | null,
worldId: string | null,
projectId: string,
) {
writePendingServerContentInstalls(
serverId,
worldId,
readPendingServerContentInstalls(serverId, worldId).filter(
(item) => item.projectId !== projectId,
),
)
}