diff --git a/Cargo.lock b/Cargo.lock index 726ebeeed2..d266055679 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -11020,6 +11020,7 @@ dependencies = [ "heck 0.5.0", "hickory-resolver 0.25.2", "httpdate", + "image", "indicatif", "itertools 0.14.0", "modrinth-content-management", 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..8d781e3aca 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, @@ -57,7 +56,7 @@ import { import { renderString } from '@modrinth/utils' import { useQuery, useQueryClient } from '@tanstack/vue-query' import { getVersion } from '@tauri-apps/api/app' -import { invoke } from '@tauri-apps/api/core' +import { convertFileSrc, invoke } from '@tauri-apps/api/core' import { getCurrentWindow } from '@tauri-apps/api/window' import { fetch as tauriFetch } from '@tauri-apps/plugin-http' import { openUrl } from '@tauri-apps/plugin-opener' @@ -75,6 +74,7 @@ import ErrorModal from '@/components/ui/ErrorModal.vue' import FriendsList from '@/components/ui/friends/FriendsList.vue' import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue' import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue' +import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue' import MinecraftRequiredModal from '@/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue' import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue' @@ -83,6 +83,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' @@ -280,13 +281,42 @@ const { fetchExistingInstanceNames, handleCreate, handleBrowseModpacks, - searchModpacks, - getProjectVersions, + searchProjects, getLoaderManifest, setModpackAlreadyInstalledModal, handleModpackDuplicateCreateAnyway, handleModpackDuplicateGoToInstance, + onboardingChecklist, } = setupProviders(notificationManager, popupNotificationManager) +const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist +const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value) +const creationIconEditorModal = ref(null) +const creationIconRecipe = ref(null) + +async function randomizeCreationIcon() { + const generated = await creationIconEditorModal.value?.randomizeAndSave() + if (!generated) return null + + creationIconRecipe.value = generated.recipe + return { + path: generated.iconPath, + previewUrl: convertFileSrc(generated.iconPath), + } +} + +function customizeCreationIcon() { + creationIconEditorModal.value?.show() +} + +function onCreationIconSaved(iconPath, recipe) { + creationIconRecipe.value = recipe + const context = installationModal.value?.ctx + if (!context) return + + context.instanceIcon.value = null + context.instanceIconUrl.value = convertFileSrc(iconPath) + context.instanceIconPath.value = iconPath +} const news = ref([]) const availableSurvey = ref(false) @@ -303,7 +333,6 @@ window.addEventListener('online', () => { offline.value = false }) -const showOnboarding = ref(false) const nativeDecorations = ref(false) const os = ref('') @@ -454,6 +483,8 @@ function handleAdsConsentRequired(required) { } async function setupApp() { + await onboardingChecklist.initialize() + const { native_decorations, theme, @@ -462,8 +493,6 @@ async function setupApp() { collapsed_navigation, hide_nametag_skins_page, advanced_rendering, - onboarded, - default_page, toggle_sidebar, developer_mode, feature_flags, @@ -475,16 +504,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 +529,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()) @@ -723,6 +746,7 @@ const { projectInfo: contentInstallProjectInfo, handleInstallToInstance, handleCreateAndInstall, + prepareNewInstance, handleNavigate: handleContentInstallNavigate, handleCancel: handleContentInstallCancel, setContentInstallModal, @@ -742,6 +766,35 @@ const { handleIncompatibilityWarningCancel: handleContentInstallIncompatibilityWarningCancel, } = contentInstall +async function prepareCreationProjectInstall(projectId, projectType) { + if (projectType === 'modpack') { + await contentInstall.install( + projectId, + null, + null, + 'CreationModalProject', + undefined, + (instanceId) => void router.push(`/instance/${encodeURIComponent(instanceId)}`), + ) + return null + } + + await prepareNewInstance(projectId) + const info = contentInstallProjectInfo.value + if (!info) throw new Error(`Project information is unavailable: '${projectId}'`) + + return { + projectId, + title: info.title, + iconUrl: info.iconUrl, + link: info.link, + owner: info.owner, + compatibleLoaders: [...contentInstallLoaders.value], + gameVersions: [...contentInstallGameVersions.value], + releaseGameVersions: new Set(contentInstallReleaseGameVersions.value), + } +} + const serverInstall = createServerInstall({ router, handleError, popupNotificationManager }) provideServerInstall(serverInstall) const { @@ -1585,18 +1638,34 @@ provideAppUpdateDownloadProgress(appUpdateDownload) type="instance" show-snapshot-toggle :fetch-existing-instance-names="fetchExistingInstanceNames" - :search-modpacks="searchModpacks" - :get-project-versions="getProjectVersions" + :search-projects="searchProjects" + :prepare-project-install="prepareCreationProjectInstall" + :create-project-install="handleCreateAndInstall" :get-loader-manifest="getLoaderManifest" + :randomize-instance-icon="randomizeCreationIcon" + :customize-instance-icon="customizeCreationIcon" @create="handleCreate" @browse-modpacks="handleBrowseModpacks" /> +
- - + + @@ -1612,19 +1681,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload) - - - @@ -1823,15 +1881,26 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :class="{ 'pb-12': !hasPlus }" data-overlayscrollbars-initialize > +
-
+

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/assets/instance-icons/dusk-block-gold-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-gold-test.png new file mode 100644 index 0000000000..1f7f7f9a00 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-gold-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png new file mode 100644 index 0000000000..20a70a0620 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png new file mode 100644 index 0000000000..7382a3a86e Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block.png b/apps/app-frontend/src/assets/instance-icons/dusk-block.png new file mode 100644 index 0000000000..2386f85323 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block.png differ diff --git a/apps/app-frontend/src/assets/welcome/icon-lights.svg b/apps/app-frontend/src/assets/welcome/icon-lights.svg new file mode 100644 index 0000000000..3d37f3e284 --- /dev/null +++ b/apps/app-frontend/src/assets/welcome/icon-lights.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/app-frontend/src/assets/welcome/icon-logo.svg b/apps/app-frontend/src/assets/welcome/icon-logo.svg new file mode 100644 index 0000000000..e6c606d63f --- /dev/null +++ b/apps/app-frontend/src/assets/welcome/icon-logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..a16b297876 --- /dev/null +++ b/apps/app-frontend/src/components/ui/WelcomeScreen.vue @@ -0,0 +1,156 @@ + + + + + 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..d5d8ebda86 100644 --- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue +++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue @@ -1,9 +1,15 @@ +
@@ -361,38 +384,6 @@ const messages = defineMessages({

-
-

- {{ formatMessage(messages.libraryGroups) }} -

- -
- -
- - - - -
-
-

- {{ formatMessage(messages.libraryGroupsDescription) }} -

-
-

{{ formatMessage(messages.updateChannel) }} diff --git a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts new file mode 100644 index 0000000000..dad3d0def2 --- /dev/null +++ b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts @@ -0,0 +1,71 @@ +import { defineMessages } from '@modrinth/ui' + +import duskBlock from '@/assets/instance-icons/dusk-block.png' +import duskBlockGold from '@/assets/instance-icons/dusk-block-gold-test.png' +import duskBlockRose from '@/assets/instance-icons/dusk-block-rose-test.png' +import duskBlockTeal from '@/assets/instance-icons/dusk-block-teal-test.png' + +const names = defineMessages({ + surface: { + id: 'instance.icon-editor.background.surface', + defaultMessage: 'Surface', + }, + green: { + id: 'instance.icon-editor.background.green', + defaultMessage: 'Green', + }, + purple: { + id: 'instance.icon-editor.background.purple', + defaultMessage: 'Purple', + }, + blue: { + id: 'instance.icon-editor.background.blue', + defaultMessage: 'Blue', + }, + orange: { + id: 'instance.icon-editor.background.orange', + defaultMessage: 'Orange', + }, + red: { + id: 'instance.icon-editor.background.red', + defaultMessage: 'Red', + }, + duskBlock: { + id: 'instance.icon-editor.symbol.dusk-block', + defaultMessage: 'Dusk block', + }, + duskBlockRose: { + id: 'instance.icon-editor.symbol.dusk-block-rose', + defaultMessage: 'Test block', + }, + duskBlockGold: { + id: 'instance.icon-editor.symbol.dusk-block-gold', + defaultMessage: 'Test block', + }, + duskBlockTeal: { + id: 'instance.icon-editor.symbol.dusk-block-teal', + defaultMessage: 'Test block', + }, +}) + +export const backgroundOptions = [ + { background: { type: 'color', value: '#34363c' }, name: names.surface }, + { background: { type: 'color', value: '#1bd96a' }, name: names.green }, + { background: { type: 'color', value: '#c78aff' }, name: names.purple }, + { background: { type: 'color', value: '#4f9cff' }, name: names.blue }, + { background: { type: 'color', value: '#ffa347' }, name: names.orange }, + { background: { type: 'color', value: '#ff496e' }, name: names.red }, +] as const + +export const symbolOptions = [ + { id: 'dusk_block', name: names.duskBlock, asset: duskBlock }, + { id: 'dusk_block_rose_test', name: names.duskBlockRose, asset: duskBlockRose }, + { id: 'dusk_block_gold_test', name: names.duskBlockGold, asset: duskBlockGold }, + { id: 'dusk_block_teal_test', name: names.duskBlockTeal, asset: duskBlockTeal }, +] as const + +export type BackgroundColor = (typeof backgroundOptions)[number]['background']['value'] +export type SymbolId = (typeof symbolOptions)[number]['id'] + +export const DEFAULT_BACKGROUND_COLOR = '#c78aff' satisfies BackgroundColor +export const DEFAULT_SYMBOL_ID = 'dusk_block' satisfies SymbolId diff --git a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue new file mode 100644 index 0000000000..2204ebc8a9 --- /dev/null +++ b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue @@ -0,0 +1,357 @@ + + + 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..95c9963bc8 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/LibrarySelectionActionBar.vue @@ -0,0 +1,205 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/group-instances-modal.vue b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue new file mode 100644 index 0000000000..1af56a65e5 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue @@ -0,0 +1,153 @@ + + + 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..bae6a200eb --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/index.vue @@ -0,0 +1,398 @@ + + + + + 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..e18796b495 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/drag-gather.vue @@ -0,0 +1,99 @@ + + + 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..44afe63b8b --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue @@ -0,0 +1,64 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/group-action-buttons.vue b/apps/app-frontend/src/components/ui/library/instance-group/group-action-buttons.vue new file mode 100644 index 0000000000..bb6b8bcd6d --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/group-action-buttons.vue @@ -0,0 +1,105 @@ + + + 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..edae57a76d --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/index.vue @@ -0,0 +1,544 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue new file mode 100644 index 0000000000..5947fe123d --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue @@ -0,0 +1,68 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue new file mode 100644 index 0000000000..840c0d656e --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue @@ -0,0 +1,339 @@ + + + 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..8551123152 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-group-dnd.vue @@ -0,0 +1,195 @@ + + + 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..1df175e403 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/instance-group/use-instance-drag-gather.ts @@ -0,0 +1,130 @@ +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 const gatherDuration = 500 + +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..1a62c635b5 --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue @@ -0,0 +1,50 @@ + + + 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..bb529475fd --- /dev/null +++ b/apps/app-frontend/src/components/ui/library/use-library.ts @@ -0,0 +1,1225 @@ +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, + FAVORITES_GROUP_ID, + type InstanceGroupDefinition, + list_groups as listInstanceGroups, + rename_group as renameInstanceGroup, + set_group_memberships as setInstanceGroupMemberships, + set_group_order as setInstanceGroupOrder, +} from '@/helpers/instance-groups' +import type { GameInstance } from '@/helpers/types' + +export const librarySortOptions = [ + 'Name', + 'Last played', + 'Hours played', + 'Date created', + 'Date modified', +] as const + +export const libraryGroupOptions = [ + { value: 'Group', label: 'Custom group' }, + { value: 'Instance type', label: 'Instance type' }, + { value: 'Loader', label: 'Loader' }, + { value: 'Game version', label: 'Game version' }, + { value: 'None', label: 'No grouping' }, +] as const + +const libraryInstanceTypeLabels = { + custom: 'Custom', + modpack: 'Modpack', + server: 'Server', +} as const + +const libraryLoaderPriority: Record = { + fabric: 0, + forge: 1, + neoforge: 2, +} + +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 = useStorage( + 'Instances-grid-filters', + { + instanceType: [], + gameVersion: [], + loader: [], + }, + localStorage, + { mergeDefaults: true }, + ) + const serverProjectIds = ref(new Set()) + const libraryGroups = ref([]) + const libraryGroupsLoaded = ref(false) + const isNewGroupModalOpen = ref(false) + const newGroupName = ref('') + const newGroupSearch = ref('') + const selectedNewGroupInstanceIds = ref(new Set()) + const isGroupInstancesModalOpen = ref(false) + const groupInstancesModalGroupId = ref(null) + const groupInstancesSearch = ref('') + const selectedGroupInstanceIds = ref(new Set()) + const savingGroupInstances = ref(false) + const selectedLibraryInstances = ref(new Map()) + const isLibraryInstanceSelectionActive = computed(() => selectedLibraryInstances.value.size > 0) + const creatingGroup = ref(false) + const reorderingGroups = ref(false) + const groupIdPendingNameEdit = ref(null) + const activeInstanceGroupDrag = ref(null) + const pendingInstanceGroupIds = ref(new Map()) + 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 currentDeleteInstanceNames = computed(() => + instances.value + .filter((instance) => instance.id === currentDeleteInstanceId.value) + .map((instance) => instance.name), + ) + const currentContextGroupId = ref(null) + const confirmDeleteModal = ref(null) + + const displayState = useStorage<{ + group: LibraryGroupBy + sortBy: LibrarySort + collapsedGroups: string[] + }>( + 'Instances-grid-display-state', + { + group: 'Group', + sortBy: 'Last played', + collapsedGroups: [], + }, + localStorage, + { mergeDefaults: true }, + ) + + if (!librarySortOptions.includes(displayState.value.sortBy)) { + displayState.value.sortBy = 'Last played' + } + + if (!libraryGroupOptions.some((option) => option.value === displayState.value.group)) { + displayState.value.group = 'Group' + } + + const linkedInstances = computed(() => instances.value.filter((instance) => instance.link)) + const collapsedSectionKeys = computed(() => new Set(displayState.value.collapsedGroups)) + const groupNames = computed( + () => + new Set( + libraryGroups.value + .filter((group) => group.id !== FAVORITES_GROUP_ID) + .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 groupInstancesModalGroup = computed( + () => + libraryGroups.value.find((group) => group.id === groupInstancesModalGroupId.value) ?? null, + ) + const groupInstances = computed(() => { + const query = groupInstancesSearch.value.trim().toLowerCase() + + return instances.value + .filter((instance) => !query || instance.name.toLowerCase().includes(query)) + .slice() + .sort((a, b) => a.name.localeCompare(b.name)) + }) + const canCreateGroup = computed( + () => normalizedNewGroupName.value.length > 0 && !creatingGroup.value, + ) + const customLibraryGroups = computed(() => + libraryGroups.value.filter((group) => group.id !== FAVORITES_GROUP_ID), + ) + const customGroupOrder = computed( + () => new Map(customLibraryGroups.value.map((group, index) => [group.id, index])), + ) + + const refreshGroups = async () => { + try { + libraryGroups.value = await listInstanceGroups() + } catch (error) { + handleError(toError(error)) + } finally { + libraryGroupsLoaded.value = true + } + } + + 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 getEffectiveInstanceGroupIds = (instance: GameInstance) => + pendingInstanceGroupIds.value.get(instance.id) ?? instance.group_ids + const haveSameGroupIds = (first: string[], second: string[]) => + first.length === second.length && first.every((groupId) => second.includes(groupId)) + + watch( + instances, + (currentInstances) => { + if (pendingInstanceGroupIds.value.size === 0) return + + const nextPendingInstanceGroupIds = new Map(pendingInstanceGroupIds.value) + for (const instance of currentInstances) { + const pendingGroupIds = nextPendingInstanceGroupIds.get(instance.id) + if (pendingGroupIds && haveSameGroupIds(pendingGroupIds, instance.group_ids)) { + nextPendingInstanceGroupIds.delete(instance.id) + } + } + + if (nextPendingInstanceGroupIds.size !== pendingInstanceGroupIds.value.size) { + pendingInstanceGroupIds.value = nextPendingInstanceGroupIds + } + }, + { flush: 'sync' }, + ) + + 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 '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) { + const instanceGroupIds = getEffectiveInstanceGroupIds(instance) + switch (displayState.value.group) { + case 'Instance type': + { + const instanceType = getInstanceType(instance) + addToGroup( + `Instance type:${instanceType}`, + libraryInstanceTypeLabels[instanceType], + instance, + ) + } + break + 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 (instanceGroupIds.length === 0) { + addToGroup('group:none', 'None', instance) + } else { + for (const groupId of instanceGroupIds) { + 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 === 'Loader') { + groups.sort((a, b) => { + const aPriority = libraryLoaderPriority[a.key.toLowerCase()] ?? Number.MAX_SAFE_INTEGER + const bPriority = libraryLoaderPriority[b.key.toLowerCase()] ?? Number.MAX_SAFE_INTEGER + return aPriority - bPriority || a.key.localeCompare(b.key) || a.id.localeCompare(b.id) + }) + } + + if (displayState.value.group === 'Instance type') { + groups.sort((a, b) => a.key.localeCompare(b.key) || a.id.localeCompare(b.id)) + } + + if (displayState.value.group === 'Game version') { + groups.sort((a, b) => b.key.localeCompare(a.key, undefined, { numeric: true })) + } + + if (displayState.value.group === 'Group') { + groups.sort((a, b) => { + if (a.id === b.id) return 0 + if (a.id === FAVORITES_GROUP_ID) return -1 + if (b.id === FAVORITES_GROUP_ID) return 1 + if (a.id === 'group:none') return 1 + if (b.id === 'group:none') return -1 + + const aOrder = customGroupOrder.value.get(a.id) ?? Number.MAX_SAFE_INTEGER + const bOrder = customGroupOrder.value.get(b.id) ?? Number.MAX_SAFE_INTEGER + return aOrder - bOrder || 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) => { + const instanceGroupIds = getEffectiveInstanceGroupIds(instance) + if (operation === 'add') { + return toGroup !== null && !instanceGroupIds.includes(toGroup) + } + + if (toGroup !== null) { + return !instanceGroupIds.includes(toGroup) + } + + const sourceGroupIds = new Set( + (draggedSelectionsByInstanceId.get(instance.id) ?? []) + .map((selection) => normalizeInstanceGroupId(selection.groupId)) + .filter((sourceGroupId): sourceGroupId is string => sourceGroupId !== null), + ) + return instanceGroupIds.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) + const isSourceGroup = + normalizeInstanceGroupId(target) === activeInstanceGroupDrag.value?.fromGroup + if (!isSourceGroup && !dropState.canDrop && dropState.alreadyInGroup) { + return 'Already in this group' + } + 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) => { + const instanceGroupIds = getEffectiveInstanceGroupIds(instance) + if (toGroup && instanceGroupIds.includes(toGroup)) { + return [] + } + + const selections = draggedSelectionsByInstanceId.get(instance.id) ?? [] + let nextGroupIds = [...instanceGroupIds] + 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, + nextGroupIds, + }, + ] + }) + const nextPendingInstanceGroupIds = new Map(pendingInstanceGroupIds.value) + for (const operation of operations) { + nextPendingInstanceGroupIds.set(operation.instanceId, operation.nextGroupIds) + } + pendingInstanceGroupIds.value = nextPendingInstanceGroupIds + + try { + await setInstanceGroupMemberships( + operations.map((operation) => ({ + instance_id: operation.instanceId, + group_ids: operation.nextGroupIds, + })), + ) + } catch (error) { + const pendingInstanceGroupIdsAfterFailure = new Map(pendingInstanceGroupIds.value) + for (const operation of operations) { + const pendingGroupIds = pendingInstanceGroupIdsAfterFailure.get(operation.instanceId) + if (pendingGroupIds && haveSameGroupIds(pendingGroupIds, operation.nextGroupIds)) { + pendingInstanceGroupIdsAfterFailure.delete(operation.instanceId) + } + } + pendingInstanceGroupIds.value = pendingInstanceGroupIdsAfterFailure + handleError(toError(error)) + return false + } + + selectedLibraryInstances.value = new Map() + + return operations.length > 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 openGroupInstancesModal = (groupId: string) => { + const group = libraryGroups.value.find((candidate) => candidate.id === groupId) + if (!group) return + + groupInstancesModalGroupId.value = groupId + groupInstancesSearch.value = '' + selectedGroupInstanceIds.value = new Set( + instances.value + .filter((instance) => instance.group_ids.includes(groupId)) + .map((instance) => instance.id), + ) + isGroupInstancesModalOpen.value = true + } + + const closeGroupInstancesModal = () => { + isGroupInstancesModalOpen.value = false + groupInstancesModalGroupId.value = null + } + + const toggleGroupInstance = (instanceId: string) => { + const selectedIds = new Set(selectedGroupInstanceIds.value) + + if (selectedIds.has(instanceId)) { + selectedIds.delete(instanceId) + } else { + selectedIds.add(instanceId) + } + + selectedGroupInstanceIds.value = selectedIds + } + + const saveGroupInstances = async () => { + const groupId = groupInstancesModalGroupId.value + if (!groupId || savingGroupInstances.value) return false + + const changedInstances = instances.value.filter( + (instance) => + instance.group_ids.includes(groupId) !== selectedGroupInstanceIds.value.has(instance.id), + ) + const operations = changedInstances.map((instance) => { + const shouldIncludeGroup = selectedGroupInstanceIds.value.has(instance.id) + const nextGroupIds = shouldIncludeGroup + ? [...instance.group_ids, groupId] + : instance.group_ids.filter((instanceGroupId) => instanceGroupId !== groupId) + + return { + instance, + shouldIncludeGroup, + nextGroupIds, + } + }) + savingGroupInstances.value = true + + try { + await setInstanceGroupMemberships( + operations.map(({ instance, nextGroupIds }) => ({ + instance_id: instance.id, + group_ids: nextGroupIds, + })), + ) + + const nextSelectedInstances = new Map(selectedLibraryInstances.value) + for (const { instance, shouldIncludeGroup, nextGroupIds } of operations) { + const instanceSelections = [...nextSelectedInstances.values()].filter( + (selection) => selection.instanceId === instance.id, + ) + if (shouldIncludeGroup && instanceSelections.length > 0) { + for (const selection of instanceSelections) { + nextSelectedInstances.delete(getLibraryInstanceSelectionKey(selection)) + } + const destinationSelection = { + instanceId: instance.id, + groupId, + } + nextSelectedInstances.set( + getLibraryInstanceSelectionKey(destinationSelection), + destinationSelection, + ) + continue + } + + const validSelectionGroupIds = new Set( + nextGroupIds.length > 0 ? nextGroupIds : ['group:none'], + ) + const invalidSelections = instanceSelections.filter( + (selection) => !validSelectionGroupIds.has(selection.groupId), + ) + for (const selection of invalidSelections) { + nextSelectedInstances.delete(getLibraryInstanceSelectionKey(selection)) + } + + const hasValidSelection = [...nextSelectedInstances.values()].some( + (selection) => selection.instanceId === instance.id, + ) + if (invalidSelections.length > 0 && !hasValidSelection) { + const replacementSelection = { + instanceId: instance.id, + groupId: nextGroupIds[0] ?? 'group:none', + } + nextSelectedInstances.set( + getLibraryInstanceSelectionKey(replacementSelection), + replacementSelection, + ) + } + } + selectedLibraryInstances.value = nextSelectedInstances + return true + } catch (error) { + handleError(toError(error)) + return false + } finally { + savingGroupInstances.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 = [ + group, + ...libraryGroups.value.filter((existingGroup) => existingGroup.id !== group.id), + ] + + await setInstanceGroupMemberships( + instances.value + .filter((instance) => selectedNewGroupInstanceIds.value.has(instance.id)) + .map((instance) => ({ + instance_id: 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()) + const selectedInstanceIds = new Set(instanceIds) + const instancesToAdd = instances.value.filter((instance) => + selectedInstanceIds.has(instance.id), + ) + await setInstanceGroupMemberships( + instancesToAdd.map((instance) => ({ + instance_id: instance.id, + group_ids: [...instance.group_ids, group.id], + })), + ) + + libraryGroups.value = [ + group, + ...libraryGroups.value.filter((existingGroup) => existingGroup.id !== 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.map((group) => + group.id === groupId ? renamedGroup : group, + ) + return true + } catch (error) { + handleError(toError(error)) + await refreshGroups() + return false + } + } + + const canMoveGroupUp = (groupId: string) => + !reorderingGroups.value && + customLibraryGroups.value.findIndex((group) => group.id === groupId) > 0 + + const canMoveGroupDown = (groupId: string) => { + const groupIndex = customLibraryGroups.value.findIndex((group) => group.id === groupId) + return ( + !reorderingGroups.value && + groupIndex >= 0 && + groupIndex < customLibraryGroups.value.length - 1 + ) + } + + const reorderGroups = async (orderedGroupIds: string[]) => { + if (reorderingGroups.value) return false + + const previousGroups = libraryGroups.value + const customGroupsById = new Map(customLibraryGroups.value.map((group) => [group.id, group])) + const orderedGroupIdSet = new Set(orderedGroupIds) + + if ( + orderedGroupIdSet.size !== orderedGroupIds.length || + orderedGroupIds.some((groupId) => !customGroupsById.has(groupId)) + ) { + return false + } + + const orderedGroups = orderedGroupIds.map((groupId) => customGroupsById.get(groupId)!) + let orderedGroupIndex = 0 + const reorderedCustomGroups = customLibraryGroups.value.map((group) => + orderedGroupIdSet.has(group.id) ? orderedGroups[orderedGroupIndex++] : group, + ) + + if (reorderedCustomGroups.every((group, index) => group === customLibraryGroups.value[index])) { + return false + } + + const favoriteGroups = previousGroups.filter((group) => group.id === FAVORITES_GROUP_ID) + libraryGroups.value = [...favoriteGroups, ...reorderedCustomGroups] + reorderingGroups.value = true + + try { + await setInstanceGroupOrder(reorderedCustomGroups.map((group) => group.id)) + return true + } catch (error) { + libraryGroups.value = previousGroups + handleError(toError(error)) + await refreshGroups() + return false + } finally { + reorderingGroups.value = false + } + } + + const moveGroup = async (groupId: string, direction: -1 | 1) => { + const orderedGroupIds = customLibraryGroups.value.map((group) => group.id) + const groupIndex = orderedGroupIds.indexOf(groupId) + const targetIndex = groupIndex + direction + + if (groupIndex < 0 || targetIndex < 0 || targetIndex >= orderedGroupIds.length) { + return false + } + + const targetGroupId = orderedGroupIds[targetIndex] + orderedGroupIds[targetIndex] = orderedGroupIds[groupIndex] + orderedGroupIds[groupIndex] = targetGroupId + + return await reorderGroups(orderedGroupIds) + } + + 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 !== FAVORITES_GROUP_ID + ? instanceGroupId + : null + + const baseOptions = [ + { + name: item.instance.group_ids.includes(FAVORITES_GROUP_ID) + ? 'remove_from_favorites' + : 'add_to_favorites', + }, + { type: 'divider' }, + ...(!item.instance.quarantined && !item.instance.link + ? [{ 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 'add_to_favorites': + await edit(item.instance.id, { + group_ids: [...new Set([...item.instance.group_ids, FAVORITES_GROUP_ID])], + }).catch((error) => handleError(toError(error))) + break + case 'remove_from_favorites': + await edit(item.instance.id, { + group_ids: item.instance.group_ids.filter( + (instanceGroupId) => instanceGroupId !== FAVORITES_GROUP_ID, + ), + }).catch((error) => handleError(toError(error))) + 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, + libraryGroupsLoaded, + search, + filters, + displayState, + instanceGroups, + isNewGroupModalOpen, + newGroupName, + newGroupSearch, + selectedNewGroupInstanceIds, + isGroupInstancesModalOpen, + groupInstancesModalGroup, + groupInstancesSearch, + selectedGroupInstanceIds, + savingGroupInstances, + selectedLibraryInstances, + isLibraryInstanceSelectionActive, + activeInstanceGroupDrag, + activeDraggedInstanceKeys, + instanceGroupDragTarget, + instanceGroupDragPointer, + instanceGroupDragStatus, + isAddingInstanceToGroup, + creatingGroup, + reorderingGroups, + groupIdPendingNameEdit, + newGroupInstances, + groupInstances, + canCreateGroup, + instanceOptions, + confirmDeleteModal, + currentDeleteInstanceNames, + isSectionCollapsed, + setSectionCollapsed, + startInstanceGroupDrag, + updateInstanceGroupDrag, + finishInstanceGroupDrag, + setInstanceGroupDragTarget, + getInstanceGroupDropState, + moveDraggedInstancesToGroup, + openNewGroupModal, + closeNewGroupModal, + openGroupInstancesModal, + closeGroupInstancesModal, + toggleNewGroupInstance, + toggleGroupInstance, + saveGroupInstances, + clearLibraryInstanceSelection, + setSelectedLibraryInstances, + toggleLibraryInstanceSelection, + createGroup, + createDefaultGroup, + completePendingGroupNameEdit, + deleteGroup, + renameGroup, + canMoveGroupUp, + canMoveGroupDown, + reorderGroups, + moveGroup, + 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..228c3f4675 100644 --- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue +++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue @@ -1,8 +1,16 @@