feat(instance-sync): screenshots sync (#7218)

* pnpm prepr

* feat(instance-sync): screenshots sync

* fix: prepr + fmt

* fix: qa

* feat: screenshit editor

* feat: screenshot* editor qa

* fix: qa

* fix: lint

* fix: aecsocket rev

* qa: a11y tab navigation focus is cut off

* qa: Change “Edited” badge to be bg-highlight-green

* qa: friends list input style wrong

* qa: toolbar width + labels

* qa: multiselect changes

* qa: anim changes

* qa: card hover colors

* qa: copy feedback

* qa: hide date

* qa: instance icon in overflow/contextmenu

* qa: spacing

* qa: group empty state text

* qa: drag preview badge

* qa: group deletion skip warning if no screenshots

* qa: redesign editor

* qa: remove screenshot parent/edited badge stuff

* qa: control font size consistency

* qa: viewer copy control

* qa: editor fixes

* qa: redirect on disable screenshot sync

* qa: margin police

* fix: crop

* fix: qa

* feat: initial start on basic instance file syncing (#7220)

* qa: final

* qa: final 2

* fix: lint + prepr

* fix: copy

* fix: screenshot editing outside of app causing ghost files in db + sync fail rollback impl

* chore: split up

* fix: fmt

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -291,10 +291,11 @@ const messages = defineMessages({
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"
+				appearance="transparent"
 				:placeholder="formatMessage(messages.searchFriends)"
 				clearable
-				input-class="!bg-transparent !border !border-solid !border-button-bg !text-primary !placeholder:text-primary"
-				wrapper-class="flex-1 [&>svg]:!text-primary [&>svg]:!opacity-100"
+				input-class="!text-primary !placeholder:text-primary"
+				wrapper-class="flex-1 !border-button-bg [&>span:first-child]:!text-primary [&>span:first-child]:!opacity-100"
 				@keyup.esc="search = ''"
 			/>
 		</template>

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
 	CoffeeIcon,
-	GameIcon,
 	GaugeIcon,
 	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
+	RefreshCwIcon,
 	Settings2Icon,
 	ShieldIcon,
 	ToggleRightIcon,
@@ -33,7 +33,7 @@ import AppearanceSettings from '@/components/ui/settings/display/AppearanceSetti
 import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
 import LanguageSettings from '@/components/ui/settings/display/LanguageSettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultInstanceSettings.vue'
+import InstancesSyncedSettings from '@/components/ui/settings/instances/InstancesSyncedSettings.vue'
 import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
@@ -130,12 +130,12 @@ const tabs = [
 	},
 	{
 		name: defineMessage({
-			id: 'app.settings.tabs.default-instance-options',
-			defaultMessage: 'Default game options',
+			id: 'app.settings.tabs.synced-options',
+			defaultMessage: 'Synced settings',
 		}),
 		category: tabCategories.instances,
-		icon: GameIcon,
-		content: DefaultInstanceSettings,
+		icon: RefreshCwIcon,
+		content: InstancesSyncedSettings,
 	},
 	{
 		name: defineMessage({
@@ -232,7 +232,17 @@ function showFeatureFlags(): void {
 	modal.value?.show()
 }
 
-defineExpose({ show, showProfile, showFeatureFlags })
+function showSyncedOptions(): void {
+	const syncedOptionsTabIndex = availableTabs.value.findIndex(
+		(tab) => tab.content === InstancesSyncedSettings,
+	)
+	if (syncedOptionsTabIndex >= 0) {
+		modal.value?.setTab(syncedOptionsTabIndex)
+	}
+	modal.value?.show()
+}
+
+defineExpose({ show, showProfile, showFeatureFlags, showSyncedOptions })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 

apps/app-frontend/src/components/ui/screenshots-page/card.vue

@@ -0,0 +1,195 @@
+<script lang="ts"></script>
+
+<script setup lang="ts">
+import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
+import { CheckIcon, ClipboardCopyIcon, EditIcon, MoreHorizontalIcon } from '@modrinth/assets'
+import { defineMessages, IconButton, useFormatDateTime, useVIntl } from '@modrinth/ui'
+import { computed, onMounted, ref, watch } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+const loadedScreenshotUrls = new Set<string>()
+
+const props = defineProps<{
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	selected: boolean
+	selectionActive: boolean
+	activeDragged: boolean
+	canDrag: boolean
+	showInstanceName: boolean
+	highlighted: boolean
+	copied: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'activate', event: MouseEvent | KeyboardEvent): void
+	(e: 'copy' | 'edit' | 'toggle-selection'): void
+	(e: 'more', event: MouseEvent): void
+}>()
+
+const card = ref<HTMLElement>()
+const image = ref<HTMLImageElement>()
+const loaded = ref(loadedScreenshotUrls.has(props.screenshot.url))
+const { formatMessage } = useVIntl()
+const formatTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+const messages = defineMessages({
+	select: { id: 'app.screenshots.select', defaultMessage: 'Select {name}' },
+	deselect: { id: 'app.screenshots.deselect', defaultMessage: 'Deselect {name}' },
+	copy: { id: 'app.screenshots.copy', defaultMessage: 'Copy image' },
+	copied: { id: 'app.screenshots.copied', defaultMessage: 'Copied' },
+	edit: { id: 'app.screenshots.edit', defaultMessage: 'Edit screenshot' },
+	moreActions: { id: 'app.screenshots.more-actions', defaultMessage: 'More actions' },
+})
+
+const sensors = [
+	PointerSensor.configure({
+		preventActivation: () => false,
+	}),
+	KeyboardSensor,
+]
+
+useDraggable({
+	id: computed(() => `screenshot:${props.selectionKey}`),
+	element: card,
+	disabled: computed(() => !props.canDrag),
+	sensors,
+	data: computed(() => ({
+		selectionKey: props.selectionKey,
+		instanceId: props.screenshot.instance_id,
+	})),
+})
+
+function activate(event: MouseEvent | KeyboardEvent) {
+	if (event instanceof KeyboardEvent) {
+		if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) {
+			return
+		}
+		event.preventDefault()
+	}
+	emit('activate', event)
+}
+
+function markImageLoaded() {
+	loadedScreenshotUrls.add(props.screenshot.url)
+	loaded.value = true
+}
+
+onMounted(() => {
+	if (image.value?.complete && image.value.naturalWidth > 0) markImageLoaded()
+})
+
+watch(
+	() => props.screenshot.url,
+	(url) => {
+		loaded.value = loadedScreenshotUrls.has(url)
+	},
+)
+</script>
+
+<template>
+	<article
+		ref="card"
+		role="button"
+		tabindex="0"
+		class="group relative aspect-video min-w-0 cursor-pointer overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 p-0 text-left shadow-sm transition-[filter] hover:brightness-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:class="{
+			'!border-contrast brightness-110': selected,
+			'!border-brand ring-2 ring-brand animate-pulse': highlighted,
+			'opacity-50': activeDragged,
+			'cursor-grab active:cursor-grabbing': canDrag,
+		}"
+		data-screenshot-card
+		:data-screenshot-id="screenshot.id"
+		:data-selection-key="selectionKey"
+		:aria-label="
+			selectionActive
+				? formatMessage(selected ? messages.deselect : messages.select, {
+						name: screenshot.file_name,
+					})
+				: screenshot.file_name
+		"
+		:aria-pressed="selectionActive ? selected : undefined"
+		@click="activate"
+		@contextmenu.prevent.stop="emit('more', $event)"
+		@keydown="activate"
+	>
+		<button
+			type="button"
+			class="selection-button group/selection absolute right-0.5 top-0 z-[2] flex size-[50px] cursor-pointer items-start justify-center border-0 bg-transparent p-0 pt-4"
+			:aria-label="
+				formatMessage(selected ? messages.deselect : messages.select, {
+					name: screenshot.file_name,
+				})
+			"
+			:aria-pressed="selected"
+			@click.stop="emit('toggle-selection')"
+		>
+			<span
+				class="relative flex size-6 items-center justify-center rounded-full opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100 group-hover/selection:brightness-125"
+				:class="
+					selected ? 'border-0 !opacity-100' : 'border-2 border-solid border-primary bg-transparent'
+				"
+			>
+				<span v-if="selected" class="absolute inset-0 rounded-full bg-contrast" />
+				<CheckIcon v-if="selected" class="relative size-4 invert [stroke-width:3]" />
+			</span>
+		</button>
+		<div v-if="!loaded" class="absolute inset-0 animate-pulse bg-surface-3" />
+		<img
+			ref="image"
+			:src="screenshot.url"
+			:alt="screenshot.file_name"
+			loading="lazy"
+			draggable="false"
+			class="h-full w-full object-cover transition duration-200"
+			:class="loaded ? 'opacity-100' : 'opacity-0'"
+			@load="markImageLoaded"
+		/>
+		<div
+			class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t from-surface-1 to-transparent p-3 pt-[120px] text-contrast opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
+		>
+			<div class="min-w-0">
+				<div v-tooltip="screenshot.file_name" class="truncate text-sm font-semibold">
+					{{ screenshot.file_name }}
+				</div>
+				<div class="truncate text-xs text-secondary">
+					{{ showInstanceName ? screenshot.instance_name : formatTime(screenshot.created_at) }}
+				</div>
+			</div>
+			<div
+				v-if="!selectionActive"
+				class="flex shrink-0 translate-y-1 gap-1 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
+				@click.stop
+			>
+				<IconButton
+					v-tooltip="formatMessage(messages.edit)"
+					:label="formatMessage(messages.edit)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('edit')"
+				>
+					<EditIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(copied ? messages.copied : messages.copy)"
+					:label="formatMessage(copied ? messages.copied : messages.copy)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('copy')"
+				>
+					<CheckIcon v-if="copied" class="text-green" />
+					<ClipboardCopyIcon v-else />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.moreActions)"
+					:label="formatMessage(messages.moreActions)"
+					type="quiet"
+					class="bg-surface-2 text-contrast hover:bg-surface-3"
+					@click="emit('more', $event)"
+				>
+					<MoreHorizontalIcon />
+				</IconButton>
+			</div>
+		</div>
+	</article>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/drag-gather.vue

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

apps/app-frontend/src/components/ui/screenshots-page/drag-preview.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { TagItem } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import { gatherDuration } from './use-screenshot-drag-gather'
+
+const props = withDefaults(
+	defineProps<{
+		screenshot: InstanceScreenshot
+		count?: number
+	}>(),
+	{
+		count: 1,
+	},
+)
+
+const showGatheredCount = ref(false)
+let countTimer: number | undefined
+
+onMounted(() => {
+	if (props.count <= 1 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+		showGatheredCount.value = true
+		return
+	}
+
+	countTimer = window.setTimeout(() => {
+		showGatheredCount.value = true
+		countTimer = undefined
+	}, gatherDuration - 150)
+})
+
+onBeforeUnmount(() => {
+	if (countTimer !== undefined) {
+		clearTimeout(countTimer)
+	}
+})
+</script>
+
+<template>
+	<div aria-hidden="true" class="relative w-full select-none">
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-3 -bottom-2 top-2 rounded-xl border border-solid border-surface-5 bg-surface-2 shadow-md motion-safe:transition-opacity motion-safe:duration-200 motion-safe:delay-100 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-60' : 'opacity-0'"
+		/>
+		<div
+			v-if="count > 1"
+			class="absolute inset-x-1.5 -bottom-1 top-1 rounded-xl border border-solid border-surface-4 bg-surface-3 shadow-md motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			:class="showGatheredCount ? 'opacity-80' : 'opacity-0'"
+		/>
+		<div
+			class="relative aspect-video w-full overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 opacity-90 shadow-lg"
+		>
+			<img :src="screenshot.url" alt="" class="h-full w-full object-cover" />
+			<TagItem
+				v-if="count > 1"
+				class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-4 tabular-nums text-secondary motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
+			>
+				{{ count }}
+			</TagItem>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/group.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { useDroppable } from '@dnd-kit/vue'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+import ScreenshotCard from './card.vue'
+import ScreenshotSection from './section.vue'
+
+const props = defineProps<{
+	id: string
+	title: string
+	screenshots: InstanceScreenshot[]
+	selectedKeys: ReadonlySet<string>
+	selectionActive: boolean
+	activeDraggedKeys: ReadonlySet<string>
+	showDropOutline: boolean
+	canDrag: boolean
+	dropInstanceId?: string
+	dropCustomGroup?: boolean
+	dropCustomGroupId?: string
+	showInstanceName: boolean
+	highlightedScreenshotId?: string
+	copiedScreenshotIds: ReadonlySet<string>
+	forceOpen: boolean
+	animateEntry: boolean
+	hideHeader?: boolean
+	editableTitle?: boolean
+	startEditingTitle?: boolean
+	maxTitleLength?: number
+	validateTitle?: (value: string) => boolean
+	onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+}>()
+
+const collapsed = defineModel<boolean>('collapsed', { required: true })
+const dropTarget = ref<HTMLElement>()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	emptyGroup: {
+		id: 'app.screenshots.group.empty',
+		defaultMessage: 'Drag and drop to add screenshots.',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'activate', screenshot: InstanceScreenshot, event: MouseEvent | KeyboardEvent): void
+	(e: 'toggle-selection' | 'copy' | 'edit', screenshot: InstanceScreenshot): void
+	(e: 'more', screenshot: InstanceScreenshot, event: MouseEvent): void
+}>()
+
+useDroppable({
+	id: computed(() => `screenshot-group:${props.id}`),
+	element: dropTarget,
+	disabled: computed(() => !props.dropInstanceId && !props.dropCustomGroup),
+	data: computed(() =>
+		props.dropCustomGroup
+			? { groupId: props.id, customGroupId: props.dropCustomGroupId ?? null }
+			: { groupId: props.id, instanceId: props.dropInstanceId },
+	),
+})
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+</script>
+
+<template>
+	<div
+		ref="dropTarget"
+		class="group/instance-container relative select-none pb-3 transition-colors"
+	>
+		<Transition
+			enter-active-class="transition-opacity duration-150 ease-out"
+			enter-from-class="!opacity-0"
+			enter-to-class="opacity-100"
+			leave-active-class="transition-opacity duration-150 ease-in"
+			leave-from-class="opacity-100"
+			leave-to-class="!opacity-0"
+		>
+			<div
+				v-if="showDropOutline"
+				class="pointer-events-none absolute -inset-2 inset-y-0 z-20 rounded-xl border-2 border-dashed border-contrast bg-transparent opacity-40"
+			/>
+		</Transition>
+		<ScreenshotSection
+			v-model:collapsed="collapsed"
+			:title="title"
+			:count="screenshots.length"
+			:force-open="forceOpen"
+			:hide-header="hideHeader"
+			:editable="editableTitle"
+			:start-editing="startEditingTitle"
+			:max-title-length="maxTitleLength"
+			:validate-title="validateTitle"
+			:on-title-change="onTitleChange"
+		>
+			<template #actions="{ startEditing }">
+				<slot name="actions" :start-editing="startEditing" />
+			</template>
+			<TransitionGroup
+				tag="div"
+				class="grid min-h-[45px] w-full grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4"
+				move-class="transition-transform duration-200 ease-out motion-reduce:transition-none"
+				:enter-active-class="
+					animateEntry
+						? 'transition-[opacity,transform] duration-[150ms] ease-out motion-reduce:transition-none'
+						: ''
+				"
+				:enter-from-class="animateEntry ? 'opacity-0' : ''"
+				enter-to-class="opacity-100 scale-100"
+			>
+				<ScreenshotCard
+					v-for="screenshot in screenshots"
+					:key="getSelectionKey(screenshot)"
+					:screenshot="screenshot"
+					:selection-key="getSelectionKey(screenshot)"
+					:selected="selectedKeys.has(getSelectionKey(screenshot))"
+					:selection-active="selectionActive"
+					:active-dragged="activeDraggedKeys.has(getSelectionKey(screenshot))"
+					:can-drag="canDrag"
+					:show-instance-name="showInstanceName"
+					:highlighted="highlightedScreenshotId === screenshot.id"
+					:copied="copiedScreenshotIds.has(screenshot.id)"
+					@activate="(event) => emit('activate', screenshot, event)"
+					@toggle-selection="emit('toggle-selection', screenshot)"
+					@copy="emit('copy', screenshot)"
+					@edit="emit('edit', screenshot)"
+					@more="(event) => emit('more', screenshot, event)"
+				/>
+				<p
+					v-if="screenshots.length === 0"
+					key="empty-group"
+					class="col-span-full m-0 pl-0.5 pt-1 text-base font-base text-secondary opacity-80"
+				>
+					{{ formatMessage(messages.emptyGroup) }}
+				</p>
+			</TransitionGroup>
+		</ScreenshotSection>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/section.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	commonMessages,
+	defineMessages,
+	InlineEditableText,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { nextTick, ref, watch } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		title: string
+		count: number
+		collapsed?: boolean
+		forceOpen?: boolean
+		hideHeader?: boolean
+		editable?: boolean
+		startEditing?: boolean
+		maxTitleLength?: number
+		validateTitle?: (value: string) => boolean
+		onTitleChange?: (value: string) => boolean | void | Promise<boolean | void>
+	}>(),
+	{
+		collapsed: false,
+		forceOpen: false,
+		hideHeader: false,
+		editable: false,
+		startEditing: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'update:collapsed', collapsed: boolean): void
+}>()
+
+const { formatMessage } = useVIntl()
+const accordion = ref<InstanceType<typeof Accordion>>()
+const titleInput = ref<InstanceType<typeof InlineEditableText>>()
+const titleModel = ref(props.title)
+const messages = defineMessages({
+	collapse: { id: 'app.screenshots.group.collapse', defaultMessage: 'Collapse group' },
+	expand: { id: 'app.screenshots.group.expand', defaultMessage: 'Expand group' },
+})
+
+function toggle() {
+	if (accordion.value?.isOpen) {
+		accordion.value.close()
+	} else {
+		accordion.value?.open()
+	}
+}
+
+async function startTitleEditing() {
+	if (!props.editable) return
+	await titleInput.value?.startEditing()
+}
+
+watch(
+	() => props.title,
+	(title) => {
+		titleModel.value = title
+	},
+)
+
+watch(
+	() => props.startEditing,
+	async (shouldStartEditing) => {
+		if (!shouldStartEditing) return
+		await nextTick()
+		await startTitleEditing()
+	},
+	{ immediate: true, flush: 'post' },
+)
+</script>
+
+<template>
+	<section class="flex w-full flex-col">
+		<div
+			v-if="!hideHeader"
+			class="group/header flex h-10 w-full items-center gap-2 border-0 border-b border-solid border-b-surface-5"
+		>
+			<div class="group/open-target flex min-w-0 cursor-pointer items-center gap-2" @click="toggle">
+				<button
+					type="button"
+					class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0"
+					:aria-expanded="accordion?.isOpen"
+					:aria-label="formatMessage(accordion?.isOpen ? messages.collapse : messages.expand)"
+					@click.stop="toggle"
+				>
+					<DropdownIcon
+						class="size-5 shrink-0 text-secondary transition-all duration-300 group-hover/open-target:text-primary"
+						:class="{ 'rotate-180': accordion?.isOpen }"
+					/>
+				</button>
+				<InlineEditableText
+					v-if="editable"
+					ref="titleInput"
+					v-model="titleModel"
+					activation-mode="manual"
+					class="!h-10 select-none text-base font-semibold text-primary group-hover/open-target:text-contrast"
+					:edit-label="formatMessage(commonMessages.renameButton)"
+					max-width="24rem"
+					icon-text-class="select-none"
+					:max-length="maxTitleLength"
+					:validate="validateTitle"
+					:on-change="onTitleChange"
+				/>
+				<span
+					v-else
+					class="select-none truncate text-base font-semibold text-primary group-hover/open-target:text-contrast"
+				>
+					{{ title }}
+				</span>
+				<TagItem v-if="count" class="shrink-0 border-surface-3 bg-surface-2">
+					{{ count }}
+				</TagItem>
+			</div>
+			<div class="min-w-0 flex-1" />
+			<slot name="actions" :start-editing="startTitleEditing" />
+		</div>
+		<Accordion
+			ref="accordion"
+			:open-by-default="hideHeader || !props.collapsed"
+			:force-open="forceOpen"
+			overflow-visible
+			class="w-full"
+			@on-open="emit('update:collapsed', false)"
+			@on-close="emit('update:collapsed', true)"
+		>
+			<div class="mt-2.5">
+				<slot />
+			</div>
+		</Accordion>
+	</section>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/toolbar.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ArrowUpDownIcon, LayoutGridIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	Input,
+	useVIntl,
+} from '@modrinth/ui'
+
+const search = defineModel<string>('search', { required: true })
+const sort = defineModel<string>('sort', { required: true })
+const group = defineModel<string>('group', { required: true })
+
+defineProps<{
+	sortOptions: ComboboxOption<string>[]
+	groupOptions: ComboboxOption<string>[]
+}>()
+
+const emit = defineEmits<{
+	(e: 'new-group'): void
+}>()
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	search: { id: 'app.screenshots.search', defaultMessage: 'Search' },
+	newGroup: { id: 'app.screenshots.group.new', defaultMessage: 'New group' },
+	sortBy: { id: 'app.screenshots.sort-by', defaultMessage: 'Sort by' },
+	groupBy: { id: 'app.screenshots.group-by', defaultMessage: 'Group by' },
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<Input
+				v-model="search"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.search)"
+				clearable
+				wrapper-class="min-w-[16rem] flex-1"
+			/>
+			<Button @click="emit('new-group')">
+				<SquarePlusIcon />
+				{{ formatMessage(messages.newGroup) }}
+			</Button>
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<Combobox
+				v-model="sort"
+				class="w-max"
+				:options="sortOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<ArrowUpDownIcon
+						class="size-5 text-primary"
+						:aria-label="formatMessage(messages.sortBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+			<Combobox
+				v-model="group"
+				class="w-max"
+				:options="groupOptions"
+				:show-icon-in-selected="false"
+				dropdown-min-width="160px"
+			>
+				<template #prefix>
+					<LayoutGridIcon
+						class="size-5 text-primary"
+						:aria-label="formatMessage(messages.groupBy)"
+					/>
+				</template>
+				<template #selected="{ label }">
+					<span>{{ label }}</span>
+				</template>
+			</Combobox>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/components/ui/screenshots-page/use-screenshot-drag-gather.ts

@@ -0,0 +1,130 @@
+import { onBeforeUnmount, type Ref, ref } from 'vue'
+
+import type { InstanceScreenshot } from '@/helpers/instance'
+
+type Point = {
+	x: number
+	y: number
+}
+
+export type ActiveScreenshotDrag = {
+	primarySelectionKey: string
+	selectionKeys: string[]
+}
+
+export const gatherDuration = 500
+
+export type ScreenshotDragGatherItem = {
+	screenshot: InstanceScreenshot
+	selectionKey: string
+	rect: {
+		left: number
+		top: number
+		width: number
+		height: number
+	}
+}
+
+function getSelectionKey(screenshot: InstanceScreenshot) {
+	return JSON.stringify([screenshot.instance_id, screenshot.file_name])
+}
+
+export function useScreenshotDragGather(screenshots: Ref<InstanceScreenshot[]>) {
+	const items = ref<ScreenshotDragGatherItem[]>([])
+	const target = ref<Point>({ x: 0, y: 0 })
+	const targetOffset = ref<Point>({ x: 0, y: 0 })
+	const isGathering = ref(false)
+	let cleanupTimer: number | undefined
+
+	const clearCleanupTimer = () => {
+		if (cleanupTimer !== undefined) {
+			clearTimeout(cleanupTimer)
+			cleanupTimer = undefined
+		}
+	}
+
+	const clear = () => {
+		clearCleanupTimer()
+		items.value = []
+		targetOffset.value = { x: 0, y: 0 }
+		isGathering.value = false
+	}
+
+	const updateTarget = (pointer: Point) => {
+		target.value = {
+			x: pointer.x + targetOffset.value.x,
+			y: pointer.y + targetOffset.value.y,
+		}
+	}
+
+	const start = (drag: ActiveScreenshotDrag | null, pointer: Point) => {
+		clear()
+
+		const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		if (!drag || drag.selectionKeys.length < 2 || reduceMotion) return
+
+		const screenshotCards = Array.from(
+			document.querySelectorAll<HTMLElement>('[data-screenshot-card]'),
+		)
+		const sourceCard = screenshotCards.find(
+			(card) => card.dataset.selectionKey === drag.primarySelectionKey,
+		)
+
+		if (sourceCard) {
+			const sourceRect = sourceCard.getBoundingClientRect()
+			targetOffset.value = {
+				x: sourceRect.left + sourceRect.width / 2 - pointer.x,
+				y: sourceRect.top + sourceRect.height / 2 - pointer.y,
+			}
+		}
+
+		const screenshotsByKey = new Map(
+			screenshots.value.map((screenshot) => [getSelectionKey(screenshot), screenshot]),
+		)
+		items.value = drag.selectionKeys.flatMap((selectionKey) => {
+			const screenshot = screenshotsByKey.get(selectionKey)
+			const card = screenshotCards.find(
+				(candidate) =>
+					candidate.dataset.selectionKey === selectionKey && candidate.getClientRects().length > 0,
+			)
+			if (!screenshot || !card) return []
+
+			const rect = card.getBoundingClientRect()
+			return [
+				{
+					screenshot,
+					selectionKey,
+					rect: {
+						left: rect.left,
+						top: rect.top,
+						width: rect.width,
+						height: rect.height,
+					},
+				},
+			]
+		})
+		updateTarget(pointer)
+		isGathering.value = items.value.length > 0
+	}
+
+	const finish = () => {
+		isGathering.value = false
+		clearCleanupTimer()
+		cleanupTimer = window.setTimeout(() => {
+			items.value = []
+			cleanupTimer = undefined
+		}, 400)
+	}
+
+	onBeforeUnmount(clearCleanupTimer)
+
+	return {
+		items,
+		target,
+		isGathering,
+		start,
+		updateTarget,
+		clear,
+		finish,
+	}
+}

apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue

@@ -1,362 +0,0 @@
-<script setup lang="ts">
-import {
-	defineMessages,
-	injectNotificationManager,
-	Input,
-	Slider,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import useMemorySlider from '@/composables/useMemorySlider'
-import { get, parseEnvVars, serializeEnvVars, set } from '@/helpers/settings.ts'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	fullscreenTitle: {
-		id: 'app.settings.default-instance-options.fullscreen.title',
-		defaultMessage: 'Fullscreen',
-	},
-	fullscreenDescription: {
-		id: 'app.settings.default-instance-options.fullscreen.description',
-		defaultMessage: 'Start instances in fullscreen by updating their options.txt file.',
-	},
-	widthTitle: {
-		id: 'app.settings.default-instance-options.width.title',
-		defaultMessage: 'Width',
-	},
-	widthDescription: {
-		id: 'app.settings.default-instance-options.width.description',
-		defaultMessage: 'The width of the game window when launched.',
-	},
-	widthPlaceholder: {
-		id: 'app.settings.default-instance-options.width.placeholder',
-		defaultMessage: 'Enter width...',
-	},
-	heightTitle: {
-		id: 'app.settings.default-instance-options.height.title',
-		defaultMessage: 'Height',
-	},
-	heightDescription: {
-		id: 'app.settings.default-instance-options.height.description',
-		defaultMessage: 'The height of the game window when launched.',
-	},
-	heightPlaceholder: {
-		id: 'app.settings.default-instance-options.height.placeholder',
-		defaultMessage: 'Enter height...',
-	},
-	memoryAllocationTitle: {
-		id: 'app.settings.default-instance-options.memory-allocation.title',
-		defaultMessage: 'Memory allocation',
-	},
-	memoryAllocationDescription: {
-		id: 'app.settings.default-instance-options.memory-allocation.description',
-		defaultMessage: 'Maximum memory available to each instance.',
-	},
-	javaArgumentsTitle: {
-		id: 'app.settings.default-instance-options.java-arguments.title',
-		defaultMessage: 'Java arguments',
-	},
-	javaArgumentsPlaceholder: {
-		id: 'app.settings.default-instance-options.java-arguments.placeholder',
-		defaultMessage: 'Enter Java arguments...',
-	},
-	javaArgumentsDescription: {
-		id: 'app.settings.default-instance-options.java-arguments.description',
-		defaultMessage: 'Arguments passed to Java when launching an instance.',
-	},
-	environmentVariablesTitle: {
-		id: 'app.settings.default-instance-options.environment-variables.title',
-		defaultMessage: 'Environment variables',
-	},
-	environmentVariablesPlaceholder: {
-		id: 'app.settings.default-instance-options.environment-variables.placeholder',
-		defaultMessage: 'Enter environment variables...',
-	},
-	environmentVariablesDescription: {
-		id: 'app.settings.default-instance-options.environment-variables.description',
-		defaultMessage: 'Environment variables set when launching an instance.',
-	},
-	preLaunchHookTitle: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.title',
-		defaultMessage: 'Pre-launch hook',
-	},
-	preLaunchHookPlaceholder: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.placeholder',
-		defaultMessage: 'Enter pre-launch command...',
-	},
-	preLaunchHookDescription: {
-		id: 'app.settings.default-instance-options.pre-launch-hook.description',
-		defaultMessage: 'Runs before the instance starts.',
-	},
-	wrapperHookTitle: {
-		id: 'app.settings.default-instance-options.wrapper-hook.title',
-		defaultMessage: 'Wrapper hook',
-	},
-	wrapperHookPlaceholder: {
-		id: 'app.settings.default-instance-options.wrapper-hook.placeholder',
-		defaultMessage: 'Enter wrapper command...',
-	},
-	wrapperHookDescription: {
-		id: 'app.settings.default-instance-options.wrapper-hook.description',
-		defaultMessage: 'Command used to wrap the Minecraft launch process.',
-	},
-	postExitHookTitle: {
-		id: 'app.settings.default-instance-options.post-exit-hook.title',
-		defaultMessage: 'Post-exit hook',
-	},
-	postExitHookPlaceholder: {
-		id: 'app.settings.default-instance-options.post-exit-hook.placeholder',
-		defaultMessage: 'Enter post-exit command...',
-	},
-	postExitHookDescription: {
-		id: 'app.settings.default-instance-options.post-exit-hook.description',
-		defaultMessage: 'Runs after the game closes.',
-	},
-	hookVariablesDescription: {
-		id: 'instance.settings.tabs.hooks.variables.description',
-		defaultMessage:
-			'Hooks run in the working directory of the instance, with the following variables:',
-	},
-	instanceNameDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
-		defaultMessage: '$INST_NAME: The name of the instance',
-	},
-	instanceIdDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
-		defaultMessage: "$INST_ID: The name of the instance's folder",
-	},
-	instanceDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
-		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
-	},
-	instanceMcDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
-		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
-	},
-	instanceJavaDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
-		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
-	},
-	instanceJavaArgsDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
-		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
-	},
-})
-
-const fetchSettings = await get()
-fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
-fetchSettings.envVars = serializeEnvVars(fetchSettings.custom_env_vars)
-
-const settings = ref(fetchSettings)
-
-const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
-	maxMemory: number
-	snapPoints: number[]
-}
-
-watch(
-	settings,
-	async () => {
-		const setSettings = JSON.parse(JSON.stringify(settings.value))
-
-		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
-		setSettings.custom_env_vars = parseEnvVars(setSettings.envVars)
-		delete setSettings.launchArgs
-		delete setSettings.envVars
-
-		if (!setSettings.custom_dir) {
-			setSettings.custom_dir = null
-		}
-
-		await set(setSettings).catch(handleError)
-	},
-	{ deep: true },
-)
-</script>
-
-<template>
-	<div>
-		<div class="flex flex-col gap-6">
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.fullscreenTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.fullscreenDescription) }}
-					</p>
-				</div>
-
-				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.widthTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.widthDescription) }}
-					</p>
-				</div>
-
-				<Input
-					id="width"
-					v-model="settings.game_resolution[0]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					:placeholder="formatMessage(messages.widthPlaceholder)"
-				/>
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.heightTitle) }}
-					</h3>
-					<p class="m-0 leading-tight">
-						{{ formatMessage(messages.heightDescription) }}
-					</p>
-				</div>
-
-				<Input
-					id="height"
-					v-model="settings.game_resolution[1]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					:placeholder="formatMessage(messages.heightPlaceholder)"
-				/>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.memoryAllocationTitle) }}
-				</h2>
-				<Slider
-					id="max-memory"
-					v-model="settings.memory.maximum"
-					:min="512"
-					:max="maxMemory"
-					:step="64"
-					:snap-points="snapPoints"
-					:snap-range="512"
-					unit="MB"
-				/>
-				<p class="m-0 mt-1 leading-tight">
-					{{ formatMessage(messages.memoryAllocationDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.javaArgumentsTitle) }}
-				</h2>
-				<Input
-					id="java-args"
-					v-model="settings.launchArgs"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.javaArgumentsPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.javaArgumentsDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.environmentVariablesTitle) }}
-				</h2>
-				<Input
-					id="env-vars"
-					v-model="settings.envVars"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.environmentVariablesPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.environmentVariablesDescription) }}
-				</p>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.preLaunchHookTitle) }}
-				</h3>
-				<Input
-					id="pre-launch"
-					v-model="settings.hooks.pre_launch"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.preLaunchHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.preLaunchHookDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.wrapperHookTitle) }}
-				</h3>
-				<Input
-					id="wrapper"
-					v-model="settings.hooks.wrapper"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.wrapperHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.wrapperHookDescription) }}
-				</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.postExitHookTitle) }}
-				</h3>
-				<Input
-					id="post-exit"
-					v-model="settings.hooks.post_exit"
-					autocomplete="off"
-					type="text"
-					:placeholder="formatMessage(messages.postExitHookPlaceholder)"
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">
-					{{ formatMessage(messages.postExitHookDescription) }}
-				</p>
-			</div>
-
-			<div class="m-0 leading-tight">
-				{{ formatMessage(messages.hookVariablesDescription) }}
-				<ul>
-					<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</template>

apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue

@@ -0,0 +1,887 @@
+<script setup lang="ts">
+import {
+	EditIcon,
+	// FolderOpenIcon,
+	SaveIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	IconButton,
+	injectNotificationManager,
+	Input,
+	NewModal,
+	Slider,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Component } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import useMemorySlider from '@/composables/useMemorySlider'
+import {
+	get_command_history,
+	get_global_synced_options,
+	type GlobalSyncedOptions,
+	list_synced_servers,
+	// open_synced_options_folder,
+	remove_synced_server,
+	set_command_history,
+	set_global_synced_option,
+	type SyncedOption,
+	type SyncedServer,
+	update_synced_server,
+} from '@/helpers/instance'
+import { get, parseEnvVars, serializeEnvVars, set } from '@/helpers/settings.ts'
+import {
+	refreshServerData,
+	refreshServers,
+	type ServerData,
+	type ServerWorld,
+} from '@/helpers/worlds.ts'
+import { instanceKeys, screenshotKeys } from '@/pages/instance/query-options'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()
+
+const messages = defineMessages({
+	// syncedDescription: {
+	// 	id: 'app.settings.synced-options.description',
+	// 	defaultMessage:
+	// 		'Sync options and config across instances so you don’t have to set them up every time.',
+	// },
+	// syncedFolder: {
+	// 	id: 'app.settings.synced-options.folder',
+	// 	defaultMessage: 'Synced folder',
+	// },
+	multiplayerServers: {
+		id: 'app.settings.synced-options.multiplayer-servers',
+		defaultMessage: 'Multiplayer servers',
+	},
+	multiplayerServersDescription: {
+		id: 'app.settings.synced-options.multiplayer-servers.description',
+		defaultMessage: 'Sync multiplayer servers across your instances.',
+	},
+	commandHistory: {
+		id: 'app.settings.synced-options.command-history',
+		defaultMessage: 'Command history',
+	},
+	commandHistoryDescription: {
+		id: 'app.settings.synced-options.command-history.description',
+		defaultMessage: 'Sync command history across your instances.',
+	},
+	creativeHotbars: {
+		id: 'app.settings.synced-options.creative-hotbars',
+		defaultMessage: 'Saved creative hotbars',
+	},
+	creativeHotbarsDescription: {
+		id: 'app.settings.synced-options.creative-hotbars.description',
+		defaultMessage: 'Sync saved creative hotbars across your instances.',
+	},
+	screenshots: {
+		id: 'app.settings.synced-options.screenshots',
+		defaultMessage: 'Screenshots',
+	},
+	screenshotsDescription: {
+		id: 'app.settings.synced-options.screenshots.description',
+		defaultMessage: 'View screenshots from your instances in one place.',
+	},
+	commandHistoryEditorTitle: {
+		id: 'app.settings.synced-options.command-history.editor-title',
+		defaultMessage: 'Edit command history',
+	},
+	serverEditorTitle: {
+		id: 'app.settings.synced-options.multiplayer-servers.editor-title',
+		defaultMessage: 'Edit synced servers',
+	},
+	editServerTitle: {
+		id: 'instance.edit-server.title',
+		defaultMessage: 'Edit server',
+	},
+	serverName: {
+		id: 'app.settings.synced-options.multiplayer-servers.name',
+		defaultMessage: 'Server name',
+	},
+	serverAddress: {
+		id: 'app.settings.synced-options.multiplayer-servers.address',
+		defaultMessage: 'Server address',
+	},
+	noSyncedServers: {
+		id: 'app.settings.synced-options.multiplayer-servers.empty',
+		defaultMessage: 'No user-added servers are currently synced.',
+	},
+	noServersSyncedYet: {
+		id: 'app.settings.synced-options.multiplayer-servers.none-synced-yet',
+		defaultMessage: 'No servers synced yet',
+	},
+	windowSectionTitle: {
+		id: 'app.settings.default-instance-options.window.title',
+		defaultMessage: 'Window',
+	},
+	javaAndMemorySectionTitle: {
+		id: 'app.settings.default-instance-options.java-and-memory.title',
+		defaultMessage: 'Java and memory',
+	},
+	launchHooksSectionTitle: {
+		id: 'app.settings.default-instance-options.launch-hooks.title',
+		defaultMessage: 'Launch hooks',
+	},
+	fullscreenTitle: {
+		id: 'app.settings.default-instance-options.fullscreen.title',
+		defaultMessage: 'Fullscreen',
+	},
+	fullscreenDescription: {
+		id: 'app.settings.default-instance-options.fullscreen.description',
+		defaultMessage: 'Start instances in fullscreen by updating their options.txt file.',
+	},
+	widthTitle: {
+		id: 'app.settings.default-instance-options.width.title',
+		defaultMessage: 'Width',
+	},
+	widthDescription: {
+		id: 'app.settings.default-instance-options.width.description',
+		defaultMessage: 'The width of the game window when launched.',
+	},
+	widthPlaceholder: {
+		id: 'app.settings.default-instance-options.width.placeholder',
+		defaultMessage: 'Enter width...',
+	},
+	heightTitle: {
+		id: 'app.settings.default-instance-options.height.title',
+		defaultMessage: 'Height',
+	},
+	heightDescription: {
+		id: 'app.settings.default-instance-options.height.description',
+		defaultMessage: 'The height of the game window when launched.',
+	},
+	heightPlaceholder: {
+		id: 'app.settings.default-instance-options.height.placeholder',
+		defaultMessage: 'Enter height...',
+	},
+	memoryAllocationTitle: {
+		id: 'app.settings.default-instance-options.memory-allocation.title',
+		defaultMessage: 'Memory allocation',
+	},
+	memoryAllocationDescription: {
+		id: 'app.settings.default-instance-options.memory-allocation.description',
+		defaultMessage: 'Maximum memory available to each instance.',
+	},
+	javaArgumentsTitle: {
+		id: 'app.settings.default-instance-options.java-arguments.title',
+		defaultMessage: 'Java arguments',
+	},
+	javaArgumentsPlaceholder: {
+		id: 'app.settings.default-instance-options.java-arguments.placeholder',
+		defaultMessage: 'Enter Java arguments...',
+	},
+	javaArgumentsDescription: {
+		id: 'app.settings.default-instance-options.java-arguments.description',
+		defaultMessage: 'Arguments passed to Java when launching an instance.',
+	},
+	environmentVariablesTitle: {
+		id: 'app.settings.default-instance-options.environment-variables.title',
+		defaultMessage: 'Environment variables',
+	},
+	environmentVariablesPlaceholder: {
+		id: 'app.settings.default-instance-options.environment-variables.placeholder',
+		defaultMessage: 'Enter environment variables...',
+	},
+	environmentVariablesDescription: {
+		id: 'app.settings.default-instance-options.environment-variables.description',
+		defaultMessage: 'Environment variables set when launching an instance.',
+	},
+	preLaunchHookTitle: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.title',
+		defaultMessage: 'Pre-launch hook',
+	},
+	preLaunchHookPlaceholder: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.placeholder',
+		defaultMessage: 'Enter pre-launch command...',
+	},
+	preLaunchHookDescription: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.description',
+		defaultMessage: 'Runs before the instance starts.',
+	},
+	wrapperHookTitle: {
+		id: 'app.settings.default-instance-options.wrapper-hook.title',
+		defaultMessage: 'Wrapper hook',
+	},
+	wrapperHookPlaceholder: {
+		id: 'app.settings.default-instance-options.wrapper-hook.placeholder',
+		defaultMessage: 'Enter wrapper command...',
+	},
+	wrapperHookDescription: {
+		id: 'app.settings.default-instance-options.wrapper-hook.description',
+		defaultMessage: 'Command used to wrap the Minecraft launch process.',
+	},
+	postExitHookTitle: {
+		id: 'app.settings.default-instance-options.post-exit-hook.title',
+		defaultMessage: 'Post-exit hook',
+	},
+	postExitHookPlaceholder: {
+		id: 'app.settings.default-instance-options.post-exit-hook.placeholder',
+		defaultMessage: 'Enter post-exit command...',
+	},
+	postExitHookDescription: {
+		id: 'app.settings.default-instance-options.post-exit-hook.description',
+		defaultMessage: 'Runs after the game closes.',
+	},
+	hookVariablesDescription: {
+		id: 'instance.settings.tabs.hooks.variables.description',
+		defaultMessage:
+			'Hooks run in the working directory of the instance, with the following variables:',
+	},
+	instanceNameDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
+		defaultMessage: '$INST_NAME: The name of the instance',
+	},
+	instanceIdDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
+		defaultMessage: "$INST_ID: The name of the instance's folder",
+	},
+	instanceDirDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
+		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
+	},
+	instanceMcDirDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
+		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
+	},
+	instanceJavaDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
+		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
+	},
+	instanceJavaArgsDescription: {
+		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
+		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
+	},
+})
+
+const globalRows: Array<{
+	option: SyncedOption
+	title: keyof typeof messages
+	description?: keyof typeof messages
+	editable?: 'servers' | 'commands'
+}> = [
+	{
+		option: 'multiplayer_servers',
+		title: 'multiplayerServers',
+		description: 'multiplayerServersDescription',
+		editable: 'servers',
+	},
+	{
+		option: 'command_history',
+		title: 'commandHistory',
+		description: 'commandHistoryDescription',
+		editable: 'commands',
+	},
+	{
+		option: 'creative_hotbars',
+		title: 'creativeHotbars',
+		description: 'creativeHotbarsDescription',
+	},
+	{
+		option: 'screenshots',
+		title: 'screenshots',
+		description: 'screenshotsDescription',
+	},
+]
+
+const globalSyncedOptionsQueryKey = ['global-synced-options'] as const
+const globalSyncedOptionsMutationKey = ['global-synced-options', 'set'] as const
+const defaultGlobalOptions: GlobalSyncedOptions = {
+	command_history: false,
+	multiplayer_servers: false,
+	creative_hotbars: false,
+	screenshots: false,
+}
+
+const globalOptionsQuery = useQuery({
+	queryKey: globalSyncedOptionsQueryKey,
+	queryFn: get_global_synced_options,
+})
+const globalOptions = computed(() => globalOptionsQuery.data.value ?? defaultGlobalOptions)
+const commandHistoryModal = ref<InstanceType<typeof NewModal> | null>(null)
+const serverEditorModal = ref<InstanceType<typeof NewModal> | null>(null)
+const editServerModal = ref<InstanceType<typeof NewModal> | null>(null)
+const commandHistory = ref('')
+const syncedServers = ref<SyncedServer[]>(
+	(await list_synced_servers().catch((error) => {
+		handleError(error)
+		return []
+	})) ?? [],
+)
+const editedServer = ref<SyncedServer | null>(null)
+const serverData = ref<Record<string, ServerData>>({})
+const editorComponent = shallowRef<Component | null>(null)
+
+const syncedServerCards = computed(() =>
+	syncedServers.value.map((server, index) => ({
+		server,
+		world: {
+			name: server.name,
+			type: 'server',
+			index,
+			server_id: server.id,
+			address: server.address,
+			pack_status:
+				server.accept_textures === true
+					? 'enabled'
+					: server.accept_textures === false
+						? 'disabled'
+						: 'prompt',
+			display_status: 'normal',
+		} satisfies ServerWorld,
+	})),
+)
+
+async function invalidateSyncedOptions() {
+	await Promise.all([
+		queryClient.invalidateQueries({ queryKey: instanceKeys.all }),
+		queryClient.invalidateQueries({ queryKey: ['instance-synced-options'] }),
+		queryClient.invalidateQueries({ queryKey: globalSyncedOptionsQueryKey }),
+		queryClient.invalidateQueries({ queryKey: screenshotKeys.all }),
+	])
+}
+
+type GlobalOptionMutationVariables = {
+	option: SyncedOption
+	enabled: boolean
+}
+
+const globalOptionMutation = useMutation({
+	mutationKey: globalSyncedOptionsMutationKey,
+	mutationFn: ({ option, enabled }: GlobalOptionMutationVariables) =>
+		set_global_synced_option(option, enabled),
+	onMutate: async ({ option, enabled }) => {
+		await queryClient.cancelQueries({ queryKey: globalSyncedOptionsQueryKey })
+		const previous = globalOptions.value[option]
+
+		queryClient.setQueryData<GlobalSyncedOptions>(globalSyncedOptionsQueryKey, (current) => ({
+			...(current ?? defaultGlobalOptions),
+			[option]: enabled,
+		}))
+
+		return { previous }
+	},
+	onError: (error, { option }, context) => {
+		queryClient.setQueryData<GlobalSyncedOptions>(globalSyncedOptionsQueryKey, (current) => ({
+			...(current ?? defaultGlobalOptions),
+			[option]: context?.previous ?? defaultGlobalOptions[option],
+		}))
+		handleError(error)
+	},
+	onSettled: async () => {
+		if (queryClient.isMutating({ mutationKey: globalSyncedOptionsMutationKey }) === 1) {
+			await invalidateSyncedOptions()
+		}
+	},
+})
+
+function applyGlobalOption(option: SyncedOption, enabled: boolean) {
+	globalOptionMutation.mutate({ option, enabled })
+}
+
+function toggleGlobalOption(option: SyncedOption, enabled: boolean) {
+	applyGlobalOption(option, enabled)
+}
+
+async function openCommandHistoryEditor() {
+	commandHistory.value = await get_command_history().catch((error) => {
+		handleError(error)
+		return ''
+	})
+	if (!editorComponent.value) {
+		const [editor] = await Promise.all([
+			import('vue3-ace-editor'),
+			import('@modrinth/ui/src/utils/ace-theme'),
+			import('@modrinth/ui/src/utils/ace-mode-mcfunction'),
+		])
+		editorComponent.value = editor.VAceEditor
+	}
+	commandHistoryModal.value?.show()
+}
+
+async function saveCommandHistory() {
+	try {
+		commandHistory.value = await set_command_history(commandHistory.value)
+		commandHistoryModal.value?.hide()
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function openServerEditor() {
+	syncedServers.value = await list_synced_servers().catch((error) => {
+		handleError(error)
+		return []
+	})
+	serverData.value = {}
+	serverEditorModal.value?.show()
+	await refreshServers(
+		syncedServerCards.value.map(({ world }) => world),
+		serverData.value,
+		null,
+	)
+}
+
+function openSyncedServerEditor(server: SyncedServer) {
+	editedServer.value = { ...server }
+	editServerModal.value?.show()
+}
+
+async function saveSyncedServer() {
+	if (!editedServer.value) return
+	const server = editedServer.value
+
+	try {
+		await update_synced_server(server)
+		const index = syncedServers.value.findIndex(({ id }) => id === server.id)
+		if (index !== -1) {
+			syncedServers.value[index] = { ...server }
+		}
+		editServerModal.value?.hide()
+		serverData.value[server.address] = { refreshing: true }
+		await refreshServerData(serverData.value[server.address], null, server.address)
+		await queryClient.invalidateQueries({ queryKey: ['worlds'] })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+async function refreshSyncedServer(address: string) {
+	serverData.value[address] ??= { refreshing: true }
+	await refreshServerData(serverData.value[address], null, address)
+}
+
+async function removeSyncedServer(serverId: string) {
+	try {
+		await remove_synced_server(serverId)
+		syncedServers.value = syncedServers.value.filter((server) => server.id !== serverId)
+		await queryClient.invalidateQueries({ queryKey: ['worlds'] })
+	} catch (error) {
+		handleError(error)
+	}
+}
+
+const fetchSettings = await get()
+fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
+fetchSettings.envVars = serializeEnvVars(fetchSettings.custom_env_vars)
+
+const settings = ref(fetchSettings)
+
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}
+
+watch(
+	settings,
+	async () => {
+		const setSettings = JSON.parse(JSON.stringify(settings.value))
+
+		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
+		setSettings.custom_env_vars = parseEnvVars(setSettings.envVars)
+		delete setSettings.launchArgs
+		delete setSettings.envVars
+
+		if (!setSettings.custom_dir) {
+			setSettings.custom_dir = null
+		}
+
+		await set(setSettings).catch(handleError)
+	},
+	{ deep: true },
+)
+</script>
+
+<template>
+	<div>
+		<NewModal
+			ref="commandHistoryModal"
+			:header="formatMessage(messages.commandHistoryEditorTitle)"
+			class="command-history-modal"
+			max-width="700px"
+			width="700px"
+		>
+			<component
+				:is="editorComponent"
+				v-if="editorComponent"
+				v-model:value="commandHistory"
+				lang="mcfunction"
+				theme="modrinth"
+				:print-margin="false"
+				class="command-history-editor ace-modrinth rounded-[20px] !border !border-solid !border-surface-5"
+				style="height: 420px; font-size: 0.875rem"
+			/>
+			<template #actions>
+				<div class="flex justify-end gap-2">
+					<Button type="outlined" @click="commandHistoryModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" @click="saveCommandHistory">
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<NewModal
+			ref="serverEditorModal"
+			:header="formatMessage(messages.serverEditorTitle)"
+			scrollable
+			actions-divider
+			no-padding
+			max-content-height="34.5rem"
+			max-width="750px"
+			width="750px"
+		>
+			<p v-if="syncedServers.length === 0" class="m-0 px-6 py-4 text-secondary">
+				{{ formatMessage(messages.noSyncedServers) }}
+			</p>
+			<div v-else class="flex flex-col gap-2 px-6 py-4">
+				<WorldItem
+					v-for="{ server, world } in syncedServerCards"
+					:key="server.id"
+					:world="world"
+					card-background="surface-2"
+					:show-play-button="false"
+					:refreshing="serverData[server.address]?.refreshing"
+					:server-status="serverData[server.address]?.status"
+					:rendered-motd="serverData[server.address]?.renderedMotd"
+					@refresh="refreshSyncedServer(server.address)"
+					@edit="openSyncedServerEditor(server)"
+					@delete="removeSyncedServer(server.id)"
+				/>
+			</div>
+			<template #actions>
+				<div class="flex justify-end">
+					<Button type="outlined" @click="serverEditorModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<NewModal
+			ref="editServerModal"
+			:header="formatMessage(messages.editServerTitle)"
+			max-width="500px"
+			width="500px"
+		>
+			<div v-if="editedServer" class="flex flex-col gap-4">
+				<label class="flex flex-col gap-2 font-semibold text-contrast">
+					{{ formatMessage(messages.serverName) }}
+					<Input v-model="editedServer.name" autocomplete="off" wrapper-class="w-full" />
+				</label>
+				<label class="flex flex-col gap-2 font-semibold text-contrast">
+					{{ formatMessage(messages.serverAddress) }}
+					<Input v-model="editedServer.address" autocomplete="off" wrapper-class="w-full" />
+				</label>
+			</div>
+			<template #actions>
+				<div class="flex justify-end gap-2">
+					<Button type="outlined" @click="editServerModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!editedServer?.address"
+						@click="saveSyncedServer"
+					>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
+		<section class="border-0 border-b border-solid border-divider pb-6">
+			<div class="flex flex-col gap-6">
+				<!--
+				<div class="flex items-center justify-between gap-4">
+					<p class="m-0 text-secondary">{{ formatMessage(messages.syncedDescription) }}</p>
+					<Button @click="open_synced_options_folder().catch(handleError)">
+						<FolderOpenIcon />
+						{{ formatMessage(messages.syncedFolder) }}
+					</Button>
+				</div>
+				-->
+
+				<div class="flex flex-col gap-4">
+					<div
+						v-for="row in globalRows"
+						:key="row.option"
+						class="flex items-center justify-between gap-6"
+					>
+						<div class="flex min-w-0 flex-col gap-1">
+							<h2 class="m-0 text-lg font-semibold text-contrast">
+								{{ formatMessage(messages[row.title]) }}
+							</h2>
+							<p v-if="row.description" class="m-0 text-secondary">
+								{{ formatMessage(messages[row.description]) }}
+							</p>
+						</div>
+						<div class="flex shrink-0 items-center gap-2">
+							<span
+								v-if="row.editable"
+								v-tooltip="
+									row.editable === 'servers' && syncedServers.length === 0
+										? formatMessage(messages.noServersSyncedYet)
+										: formatMessage(commonMessages.editButton)
+								"
+								class="flex"
+							>
+								<IconButton
+									type="outlined"
+									circular
+									:disabled="
+										!globalOptions[row.option] ||
+										(row.editable === 'servers' && syncedServers.length === 0)
+									"
+									:label="formatMessage(commonMessages.editButton)"
+									@click="
+										row.editable === 'commands' ? openCommandHistoryEditor() : openServerEditor()
+									"
+								>
+									<EditIcon />
+								</IconButton>
+							</span>
+							<Toggle
+								:id="`global-sync-${row.option}`"
+								:model-value="globalOptions[row.option]"
+								@update:model-value="(enabled) => toggleGlobalOption(row.option, enabled)"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.windowSectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.fullscreenTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.fullscreenDescription) }}
+						</p>
+					</div>
+
+					<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
+				</div>
+
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.widthTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.widthDescription) }}
+						</p>
+					</div>
+
+					<Input
+						id="width"
+						v-model="settings.game_resolution[0]"
+						:disabled="settings.force_fullscreen"
+						autocomplete="off"
+						type="number"
+						:placeholder="formatMessage(messages.widthPlaceholder)"
+					/>
+				</div>
+
+				<div class="flex items-center justify-between gap-4">
+					<div class="flex flex-col gap-1">
+						<h3 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.heightTitle) }}
+						</h3>
+						<p class="m-0 leading-tight">
+							{{ formatMessage(messages.heightDescription) }}
+						</p>
+					</div>
+
+					<Input
+						id="height"
+						v-model="settings.game_resolution[1]"
+						:disabled="settings.force_fullscreen"
+						autocomplete="off"
+						type="number"
+						:placeholder="formatMessage(messages.heightPlaceholder)"
+					/>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.javaAndMemorySectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.memoryAllocationTitle) }}
+					</h3>
+					<Slider
+						id="max-memory"
+						v-model="settings.memory.maximum"
+						:min="512"
+						:max="maxMemory"
+						:step="64"
+						:snap-points="snapPoints"
+						:snap-range="512"
+						unit="MB"
+					/>
+					<p class="m-0 mt-1 leading-tight">
+						{{ formatMessage(messages.memoryAllocationDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.javaArgumentsTitle) }}
+					</h3>
+					<Input
+						id="java-args"
+						v-model="settings.launchArgs"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.javaArgumentsPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.javaArgumentsDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.environmentVariablesTitle) }}
+					</h3>
+					<Input
+						id="env-vars"
+						v-model="settings.envVars"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.environmentVariablesPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.environmentVariablesDescription) }}
+					</p>
+				</div>
+			</div>
+		</section>
+
+		<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<h2 class="m-0 text-xl font-semibold text-contrast">
+				{{ formatMessage(messages.launchHooksSectionTitle) }}
+			</h2>
+			<div class="mt-4 flex flex-col gap-6">
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.preLaunchHookTitle) }}
+					</h3>
+					<Input
+						id="pre-launch"
+						v-model="settings.hooks.pre_launch"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.preLaunchHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.preLaunchHookDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.wrapperHookTitle) }}
+					</h3>
+					<Input
+						id="wrapper"
+						v-model="settings.hooks.wrapper"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.wrapperHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.wrapperHookDescription) }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2.5">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.postExitHookTitle) }}
+					</h3>
+					<Input
+						id="post-exit"
+						v-model="settings.hooks.post_exit"
+						autocomplete="off"
+						type="text"
+						:placeholder="formatMessage(messages.postExitHookPlaceholder)"
+						wrapper-class="w-full"
+					/>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.postExitHookDescription) }}
+					</p>
+				</div>
+
+				<div class="m-0 leading-tight">
+					{{ formatMessage(messages.hookVariablesDescription) }}
+					<ul>
+						<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
+						<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
+					</ul>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style>
+.command-history-editor.ace-modrinth {
+	background-color: var(--surface-2);
+}
+
+.command-history-editor.ace-modrinth .ace_gutter {
+	background: var(--surface-1);
+}
+
+.command-history-editor.ace-modrinth .ace_marker-layer .ace_active-line {
+	background: var(--surface-2-5);
+}
+
+.command-history-editor.ace-modrinth .ace_gutter-active-line {
+	background-color: var(--surface-1-5);
+}
+
+.command-history-editor.ace-modrinth.ace_multiselect .ace_selection.ace_start {
+	box-shadow: 0 0 3px 0 var(--surface-2);
+}
+
+.command-history-modal > [data-modal-content] {
+	padding-bottom: 0;
+}
+</style>

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -67,7 +67,7 @@ const router = useRouter()
 const { addNotification } = injectNotificationManager()
 
 const emit = defineEmits<{
-	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete' | 'desync'): void
 	(e: 'open-folder', world: SingleplayerWorld): void
 }>()
 
@@ -95,6 +95,8 @@ const props = withDefaults(
 		}
 
 		managed?: boolean
+		showPlayButton?: boolean
+		cardBackground?: 'raised' | 'surface-2'
 
 		// Instance
 		instanceId?: string
@@ -117,6 +119,8 @@ const props = withDefaults(
 
 		gameMode: undefined,
 		managed: false,
+		showPlayButton: true,
+		cardBackground: 'raised',
 
 		instanceId: undefined,
 		instanceName: undefined,
@@ -218,6 +222,10 @@ const messages = defineMessages({
 		id: 'instance.worlds.copy_address',
 		defaultMessage: 'Copy address',
 	},
+	desync: {
+		id: 'instance.worlds.desync_server',
+		defaultMessage: 'Desync',
+	},
 	viewInstance: {
 		id: 'instance.worlds.view_instance',
 		defaultMessage: 'View instance',
@@ -270,7 +278,10 @@ const messages = defineMessages({
 
 const cardOptions = useTemplateRef('cardOptions')
 const showStop = computed(
-	() => (props.playingWorld || (locked.value && props.playingInstance)) && !props.startingInstance,
+	() =>
+		props.showPlayButton &&
+		(props.playingWorld || (locked.value && props.playingInstance)) &&
+		!props.startingInstance,
 )
 const playDisabled = computed(
 	() =>
@@ -327,6 +338,17 @@ const overflowOptions = computed((): ButtonMenuOption[] => [
 		shown: props.world.type === 'server',
 		action: () => copyToClipboard((props.world as ServerWorld).address),
 	},
+	{
+		id: 'desync',
+		label: formatMessage(messages.desync),
+		icon: XIcon,
+		action: () => emit('desync'),
+		shown:
+			!props.instanceId &&
+			props.world.type === 'server' &&
+			(props.world as ServerWorld).source === 'user_synced' &&
+			!!(props.world as ServerWorld).server_id,
+	},
 	{
 		id: 'edit',
 		label: formatMessage(commonMessages.editButton),
@@ -404,6 +426,7 @@ const contextMenuOptions = computed((): ButtonMenuOption[] => [
 				label: formatMessage(commonMessages.stopButton),
 				icon: StopCircleIcon,
 				tone: 'red',
+				shown: props.showPlayButton,
 				action: () => emit('stop'),
 			}
 		: {
@@ -411,11 +434,12 @@ const contextMenuOptions = computed((): ButtonMenuOption[] => [
 				label: formatMessage(messages.playWorld),
 				icon: PlayIcon,
 				tone: 'brand',
+				shown: props.showPlayButton,
 				disabled: playDisabled.value,
 				tooltip: playTooltip.value ?? undefined,
 				action: () => emit('play'),
 			},
-	{ type: 'divider' },
+	{ type: 'divider', shown: props.showPlayButton },
 	...overflowOptions.value,
 ])
 
@@ -433,9 +457,11 @@ function openContextMenu(event: MouseEvent) {
 				/>
 			</template>
 			<div
-				class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised border border-solid border-surface-4 smart-clickable:highlight-on-hover rounded-[20px] transition-[filter] ease-out [--hover-brightness:1.25] min-h-20"
+				class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 border border-solid border-surface-4 smart-clickable:highlight-on-hover rounded-[20px] transition-[filter] ease-out [--hover-brightness:1.25] min-h-20"
 				:class="{
 					'world-item-highlighted': highlighted,
+					'bg-bg-raised': cardBackground === 'raised',
+					'bg-surface-2': cardBackground === 'surface-2',
 				}"
 			>
 				<Avatar
@@ -592,12 +618,17 @@ function openContextMenu(event: MouseEvent) {
 					</template>
 				</div>
 				<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-					<Button v-if="showStop" type="colored" color="red" @click="emit('stop')">
+					<Button
+						v-if="showPlayButton && showStop"
+						type="colored"
+						color="red"
+						@click="emit('stop')"
+					>
 						<StopCircleIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.stopButton) }}
 					</Button>
 					<Button
-						v-else
+						v-else-if="showPlayButton"
 						v-tooltip="playTooltip"
 						:disabled="playDisabled"
 						type="colored"

apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue

@@ -16,6 +16,7 @@ const { formatMessage } = useVIntl()
 
 const props = defineProps<{
 	world: World | null
+	otherSyncedInstanceCount: number
 }>()
 
 const emit = defineEmits<{
@@ -44,6 +45,11 @@ const messages = defineMessages({
 		defaultMessage:
 			'This server will be removed from your server list and from the in-game server list. You can add it again later if you know the address.',
 	},
+	syncedServerRemovalNotice: {
+		id: 'app.instance.worlds.remove-server-modal.synced-removal-notice',
+		defaultMessage:
+			'This server will also be removed from {count, plural, one {# other instance} other {# other instances}} because it’s synced.',
+	},
 	deleteWorldWarningBody: {
 		id: 'app.instance.worlds.delete-world-modal.warning-body',
 		defaultMessage:
@@ -62,6 +68,9 @@ const messages = defineMessages({
 const modal = ref<InstanceType<typeof NewModal>>()
 
 const isServer = computed(() => props.world?.type === 'server')
+const isSyncedServer = computed(
+	() => props.world?.type === 'server' && props.world.source === 'user_synced',
+)
 const isSingleplayer = computed(() => props.world?.type === 'singleplayer')
 const titleMessage = computed(() =>
 	isServer.value ? messages.removeServerTitle : messages.deleteWorldTitle,
@@ -102,6 +111,13 @@ defineExpose({ show, hide })
 			>
 				{{ formatMessage(warningBodyMessage) }}
 			</Admonition>
+			<p v-if="isSyncedServer" class="m-0 text-secondary">
+				{{
+					formatMessage(messages.syncedServerRemovalNotice, {
+						count: otherSyncedInstanceCount,
+					})
+				}}
+			</p>
 		</div>
 
 		<template #actions>

apps/app-frontend/src/components/ui/world/modal/DesyncServerModal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { LinkIcon, TrashIcon, XIcon } from '@modrinth/assets'
+import { Button, commonMessages, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { ref } from 'vue'
+
+import type { DesyncServerMode, ServerWorld } from '@/helpers/worlds'
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const server = ref<ServerWorld | null>(null)
+
+const emit = defineEmits<{
+	confirm: [server: ServerWorld, mode: DesyncServerMode]
+}>()
+
+const messages = defineMessages({
+	title: {
+		id: 'instance.worlds.desync-server.title',
+		defaultMessage: 'Desync server',
+	},
+	description: {
+		id: 'instance.worlds.desync-server.description',
+		defaultMessage:
+			'Do you want to keep this server in other synced instances, or remove it from them?',
+	},
+	keep: {
+		id: 'instance.worlds.desync-server.keep',
+		defaultMessage: 'Keep',
+	},
+	remove: {
+		id: 'instance.worlds.desync-server.remove',
+		defaultMessage: 'Remove',
+	},
+})
+
+function show(value: ServerWorld) {
+	server.value = value
+	modal.value?.show()
+}
+
+function confirm(mode: DesyncServerMode) {
+	if (server.value) emit('confirm', server.value, mode)
+	modal.value?.hide()
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.title)" max-width="540px">
+		<p class="m-0 text-secondary">{{ formatMessage(messages.description) }}</p>
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" class="whitespace-nowrap" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button class="whitespace-nowrap" @click="confirm('keep_in_other_instances')">
+					<LinkIcon />
+					{{ formatMessage(messages.keep) }}
+				</Button>
+				<Button
+					type="colored"
+					color="red"
+					class="whitespace-nowrap"
+					@click="confirm('remove_from_other_instances')"
+				>
+					<TrashIcon />
+					{{ formatMessage(messages.remove) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>