From f253d5529bc3bd21adb4c37c57fde7d381d0e631 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 11 Oct 2026 07:54:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E4=BE=8B=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=89=8D=E7=AB=AF=EF=BC=88=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=20UI=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移植 Axolotl 的拖拽式实例分组界面到 Starlight，接入阶段1的规范化分组后端：

- 新增 helpers/analytics.ts（trackEvent 遥测桩）
- 补全 helpers/instance-groups.ts（6 个 invoke 包装）
- 新增 composables/useInstanceGroups.ts（分组状态 + 事件监听）
- 升级 composables/useGridGrouping.ts（排序方向 isSortAscending/toggleSortDirection）
- helpers/events.js 补 instance_groups_listener（对接 instance_groups_changed 事件）
- 新增 components/ui/library/DraggableInstanceCard.vue
- 新增 components/ui/library/InstanceGroup.vue（并补 group-drag-handle 修复组拖拽重排）
- 新增 components/ui/modal/InstanceGroupModal.vue
- GridDisplay.vue 替换为 Axolotl 拖拽版（DragDropProvider + vuedraggable）
- 补 en-US/zh-CN i18n 键各 39 条
---
 .../src/components/GridDisplay.vue            | 1117 ++++++++++++-----
 .../ui/library/DraggableInstanceCard.vue      |   92 ++
 .../components/ui/library/InstanceGroup.vue   |  521 ++++++++
 .../ui/modal/InstanceGroupModal.vue           |  313 +++++
 .../src/composables/useGridGrouping.ts        |   70 +-
 .../src/composables/useInstanceGroups.ts      |  182 +++
 apps/app-frontend/src/helpers/analytics.ts    |   75 ++
 apps/app-frontend/src/helpers/events.js       |   10 +
 .../src/helpers/instance-groups.ts            |   47 +-
 .../app-frontend/src/locales/en-US/index.json |   43 +-
 .../app-frontend/src/locales/zh-CN/index.json |   41 +-
 11 files changed, 2214 insertions(+), 297 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/library/DraggableInstanceCard.vue
 create mode 100644 apps/app-frontend/src/components/ui/library/InstanceGroup.vue
 create mode 100644 apps/app-frontend/src/components/ui/modal/InstanceGroupModal.vue
 create mode 100644 apps/app-frontend/src/composables/useInstanceGroups.ts
 create mode 100644 apps/app-frontend/src/helpers/analytics.ts

diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue
index 63b7b55..93c8df0 100644
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -1,26 +1,31 @@
-<script setup>
+<script setup lang="ts">
+import { DragDropProvider } from '@dnd-kit/vue'
 import {
+	ArrowUpDownIcon,
 	ClipboardCopyIcon,
 	CollectionIcon,
 	EyeIcon,
 	FolderOpenIcon,
 	GridIcon,
+	LayersIcon,
+	MinusIcon,
 	MoreVerticalIcon,
 	PinIcon,
 	PlayIcon,
 	PlusIcon,
 	SearchIcon,
+	SortAscIcon,
+	SortDescIcon,
+	StarIcon,
 	StopCircleIcon,
 	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Accordion,
-	ButtonStyled,
-	Checkbox,
+	Button,
+	Combobox,
 	commonMessages,
 	defineMessages,
-	DropdownSelect,
 	FloatingActionBar,
 	formatLoader,
 	injectNotificationManager,
@@ -28,29 +33,45 @@ import {
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import Draggable from 'vuedraggable'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import Instance from '@/components/ui/Instance.vue'
-import BatchEditGroupsModal from '@/components/ui/modal/BatchEditGroupsModal.vue'
+import InstanceGroup from '@/components/ui/library/InstanceGroup.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import InstanceGroupModal from '@/components/ui/modal/InstanceGroupModal.vue'
 import { UNGROUPED_GROUP_KEY, useGridGrouping } from '@/composables/useGridGrouping'
+import { FAVORITES_GROUP_ID, useInstanceGroups } from '@/composables/useInstanceGroups'
+import { trackEvent } from '@/helpers/analytics'
 import { install_duplicate_instance } from '@/helpers/install'
-import { remove, set_pinned } from '@/helpers/instance'
+import { kill, remove, run, set_pinned } from '@/helpers/instance'
+import { create_group as createGroup } from '@/helpers/instance-groups'
 import {
 	getLastLibraryDisplayMode,
 	setLastLibraryDisplayMode,
 } from '@/helpers/library-display-mode'
+import type { GameInstance } from '@/helpers/types'
+import { showInstanceInFolder } from '@/helpers/utils.js'
 
 const { handleError } = injectNotificationManager()
 
 const { formatMessage } = useVIntl()
+const router = useRouter()
 
 const messages = defineMessages({
 	search: { id: 'app.instances.search', defaultMessage: 'Search' },
 	select: { id: 'app.instances.select', defaultMessage: 'Select...' },
-	groupBy: { id: 'app.instances.group-by', defaultMessage: 'Group by:' },
+	groupBy: { id: 'app.instances.group-by', defaultMessage: 'Group by' },
 	addContent: { id: 'app.instances.add-content', defaultMessage: 'Add content' },
+	createInstance: {
+		id: 'app.library.create-instance',
+		defaultMessage: 'Create new instance',
+	},
+	newGroup: {
+		id: 'app.library.group.new',
+		defaultMessage: 'New group',
+	},
 	viewInstance: { id: 'app.instances.view-instance', defaultMessage: 'View instance' },
 	duplicateInstance: {
 		id: 'app.instances.duplicate-instance',
@@ -64,9 +85,9 @@ const messages = defineMessages({
 	dateCreated: { id: 'app.instances.sort.date-created', defaultMessage: 'Date created' },
 	dateModified: { id: 'app.instances.sort.date-modified', defaultMessage: 'Date modified' },
 	gameVersion: { id: 'app.instances.group.game-version', defaultMessage: 'Game version' },
-	group: { id: 'app.instances.group.group', defaultMessage: 'Group' },
+	group: { id: 'app.instances.group.group', defaultMessage: 'Custom group' },
 	loader: { id: 'app.instances.group.loader', defaultMessage: 'Loader' },
-	none: { id: 'app.instances.group.none', defaultMessage: 'None' },
+	none: { id: 'app.instances.group.none', defaultMessage: 'No grouping' },
 	ungrouped: { id: 'app.instances.group.ungrouped', defaultMessage: 'No group' },
 	editGroups: { id: 'app.instances.edit-groups', defaultMessage: 'Edit groups' },
 	selectAll: { id: 'app.instances.select-all', defaultMessage: 'Select all' },
@@ -78,6 +99,59 @@ const messages = defineMessages({
 	view: { id: 'app.library.view', defaultMessage: 'View' },
 	standardView: { id: 'app.library.view.standard', defaultMessage: 'Standard grid' },
 	cardsView: { id: 'app.library.view.cards', defaultMessage: 'Library cards' },
+	sortBy: { id: 'app.instances.sort-by', defaultMessage: 'Sort by' },
+	ascAlphabetical: {
+		id: 'app.instances.sort.direction.asc-alphabetical',
+		defaultMessage: 'A–Z',
+	},
+	descAlphabetical: {
+		id: 'app.instances.sort.direction.desc-alphabetical',
+		defaultMessage: 'Z–A',
+	},
+	ascVersion: {
+		id: 'app.instances.sort.direction.asc-version',
+		defaultMessage: 'Oldest version first',
+	},
+	descVersion: {
+		id: 'app.instances.sort.direction.desc-version',
+		defaultMessage: 'Newest version first',
+	},
+	ascRecency: {
+		id: 'app.instances.sort.direction.asc-recency',
+		defaultMessage: 'Least recent first',
+	},
+	descRecency: {
+		id: 'app.instances.sort.direction.desc-recency',
+		defaultMessage: 'Most recent first',
+	},
+	newGroupFromSelection: {
+		id: 'app.library.selection.new-group',
+		defaultMessage: 'New group',
+	},
+	removeFromGroup: {
+		id: 'app.library.selection.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+	addToPinned: {
+		id: 'app.library.context-menu.pin-instance',
+		defaultMessage: 'Pin instance',
+	},
+	removeFromPinned: {
+		id: 'app.library.context-menu.unpin-instance',
+		defaultMessage: 'Unpin instance',
+	},
+	removeFromContextMenu: {
+		id: 'app.library.context-menu.remove-from-group',
+		defaultMessage: 'Remove from group',
+	},
+	ascDate: {
+		id: 'app.instances.sort.direction.asc-date',
+		defaultMessage: 'Oldest first',
+	},
+	descDate: {
+		id: 'app.instances.sort.direction.desc-date',
+		defaultMessage: 'Newest first',
+	},
 })
 
 const optionMessages = {
@@ -94,27 +168,155 @@ const optionMessages = {
 const formatOption = (option) =>
 	optionMessages[option] ? formatMessage(optionMessages[option]) : option
 
-const props = defineProps({
-	instances: {
-		type: Array,
-		default() {
-			return []
-		},
+const props = withDefaults(
+	defineProps<{
+		instances?: GameInstance[]
+		label?: string
+	}>(),
+	{
+		instances: () => [],
+		label: '',
 	},
-	label: {
-		type: String,
-		default: '',
-	},
-})
+)
 
 const instanceOptions = ref(null)
-const instanceComponents = ref(null)
+const backgroundContextMenu = ref(null)
 const currentDeleteInstance = ref(null)
+const currentContextSectionKey = ref('')
 const batchDeleteCount = ref(0)
 const confirmModal = ref(null)
 const search = ref('')
 const displayMode = ref(getLastLibraryDisplayMode())
 
+function removeGroup(groupKey: string) {
+	if (groupKey === FAVORITES_GROUP_ID) return
+	deleteGroupById(groupKey).catch(handleError)
+}
+
+function handleRenameGroup(oldKey: string, newKey: string) {
+	if (oldKey === FAVORITES_GROUP_ID) return
+	renameGroupById(oldKey, newKey).catch(handleError)
+}
+
+function canMoveGroupUp(groupKey: string) {
+	if (grouping.value !== 'Group' || groupKey === FAVORITES_GROUP_ID) return false
+	const idx = draggableSections.value.findIndex((s) => s.key === groupKey)
+	return idx > 0 && orderedLibraryGroupIds.value.length > 1
+}
+
+function canMoveGroupDown(groupKey: string) {
+	if (grouping.value !== 'Group' || groupKey === FAVORITES_GROUP_ID) return false
+	const idx = draggableSections.value.findIndex((s) => s.key === groupKey)
+	return idx >= 0 && idx < draggableSections.value.length - 1
+}
+
+function handleMoveGroup(groupKey: string, direction: -1 | 1) {
+	if (grouping.value !== 'Group') return
+	const sections = [...draggableSections.value]
+	const idx = sections.findIndex((s) => s.key === groupKey)
+	if (idx < 0) return
+	const newIdx = idx + direction
+	if (newIdx < 0 || newIdx >= sections.length) return
+	const [item] = sections.splice(idx, 1)
+	sections.splice(newIdx, 0, item)
+	draggableSections.value = sections
+	onGroupReorder()
+	reorderGroups(
+		draggableSections.value
+			.map((s) => s.key)
+			.filter((key) => key !== UNGROUPED_GROUP_KEY && key !== FAVORITES_GROUP_ID),
+	).catch(handleError)
+}
+
+const addToExistingGroupModal = ref(null)
+const addToExistingGroupName = ref('')
+const addToExistingGroupId = ref('')
+
+function handleAddToGroup(groupKey: string) {
+	const group = libraryGroups.value.find((g) => g.id === groupKey)
+	addToExistingGroupName.value = group?.name || groupKey
+	addToExistingGroupId.value = groupKey
+	addToExistingGroupModal.value?.show()
+}
+
+const handleNewInstance = () => {
+	router.push('/create')
+}
+
+function clearLibraryInstanceSelection() {
+	selectedInstanceIds.value.clear()
+	selectMode.value = false
+	anchorInstanceId.value = null
+}
+
+function createGroupFromSelection() {
+	if (busy.value) return
+
+	const instanceIds = [...selectedInstanceIds.value]
+	clearLibraryInstanceSelection()
+
+	let groupNumber = libraryGroups.value.filter((g) => g.id !== FAVORITES_GROUP_ID).length + 1
+	const existingNames = new Set(libraryGroups.value.map((g) => g.name.toLowerCase()))
+	while (existingNames.has(`group ${groupNumber}`)) {
+		groupNumber++
+	}
+	const groupName = `Group ${groupNumber}`
+
+	createGroup(groupName)
+		.then((group) => {
+			const updates = instanceIds.map((instanceId) => {
+				return {
+					instance_id: instanceId,
+					group_ids: [group.id],
+				}
+			})
+			return setMemberships(updates).then(() => group)
+		})
+		.then((group) => {
+			state.value.group = 'Group'
+			groupPendingNameEdit.value = group.id
+		})
+		.catch(handleError)
+}
+
+const busy = computed(
+	() => creatingGroup.value || removingFromGroup.value || deletingInstances.value,
+)
+
+const selectedGroupedInstances = computed(() => {
+	if (grouping.value !== 'Group') return []
+	return props.instances.filter(
+		(i) =>
+			selectedInstanceIds.value.has(i.id) &&
+			(i.groups || []).length > 0 &&
+			!(i.groups || []).includes(UNGROUPED_GROUP_KEY),
+	)
+})
+
+async function removeSelectedInstancesFromGroups() {
+	if (busy.value || selectedGroupedInstances.value.length === 0) return
+
+	removingFromGroup.value = true
+	try {
+		const updates = [...selectedInstanceIds.value].map((instanceId) => ({
+			instance_id: instanceId,
+			group_ids: [],
+		}))
+		await setMemberships(updates)
+		clearLibraryInstanceSelection()
+	} catch (err) {
+		handleError(err)
+	} finally {
+		removingFromGroup.value = false
+	}
+}
+
+const newGroupModal = ref(null)
+
+function openNewGroupModal() {
+	newGroupModal.value?.show([...selectedInstanceIds.value])
+}
+
 const displayModeOptions = computed(() => [
 	{ id: 'standard', label: formatMessage(messages.standardView), icon: GridIcon },
 	{ id: 'cards', label: formatMessage(messages.cardsView), icon: CollectionIcon },
@@ -135,16 +337,168 @@ const filteredInstances = computed(() =>
 	),
 )
 
-const { state, grouping, filteredResults, isSectionCollapsed, setSectionCollapsed } =
-	useGridGrouping(props.label, filteredInstances, {
-		formatLoader: (loader) => formatLoader(formatMessage, loader),
-	})
+const {
+	state,
+	grouping,
+	filteredResults,
+	isSectionCollapsed,
+	setSectionCollapsed,
+	isSortAscending,
+	toggleSortDirection,
+} = useGridGrouping(props.label, filteredInstances, {
+	formatLoader: (loader) => formatLoader(formatMessage, loader),
+})
+
+const {
+	libraryGroups,
+	orderedLibraryGroupIds,
+	renameGroupById,
+	deleteGroupById,
+	reorderGroups,
+	setMemberships,
+} = useInstanceGroups(filteredInstances)
+
+const groupPendingNameEdit = ref<string | null>(null)
+
+const groupStableIds = ref(new Map<string, string>())
+let groupStableIdCounter = 0
+
+const groupNameMap = computed(() => {
+	const map = new Map<string, string>()
+	for (const group of libraryGroups.value) {
+		map.set(group.id, group.name)
+	}
+	return map
+})
+
+function generateGroupStableId(): string {
+	return `gid_${++groupStableIdCounter}`
+}
+
+function getOrCreateGroupStableId(key: string): string {
+	if (groupStableIds.value.has(key)) {
+		return groupStableIds.value.get(key)!
+	}
+	const id = generateGroupStableId()
+	const newMap = new Map(groupStableIds.value)
+	newMap.set(key, id)
+	groupStableIds.value = newMap
+	return id
+}
+
+type DisplaySection = { id: string; key: string; instances: typeof props.instances }
+
+const displaySections = computed(() => {
+	const resultMap = new Map(filteredResults.value)
+	const result: DisplaySection[] = []
+
+	if (state.value.group === 'Group') {
+		if (resultMap.has(UNGROUPED_GROUP_KEY)) {
+			result.push({
+				id: getOrCreateGroupStableId(UNGROUPED_GROUP_KEY),
+				key: UNGROUPED_GROUP_KEY,
+				instances: resultMap.get(UNGROUPED_GROUP_KEY)!,
+			})
+			resultMap.delete(UNGROUPED_GROUP_KEY)
+		}
+
+		for (const key of orderedLibraryGroupIds.value) {
+			if (key === FAVORITES_GROUP_ID) {
+				resultMap.delete(key)
+				continue
+			}
+			if (resultMap.has(key)) {
+				result.push({
+					id: getOrCreateGroupStableId(key),
+					key,
+					instances: resultMap.get(key)!,
+				})
+				resultMap.delete(key)
+			} else if (libraryGroups.value.some((g) => g.id === key)) {
+				result.push({
+					id: getOrCreateGroupStableId(key),
+					key,
+					instances: [] as typeof props.instances,
+				})
+			}
+		}
+
+		const remaining = Array.from(resultMap.entries()).sort((a, b) => a[0].localeCompare(b[0]))
+		for (const [key, instances] of remaining) {
+			result.push({ id: getOrCreateGroupStableId(key), key, instances })
+		}
+	} else {
+		const remaining = Array.from(resultMap.entries())
+		if (state.value.group === 'Game version') {
+			remaining.sort((a, b) => a[0].localeCompare(b[0], undefined, { numeric: true }))
+		} else {
+			remaining.sort((a, b) => a[0].localeCompare(b[0]))
+		}
+
+		for (const [key, instances] of remaining) {
+			result.push({ id: getOrCreateGroupStableId(key), key, instances })
+		}
+	}
+
+	return result
+})
+
+const pinnedSection = computed(() => {
+	if (state.value.group !== 'Group') return null
+	const instances = filteredResults.value.get(FAVORITES_GROUP_ID)
+	if (!instances || instances.length === 0) return null
+	return {
+		id: getOrCreateGroupStableId(FAVORITES_GROUP_ID),
+		key: FAVORITES_GROUP_ID,
+		instances,
+	}
+})
+
+const draggableSections = shallowRef<DisplaySection[]>([])
+
+const hideUngroupedHeader = computed(() => {
+	if (grouping.value !== 'Group') return false
+	return !draggableSections.value.some((s) => s.key !== UNGROUPED_GROUP_KEY)
+})
+
+const flatVisibleInstanceIds = computed(() => {
+	const ids: string[] = []
+	if (pinnedSection.value) {
+		for (const inst of pinnedSection.value.instances) {
+			ids.push(inst.id)
+		}
+	}
+	for (const section of draggableSections.value) {
+		for (const inst of section.instances) {
+			ids.push(inst.id)
+		}
+	}
+	return ids
+})
+
+watch(
+	displaySections,
+	(sections) => {
+		draggableSections.value = sections
+	},
+	{ immediate: true },
+)
+
+const sortDirectionLabels = {
+	Name: { asc: messages.ascAlphabetical, desc: messages.descAlphabetical },
+	'Game version': { asc: messages.ascVersion, desc: messages.descVersion },
+	'Last played': { asc: messages.ascRecency, desc: messages.descRecency },
+	'Date created': { asc: messages.ascDate, desc: messages.descDate },
+	'Date modified': { asc: messages.ascDate, desc: messages.descDate },
+}
+
+const sortDirectionLabel = computed(() => {
+	const labels = sortDirectionLabels[state.value.sortBy] ?? sortDirectionLabels['Name']
+	return formatMessage(isSortAscending.value ? labels.asc : labels.desc)
+})
 
 async function deleteInstance() {
 	if (currentDeleteInstance.value) {
-		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.id !== currentDeleteInstance.value.id,
-		)
 		await remove(currentDeleteInstance.value.id).catch(handleError)
 	}
 	batchDeleteCount.value = 0
@@ -154,17 +508,62 @@ async function duplicateInstance(p) {
 	await install_duplicate_instance(p).catch(handleError)
 }
 
-const handleRightClick = (event, instanceId) => {
-	const item = instanceComponents.value.find((x) => x.instance.id === instanceId)
+function getInstanceProxy(instanceId) {
+	const instanceData = props.instances.find((i) => i.id === instanceId)
+	if (!instanceData) return null
+	return {
+		instance: instanceData,
+		playing: undefined,
+		play: (_e, context) =>
+			run(instanceId).finally(() => {
+				trackEvent('InstanceStart', {
+					loader: instanceData.loader,
+					game_version: instanceData.game_version,
+					source: context,
+				})
+			}),
+		stop: (_e, context) =>
+			kill(instanceId).finally(() => {
+				trackEvent('InstanceStop', {
+					loader: instanceData.loader,
+					game_version: instanceData.game_version,
+					source: context,
+				})
+			}),
+		seeInstance: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+		openFolder: () => showInstanceInFolder(instanceId),
+		addContent: () =>
+			router.push({
+				path: `/browse/${instanceData.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+				query: { i: instanceId },
+			}),
+	}
+}
+
+const handleRightClick = (event, instanceId, sectionKey) => {
+	const item = getInstanceProxy(instanceId)
+	if (!item) return
+	currentContextSectionKey.value = sectionKey
+	const isInCustomGroup =
+		grouping.value === 'Group' &&
+		sectionKey !== UNGROUPED_GROUP_KEY &&
+		sectionKey !== FAVORITES_GROUP_ID
 	const baseOptions = [
-		{ name: 'add_content' },
+		{
+			name: item.instance.groups?.includes(FAVORITES_GROUP_ID)
+				? 'remove_from_pinned'
+				: 'add_to_pinned',
+		},
 		{ type: 'divider' },
+		{ name: 'add_content' },
 		{ name: 'edit' },
 		{ name: 'duplicate' },
 		{ name: item.instance.pinned_at ? 'unpin' : 'pin' },
 		{ name: 'open' },
 		{ name: 'copy' },
-		{ type: 'divider' },
+		...(isInCustomGroup
+			? [{ name: 'remove_from_group' }, { type: 'divider' }]
+			: [{ type: 'divider' }]),
 		{
 			name: 'delete',
 			color: 'danger',
@@ -192,6 +591,22 @@ const handleRightClick = (event, instanceId) => {
 	)
 }
 
+const handleBackgroundContextMenu = (event: MouseEvent) => {
+	if (
+		event.target instanceof HTMLElement &&
+		(event.target.isContentEditable || event.target.matches('input, textarea, select'))
+	)
+		return
+	event.preventDefault()
+	backgroundContextMenu.value?.showMenu(event, null, [{ name: 'create_instance' }])
+}
+
+const handleBackgroundOption = ({ option }: { option: string }) => {
+	if (option === 'create_instance') {
+		handleNewInstance()
+	}
+}
+
 const handleOptionsClick = async (args) => {
 	switch (args.option) {
 		case 'play':
@@ -222,6 +637,30 @@ const handleOptionsClick = async (args) => {
 		case 'copy':
 			await navigator.clipboard.writeText(args.item.instance.id)
 			break
+		case 'add_to_pinned':
+			await setMemberships([
+				{
+					instance_id: args.item.instance.id,
+					group_ids: [FAVORITES_GROUP_ID],
+				},
+			]).catch(handleError)
+			break
+		case 'remove_from_pinned':
+			await setMemberships([
+				{
+					instance_id: args.item.instance.id,
+					group_ids: [],
+				},
+			]).catch(handleError)
+			break
+		case 'remove_from_group':
+			await setMemberships([
+				{
+					instance_id: args.item.instance.id,
+					group_ids: [],
+				},
+			]).catch(handleError)
+			break
 		case 'delete':
 			currentDeleteInstance.value = args.item.instance
 			confirmModal.value.show()
@@ -232,6 +671,10 @@ const handleOptionsClick = async (args) => {
 // Selection mode
 const selectMode = ref(false)
 const selectedInstanceIds = ref(new Set())
+const anchorInstanceId = ref<string | null>(null)
+const creatingGroup = ref(false)
+const removingFromGroup = ref(false)
+const deletingInstances = ref(false)
 const batchEditModal = ref(null)
 
 let longPressTimer = null
@@ -255,21 +698,56 @@ function cancelLongPress() {
 	}
 }
 
-function handleCardClick(instanceId, _event) {
+function handleCardClick(instanceId, event) {
 	if (longPressTriggered) {
 		longPressTriggered = false
 		return
 	}
-	if (selectMode.value) {
-		toggleInstanceSelection(instanceId)
+	const shiftKey = event?.shiftKey ?? false
+	if (selectMode.value || shiftKey) {
+		if (!selectMode.value) {
+			selectMode.value = true
+		}
+		handleToggleInstance(instanceId, shiftKey)
 	}
 }
 
-function toggleSelectMode() {
-	selectMode.value = !selectMode.value
-	if (!selectMode.value) {
-		selectedInstanceIds.value.clear()
+function handleToggleInstance(instanceId, shiftKey) {
+	const flatIds = flatVisibleInstanceIds.value
+	const anchor = anchorInstanceId.value
+
+	if (shiftKey && anchor && flatIds.length) {
+		const anchorIndex = flatIds.indexOf(anchor)
+		const targetIndex = flatIds.indexOf(instanceId)
+
+		if (anchorIndex === -1 || targetIndex === -1) {
+			toggleInstanceSelection(instanceId)
+			return
+		}
+
+		const start = Math.min(anchorIndex, targetIndex)
+		const end = Math.max(anchorIndex, targetIndex)
+		const range = flatIds.slice(start, end + 1)
+		const newSet = new Set(selectedInstanceIds.value)
+
+		if (newSet.has(instanceId)) {
+			for (const id of range) {
+				newSet.delete(id)
+			}
+		} else {
+			for (const id of range) {
+				newSet.add(id)
+			}
+		}
+
+		selectedInstanceIds.value = newSet
+		if (newSet.size === 0) selectMode.value = false
+		anchorInstanceId.value = null
+		return
 	}
+
+	toggleInstanceSelection(instanceId)
+	anchorInstanceId.value = selectedInstanceIds.value.has(instanceId) ? instanceId : null
 }
 
 function toggleInstanceSelection(instanceId) {
@@ -285,273 +763,350 @@ function toggleInstanceSelection(instanceId) {
 	}
 }
 
-function handleCheckboxClick(instanceId) {
+function handleCheckboxClick(instanceId, event) {
 	if (!selectMode.value) {
 		selectMode.value = true
 	}
-	toggleInstanceSelection(instanceId)
-}
-
-function openBatchEdit() {
-	batchEditModal.value?.show()
+	const shiftKey = event?.shiftKey ?? false
+	handleToggleInstance(instanceId, shiftKey)
 }
 
 const batchDeleteConfirmModal = ref(null)
 
-function openBatchDelete() {
-	batchDeleteCount.value = selectedInstanceIds.value.size
-	batchDeleteConfirmModal.value?.show()
-}
-
 async function batchDeleteInstances() {
 	for (const id of selectedInstanceIds.value) {
-		instanceComponents.value = instanceComponents.value.filter((x) => x.instance.id !== id)
 		await remove(id).catch(handleError)
 	}
 	selectedInstanceIds.value.clear()
 	selectMode.value = false
 }
 
-const visibleInstanceIds = computed(() => {
-	const ids = []
-	for (const section of Array.from(filteredResults.value, ([, value]) => value)) {
-		for (const instance of section) {
-			ids.push(instance.id)
-		}
-	}
-	return ids
-})
-
-const isAllSelected = computed(() => {
-	const visibleIds = visibleInstanceIds.value
-	return visibleIds.length > 0 && visibleIds.every((id) => selectedInstanceIds.value.has(id))
-})
-
-function toggleSelectAll() {
-	const visibleIds = visibleInstanceIds.value
-	if (isAllSelected.value) {
-		const newSet = new Set(selectedInstanceIds.value)
-		for (const id of visibleIds) {
-			newSet.delete(id)
-		}
-		selectedInstanceIds.value = newSet
-	} else {
-		const newSet = new Set(selectedInstanceIds.value)
-		for (const id of visibleIds) {
-			newSet.add(id)
-		}
-		selectedInstanceIds.value = newSet
-	}
-}
-
 function onBatchEditApplied() {
 	selectedInstanceIds.value.clear()
 	selectMode.value = false
 }
+
+function onGroupReorder() {
+	if (grouping.value !== 'Group') return
+	const groupIds = draggableSections.value
+		.map((s) => s.key)
+		.filter((key) => key !== UNGROUPED_GROUP_KEY)
+	reorderGroups(groupIds).catch(handleError)
+}
+
+type InstanceDragData = { instanceId: string; fromGroup: string }
+type InstanceGroupDropData = { groupId: string }
+
+async function handleInstanceDragEnd(event: {
+	operation: { source?: { data?: unknown }; target?: { data?: unknown } }
+}) {
+	const sourceData = event.operation.source?.data as InstanceDragData | undefined
+	const targetData = event.operation.target?.data as InstanceGroupDropData | undefined
+	if (!sourceData || !targetData) return
+	if (sourceData.fromGroup === targetData.groupId) return
+
+	const instance = props.instances.find((i: GameInstance) => i.id === sourceData.instanceId)
+	if (!instance) return
+
+	const newGroups = targetData.groupId === UNGROUPED_GROUP_KEY ? [] : [targetData.groupId]
+	await setMemberships([{ instance_id: sourceData.instanceId, group_ids: newGroups }]).catch(
+		handleError,
+	)
+}
 </script>
 <template>
-	<div class="flex gap-2">
-		<StyledInput
-			v-model="search"
-			:icon="SearchIcon"
-			type="text"
-			:placeholder="formatMessage(messages.search)"
-			clearable
-			wrapper-class="flex-1"
-		/>
-		<PopoutMenu :tooltip="formatMessage(messages.view)" placement="bottom-end">
-			<ButtonStyled circular>
-				<button :aria-label="formatMessage(messages.view)">
-					<component :is="currentDisplayMode?.icon" />
-				</button>
-			</ButtonStyled>
-			<template #menu>
-				<div class="flex w-44 flex-col gap-1 p-1">
-					<ButtonStyled
-						v-for="option in displayModeOptions"
-						:key="option.id"
-						:type="displayMode === option.id ? 'filled' : 'transparent'"
-					>
-						<button
+	<div class="flex flex-col gap-4 pb-16" @contextmenu="handleBackgroundContextMenu">
+		<div class="flex gap-2">
+			<StyledInput
+				v-model="search"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.search)"
+				clearable
+				wrapper-class="flex-1"
+			/>
+			<Button @click="openNewGroupModal"
+				><PlusIcon />
+				{{ formatMessage(messages.newGroup) }}
+			</Button>
+			<Button type="colored" color="brand" @click="router.push('/create')"
+				><PlusIcon />
+				{{ formatMessage(messages.createInstance) }}
+			</Button>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<Combobox
+				v-model="state.sortBy"
+				v-tooltip="{ content: formatMessage(messages.sortBy), triggers: ['hover'] }"
+				class="!w-auto"
+				:options="
+					['Name', 'Last played', 'Date created', 'Date modified', 'Game version'].map((value) => ({
+						value,
+						label: formatOption(value),
+					}))
+				"
+				:placeholder="formatMessage(messages.select)"
+			>
+				<template #selected="{ label: selectedLabel }">
+					<div class="flex items-center gap-1">
+						<ArrowUpDownIcon class="size-5 shrink-0 text-[var(--color-text-default)]" />
+						<span class="font-semibold text-[var(--color-text-tertiary)]">{{ selectedLabel }}</span>
+					</div>
+				</template>
+			</Combobox>
+			<button
+				v-tooltip="{ content: sortDirectionLabel, triggers: ['hover'] }"
+				type="button"
+				class="flex h-[40px] w-[40px] shrink-0 cursor-pointer items-center justify-center rounded-xl border-none bg-surface-4 p-0 text-button-text transition-all hover:bg-surface-4 hover:text-[var(--color-text-primary)] active:scale-[0.97]"
+				:aria-label="sortDirectionLabel"
+				:aria-pressed="isSortAscending"
+				@click="toggleSortDirection()"
+			>
+				<SortAscIcon v-if="isSortAscending" class="size-5" />
+				<SortDescIcon v-else class="size-5" />
+			</button>
+			<div class="mx-2 h-6 w-px bg-surface-5" />
+			<Combobox
+				v-model="state.group"
+				v-tooltip="{ content: formatMessage(messages.groupBy), triggers: ['hover'] }"
+				:options="
+					['Group', 'Loader', 'Game version', 'None'].map((value) => ({
+						value,
+						label: formatOption(value),
+					}))
+				"
+				:placeholder="formatMessage(messages.select)"
+			>
+				<template #selected="{ label: selectedLabel }">
+					<div class="flex items-center gap-1">
+						<LayersIcon class="size-5 shrink-0 text-[var(--color-text-default)]" />
+						<span class="font-semibold text-[var(--color-text-tertiary)]">{{ selectedLabel }}</span>
+					</div>
+				</template>
+			</Combobox>
+			<PopoutMenu :tooltip="formatMessage(messages.view)" placement="bottom-end">
+				<Button circular icon-only :aria-label="formatMessage(messages.view)"
+					><component :is="currentDisplayMode?.icon" />
+				</Button>
+				<template #menu>
+					<div class="flex w-44 flex-col gap-1 p-1">
+						<Button
+							v-for="option in displayModeOptions"
+							:key="option.id"
+							:type="displayMode === option.id ? 'base' : 'quiet'"
 							class="flex w-full items-center gap-2 !justify-start text-left"
 							:aria-pressed="displayMode === option.id"
 							@click="setDisplayMode(option.id)"
 						>
 							<component :is="option.icon" class="size-4" />
 							{{ option.label }}
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-		</PopoutMenu>
-		<DropdownSelect
-			v-slot="{ selected }"
-			v-model="state.sortBy"
-			name="Sort Dropdown"
-			class="max-w-[16rem]"
-			:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
-			:display-name="formatOption"
-			:placeholder="formatMessage(messages.select)"
-		>
-			<span class="font-semibold text-primary">{{
-				formatMessage(commonMessages.sortByLabel)
-			}}</span>
-			<span class="font-semibold text-secondary">{{ selected }}</span>
-		</DropdownSelect>
-		<DropdownSelect
-			v-slot="{ selected }"
-			v-model="state.group"
-			class="max-w-[16rem]"
-			name="Group Dropdown"
-			:options="['Group', 'Loader', 'Game version', 'None']"
-			:display-name="formatOption"
-			:placeholder="formatMessage(messages.select)"
-		>
-			<span class="font-semibold text-primary">{{ formatMessage(messages.groupBy) }} </span>
-			<span class="font-semibold text-secondary">{{ selected }}</span>
-		</DropdownSelect>
-	</div>
-	<Accordion
-		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
-			key,
-			value,
-		}))"
-		:key="instanceSection.key"
-		:divider="grouping === 'Group' || instanceSection.key !== UNGROUPED_GROUP_KEY"
-		:open-by-default="!isSectionCollapsed(instanceSection.key)"
-		class="w-full"
-		@on-open="setSectionCollapsed(instanceSection.key, false)"
-		@on-close="setSectionCollapsed(instanceSection.key, true)"
-	>
-		<template v-if="grouping === 'Group' || instanceSection.key !== UNGROUPED_GROUP_KEY" #title>
-			<span class="text-base">{{
-				instanceSection.key === UNGROUPED_GROUP_KEY
-					? formatMessage(messages.ungrouped)
-					: instanceSection.key
-			}}</span>
-		</template>
-		<section
-			class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] w-full gap-3 mr-auto scroll-smooth overflow-y-auto"
-			:class="{
-				'grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-4': displayMode === 'cards',
-			}"
-		>
-			<div
-				v-for="instance in instanceSection.value"
-				:key="instance.id + instance.install_stage"
-				class="group relative"
-			>
-				<div
-					class="relative cursor-pointer select-none rounded-lg transition-all hover:brightness-90 active:scale-[0.98]"
-					@click="handleCardClick(instance.id)"
-					@mousedown="!selectMode && startLongPress(instance.id)"
-					@mouseup="cancelLongPress"
-					@mouseleave="cancelLongPress"
-					@touchstart="!selectMode && startLongPress(instance.id)"
-					@touchend="cancelLongPress"
-					@touchcancel="cancelLongPress"
-				>
-					<div :class="{ 'pointer-events-none': selectMode }">
-						<Instance
-							ref="instanceComponents"
-							:instance="instance"
-							:disabled="selectMode"
-							:variant="displayMode === 'cards' ? 'library' : 'standard'"
-							:class="{ 'opacity-50': selectMode && !selectedInstanceIds.has(instance.id) }"
-							@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.id)"
-						/>
+						</Button>
 					</div>
-				</div>
-				<div
-					class="absolute right-2 bottom-2 z-10 transition-opacity"
-					:class="
-						selectMode && selectedInstanceIds.has(instance.id)
-							? ''
-							: 'opacity-0 group-hover:opacity-100'
-					"
-					@click.stop="handleCheckboxClick(instance.id)"
+				</template>
+			</PopoutMenu>
+		</div>
+		<DragDropProvider @drag-end="handleInstanceDragEnd">
+			<InstanceGroup
+				v-if="pinnedSection"
+				:key="pinnedSection.id"
+				:section-key="pinnedSection.key"
+				:group-name="groupNameMap.get(pinnedSection.key) || pinnedSection.key"
+				:instances="pinnedSection.instances"
+				:grouping="grouping"
+				:is-collapsed="isSectionCollapsed(pinnedSection.key)"
+				:display-mode="displayMode"
+				:select-mode="selectMode"
+				:selected-instance-ids="selectedInstanceIds"
+				:is-sort-ascending="isSortAscending"
+				@toggle-collapse="(key: string) => setSectionCollapsed(key, !isSectionCollapsed(key))"
+				@handle-context-menu="
+					(event: MouseEvent, instanceId: string, sectionKey: string) =>
+						handleRightClick(event, instanceId, sectionKey)
+				"
+				@handle-checkbox-click="
+					(instanceId: string, event: MouseEvent) => handleCheckboxClick(instanceId, event)
+				"
+				@handle-card-click="
+					(instanceId: string, event: MouseEvent) => handleCardClick(instanceId, event)
+				"
+				@start-long-press="(instanceId: string) => startLongPress(instanceId)"
+				@cancel-long-press="cancelLongPress"
+				@new-instance="handleNewInstance"
+			>
+				<template #moreIcon>
+					<MoreVerticalIcon />
+				</template>
+			</InstanceGroup>
+			<Draggable
+				v-model="draggableSections"
+				:group="grouping === 'Group' ? 'groups' : undefined"
+				:disabled="grouping !== 'Group'"
+				item-key="id"
+				: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"
+				handle=".group-drag-handle"
+				:prevent-on-filter="false"
+				ghost-class="opacity-60"
+				chosen-class="shadow-lg"
+				drag-class="opacity-80"
+				@change="onGroupReorder"
+			>
+				<template #item="{ element: instanceSection }">
+					<div :key="instanceSection.id" class="min-w-0 w-full">
+						<InstanceGroup
+							:section-key="instanceSection.key"
+							:group-name="groupNameMap.get(instanceSection.key) || instanceSection.key"
+							:instances="instanceSection.instances"
+							:grouping="grouping"
+							:is-collapsed="isSectionCollapsed(instanceSection.key)"
+							:display-mode="displayMode"
+							:select-mode="selectMode"
+							:selected-instance-ids="selectedInstanceIds"
+							:hide-header="
+								(hideUngroupedHeader && instanceSection.key === UNGROUPED_GROUP_KEY) ||
+								grouping === 'None'
+							"
+							:is-sort-ascending="isSortAscending"
+							:can-move-up="canMoveGroupUp(instanceSection.key)"
+							:can-move-down="canMoveGroupDown(instanceSection.key)"
+							:group-pending-name-edit="groupPendingNameEdit"
+							@toggle-collapse="(key: string) => setSectionCollapsed(key, !isSectionCollapsed(key))"
+							@handle-context-menu="
+								(event: MouseEvent, instanceId: string, sectionKey: string) =>
+									handleRightClick(event, instanceId, sectionKey)
+							"
+							@handle-checkbox-click="
+								(instanceId: string, event: MouseEvent) => handleCheckboxClick(instanceId, event)
+							"
+							@handle-card-click="
+								(instanceId: string, event: MouseEvent) => handleCardClick(instanceId, event)
+							"
+							@start-long-press="(instanceId: string) => startLongPress(instanceId)"
+							@cancel-long-press="cancelLongPress"
+							@delete-group="removeGroup"
+							@rename-group="handleRenameGroup"
+							@move-group="handleMoveGroup"
+							@add-to-group="handleAddToGroup"
+							@new-instance="handleNewInstance"
+							@rename-complete="groupPendingNameEdit = null"
+						>
+							<template #moreIcon>
+								<MoreVerticalIcon />
+							</template>
+						</InstanceGroup>
+					</div>
+				</template>
+			</Draggable>
+		</DragDropProvider>
+		<ConfirmDeleteInstanceModal
+			ref="confirmModal"
+			:symlink-target="currentDeleteInstance?.symlink_target"
+			:count="batchDeleteCount"
+			@delete="batchDeleteCount > 0 ? batchDeleteInstances() : deleteInstance()"
+		/>
+		<ConfirmDeleteInstanceModal
+			ref="batchDeleteConfirmModal"
+			:count="selectedInstanceIds.size"
+			@delete="batchDeleteInstances"
+		/>
+		<InstanceGroupModal
+			ref="batchEditModal"
+			:instance-ids="[...selectedInstanceIds]"
+			@applied="onBatchEditApplied"
+		/>
+		<InstanceGroupModal ref="newGroupModal" :instance-ids="[]" @applied="onBatchEditApplied" />
+		<FloatingActionBar
+			:shown="selectMode"
+			:aria-label="formatMessage(messages.selectedCount, { count: selectedInstanceIds.size })"
+			hide-when-modal-open
+		>
+			<div class="flex items-center gap-0.5">
+				<span
+					class="px-3 py-2 text-base font-semibold text-[var(--color-text-primary)] tabular-nums"
 				>
-					<Checkbox :model-value="selectedInstanceIds.has(instance.id)" />
-				</div>
-				<div
-					v-if="!selectMode"
-					class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"
-					@click.stop="(event) => handleRightClick(event, instance.id)"
-				>
-					<ButtonStyled circular size="small" type="transparent">
-						<button type="button">
-							<MoreVerticalIcon />
-						</button>
-					</ButtonStyled>
-				</div>
+					{{ formatMessage(messages.selectedCount, { count: selectedInstanceIds.size }) }}
+				</span>
+				<div class="mx-0.5 h-6 w-px bg-surface-5" />
+				<Button
+					type="quiet"
+					class="!text-[var(--color-text-default)]"
+					:disabled="busy"
+					@click="clearLibraryInstanceSelection"
+					><XIcon class="hidden cq-show-icon" />
+					<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+				</Button>
 			</div>
-		</section>
-	</Accordion>
-	<ConfirmDeleteInstanceModal
-		ref="confirmModal"
-		:symlink-target="currentDeleteInstance?.symlink_target"
-		:count="batchDeleteCount"
-		@delete="batchDeleteCount > 0 ? batchDeleteInstances() : deleteInstance()"
-	/>
-	<ConfirmDeleteInstanceModal
-		ref="batchDeleteConfirmModal"
-		:count="selectedInstanceIds.size"
-		@delete="batchDeleteInstances"
-	/>
-	<BatchEditGroupsModal
-		ref="batchEditModal"
-		:instance-ids="[...selectedInstanceIds]"
-		@applied="onBatchEditApplied"
-	/>
-	<FloatingActionBar :shown="selectMode" position="top" aria-label="Instance selection">
-		<span class="px-3 py-2 text-base font-semibold text-contrast tabular-nums">
-			{{ formatMessage(messages.selectedCount, { count: selectedInstanceIds.size }) }}
-		</span>
-		<div class="mx-0.5 h-6 w-px bg-surface-5" />
-		<ButtonStyled type="transparent">
-			<button type="button" @click="toggleSelectAll">
-				<span>{{
-					isAllSelected ? formatMessage(messages.deselectAll) : formatMessage(messages.selectAll)
-				}}</span>
-			</button>
-		</ButtonStyled>
-		<ButtonStyled type="transparent">
-			<button type="button" @click="openBatchEdit">
-				<span>{{ formatMessage(messages.editGroups) }}</span>
-			</button>
-		</ButtonStyled>
-		<ButtonStyled color="red" type="transparent">
-			<button type="button" @click="openBatchDelete">
-				<TrashIcon />
-				<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
-			</button>
-		</ButtonStyled>
-		<div class="ml-auto" />
-		<ButtonStyled type="transparent">
-			<button class="!text-primary" type="button" @click="toggleSelectMode">
-				<XIcon class="hidden cq-show-icon" />
-				<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
-			</button>
-		</ButtonStyled>
-	</FloatingActionBar>
-	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
-		<template #play> <PlayIcon /> {{ formatMessage(commonMessages.playButton) }} </template>
-		<template #stop> <StopCircleIcon /> {{ formatMessage(commonMessages.stopButton) }} </template>
-		<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
-		<template #edit> <EyeIcon /> {{ formatMessage(messages.viewInstance) }} </template>
-		<template #duplicate>
-			<ClipboardCopyIcon /> {{ formatMessage(messages.duplicateInstance) }}
-		</template>
-		<template #pin> <PinIcon /> {{ formatMessage(messages.pinToHome) }} </template>
-		<template #unpin>
-			<PinIcon class="rotate-45" /> {{ formatMessage(messages.unpinFromHome) }}
-		</template>
-		<template #delete> <TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }} </template>
-		<template #open>
-			<FolderOpenIcon /> {{ formatMessage(commonMessages.openFolderButton) }}
-		</template>
-		<template #copy> <ClipboardCopyIcon /> {{ formatMessage(messages.copyPath) }} </template>
-	</ContextMenu>
+			<div class="ml-auto flex items-center gap-0.5">
+				<Button
+					v-if="grouping === 'Group'"
+					type="quiet"
+					:disabled="busy"
+					@click="createGroupFromSelection"
+					><PlusIcon />
+					<span class="bar-label">{{ formatMessage(messages.newGroupFromSelection) }}</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
+					v-if="grouping === 'Group' || selectedGroupedInstances.length > 0"
+					class="mx-1 h-6 w-px bg-surface-5"
+				/>
+				<Button type="quiet" color="red" :disabled="busy" @click="batchDeleteConfirmModal?.show()"
+					><TrashIcon />
+					<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+				</Button>
+			</div>
+		</FloatingActionBar>
+		<InstanceGroupModal
+			ref="addToExistingGroupModal"
+			:instance-ids="[]"
+			:existing-group-name="addToExistingGroupName"
+			:existing-group-id="addToExistingGroupId"
+			@applied="onBatchEditApplied"
+		/>
+		<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+			<template #play> <PlayIcon /> {{ formatMessage(commonMessages.playButton) }} </template>
+			<template #stop> <StopCircleIcon /> {{ formatMessage(commonMessages.stopButton) }} </template>
+			<template #add_content> <PlusIcon /> {{ formatMessage(messages.addContent) }} </template>
+			<template #edit> <EyeIcon /> {{ formatMessage(messages.viewInstance) }} </template>
+			<template #duplicate>
+				<ClipboardCopyIcon /> {{ formatMessage(messages.duplicateInstance) }}
+			</template>
+			<template #pin> <PinIcon /> {{ formatMessage(messages.pinToHome) }} </template>
+			<template #unpin>
+				<PinIcon class="rotate-45" /> {{ formatMessage(messages.unpinFromHome) }}
+			</template>
+			<template #delete> <TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }} </template>
+			<template #open>
+				<FolderOpenIcon /> {{ formatMessage(commonMessages.openFolderButton) }}
+			</template>
+			<template #copy> <ClipboardCopyIcon /> {{ formatMessage(messages.copyPath) }} </template>
+			<template #add_to_pinned> <StarIcon /> {{ formatMessage(messages.addToPinned) }} </template>
+			<template #remove_from_pinned>
+				<StarIcon style="color: var(--color-text-default); fill: var(--color-text-default)" />
+				{{ formatMessage(messages.removeFromPinned) }}
+			</template>
+			<template #remove_from_group>
+				<MinusIcon />
+				{{ formatMessage(messages.removeFromContextMenu) }}
+			</template>
+		</ContextMenu>
+		<ContextMenu ref="backgroundContextMenu" @option-clicked="handleBackgroundOption">
+			<template #create_instance>
+				<PlusIcon /> {{ formatMessage(messages.createInstance) }}
+			</template>
+		</ContextMenu>
+	</div>
 </template>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/apps/app-frontend/src/components/ui/library/DraggableInstanceCard.vue b/apps/app-frontend/src/components/ui/library/DraggableInstanceCard.vue
new file mode 100644
index 0000000..f301c75
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/library/DraggableInstanceCard.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
+import { useEventListener } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import type { GameInstance } from '@/helpers/types'
+
+const props = defineProps<{
+	instance: GameInstance
+	instanceGroupId: string
+	disabled: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'contextmenu' | 'card-click', event: MouseEvent): void
+	(e: 'start-long-press' | 'cancel-long-press'): void
+}>()
+
+const cardElement = ref<HTMLElement>()
+
+const instanceCardSensors = [
+	PointerSensor.configure({
+		preventActivation: () => false,
+	}),
+	KeyboardSensor,
+]
+
+const dragDisabled = computed(() => props.disabled)
+
+const { isDragging } = useDraggable({
+	id: computed(() => `instance:${props.instanceGroupId}:${props.instance.id}`),
+	element: cardElement,
+	disabled: dragDisabled,
+	sensors: instanceCardSensors,
+	data: computed(() => ({
+		instanceId: props.instance.id,
+		fromGroup: props.instanceGroupId,
+	})),
+})
+
+let wantsClick = false
+
+useEventListener(window, 'pointerdown', () => {
+	wantsClick = true
+})
+useEventListener(window, 'pointerup', () => {
+	if (isDragging.value) {
+		wantsClick = false
+	}
+})
+useEventListener(window, 'blur', () => {
+	wantsClick = false
+})
+
+function onCardClick(event: MouseEvent) {
+	if (!wantsClick || isDragging.value) return
+	wantsClick = false
+	emit('card-click', event)
+}
+
+function onContextMenu(event: MouseEvent) {
+	emit('contextmenu', event)
+}
+
+function onMouseDown() {
+	if (!dragDisabled.value) {
+		emit('start-long-press')
+	}
+}
+
+function onMouseUp() {
+	emit('cancel-long-press')
+}
+</script>
+
+<template>
+	<div
+		ref="cardElement"
+		class="group relative min-w-0 w-full"
+		@click="onCardClick"
+		@mousedown="onMouseDown"
+		@mouseup="onMouseUp"
+		@mouseleave="onMouseUp"
+		@touchstart="!dragDisabled && onMouseDown()"
+		@touchend="onMouseUp"
+		@touchcancel="onMouseUp"
+		@contextmenu.prevent.stop="onContextMenu"
+	>
+		<slot :is-dragging="isDragging" />
+		<slot v-if="!isDragging" name="overlay" />
+	</div>
+</template>
\ No newline at end of file
diff --git a/apps/app-frontend/src/components/ui/library/InstanceGroup.vue b/apps/app-frontend/src/components/ui/library/InstanceGroup.vue
new file mode 100644
index 0000000..9263403
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/library/InstanceGroup.vue
@@ -0,0 +1,521 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import {
+	ArrowDownIcon,
+	ArrowUpIcon,
+	DropdownIcon,
+	EditIcon,
+	PlusIcon,
+	TrashIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	IconButton,
+	InlineEditableText,
+	NewModal,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import DraggableInstanceCard from '@/components/ui/library/DraggableInstanceCard.vue'
+import { UNGROUPED_GROUP_KEY } from '@/composables/useGridGrouping'
+import { FAVORITES_GROUP_ID } from '@/composables/useInstanceGroups'
+import type { GameInstance } from '@/helpers/types'
+
+const MAX_GROUP_NAME_LENGTH = 256
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	ungrouped: { id: 'app.instances.group.ungrouped', defaultMessage: 'No group' },
+	pinned: { id: 'app.instances.group.pinned', defaultMessage: 'Pinned' },
+	emptyGroup: {
+		id: 'app.instances.group.empty',
+		defaultMessage: 'Drag and drop to add instances.',
+	},
+	editGroupName: {
+		id: 'app.instances.group.edit-name',
+		defaultMessage: 'Edit group name',
+	},
+	deleteGroup: {
+		id: 'app.instances.group.delete-group',
+		defaultMessage: 'Delete group',
+	},
+	deleteGroupDescription: {
+		id: 'app.instances.group.delete-description',
+		defaultMessage: 'Instances in this group will be ungrouped.',
+	},
+	moveGroupUp: {
+		id: 'app.instances.group.move-up',
+		defaultMessage: 'Move group up',
+	},
+	moveGroupDown: {
+		id: 'app.instances.group.move-down',
+		defaultMessage: 'Move group down',
+	},
+	addToGroup: {
+		id: 'app.instances.group.add-to-group',
+		defaultMessage: 'Add to group',
+	},
+	newInstance: {
+		id: 'app.instances.group.new-instance',
+		defaultMessage: 'New instance',
+	},
+	collapseGroup: {
+		id: 'app.instances.group.collapse',
+		defaultMessage: 'Collapse group',
+	},
+	expandGroup: {
+		id: 'app.instances.group.expand',
+		defaultMessage: 'Expand group',
+	},
+	renameGroup: {
+		id: 'app.instances.group.rename-group',
+		defaultMessage: 'Rename group',
+	},
+	groupNameEmpty: {
+		id: 'app.instances.group.name-empty',
+		defaultMessage: 'Group names cannot be empty.',
+	},
+	groupNameTooLong: {
+		id: 'app.instances.group.name-too-long',
+		defaultMessage: 'Group names cannot be longer than {maxLength} characters.',
+	},
+})
+
+const props = defineProps<{
+	sectionKey: string
+	groupName?: string
+	instances: GameInstance[]
+	grouping: string
+	isCollapsed: boolean
+	displayMode: string
+	selectMode: boolean
+	selectedInstanceIds: Set<string>
+	isSortAscending?: boolean
+	hideHeader?: boolean
+	canMoveUp?: boolean
+	canMoveDown?: boolean
+	groupPendingNameEdit?: string | null
+}>()
+
+// Events are grouped only where the payload shapes genuinely match; the
+// per-event names are documentation, not part of the type.
+const emit = defineEmits<{
+	(e: 'toggleCollapse' | 'deleteGroup' | 'addToGroup' | 'startLongPress', id: string): void
+	(e: 'handleCheckboxClick' | 'handleCardClick', instanceId: string, event: MouseEvent): void
+	(e: 'handleContextMenu', event: MouseEvent, instanceId: string, sectionKey: string): void
+	(e: 'renameGroup', oldKey: string, newKey: string): void
+	(e: 'cancelLongPress' | 'newInstance' | 'renameComplete'): void
+	(e: 'moveGroup', groupKey: string, direction: -1 | 1): void
+}>()
+
+const groupOptions = ref<InstanceType<typeof ContextMenu>>()
+const groupContainerRef = ref<HTMLElement>()
+const groupNameInput = ref<InstanceType<typeof InlineEditableText>>()
+const deletingGroup = ref(false)
+const confirmDeleteGroupModal = ref<InstanceType<typeof NewModal>>()
+const groupName = ref(props.groupName ?? props.sectionKey)
+
+const isUngrouped = computed(() => props.sectionKey === UNGROUPED_GROUP_KEY)
+const isFavorites = computed(() => props.sectionKey === FAVORITES_GROUP_ID)
+const isCustomGroup = computed(
+	() => props.grouping === 'Group' && !isUngrouped.value && !isFavorites.value,
+)
+const isGroupDragActive = computed(() => props.grouping === 'Group')
+const effectiveCollapsed = computed(() => (props.hideHeader ? false : props.isCollapsed))
+
+const { isDropTarget } = useDroppable({
+	id: computed(() => `instance-group:${props.sectionKey}`),
+	element: groupContainerRef,
+	disabled: computed(() => props.hideHeader || !isGroupDragActive.value),
+	data: computed(() => ({
+		groupId: props.sectionKey,
+	})),
+})
+
+watch(
+	() => [props.sectionKey, props.groupName],
+	() => {
+		groupName.value = props.groupName ?? props.sectionKey
+	},
+)
+
+watch(
+	() => props.groupPendingNameEdit,
+	async (pendingId) => {
+		if (pendingId !== props.sectionKey) return
+
+		await nextTick()
+		groupContainerRef.value?.scrollIntoView({ block: 'nearest' })
+		await groupNameInput.value?.startEditing()
+		emit('renameComplete')
+	},
+	{ immediate: true, flush: 'post' },
+)
+
+function validateGroupName(value: string) {
+	const normalized = value.trim()
+	if (normalized.length === 0) return false
+	if (normalized.length > MAX_GROUP_NAME_LENGTH) return false
+	return true
+}
+
+async function updateGroupName(value: string) {
+	const newName = value.trim()
+	if (!newName || newName === groupName.value) return false
+	emit('renameGroup', props.sectionKey, newName)
+	return true
+}
+
+function openGroupContextMenu(event: MouseEvent) {
+	groupOptions.value?.showMenu(
+		event,
+		props.sectionKey,
+		isCustomGroup.value
+			? [
+					{ name: 'new_instance' },
+					{ name: 'add_instances' },
+					{ name: 'edit_name' },
+					{ type: 'divider' },
+					{ name: 'delete_group', color: 'danger' },
+				]
+			: [{ name: 'new_instance' }],
+	)
+}
+
+async function handleGroupOption({ option }: { option: string }) {
+	if (option === 'new_instance') {
+		emit('newInstance')
+	} else if (option === 'add_instances') {
+		emit('addToGroup', props.sectionKey)
+	} else if (option === 'edit_name') {
+		groupNameInput.value?.startEditing()
+	} else if (option === 'delete_group') {
+		requestGroupDeletion()
+	}
+}
+
+function requestGroupDeletion() {
+	if (isUngrouped.value || isFavorites.value) return
+
+	if (props.instances.length > 0) {
+		confirmDeleteGroupModal.value?.show()
+	} else {
+		void removeGroup()
+	}
+}
+
+async function removeGroup() {
+	if (deletingGroup.value) return
+
+	deletingGroup.value = true
+	emit('deleteGroup', props.sectionKey)
+	setTimeout(() => {
+		deletingGroup.value = false
+		confirmDeleteGroupModal.value?.hide()
+	}, 300)
+}
+
+function onCardClick(instanceId: string, event: MouseEvent) {
+	emit('handleCardClick', instanceId, event)
+}
+
+function onStartLongPress(instanceId: string) {
+	emit('startLongPress', instanceId)
+}
+</script>
+
+<template>
+	<div
+		ref="groupContainerRef"
+		class="instance-group group/instance-container relative select-none pb-3"
+		@contextmenu.prevent.stop="openGroupContextMenu"
+	>
+		<div
+			v-if="!hideHeader && isDropTarget && isGroupDragActive"
+			class="pointer-events-none absolute -inset-2 inset-y-0 z-20 rounded-xl border-2 border-dashed border-contrast opacity-40 bg-transparent transition-opacity duration-150"
+		/>
+		<div
+			v-if="!hideHeader && (grouping === 'Group' || sectionKey !== UNGROUPED_GROUP_KEY)"
+			class="group/header flex h-10 w-full items-center gap-2 border-0 border-b border-solid border-b-surface-5"
+			:class="{ 'group-drag-handle cursor-grab': isCustomGroup }"
+		>
+			<div
+				class="flex min-w-0 cursor-pointer items-center gap-2"
+				@click="emit('toggleCollapse', sectionKey)"
+			>
+				<button
+					class="flex shrink-0 items-center border-0 bg-transparent p-0 cursor-pointer"
+					type="button"
+					:aria-expanded="!effectiveCollapsed"
+					:aria-label="
+						formatMessage(effectiveCollapsed ? messages.expandGroup : messages.collapseGroup)
+					"
+					@click.stop="emit('toggleCollapse', sectionKey)"
+				>
+					<DropdownIcon
+						class="size-5 shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-300"
+						:class="{ 'rotate-180': !effectiveCollapsed }"
+					/>
+				</button>
+				<InlineEditableText
+					v-if="!isUngrouped && !isFavorites"
+					ref="groupNameInput"
+					v-model="groupName"
+					activation-mode="manual"
+					class="text-base font-semibold !h-10 text-[var(--color-text-default)] select-none"
+					max-width="24rem"
+					:max-length="MAX_GROUP_NAME_LENGTH"
+					:on-change="updateGroupName"
+					:validate="validateGroupName"
+				/>
+				<span v-else class="text-base font-semibold text-[var(--color-text-default)] select-none">
+					{{ isFavorites ? formatMessage(messages.pinned) : formatMessage(messages.ungrouped) }}
+				</span>
+				<TagItem v-if="instances.length" class="shrink-0 border-surface-3 bg-surface-2">
+					{{ instances.length }}
+				</TagItem>
+			</div>
+			<div class="min-w-0 flex-1" />
+			<div
+				v-if="isCustomGroup"
+				class="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="emit('moveGroup', sectionKey, -1)"
+				>
+					<ArrowUpIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.moveGroupDown)"
+					:label="formatMessage(messages.moveGroupDown)"
+					type="quiet"
+					size="sm"
+					:disabled="!canMoveDown"
+					@click.stop="emit('moveGroup', sectionKey, 1)"
+				>
+					<ArrowDownIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.editGroupName)"
+					:label="formatMessage(messages.editGroupName)"
+					type="quiet"
+					size="sm"
+					@click.stop="groupNameInput?.startEditing()"
+				>
+					<EditIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.addToGroup)"
+					:label="formatMessage(messages.addToGroup)"
+					type="quiet"
+					size="sm"
+					@click.stop="emit('addToGroup', sectionKey)"
+				>
+					<PlusIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.deleteGroup)"
+					:label="formatMessage(messages.deleteGroup)"
+					type="quiet"
+					size="sm"
+					:disabled="deletingGroup"
+					@click.stop="handleGroupOption({ option: 'delete_group' })"
+				>
+					<TrashIcon />
+				</IconButton>
+			</div>
+		</div>
+		<div v-if="!effectiveCollapsed" class="mt-2.5">
+			<section
+				class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] w-full gap-3 mr-auto scroll-smooth overflow-y-auto"
+				:class="{
+					'grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-4': displayMode === 'cards',
+				}"
+			>
+				<template v-for="instance in instances" :key="instance.id">
+					<DraggableInstanceCard
+						v-if="isGroupDragActive"
+						:instance="instance"
+						:instance-group-id="sectionKey"
+						:disabled="selectMode"
+						@card-click="(event: MouseEvent) => onCardClick(instance.id, event)"
+						@contextmenu="
+							(event: MouseEvent) => emit('handleContextMenu', event, instance.id, props.sectionKey)
+						"
+						@start-long-press="onStartLongPress(instance.id)"
+						@cancel-long-press="emit('cancelLongPress')"
+					>
+						<template #default="{ isDragging }">
+							<div
+								:class="{
+									'pointer-events-none': selectMode,
+									'relative cursor-pointer select-none rounded-lg transition-all hover:brightness-90 active:scale-[0.98]': true,
+								}"
+								@click.capture="
+									(event: MouseEvent) => {
+										if (event.shiftKey && !selectMode) {
+											event.stopPropagation()
+											emit('handleCardClick', instance.id, event)
+										}
+									}
+								"
+							>
+								<Instance
+									:instance="instance"
+									:disabled="selectMode || isDragging"
+									:variant="displayMode === 'cards' ? 'library' : 'standard'"
+									:class="{
+										'opacity-50': selectMode && !selectedInstanceIds.has(instance.id),
+									}"
+								/>
+							</div>
+						</template>
+						<template #overlay>
+							<div
+								class="absolute right-2 bottom-2 z-10 transition-opacity"
+								:class="
+									selectMode && selectedInstanceIds.has(instance.id)
+										? ''
+										: 'opacity-0 group-hover:opacity-100'
+								"
+								@click.stop="emit('handleCheckboxClick', instance.id, $event)"
+							>
+								<Checkbox :model-value="selectedInstanceIds.has(instance.id)" />
+							</div>
+							<div
+								v-if="!selectMode"
+								class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"
+								@click.stop="
+									emit('handleContextMenu', $event as MouseEvent, instance.id, props.sectionKey)
+								"
+							>
+								<Button type="quiet" size="2xs" circular icon-only
+									><slot name="moreIcon" />
+								</Button>
+							</div>
+						</template>
+					</DraggableInstanceCard>
+
+					<div v-else class="group relative">
+						<div
+							class="relative cursor-pointer select-none rounded-lg transition-all hover:brightness-90 active:scale-[0.98]"
+							@click.capture="
+								(event: MouseEvent) => {
+									if (event.shiftKey && !selectMode) {
+										event.stopPropagation()
+										emit('handleCardClick', instance.id, event)
+									}
+								}
+							"
+							@click="emit('handleCardClick', instance.id, $event as MouseEvent)"
+							@mousedown="!selectMode && emit('startLongPress', instance.id)"
+							@mouseup="emit('cancelLongPress')"
+							@mouseleave="emit('cancelLongPress')"
+							@touchstart="!selectMode && emit('startLongPress', instance.id)"
+							@touchend="emit('cancelLongPress')"
+							@touchcancel="emit('cancelLongPress')"
+						>
+							<div :class="{ 'pointer-events-none': selectMode }">
+								<Instance
+									:instance="instance"
+									:disabled="selectMode"
+									:variant="displayMode === 'cards' ? 'library' : 'standard'"
+									:class="{
+										'opacity-50': selectMode && !selectedInstanceIds.has(instance.id),
+									}"
+									@contextmenu.prevent.stop="
+										(event: MouseEvent) =>
+											emit('handleContextMenu', event, instance.id, props.sectionKey)
+									"
+								/>
+							</div>
+						</div>
+						<div
+							class="absolute right-2 bottom-2 z-10 transition-opacity"
+							:class="
+								selectMode && selectedInstanceIds.has(instance.id)
+									? ''
+									: 'opacity-0 group-hover:opacity-100'
+							"
+							@click.stop="emit('handleCheckboxClick', instance.id, $event)"
+						>
+							<Checkbox :model-value="selectedInstanceIds.has(instance.id)" />
+						</div>
+						<div
+							v-if="!selectMode"
+							class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"
+							@click.stop="
+								emit('handleContextMenu', $event as MouseEvent, instance.id, props.sectionKey)
+							"
+						>
+							<Button type="quiet" size="2xs" circular icon-only><slot name="moreIcon" /> </Button>
+						</div>
+					</div>
+				</template>
+				<p
+					v-if="instances.length === 0"
+					class="col-span-full m-0 pt-1 pl-0.5 text-base font-base text-[var(--color-text-tertiary)] opacity-80"
+				>
+					{{ formatMessage(messages.emptyGroup) }}
+				</p>
+			</section>
+		</div>
+	</div>
+
+	<ContextMenu ref="groupOptions" @option-clicked="handleGroupOption">
+		<template #new_instance>
+			<PlusIcon />
+			{{ formatMessage(messages.newInstance) }}
+		</template>
+		<template #add_instances>
+			<PlusIcon />
+			{{ 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-[var(--color-text-default)]">
+			{{ 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>
diff --git a/apps/app-frontend/src/components/ui/modal/InstanceGroupModal.vue b/apps/app-frontend/src/components/ui/modal/InstanceGroupModal.vue
new file mode 100644
index 0000000..2f92ba0
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/modal/InstanceGroupModal.vue
@@ -0,0 +1,313 @@
+<template>
+	<NewModal ref="modal" no-padding scrollable actions-divider max-width="560px" width="560px">
+		<template #title>
+			<span class="text-2xl font-semibold text-[var(--color-text-primary)]">
+				{{
+					existingGroupName
+						? formatMessage(messages.addToGroupTitle, { groupName: existingGroupName })
+						: formatMessage(messages.header)
+				}}
+			</span>
+		</template>
+
+		<template v-if="!existingGroupName">
+			<div class="flex flex-col gap-2.5 p-6">
+				<label for="new-group-name" class="font-semibold text-[var(--color-text-primary)]">
+					{{ formatMessage(messages.groupName) }}
+				</label>
+				<StyledInput
+					id="new-group-name"
+					ref="groupNameInput"
+					v-model="newGroupName"
+					:placeholder="formatMessage(messages.groupNamePlaceholder)"
+					:maxlength="32"
+					@click="groupNameInput?.select()"
+				/>
+			</div>
+
+			<div class="h-px bg-divider" />
+		</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="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-[var(--color-text-tertiary)]"
+			>
+				{{ 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">
+						<InstanceIcon
+							:icon-path="instance.icon_path"
+							:instance-id="instance.id"
+							:loader="instance.loader"
+							class="!size-[2rem] !rounded-md"
+						/>
+						<div class="flex min-w-0 items-center gap-2">
+							<span class="truncate font-semibold text-[var(--color-text-primary)]">{{
+								instance.name
+							}}</span>
+							<TagItem v-if="instance.groups && instance.groups.length > 0" class="shrink-0">
+								{{ getGroupName(instance.groups[0]) }}
+							</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="existingGroupName ? !canSaveGroups : !canCreateGroup"
+					@click="existingGroupName ? handleSaveGroups() : handleCreateGroup()"
+				>
+					<SpinnerIcon v-if="creatingGroup" class="animate-spin" />
+					<CheckIcon v-else-if="existingGroupName" />
+					<PlusIcon v-else />
+					{{ formatMessage(existingGroupName ? messages.saveChanges : messages.createGroup) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { Button, defineMessages, NewModal, StyledInput, TagItem, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import InstanceIcon from '@/components/ui/InstanceIcon.vue'
+import { FAVORITES_GROUP_ID } from '@/composables/useInstanceGroups'
+import { list } from '@/helpers/instance'
+import { create_group, list_groups, set_group_memberships } from '@/helpers/instance-groups'
+import type { GameInstance } from '@/helpers/types'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	instanceIds: string[]
+	existingGroupName?: string
+	existingGroupId?: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'applied'): void
+}>()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instances.batch-edit-groups.header',
+		defaultMessage: 'Create group',
+	},
+	addToGroupTitle: {
+		id: 'app.instances.batch-edit-groups.add-to-group-title',
+		defaultMessage: 'Add instances to "{groupName}"',
+	},
+	groupName: {
+		id: 'app.instances.batch-edit-groups.group-name',
+		defaultMessage: 'Group name',
+	},
+	groupNamePlaceholder: {
+		id: 'app.instances.batch-edit-groups.group-name-placeholder',
+		defaultMessage: 'Enter group name',
+	},
+	searchInstance: {
+		id: 'app.instances.batch-edit-groups.search-instance',
+		defaultMessage: 'Search instances',
+	},
+	noInstancesFound: {
+		id: 'app.instances.batch-edit-groups.no-instances-found',
+		defaultMessage: 'No instances found',
+	},
+	add: {
+		id: 'app.instances.batch-edit-groups.add',
+		defaultMessage: 'Add',
+	},
+	added: {
+		id: 'app.instances.batch-edit-groups.added',
+		defaultMessage: 'Added',
+	},
+	cancel: {
+		id: 'app.instances.batch-edit-groups.cancel',
+		defaultMessage: 'Cancel',
+	},
+	createGroup: {
+		id: 'app.instances.batch-edit-groups.create',
+		defaultMessage: 'Create group',
+	},
+	pinnedGroupName: {
+		id: 'app.instances.group.pinned',
+		defaultMessage: 'Pinned',
+	},
+	saveChanges: {
+		id: 'app.instances.batch-edit-groups.save-changes',
+		defaultMessage: 'Save',
+	},
+})
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const groupNameInput = ref<InstanceType<typeof StyledInput>>()
+const newGroupName = ref('')
+const newGroupSearch = ref('')
+const creatingGroup = ref(false)
+const allInstances = ref<GameInstance[]>([])
+const groupNameMap = ref(new Map<string, string>())
+const selectedNewGroupInstanceIds = ref(new Set<string>())
+
+const canCreateGroup = computed(() => newGroupName.value.trim().length > 0)
+
+const canSaveGroups = computed(() => {
+	if (!props.existingGroupName) return false
+	const groupId = props.existingGroupId
+	if (!groupId) return false
+	return allInstances.value.some((instance) => {
+		const isSelected = selectedNewGroupInstanceIds.value.has(instance.id)
+		const hasGroup = (instance.groups || []).includes(groupId)
+		return isSelected !== hasGroup
+	})
+})
+
+const newGroupInstances = computed(() => {
+	const search = newGroupSearch.value.toLowerCase()
+	return allInstances.value.filter((instance) => {
+		if (!search) return true
+		return instance.name.toLowerCase().includes(search)
+	})
+})
+
+function getGroupName(groupId: string) {
+	if (groupId === FAVORITES_GROUP_ID) {
+		return formatMessage(messages.pinnedGroupName)
+	}
+	return groupNameMap.value.get(groupId) || groupId
+}
+
+function show(ids?: string[]) {
+	newGroupSearch.value = ''
+	creatingGroup.value = false
+	Promise.all([list(), list_groups()]).then(([instances, groups]) => {
+		allInstances.value = instances as GameInstance[]
+		const map = new Map<string, string>()
+		for (const g of groups) {
+			map.set(g.id, g.name)
+		}
+		groupNameMap.value = map
+
+		if (!props.existingGroupName) {
+			const customGroups = groups.filter((g: { id: string }) => g.id !== 'group:favorites')
+			let groupNumber = customGroups.length + 1
+			const existingNames = new Set(groups.map((g: { name: string }) => g.name.toLowerCase()))
+			while (existingNames.has(`group ${groupNumber}`)) {
+				groupNumber++
+			}
+			newGroupName.value = `Group ${groupNumber}`
+		}
+
+		if (props.existingGroupName) {
+			const groupId = props.existingGroupId
+			selectedNewGroupInstanceIds.value = new Set(
+				allInstances.value.filter((i) => (i.groups || []).includes(groupId || '')).map((i) => i.id),
+			)
+		} else {
+			selectedNewGroupInstanceIds.value = new Set(ids ?? props.instanceIds)
+		}
+	})
+	modal.value?.show()
+}
+
+function toggleNewGroupInstance(instanceId: string) {
+	const next = new Set(selectedNewGroupInstanceIds.value)
+	if (next.has(instanceId)) {
+		next.delete(instanceId)
+	} else {
+		next.add(instanceId)
+	}
+	selectedNewGroupInstanceIds.value = next
+}
+
+async function handleCreateGroup() {
+	const name = newGroupName.value.trim()
+	if (!name || selectedNewGroupInstanceIds.value.size === 0) return
+
+	creatingGroup.value = true
+
+	const group = await create_group(name).catch(() => null)
+	if (!group) {
+		creatingGroup.value = false
+		return
+	}
+
+	if (selectedNewGroupInstanceIds.value.size > 0) {
+		const updates = [...selectedNewGroupInstanceIds.value].map((instanceId) => ({
+			instance_id: instanceId,
+			group_ids: [group.id],
+		}))
+		await set_group_memberships(updates).catch(() => {})
+	}
+
+	creatingGroup.value = false
+	modal.value?.hide()
+	emit('applied')
+}
+
+async function handleSaveGroups() {
+	if (!props.existingGroupName) return
+
+	creatingGroup.value = true
+	const groupId = props.existingGroupId
+
+	const changedInstances = allInstances.value.filter((instance) => {
+		const isSelected = selectedNewGroupInstanceIds.value.has(instance.id)
+		const hasGroup = (instance.groups || []).includes(groupId || '')
+		return isSelected !== hasGroup
+	})
+
+	const updates = changedInstances.map((instance) => {
+		const isSelected = selectedNewGroupInstanceIds.value.has(instance.id)
+		return {
+			instance_id: instance.id,
+			group_ids: isSelected ? [groupId!] : [],
+		}
+	})
+	await set_group_memberships(updates).catch(() => {})
+
+	creatingGroup.value = false
+	modal.value?.hide()
+	emit('applied')
+}
+
+defineExpose({ show })
+</script>
diff --git a/apps/app-frontend/src/composables/useGridGrouping.ts b/apps/app-frontend/src/composables/useGridGrouping.ts
index 437956d..5854103 100644
--- a/apps/app-frontend/src/composables/useGridGrouping.ts
+++ b/apps/app-frontend/src/composables/useGridGrouping.ts
@@ -7,15 +7,22 @@ export const UNGROUPED_GROUP_KEY = '__ungrouped__'
 
 export type GridGroupingOption = 'Group' | 'Loader' | 'Game version' | 'None'
 export type GridSortOption =
-	| 'Name'
-	| 'Last played'
-	| 'Date created'
-	| 'Date modified'
-	| 'Game version'
+	'Name' | 'Last played' | 'Date created' | 'Date modified' | 'Game version'
+
+export type GridSortDirection = 'asc' | 'desc'
+
+export const defaultSortDirections: Record<GridSortOption, GridSortDirection> = {
+	Name: 'asc',
+	'Last played': 'desc',
+	'Date created': 'desc',
+	'Date modified': 'desc',
+	'Game version': 'asc',
+}
 
 export interface GridDisplayState {
 	group: GridGroupingOption
 	sortBy: GridSortOption
+	sortDirections: Partial<Record<GridSortOption, GridSortDirection>>
 	collapsedGroups: string[]
 }
 
@@ -38,6 +45,7 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		{
 			group: 'Group',
 			sortBy: 'Name',
+			sortDirections: {},
 			collapsedGroups: [],
 		},
 		localStorage,
@@ -66,7 +74,7 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		state.value.collapsedGroups = [...collapsedSections]
 	}
 
-	function sortInstances(instances: T[], sortBy: GridSortOption): T[] {
+	function sortInstances(instances: T[], sortBy: GridSortOption, ascending: boolean): T[] {
 		const sorted = [...instances]
 		const getGameVersion = options.getGameVersion ?? ((i: T) => i.game_version ?? '')
 		const getLastPlayed = options.getLastPlayed ?? ((i: T) => i.last_played ?? 0)
@@ -83,16 +91,19 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 				)
 				break
 			case 'Last played':
-				sorted.sort((a, b) => dayjs(getLastPlayed(b)).diff(dayjs(getLastPlayed(a))))
+				sorted.sort((a, b) => dayjs(getLastPlayed(a)).diff(dayjs(getLastPlayed(b))))
 				break
 			case 'Date created':
-				sorted.sort((a, b) => dayjs(getDateCreated(b)).diff(dayjs(getDateCreated(a))))
+				sorted.sort((a, b) => dayjs(getDateCreated(a)).diff(dayjs(getDateCreated(b))))
 				break
 			case 'Date modified':
-				sorted.sort((a, b) => dayjs(getDateModified(b)).diff(dayjs(getDateModified(a))))
+				sorted.sort((a, b) => dayjs(getDateModified(a)).diff(dayjs(getDateModified(b))))
 				break
 		}
 
+		if (!ascending) {
+			sorted.reverse()
+		}
 		return sorted
 	}
 
@@ -148,11 +159,25 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 	function sortSections(
 		instanceMap: Map<string, T[]>,
 		group: GridGroupingOption,
+		sortBy: GridSortOption,
 	): Map<string, T[]> {
 		if (group !== 'Group' && group !== 'Game version') {
 			return instanceMap
 		}
 
+		if (group === 'Group' && sortBy !== 'Name') {
+			if (instanceMap.has(UNGROUPED_GROUP_KEY) && instanceMap.size > 1) {
+				const ungroupedInstances = instanceMap.get(UNGROUPED_GROUP_KEY)!
+				instanceMap.delete(UNGROUPED_GROUP_KEY)
+				const newMap = new Map<string, T[]>([[UNGROUPED_GROUP_KEY, ungroupedInstances]])
+				for (const [key, instances] of instanceMap) {
+					newMap.set(key, instances)
+				}
+				return newMap
+			}
+			return instanceMap
+		}
+
 		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
 			if (group === 'Group') {
 				if (a[0] === UNGROUPED_GROUP_KEY && b[0] !== UNGROUPED_GROUP_KEY) return -1
@@ -166,12 +191,30 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		return instanceMap
 	}
 
+	const sortDirection = computed<GridSortDirection>(() => {
+		return (
+			state.value.sortDirections[state.value.sortBy] ?? defaultSortDirections[state.value.sortBy]
+		)
+	})
+
+	const isSortAscending = computed(() => sortDirection.value === 'asc')
+
+	const toggleSortDirection = () => {
+		const current = sortDirection.value
+		const next: GridSortDirection = current === 'asc' ? 'desc' : 'asc'
+		state.value.sortDirections = {
+			...state.value.sortDirections,
+			[state.value.sortBy]: next,
+		}
+	}
+
 	const filteredResults = computed(() => {
 		const { group = 'Group', sortBy = 'Name' } = state.value
+		const ascending = isSortAscending.value
 
-		const sorted = sortInstances(instances.value, sortBy)
+		const sorted = sortInstances(instances.value, sortBy, ascending)
 		const grouped = groupInstances(sorted, group)
-		return sortSections(grouped, group)
+		return sortSections(grouped, group, sortBy)
 	})
 
 	return {
@@ -180,6 +223,9 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		filteredResults,
 		isSectionCollapsed,
 		setSectionCollapsed,
+		sortDirection,
+		isSortAscending,
+		toggleSortDirection,
 		UNGROUPED_GROUP_KEY,
 	}
-}
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/composables/useInstanceGroups.ts b/apps/app-frontend/src/composables/useInstanceGroups.ts
new file mode 100644
index 0000000..16eacb3
--- /dev/null
+++ b/apps/app-frontend/src/composables/useInstanceGroups.ts
@@ -0,0 +1,182 @@
+import { computed, type Ref, ref, watch } from 'vue'
+
+import { instance_groups_listener } from '@/helpers/events'
+import {
+	create_group,
+	delete_group,
+	type InstanceGroupDefinition,
+	type InstanceGroupMembershipUpdate,
+	list_groups,
+	MAX_INSTANCE_GROUP_NAME_LENGTH,
+	rename_group,
+	set_group_memberships,
+	set_group_order,
+} from '@/helpers/instance-groups'
+
+export const FAVORITES_GROUP_ID = 'group:favorites'
+
+export const UNGROUPED_GROUP_ID = 'group:none'
+
+export { MAX_INSTANCE_GROUP_NAME_LENGTH }
+
+export { type InstanceGroupDefinition, type InstanceGroupMembershipUpdate }
+
+export interface InstanceGroupWithMembership {
+	key: string
+	name: string
+	instances: string[]
+}
+
+export function useInstanceGroups(instances: Ref<{ id: string; groups: string[] }[]>) {
+	const libraryGroups = ref<InstanceGroupDefinition[]>([])
+	const libraryGroupsLoaded = ref(false)
+
+	async function fetchGroups() {
+		libraryGroups.value = await list_groups()
+		libraryGroupsLoaded.value = true
+	}
+
+	fetchGroups()
+
+	instance_groups_listener(() => {
+		fetchGroups()
+	})
+
+	const orderedLibraryGroupIds = ref<string[]>([])
+
+	watch(
+		libraryGroups,
+		(groups) => {
+			orderedLibraryGroupIds.value = groups.map((g) => g.id)
+		},
+		{ immediate: true },
+	)
+
+	const instanceGroups = computed(() => {
+		if (!libraryGroupsLoaded.value) {
+			return []
+		}
+
+		const instanceGroupMap = new Map<string, string[]>()
+
+		for (const instance of instances.value) {
+			const groups = instance.groups ?? []
+			for (const groupId of groups) {
+				if (!instanceGroupMap.has(groupId)) {
+					instanceGroupMap.set(groupId, [])
+				}
+				instanceGroupMap.get(groupId)!.push(instance.id)
+			}
+		}
+
+		const allGroupIds = new Set<string>()
+		const groupMap = new Map<string, string[]>()
+
+		for (const groupId of orderedLibraryGroupIds.value) {
+			allGroupIds.add(groupId)
+			groupMap.set(groupId, instanceGroupMap.get(groupId) ?? [])
+		}
+
+		const ungroupedIds: string[] = []
+		for (const instance of instances.value) {
+			const instanceGroups = instance.groups ?? []
+			const isInAnyGroup = instanceGroups.some((g) => allGroupIds.has(g))
+			if (!isInAnyGroup) {
+				ungroupedIds.push(instance.id)
+			}
+		}
+
+		if (ungroupedIds.length > 0) {
+			groupMap.set(UNGROUPED_GROUP_ID, ungroupedIds)
+		}
+
+		return [...groupMap.entries()].map(([key, instances]) => ({
+			key,
+			name:
+				key === UNGROUPED_GROUP_ID
+					? 'Ungrouped'
+					: (libraryGroups.value.find((g) => g.id === key)?.name ?? key),
+			instances,
+		}))
+	})
+
+	const creatingGroup = ref(false)
+	const reorderingGroups = ref(false)
+
+	async function createNewGroup(name: string): Promise<string | null> {
+		creatingGroup.value = true
+		try {
+			const group = await create_group(name)
+			libraryGroups.value = [...libraryGroups.value, group]
+			orderedLibraryGroupIds.value = [...orderedLibraryGroupIds.value, group.id]
+			return group.id
+		} finally {
+			creatingGroup.value = false
+		}
+	}
+
+	async function renameGroupById(id: string, newName: string): Promise<boolean> {
+		if (id === FAVORITES_GROUP_ID) return false
+		const result = await rename_group(id, newName)
+		const idx = libraryGroups.value.findIndex((g) => g.id === id)
+		if (idx !== -1) {
+			libraryGroups.value = [
+				...libraryGroups.value.slice(0, idx),
+				result,
+				...libraryGroups.value.slice(idx + 1),
+			]
+		}
+		return true
+	}
+
+	async function deleteGroupById(id: string): Promise<boolean> {
+		if (id === FAVORITES_GROUP_ID) return false
+		await delete_group(id)
+		libraryGroups.value = libraryGroups.value.filter((g) => g.id !== id)
+		orderedLibraryGroupIds.value = orderedLibraryGroupIds.value.filter((gid) => gid !== id)
+		return true
+	}
+
+	async function reorderGroups(groupIds: string[]): Promise<boolean> {
+		reorderingGroups.value = true
+		try {
+			await set_group_order(groupIds)
+			// Favorites is rendered separately from draggable sections. Keep it in
+			// the local order after a drag even though the backend accepts only the
+			// reorderable group ids; otherwise it appears again as an ordinary
+			// section until the next full group refresh.
+			orderedLibraryGroupIds.value = [
+				FAVORITES_GROUP_ID,
+				...groupIds.filter((id) => id !== FAVORITES_GROUP_ID),
+			]
+			return true
+		} finally {
+			reorderingGroups.value = false
+		}
+	}
+
+	async function setMemberships(updates: InstanceGroupMembershipUpdate[]): Promise<boolean> {
+		await set_group_memberships(updates)
+		return true
+	}
+
+	function groupNameById(id: string): string | undefined {
+		if (id === UNGROUPED_GROUP_ID) return 'Ungrouped'
+		return libraryGroups.value.find((g) => g.id === id)?.name
+	}
+
+	return {
+		libraryGroups,
+		libraryGroupsLoaded,
+		orderedLibraryGroupIds,
+		instanceGroups,
+		creatingGroup,
+		reorderingGroups,
+		createGroup: createNewGroup,
+		renameGroupById,
+		deleteGroupById,
+		reorderGroups,
+		setMemberships,
+		groupNameById,
+	}
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/helpers/analytics.ts b/apps/app-frontend/src/helpers/analytics.ts
new file mode 100644
index 0000000..478aaad
--- /dev/null
+++ b/apps/app-frontend/src/helpers/analytics.ts
@@ -0,0 +1,75 @@
+interface InstanceProperties {
+	loader: string
+	game_version: string
+}
+
+interface ProjectProperties extends InstanceProperties {
+	id: string
+	project_type: string
+}
+
+type AnalyticsEventMap = {
+	Launched: { version: string; dev: boolean; onboarded: boolean }
+	PageView: { path: string; fromPath: string; failed: unknown }
+	InstanceCreate: { source: string }
+	InstanceCreateStart: { source: string }
+	InstanceStart: InstanceProperties & { source: string }
+	InstanceStop: Partial<InstanceProperties> & { source?: string }
+	InstanceDuplicate: InstanceProperties
+	InstanceRepair: InstanceProperties
+	InstanceSetIcon: Record<string, never>
+	InstanceRemoveIcon: Record<string, never>
+	InstanceUpdateAll: InstanceProperties & { count: number; selected: boolean }
+	InstanceProjectUpdate: InstanceProperties & { id: string; name: string; project_type: string }
+	InstanceProjectDisable: InstanceProperties & {
+		id: string
+		name: string
+		project_type: string
+		disabled: boolean
+	}
+	InstanceProjectRemove: InstanceProperties & { id: string; name: string; project_type: string }
+	ProjectInstall: ProjectProperties & { version_id: string; title: string; source: string }
+	ProjectInstallStart: { source: string }
+	PackInstall: { id: string; version_id: string; title: string; source: string }
+	PackInstallStart: Record<string, never>
+	AccountLogIn: { source?: string }
+	AccountLogOut: Record<string, never>
+	JavaTest: { path: string; success: boolean }
+	JavaManualSelect: { version: string }
+	JavaAutoDetect: { path: string; version: string }
+	GalleryImageNext: { project_id: string; url: string }
+	GalleryImagePrevious: { project_id: string; url: unknown }
+	GalleryImageExpand: { project_id: string; url: string }
+}
+
+export type AnalyticsEvent = keyof AnalyticsEventMap
+
+let optedIn = false
+let debugEnabled = false
+
+export const initAnalytics = () => {
+	optedIn = true
+}
+
+export const debugAnalytics = () => {
+	debugEnabled = true
+}
+
+export const optOutAnalytics = () => {
+	optedIn = false
+}
+
+export const optInAnalytics = () => {
+	optedIn = true
+}
+
+type OptionalArgs<T> = Record<string, never> extends T ? [properties?: T] : [properties: T]
+
+export const trackEvent = <E extends AnalyticsEvent>(
+	eventName: E,
+	...args: OptionalArgs<AnalyticsEventMap[E]>
+) => {
+	if (optedIn && debugEnabled) {
+		console.debug('[Starlight telemetry disabled]', eventName, args[0])
+	}
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/helpers/events.js b/apps/app-frontend/src/helpers/events.js
index 713fee1..79ca5d0 100644
--- a/apps/app-frontend/src/helpers/events.js
+++ b/apps/app-frontend/src/helpers/events.js
@@ -82,6 +82,16 @@ export async function instance_bulk_update_progress_listener(callback) {
 	return await listen('instance_bulk_update_progress', (event) => callback(event.payload))
 }
 
+/// Payload for the 'instance_groups_changed' event
+/*
+	InstanceGroupsChangedPayload {
+		instance_ids: string[]
+	}
+*/
+export async function instance_groups_listener(callback) {
+	return await listen('instance_groups_changed', (event) => callback(event.payload))
+}
+
 export async function install_job_listener(callback) {
 	return await listen('install_job', (event) => callback(event.payload))
 }
diff --git a/apps/app-frontend/src/helpers/instance-groups.ts b/apps/app-frontend/src/helpers/instance-groups.ts
index 65e53e2..0221ed0 100644
--- a/apps/app-frontend/src/helpers/instance-groups.ts
+++ b/apps/app-frontend/src/helpers/instance-groups.ts
@@ -1 +1,46 @@
-export const MAX_INSTANCE_GROUP_NAME_LENGTH = 256
\ No newline at end of file
+import { invoke } from '@tauri-apps/api/core'
+
+export const MAX_INSTANCE_GROUP_NAME_LENGTH = 256
+
+export type InstanceGroupDefinition = {
+	id: string
+	name: string
+}
+
+export type InstanceGroupMembershipUpdate = {
+	instance_id: string
+	group_ids: string[]
+}
+
+export async function list_groups(): Promise<InstanceGroupDefinition[]> {
+	return await invoke('plugin:instance|instance_list_groups')
+}
+
+export async function create_group(name: string): Promise<InstanceGroupDefinition> {
+	return await invoke('plugin:instance|instance_create_group', { name })
+}
+
+export async function rename_group(id: string, newName: string): Promise<InstanceGroupDefinition> {
+	return await invoke('plugin:instance|instance_rename_group', {
+		id,
+		newName,
+	})
+}
+
+export async function delete_group(id: string): Promise<void> {
+	return await invoke('plugin:instance|instance_delete_group', { id })
+}
+
+export async function set_group_order(group_ids: string[]): Promise<void> {
+	return await invoke('plugin:instance|instance_set_group_order', {
+		groupIds: group_ids,
+	})
+}
+
+export async function set_group_memberships(
+	updates: InstanceGroupMembershipUpdate[],
+): Promise<void> {
+	return await invoke('plugin:instance|instance_set_group_memberships', {
+		updates,
+	})
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 0d67caa..5b89f02 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -11554,5 +11554,44 @@
   },
   "app.settings.logs.export.notification-text": {
     "message": "The log archive was saved to {path}"
-  }
-}
\ No newline at end of file
+  },
+  "app.instances.batch-edit-groups.add": {"message": "Add"},
+  "app.instances.batch-edit-groups.add-to-group-title": {"message": "Add instances to \"{groupName}\""},
+  "app.instances.batch-edit-groups.added": {"message": "Added"},
+  "app.instances.batch-edit-groups.cancel": {"message": "Cancel"},
+  "app.instances.batch-edit-groups.create": {"message": "Create group"},
+  "app.instances.batch-edit-groups.group-name": {"message": "Group name"},
+  "app.instances.batch-edit-groups.group-name-placeholder": {"message": "Enter group name"},
+  "app.instances.batch-edit-groups.no-instances-found": {"message": "No instances found"},
+  "app.instances.batch-edit-groups.save-changes": {"message": "Save"},
+  "app.instances.batch-edit-groups.search-instance": {"message": "Search instances"},
+  "app.instances.group.add-to-group": {"message": "Add to group"},
+  "app.instances.group.collapse": {"message": "Collapse group"},
+  "app.instances.group.delete-description": {"message": "Instances in this group will be ungrouped."},
+  "app.instances.group.delete-group": {"message": "Delete group"},
+  "app.instances.group.edit-name": {"message": "Edit group name"},
+  "app.instances.group.empty": {"message": "Drag and drop to add instances."},
+  "app.instances.group.expand": {"message": "Expand group"},
+  "app.instances.group.move-down": {"message": "Move group down"},
+  "app.instances.group.move-up": {"message": "Move group up"},
+  "app.instances.group.name-empty": {"message": "Group names cannot be empty."},
+  "app.instances.group.name-too-long": {"message": "Group names cannot be longer than {maxLength} characters."},
+  "app.instances.group.new-instance": {"message": "New instance"},
+  "app.instances.group.pinned": {"message": "Pinned"},
+  "app.instances.group.rename-group": {"message": "Rename group"},
+  "app.instances.sort-by": {"message": "Sort by"},
+  "app.instances.sort.direction.asc-alphabetical": {"message": "A–Z"},
+  "app.instances.sort.direction.asc-date": {"message": "Oldest first"},
+  "app.instances.sort.direction.asc-recency": {"message": "Least recent first"},
+  "app.instances.sort.direction.asc-version": {"message": "Oldest version first"},
+  "app.instances.sort.direction.desc-alphabetical": {"message": "Z–A"},
+  "app.instances.sort.direction.desc-date": {"message": "Newest first"},
+  "app.instances.sort.direction.desc-recency": {"message": "Most recent first"},
+  "app.instances.sort.direction.desc-version": {"message": "Newest version first"},
+  "app.library.context-menu.pin-instance": {"message": "Pin instance"},
+  "app.library.context-menu.remove-from-group": {"message": "Remove from group"},
+  "app.library.context-menu.unpin-instance": {"message": "Unpin instance"},
+  "app.library.group.new": {"message": "New group"},
+  "app.library.selection.new-group": {"message": "New group"},
+  "app.library.selection.remove-from-group": {"message": "Remove from group"}
+}
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 1ef17c2..00c8050 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11385,5 +11385,44 @@
 	"app.settings.logs.export.modal.cancel": { "message": "取消" },
 	"app.settings.logs.export.modal.confirm": { "message": "导出" },
 	"app.settings.logs.export.notification-title": { "message": "日志已导出" },
-	"app.settings.logs.export.notification-text": { "message": "日志压缩包已保存到 {path}" }
+	"app.settings.logs.export.notification-text": { "message": "日志压缩包已保存到 {path}" },
+  "app.instances.batch-edit-groups.add": {"message": "添加"},
+  "app.instances.batch-edit-groups.add-to-group-title": {"message": "添加实例到「{groupName}」"},
+  "app.instances.batch-edit-groups.added": {"message": "已添加"},
+  "app.instances.batch-edit-groups.cancel": {"message": "取消"},
+  "app.instances.batch-edit-groups.create": {"message": "创建分组"},
+  "app.instances.batch-edit-groups.group-name": {"message": "分组名称"},
+  "app.instances.batch-edit-groups.group-name-placeholder": {"message": "输入分组名称"},
+  "app.instances.batch-edit-groups.no-instances-found": {"message": "未找到实例"},
+  "app.instances.batch-edit-groups.save-changes": {"message": "保存"},
+  "app.instances.batch-edit-groups.search-instance": {"message": "搜索实例"},
+  "app.instances.group.add-to-group": {"message": "添加到分组"},
+  "app.instances.group.collapse": {"message": "折叠分组"},
+  "app.instances.group.delete-description": {"message": "此分组中的实例将被取消分组。"},
+  "app.instances.group.delete-group": {"message": "删除分组"},
+  "app.instances.group.edit-name": {"message": "编辑分组名称"},
+  "app.instances.group.empty": {"message": "拖放实例到此处添加。"},
+  "app.instances.group.expand": {"message": "展开分组"},
+  "app.instances.group.move-down": {"message": "下移分组"},
+  "app.instances.group.move-up": {"message": "上移分组"},
+  "app.instances.group.name-empty": {"message": "分组名称不能为空。"},
+  "app.instances.group.name-too-long": {"message": "分组名称不能超过 {maxLength} 个字符。"},
+  "app.instances.group.new-instance": {"message": "新建实例"},
+  "app.instances.group.pinned": {"message": "已置顶"},
+  "app.instances.group.rename-group": {"message": "重命名分组"},
+  "app.instances.sort-by": {"message": "排序方式"},
+  "app.instances.sort.direction.asc-alphabetical": {"message": "A–Z 正序"},
+  "app.instances.sort.direction.asc-date": {"message": "最早的在前"},
+  "app.instances.sort.direction.asc-recency": {"message": "最早游玩在前"},
+  "app.instances.sort.direction.asc-version": {"message": "旧版本在前"},
+  "app.instances.sort.direction.desc-alphabetical": {"message": "Z–A 倒序"},
+  "app.instances.sort.direction.desc-date": {"message": "最新的在前"},
+  "app.instances.sort.direction.desc-recency": {"message": "最近游玩在前"},
+  "app.instances.sort.direction.desc-version": {"message": "新版本在前"},
+  "app.library.context-menu.pin-instance": {"message": "置顶实例"},
+  "app.library.context-menu.remove-from-group": {"message": "移出分组"},
+  "app.library.context-menu.unpin-instance": {"message": "取消置顶"},
+  "app.library.group.new": {"message": "新建分组"},
+  "app.library.selection.new-group": {"message": "新建分组"},
+  "app.library.selection.remove-from-group": {"message": "移出分组"}
 }