feat: app onboarding and library (#6923)

* refactor: remove unused legacy onboarded flag

* sqlx prepare

* feat: add onboarding checklist app db and add vue provider

* feat: add welcome page

* feat: add onboarding checklist component

* feat: move checklist visibility source of truth in app db

* feat: split up import modpack button

* feat-small: style tweak

* feat: remove discover section from homepage and add library

* refactor: move welcome screen to component

* refactor: move grid display into /library

* refactor: rename existing components

* refactor: split up the current library page files

* feat: add create group modal

* feat: add instance group definitions

* feat: update accordian for instance groups

* feat: add delete group

* feat: implement rename instance groups

* refactor: move instance group api out

* feat: add context menu for groups

* feat: style instance items in library

* feat: add selected instance item state

* feat: implement action bar for selection

* feat: drag and drop to move between groups

* feat: show ungrouped with header

* feat: improve edit group name

* small fix

* small style fixes

* feat: improve selection behaviour

* fix: dont toggle group when context menu open

* feat: drag and drop multiple selected

* small

* feat: add remove from group in action bar

* feat: add delay on icon hiding in inline input

* feat: improve icon hiding delay

* fix: bad routes.js

* feat: implement sort and filter options

* refactor: dont prefix filenames

* feat: change open/collapse group target

* feat: improve ungrouped behaviour

* feat: add shift to select multiple instances

* fix: icon disappear transition

* feat: add esc while dragging to cancel

* feat: update sorting and moved label

* feat: update context menu

* fix: multiple context menus can be opened

* refactor: instance groups to be identified by ID instead of name, names become display data

* feat: creating new group always adds instance

* feat: create group button, fix instance selection, and increase group name max length

* feat: strokes

* fix: show getting started checklist in all sidebar

* feat: set size on microsoft login screen

* fix: use ButtonStyled in Chips component

* feat: creating groups with selected instances and fix some moving selection and duplication bugs

* pnpm prepr

* feat: add tooltip for instance already in group

* feat: create instance with content in creation flow modal

- search modpack becomes search projects
- creation flow modal context receives prepareProjectInstall and createProjectInstall callbacks, from content-install.ts (shared with ContentInstallModal)

* feat: update instance card styles

* refactor: separate out instance card content

* update styles

* refactor: instance card

* fix: width of instance

* feat: update empty state

* feat: update sort and grouping dropdowns

* feat: better context menu options

* feat: add group action buttons

* feat: add/remove favourites group

* remove manual sort

* feat: improve the "New group" jank

* feat: add group by instance type and change group sorting

* feat: welcome screen styles match figma

* feat: not signed in skins demo

* feat: new hosting empty state

* feat: new instance card style

* feat: add tooltip and spice up animation more

* feat: improve the transitions for groups after dropping many instances

* feat: set instance group membership for bulk moving

* feat: remove fade out

* fix: allow dragging from buttons inside instance card

* fix: library page load in behaviour

* small fix

* feat: add group ordering and reordering

* feat: add drag to reorder groups

* fix: switching page not clearing selected instances

* style fixes

* style fix

* fix spacing

* feat: jump in changes

* feat: add styled newly created instances

* feat: improve jump in cards styles

* fix: welcome screen style

* fix: empty state styles

* feat: max 5 jump in items

* feat: max new instances to 3

* fix: search icon

* feat: clear selection after move

* feat: skins list use check icon styles

* feat: list will be deleted instances and default sort last played

* fix: stroke

* remove: no more group settings in instance general settings

* fix: resolving modpack server install

* feat: icon editor

* feat: add three hue shifted variants

* fix: surprise me doesnt pick symbol

* feat: add customize icon to create instance modal

* feat: skins loading state style

* fix: welcome logo

* fix: copy

* fix: left over usage of ButtonStyled from main's refactor

* feat: some leaked merge stuff

* feat: server empty state styles

* remove: instance helper text

* remove: auto link in set up stage

* feat: auto focus on search when modal open

* fix: delete instance modal style

* remove: modpack meta repeating

* fix: icon

* fix: font weight

* fix: dropdown filter preview heights

* pnpm prepr

* fix: sign into modrinth flashing change in position

* feat: add avatar transparent corner gets padding

* feat: drag and hold over group opens group

* feat: add random icon for custom instance

* feat: update loading icon

* polish: empty state for search

* polish: jump in cards

* fix: avatar could skip checking for image if tauri loads it first

* feat: add icon customize and randomizer in content install modal for add to new instances

* fix: avatar cannot read image pixels due to cors

* refactor: popup notifications toast type for instance sharing notifications

* feat: apply random icons modal and add popup notification for it

* polish: style

* fix: set_webview_visible

* QA

* qa

* feat: add inner white 15 opacity stroke around avatar

* add to catalog

* pnpm prepr

* fix: app event import

* feat: add new icons and backgrounds for icon editor

* feat: recents list generate from randomized icons and save icon in editor + icon editor modal fixes

* qa

* refactor: recipe -> config

* fix: event bus

* polish

* feat: add safe guard against randomizing empty icons

* feat: navigate to instance after creation

* fix: icon file names

* i18n on welcome screen

* i18n pass on PR

* fix: inconsistent max group name length

* refactor: use sqlx macro

* feat: add instance icon background selection drag

* feat: update catalog order

* fix: remove gradient for welcome screen

* remove: frog

* fix: min width

* feat: update corner size

* fix: context menu styles

* prepr

* fix: instance name trimming

* reorder

* fix: instance card loading state stayed until hovering

* feat: add icon randomizer blacklist

* blog

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/components/ui/library/LibrarySelectionActionBar.vue

@@ -0,0 +1,206 @@
+<template>
+	<FloatingActionBar
+		:shown="selectedInstanceCount > 0"
+		:aria-label="formatMessage(messages.ariaLabel)"
+		hide-when-modal-open
+	>
+		<div class="flex items-center gap-0.5">
+			<span class="px-4 py-2.5 text-base font-semibold text-contrast tabular-nums">
+				{{ formatMessage(messages.selectedCount, { count: selectedLibraryInstances.size }) }}
+			</span>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<Button
+				type="quiet"
+				class="!text-primary"
+				:disabled="busy"
+				@click="clearLibraryInstanceSelection"
+			>
+				<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+			</Button>
+		</div>
+		<div class="ml-auto flex items-center gap-0.5">
+			<Button
+				v-if="displayState.group === 'Group'"
+				type="quiet"
+				:disabled="busy"
+				@click="createGroupFromSelection"
+			>
+				<SquarePlusIcon />
+				<span class="bar-label">{{ formatMessage(messages.newGroup) }}</span>
+			</Button>
+			<Button
+				v-if="selectedGroupedInstances.length > 0"
+				type="quiet"
+				:disabled="busy"
+				@click="removeSelectedInstancesFromGroups"
+			>
+				<MinusIcon />
+				<span class="bar-label">{{ formatMessage(messages.removeFromGroup) }}</span>
+			</Button>
+			<div class="mx-1 h-6 w-px bg-surface-5" />
+			<Button
+				v-tooltip="deleting ? formatMessage(messages.deleting) : undefined"
+				type="quiet"
+				color="red"
+				interaction="filled"
+				:disabled="busy"
+				@click="confirmDeleteModal?.show()"
+			>
+				<TrashIcon />
+				<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+			</Button>
+		</div>
+	</FloatingActionBar>
+	<ConfirmDeleteInstanceModal
+		ref="confirmDeleteModal"
+		:instances="selectedInstances"
+		@delete="deleteSelectedInstances"
+	/>
+</template>
+
+<script setup lang="ts">
+import { MinusIcon, SquarePlusIcon, TrashIcon } from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	FloatingActionBar,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { getLibraryInstanceSelectionKey, useLibrary } from '@/components/ui/library/use-library'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import { toError } from '@/helpers/errors'
+import { remove } from '@/helpers/instance'
+import { set_group_memberships as setInstanceGroupMemberships } from '@/helpers/instance-groups'
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+const {
+	instances,
+	selectedLibraryInstances,
+	clearLibraryInstanceSelection,
+	setSelectedLibraryInstances,
+	creatingGroup,
+	createDefaultGroup,
+	displayState,
+} = useLibrary()
+
+const confirmDeleteModal = ref<InstanceType<typeof ConfirmDeleteInstanceModal>>()
+const deleting = ref(false)
+const removingFromGroup = ref(false)
+const selectedInstanceCount = computed(() => selectedLibraryInstances.value.size)
+const selectedInstanceIds = computed(
+	() =>
+		new Set([...selectedLibraryInstances.value.values()].map((selection) => selection.instanceId)),
+)
+const selectedInstances = computed(() =>
+	instances.value.filter((instance) => selectedInstanceIds.value.has(instance.id)),
+)
+const selectedGroupedInstances = computed(() =>
+	[...selectedLibraryInstances.value.values()].flatMap((selection) => {
+		const instance = instances.value.find((candidate) => candidate.id === selection.instanceId)
+		return instance?.group_ids.includes(selection.groupId) ? [{ instance, selection }] : []
+	}),
+)
+const busy = computed(() => deleting.value || removingFromGroup.value || creatingGroup.value)
+
+const messages = defineMessages({
+	ariaLabel: {
+		id: 'app.library.selection.aria-label',
+		defaultMessage: 'Selected instances',
+	},
+	selectedCount: {
+		id: 'app.library.selection.selected-count',
+		defaultMessage: '{count} selected',
+	},
+	deleting: {
+		id: 'app.library.selection.deleting',
+		defaultMessage: 'Deleting selected instances',
+	},
+	newGroup: {
+		id: 'app.library.selection.new-group',
+		defaultMessage: 'New group',
+	},
+	removeFromGroup: {
+		id: 'app.library.selection.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+})
+
+async function createGroupFromSelection() {
+	if (busy.value) return
+
+	const instanceIds = selectedInstanceIds.value
+	clearLibraryInstanceSelection()
+	await createDefaultGroup(instanceIds)
+}
+
+async function removeSelectedInstancesFromGroups() {
+	if (busy.value || selectedGroupedInstances.value.length === 0) return
+
+	removingFromGroup.value = true
+	const selectedGroupIdsByInstanceId = new Map<string, Set<string>>()
+	for (const { instance, selection } of selectedGroupedInstances.value) {
+		const groupIds = selectedGroupIdsByInstanceId.get(instance.id) ?? new Set()
+		groupIds.add(selection.groupId)
+		selectedGroupIdsByInstanceId.set(instance.id, groupIds)
+	}
+	const operations = [...selectedGroupIdsByInstanceId].flatMap(([instanceId, groupIds]) => {
+		const instance = instances.value.find((candidate) => candidate.id === instanceId)
+		return instance ? [{ instance, groupIds }] : []
+	})
+	try {
+		await setInstanceGroupMemberships(
+			operations.map(({ instance, groupIds }) => ({
+				instance_id: instance.id,
+				group_ids: instance.group_ids.filter((groupId) => !groupIds.has(groupId)),
+			})),
+		)
+
+		const nextSelectedInstances = new Map(selectedLibraryInstances.value)
+		for (const { instance, groupIds } of operations) {
+			for (const groupId of groupIds) {
+				nextSelectedInstances.delete(
+					getLibraryInstanceSelectionKey({
+						instanceId: instance.id,
+						groupId,
+					}),
+				)
+			}
+		}
+
+		setSelectedLibraryInstances(nextSelectedInstances.values())
+	} catch (error) {
+		handleError(toError(error))
+	} finally {
+		removingFromGroup.value = false
+	}
+}
+
+async function deleteSelectedInstances() {
+	if (busy.value || selectedInstanceCount.value === 0) return
+
+	deleting.value = true
+	const instanceIds = [...selectedInstanceIds.value]
+	const results = await Promise.allSettled(instanceIds.map((instanceId) => remove(instanceId)))
+	const deletedInstanceIds = new Set<string>()
+
+	for (const [index, result] of results.entries()) {
+		if (result.status === 'rejected') {
+			handleError(toError(result.reason))
+		} else {
+			deletedInstanceIds.add(instanceIds[index])
+		}
+	}
+
+	setSelectedLibraryInstances(
+		[...selectedLibraryInstances.value.values()].filter(
+			(selection) => !deletedInstanceIds.has(selection.instanceId),
+		),
+	)
+	deleting.value = false
+}
+</script>

apps/app-frontend/src/components/ui/library/group-instances-modal.vue

@@ -0,0 +1,150 @@
+<template>
+	<NewModal
+		ref="modal"
+		no-padding
+		scrollable
+		actions-divider
+		max-width="560px"
+		width="560px"
+		:on-hide="closeGroupInstancesModal"
+	>
+		<template #title>
+			<span class="text-2xl font-semibold text-contrast">
+				{{
+					formatMessage(messages.title, {
+						groupName: groupInstancesModalGroup?.name ?? '',
+					})
+				}}
+			</span>
+		</template>
+
+		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
+			<div class="px-6">
+				<StyledInput
+					v-model="groupInstancesSearch"
+					:icon="SearchIcon"
+					:placeholder="formatMessage(messages.searchPlaceholder)"
+					class="w-full"
+				/>
+			</div>
+
+			<div
+				v-if="groupInstances.length === 0"
+				class="flex items-center justify-center py-12 text-secondary"
+			>
+				{{ formatMessage(messages.noInstancesFound) }}
+			</div>
+			<div v-else class="flex flex-col gap-1">
+				<div
+					v-for="instance in groupInstances"
+					:key="instance.id"
+					class="flex items-center justify-between gap-4 px-6 py-1.5 hover:bg-surface-3"
+					:class="{ 'opacity-60': selectedGroupInstanceIds.has(instance.id) }"
+				>
+					<div class="flex min-w-0 items-center gap-2.5">
+						<Avatar
+							:src="getInstanceIconUrl(instance.icon_path)"
+							:tint-by="instance.id"
+							:alt="instance.name"
+							size="2rem"
+							rounded="md"
+						/>
+						<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
+					</div>
+					<Button
+						:type="selectedGroupInstanceIds.has(instance.id) ? 'outlined' : 'base'"
+						@click="toggleGroupInstance(instance.id)"
+					>
+						<CheckIcon v-if="selectedGroupInstanceIds.has(instance.id)" />
+						{{
+							formatMessage(
+								selectedGroupInstanceIds.has(instance.id) ? messages.added : messages.add,
+							)
+						}}
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex items-center justify-end gap-2">
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="savingGroupInstances" @click="save">
+					<SpinnerIcon v-if="savingGroupInstances" class="animate-spin" />
+					<CheckIcon v-else />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
+import { useLibrary } from '@/components/ui/library/use-library'
+import { getInstanceIconUrl } from '@/helpers/instance'
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	title: {
+		id: 'app.library.group.instances-modal.title',
+		defaultMessage: 'Add instances to "{groupName}"',
+	},
+	searchPlaceholder: {
+		id: 'app.library.group.instances-modal.search-placeholder',
+		defaultMessage: 'Search instance',
+	},
+	noInstancesFound: {
+		id: 'app.library.group.instances-modal.no-instances-found',
+		defaultMessage: 'No instances found',
+	},
+	add: {
+		id: 'app.library.group.instances-modal.add',
+		defaultMessage: 'Add',
+	},
+	added: {
+		id: 'app.library.group.instances-modal.added',
+		defaultMessage: 'Added',
+	},
+})
+
+const {
+	isGroupInstancesModalOpen,
+	groupInstancesModalGroup,
+	groupInstancesSearch,
+	groupInstances,
+	selectedGroupInstanceIds,
+	savingGroupInstances,
+	closeGroupInstancesModal,
+	toggleGroupInstance,
+	saveGroupInstances,
+} = useLibrary()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+watch(isGroupInstancesModalOpen, (open) => {
+	if (open) {
+		modal.value?.show()
+	}
+})
+
+async function save() {
+	if (await saveGroupInstances()) {
+		modal.value?.hide()
+	}
+}
+</script>

apps/app-frontend/src/components/ui/library/index.vue

@@ -0,0 +1,450 @@
+<script setup lang="ts">
+import {
+	ClipboardCopyIcon,
+	EyeIcon,
+	FolderOpenIcon,
+	MinusIcon,
+	PlayIcon,
+	PlusIcon,
+	StarIcon,
+	StopCircleIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, nextTick, onDeactivated, onUnmounted, ref, toRef, watch } from 'vue'
+import Draggable from 'vuedraggable'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import GroupInstancesModal from '@/components/ui/library/group-instances-modal.vue'
+import InstanceGroup from '@/components/ui/library/instance-group/index.vue'
+import InstanceGroupDnd from '@/components/ui/library/instance-group/instance-group-dnd.vue'
+import LibraryToolbar from '@/components/ui/library/library-toolbar/index.vue'
+import LibrarySelectionActionBar from '@/components/ui/library/LibrarySelectionActionBar.vue'
+import {
+	getLibraryInstanceSelectionKey,
+	type InstanceGroup as InstanceGroupType,
+	provideLibrary,
+} from '@/components/ui/library/use-library'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import { FAVORITES_GROUP_ID } from '@/helpers/instance-groups'
+import type { GameInstance } from '@/helpers/types'
+
+const props = defineProps<{
+	instances: GameInstance[]
+}>()
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	library: { id: 'app.library.title', defaultMessage: 'Library' },
+	noSearchResults: {
+		id: 'app.library.search.no-results.title',
+		defaultMessage: 'No instances match your search.',
+	},
+	play: { id: 'app.library.instance.action.play', defaultMessage: 'Play' },
+	stop: { id: 'app.library.instance.action.stop', defaultMessage: 'Stop' },
+	addToFavorites: {
+		id: 'app.library.instance.action.add-to-favorites',
+		defaultMessage: 'Add to favorites',
+	},
+	removeFromFavorites: {
+		id: 'app.library.instance.action.remove-from-favorites',
+		defaultMessage: 'Remove from favorites',
+	},
+	addContent: { id: 'app.library.instance.action.add-content', defaultMessage: 'Add content' },
+	viewInstance: {
+		id: 'app.library.instance.action.view-instance',
+		defaultMessage: 'View instance',
+	},
+	duplicateInstance: {
+		id: 'app.library.instance.action.duplicate',
+		defaultMessage: 'Duplicate instance',
+	},
+	delete: { id: 'app.library.instance.action.delete', defaultMessage: 'Delete' },
+	openFolder: { id: 'app.library.instance.action.open-folder', defaultMessage: 'Open folder' },
+	copyPath: { id: 'app.library.instance.action.copy-path', defaultMessage: 'Copy path' },
+	removeFromGroup: {
+		id: 'app.library.instance.action.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+})
+
+const {
+	instanceGroups,
+	libraryGroupsLoaded,
+	isSearching,
+	displayState,
+	filters,
+	reorderingGroups,
+	reorderGroups,
+	instanceOptions,
+	confirmDeleteModal,
+	currentDeleteInstances,
+	clearLibraryInstanceSelection,
+	deleteInstance,
+	handleInstanceOption,
+	selectedLibraryInstances,
+	setSelectedLibraryInstances,
+	toggleLibraryInstanceSelection,
+} = provideLibrary(toRef(props, 'instances'))
+
+const hasActiveFilters = computed(() =>
+	Object.values(filters.value).some((selectedValues) => selectedValues.length > 0),
+)
+
+const visibleInstanceGroups = computed(() =>
+	instanceGroups.value.filter((instanceGroup) =>
+		instanceGroup.id === FAVORITES_GROUP_ID
+			? instanceGroup.instances.length > 0
+			: instanceGroup.instances.length > 0 ||
+				(!isSearching.value && !hasActiveFilters.value && instanceGroup.key !== 'None'),
+	),
+)
+
+const visibleCustomGroups = computed(() =>
+	displayState.value.group === 'Group'
+		? visibleInstanceGroups.value.filter(
+				(group) => group.id !== FAVORITES_GROUP_ID && group.id !== 'group:none',
+			)
+		: [],
+)
+const visibleFavoritesGroup = computed(() =>
+	visibleInstanceGroups.value.find((group) => group.id === FAVORITES_GROUP_ID),
+)
+const visibleUngroupedGroup = computed(() =>
+	visibleInstanceGroups.value.find((group) => group.id === 'group:none'),
+)
+const draggableCustomGroups = ref<InstanceGroupType[]>([])
+const libraryGroupsContainer = ref<HTMLElement>()
+const isDraggingGroup = ref(false)
+const GROUP_REORDERING_CLASS = 'instance-group-reordering'
+const canDragReorderGroups = computed(
+	() => !reorderingGroups.value && draggableCustomGroups.value.length > 1,
+)
+
+watch(
+	visibleCustomGroups,
+	(groups) => {
+		if (!isDraggingGroup.value) {
+			const previousGroupTops = getCustomGroupTops()
+			draggableCustomGroups.value = [...groups]
+			void nextTick(() => animateCustomGroupReorder(previousGroupTops))
+		}
+	},
+	{ immediate: true },
+)
+
+function getCustomGroupTops() {
+	const groupTops = new Map<string, number>()
+	const groupElements = libraryGroupsContainer.value?.querySelectorAll<HTMLElement>(
+		'[data-instance-group-reorder-id]',
+	)
+
+	for (const groupElement of groupElements ?? []) {
+		const groupId = groupElement.dataset.instanceGroupReorderId
+		if (groupId) {
+			groupTops.set(groupId, groupElement.getBoundingClientRect().top)
+		}
+	}
+
+	return groupTops
+}
+
+function animateCustomGroupReorder(previousGroupTops: Map<string, number>) {
+	if (
+		previousGroupTops.size === 0 ||
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches
+	) {
+		return
+	}
+
+	const groupElements = libraryGroupsContainer.value?.querySelectorAll<HTMLElement>(
+		'[data-instance-group-reorder-id]',
+	)
+
+	for (const groupElement of groupElements ?? []) {
+		const groupId = groupElement.dataset.instanceGroupReorderId
+		const previousTop = groupId ? previousGroupTops.get(groupId) : undefined
+		if (previousTop === undefined) continue
+
+		const offset = previousTop - groupElement.getBoundingClientRect().top
+		if (Math.abs(offset) < 1) continue
+
+		groupElement.animate(
+			[{ transform: `translateY(${offset}px)` }, { transform: 'translateY(0)' }],
+			{ duration: 200, easing: 'ease-out' },
+		)
+	}
+}
+
+function onGroupDragStart() {
+	isDraggingGroup.value = true
+	document.documentElement.classList.add(GROUP_REORDERING_CLASS)
+}
+
+function onGroupDragEnd() {
+	isDraggingGroup.value = false
+	document.documentElement.classList.remove(GROUP_REORDERING_CLASS)
+
+	const currentGroupIds = visibleCustomGroups.value.map((group) => group.id)
+	const orderedGroupIds = draggableCustomGroups.value.map((group) => group.id)
+	if (orderedGroupIds.every((groupId, index) => groupId === currentGroupIds[index])) {
+		draggableCustomGroups.value = [...visibleCustomGroups.value]
+		return
+	}
+
+	void reorderGroups(orderedGroupIds)
+}
+
+onUnmounted(() => {
+	document.documentElement.classList.remove(GROUP_REORDERING_CLASS)
+})
+
+onDeactivated(clearLibraryInstanceSelection)
+
+const anchorInstance = ref<{ groupId: string; instanceId: string } | null>(null)
+
+function handleToggleInstance(groupId: string, instanceId: string, shiftKey: boolean) {
+	const displayedInstances = visibleInstanceGroups.value.flatMap((group) =>
+		group.instances.map((instance) => ({
+			groupId: group.id,
+			instanceId: instance.id,
+		})),
+	)
+	const anchor = anchorInstance.value
+
+	if (shiftKey && anchor && displayedInstances.length) {
+		const anchorIndex = displayedInstances.findIndex(
+			(instance) =>
+				instance.groupId === anchor.groupId && instance.instanceId === anchor.instanceId,
+		)
+		const targetIndex = displayedInstances.findIndex(
+			(instance) => instance.groupId === groupId && instance.instanceId === instanceId,
+		)
+
+		if (anchorIndex === -1 || targetIndex === -1) {
+			toggleLibraryInstanceSelection({ groupId, instanceId })
+			return
+		}
+
+		const start = Math.min(anchorIndex, targetIndex)
+		const end = Math.max(anchorIndex, targetIndex)
+		const range = displayedInstances.slice(start, end + 1)
+		const nextSelectedInstances = new Map(selectedLibraryInstances.value)
+		const targetKey = getLibraryInstanceSelectionKey({ groupId, instanceId })
+
+		if (nextSelectedInstances.has(targetKey)) {
+			for (const instance of range) {
+				nextSelectedInstances.delete(getLibraryInstanceSelectionKey(instance))
+			}
+		} else {
+			for (const instance of range) {
+				nextSelectedInstances.set(getLibraryInstanceSelectionKey(instance), instance)
+			}
+		}
+
+		setSelectedLibraryInstances(nextSelectedInstances.values())
+		anchorInstance.value = null
+		return
+	}
+
+	toggleLibraryInstanceSelection({ groupId, instanceId })
+	anchorInstance.value = { groupId, instanceId }
+}
+
+function setInstanceOptions(component: unknown) {
+	instanceOptions.value = component as InstanceType<typeof ContextMenu> | null
+}
+
+function setConfirmDeleteModal(component: unknown) {
+	confirmDeleteModal.value = component as InstanceType<typeof ConfirmDeleteInstanceModal> | null
+}
+
+watch(selectedLibraryInstances, (selectedInstances) => {
+	if (selectedInstances.size === 0) {
+		anchorInstance.value = null
+		return
+	}
+
+	if (
+		anchorInstance.value &&
+		!selectedInstances.has(getLibraryInstanceSelectionKey(anchorInstance.value))
+	) {
+		anchorInstance.value = null
+	}
+})
+</script>
+
+<template>
+	<InstanceGroupDnd :instances="instances">
+		<section data-library-page-background class="flex flex-col gap-3 pb-16 min-h-[500px]">
+			<h2 class="m-0 text-2xl font-semibold text-contrast">
+				{{ formatMessage(messages.library) }}
+			</h2>
+			<LibraryToolbar />
+			<div
+				v-if="libraryGroupsLoaded && isSearching && visibleInstanceGroups.length === 0"
+				class="text-base text-primary"
+			>
+				{{ formatMessage(messages.noSearchResults) }}
+			</div>
+			<Transition
+				v-else
+				enter-active-class="transition-opacity duration-200 ease-out motion-reduce:transition-none"
+				enter-from-class="opacity-0"
+				enter-to-class="opacity-100"
+			>
+				<div
+					v-if="libraryGroupsLoaded && displayState.group === 'Group'"
+					ref="libraryGroupsContainer"
+					data-library-page-background
+					class="flex flex-col"
+				>
+					<div v-if="visibleFavoritesGroup" class="min-w-0">
+						<InstanceGroup
+							:instance-group="visibleFavoritesGroup"
+							:selection-anchor-instance-id="
+								anchorInstance?.groupId === FAVORITES_GROUP_ID ? anchorInstance.instanceId : null
+							"
+							@toggle-selection="
+								(instanceId: string, shiftKey: boolean) =>
+									handleToggleInstance(FAVORITES_GROUP_ID, instanceId, shiftKey)
+							"
+						/>
+					</div>
+
+					<Draggable
+						:list="draggableCustomGroups"
+						class="flex flex-col"
+						item-key="id"
+						:disabled="!canDragReorderGroups"
+						:animation="250"
+						:swap-threshold="0.75"
+						:invert-swap="true"
+						:force-fallback="true"
+						:fallback-on-body="true"
+						:fallback-tolerance="4"
+						filter=".instance-group-reorder-ignore, input, textarea, [contenteditable='true']"
+						handle=".instance-group-reorder-handle"
+						:prevent-on-filter="false"
+						ghost-class="instance-group-reorder-ghost"
+						chosen-class="instance-group-reorder-chosen"
+						drag-class="instance-group-reorder-drag"
+						fallback-class="instance-group-reorder-fallback"
+						@start="onGroupDragStart"
+						@end="onGroupDragEnd"
+					>
+						<template #item="{ element: instanceGroup }">
+							<div
+								:key="instanceGroup.id"
+								class="min-w-0 w-full"
+								:data-instance-group-reorder-id="instanceGroup.id"
+							>
+								<InstanceGroup
+									:can-drag-reorder="canDragReorderGroups"
+									:instance-group="instanceGroup"
+									:selection-anchor-instance-id="
+										anchorInstance?.groupId === instanceGroup.id ? anchorInstance?.instanceId : null
+									"
+									@toggle-selection="
+										(instanceId: string, shiftKey: boolean) =>
+											handleToggleInstance(instanceGroup.id, instanceId, shiftKey)
+									"
+								/>
+							</div>
+						</template>
+					</Draggable>
+
+					<div v-if="visibleUngroupedGroup" class="min-w-0">
+						<InstanceGroup
+							:hide-header="visibleInstanceGroups.length === 1"
+							:instance-group="visibleUngroupedGroup"
+							:selection-anchor-instance-id="
+								anchorInstance?.groupId === 'group:none' ? anchorInstance.instanceId : null
+							"
+							@toggle-selection="
+								(instanceId: string, shiftKey: boolean) =>
+									handleToggleInstance('group:none', instanceId, shiftKey)
+							"
+						/>
+					</div>
+				</div>
+
+				<TransitionGroup
+					v-else-if="libraryGroupsLoaded"
+					data-library-page-background
+					tag="div"
+					class="flex flex-col"
+					move-class="transition-transform duration-200 ease-out"
+					enter-active-class="transition-[opacity,transform] duration-200 ease-out"
+					enter-from-class="opacity-0 -translate-y-2"
+					enter-to-class="opacity-100 translate-y-0"
+				>
+					<div
+						v-for="instanceGroup in visibleInstanceGroups"
+						:key="instanceGroup.id"
+						class="min-w-0"
+					>
+						<InstanceGroup
+							:hide-header="instanceGroup.key === 'None' && visibleInstanceGroups.length === 1"
+							:instance-group="instanceGroup"
+							:selection-anchor-instance-id="
+								anchorInstance?.groupId === instanceGroup.id ? anchorInstance.instanceId : null
+							"
+							@toggle-selection="
+								(instanceId: string, shiftKey: boolean) =>
+									handleToggleInstance(instanceGroup.id, instanceId, shiftKey)
+							"
+						/>
+					</div>
+				</TransitionGroup>
+			</Transition>
+		</section>
+	</InstanceGroupDnd>
+	<LibrarySelectionActionBar />
+	<GroupInstancesModal />
+	<ConfirmDeleteInstanceModal
+		:ref="setConfirmDeleteModal"
+		:instances="currentDeleteInstances"
+		@delete="deleteInstance"
+	/>
+	<ContextMenu :ref="setInstanceOptions" @option-clicked="handleInstanceOption">
+		<template #play> <PlayIcon /> {{ formatMessage(messages.play) }} </template>
+		<template #stop> <StopCircleIcon /> {{ formatMessage(messages.stop) }} </template>
+		<template #add_to_favorites>
+			<StarIcon /> {{ formatMessage(messages.addToFavorites) }}
+		</template>
+		<template #remove_from_favorites>
+			<StarIcon style="color: var(--color-text-default); fill: var(--color-text-default)" />
+			{{ formatMessage(messages.removeFromFavorites) }}
+		</template>
+		<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
+		<template #edit> <EyeIcon /> {{ formatMessage(messages.viewInstance) }} </template>
+		<template #duplicate>
+			<ClipboardCopyIcon /> {{ formatMessage(messages.duplicateInstance) }}
+		</template>
+		<template #delete> <TrashIcon /> {{ formatMessage(messages.delete) }} </template>
+		<template #open> <FolderOpenIcon /> {{ formatMessage(messages.openFolder) }} </template>
+		<template #copy> <ClipboardCopyIcon /> {{ formatMessage(messages.copyPath) }} </template>
+		<template #remove_from_group>
+			<MinusIcon /> {{ formatMessage(messages.removeFromGroup) }}
+		</template>
+	</ContextMenu>
+</template>
+
+<style scoped>
+:global(.instance-group-reorder-ghost) {
+	opacity: 0.35;
+}
+
+:global(html.instance-group-reordering),
+:global(html.instance-group-reordering *) {
+	-webkit-user-select: none !important;
+	cursor: grabbing !important;
+	user-select: none !important;
+}
+
+:global(.instance-group-reorder-fallback) {
+	opacity: 0.9;
+	pointer-events: none;
+}
+</style>

apps/app-frontend/src/components/ui/library/instance-group/drag-gather.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import DragPreview from '@/components/ui/library/instance-group/drag-preview.vue'
+import {
+	gatherDuration,
+	type InstanceDragGatherItem,
+} from '@/components/ui/library/instance-group/use-instance-drag-gather'
+
+const props = defineProps<{
+	items: InstanceDragGatherItem[]
+	target: {
+		x: number
+		y: number
+	}
+}>()
+
+const emit = defineEmits<{
+	complete: []
+}>()
+
+const gathered = ref(false)
+const finishing = ref(false)
+let animationFrame: number | undefined
+let completionTimer: number | undefined
+
+const itemContainerStyles = computed(() =>
+	props.items.map((_, index) => ({
+		left: `${props.target.x}px`,
+		top: `${props.target.y}px`,
+		zIndex: `${index}`,
+	})),
+)
+
+const itemStyles = computed(() =>
+	props.items.map((item, index) => {
+		const originX = item.rect.left - props.target.x
+		const originY = item.rect.top - props.target.y
+
+		return {
+			width: `${item.rect.width}px`,
+			height: `${item.rect.height}px`,
+			transform: gathered.value
+				? `translate3d(${-item.rect.width / 2}px, ${-item.rect.height / 2}px, 0)`
+				: `translate3d(${originX}px, ${originY}px, 0)`,
+			transitionDuration: `${gatherDuration}ms`,
+			transitionDelay: `${Math.min(index, 8) * 10}ms`,
+		}
+	}),
+)
+
+onMounted(() => {
+	animationFrame = requestAnimationFrame(() => {
+		animationFrame = requestAnimationFrame(() => {
+			gathered.value = true
+			completionTimer = window.setTimeout(
+				() => {
+					finishing.value = true
+					emit('complete')
+				},
+				Math.max(gatherDuration - 250, 0),
+			)
+		})
+	})
+})
+
+onBeforeUnmount(() => {
+	if (animationFrame !== undefined) {
+		cancelAnimationFrame(animationFrame)
+	}
+	if (completionTimer !== undefined) {
+		clearTimeout(completionTimer)
+	}
+})
+</script>
+
+<template>
+	<Teleport to="body">
+		<div
+			class="pointer-events-none fixed inset-0 z-[9998] overflow-hidden transition-opacity duration-150 ease-out"
+			:class="finishing ? 'opacity-0' : 'opacity-100'"
+			aria-hidden="true"
+		>
+			<div
+				v-for="(item, index) in items"
+				:key="item.instance.id"
+				class="fixed"
+				:style="itemContainerStyles[index]"
+			>
+				<div
+					class="origin-center transition-transform ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+					:style="itemStyles[index]"
+				>
+					<DragPreview :instance="item.instance" />
+				</div>
+			</div>
+		</div>
+	</Teleport>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { TagItem } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import InstanceCardView from '@/components/ui/library/instance-group/instance-card-view.vue'
+import { gatherDuration } from '@/components/ui/library/instance-group/use-instance-drag-gather'
+import type { GameInstance } from '@/helpers/types'
+
+const props = withDefaults(
+	defineProps<{
+		instance: GameInstance
+		count?: number
+	}>(),
+	{
+		count: 1,
+	},
+)
+
+const showGatheredCount = ref(false)
+let countTimer: number | undefined
+
+onMounted(() => {
+	if (props.count <= 1 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+		showGatheredCount.value = true
+		return
+	}
+
+	countTimer = window.setTimeout(() => {
+		showGatheredCount.value = true
+		countTimer = undefined
+	}, gatherDuration - 150)
+})
+
+onBeforeUnmount(() => {
+	if (countTimer !== undefined) {
+		clearTimeout(countTimer)
+	}
+})
+</script>
+
+<template>
+	<div aria-hidden="true" class="relative w-full select-none">
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-3 -bottom-2 top-2 rounded-[20px] border border-solid border-surface-5 bg-surface-2 shadow-md motion-safe:transition-opacity motion-safe:duration-200 motion-safe:delay-100 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-60' : 'opacity-0'"
+		/>
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-1.5 -bottom-1 top-1 rounded-[20px] border border-solid border-surface-4 bg-surface-3 shadow-md motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-80' : 'opacity-0'"
+		/>
+		<InstanceCardView :instance="instance" class="opacity-90 shadow-lg">
+			<template #overlay>
+				<TagItem
+					v-if="count > 1"
+					class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-2 font-semibold tabular-nums text-contrast motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+				>
+					{{ count }}
+				</TagItem>
+			</template>
+		</InstanceCardView>
+	</div>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/group-action-buttons.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ArrowDownIcon, ArrowUpIcon, EditIcon, SquarePlusIcon, TrashIcon } from '@modrinth/assets'
+import { defineMessages, IconButton, useVIntl } from '@modrinth/ui'
+
+defineProps<{
+	deleting?: boolean
+	canMoveDown: boolean
+	canMoveUp: boolean
+	onAddToGroup: () => void
+	onDeleteGroup: () => void
+	onEditGroupName: () => void
+	onMoveDown: () => void
+	onMoveUp: () => void
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	addToGroup: {
+		id: 'app.library.group.context-menu.add-to-group',
+		defaultMessage: 'Add to group',
+	},
+	editGroupName: {
+		id: 'app.library.group.edit-name',
+		defaultMessage: 'Edit group name',
+	},
+	deleteGroup: {
+		id: 'app.library.group.delete',
+		defaultMessage: 'Delete group',
+	},
+	moveGroupUp: {
+		id: 'app.library.group.move-up',
+		defaultMessage: 'Move group up',
+	},
+	moveGroupDown: {
+		id: 'app.library.group.move-down',
+		defaultMessage: 'Move group down',
+	},
+})
+</script>
+
+<template>
+	<div
+		class="instance-group-reorder-ignore flex shrink-0 items-center opacity-0 transition-opacity duration-250 group-hover/header:opacity-100 focus-within:opacity-100"
+	>
+		<IconButton
+			v-tooltip="formatMessage(messages.moveGroupUp)"
+			:label="formatMessage(messages.moveGroupUp)"
+			type="quiet"
+			size="sm"
+			:disabled="!canMoveUp"
+			@click.stop="onMoveUp"
+		>
+			<ArrowUpIcon />
+		</IconButton>
+		<IconButton
+			v-tooltip="formatMessage(messages.moveGroupDown)"
+			:label="formatMessage(messages.moveGroupDown)"
+			type="quiet"
+			size="sm"
+			:disabled="!canMoveDown"
+			@click.stop="onMoveDown"
+		>
+			<ArrowDownIcon />
+		</IconButton>
+		<IconButton
+			v-tooltip="formatMessage(messages.editGroupName)"
+			:label="formatMessage(messages.editGroupName)"
+			type="quiet"
+			size="sm"
+			@click.stop="onEditGroupName"
+		>
+			<EditIcon />
+		</IconButton>
+		<IconButton
+			v-tooltip="formatMessage(messages.addToGroup)"
+			:label="formatMessage(messages.addToGroup)"
+			type="quiet"
+			size="sm"
+			@click.stop="onAddToGroup"
+		>
+			<SquarePlusIcon />
+		</IconButton>
+		<IconButton
+			v-tooltip="formatMessage(messages.deleteGroup)"
+			:label="formatMessage(messages.deleteGroup)"
+			type="quiet"
+			size="sm"
+			:disabled="deleting"
+			@click.stop="onDeleteGroup"
+		>
+			<TrashIcon />
+		</IconButton>
+	</div>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/index.vue

@@ -0,0 +1,547 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import {
+	DropdownIcon,
+	EditIcon,
+	PlusIcon,
+	SquarePlusIcon,
+	TrashIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Accordion,
+	Button,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	InlineEditableText,
+	NewModal,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, inject, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import GroupActionButtons from '@/components/ui/library/instance-group/group-action-buttons.vue'
+import InstanceCard from '@/components/ui/library/instance-group/instance-card.vue'
+import type {
+	InstanceCard as InstanceCardExposed,
+	InstanceGroup as InstanceGroupType,
+} from '@/components/ui/library/use-library'
+import { useLibrary } from '@/components/ui/library/use-library'
+import { FAVORITES_GROUP_ID, MAX_INSTANCE_GROUP_NAME_LENGTH } from '@/helpers/instance-groups'
+
+const INSTANCE_GRID_OBSERVER_ACTIVATION_DELAY = 500
+
+const props = withDefaults(
+	defineProps<{
+		canDragReorder?: boolean
+		hideHeader?: boolean
+		instanceGroup: InstanceGroupType
+		selectionAnchorInstanceId?: string | null
+	}>(),
+	{
+		canDragReorder: false,
+		hideHeader: false,
+		selectionAnchorInstanceId: null,
+	},
+)
+
+const { formatMessage } = useVIntl()
+const { addNotification } = injectNotificationManager()
+const {
+	isSectionCollapsed,
+	setSectionCollapsed,
+	isSearching,
+	deleteGroup,
+	renameGroup,
+	canMoveGroupUp,
+	canMoveGroupDown,
+	moveGroup,
+	groupIdPendingNameEdit,
+	completePendingGroupNameEdit,
+	handleInstanceContextMenu,
+	openGroupInstancesModal,
+	displayState,
+	activeInstanceGroupDrag,
+	instanceGroupDragTarget,
+	getInstanceGroupDropState,
+} = useLibrary()
+const showCreationModal = inject<() => void>('showCreationModal')
+
+const instanceComponents = new Map<string, InstanceCardExposed>()
+const groupDropTarget = ref<HTMLElement>()
+const groupAccordion = ref<InstanceType<typeof Accordion>>()
+const groupOptions = ref<InstanceType<typeof ContextMenu>>()
+const groupNameInput = ref<InstanceType<typeof InlineEditableText>>()
+const confirmDeleteGroupModal = ref<InstanceType<typeof NewModal>>()
+const instanceGridContent = ref<HTMLElement>()
+const instanceGridHeight = ref<number>()
+const deletingGroup = ref(false)
+const groupName = ref(props.instanceGroup.key)
+const isUngrouped = computed(() => props.instanceGroup.id === 'group:none')
+const isFavorites = computed(() => props.instanceGroup.id === FAVORITES_GROUP_ID)
+const isCustomGroup = computed(
+	() => displayState.value.group === 'Group' && !isUngrouped.value && !isFavorites.value,
+)
+const groupContextMenuOpen = ref(false)
+const isGroupToggleBlocked = computed(
+	() => isSearching.value || groupContextMenuOpen.value || Boolean(groupNameInput.value?.isEditing),
+)
+let shouldSkipGroupToggle = false
+let groupToggleEventToSkip: MouseEvent | undefined
+let instanceGridResizeObserver: ResizeObserver | undefined
+let instanceGridObserverActivationTimeout: ReturnType<typeof setTimeout> | undefined
+
+const emit = defineEmits<{
+	(e: 'toggle-selection', instanceId: string, shiftKey: boolean): void
+}>()
+
+useDroppable({
+	id: computed(() => `instance-group:${props.instanceGroup.id}`),
+	element: groupDropTarget,
+	disabled: computed(() => displayState.value.group !== 'Group'),
+	data: computed(() => ({
+		groupId: props.instanceGroup.id,
+	})),
+})
+
+const messages = defineMessages({
+	ungrouped: {
+		id: 'app.library.group.ungrouped',
+		defaultMessage: 'Ungrouped',
+	},
+	favorites: {
+		id: 'app.library.group.favorites',
+		defaultMessage: 'Favorites',
+	},
+	collapseGroup: { id: 'app.library.group.collapse', defaultMessage: 'Collapse group' },
+	expandGroup: { id: 'app.library.group.expand', defaultMessage: 'Expand group' },
+	deleteGroup: {
+		id: 'app.library.group.delete',
+		defaultMessage: 'Delete group',
+	},
+	editGroupName: {
+		id: 'app.library.group.edit-name',
+		defaultMessage: 'Edit group name',
+	},
+	renameGroupFailed: {
+		id: 'app.library.group.rename-failed',
+		defaultMessage: 'Unable to rename group',
+	},
+	groupNameEmpty: {
+		id: 'app.library.group.name-empty',
+		defaultMessage: 'Group names cannot be empty.',
+	},
+	groupNameTooLong: {
+		id: 'app.library.group.name-too-long',
+		defaultMessage: 'Group names cannot be longer than {maxLength} characters.',
+	},
+	groupNameReserved: {
+		id: 'app.library.group.name-reserved',
+		defaultMessage: '"None" is reserved and cannot be used as a group name.',
+	},
+	deleteGroupDescription: {
+		id: 'app.library.group.delete-description',
+		defaultMessage: 'Instances in this group will be ungrouped.',
+	},
+	newInstance: {
+		id: 'app.library.context-menu.create-instance',
+		defaultMessage: 'New instance',
+	},
+	addToGroup: {
+		id: 'app.library.group.context-menu.add-to-group',
+		defaultMessage: 'Add to group',
+	},
+	emptyGroup: {
+		id: 'app.library.group.empty',
+		defaultMessage: 'Drag and drop to add instances.',
+	},
+})
+
+function openInstanceContextMenu(event: MouseEvent, instanceId: string, instanceGroupId: string) {
+	const instanceComponent = instanceComponents.get(instanceId)
+	if (!instanceComponent) return
+
+	handleInstanceContextMenu(event, instanceComponent, instanceGroupId)
+}
+
+function setInstanceComponent(instanceId: string, component: unknown) {
+	if (component) {
+		instanceComponents.set(instanceId, component as InstanceCardExposed)
+	} else {
+		instanceComponents.delete(instanceId)
+	}
+}
+
+async function removeGroup() {
+	if (deletingGroup.value) return
+
+	deletingGroup.value = true
+	const deleted = await deleteGroup(props.instanceGroup.id)
+	deletingGroup.value = false
+
+	if (deleted) {
+		confirmDeleteGroupModal.value?.hide()
+	}
+}
+
+function requestGroupDeletion() {
+	if (isUngrouped.value || isFavorites.value) return
+
+	if (props.instanceGroup.instances.length > 0) {
+		confirmDeleteGroupModal.value?.show()
+	} else {
+		void removeGroup()
+	}
+}
+
+function openGroupContextMenu(event: MouseEvent) {
+	groupContextMenuOpen.value = true
+	groupOptions.value?.showMenu(
+		event,
+		props.instanceGroup,
+		isFavorites.value
+			? [{ name: 'new_instance' }]
+			: isCustomGroup.value
+				? [
+						{ name: 'new_instance' },
+						{ name: 'add_instances' },
+						{ name: 'edit_name' },
+						{ type: 'divider' },
+						{ name: 'delete_group', color: 'danger' },
+					]
+				: [{ name: 'new_instance' }],
+	)
+}
+
+function handleGroupOption({ option }: { option: string }) {
+	if (option === 'new_instance') {
+		showCreationModal?.()
+		return
+	}
+
+	if (option === 'add_instances') {
+		openGroupInstancesModal(props.instanceGroup.id)
+		return
+	}
+
+	if (option === 'edit_name') {
+		void groupNameInput.value?.startEditing()
+		return
+	}
+
+	if (option === 'delete_group') {
+		requestGroupDeletion()
+	}
+}
+
+function prepareGroupToggle(event: PointerEvent) {
+	const editor = groupNameInput.value
+	const contextMenuWasOpen = groupContextMenuOpen.value
+	if (contextMenuWasOpen) {
+		groupOptions.value?.hideMenu()
+	}
+
+	shouldSkipGroupToggle = Boolean(
+		contextMenuWasOpen ||
+		(editor?.isEditing && event.target instanceof Node && !editor.$el.contains(event.target)),
+	)
+}
+
+function captureGroupClick(event: MouseEvent) {
+	groupToggleEventToSkip = shouldSkipGroupToggle ? event : undefined
+	shouldSkipGroupToggle = false
+}
+
+function toggleGroup(event: MouseEvent) {
+	if (event === groupToggleEventToSkip) {
+		groupToggleEventToSkip = undefined
+		return
+	}
+	if (isSearching.value) return
+
+	if (groupAccordion.value?.isOpen) {
+		groupAccordion.value.close()
+	} else {
+		groupAccordion.value?.open()
+	}
+}
+
+function validateGroupName(value: string) {
+	const normalizedGroupName = value.trim()
+	let reason: string | undefined
+
+	if (normalizedGroupName.length === 0) {
+		reason = formatMessage(messages.groupNameEmpty)
+	} else if (normalizedGroupName.length > MAX_INSTANCE_GROUP_NAME_LENGTH) {
+		reason = formatMessage(messages.groupNameTooLong, {
+			maxLength: MAX_INSTANCE_GROUP_NAME_LENGTH,
+		})
+	} else if (normalizedGroupName.toLowerCase() === 'none') {
+		reason = formatMessage(messages.groupNameReserved)
+	}
+
+	if (reason) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.renameGroupFailed),
+			text: reason,
+		})
+		return false
+	}
+
+	return true
+}
+
+async function updateGroupName(value: string) {
+	return await renameGroup(props.instanceGroup.id, value)
+}
+
+watch(
+	() => props.instanceGroup.key,
+	(value) => {
+		groupName.value = value
+	},
+)
+
+watch(
+	[() => props.instanceGroup.id, groupIdPendingNameEdit],
+	async ([groupId, pendingGroupId]) => {
+		if (groupId !== pendingGroupId) return
+
+		await nextTick()
+		groupDropTarget.value?.scrollIntoView({ block: 'nearest' })
+		await groupNameInput.value?.startEditing()
+		completePendingGroupNameEdit(groupId)
+	},
+	{ immediate: true, flush: 'post' },
+)
+
+watch(
+	() => props.hideHeader,
+	(hideHeader) => {
+		if (hideHeader) {
+			groupAccordion.value?.open()
+		}
+	},
+	{ flush: 'post' },
+)
+
+function stopInstanceGridResizeObserver() {
+	clearTimeout(instanceGridObserverActivationTimeout)
+	instanceGridResizeObserver?.disconnect()
+}
+
+function startInstanceGridResizeObserver() {
+	stopInstanceGridResizeObserver()
+	instanceGridHeight.value = undefined
+	instanceGridObserverActivationTimeout = setTimeout(() => {
+		instanceGridObserverActivationTimeout = undefined
+
+		const gridContent = instanceGridContent.value
+		if (!gridContent?.isConnected) return
+
+		instanceGridHeight.value = gridContent.getBoundingClientRect().height
+		instanceGridResizeObserver = new ResizeObserver(() => {
+			if (!gridContent.isConnected) return
+			instanceGridHeight.value = gridContent.getBoundingClientRect().height
+		})
+		instanceGridResizeObserver.observe(gridContent)
+	}, INSTANCE_GRID_OBSERVER_ACTIVATION_DELAY)
+}
+
+onActivated(startInstanceGridResizeObserver)
+onDeactivated(stopInstanceGridResizeObserver)
+onMounted(startInstanceGridResizeObserver)
+</script>
+
+<template>
+	<div
+		ref="groupDropTarget"
+		class="instance-group group/instance-container relative select-none pb-3"
+		@contextmenu.prevent.stop="openGroupContextMenu"
+	>
+		<Transition
+			enter-active-class="transition-opacity duration-150 ease-out"
+			enter-from-class="!opacity-0"
+			enter-to-class="opacity-100"
+			leave-active-class="transition-opacity duration-150 ease-in"
+			leave-from-class="opacity-100"
+			leave-to-class="!opacity-0"
+		>
+			<div
+				v-if="
+					activeInstanceGroupDrag &&
+					instanceGroupDragTarget === instanceGroup.id &&
+					getInstanceGroupDropState(instanceGroup.id).canDrop
+				"
+				class="pointer-events-none absolute -inset-2 inset-y-0 z-20 rounded-xl border-2 opacity-40 border-dashed border-contrast bg-transparent"
+			/>
+		</Transition>
+		<div
+			v-if="!hideHeader"
+			class="group/header h-10 flex w-full items-center gap-2 border-0 border-b border-solid border-b-surface-5"
+			:class="{
+				'instance-group-reorder-handle': isCustomGroup && canDragReorder,
+			}"
+		>
+			<div
+				class="group/open-target flex min-w-0 items-center gap-2"
+				:class="isGroupToggleBlocked ? 'cursor-default' : 'cursor-pointer'"
+				@click="toggleGroup"
+				@click.capture="captureGroupClick"
+				@pointerdown.capture="prepareGroupToggle"
+			>
+				<button
+					class="flex shrink-0 items-center border-0 bg-transparent p-0"
+					:class="isGroupToggleBlocked ? 'cursor-default' : 'cursor-pointer'"
+					type="button"
+					:aria-expanded="groupAccordion?.isOpen"
+					:aria-label="
+						formatMessage(groupAccordion?.isOpen ? messages.collapseGroup : messages.expandGroup)
+					"
+					@click.stop="toggleGroup"
+				>
+					<DropdownIcon
+						class="size-5 shrink-0 text-secondary transition-all duration-300 group-hover/open-target:text-primary"
+						:class="{ 'rotate-180': groupAccordion?.isOpen }"
+					/>
+				</button>
+				<InlineEditableText
+					v-if="!isUngrouped && !isFavorites"
+					ref="groupNameInput"
+					v-model="groupName"
+					activation-mode="manual"
+					class="text-base font-semibold !h-10 text-primary select-none group-hover/open-target:text-contrast"
+					:edit-label="formatMessage(commonMessages.renameButton)"
+					max-width="24rem"
+					icon-text-class="select-none"
+					:max-length="MAX_INSTANCE_GROUP_NAME_LENGTH"
+					:on-change="updateGroupName"
+					:validate="validateGroupName"
+				/>
+				<span
+					v-else-if="isUngrouped"
+					class="text-base font-semibold text-primary select-none group-hover/open-target:text-contrast"
+				>
+					{{ formatMessage(messages.ungrouped) }}
+				</span>
+				<span
+					v-else
+					class="flex items-center gap-1.5 text-base font-semibold text-primary select-none group-hover/open-target:text-contrast"
+				>
+					{{ formatMessage(messages.favorites) }}
+				</span>
+				<TagItem
+					v-if="instanceGroup.instances.length"
+					class="shrink-0 border-surface-3 bg-surface-2"
+				>
+					{{ instanceGroup.instances.length }}
+				</TagItem>
+			</div>
+			<div class="min-w-0 flex-1" />
+			<GroupActionButtons
+				v-if="isCustomGroup"
+				:can-move-down="canMoveGroupDown(instanceGroup.id)"
+				:can-move-up="canMoveGroupUp(instanceGroup.id)"
+				:deleting="deletingGroup"
+				:on-add-to-group="() => openGroupInstancesModal(instanceGroup.id)"
+				:on-delete-group="requestGroupDeletion"
+				:on-edit-group-name="() => groupNameInput?.startEditing()"
+				:on-move-down="() => moveGroup(instanceGroup.id, 1)"
+				:on-move-up="() => moveGroup(instanceGroup.id, -1)"
+			/>
+		</div>
+		<Accordion
+			ref="groupAccordion"
+			:open-by-default="hideHeader || !isSectionCollapsed(instanceGroup.id)"
+			:force-open="isSearching"
+			class="w-full"
+			@on-open="setSectionCollapsed(instanceGroup.id, false)"
+			@on-close="setSectionCollapsed(instanceGroup.id, true)"
+		>
+			<div
+				class="mt-2.5 overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none"
+				:style="{
+					height: instanceGridHeight === undefined ? undefined : `${instanceGridHeight}px`,
+				}"
+			>
+				<div ref="instanceGridContent">
+					<TransitionGroup
+						tag="section"
+						class="grid min-h-[45px] w-full grid-cols-[repeat(auto-fill,minmax(min(10rem,100%),1fr))] max-xl:grid-cols-[repeat(auto-fill,minmax(min(8rem,100%),1fr))] gap-3 overflow-y-auto scroll-smooth"
+						move-class="transition-transform duration-200 ease-out motion-reduce:transition-none"
+						enter-active-class="transition-[opacity,transform] duration-[150ms] ease-out motion-reduce:transition-none"
+						enter-from-class="opacity-0"
+						enter-to-class="opacity-100 scale-100"
+					>
+						<div
+							v-for="instance in instanceGroup.instances"
+							:key="instance.id"
+							class="min-w-0 w-full"
+						>
+							<InstanceCard
+								:ref="(component: unknown) => setInstanceComponent(instance.id, component)"
+								:instance="instance"
+								:instance-group-id="instanceGroup.id"
+								:is-selection-anchor="selectionAnchorInstanceId === instance.id"
+								@toggle-selection="
+									(shiftKey: boolean) => emit('toggle-selection', instance.id, shiftKey)
+								"
+								@contextmenu.prevent.stop="
+									(event: MouseEvent) =>
+										openInstanceContextMenu(event, instance.id, instanceGroup.id)
+								"
+							/>
+						</div>
+						<p
+							v-if="instanceGroup.instances.length === 0"
+							key="empty-group"
+							class="col-span-full m-0 pt-1 pl-0.5 text-base font-base text-secondary opacity-80"
+						>
+							{{ formatMessage(messages.emptyGroup) }}
+						</p>
+					</TransitionGroup>
+				</div>
+			</div>
+		</Accordion>
+	</div>
+
+	<ContextMenu
+		ref="groupOptions"
+		@menu-closed="groupContextMenuOpen = false"
+		@option-clicked="handleGroupOption"
+	>
+		<template #new_instance> <PlusIcon /> {{ formatMessage(messages.newInstance) }} </template>
+		<template #add_instances>
+			<SquarePlusIcon /> {{ formatMessage(messages.addToGroup) }}
+		</template>
+		<template #edit_name> <EditIcon /> {{ formatMessage(messages.editGroupName) }} </template>
+		<template #delete_group> <TrashIcon /> {{ formatMessage(messages.deleteGroup) }} </template>
+	</ContextMenu>
+
+	<NewModal
+		ref="confirmDeleteGroupModal"
+		:header="formatMessage(messages.deleteGroup)"
+		fade="danger"
+		width="500px"
+	>
+		<p class="m-0 text-base text-primary">
+			{{ formatMessage(messages.deleteGroupDescription) }}
+		</p>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" @click="confirmDeleteGroupModal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" :disabled="deletingGroup" @click="removeGroup">
+					<TrashIcon />
+					{{ formatMessage(messages.deleteGroup) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/instance-card-view.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Avatar, truncatedTooltip } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { getInstanceIconUrl } from '@/helpers/instance'
+import type { GameInstance } from '@/helpers/types'
+
+const props = withDefaults(
+	defineProps<{
+		instance: GameInstance
+		selected?: boolean
+	}>(),
+	{
+		selected: false,
+	},
+)
+
+const iconSrc = computed(() => getInstanceIconUrl(props.instance.icon_path))
+
+const nameRef = ref<HTMLElement | null>(null)
+const versionRef = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+	<div
+		class="relative flex w-full min-w-0 select-none flex-col items-start justify-end gap-3 overflow-clip rounded-[20px] border border-solid bg-surface-3 p-3 text-left transition-all"
+		:class="{
+			'[border-color:color-mix(in_srgb,var(--color-text-primary)_40%,transparent)] brightness-110':
+				selected,
+			'border-surface-4': !selected,
+		}"
+	>
+		<div
+			class="relative flex aspect-square min-w-full shrink-0 items-center overflow-clip rounded-2xl"
+		>
+			<Avatar
+				class="pointer-events-none !rounded-2xl outline-none"
+				size="100%"
+				:src="iconSrc"
+				:tint-by="instance.id"
+				alt=""
+				no-shadow
+			/>
+			<slot name="loading" />
+			<div class="absolute bottom-1.5 right-1.5 z-[1] flex size-12 items-center justify-center">
+				<slot name="leading" />
+			</div>
+		</div>
+		<div class="flex min-w-0 w-full flex-col items-start justify-center gap-1 px-0.5">
+			<p
+				ref="nameRef"
+				v-tooltip="truncatedTooltip(nameRef, instance.name)"
+				class="m-0 w-full truncate text-base font-semibold leading-5 text-contrast"
+			>
+				{{ instance.name }}
+			</p>
+			<p
+				ref="versionRef"
+				v-tooltip="truncatedTooltip(versionRef, `${instance.loader} ${instance.game_version}`)"
+				class="m-0 w-full truncate text-sm font-medium capitalize leading-[18px] text-primary"
+			>
+				{{ instance.loader }} {{ instance.game_version }}
+			</p>
+		</div>
+		<slot name="overlay" />
+	</div>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
+import { CheckIcon, DownloadIcon, PlayIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
+import { defineMessages, IconButton, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { useEventListener, useMagicKeys } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import InstanceCardView from '@/components/ui/library/instance-group/instance-card-view.vue'
+import { getLibraryInstanceSelectionKey, useLibrary } from '@/components/ui/library/use-library'
+import { useAppEvent } from '@/composables/use-app-event'
+import { trackEvent } from '@/helpers/analytics'
+import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
+import { kill, run } from '@/helpers/instance'
+import { get_by_instance_id } from '@/helpers/process'
+import type { GameInstance } from '@/helpers/types'
+import { showInstanceInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+
+type ProcessEvent = 'installing' | 'launched' | 'finished'
+
+const LOADING_INDICATOR_DELAY_MS = 100
+
+const instanceCardSensors = [
+	PointerSensor.configure({
+		preventActivation: () => false,
+	}),
+	KeyboardSensor,
+]
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	selectInstance: {
+		id: 'app.library.instance.select-with-name',
+		defaultMessage: 'Select {name}',
+	},
+	deselectInstance: {
+		id: 'app.library.instance.deselect-with-name',
+		defaultMessage: 'Deselect {name}',
+	},
+	openInstance: {
+		id: 'app.library.instance.open-with-name',
+		defaultMessage: 'Open {name}',
+	},
+	loading: { id: 'app.library.instance.loading', defaultMessage: 'Instance is loading...' },
+	installing: { id: 'app.library.instance.installing', defaultMessage: 'Installing...' },
+	stop: { id: 'app.library.instance.stop', defaultMessage: 'Stop' },
+	repair: { id: 'app.library.instance.repair', defaultMessage: 'Repair' },
+	play: { id: 'app.library.instance.play', defaultMessage: 'Play' },
+	select: { id: 'app.library.instance.select', defaultMessage: 'Select instance' },
+	deselect: { id: 'app.library.instance.deselect', defaultMessage: 'Deselect instance' },
+})
+const {
+	displayState,
+	selectedLibraryInstances,
+	isLibraryInstanceSelectionActive,
+	activeDraggedInstanceKeys,
+} = useLibrary()
+
+const props = defineProps<{
+	instance: GameInstance
+	instanceGroupId: string
+	isSelectionAnchor?: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'toggle-selection', shiftKey: boolean): void
+}>()
+
+const instanceCardElement = ref<InstanceType<typeof InstanceCardView> | null>(null)
+const playing = ref(false)
+const loading = ref(false)
+const currentEvent = ref<ProcessEvent | null>(null)
+const isPrimaryPointerDown = ref(false)
+const modLoading = computed(
+	() =>
+		loading.value ||
+		currentEvent.value === 'installing' ||
+		(currentEvent.value === 'launched' && !playing.value),
+)
+const installing = computed(() => props.instance.install_stage.includes('installing'))
+const installed = computed(() => props.instance.install_stage === 'installed')
+const loadingIndicatorRequested = computed(
+	() => !playing.value && (modLoading.value || installing.value),
+)
+const loadingIndicatorVisible = ref(false)
+
+watch(
+	loadingIndicatorRequested,
+	(requested, _, onCleanup) => {
+		loadingIndicatorVisible.value = false
+		if (!requested) return
+
+		const timeout = setTimeout(() => {
+			loadingIndicatorVisible.value = true
+		}, LOADING_INDICATOR_DELAY_MS)
+		onCleanup(() => clearTimeout(timeout))
+	},
+	{ immediate: true },
+)
+const selectionKey = computed(() =>
+	getLibraryInstanceSelectionKey({
+		instanceId: props.instance.id,
+		groupId: props.instanceGroupId,
+	}),
+)
+const selected = computed(() => selectedLibraryInstances.value.has(selectionKey.value))
+const keys = useMagicKeys()
+const holdingShift = computed(() => keys.shift.value)
+const isPartOfActiveDrag = computed(() => activeDraggedInstanceKeys.value.has(selectionKey.value))
+const { isDragging } = useDraggable({
+	id: computed(() => `instance:${props.instanceGroupId}:${props.instance.id}`),
+	element: instanceCardElement,
+	disabled: computed(() => displayState.value.group !== 'Group'),
+	sensors: instanceCardSensors,
+	data: computed(() => ({
+		instanceId: props.instance.id,
+		fromGroup: props.instanceGroupId,
+	})),
+})
+
+const router = useRouter()
+
+const seeInstance = async () => {
+	await router.push(`/instance/${encodeURIComponent(props.instance.id)}`)
+}
+
+const toggleSelection = (event?: MouseEvent) => {
+	emit('toggle-selection', event?.shiftKey ?? false)
+}
+
+const handlePointerDown = (event: PointerEvent) => {
+	isPrimaryPointerDown.value =
+		event.button === 0 &&
+		!(event.target instanceof Element && event.target.closest('.selection-button'))
+}
+
+const resetPrimaryPointer = () => {
+	isPrimaryPointerDown.value = false
+}
+
+useEventListener(window, 'pointerup', resetPrimaryPointer)
+useEventListener(window, 'pointercancel', resetPrimaryPointer)
+useEventListener(window, 'blur', resetPrimaryPointer)
+
+const activateCard = (event: MouseEvent) => {
+	if (isLibraryInstanceSelectionActive.value || event.shiftKey) {
+		toggleSelection(event)
+	} else {
+		void seeInstance()
+	}
+}
+
+const handleCardKeydown = (event: KeyboardEvent) => {
+	if (event.target !== event.currentTarget) return
+
+	if (event.key === 'Enter') {
+		event.preventDefault()
+		if (isLibraryInstanceSelectionActive.value) {
+			toggleSelection()
+		} else {
+			void seeInstance()
+		}
+	} else if (event.key === ' ' && isLibraryInstanceSelectionActive.value) {
+		event.preventDefault()
+		toggleSelection()
+	}
+}
+
+const checkProcess = async () => {
+	const runningProcesses = (await get_by_instance_id(props.instance.id).catch(handleError)) ?? []
+
+	playing.value = runningProcesses.length > 0
+}
+
+const play = async (event: MouseEvent | null, context: string) => {
+	event?.stopPropagation()
+	if (props.instance.quarantined) return
+	loading.value = true
+	await run(props.instance.id)
+		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
+		.finally(() => {
+			trackEvent('InstanceStart', {
+				loader: props.instance.loader,
+				game_version: props.instance.game_version,
+				source: context,
+			})
+		})
+	loading.value = false
+}
+
+const stop = async (event: MouseEvent | null, context: string) => {
+	event?.stopPropagation()
+	playing.value = false
+
+	await kill(props.instance.id).catch(handleError)
+
+	trackEvent('InstanceStop', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		source: context,
+	})
+}
+
+const repair = async (event: MouseEvent) => {
+	event.stopPropagation()
+	if (props.instance.quarantined) return
+
+	if (
+		props.instance.install_stage !== 'pack_installed' &&
+		(props.instance.link?.type === 'modrinth_modpack' ||
+			props.instance.link?.type === 'server_project_modpack')
+	) {
+		await install_pack_to_existing_instance(props.instance.id, {
+			type: 'fromVersionId',
+			project_id: props.instance.link.project_id ?? props.instance.link.server_project_id ?? '',
+			version_id: props.instance.link.version_id ?? props.instance.link.content_version_id ?? '',
+			title: props.instance.name,
+		}).catch(handleError)
+	} else {
+		await install_existing_instance(props.instance.id, false).catch(handleError)
+	}
+}
+
+const openFolder = async () => {
+	await showInstanceInFolder(props.instance.id)
+}
+
+const addContent = async () => {
+	if (props.instance.quarantined) return
+	await router.push({
+		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+		query: { i: props.instance.id },
+	})
+}
+
+defineExpose({
+	play,
+	stop,
+	seeInstance,
+	openFolder,
+	addContent,
+	instance: props.instance,
+})
+
+useAppEvent('process', (event) => {
+	if (event.instance_id === props.instance.id) {
+		currentEvent.value = event.event
+		playing.value = event.event === 'launched'
+	}
+})
+
+onMounted(() => {
+	void checkProcess()
+})
+</script>
+
+<template>
+	<InstanceCardView
+		ref="instanceCardElement"
+		class="group/card cursor-pointer -outline-offset-2 focus-visible:!outline-2 hover:brightness-110"
+		:class="{
+			'!scale-100': isDragging,
+			'opacity-50': isPartOfActiveDrag,
+			'scale-[0.95]': isPrimaryPointerDown && !isLibraryInstanceSelectionActive,
+		}"
+		:instance="instance"
+		:selected="selected"
+		data-library-instance-card
+		:data-instance-id="instance.id"
+		:data-instance-group="instanceGroupId"
+		role="button"
+		tabindex="0"
+		:aria-label="
+			isLibraryInstanceSelectionActive
+				? formatMessage(selected ? messages.deselectInstance : messages.selectInstance, {
+						name: instance.name,
+					})
+				: formatMessage(messages.openInstance, { name: instance.name })
+		"
+		:aria-pressed="isLibraryInstanceSelectionActive ? selected : undefined"
+		@click="activateCard"
+		@keydown="handleCardKeydown"
+		@mouseenter="checkProcess"
+		@pointerdown="handlePointerDown"
+	>
+		<template #loading>
+			<div
+				v-if="loadingIndicatorVisible"
+				class="pointer-events-none absolute inset-0 z-[1] flex items-center justify-center"
+			>
+				<div class="absolute inset-0 bg-surface-1 opacity-30" />
+				<SpinnerIcon
+					v-tooltip="formatMessage(modLoading ? messages.loading : messages.installing)"
+					class="relative size-[30%] animate-spin text-contrast"
+					tabindex="-1"
+				/>
+			</div>
+		</template>
+		<template #leading>
+			<div class="relative flex size-12 shrink-0 items-center justify-center">
+				<div class="absolute inset-0 flex items-center justify-center">
+					<IconButton
+						v-if="playing"
+						v-tooltip="formatMessage(messages.stop)"
+						:label="formatMessage(messages.stop)"
+						type="colored"
+						color="red"
+						size="lg"
+						@click="(e) => stop(e, 'InstanceCard')"
+						@mouseenter="checkProcess"
+					>
+						<StopCircleIcon />
+					</IconButton>
+					<IconButton
+						v-else-if="
+							!modLoading &&
+							!installing &&
+							!isLibraryInstanceSelectionActive &&
+							!installed &&
+							!instance.quarantined
+						"
+						v-tooltip="formatMessage(messages.repair)"
+						:label="formatMessage(messages.repair)"
+						type="colored"
+						color="brand"
+						size="lg"
+						class="origin-bottom scale-75 opacity-0 transition-opacity group-hover/card:scale-100 group-hover/card:opacity-100"
+						@click="(e) => repair(e)"
+					>
+						<DownloadIcon />
+					</IconButton>
+					<IconButton
+						v-else-if="
+							!modLoading &&
+							!installing &&
+							!isLibraryInstanceSelectionActive &&
+							!instance.quarantined
+						"
+						v-tooltip="formatMessage(messages.play)"
+						:label="formatMessage(messages.play)"
+						type="colored"
+						color="brand"
+						size="lg"
+						class="origin-bottom scale-75 opacity-0 transition-opacity group-hover/card:scale-100 group-hover/card:opacity-100"
+						@click="(e) => play(e, 'InstanceCard')"
+						@mouseenter="checkProcess"
+					>
+						<PlayIcon class="translate-x-px" />
+					</IconButton>
+				</div>
+			</div>
+		</template>
+		<template #overlay>
+			<button
+				type="button"
+				class="selection-button group/selection absolute right-2 top-1.5 z-[2] flex size-[50px] cursor-pointer items-start pt-4 justify-center border-0 bg-transparent p-0"
+				:aria-label="formatMessage(selected ? messages.deselect : messages.select)"
+				:aria-pressed="selected"
+				@click.stop="toggleSelection"
+			>
+				<span
+					v-tooltip="formatMessage(selected ? messages.deselect : messages.select)"
+					class="relative flex size-[24px] items-center justify-center rounded-full opacity-0 transition-opacity duration-200 ease-out group-hover/card:opacity-100 group-hover/selection:brightness-125"
+					:class="{
+						'border-0 !opacity-100': selected,
+						'border-2 border-solid border-primary bg-transparent': !selected,
+						'[outline:3px_solid_var(--color-purple)] outline-offset-1':
+							holdingShift && isSelectionAnchor,
+					}"
+				>
+					<span v-if="selected" class="absolute inset-0 rounded-full bg-contrast" />
+					<CheckIcon v-if="selected" class="relative size-4 invert [stroke-width:3]" />
+				</span>
+			</button>
+		</template>
+	</InstanceCardView>
+</template>

apps/app-frontend/src/components/ui/library/instance-group/instance-group-dnd.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import {
+	DragDropProvider,
+	type DragEndEvent,
+	type DragMoveEvent,
+	type DragOverEvent,
+	DragOverlay,
+	type DragStartEvent,
+} from '@dnd-kit/vue'
+import { computed, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue'
+
+import DragGather from '@/components/ui/library/instance-group/drag-gather.vue'
+import DragPreview from '@/components/ui/library/instance-group/drag-preview.vue'
+import { useInstanceDragGather } from '@/components/ui/library/instance-group/use-instance-drag-gather'
+import { useLibrary } from '@/components/ui/library/use-library'
+import type { GameInstance } from '@/helpers/types'
+
+type InstanceDragData = {
+	instanceId: string
+	fromGroup: string
+}
+
+type InstanceGroupDndDropData = {
+	groupId: string
+}
+
+const props = defineProps<{
+	instances: GameInstance[]
+}>()
+
+const GROUP_HOVER_OPEN_DELAY = 750
+
+const {
+	activeInstanceGroupDrag,
+	instanceGroupDragPointer,
+	instanceGroupDragStatus,
+	instanceGroupDragTarget,
+	isSectionCollapsed,
+	setSectionCollapsed,
+	startInstanceGroupDrag,
+	updateInstanceGroupDrag,
+	finishInstanceGroupDrag,
+	setInstanceGroupDragTarget,
+	getInstanceGroupDropState,
+	moveDraggedInstancesToGroup,
+} = useLibrary()
+
+const draggedInstances = computed(() => {
+	const drag = activeInstanceGroupDrag.value
+	if (!drag) return []
+
+	const draggedInstanceIds = new Set(drag.instances.map((selection) => selection.instanceId))
+	return props.instances.filter((instance) => draggedInstanceIds.has(instance.id))
+})
+const draggedInstance = computed(() => {
+	const drag = activeInstanceGroupDrag.value
+	return drag
+		? props.instances.find((instance) => instance.id === drag.primaryInstanceId)
+		: undefined
+})
+const {
+	items: gatherItems,
+	target: gatherTarget,
+	isGathering,
+	start: startGather,
+	updateTarget: updateGatherTarget,
+	clear: clearGather,
+	finish: finishGather,
+} = useInstanceDragGather(toRef(props, 'instances'))
+
+const instanceGroupDragStatusPopover = ref<HTMLElement>()
+let statusPopoverFrame: number | undefined
+let groupHoverOpenTimeout: ReturnType<typeof setTimeout> | undefined
+
+const instanceGroupDragStatusStyle = computed(() => ({
+	left: `${Math.min(instanceGroupDragPointer.value.x + 4, window.innerWidth - 220)}px`,
+	top: `${Math.min(instanceGroupDragPointer.value.y + 4, window.innerHeight - 48)}px`,
+}))
+
+const hoveredCollapsedGroupId = computed(() => {
+	const target = instanceGroupDragTarget.value
+	if (
+		!activeInstanceGroupDrag.value ||
+		!target ||
+		!isSectionCollapsed(target) ||
+		!getInstanceGroupDropState(target).canDrop
+	) {
+		return null
+	}
+
+	return target
+})
+
+watch(
+	activeInstanceGroupDrag,
+	(drag) => {
+		if (statusPopoverFrame !== undefined) {
+			cancelAnimationFrame(statusPopoverFrame)
+			statusPopoverFrame = undefined
+		}
+
+		const popover = instanceGroupDragStatusPopover.value
+		if (!drag) {
+			if (popover?.matches(':popover-open')) {
+				popover.hidePopover()
+			}
+			return
+		}
+
+		statusPopoverFrame = requestAnimationFrame(() => {
+			statusPopoverFrame = undefined
+			const currentPopover = instanceGroupDragStatusPopover.value
+			if (activeInstanceGroupDrag.value && !currentPopover?.matches(':popover-open')) {
+				currentPopover?.showPopover()
+			}
+		})
+	},
+	{ flush: 'sync' },
+)
+
+function clearGroupHoverOpenTimeout() {
+	if (groupHoverOpenTimeout !== undefined) {
+		clearTimeout(groupHoverOpenTimeout)
+	}
+	groupHoverOpenTimeout = undefined
+}
+
+watch(hoveredCollapsedGroupId, (target) => {
+	clearGroupHoverOpenTimeout()
+	if (!target) return
+
+	groupHoverOpenTimeout = setTimeout(() => {
+		groupHoverOpenTimeout = undefined
+		if (hoveredCollapsedGroupId.value === target) {
+			setSectionCollapsed(target, false)
+		}
+	}, GROUP_HOVER_OPEN_DELAY)
+})
+
+onBeforeUnmount(() => {
+	if (statusPopoverFrame !== undefined) {
+		cancelAnimationFrame(statusPopoverFrame)
+	}
+	clearGroupHoverOpenTimeout()
+})
+
+function isAltKeyPressed(event?: Event) {
+	return event instanceof MouseEvent || event instanceof KeyboardEvent ? event.altKey : false
+}
+
+function handleDragStart(event: DragStartEvent) {
+	const sourceData = event.operation.source?.data as InstanceDragData | undefined
+	if (!sourceData) return
+
+	const pointer = event.operation.position.current
+	startInstanceGroupDrag(
+		sourceData.instanceId,
+		sourceData.fromGroup,
+		pointer,
+		isAltKeyPressed(event.nativeEvent),
+	)
+	startGather(activeInstanceGroupDrag.value, sourceData, pointer)
+}
+
+function handleDragMove(event: DragMoveEvent) {
+	const pointer = event.to ?? event.operation.position.current
+	updateInstanceGroupDrag(pointer, isAltKeyPressed(event.nativeEvent))
+	if (gatherItems.value.length > 0) {
+		updateGatherTarget(pointer)
+	}
+}
+
+function handleDragOver(event: DragOverEvent) {
+	const targetData = event.operation.target?.data as InstanceGroupDndDropData | undefined
+	setInstanceGroupDragTarget(targetData?.groupId ?? null)
+}
+
+async function handleDragEnd(event: DragEndEvent) {
+	clearGroupHoverOpenTimeout()
+	const targetData = event.operation.target?.data as InstanceGroupDndDropData | undefined
+	let isMovingInstances = false
+	if (!event.canceled && targetData) {
+		const dropState = getInstanceGroupDropState(targetData.groupId)
+		if (dropState.canDrop) {
+			void moveDraggedInstancesToGroup(targetData.groupId, dropState.operation === 'add')
+			isMovingInstances = true
+		}
+	}
+	if (isMovingInstances) {
+		await nextTick()
+	}
+
+	clearGather()
+	finishInstanceGroupDrag()
+}
+</script>
+
+<template>
+	<DragDropProvider
+		@drag-start="handleDragStart"
+		@drag-move="handleDragMove"
+		@drag-over="handleDragOver"
+		@drag-end="handleDragEnd"
+	>
+		<slot />
+		<Teleport to="body">
+			<div class="pointer-events-none fixed inset-0 z-[9999]">
+				<DragOverlay :drop-animation="null">
+					<div
+						v-if="draggedInstance"
+						class="w-full transition-all duration-150 ease-out"
+						:class="isGathering ? 'scale-[0.975]' : 'scale-100'"
+					>
+						<DragPreview :instance="draggedInstance" :count="draggedInstances.length" />
+					</div>
+				</DragOverlay>
+			</div>
+		</Teleport>
+	</DragDropProvider>
+	<DragGather
+		v-if="gatherItems.length > 0"
+		:items="gatherItems"
+		:target="gatherTarget"
+		@complete="finishGather"
+	/>
+	<Teleport to="body">
+		<div
+			ref="instanceGroupDragStatusPopover"
+			popover="manual"
+			class="pointer-events-none fixed inset-auto z-[9999] m-0 rounded-xl border border-solid border-surface-5 bg-surface-4 px-2 py-1.5 text-sm font-semibold text-contrast empty:hidden"
+			:style="instanceGroupDragStatusStyle"
+		>
+			{{ instanceGroupDragStatus }}
+		</div>
+	</Teleport>
+</template>

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<GameInstance[]>) {
+	const items = ref<InstanceDragGatherItem[]>([])
+	const target = ref<Point>({ x: 0, y: 0 })
+	const targetOffset = ref<Point>({ 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<HTMLElement>('[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,
+	}
+}

apps/app-frontend/src/components/ui/library/library-toolbar/filter-menu.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {
+	defineMessages,
+	DropdownFilterBar,
+	type DropdownFilterBarCategory,
+	formatLoader,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+import { useLibrary } from '@/components/ui/library/use-library'
+
+const { filters, instances } = useLibrary()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	instanceType: { id: 'app.library.filter.instance-type', defaultMessage: 'Instance type' },
+	modpack: { id: 'app.library.filter.instance-type.modpack', defaultMessage: 'Modpack' },
+	server: { id: 'app.library.filter.instance-type.server', defaultMessage: 'Server' },
+	custom: { id: 'app.library.filter.instance-type.custom', defaultMessage: 'Custom' },
+	gameVersion: { id: 'app.library.filter.game-version', defaultMessage: 'Game version' },
+	loader: { id: 'app.library.filter.loader', defaultMessage: 'Loader' },
+	filterBy: { id: 'app.library.filter.label', defaultMessage: 'Filter by' },
+	addFilter: { id: 'app.library.filter.add', defaultMessage: 'Add filter' },
+	clearFilters: { id: 'app.library.filter.clear', defaultMessage: 'Clear filters' },
+})
+
+const filterCategories = computed<DropdownFilterBarCategory[]>(() => [
+	{
+		key: 'instanceType',
+		label: formatMessage(messages.instanceType),
+		options: [
+			{ value: 'modpack', label: formatMessage(messages.modpack) },
+			{ value: 'server', label: formatMessage(messages.server) },
+			{ value: 'custom', label: formatMessage(messages.custom) },
+		],
+	},
+	{
+		key: 'gameVersion',
+		label: formatMessage(messages.gameVersion),
+		searchable: true,
+		options: [...new Set(instances.value.map((instance) => instance.game_version))]
+			.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
+			.map((version) => ({ value: version, label: version })),
+	},
+	{
+		key: 'loader',
+		label: formatMessage(messages.loader),
+		options: [...new Set(instances.value.map((instance) => instance.loader))]
+			.map((loader) => ({
+				value: loader,
+				label: formatLoader(formatMessage, loader),
+			}))
+			.sort((a, b) => a.label.localeCompare(b.label)),
+	},
+])
+</script>
+
+<template>
+	<DropdownFilterBar
+		v-model="filters"
+		:categories="filterCategories"
+		use-filter-icon
+		:label="formatMessage(messages.filterBy)"
+		:add-label="formatMessage(messages.addFilter)"
+		:clear-label="formatMessage(messages.clearFilters)"
+		apply-immediately
+		checkbox-position="right"
+	/>
+</template>

apps/app-frontend/src/components/ui/library/library-toolbar/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { PlusIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets'
+import { Button, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { computed, inject } from 'vue'
+
+import FilterMenu from '@/components/ui/library/library-toolbar/filter-menu.vue'
+import NewGroupModal from '@/components/ui/library/library-toolbar/new-group-modal.vue'
+import SortMenu from '@/components/ui/library/library-toolbar/sort-menu.vue'
+import { useLibrary } from '@/components/ui/library/use-library'
+
+const { search, selectedLibraryInstances, openNewGroupModal } = useLibrary()
+const showCreationModal = inject<() => void>('showCreationModal')
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	search: { id: 'app.library.search.placeholder', defaultMessage: 'Search' },
+	newGroup: { id: 'app.library.group.new', defaultMessage: 'New group' },
+	newInstance: { id: 'app.library.instance.new', defaultMessage: 'New instance' },
+})
+const selectedInstanceIds = computed(
+	() =>
+		new Set([...selectedLibraryInstances.value.values()].map((selection) => selection.instanceId)),
+)
+
+function openNewGroup() {
+	openNewGroupModal(selectedInstanceIds.value)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<StyledInput
+				v-model="search"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.search)"
+				clearable
+				wrapper-class="min-w-[16rem] flex-1"
+			/>
+			<Button @click="openNewGroup">
+				<SquarePlusIcon />
+				{{ formatMessage(messages.newGroup) }}
+			</Button>
+			<Button type="colored" color="brand" @click="showCreationModal?.()">
+				<PlusIcon />
+				{{ formatMessage(messages.newInstance) }}
+			</Button>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<SortMenu />
+			<div class="mx-2 h-6 w-px bg-surface-5" />
+			<FilterMenu />
+		</div>
+	</div>
+	<NewGroupModal />
+</template>

apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue

@@ -0,0 +1,177 @@
+<template>
+	<NewModal
+		ref="modal"
+		no-padding
+		scrollable
+		actions-divider
+		max-width="560px"
+		width="560px"
+		:on-hide="closeNewGroupModal"
+	>
+		<template #title>
+			<span class="text-2xl font-semibold text-contrast">
+				{{ formatMessage(messages.createGroup) }}
+			</span>
+		</template>
+
+		<div class="flex flex-col gap-2.5 p-6">
+			<label for="new-group-name" class="font-semibold text-contrast">
+				{{ formatMessage(messages.groupName) }}
+			</label>
+			<StyledInput
+				id="new-group-name"
+				ref="groupNameInput"
+				v-model="newGroupName"
+				:placeholder="formatMessage(messages.groupNamePlaceholder)"
+				:maxlength="MAX_INSTANCE_GROUP_NAME_LENGTH"
+				@click="groupNameInput?.select()"
+			/>
+		</div>
+
+		<div class="h-px bg-divider" />
+
+		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
+			<div class="px-6">
+				<StyledInput
+					v-model="newGroupSearch"
+					:icon="SearchIcon"
+					:placeholder="formatMessage(messages.searchInstance)"
+					class="w-full"
+				/>
+			</div>
+
+			<div
+				v-if="newGroupInstances.length === 0"
+				class="flex items-center justify-center py-12 text-secondary"
+			>
+				{{ formatMessage(messages.noInstancesFound) }}
+			</div>
+			<div v-else class="flex flex-col gap-1">
+				<div
+					v-for="instance in newGroupInstances"
+					:key="instance.id"
+					class="flex items-center justify-between gap-4 px-6 py-1.5 hover:bg-surface-3"
+					:class="{ 'opacity-60': selectedNewGroupInstanceIds.has(instance.id) }"
+				>
+					<div class="flex min-w-0 items-center gap-2.5">
+						<Avatar
+							:src="getInstanceIconUrl(instance.icon_path)"
+							:tint-by="instance.id"
+							:alt="instance.name"
+							size="2rem"
+							rounded="md"
+						/>
+						<div class="flex min-w-0 items-center gap-2">
+							<span class="truncate font-semibold text-contrast">{{ instance.name }}</span>
+							<TagItem v-if="instance.group_ids[0]" class="shrink-0">
+								{{
+									groupNamesById.get(instance.group_ids[0]) ?? formatMessage(messages.unknownGroup)
+								}}
+							</TagItem>
+						</div>
+					</div>
+					<Button
+						:type="selectedNewGroupInstanceIds.has(instance.id) ? 'outlined' : 'base'"
+						@click="toggleNewGroupInstance(instance.id)"
+					>
+						<CheckIcon v-if="selectedNewGroupInstanceIds.has(instance.id)" />
+						{{
+							formatMessage(
+								selectedNewGroupInstanceIds.has(instance.id) ? messages.added : messages.add,
+							)
+						}}
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex items-center justify-end gap-2">
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(messages.cancel) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!canCreateGroup" @click="handleCreateGroup">
+					<SpinnerIcon v-if="creatingGroup" class="animate-spin" />
+					<PlusIcon v-else />
+					{{ formatMessage(messages.createGroup) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	defineMessages,
+	NewModal,
+	StyledInput,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import { useLibrary } from '@/components/ui/library/use-library'
+import { getInstanceIconUrl } from '@/helpers/instance'
+import { MAX_INSTANCE_GROUP_NAME_LENGTH } from '@/helpers/instance-groups'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	createGroup: { id: 'app.library.group.create', defaultMessage: 'Create group' },
+	groupName: { id: 'app.library.group.name', defaultMessage: 'Group name' },
+	groupNamePlaceholder: {
+		id: 'app.library.group.name-placeholder',
+		defaultMessage: 'Enter group name',
+	},
+	searchInstance: {
+		id: 'app.library.group.search-instance',
+		defaultMessage: 'Search instance',
+	},
+	noInstancesFound: {
+		id: 'app.library.group.no-instances-found',
+		defaultMessage: 'No instances found',
+	},
+	unknownGroup: { id: 'app.library.group.unknown', defaultMessage: 'Unknown group' },
+	add: { id: 'app.library.group.instance.add', defaultMessage: 'Add' },
+	added: { id: 'app.library.group.instance.added', defaultMessage: 'Added' },
+	cancel: { id: 'app.library.group.create.cancel', defaultMessage: 'Cancel' },
+})
+
+const {
+	isNewGroupModalOpen,
+	libraryGroups,
+	newGroupName,
+	newGroupSearch,
+	selectedNewGroupInstanceIds,
+	creatingGroup,
+	newGroupInstances,
+	canCreateGroup,
+	closeNewGroupModal,
+	toggleNewGroupInstance,
+	createGroup,
+	clearLibraryInstanceSelection,
+} = useLibrary()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const groupNameInput = ref<InstanceType<typeof StyledInput>>()
+const groupNamesById = computed(
+	() => new Map(libraryGroups.value.map((group) => [group.id, group.name])),
+)
+
+watch(isNewGroupModalOpen, (open) => {
+	if (open) {
+		modal.value?.show()
+	}
+})
+
+async function handleCreateGroup() {
+	if (await createGroup()) {
+		clearLibraryInstanceSelection()
+		modal.value?.hide()
+	}
+}
+</script>

apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ArrowUpDownIcon, LayoutGridIcon } from '@modrinth/assets'
+import { Combobox, type ComboboxOption, defineMessages, useVIntl } from '@modrinth/ui'
+
+import {
+	type LibraryGroupBy,
+	libraryGroupOptions,
+	type LibrarySort,
+	librarySortOptions,
+	useLibrary,
+} from '@/components/ui/library/use-library'
+
+const { displayState } = useLibrary()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	name: { id: 'app.library.sort.name', defaultMessage: 'Name' },
+	lastPlayed: { id: 'app.library.sort.last-played', defaultMessage: 'Last played' },
+	hoursPlayed: { id: 'app.library.sort.hours-played', defaultMessage: 'Hours played' },
+	dateCreated: { id: 'app.library.sort.date-created', defaultMessage: 'Date created' },
+	dateModified: { id: 'app.library.sort.date-modified', defaultMessage: 'Date modified' },
+	customGroup: { id: 'app.library.group-by.custom-group', defaultMessage: 'Custom group' },
+	instanceType: { id: 'app.library.group-by.instance-type', defaultMessage: 'Instance type' },
+	loader: { id: 'app.library.group-by.loader', defaultMessage: 'Loader' },
+	gameVersion: { id: 'app.library.group-by.game-version', defaultMessage: 'Game version' },
+	noGrouping: { id: 'app.library.group-by.none', defaultMessage: 'No grouping' },
+	sortBy: { id: 'app.library.sort.label', defaultMessage: 'Sort by' },
+	groupBy: { id: 'app.library.group-by.label', defaultMessage: 'Group by' },
+})
+
+const sortLabels = {
+	Name: messages.name,
+	'Last played': messages.lastPlayed,
+	'Hours played': messages.hoursPlayed,
+	'Date created': messages.dateCreated,
+	'Date modified': messages.dateModified,
+}
+
+const groupLabels = {
+	Group: messages.customGroup,
+	'Instance type': messages.instanceType,
+	Loader: messages.loader,
+	'Game version': messages.gameVersion,
+	None: messages.noGrouping,
+}
+
+const sortOptions: ComboboxOption<LibrarySort>[] = librarySortOptions.map((option) => ({
+	value: option,
+	label: formatMessage(sortLabels[option]),
+}))
+const groupOptions: ComboboxOption<LibraryGroupBy>[] = libraryGroupOptions.map((option) => ({
+	value: option.value,
+	label: formatMessage(groupLabels[option.value]),
+}))
+</script>
+
+<template>
+	<Combobox
+		v-model="displayState.sortBy"
+		class="w-max"
+		:options="sortOptions"
+		:show-icon-in-selected="false"
+		dropdown-min-width="160px"
+	>
+		<template #prefix>
+			<ArrowUpDownIcon class="size-5 text-primary" :aria-label="formatMessage(messages.sortBy)" />
+		</template>
+		<template #selected="{ label }">
+			<span>{{ label }}</span>
+		</template>
+	</Combobox>
+	<Combobox
+		v-model="displayState.group"
+		class="w-max"
+		:options="groupOptions"
+		dropdown-min-width="160px"
+		:show-icon-in-selected="false"
+	>
+		<template #prefix>
+			<LayoutGridIcon class="size-5 text-primary" :aria-label="formatMessage(messages.groupBy)" />
+		</template>
+		<template #selected="{ label }">
+			<span>{{ label }}</span>
+		</template>
+	</Combobox>
+</template>