feat: content tab rewrite for worlds (#5136)
* feat: base content card component * fix: tooltips + colors * feat: fix orgs * feat: base content tab internals rewrite * feat: fix invalidmodal * feat: add ContentModpackCard * fix: extract types * draft: layout * feat: unlink modal * feat: impl content tab * fix: lint * fix: toggling * temp: disable updating stuff * feat: selection v-model * feat: bulk selection * feat: mods tab rough draft * feat: use fuse.js * feat: add project combobox * clean up project combobox * feat: start install to play modal * fix: events * feat: use v-on * feat: bulk actions + fix floating action bar width * feat: figma alignments * feat: migrate toggle to tailwind * fix: row borders * feat: disabled state * feat: virtual list impl for card table based on window scroll * fix: lint * feat: virtualization + smaller contentcard items * feat: use ContentCardTable + ContentCardItems * feat: fix gap + border issues on last elm * feat: cleanup + use proper searching * fix: use TeleportOverflowMenu * fix: fallback to svg if src is invalid on avatar component * fix: storybook * feat: start on updater modal * feat: finish content updater modal * feat: i18n pass * feat: impl modal * feat(app): backend changes for content tab refactor (#5237) * feat: include_changelog=false for updater modal * fix: hash overrides * feat: update checking for modpack * feat: qa * feat: modpack content modal * fix: padding in table to match modals + tightness * fix: lint * feat: delete modal * feat: fix toggle bugs * fix: prepr * fix: duplicate messages * qa: full width search * qa: use bg-surface-1.5 * qa: animation for filter pills * qa: standardize hover colors * fix: border-[1px] is border * qa: mass de-select actually mass selecting * qa: match figma designs for floating action bar * qa: modal fixes * q: modal fixes x2 * fix: table border * qa: confirm modals * qa: modal alignment * qa: re-add stuck heading + dedupe logic * qa: dedupe virtual scrolling + remove dead components * qa: responsiveness for content table + link fixes * qa: version column link, tooltips + lint fixes * qa: instance busy protections * fix: installation freeze bug * chore: remove old mods page * refactor: deduplicate layout * chore: delete old content page(s) * qa * qa * qa * feat: sort btn - to iterate * fix: ml * feat: date added * fix: lint * fix: formatting.ts removal * feat: get_dependencies_as_content_items * qa: final QA changes * refactor: deduplicate + polish content.rs * feat: hook up content.vue with v1 * feat: hide v1 content api behind frontend feature flag * fix: query keys + copy on empty state * chore: i18n pass * feat: reimpl unlink + upload endpoint * feat: use bulk endpoints v1 * fix: lint * fix: flags * fix: responsiveness via container queries * fix: lint * qa: 1 * qa: fixes * qa: fix ssr issues with browse content * qa: header page divider * qa: modals * fix: prepr * fix: issues * fix: lint * fix: toggle v1 ff * qa: 5 * qa: delete modal copy * feat: creation flow modals (#5383) * refactor: delete content v0 usages + impl * feat: qa + fixes * feat: installing banner using state event * feat: fix modpack card bugs + filtering issues * refactor: delete backups v0 api module * feat: v1 servers GET endpoint * fix: backups * feat: swap to kyros upload v1 addon * fix: use tanstack for loader.vue * feat: finish install from discovery modal * qa: bug fixes * feat: set up installation settings * fix: lint * fix: typos * fix: bugs * fix: disable inline content * feat: content tab improvements — upload UX, installation settings, and client-only indicators Upload cancellation and navigation guard: - Add ConfirmLeaveModal that prompts when navigating away during upload - Cancel in-flight XHR uploads when user confirms leaving the page - Add beforeunload handler to warn on browser/tab close during upload - Track uploadedBytes/totalBytes in UploadState for progress display - Replace Collapsible with Transition for upload progress admonition - Show byte progress and percentage in upload banner - Clamp upload progress to prevent exceeding 100% Installation settings (server.properties): - Add KnownPropertiesFields and PropertiesFields types to Archon types - Add buildProperties() to creation flow context to collect gamemode, difficulty, seed, world type, structures, and generator settings - Pass properties through installContent on onboarding, discovery, and ServerSetupModal flows Server setup and discovery flow improvements: - Migrate ServerSetupModal from servers_v0.reinstall to content_v1.installContent - Replace loaderApiNames lookup with toApiLoader() helper - Remove eraseDataOnInstall toggle — always use soft_override: false - Simplify modpack install on discovery page to use first available version and route through creation flow modal for both onboarding and non-onboarding - Differentiate post-install navigation: content page for onboarding, loader options for existing servers Modpack update flow: - Replace updateModpack() call with installContent() using soft_override: true to support version selection in the content updater modal Client-only mod indicators: - Add environment field to AddonVersion (reuses Labrinth.Projects.v3.Environment) - Add environment to ContentItem and isClientOnly to ContentCardTableItem - Show orange TriangleAlertIcon with tooltip on client-only mods in content table - Add "Client-only" filter pill to content filtering (controlled via showClientOnlyFilter on ContentManagerContext) - Apply client-only indicators in both ContentPageLayout and ModpackContentModal Misc: - Add CLAUDE.md note about using prepr commands for lint checks - Export ConfirmLeaveModal from instances barrel * fix: piping * fix: switch content disable for linked server instances * feat: client only filter * fix: prepr * feat: hasUpdate shape update * feat: bulk update endpoint impl for content in panel * feat: websocket state impl again with new phases * fix: ws * fix: use timeout fn for sync admon + fix content card layout scroll for browsers with overflow anchor bug * fix: qa bugs * fix: lint, a11y and i18n * refactor: set up layouts folder properly * fix: linked data cache stuff + lint * feat: move installationsettings to shared layout * fix: lint * fix: issues * feat: temp fuck staging up * fix: lockfile * fix: data sync issues on loader.vue * fix: lint * Hide shader configuration files from content list (#5499) * feat: workaround search problem + split out reset * fix: qa * fix: changelog not showing on first open * fix: qa + optimistic updating improvements * fix: prepr+lint * fix: qa * feat: qa * fix: lint * fix: lint * fix: build * fix: build * fix: type errors * fix: fade and JAVA_HOME passthrough * feat: qa * feat: impl diff shit * fix: qa * fix: app qa * feat: update diff modal * fix: endpoint * fix: qa * fix: qa * fix: use bulk in modpack modal * feat: abort signal impl + fix issues * fix: diff modal trunc * feat: qa * fix: qa * feat: tooltip content tab * fix: prepr * fix: dismiss on settings btn * feat: qa * feat: dont clear handlers on disconnect * fix: lint * fix: wrangler + introduce staging-archon env file --------- Signed-off-by: Calum H. <calum@modrinth.com> Co-authored-by: tdgao <mr.trumgao@gmail.com> Co-authored-by: Artyom Ezri <61311568+Artezon@users.noreply.github.com>
This commit is contained in:
Calum H.
710
packages/ui/src/layouts/shared/installation-settings/layout.vue
Normal file
710
packages/ui/src/layouts/shared/installation-settings/layout.vue
Normal file
@@ -0,0 +1,710 @@
|
||||
<script setup lang="ts">
|
||||
import type { Labrinth } from '@modrinth/api-client'
|
||||
import {
|
||||
ArrowLeftRightIcon,
|
||||
CircleAlertIcon,
|
||||
DownloadIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
HammerIcon,
|
||||
PencilIcon,
|
||||
SaveIcon,
|
||||
SpinnerIcon,
|
||||
UnlinkIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { onBeforeRouteLeave } from 'vue-router'
|
||||
|
||||
import AutoLink from '#ui/components/base/AutoLink.vue'
|
||||
import Avatar from '#ui/components/base/Avatar.vue'
|
||||
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
|
||||
import Chips from '#ui/components/base/Chips.vue'
|
||||
import Combobox from '#ui/components/base/Combobox.vue'
|
||||
import { defineMessages, useVIntl } from '#ui/composables/i18n'
|
||||
import { commonMessages } from '#ui/utils/common-messages'
|
||||
|
||||
import ConfirmLeaveModal from '../content-tab/components/modals/ConfirmLeaveModal.vue'
|
||||
import ConfirmModpackUpdateModal from '../content-tab/components/modals/ConfirmModpackUpdateModal.vue'
|
||||
import ConfirmReinstallModal from '../content-tab/components/modals/ConfirmReinstallModal.vue'
|
||||
import ConfirmRepairModal from '../content-tab/components/modals/ConfirmRepairModal.vue'
|
||||
import ConfirmUnlinkModal from '../content-tab/components/modals/ConfirmUnlinkModal.vue'
|
||||
import ContentUpdaterModal from '../content-tab/components/modals/ContentUpdaterModal.vue'
|
||||
import ContentDiffModal from './components/ContentDiffModal.vue'
|
||||
import { useInstallationForm } from './composables'
|
||||
import { injectInstallationSettings } from './providers/installation-settings'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const ctx = injectInstallationSettings()
|
||||
|
||||
const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
|
||||
const repairModal = ref<InstanceType<typeof ConfirmRepairModal>>()
|
||||
const reinstallModal = ref<InstanceType<typeof ConfirmReinstallModal>>()
|
||||
const unlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
|
||||
const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal> | null>()
|
||||
|
||||
const contentDiffModal = ref<InstanceType<typeof ContentDiffModal>>()
|
||||
const modpackUpdateModal = ref<InstanceType<typeof ConfirmModpackUpdateModal>>()
|
||||
const pendingUpdateVersion = ref<Labrinth.Versions.v2.Version | null>(null)
|
||||
const isUpdateDowngrade = ref(false)
|
||||
|
||||
const form = useInstallationForm(ctx, contentUpdaterModal, contentDiffModal)
|
||||
|
||||
function handleBeforeUnload(e: BeforeUnloadEvent) {
|
||||
if (form.isSaving.value) {
|
||||
e.preventDefault()
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
watch(
|
||||
() => form.isSaving.value,
|
||||
(saving) => {
|
||||
if (saving) {
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
} else {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
})
|
||||
|
||||
onBeforeRouteLeave(async () => {
|
||||
if (form.isSaving.value) {
|
||||
return (await confirmLeaveModal.value?.prompt()) ?? false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
const disabledPlatforms = computed(() => {
|
||||
if (!ctx.lockPlatform || ctx.currentPlatform.value === 'vanilla') return []
|
||||
return ctx.availablePlatforms.filter((p) => p !== ctx.currentPlatform.value)
|
||||
})
|
||||
|
||||
const showModpackVersionActions = ctx.showModpackVersionActions ?? true
|
||||
|
||||
function handleModpackUpdateRequest(version: Labrinth.Versions.v2.Version) {
|
||||
pendingUpdateVersion.value = version
|
||||
const currentVersionId = ctx.updaterModalProps.value.currentVersionId
|
||||
const currentVersion = form.updatingProjectVersions.value.find((v) => v.id === currentVersionId)
|
||||
isUpdateDowngrade.value = currentVersion
|
||||
? new Date(version.date_published) < new Date(currentVersion.date_published)
|
||||
: false
|
||||
modpackUpdateModal.value?.show()
|
||||
}
|
||||
|
||||
function handleModpackUpdateConfirm() {
|
||||
if (pendingUpdateVersion.value) {
|
||||
form.cancelEditing()
|
||||
form.handleUpdaterConfirm(pendingUpdateVersion.value)
|
||||
pendingUpdateVersion.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function handleModpackUpdateCancel() {
|
||||
pendingUpdateVersion.value = null
|
||||
}
|
||||
|
||||
function handleRepair() {
|
||||
form.cancelEditing()
|
||||
ctx.repair()
|
||||
}
|
||||
|
||||
function handleReinstall() {
|
||||
form.cancelEditing()
|
||||
ctx.reinstallModpack()
|
||||
}
|
||||
|
||||
function handleUnlink() {
|
||||
form.cancelEditing()
|
||||
ctx.unlinkModpack()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
cancelEditing: () => form.cancelEditing(),
|
||||
})
|
||||
|
||||
const messages = defineMessages({
|
||||
linkedInstanceTitle: {
|
||||
id: 'installation-settings.linked-instance.title',
|
||||
defaultMessage: 'Linked {projectType, select, server {server project} other {modpack}}',
|
||||
},
|
||||
reinstallModpackTitle: {
|
||||
id: 'installation-settings.reinstall-modpack.title',
|
||||
defaultMessage: 'Re-install modpack',
|
||||
},
|
||||
reinstallModpackDescription: {
|
||||
id: 'installation-settings.reinstall-modpack.description',
|
||||
defaultMessage:
|
||||
"Re-installing the modpack resets the {type, select, server {server's} other {instance's}} content to its original state, removing any mods or content you have added.",
|
||||
},
|
||||
editInstallationTitle: {
|
||||
id: 'installation-settings.edit-installation.title',
|
||||
defaultMessage: 'Edit installation',
|
||||
},
|
||||
unlinkDescription: {
|
||||
id: 'installation-settings.unlink.description',
|
||||
defaultMessage:
|
||||
"Unlinking permanently disconnects this {type, select, server {server} other {instance}} from the {projectType, select, server {server} other {modpack}} project, allowing you to change the loader and Minecraft version, but you won't receive future updates.",
|
||||
},
|
||||
repairInstanceTitle: {
|
||||
id: 'installation-settings.repair.instance-title',
|
||||
defaultMessage: 'Repair instance',
|
||||
},
|
||||
repairInstanceDescription: {
|
||||
id: 'installation-settings.repair.instance-description',
|
||||
defaultMessage:
|
||||
'Reinstalls Minecraft dependencies and checks for corruption. This may resolve issues if your game is not launching due to launcher-related errors.',
|
||||
},
|
||||
repairServerTitle: {
|
||||
id: 'installation-settings.repair.server-title',
|
||||
defaultMessage: 'Repair server',
|
||||
},
|
||||
repairServerDescription: {
|
||||
id: 'installation-settings.repair.server-description',
|
||||
defaultMessage:
|
||||
'Reinstalls the loader and Minecraft dependencies without deleting your content. This may resolve issues if your server is not starting correctly.',
|
||||
},
|
||||
editWarningInstance: {
|
||||
id: 'installation-settings.edit.warning-instance',
|
||||
defaultMessage:
|
||||
"We don't recommend editing your installation settings after installing content. If you want to edit them, be cautious as it may cause issues.",
|
||||
},
|
||||
editWarningServer: {
|
||||
id: 'installation-settings.edit.warning-server',
|
||||
defaultMessage:
|
||||
"We don't recommend editing your installation settings after installing content. If you want to edit them reset your server.",
|
||||
},
|
||||
loaderVersionLabel: {
|
||||
id: 'installation-settings.loader-version',
|
||||
defaultMessage: '{loader} version',
|
||||
},
|
||||
searchGameVersionPlaceholder: {
|
||||
id: 'installation-settings.search-game-version',
|
||||
defaultMessage: 'Search game version...',
|
||||
},
|
||||
savingLabel: {
|
||||
id: 'installation-settings.saving',
|
||||
defaultMessage: 'Saving...',
|
||||
},
|
||||
verifyingLabel: {
|
||||
id: 'installation-settings.verifying',
|
||||
defaultMessage: 'Verifying...',
|
||||
},
|
||||
selectPlatformAriaLabel: {
|
||||
id: 'installation-settings.aria.select-platform',
|
||||
defaultMessage: 'Select platform',
|
||||
},
|
||||
selectGameVersionAriaLabel: {
|
||||
id: 'installation-settings.aria.select-game-version',
|
||||
defaultMessage: 'Select game version',
|
||||
},
|
||||
selectLoaderVersionAriaLabel: {
|
||||
id: 'installation-settings.aria.select-loader-version',
|
||||
defaultMessage: 'Select {loader} version',
|
||||
},
|
||||
reinstallingModpackButton: {
|
||||
id: 'installation-settings.reinstalling-modpack',
|
||||
defaultMessage: 'Reinstalling modpack',
|
||||
},
|
||||
unlinkButton: {
|
||||
id: 'installation-settings.unlink',
|
||||
defaultMessage: 'Unlink',
|
||||
},
|
||||
platformLockTooltip: {
|
||||
id: 'installation-settings.platform-lock-tooltip',
|
||||
defaultMessage: 'You will need to reset your server to switch loader.',
|
||||
},
|
||||
confirmVersionChangeHeader: {
|
||||
id: 'installation-settings.confirm-version-change-header',
|
||||
defaultMessage: 'Review content changes',
|
||||
},
|
||||
confirmVersionChange: {
|
||||
id: 'installation-settings.confirm-version-change',
|
||||
defaultMessage: 'Confirm',
|
||||
},
|
||||
confirmVersionChangeDescription: {
|
||||
id: 'installation-settings.confirm-version-change-description',
|
||||
defaultMessage: 'Changing to {gameVersion} will modify the following content on your server.',
|
||||
},
|
||||
removedIncompatible: {
|
||||
id: 'installation-settings.removed-incompatible',
|
||||
defaultMessage: 'Removed (incompatible)',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Loading state -->
|
||||
<div v-if="ctx.loading.value" class="flex items-center justify-center py-12">
|
||||
<SpinnerIcon class="size-8 animate-spin text-secondary" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Installation Info (linked state) -->
|
||||
<div v-if="ctx.isLinked.value" class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{ formatMessage(commonMessages.installationInfoTitle) }}
|
||||
</span>
|
||||
<div class="flex flex-col gap-2.5 rounded-[20px] bg-surface-2 p-4">
|
||||
<div
|
||||
v-for="row in ctx.installationInfo.value"
|
||||
:key="row.label"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<span class="text-primary">{{ row.label }}</span>
|
||||
<span v-if="row.value" class="font-semibold text-contrast">{{ row.value }}</span>
|
||||
<span
|
||||
v-else
|
||||
class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LINKED -->
|
||||
<template v-if="ctx.isLinked.value">
|
||||
<!-- Installed Modpack -->
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{ formatMessage(commonMessages.installedModpackTitle) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="ctx.modpack.value"
|
||||
class="flex items-center gap-2.5 rounded-[20px] bg-surface-2 p-3"
|
||||
>
|
||||
<AutoLink :to="ctx.modpack.value.link" class="shrink-0">
|
||||
<div
|
||||
class="size-14 shrink-0 overflow-hidden rounded-2xl border border-solid border-surface-5"
|
||||
>
|
||||
<Avatar
|
||||
v-if="ctx.modpack.value.iconUrl"
|
||||
:src="ctx.modpack.value.iconUrl"
|
||||
:alt="ctx.modpack.value.title"
|
||||
size="100%"
|
||||
no-shadow
|
||||
/>
|
||||
</div>
|
||||
</AutoLink>
|
||||
<div class="flex flex-col gap-1">
|
||||
<AutoLink
|
||||
:to="ctx.modpack.value.link"
|
||||
class="font-semibold text-contrast hover:underline"
|
||||
>
|
||||
{{ ctx.modpack.value.title }}
|
||||
</AutoLink>
|
||||
<div class="flex items-center gap-2 text-sm text-secondary">
|
||||
<AutoLink
|
||||
v-if="ctx.modpack.value.owner"
|
||||
:to="
|
||||
ctx.modpack.value.owner.type === 'organization'
|
||||
? `/organization/${ctx.modpack.value.owner.id}`
|
||||
: `/user/${ctx.modpack.value.owner.id}`
|
||||
"
|
||||
class="flex items-center gap-1.5 hover:underline"
|
||||
>
|
||||
<Avatar
|
||||
:src="ctx.modpack.value.owner.iconUrl"
|
||||
:alt="ctx.modpack.value.owner.name"
|
||||
size="1.25rem"
|
||||
:circle="ctx.modpack.value.owner.type === 'user'"
|
||||
no-shadow
|
||||
/>
|
||||
<span class="font-medium">{{ ctx.modpack.value.owner.name }}</span>
|
||||
</AutoLink>
|
||||
<template v-if="ctx.modpack.value.owner && ctx.modpack.value.versionNumber">
|
||||
·
|
||||
</template>
|
||||
<span v-if="ctx.modpack.value.versionNumber" class="font-medium">
|
||||
{{ ctx.modpack.value.versionNumber }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<ButtonStyled v-if="showModpackVersionActions">
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="form.handleChangeModpackVersion()"
|
||||
>
|
||||
<ArrowLeftRightIcon class="size-5" />
|
||||
{{ formatMessage(commonMessages.changeVersionButton) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unlink -->
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{
|
||||
formatMessage(messages.linkedInstanceTitle, {
|
||||
projectType: showModpackVersionActions ? 'modpack' : 'server',
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span class="text-primary">
|
||||
{{
|
||||
formatMessage(messages.unlinkDescription, {
|
||||
type: ctx.isServer ? 'server' : 'instance',
|
||||
projectType: showModpackVersionActions ? 'modpack' : 'server',
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<div>
|
||||
<ButtonStyled color="orange">
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="unlinkModal?.show()"
|
||||
>
|
||||
<UnlinkIcon class="size-5" />
|
||||
{{
|
||||
formatMessage(
|
||||
showModpackVersionActions
|
||||
? commonMessages.unlinkModpackButton
|
||||
: messages.unlinkButton,
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reinstall -->
|
||||
<div v-if="showModpackVersionActions" class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{ formatMessage(messages.reinstallModpackTitle) }}
|
||||
</span>
|
||||
<span class="text-primary">
|
||||
{{
|
||||
formatMessage(messages.reinstallModpackDescription, {
|
||||
type: ctx.isServer ? 'server' : 'instance',
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<div>
|
||||
<ButtonStyled color="red">
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="reinstallModal?.show()"
|
||||
>
|
||||
<SpinnerIcon v-if="ctx.reinstalling?.value" class="animate-spin" />
|
||||
<DownloadIcon v-else class="size-5" />
|
||||
{{
|
||||
ctx.reinstalling?.value
|
||||
? formatMessage(messages.reinstallingModpackButton)
|
||||
: formatMessage(commonMessages.reinstallModpackButton)
|
||||
}}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repair -->
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{
|
||||
formatMessage(
|
||||
ctx.isServer ? messages.repairServerTitle : messages.repairInstanceTitle,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span class="text-primary">
|
||||
{{
|
||||
formatMessage(
|
||||
ctx.isServer
|
||||
? messages.repairServerDescription
|
||||
: messages.repairInstanceDescription,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<div>
|
||||
<ButtonStyled>
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="repairModal?.show()"
|
||||
>
|
||||
<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
|
||||
<HammerIcon v-else class="size-5" />
|
||||
{{
|
||||
ctx.repairing?.value
|
||||
? formatMessage(commonMessages.repairingButton)
|
||||
: formatMessage(commonMessages.repairButton)
|
||||
}}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- NOT LINKED -->
|
||||
<template v-else>
|
||||
<!-- Edit form -->
|
||||
<div v-if="form.isEditing.value" class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{ formatMessage(messages.editInstallationTitle) }}
|
||||
</span>
|
||||
<div class="flex flex-col gap-3 rounded-[20px] border border-solid border-surface-5 p-4">
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<span class="font-semibold text-contrast">
|
||||
{{ formatMessage(commonMessages.platformLabel) }}
|
||||
</span>
|
||||
<Chips
|
||||
v-model="form.selectedPlatform.value"
|
||||
:items="ctx.availablePlatforms"
|
||||
:disabled-items="disabledPlatforms"
|
||||
:disabled-tooltip="formatMessage(messages.platformLockTooltip)"
|
||||
:aria-label="formatMessage(messages.selectPlatformAriaLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<span class="font-semibold text-contrast">
|
||||
{{ formatMessage(commonMessages.gameVersionLabel) }}
|
||||
</span>
|
||||
<Combobox
|
||||
v-model="form.selectedGameVersion.value"
|
||||
:options="form.gameVersionOptions.value"
|
||||
searchable
|
||||
sync-with-selection
|
||||
:placeholder="formatMessage(commonMessages.selectVersionPlaceholder)"
|
||||
:search-placeholder="formatMessage(messages.searchGameVersionPlaceholder)"
|
||||
:display-value="
|
||||
form.selectedGameVersion.value ||
|
||||
formatMessage(commonMessages.selectVersionPlaceholder)
|
||||
"
|
||||
:aria-label="formatMessage(messages.selectGameVersionAriaLabel)"
|
||||
>
|
||||
<template v-if="form.hasSnapshots.value" #dropdown-footer>
|
||||
<button
|
||||
class="flex w-full cursor-pointer items-center justify-center gap-1.5 border-0 border-t border-solid border-surface-5 bg-transparent py-3 text-center text-sm font-semibold text-secondary transition-colors hover:text-contrast"
|
||||
@mousedown.prevent
|
||||
@click="form.showSnapshots.value = !form.showSnapshots.value"
|
||||
>
|
||||
<EyeOffIcon v-if="form.showSnapshots.value" class="size-4" />
|
||||
<EyeIcon v-else class="size-4" />
|
||||
{{
|
||||
form.showSnapshots.value
|
||||
? formatMessage(commonMessages.hideSnapshotsButton)
|
||||
: formatMessage(commonMessages.showAllVersionsButton)
|
||||
}}
|
||||
</button>
|
||||
</template>
|
||||
</Combobox>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="form.selectedPlatform.value !== 'vanilla' && !ctx.hideLoaderVersion"
|
||||
class="flex flex-col gap-2.5"
|
||||
>
|
||||
<span class="font-semibold text-contrast">
|
||||
{{
|
||||
formatMessage(messages.loaderVersionLabel, {
|
||||
loader: form.formattedLoaderName.value,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<Combobox
|
||||
v-model="form.selectedLoaderVersion.value"
|
||||
searchable
|
||||
sync-with-selection
|
||||
:placeholder="
|
||||
form.loaderVersionDisplayValue.value ||
|
||||
formatMessage(commonMessages.selectVersionPlaceholder)
|
||||
"
|
||||
:search-placeholder="formatMessage(commonMessages.searchVersionPlaceholder)"
|
||||
:options="form.loaderVersionOptions.value"
|
||||
:display-value="
|
||||
form.loaderVersionDisplayValue.value ||
|
||||
formatMessage(commonMessages.selectVersionPlaceholder)
|
||||
"
|
||||
:aria-label="
|
||||
formatMessage(messages.selectLoaderVersionAriaLabel, {
|
||||
loader: form.formattedLoaderName.value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<ButtonStyled color="brand">
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="!form.isValid.value || !form.hasChanges.value || form.isSaving.value"
|
||||
@click="form.save()"
|
||||
>
|
||||
<SpinnerIcon v-if="form.isSaving.value" class="animate-spin" />
|
||||
<SaveIcon v-else />
|
||||
{{
|
||||
form.isVerifying.value
|
||||
? formatMessage(messages.verifyingLabel)
|
||||
: form.isSaving.value
|
||||
? formatMessage(messages.savingLabel)
|
||||
: formatMessage(commonMessages.saveButton)
|
||||
}}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled type="outlined">
|
||||
<button
|
||||
class="!border !border-surface-5 !shadow-none"
|
||||
@click="form.cancelEditing()"
|
||||
>
|
||||
<XIcon />
|
||||
{{ formatMessage(commonMessages.cancelButton) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Non-editing: installation info + warning + edit button -->
|
||||
<div v-if="!form.isEditing.value" class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{ formatMessage(commonMessages.installationInfoTitle) }}
|
||||
</span>
|
||||
<div class="flex flex-col gap-2.5 rounded-[20px] bg-surface-2 p-4">
|
||||
<div
|
||||
v-for="row in ctx.installationInfo.value"
|
||||
:key="row.label"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<span class="text-primary">{{ row.label }}</span>
|
||||
<span class="font-semibold text-contrast">{{ row.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<CircleAlertIcon class="mt-0.5 size-5 shrink-0 text-orange" />
|
||||
<span class="text-primary">
|
||||
{{
|
||||
formatMessage(
|
||||
ctx.isServer ? messages.editWarningServer : messages.editWarningInstance,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<ButtonStyled color="orange">
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="form.isEditing.value = true"
|
||||
>
|
||||
<PencilIcon class="size-5" />
|
||||
{{ formatMessage(commonMessages.editButton) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<slot name="unlinked-extra-buttons" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repair section -->
|
||||
<div v-if="ctx.currentPlatform.value !== 'vanilla'" class="flex flex-col gap-2.5">
|
||||
<span class="text-lg font-semibold text-contrast">
|
||||
{{
|
||||
formatMessage(
|
||||
ctx.isServer ? messages.repairServerTitle : messages.repairInstanceTitle,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span class="text-primary">
|
||||
{{
|
||||
formatMessage(
|
||||
ctx.isServer
|
||||
? messages.repairServerDescription
|
||||
: messages.repairInstanceDescription,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<div>
|
||||
<ButtonStyled>
|
||||
<button
|
||||
class="!shadow-none"
|
||||
:disabled="ctx.isBusy.value"
|
||||
@click="repairModal?.show()"
|
||||
>
|
||||
<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
|
||||
<HammerIcon v-else class="size-5" />
|
||||
{{
|
||||
ctx.repairing?.value
|
||||
? formatMessage(commonMessages.repairingButton)
|
||||
: formatMessage(commonMessages.repairButton)
|
||||
}}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<slot name="extra" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<Teleport to="body">
|
||||
<ContentUpdaterModal
|
||||
v-if="form.updatingModpack.value"
|
||||
ref="contentUpdaterModal"
|
||||
:versions="form.updatingProjectVersions.value"
|
||||
:current-game-version="ctx.updaterModalProps.value.currentGameVersion"
|
||||
:current-loader="ctx.updaterModalProps.value.currentLoader"
|
||||
:current-version-id="ctx.updaterModalProps.value.currentVersionId"
|
||||
:is-app="ctx.isApp"
|
||||
:is-modpack="true"
|
||||
:project-icon-url="ctx.updaterModalProps.value.projectIconUrl"
|
||||
:project-name="ctx.updaterModalProps.value.projectName"
|
||||
:loading="form.loadingVersions.value"
|
||||
:loading-changelog="form.loadingChangelog.value"
|
||||
@update="handleModpackUpdateRequest"
|
||||
@cancel="form.resetUpdateState()"
|
||||
@version-select="form.handleUpdaterVersionSelect"
|
||||
@version-hover="form.handleUpdaterVersionHover"
|
||||
/>
|
||||
<ConfirmModpackUpdateModal
|
||||
ref="modpackUpdateModal"
|
||||
:downgrade="isUpdateDowngrade"
|
||||
:server="ctx.isServer"
|
||||
@confirm="handleModpackUpdateConfirm"
|
||||
@cancel="handleModpackUpdateCancel"
|
||||
/>
|
||||
<ConfirmRepairModal ref="repairModal" :server="ctx.isServer" @repair="handleRepair" />
|
||||
<ConfirmReinstallModal
|
||||
ref="reinstallModal"
|
||||
:server="ctx.isServer"
|
||||
@reinstall="handleReinstall"
|
||||
/>
|
||||
<ConfirmUnlinkModal ref="unlinkModal" :server="ctx.isServer" @unlink="handleUnlink" />
|
||||
|
||||
<ContentDiffModal
|
||||
v-if="form.pendingPreview.value"
|
||||
ref="contentDiffModal"
|
||||
:header="formatMessage(messages.confirmVersionChangeHeader)"
|
||||
:description="
|
||||
formatMessage(messages.confirmVersionChangeDescription, {
|
||||
gameVersion: form.pendingPreview.value.newGameVersion,
|
||||
})
|
||||
"
|
||||
:admonition-header="formatMessage(messages.confirmVersionChangeHeader)"
|
||||
:diffs="form.pendingPreview.value.diffs"
|
||||
:has-unknown-content="form.pendingPreview.value.hasUnknownContent"
|
||||
:confirm-label="formatMessage(messages.confirmVersionChange)"
|
||||
:confirm-icon="SaveIcon"
|
||||
:removed-label="formatMessage(messages.removedIncompatible)"
|
||||
:show-backup-creator="ctx.isServer"
|
||||
@confirm="form.confirmSave()"
|
||||
@cancel="form.cancelPreview()"
|
||||
/>
|
||||
|
||||
<ConfirmLeaveModal ref="confirmLeaveModal" />
|
||||
<slot name="extra-modals" />
|
||||
</Teleport>
|
||||
</template>
|
||||
Reference in New Issue
Block a user