You've already forked AstralRinth
Calum H.
c3fe7b4232
* feat: change modpack updating flow * fix: pending install state loss * fix: mods.vue perf problems * chore: todo doc * draft: try preload/fix suspense * fix: lint
569 lines
16 KiB
Vue
569 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
ArrowLeftRightIcon,
|
|
BoxIcon,
|
|
FilterIcon,
|
|
GlassesIcon,
|
|
PaintbrushIcon,
|
|
SearchIcon,
|
|
SpinnerIcon,
|
|
} from '@modrinth/assets'
|
|
import Fuse from 'fuse.js'
|
|
import { computed, nextTick, ref, watchSyncEffect } from 'vue'
|
|
|
|
import Avatar from '#ui/components/base/Avatar.vue'
|
|
import BulletDivider from '#ui/components/base/BulletDivider.vue'
|
|
import Checkbox from '#ui/components/base/Checkbox.vue'
|
|
import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
|
|
import StyledInput from '#ui/components/base/StyledInput.vue'
|
|
import NewModal from '#ui/components/modal/NewModal.vue'
|
|
import { defineMessages, useVIntl } from '#ui/composables/i18n'
|
|
import {
|
|
commonMessages,
|
|
commonProjectTypeCategoryMessages,
|
|
commonProjectTypeTitleMessages,
|
|
normalizeProjectType,
|
|
} from '#ui/utils/common-messages'
|
|
|
|
import { getClientWarningType, isClientOnlyEnvironment } from '../../composables/content-filtering'
|
|
import type { ContentCardTableItem, ContentItem } from '../../types'
|
|
import ContentCardTable from '../ContentCardTable.vue'
|
|
import ContentSelectionBar from '../ContentSelectionBar.vue'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
|
|
interface Props {
|
|
modpackName?: string
|
|
modpackIconUrl?: string
|
|
enableToggle?: boolean
|
|
busy?: boolean
|
|
getOverflowOptions?: (item: ContentItem) => OverflowMenuOption[]
|
|
switchVersion?: (item: ContentItem) => void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modpackName: undefined,
|
|
modpackIconUrl: undefined,
|
|
enableToggle: false,
|
|
busy: false,
|
|
getOverflowOptions: undefined,
|
|
switchVersion: undefined,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:enabled': [item: ContentItem, value: boolean]
|
|
'bulk:enable': [items: ContentItem[]]
|
|
'bulk:disable': [items: ContentItem[]]
|
|
}>()
|
|
|
|
const messages = defineMessages({
|
|
header: {
|
|
id: 'instances.modpack-content-modal.header',
|
|
defaultMessage: 'Modpack content',
|
|
},
|
|
searchPlaceholder: {
|
|
id: 'instances.modpack-content-modal.search-placeholder',
|
|
defaultMessage: 'Search {count, number} {count, plural, one {project} other {projects}}',
|
|
},
|
|
loading: {
|
|
id: 'instances.modpack-content-modal.loading',
|
|
defaultMessage: 'Loading content...',
|
|
},
|
|
emptyTitle: {
|
|
id: 'instances.modpack-content-modal.empty-title',
|
|
defaultMessage: 'No content found',
|
|
},
|
|
emptyDescription: {
|
|
id: 'instances.modpack-content-modal.empty-description',
|
|
defaultMessage: 'This modpack does not include any additional content.',
|
|
},
|
|
noResults: {
|
|
id: 'instances.modpack-content-modal.no-results',
|
|
defaultMessage: 'No projects match your search.',
|
|
},
|
|
})
|
|
|
|
export interface ModpackContentModalState {
|
|
items: ContentItem[]
|
|
searchQuery: string
|
|
selectedFilters: string[]
|
|
scrollTop: number
|
|
}
|
|
|
|
const modal = ref<InstanceType<typeof NewModal>>()
|
|
const scrollContainer = ref<HTMLElement | null>(null)
|
|
const items = ref<ContentItem[]>([])
|
|
const disabledIds = ref(new Set<string>())
|
|
const loading = ref(false)
|
|
const searchQuery = ref('')
|
|
const selectedFilters = ref<string[]>([])
|
|
const selectedIds = ref<string[]>([])
|
|
|
|
const selectedItems = computed(() =>
|
|
items.value.filter((item) => selectedIds.value.includes(item.file_name)),
|
|
)
|
|
|
|
const allSelected = computed(() => {
|
|
if (filteredItems.value.length === 0) return false
|
|
return filteredItems.value.every((item) => selectedIds.value.includes(item.file_name))
|
|
})
|
|
|
|
const someSelected = computed(() => {
|
|
return (
|
|
filteredItems.value.some((item) => selectedIds.value.includes(item.file_name)) &&
|
|
!allSelected.value
|
|
)
|
|
})
|
|
|
|
function toggleSelectAll() {
|
|
if (allSelected.value || someSelected.value) {
|
|
selectedIds.value = []
|
|
} else {
|
|
selectedIds.value = filteredItems.value.map((item) => item.file_name)
|
|
}
|
|
}
|
|
|
|
const fuse = new Fuse<ContentItem>([], {
|
|
keys: ['project.title', 'owner.name', 'file_name'],
|
|
threshold: 0.4,
|
|
distance: 100,
|
|
})
|
|
|
|
watchSyncEffect(() => fuse.setCollection(items.value))
|
|
|
|
const filterOptions = computed(() => {
|
|
const frequency = items.value.reduce(
|
|
(map, item) => {
|
|
const normalized = normalizeProjectType(item.project_type)
|
|
map[normalized] = (map[normalized] || 0) + 1
|
|
return map
|
|
},
|
|
{} as Record<string, number>,
|
|
)
|
|
|
|
const options = Object.entries(frequency)
|
|
.sort(([, a], [, b]) => b - a)
|
|
.map(([type]) => {
|
|
const msg =
|
|
commonProjectTypeCategoryMessages[type as keyof typeof commonProjectTypeCategoryMessages]
|
|
return {
|
|
id: type,
|
|
label: msg ? formatMessage(msg) : type.charAt(0).toUpperCase() + type.slice(1) + 's',
|
|
}
|
|
})
|
|
|
|
if (items.value.some((item) => getClientWarningType(item) !== null)) {
|
|
options.push({ id: 'warnings', label: 'Warnings' })
|
|
}
|
|
|
|
if (items.value.some((item) => !item.enabled)) {
|
|
options.push({ id: 'disabled', label: 'Disabled' })
|
|
}
|
|
|
|
return options
|
|
})
|
|
|
|
const stats = computed(() => {
|
|
const counts: Record<string, number> = {}
|
|
for (const item of items.value) {
|
|
const normalized = normalizeProjectType(item.project_type)
|
|
counts[normalized] = (counts[normalized] || 0) + 1
|
|
}
|
|
return counts
|
|
})
|
|
|
|
function toggleFilter(filterId: string) {
|
|
const index = selectedFilters.value.indexOf(filterId)
|
|
if (index === -1) {
|
|
selectedFilters.value.push(filterId)
|
|
} else {
|
|
selectedFilters.value.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
const attributeFilterIds = new Set(['disabled', 'warnings'])
|
|
|
|
const typeFilteredCount = computed(() => {
|
|
if (selectedFilters.value.length === 0) return items.value.length
|
|
const typeFilters = selectedFilters.value.filter((f) => !attributeFilterIds.has(f))
|
|
const hasDisabledFilter = selectedFilters.value.includes('disabled')
|
|
const hasWarningsFilter = selectedFilters.value.includes('warnings')
|
|
return items.value.filter((item) => {
|
|
if (typeFilters.length > 0 && !typeFilters.includes(normalizeProjectType(item.project_type)))
|
|
return false
|
|
if (hasDisabledFilter && item.enabled) return false
|
|
if (hasWarningsFilter && getClientWarningType(item) === null) return false
|
|
return true
|
|
}).length
|
|
})
|
|
|
|
const filteredItems = computed(() => {
|
|
const query = searchQuery.value.trim()
|
|
|
|
let result: ContentItem[]
|
|
if (query) {
|
|
result = fuse.search(query).map(({ item }) => item)
|
|
} else {
|
|
result = [...items.value].sort((a, b) => {
|
|
const nameA = a.project?.title ?? a.file_name
|
|
const nameB = b.project?.title ?? b.file_name
|
|
return nameA.toLowerCase().localeCompare(nameB.toLowerCase())
|
|
})
|
|
}
|
|
|
|
if (selectedFilters.value.length > 0) {
|
|
const typeFilters = selectedFilters.value.filter((f) => !attributeFilterIds.has(f))
|
|
const hasDisabledFilter = selectedFilters.value.includes('disabled')
|
|
const hasWarningsFilter = selectedFilters.value.includes('warnings')
|
|
result = result.filter((item) => {
|
|
if (typeFilters.length > 0 && !typeFilters.includes(normalizeProjectType(item.project_type)))
|
|
return false
|
|
if (hasDisabledFilter && item.enabled) return false
|
|
if (hasWarningsFilter && getClientWarningType(item) === null) return false
|
|
return true
|
|
})
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
const tableItems = computed<ContentCardTableItem[]>(() =>
|
|
filteredItems.value.map((item) => ({
|
|
id: item.file_name,
|
|
project: item.project ?? {
|
|
id: item.file_name,
|
|
slug: null,
|
|
title: item.file_name,
|
|
icon_url: null,
|
|
},
|
|
projectLink: item.project?.id ? `/project/${item.project.id}` : undefined,
|
|
version: item.version ?? {
|
|
id: item.file_name,
|
|
version_number: 'Unknown',
|
|
file_name: item.file_name,
|
|
},
|
|
owner: item.owner
|
|
? {
|
|
...item.owner,
|
|
link: `https://modrinth.com/${item.owner.type}/${item.owner.id}`,
|
|
}
|
|
: undefined,
|
|
...(props.enableToggle ? { enabled: item.enabled } : {}),
|
|
installing: item.installing === true,
|
|
isClientOnly:
|
|
isClientOnlyEnvironment(item.environment) ||
|
|
!!item.pack_client_retained ||
|
|
!!item.pack_client_depends,
|
|
clientWarning: getClientWarningType(item),
|
|
disabled: props.busy || disabledIds.value.has(item.file_name) || item.installing === true,
|
|
overflowOptions: [
|
|
...(props.switchVersion
|
|
? [
|
|
{
|
|
id: formatMessage(commonMessages.switchVersionButton),
|
|
icon: ArrowLeftRightIcon,
|
|
action: () => props.switchVersion!(item),
|
|
},
|
|
]
|
|
: []),
|
|
...(props.getOverflowOptions?.(item) ?? []),
|
|
],
|
|
})),
|
|
)
|
|
|
|
function getTypeIcon(type: string) {
|
|
switch (type) {
|
|
case 'mod':
|
|
return BoxIcon
|
|
case 'shaderpack':
|
|
case 'shader':
|
|
return GlassesIcon
|
|
case 'resourcepack':
|
|
return PaintbrushIcon
|
|
default:
|
|
return BoxIcon
|
|
}
|
|
}
|
|
|
|
function handleEnabledChange(fileName: string, value: boolean) {
|
|
if (props.busy) return
|
|
const item = items.value.find((i) => i.file_name === fileName)
|
|
if (!item) return
|
|
emit('update:enabled', item, value)
|
|
}
|
|
|
|
function bulkEnable() {
|
|
if (props.busy) return
|
|
emit('bulk:enable', [...selectedItems.value])
|
|
selectedIds.value = []
|
|
}
|
|
|
|
function bulkDisable() {
|
|
if (props.busy) return
|
|
emit('bulk:disable', [...selectedItems.value])
|
|
selectedIds.value = []
|
|
}
|
|
|
|
function show(contentItems: ContentItem[]) {
|
|
items.value = contentItems
|
|
searchQuery.value = ''
|
|
selectedFilters.value = []
|
|
selectedIds.value = []
|
|
disabledIds.value = new Set()
|
|
loading.value = false
|
|
}
|
|
|
|
function showLoading() {
|
|
items.value = []
|
|
searchQuery.value = ''
|
|
selectedFilters.value = []
|
|
selectedIds.value = []
|
|
loading.value = true
|
|
modal.value?.show()
|
|
}
|
|
|
|
function hide() {
|
|
modal.value?.hide()
|
|
}
|
|
|
|
function getState(): ModpackContentModalState | null {
|
|
if (!items.value.length) return null
|
|
return {
|
|
items: items.value,
|
|
searchQuery: searchQuery.value,
|
|
selectedFilters: [...selectedFilters.value],
|
|
scrollTop: scrollContainer.value?.scrollTop ?? 0,
|
|
}
|
|
}
|
|
|
|
async function restore(state: ModpackContentModalState) {
|
|
items.value = state.items
|
|
searchQuery.value = state.searchQuery
|
|
selectedFilters.value = state.selectedFilters
|
|
loading.value = false
|
|
modal.value?.show()
|
|
await nextTick()
|
|
if (scrollContainer.value) {
|
|
scrollContainer.value.scrollTop = state.scrollTop
|
|
}
|
|
}
|
|
|
|
function updateItem(fileName: string, updates: Partial<ContentItem> & { disabled?: boolean }) {
|
|
if (updates.disabled !== undefined) {
|
|
const newSet = new Set(disabledIds.value)
|
|
if (updates.disabled) {
|
|
newSet.add(fileName)
|
|
} else {
|
|
newSet.delete(fileName)
|
|
}
|
|
disabledIds.value = newSet
|
|
}
|
|
const { disabled: _, ...itemUpdates } = updates
|
|
if (Object.keys(itemUpdates).length > 0) {
|
|
const index = items.value.findIndex((i) => i.file_name === fileName)
|
|
if (index !== -1) {
|
|
items.value[index] = { ...items.value[index], ...itemUpdates }
|
|
}
|
|
}
|
|
}
|
|
|
|
function setItems(contentItems: ContentItem[]) {
|
|
const contentFileNames = new Set(contentItems.map((item) => item.file_name))
|
|
items.value = contentItems
|
|
selectedIds.value = selectedIds.value.filter((id) => contentFileNames.has(id))
|
|
disabledIds.value = new Set([...disabledIds.value].filter((id) => contentFileNames.has(id)))
|
|
loading.value = false
|
|
}
|
|
|
|
defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems })
|
|
</script>
|
|
|
|
<template>
|
|
<NewModal
|
|
ref="modal"
|
|
:max-width="'min(928px, calc(95vw - 10rem))'"
|
|
:width="'min(928px, calc(95vw - 10rem))'"
|
|
no-padding
|
|
>
|
|
<template #title>
|
|
<Avatar
|
|
v-if="props.modpackIconUrl"
|
|
:src="props.modpackIconUrl"
|
|
size="3rem"
|
|
:tint-by="props.modpackName"
|
|
/>
|
|
<span class="text-lg font-extrabold text-contrast">
|
|
{{ formatMessage(messages.header) }}
|
|
</span>
|
|
</template>
|
|
<div class="flex flex-col h-[min(600px,calc(95vh-10rem))]">
|
|
<div class="flex flex-col gap-4 px-6 py-4 border-b border-solid border-0 border-surface-4">
|
|
<StyledInput
|
|
v-model="searchQuery"
|
|
:icon="SearchIcon"
|
|
:placeholder="formatMessage(messages.searchPlaceholder, { count: typeFilteredCount })"
|
|
clearable
|
|
/>
|
|
|
|
<!-- Filters -->
|
|
<div v-if="filterOptions.length > 0" class="flex items-center gap-2">
|
|
<FilterIcon class="size-5 text-secondary shrink-0" />
|
|
<div class="flex flex-wrap items-center gap-1.5">
|
|
<button
|
|
:aria-pressed="selectedFilters.length === 0"
|
|
class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
|
|
:class="
|
|
selectedFilters.length === 0
|
|
? 'border-green bg-brand-highlight text-brand'
|
|
: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
|
|
"
|
|
@click="selectedFilters = []"
|
|
>
|
|
{{ formatMessage(commonMessages.allProjectType) }}
|
|
</button>
|
|
<button
|
|
v-for="option in filterOptions"
|
|
:key="option.id"
|
|
:aria-pressed="selectedFilters.includes(option.id)"
|
|
class="rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-colors"
|
|
:class="
|
|
selectedFilters.includes(option.id)
|
|
? 'border-green bg-brand-highlight text-brand'
|
|
: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5'
|
|
"
|
|
@click="toggleFilter(option.id)"
|
|
>
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
|
|
<!-- Loading state -->
|
|
<div
|
|
v-if="loading"
|
|
class="flex flex-col items-center justify-center flex-1 gap-2 text-secondary"
|
|
>
|
|
<SpinnerIcon class="size-8 animate-spin" />
|
|
<span class="text-sm">{{ formatMessage(messages.loading) }}</span>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div
|
|
v-else-if="items.length === 0"
|
|
class="flex flex-col items-center justify-center flex-1 gap-2 text-center p-8"
|
|
>
|
|
<span class="text-xl font-semibold text-contrast">
|
|
{{ formatMessage(messages.emptyTitle) }}
|
|
</span>
|
|
<span class="text-secondary">{{ formatMessage(messages.emptyDescription) }}</span>
|
|
</div>
|
|
|
|
<!-- No search results -->
|
|
<div
|
|
v-else-if="filteredItems.length === 0"
|
|
class="flex flex-col items-center justify-center flex-1 gap-2 text-center p-8"
|
|
>
|
|
<span class="text-secondary">{{ formatMessage(messages.noResults) }}</span>
|
|
</div>
|
|
|
|
<!-- Content table -->
|
|
<div v-else class="@container flex-1 min-h-0 flex flex-col">
|
|
<div
|
|
class="flex h-12 shrink-0 items-center justify-between gap-4 border-0 border-b border-solid border-surface-4 bg-surface-3 px-3"
|
|
>
|
|
<div
|
|
class="flex min-w-0 items-center gap-4"
|
|
:class="
|
|
props.enableToggle
|
|
? 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
|
|
: 'flex-1'
|
|
"
|
|
>
|
|
<Checkbox
|
|
v-if="props.enableToggle"
|
|
:model-value="allSelected"
|
|
:indeterminate="someSelected"
|
|
:aria-label="formatMessage(commonMessages.selectAllLabel)"
|
|
class="shrink-0"
|
|
@update:model-value="toggleSelectAll"
|
|
/>
|
|
<span class="font-semibold text-secondary">{{
|
|
formatMessage(commonMessages.projectLabel)
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
class="hidden @[800px]:flex"
|
|
:class="props.enableToggle ? 'flex-1 min-w-0' : 'flex-1'"
|
|
>
|
|
<span class="font-semibold text-secondary">{{
|
|
formatMessage(commonMessages.versionLabel)
|
|
}}</span>
|
|
</div>
|
|
<div v-if="props.enableToggle" class="min-w-[160px] shrink-0 text-right">
|
|
<span class="font-semibold text-secondary">{{
|
|
formatMessage(commonMessages.actionsLabel)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div ref="scrollContainer" class="flex-1 min-h-0 overflow-y-auto">
|
|
<ContentCardTable
|
|
v-model:selected-ids="selectedIds"
|
|
:items="tableItems"
|
|
:show-selection="props.enableToggle"
|
|
hide-delete
|
|
hide-header
|
|
flat
|
|
v-on="
|
|
props.enableToggle
|
|
? { 'update:enabled': (id: string, val: boolean) => handleEnabledChange(id, val) }
|
|
: {}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div
|
|
class="flex items-center justify-between px-6 py-4 border-t border-solid border-0 border-surface-4 shrink-0"
|
|
>
|
|
<!-- Stats -->
|
|
<div class="flex items-center gap-2">
|
|
<template v-for="(count, type, idx) in stats" :key="type">
|
|
<BulletDivider v-if="idx > 0" />
|
|
<div class="flex items-center gap-1.5">
|
|
<component :is="getTypeIcon(type as string)" class="size-5 text-secondary" />
|
|
<span class="font-medium text-primary">
|
|
{{ count }}
|
|
{{
|
|
formatMessage(
|
|
commonProjectTypeTitleMessages[
|
|
normalizeProjectType(
|
|
type as string,
|
|
) as keyof typeof commonProjectTypeTitleMessages
|
|
] ?? commonProjectTypeTitleMessages.project,
|
|
{ count },
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContentSelectionBar
|
|
v-if="props.enableToggle"
|
|
:selected-items="selectedItems"
|
|
:is-bulk-operating="props.busy"
|
|
style="--left-bar-width: 0px; --right-bar-width: 0px"
|
|
@clear="selectedIds = []"
|
|
@enable="bulkEnable"
|
|
@disable="bulkDisable"
|
|
/>
|
|
</NewModal>
|
|
</template>
|