diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json index 18ff367db0..5a88bd2d92 100644 --- a/apps/app-frontend/package.json +++ b/apps/app-frontend/package.json @@ -14,6 +14,7 @@ "test": "vue-tsc --noEmit" }, "dependencies": { + "@dnd-kit/vue": "^0.5.0", "@modrinth/api-client": "workspace:^", "@modrinth/assets": "workspace:*", "@modrinth/ui": "workspace:*", diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index f7e78a4963..47df514af0 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -13,13 +13,12 @@ import { ChangeSkinIcon, CompassIcon, ExternalIcon, - HomeIcon, LeftArrowIcon, - LibraryIcon, LogInIcon, LogOutIcon, NewspaperIcon, NotepadTextIcon, + PlayIcon, PlusIcon, RefreshCwIcon, RightArrowIcon, @@ -83,6 +82,7 @@ import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyIn import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue' import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue' import NavButton from '@/components/ui/NavButton.vue' +import OnboardingChecklist from '@/components/ui/onboarding-checklist/index.vue' import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue' import PromotionWrapper from '@/components/ui/PromotionWrapper.vue' import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue' @@ -286,7 +286,10 @@ const { setModpackAlreadyInstalledModal, handleModpackDuplicateCreateAnyway, handleModpackDuplicateGoToInstance, + onboardingChecklist, } = setupProviders(notificationManager, popupNotificationManager) +const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist +const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value) const news = ref([]) const availableSurvey = ref(false) @@ -303,7 +306,6 @@ window.addEventListener('online', () => { offline.value = false }) -const showOnboarding = ref(false) const nativeDecorations = ref(false) const os = ref('') @@ -454,6 +456,8 @@ function handleAdsConsentRequired(required) { } async function setupApp() { + await onboardingChecklist.initialize() + const { native_decorations, theme, @@ -462,8 +466,6 @@ async function setupApp() { collapsed_navigation, hide_nametag_skins_page, advanced_rendering, - onboarded, - default_page, toggle_sidebar, developer_mode, feature_flags, @@ -475,16 +477,10 @@ async function setupApp() { i18n.global.locale.value = locale } - if (default_page === 'Library') { - await router.push('/library') - } - os.value = await getOS() const dev = await isDev() isDevEnvironment.value = dev const version = await getVersion() - showOnboarding.value = !onboarded - nativeDecorations.value = native_decorations if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations) @@ -506,7 +502,7 @@ async function setupApp() { if (telemetry) { initAnalytics() if (dev) debugAnalytics() - trackEvent('Launched', { version, dev, onboarded }) + trackEvent('Launched', { version, dev }) } if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault()) @@ -1595,8 +1591,16 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
- - + + @@ -1612,19 +1616,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload) - - - +
-
+

Playing as

-
+
diff --git a/apps/app-frontend/src/assets/icons/instance-file.svg b/apps/app-frontend/src/assets/icons/instance-file.svg new file mode 100644 index 0000000000..437ade0188 --- /dev/null +++ b/apps/app-frontend/src/assets/icons/instance-file.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue deleted file mode 100644 index 5004b927b5..0000000000 --- a/apps/app-frontend/src/components/GridDisplay.vue +++ /dev/null @@ -1,360 +0,0 @@ - - - diff --git a/apps/app-frontend/src/components/RowDisplay.vue b/apps/app-frontend/src/components/RowDisplay.vue deleted file mode 100644 index 982b2ad0b1..0000000000 --- a/apps/app-frontend/src/components/RowDisplay.vue +++ /dev/null @@ -1,371 +0,0 @@ - - - - diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue index 9c0611ef63..98e459fd2c 100644 --- a/apps/app-frontend/src/components/ui/AccountsCard.vue +++ b/apps/app-frontend/src/components/ui/AccountsCard.vue @@ -182,6 +182,7 @@ defineExpose({ refreshValues, setEquippedSkin, setLoginDisabled, + login, loginDisabled, }) diff --git a/apps/app-frontend/src/components/ui/ContextMenu.vue b/apps/app-frontend/src/components/ui/ContextMenu.vue index 5a74d7a8f7..3e7a835757 100644 --- a/apps/app-frontend/src/components/ui/ContextMenu.vue +++ b/apps/app-frontend/src/components/ui/ContextMenu.vue @@ -34,9 +34,18 @@ const options = ref([]) const left = ref('0px') const top = ref('0px') const shown = ref(false) +const contextMenuId = Symbol() +const contextMenuOpenEvent = 'modrinth-context-menu-open' + +const hideContextMenu = () => { + shown.value = false + emit('menu-closed') +} defineExpose({ showMenu: (event, passedItem, passedOptions) => { + window.dispatchEvent(new CustomEvent(contextMenuOpenEvent, { detail: contextMenuId })) + item.value = passedItem options.value = passedOptions @@ -62,6 +71,7 @@ defineExpose({ } }) }, + hideMenu: hideContextMenu, }) const isInstanceLink = (item) => { @@ -73,11 +83,6 @@ const isInstanceLink = (item) => { return false } -const hideContextMenu = () => { - shown.value = false - emit('menu-closed') -} - const optionClicked = (option) => { emit('option-clicked', { item: item.value, @@ -92,6 +97,12 @@ const onEscKeyRelease = (event) => { } } +const handleContextMenuOpen = (event) => { + if (shown.value && event.detail !== contextMenuId) { + hideContextMenu() + } +} + const handleClickOutside = (event) => { const elements = document.elementsFromPoint(event.clientX, event.clientY) if ( @@ -105,11 +116,13 @@ const handleClickOutside = (event) => { onMounted(() => { window.addEventListener('click', handleClickOutside) + window.addEventListener(contextMenuOpenEvent, handleContextMenuOpen) document.body.addEventListener('keyup', onEscKeyRelease) }) onBeforeUnmount(() => { window.removeEventListener('click', handleClickOutside) + window.removeEventListener(contextMenuOpenEvent, handleContextMenuOpen) document.removeEventListener('keyup', onEscKeyRelease) }) diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue deleted file mode 100644 index 6845a00f2b..0000000000 --- a/apps/app-frontend/src/components/ui/Instance.vue +++ /dev/null @@ -1,278 +0,0 @@ - - - diff --git a/apps/app-frontend/src/components/ui/WelcomeScreen.vue b/apps/app-frontend/src/components/ui/WelcomeScreen.vue new file mode 100644 index 0000000000..ebe779b487 --- /dev/null +++ b/apps/app-frontend/src/components/ui/WelcomeScreen.vue @@ -0,0 +1,103 @@ + + + diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue index 3c84d90668..da3d769dfb 100644 --- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue +++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue @@ -19,8 +19,10 @@ import { useRouter } from 'vue-router' import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue' import { trackEvent } from '@/helpers/analytics' +import { toError } from '@/helpers/errors' import { install_duplicate_instance } from '@/helpers/install' -import { edit, edit_icon, list, remove } from '@/helpers/instance' +import { edit, edit_icon, remove } from '@/helpers/instance' +import { create_group, list_groups } from '@/helpers/instance-groups' import { injectInstanceSettings } from '@/providers/instance-settings' import type { GameInstance } from '../../../helpers/types' @@ -38,7 +40,7 @@ const releaseChannelOptions: ReleaseChannel[] = ['release', 'beta', 'alpha'] const title = ref(instance.value.name) const icon: Ref = ref(instance.value.icon_path) -const groups = ref([...instance.value.groups]) +const groupIds = ref([...instance.value.group_ids]) const savingReleaseChannel = ref(false) const selectedReleaseChannel = ref(instance.value.update_channel) const releaseChannelDisabledItems = computed(() => @@ -57,10 +59,7 @@ async function duplicateInstance() { }) } -const allInstances = ref((await list()) as GameInstance[]) -const availableGroups = computed(() => [ - ...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]), -]) +const availableGroups = ref(await list_groups()) function formatReleaseChannelLabel(channel: ReleaseChannel) { switch (channel) { @@ -135,28 +134,34 @@ async function setIcon() { const editInstanceObject = computed(() => ({ name: title.value.trim().substring(0, 32) ?? 'Instance', - groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0), + group_ids: groupIds.value, })) -const toggleGroup = (group: string) => { - if (groups.value.includes(group)) { - groups.value = groups.value.filter((x) => x !== group) +const toggleGroup = (groupId: string) => { + if (groupIds.value.includes(groupId)) { + groupIds.value = groupIds.value.filter((id) => id !== groupId) } else { - groups.value.push(group) + groupIds.value.push(groupId) } } -const addCategory = () => { +const addCategory = async () => { const text = newCategoryInput.value.trim() if (text.length > 0) { - groups.value.push(text.substring(0, 32)) - newCategoryInput.value = '' + try { + const group = await create_group(text.substring(0, 128)) + availableGroups.value.push(group) + groupIds.value.push(group.id) + newCategoryInput.value = '' + } catch (error) { + handleError(toError(error)) + } } } watch( - [title, groups, groups], + [title, groupIds], async () => { if (removing.value) return await edit(instance.value.id, editInstanceObject.value).catch(handleError) @@ -369,15 +374,16 @@ const messages = defineMessages({
diff --git a/apps/app-frontend/src/components/ui/library/LibrarySelectionActionBar.vue b/apps/app-frontend/src/components/ui/library/LibrarySelectionActionBar.vue new file mode 100644 index 0000000000..91b4e1c1d3 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/LibrarySelectionActionBar.vue @@ -0,0 +1,195 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/index.vue b/apps/app-frontend/src/components/ui/library/index.vue new file mode 100644 index 0000000000..4e1726c891 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/index.vue @@ -0,0 +1,139 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/drag-gather.vue b/apps/app-frontend/src/components/ui/library/instance-group/drag-gather.vue new file mode 100644 index 0000000000..c0ec242a1a --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/drag-gather.vue @@ -0,0 +1,98 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue b/apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue new file mode 100644 index 0000000000..7290c1728c --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue @@ -0,0 +1,76 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/index.vue b/apps/app-frontend/src/components/ui/library/instance-group/index.vue new file mode 100644 index 0000000000..68feb5bdf1 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/index.vue @@ -0,0 +1,422 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-group-dnd.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-group-dnd.vue new file mode 100644 index 0000000000..1c11788865 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-group-dnd.vue @@ -0,0 +1,190 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance.vue new file mode 100644 index 0000000000..ad051a9819 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/instance.vue @@ -0,0 +1,340 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/use-instance-drag-gather.ts b/apps/app-frontend/src/components/ui/library/instance-group/use-instance-drag-gather.ts new file mode 100644 index 0000000000..932b182a59 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/use-instance-drag-gather.ts @@ -0,0 +1,128 @@ +import { onBeforeUnmount, type Ref, ref } from 'vue' + +import type { ActiveInstanceGroupDrag } from '@/components/ui/library/use-library' +import type { GameInstance } from '@/helpers/types' + +type Point = { + x: number + y: number +} + +type InstanceDragData = { + instanceId: string + fromGroup: string +} + +export type InstanceDragGatherItem = { + instance: GameInstance + rect: { + left: number + top: number + width: number + height: number + } +} + +export function useInstanceDragGather(instances: Ref) { + const items = ref([]) + const target = ref({ x: 0, y: 0 }) + const targetOffset = ref({ x: 0, y: 0 }) + const isGathering = ref(false) + let cleanupTimer: number | undefined + + const clearCleanupTimer = () => { + if (cleanupTimer !== undefined) { + clearTimeout(cleanupTimer) + cleanupTimer = undefined + } + } + + const clear = () => { + clearCleanupTimer() + items.value = [] + targetOffset.value = { x: 0, y: 0 } + isGathering.value = false + } + + const updateTarget = (pointer: Point) => { + target.value = { + x: pointer.x + targetOffset.value.x, + y: pointer.y + targetOffset.value.y, + } + } + + const start = ( + drag: ActiveInstanceGroupDrag | null, + source: InstanceDragData, + pointer: Point, + ) => { + clear() + + const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches + if (!drag || drag.instances.length < 2 || reduceMotion) return + + const instanceCards = Array.from( + document.querySelectorAll('[data-library-instance-card]'), + ) + const sourceCard = instanceCards.find( + (card) => + card.dataset.instanceId === source.instanceId && + card.dataset.instanceGroup === source.fromGroup, + ) + + if (sourceCard) { + const sourceRect = sourceCard.getBoundingClientRect() + targetOffset.value = { + x: sourceRect.left + sourceRect.width / 2 - pointer.x, + y: sourceRect.top + sourceRect.height / 2 - pointer.y, + } + } + + items.value = drag.instances.flatMap(({ instanceId, groupId }) => { + const instance = instances.value.find((candidate) => candidate.id === instanceId) + const matchingCards = instanceCards.filter( + (card) => card.dataset.instanceId === instanceId && card.getClientRects().length > 0, + ) + const card = + matchingCards.find((candidate) => candidate.dataset.instanceGroup === groupId) ?? + matchingCards[0] + if (!instance || !card) return [] + + const rect = card.getBoundingClientRect() + return [ + { + instance, + rect: { + left: rect.left, + top: rect.top, + width: rect.width, + height: rect.height, + }, + }, + ] + }) + updateTarget(pointer) + isGathering.value = items.value.length > 0 + } + + const finish = () => { + isGathering.value = false + clearCleanupTimer() + cleanupTimer = window.setTimeout(() => { + items.value = [] + cleanupTimer = undefined + }, 400) + } + + onBeforeUnmount(clearCleanupTimer) + + return { + items, + target, + isGathering, + start, + updateTarget, + clear, + finish, + } +} diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/filter-menu.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/filter-menu.vue new file mode 100644 index 0000000000..5bfafd65cd --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/library-toolbar/filter-menu.vue @@ -0,0 +1,57 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue new file mode 100644 index 0000000000..b6587906c5 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue @@ -0,0 +1,54 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue new file mode 100644 index 0000000000..8f60781109 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue @@ -0,0 +1,140 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue new file mode 100644 index 0000000000..2054df21bd --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue @@ -0,0 +1,42 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/use-library.ts b/apps/app-frontend/src/components/ui/library/use-library.ts new file mode 100644 index 0000000000..fabab57410 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/use-library.ts @@ -0,0 +1,899 @@ +import type { Labrinth } from '@modrinth/api-client' +import { formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui' +import { useEventListener, useStorage } from '@vueuse/core' +import dayjs from 'dayjs' +import { + computed, + inject, + type InjectionKey, + provide, + type Ref, + ref, + watch, + watchEffect, +} from 'vue' + +import { get_project_v3_many } from '@/helpers/cache.js' +import { toError } from '@/helpers/errors' +import { install_duplicate_instance } from '@/helpers/install' +import { edit, remove } from '@/helpers/instance' +import { + create_group as createInstanceGroup, + delete_group as deleteInstanceGroup, + type InstanceGroupDefinition, + list_groups as listInstanceGroups, + rename_group as renameInstanceGroup, +} from '@/helpers/instance-groups' +import type { GameInstance } from '@/helpers/types' + +export const librarySortOptions = [ + 'Manual', + 'Name', + 'Last played', + 'Hours played', + 'Date created', + 'Date modified', +] as const + +export const libraryGroupOptions = [ + { value: 'Group', label: 'Custom group' }, + { value: 'Loader', label: 'Loader' }, + { value: 'Game version', label: 'Game version' }, + { value: 'None', label: 'No grouping' }, +] as const + +export type LibrarySort = (typeof librarySortOptions)[number] +export type LibraryGroupBy = (typeof libraryGroupOptions)[number]['value'] +export type LibraryFilters = Record<'instanceType' | 'gameVersion' | 'loader', string[]> + +export type InstanceGroup = { + id: string + key: string + instances: GameInstance[] +} + +export type LibraryInstanceSelection = { + instanceId: string + groupId: string +} + +export type ActiveInstanceGroupDrag = { + instances: LibraryInstanceSelection[] + primaryInstanceId: string + fromGroup: string | null +} + +export const getLibraryInstanceSelectionKey = ({ instanceId, groupId }: LibraryInstanceSelection) => + JSON.stringify([groupId, instanceId]) + +export type InstanceCard = { + instance: GameInstance + playing: boolean + play: (event: MouseEvent | null, context: string) => Promise + stop: (event: MouseEvent | null, context: string) => Promise + addContent: () => Promise + seeInstance: () => Promise + openFolder: () => Promise +} + +type InstanceContextMenu = { + showMenu: (event: MouseEvent, item: InstanceCard, options: unknown[]) => void +} + +type ConfirmDeleteModal = { + show: () => void +} + +type ContextMenuSelection = { + option: string + item: InstanceCard +} + +function createLibraryState(instances: Ref) { + const { handleError } = injectNotificationManager() + const { formatMessage } = useVIntl() + + const search = ref('') + const filters = ref({ + instanceType: [], + gameVersion: [], + loader: [], + }) + const serverProjectIds = ref(new Set()) + const libraryGroups = ref([]) + const isNewGroupModalOpen = ref(false) + const newGroupName = ref('') + const newGroupSearch = ref('') + const selectedNewGroupInstanceIds = ref(new Set()) + const selectedLibraryInstances = ref(new Map()) + const isLibraryInstanceSelectionActive = computed(() => selectedLibraryInstances.value.size > 0) + const creatingGroup = ref(false) + const groupIdPendingNameEdit = ref(null) + const activeInstanceGroupDrag = ref(null) + const activeDraggedInstanceKeys = computed( + () => + new Set(activeInstanceGroupDrag.value?.instances.map(getLibraryInstanceSelectionKey) ?? []), + ) + const instanceGroupDragTarget = ref(null) + const instanceGroupDragPointer = ref({ x: 0, y: 0 }) + const isAddingInstanceToGroup = ref(false) + const instanceOptions = ref(null) + const currentDeleteInstanceId = ref(null) + const currentContextGroupId = ref(null) + const confirmDeleteModal = ref(null) + + const displayState = useStorage<{ + group: LibraryGroupBy + sortBy: LibrarySort + collapsedGroups: string[] + }>( + 'Instances-grid-display-state', + { + group: 'Group', + sortBy: 'Name', + collapsedGroups: [], + }, + localStorage, + { mergeDefaults: true }, + ) + + if (!librarySortOptions.includes(displayState.value.sortBy)) { + displayState.value.sortBy = 'Name' + } + + const linkedInstances = computed(() => instances.value.filter((instance) => instance.link)) + const collapsedSectionKeys = computed(() => new Set(displayState.value.collapsedGroups)) + const groupNames = computed( + () => + new Set( + libraryGroups.value + .map((group) => group.name) + .map((group) => group.trim()) + .filter((group) => group && group.toLowerCase() !== 'none'), + ), + ) + const existingGroupNames = computed( + () => new Set(['none', ...Array.from(groupNames.value, (group) => group.toLowerCase())]), + ) + const normalizedNewGroupName = computed(() => newGroupName.value.trim().substring(0, 128)) + const newGroupInstances = computed(() => { + const query = newGroupSearch.value.trim().toLowerCase() + + return instances.value + .filter((instance) => !query || instance.name.toLowerCase().includes(query)) + .slice() + .sort((a, b) => { + const groupedDifference = Number(a.group_ids.length > 0) - Number(b.group_ids.length > 0) + if (groupedDifference !== 0) return groupedDifference + + return a.name.localeCompare(b.name) + }) + }) + const canCreateGroup = computed( + () => normalizedNewGroupName.value.length > 0 && !creatingGroup.value, + ) + + const refreshGroups = async () => { + try { + libraryGroups.value = await listInstanceGroups() + } catch (error) { + handleError(toError(error)) + } + } + + void refreshGroups() + + watchEffect(async () => { + const projectIds = [ + ...new Set( + linkedInstances.value.flatMap((instance) => + instance.link?.project_id ? [instance.link.project_id] : [], + ), + ), + ] + + if (projectIds.length === 0) { + serverProjectIds.value = new Set() + return + } + + try { + const projects = (await get_project_v3_many( + projectIds, + 'must_revalidate', + )) as Array + serverProjectIds.value = new Set( + projects + .filter( + (project): project is Labrinth.Projects.v3.Project => project?.minecraft_server != null, + ) + .map((project) => project.id), + ) + } catch { + serverProjectIds.value = new Set() + } + }) + + const getInstanceType = (instance: GameInstance) => { + if (!instance.link) return 'custom' + if (serverProjectIds.value.has(instance.link.project_id ?? '')) return 'server' + return 'modpack' + } + + const filteredInstances = computed(() => + instances.value.filter((instance) => { + const instanceTypeMatches = + filters.value.instanceType.length === 0 || + filters.value.instanceType.includes(getInstanceType(instance)) + const gameVersionMatches = + filters.value.gameVersion.length === 0 || + filters.value.gameVersion.includes(instance.game_version) + const loaderMatches = + filters.value.loader.length === 0 || filters.value.loader.includes(instance.loader) + + return instanceTypeMatches && gameVersionMatches && loaderMatches + }), + ) + + const instanceGroups = computed(() => { + const visibleInstances = filteredInstances.value.filter((instance) => + instance.name.toLowerCase().includes(search.value.toLowerCase()), + ) + + switch (displayState.value.sortBy) { + case 'Manual': + break + case 'Name': + visibleInstances.sort((a, b) => a.name.localeCompare(b.name)) + break + case 'Last played': + visibleInstances.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))) + break + case 'Hours played': + visibleInstances.sort( + (a, b) => + b.recent_time_played + + b.submitted_time_played - + (a.recent_time_played + a.submitted_time_played), + ) + break + case 'Date created': + visibleInstances.sort((a, b) => dayjs(b.created).diff(dayjs(a.created))) + break + case 'Date modified': + visibleInstances.sort((a, b) => dayjs(b.modified).diff(dayjs(a.modified))) + break + } + + const groupedInstances = new Map() + const addToGroup = (id: string, name: string, instance: GameInstance) => { + const group = groupedInstances.get(id) ?? { name, instances: [] } + group.instances.push(instance) + groupedInstances.set(id, group) + } + const groupsById = new Map(libraryGroups.value.map((group) => [group.id, group])) + + for (const instance of visibleInstances) { + switch (displayState.value.group) { + case 'Loader': + { + const name = formatLoader(formatMessage, instance.loader) + addToGroup(`Loader:${name}`, name, instance) + } + break + case 'Game version': + addToGroup(`Game version:${instance.game_version}`, instance.game_version, instance) + break + case 'Group': + if (instance.group_ids.length === 0) { + addToGroup('group:none', 'None', instance) + } else { + for (const groupId of instance.group_ids) { + const group = groupsById.get(groupId) + addToGroup(groupId, group?.name ?? groupId, instance) + } + } + break + case 'None': + addToGroup('None:None', 'None', instance) + break + } + } + + if (displayState.value.group === 'Group') { + if (!groupedInstances.has('group:none')) { + groupedInstances.set('group:none', { name: 'None', instances: [] }) + } + + for (const group of libraryGroups.value) { + if (!groupedInstances.has(group.id)) { + groupedInstances.set(group.id, { name: group.name, instances: [] }) + } + } + } + + const groups = Array.from(groupedInstances, ([id, group]) => ({ + id, + key: group.name, + instances: group.instances, + })) + + if (displayState.value.sortBy === 'Name') { + groups.sort((a, b) => a.key.localeCompare(b.key) || a.id.localeCompare(b.id)) + } + + if (displayState.value.group === 'Game version') { + groups.sort((a, b) => a.key.localeCompare(b.key, undefined, { numeric: true })) + } + + if (displayState.value.group === 'Group') { + groups.sort((a, b) => { + if (a.key === 'None') return 1 + if (b.key === 'None') return -1 + return a.key.localeCompare(b.key) || a.id.localeCompare(b.id) + }) + } + + return groups + }) + + const getSectionKey = (sectionId: string) => `${displayState.value.group}:${sectionId}` + + const isSectionCollapsed = (sectionId: string) => + collapsedSectionKeys.value.has(getSectionKey(sectionId)) + + const setSectionCollapsed = (sectionId: string, collapsed: boolean) => { + const sectionKey = getSectionKey(sectionId) + const collapsedSections = new Set(displayState.value.collapsedGroups) + + if (collapsed) { + collapsedSections.add(sectionKey) + } else { + collapsedSections.delete(sectionKey) + } + + displayState.value.collapsedGroups = [...collapsedSections] + } + + const normalizeInstanceGroupId = (groupId: string) => (groupId === 'group:none' ? null : groupId) + + const updateInstanceGroupDrag = ( + pointer?: { x: number; y: number }, + altKey = isAddingInstanceToGroup.value, + ) => { + if (pointer) { + instanceGroupDragPointer.value = { + x: pointer.x, + y: pointer.y, + } + } + isAddingInstanceToGroup.value = altKey + } + + const startInstanceGroupDrag = ( + instanceId: string, + groupId: string, + pointer?: { x: number; y: number }, + altKey = false, + ) => { + if (displayState.value.group !== 'Group') return + + const primaryInstance = { instanceId, groupId } + const primaryInstanceKey = getLibraryInstanceSelectionKey(primaryInstance) + const draggedInstances = selectedLibraryInstances.value.has(primaryInstanceKey) + ? [ + primaryInstance, + ...[...selectedLibraryInstances.value.values()].filter( + (selectedInstance) => + getLibraryInstanceSelectionKey(selectedInstance) !== primaryInstanceKey, + ), + ].filter((selectedInstance) => + instances.value.some((instance) => instance.id === selectedInstance.instanceId), + ) + : [primaryInstance] + + activeInstanceGroupDrag.value = { + instances: draggedInstances, + primaryInstanceId: instanceId, + fromGroup: normalizeInstanceGroupId(groupId), + } + updateInstanceGroupDrag(pointer, altKey) + } + + const finishInstanceGroupDrag = () => { + activeInstanceGroupDrag.value = null + instanceGroupDragTarget.value = null + isAddingInstanceToGroup.value = false + } + + const setInstanceGroupDragTarget = (groupId: string | null) => { + instanceGroupDragTarget.value = groupId + } + + const getInstanceGroupDropState = (groupId: string) => { + const drag = activeInstanceGroupDrag.value + const draggedSelectionsByInstanceId = new Map() + for (const selection of drag?.instances ?? []) { + const selections = draggedSelectionsByInstanceId.get(selection.instanceId) ?? [] + selections.push(selection) + draggedSelectionsByInstanceId.set(selection.instanceId, selections) + } + const draggedInstanceIds = new Set( + drag?.instances.map((selection) => selection.instanceId) ?? [], + ) + const draggedInstances = instances.value.filter((instance) => + draggedInstanceIds.has(instance.id), + ) + const toGroup = normalizeInstanceGroupId(groupId) + const operation = isAddingInstanceToGroup.value ? 'add' : 'move' + const canAddToGroup = operation !== 'add' || toGroup !== null + const hasChanges = draggedInstances.some((instance) => { + if (operation === 'add') { + return toGroup !== null && !instance.group_ids.includes(toGroup) + } + + if (toGroup !== null) { + return !instance.group_ids.includes(toGroup) + } + + const sourceGroupIds = new Set( + (draggedSelectionsByInstanceId.get(instance.id) ?? []) + .map((selection) => normalizeInstanceGroupId(selection.groupId)) + .filter((sourceGroupId): sourceGroupId is string => sourceGroupId !== null), + ) + return instance.group_ids.some((sourceGroupId) => sourceGroupIds.has(sourceGroupId)) + }) + + return { + alreadyInGroup: draggedInstances.length > 0 && !hasChanges, + canDrop: !!drag && draggedInstances.length > 0 && hasChanges && canAddToGroup, + operation, + } as const + } + + const instanceGroupDragStatus = computed(() => { + const target = instanceGroupDragTarget.value + if (target) { + const dropState = getInstanceGroupDropState(target) + if (!dropState.canDrop || dropState.operation !== 'add') return + + const count = new Set( + activeInstanceGroupDrag.value?.instances.map((selection) => selection.instanceId) ?? [], + ).size + return count > 1 ? `Duplicate ${count} instances to group` : 'Duplicate into group' + } + + if (isAddingInstanceToGroup.value) return 'Duplicate to group' + return + }) + + const moveDraggedInstancesToGroup = async (groupId: string, addToGroup = false) => { + const drag = activeInstanceGroupDrag.value + const toGroup = normalizeInstanceGroupId(groupId) + if (!drag) return false + + const dropState = getInstanceGroupDropState(groupId) + if (!dropState.canDrop) return false + + const shouldAdd = addToGroup && toGroup !== null + const draggedSelectionsByInstanceId = new Map() + for (const selection of drag.instances) { + const selections = draggedSelectionsByInstanceId.get(selection.instanceId) ?? [] + selections.push(selection) + draggedSelectionsByInstanceId.set(selection.instanceId, selections) + } + const draggedInstanceIds = new Set(draggedSelectionsByInstanceId.keys()) + const draggedInstances = instances.value.filter((instance) => + draggedInstanceIds.has(instance.id), + ) + const operations = draggedInstances.flatMap((instance) => { + if (toGroup && instance.group_ids.includes(toGroup)) { + return [] + } + + const selections = draggedSelectionsByInstanceId.get(instance.id) ?? [] + let nextGroupIds = [...instance.group_ids] + if (shouldAdd && toGroup) { + nextGroupIds.push(toGroup) + } else { + const sourceGroupIds = new Set( + selections + .map((selection) => normalizeInstanceGroupId(selection.groupId)) + .filter((sourceGroupId): sourceGroupId is string => sourceGroupId !== null), + ) + nextGroupIds = nextGroupIds.filter((sourceGroupId) => !sourceGroupIds.has(sourceGroupId)) + if (toGroup) { + nextGroupIds.push(toGroup) + } + } + + return [ + { + instanceId: instance.id, + selections, + destinationSelectionGroupId: + toGroup !== null || nextGroupIds.length === 0 ? groupId : null, + promise: edit(instance.id, { group_ids: nextGroupIds }), + }, + ] + }) + const results = await Promise.allSettled(operations.map((operation) => operation.promise)) + let movedInstanceCount = 0 + const nextSelectedInstances = new Map(selectedLibraryInstances.value) + + for (const [index, result] of results.entries()) { + if (result.status === 'rejected') { + handleError(toError(result.reason)) + } else { + movedInstanceCount++ + const operation = operations[index] + const selectedMovedSelections = operation.selections.filter((selection) => + nextSelectedInstances.has(getLibraryInstanceSelectionKey(selection)), + ) + for (const selection of selectedMovedSelections) { + nextSelectedInstances.delete(getLibraryInstanceSelectionKey(selection)) + } + if (selectedMovedSelections.length > 0 && operation.destinationSelectionGroupId !== null) { + const movedSelection = { + instanceId: operation.instanceId, + groupId: operation.destinationSelectionGroupId, + } + nextSelectedInstances.set(getLibraryInstanceSelectionKey(movedSelection), movedSelection) + } + } + } + selectedLibraryInstances.value = nextSelectedInstances + + return movedInstanceCount > 0 + } + + useEventListener(window, 'keydown', (event) => { + if (event.key === 'Alt' && activeInstanceGroupDrag.value) { + isAddingInstanceToGroup.value = true + } + }) + useEventListener(window, 'keyup', (event) => { + if (event.key === 'Alt') { + isAddingInstanceToGroup.value = false + } + }) + useEventListener(window, 'blur', () => { + isAddingInstanceToGroup.value = false + }) + + const getDefaultNewGroupName = () => { + let groupNumber = groupNames.value.size + 1 + while (existingGroupNames.value.has(`group ${groupNumber}`.toLowerCase())) { + groupNumber++ + } + + return `Group ${groupNumber}` + } + + const openNewGroupModal = (instanceIds: Iterable = []) => { + newGroupName.value = getDefaultNewGroupName() + newGroupSearch.value = '' + selectedNewGroupInstanceIds.value = new Set(instanceIds) + isNewGroupModalOpen.value = true + } + + const closeNewGroupModal = () => { + isNewGroupModalOpen.value = false + } + + const toggleNewGroupInstance = (instanceId: string) => { + const selectedIds = new Set(selectedNewGroupInstanceIds.value) + + if (selectedIds.has(instanceId)) { + selectedIds.delete(instanceId) + } else { + selectedIds.add(instanceId) + } + + selectedNewGroupInstanceIds.value = selectedIds + } + + const clearLibraryInstanceSelection = () => { + selectedLibraryInstances.value = new Map() + } + + watch(() => displayState.value.group, clearLibraryInstanceSelection) + + const setSelectedLibraryInstances = (selections: Iterable) => { + selectedLibraryInstances.value = new Map( + [...selections].map((selection) => [getLibraryInstanceSelectionKey(selection), selection]), + ) + } + + const toggleLibraryInstanceSelection = (selection: LibraryInstanceSelection) => { + const selectedInstances = new Map(selectedLibraryInstances.value) + const selectionKey = getLibraryInstanceSelectionKey(selection) + + if (selectedInstances.has(selectionKey)) { + selectedInstances.delete(selectionKey) + } else { + selectedInstances.set(selectionKey, selection) + } + + selectedLibraryInstances.value = selectedInstances + } + + useEventListener(window, 'keydown', (event) => { + if ( + event.key === 'Escape' && + !event.defaultPrevented && + isLibraryInstanceSelectionActive.value + ) { + clearLibraryInstanceSelection() + } + }) + + const createGroup = async () => { + if (!canCreateGroup.value) return false + + creatingGroup.value = true + + try { + const group = await createInstanceGroup(normalizedNewGroupName.value) + libraryGroups.value = [ + ...libraryGroups.value.filter((existingGroup) => existingGroup.id !== group.id), + group, + ] + + await Promise.all( + instances.value + .filter((instance) => selectedNewGroupInstanceIds.value.has(instance.id)) + .map((instance) => + edit(instance.id, { + group_ids: [...instance.group_ids, group.id], + }), + ), + ) + return true + } catch (error) { + handleError(toError(error)) + await refreshGroups() + return false + } finally { + creatingGroup.value = false + } + } + + const createDefaultGroup = async (instanceIds: Iterable = []) => { + if (creatingGroup.value) return false + + creatingGroup.value = true + + try { + const group = await createInstanceGroup(getDefaultNewGroupName()) + libraryGroups.value = [ + ...libraryGroups.value.filter((existingGroup) => existingGroup.id !== group.id), + group, + ] + + const selectedInstanceIds = new Set(instanceIds) + const instancesToAdd = instances.value.filter((instance) => + selectedInstanceIds.has(instance.id), + ) + await Promise.all( + instancesToAdd.map((instance) => + edit(instance.id, { + group_ids: [...instance.group_ids, group.id], + }), + ), + ) + + if (instancesToAdd.length > 0) { + setSelectedLibraryInstances( + instancesToAdd.map((instance) => ({ + instanceId: instance.id, + groupId: group.id, + })), + ) + } + + displayState.value.group = 'Group' + groupIdPendingNameEdit.value = group.id + return true + } catch (error) { + handleError(toError(error)) + await refreshGroups() + return false + } finally { + creatingGroup.value = false + } + } + + const completePendingGroupNameEdit = (groupId: string) => { + if (groupIdPendingNameEdit.value === groupId) { + groupIdPendingNameEdit.value = null + } + } + + const deleteGroup = async (groupId: string) => { + try { + await deleteInstanceGroup(groupId) + libraryGroups.value = libraryGroups.value.filter((group) => group.id !== groupId) + return true + } catch (error) { + handleError(toError(error)) + await refreshGroups() + return false + } + } + + const renameGroup = async (groupId: string, newName: string) => { + const normalizedNewName = newName.trim() + const currentGroup = libraryGroups.value.find((group) => group.id === groupId) + if (currentGroup?.name === normalizedNewName) return true + + try { + const renamedGroup = await renameInstanceGroup(groupId, normalizedNewName) + libraryGroups.value = [ + ...libraryGroups.value.filter((group) => group.id !== groupId), + renamedGroup, + ] + return true + } catch (error) { + handleError(toError(error)) + await refreshGroups() + return false + } + } + + const deleteInstance = async () => { + if (!currentDeleteInstanceId.value) return + + await remove(currentDeleteInstanceId.value).catch((error) => handleError(toError(error))) + currentDeleteInstanceId.value = null + } + + const duplicateInstance = async (instanceId: string) => { + await install_duplicate_instance(instanceId).catch((error) => handleError(toError(error))) + } + + const handleInstanceContextMenu = ( + event: MouseEvent, + item: InstanceCard, + instanceGroupId: string, + ) => { + currentContextGroupId.value = + displayState.value.group === 'Group' && instanceGroupId !== 'group:none' + ? instanceGroupId + : null + + const baseOptions = [ + ...(item.instance.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]), + { name: 'edit' }, + { name: 'duplicate' }, + { name: 'open' }, + { name: 'copy' }, + ...(currentContextGroupId.value + ? [{ name: 'remove_from_group' }, { type: 'divider' }] + : [{ type: 'divider' }]), + { name: 'delete', color: 'danger' }, + ] + + instanceOptions.value?.showMenu( + event, + item, + item.playing + ? [{ name: 'stop', color: 'danger' }, ...baseOptions] + : [ + ...(item.instance.quarantined ? [] : [{ name: 'play', color: 'primary' }]), + ...baseOptions, + ], + ) + } + + const handleInstanceOption = async ({ option, item }: ContextMenuSelection) => { + switch (option) { + case 'play': + await item.play(null, 'InstanceGridContextMenu') + break + case 'stop': + await item.stop(null, 'InstanceGridContextMenu') + break + case 'add_content': + await item.addContent() + break + case 'edit': + await item.seeInstance() + break + case 'duplicate': + if (item.instance.install_stage === 'installed') { + await duplicateInstance(item.instance.id) + } + break + case 'open': + await item.openFolder() + break + case 'copy': + await navigator.clipboard.writeText(item.instance.id) + break + case 'remove_from_group': + if (currentContextGroupId.value) { + const groupId = currentContextGroupId.value + await edit(item.instance.id, { + group_ids: item.instance.group_ids.filter( + (instanceGroupId) => instanceGroupId !== groupId, + ), + }).catch((error) => handleError(toError(error))) + } + break + case 'delete': + currentDeleteInstanceId.value = item.instance.id + confirmDeleteModal.value?.show() + break + } + } + + return { + instances, + libraryGroups, + search, + filters, + displayState, + instanceGroups, + isNewGroupModalOpen, + newGroupName, + newGroupSearch, + selectedNewGroupInstanceIds, + selectedLibraryInstances, + isLibraryInstanceSelectionActive, + activeInstanceGroupDrag, + activeDraggedInstanceKeys, + instanceGroupDragTarget, + instanceGroupDragPointer, + instanceGroupDragStatus, + isAddingInstanceToGroup, + creatingGroup, + groupIdPendingNameEdit, + newGroupInstances, + canCreateGroup, + instanceOptions, + confirmDeleteModal, + isSectionCollapsed, + setSectionCollapsed, + startInstanceGroupDrag, + updateInstanceGroupDrag, + finishInstanceGroupDrag, + setInstanceGroupDragTarget, + getInstanceGroupDropState, + moveDraggedInstancesToGroup, + openNewGroupModal, + closeNewGroupModal, + toggleNewGroupInstance, + clearLibraryInstanceSelection, + setSelectedLibraryInstances, + toggleLibraryInstanceSelection, + createGroup, + createDefaultGroup, + completePendingGroupNameEdit, + deleteGroup, + renameGroup, + deleteInstance, + handleInstanceContextMenu, + handleInstanceOption, + } +} + +export type LibraryState = ReturnType + +const libraryKey: InjectionKey = Symbol('library') + +export function provideLibrary(instances: Ref) { + const library = createLibraryState(instances) + provide(libraryKey, library) + return library +} + +export function useLibrary() { + const library = inject(libraryKey) + + if (!library) { + throw new Error('useLibrary must be called within a library provider') + } + + return library +} diff --git a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue index d6c869ba13..b4c9b0957c 100644 --- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue +++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue @@ -1,7 +1,7 @@