From 98aadb1f6a11218154ab5d76849783d0982389fc Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 28 Aug 2026 10:07:40 +0100
Subject: [PATCH 1/3] fix: ux changes for sync settings/overrides

---
 .../components/ui/screenshots-page/index.vue  |   8 +-
 .../ui/settings/display/BehaviorSettings.vue  |  58 +++-
 .../instances/InstancesSyncedSettings.vue     | 176 +++++++++++--
 apps/app-frontend/src/helpers/instance.ts     |   2 +
 .../app-frontend/src/locales/en-US/index.json |  58 ++--
 .../settings-modal/hooks-settings.vue         | 118 +++++----
 .../settings-modal/java-settings.vue          | 248 ++++++++++--------
 .../synced-options-settings.vue               | 193 ++++++++------
 .../settings-modal/window-settings.vue        | 100 +++----
 .../src/pages/instance/layout.vue             |   4 +-
 apps/app/src/api/instance.rs                  |   8 +-
 ...828120000_reset-synced-option-defaults.sql |  15 ++
 .../api/instance/screenshots/operations.rs    |   9 +-
 .../instance/synced_options/orchestration.rs  | 139 ++++++++--
 .../api/instance/synced_servers/operations.rs |  43 ++-
 .../adapters/sqlite/instance_rows.rs          |  26 --
 packages/ui/src/components/base/Slider.vue    | 216 ++++++++-------
 17 files changed, 921 insertions(+), 500 deletions(-)
 create mode 100644 packages/app-lib/migrations/20260828120000_reset-synced-option-defaults.sql

diff --git a/apps/app-frontend/src/components/ui/screenshots-page/index.vue b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
index 5a85ed6918..d845fe8b68 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/index.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
@@ -429,10 +429,10 @@ const groupedScreenshots = computed((): ScreenshotGroupData[] => {
 			screenshotGroups.set(screenshot.instance_id, group)
 		}
 
-		const syncedInstances = (instancesQuery.data.value ?? [])
-			.filter((instance) => instance.synced_options.screenshots)
-			.sort((a, b) => a.name.localeCompare(b.name))
-		const groups = syncedInstances.flatMap((instance) => {
+		const instances = [...(instancesQuery.data.value ?? [])].sort((a, b) =>
+			a.name.localeCompare(b.name),
+		)
+		const groups = instances.flatMap((instance) => {
 			const instanceScreenshots = screenshotGroups.get(instance.id)
 			return instanceScreenshots
 				? [
diff --git a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue b/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
index d52c4404a6..43ce220e5b 100644
--- a/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/BehaviorSettings.vue
@@ -7,6 +7,7 @@ import {
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import {
@@ -14,7 +15,13 @@ import {
 	type FeatureFlag,
 	useAppSettings,
 } from '@/composables/use-app-settings.ts'
+import {
+	get_global_synced_options,
+	type GlobalSyncedOptions,
+	set_global_synced_option,
+} from '@/helpers/instance.ts'
 import { type AppSettings, get, set } from '@/helpers/settings.ts'
+import { screenshotKeys } from '@/pages/instance/query-options.ts'
 import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
 
 const appSettings = useAppSettings()
@@ -22,6 +29,7 @@ const { formatMessage } = useVIntl()
 const auth = injectAuth()
 const { updatePreferences } = injectUserPreferences()
 const settingsModal = inject(appSettingsModalContextKey, null)
+const queryClient = useQueryClient()
 
 const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
 const compactInstanceCardsFlag: FeatureFlag = 'compact_instance_cards'
@@ -51,6 +59,14 @@ const messages = defineMessages({
 		id: 'app.behavior-settings.content.title',
 		defaultMessage: 'Home and content',
 	},
+	showAllScreenshotsTitle: {
+		id: 'app.behavior-settings.show-all-screenshots.title',
+		defaultMessage: 'Show all screenshots together',
+	},
+	showAllScreenshotsDescription: {
+		id: 'app.behavior-settings.show-all-screenshots.description',
+		defaultMessage: 'View screenshots from all your instances on the Screenshots page.',
+	},
 	confirmationsTitle: {
 		id: 'app.behavior-settings.confirmations.title',
 		defaultMessage: 'Confirmations',
@@ -137,6 +153,7 @@ type BehaviorSettingsState = {
 	minimizeApp: boolean
 	hideRightSidebar: boolean
 	showJumpIn: boolean
+	showAllScreenshots: boolean
 	compactInstanceCards: boolean
 	showPlayTime: boolean
 	hideNametag: boolean
@@ -144,14 +161,23 @@ type BehaviorSettingsState = {
 	skipNonEssentialWarnings: boolean
 }
 
-const persistedSettings = ref(await get())
+const [initialSettings, initialGlobalSyncedOptions] = await Promise.all([
+	get(),
+	get_global_synced_options(),
+])
+const persistedSettings = ref(initialSettings)
+const persistedGlobalSyncedOptions = ref(initialGlobalSyncedOptions)
 
-function getBehaviorSettingsState(settings: AppSettings): BehaviorSettingsState {
+function getBehaviorSettingsState(
+	settings: AppSettings,
+	globalSyncedOptions: GlobalSyncedOptions,
+): BehaviorSettingsState {
 	return {
 		syncBehaviorAcrossDevices: settings.sync_behavior_across_devices,
 		minimizeApp: settings.hide_on_process_start,
 		hideRightSidebar: settings.toggle_sidebar,
 		showJumpIn: settings.feature_flags[worldsInHomeFlag] ?? DEFAULT_FEATURE_FLAGS[worldsInHomeFlag],
+		showAllScreenshots: globalSyncedOptions.screenshots,
 		compactInstanceCards:
 			settings.feature_flags[compactInstanceCardsFlag] ??
 			DEFAULT_FEATURE_FLAGS[compactInstanceCardsFlag],
@@ -169,7 +195,7 @@ function getBehaviorSettingsState(settings: AppSettings): BehaviorSettingsState
 }
 
 const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
-	() => getBehaviorSettingsState(persistedSettings.value),
+	() => getBehaviorSettingsState(persistedSettings.value, persistedGlobalSyncedOptions.value),
 	async () => {
 		const value = current.value
 
@@ -204,8 +230,20 @@ const { saved, current, changes, saving, hasChanges, reset, save } = useSavable(
 			},
 		}
 
-		await set(nextSettings)
+		const screenshotsChanged =
+			value.showAllScreenshots !== persistedGlobalSyncedOptions.value.screenshots
+		const [, updatedGlobalSyncedOptions] = await Promise.all([
+			set(nextSettings),
+			screenshotsChanged
+				? set_global_synced_option('screenshots', value.showAllScreenshots)
+				: Promise.resolve(persistedGlobalSyncedOptions.value),
+		])
 		persistedSettings.value = nextSettings
+		persistedGlobalSyncedOptions.value = updatedGlobalSyncedOptions
+		queryClient.setQueryData(['global-synced-options'], updatedGlobalSyncedOptions)
+		if (screenshotsChanged) {
+			await queryClient.invalidateQueries({ queryKey: screenshotKeys.all })
+		}
 		appSettings.setBehaviorSyncAcrossDevices(value.syncBehaviorAcrossDevices)
 		appSettings.toggleSidebar = value.hideRightSidebar
 		appSettings.hideNametagSkinsPage = value.hideNametag
@@ -302,6 +340,18 @@ onBeforeUnmount(() => {
 			{{ formatMessage(messages.contentTitle) }}
 		</h2>
 		<div class="mt-4 flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.showAllScreenshotsTitle) }}
+					</h3>
+					<p class="m-0 mt-1">
+						{{ formatMessage(messages.showAllScreenshotsDescription) }}
+					</p>
+				</div>
+				<Toggle id="show-all-screenshots" v-model="current.showAllScreenshots" />
+			</div>
+
 			<div class="flex items-center justify-between gap-4">
 				<div>
 					<h3 class="m-0 text-lg font-semibold text-contrast">
diff --git a/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
index ecef91748c..f96b836b53 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
@@ -2,11 +2,15 @@
 import {
 	EditIcon,
 	// FolderOpenIcon,
+	RefreshCwIcon,
 	SaveIcon,
+	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	Button,
+	CheckCircleButton,
 	commonMessages,
 	defineMessages,
 	IconButton,
@@ -26,7 +30,9 @@ import useMemorySlider from '@/composables/useMemorySlider'
 import {
 	get_command_history,
 	get_global_synced_options,
+	getInstanceIconUrl,
 	type GlobalSyncedOptions,
+	list as listInstances,
 	list_synced_servers,
 	// open_synced_options_folder,
 	remove_synced_server,
@@ -43,7 +49,7 @@ import {
 	type ServerData,
 	type ServerWorld,
 } from '@/helpers/worlds.ts'
-import { instanceKeys, screenshotKeys } from '@/pages/instance/query-options'
+import { instanceKeys } from '@/pages/instance/query-options'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -83,13 +89,33 @@ const messages = defineMessages({
 		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',
+	chooseSyncSourceTitle: {
+		id: 'app.settings.synced-options.choose-sync-source.title',
+		defaultMessage: 'Choose a sync source',
 	},
-	screenshotsDescription: {
-		id: 'app.settings.synced-options.screenshots.description',
-		defaultMessage: 'View screenshots from your instances in one place.',
+	multiplayerServersSyncSourceDescription: {
+		id: 'app.settings.synced-options.choose-sync-source.multiplayer-servers-description',
+		defaultMessage: 'Pick the instance whose multiplayer servers become the shared copy.',
+	},
+	commandHistorySyncSourceDescription: {
+		id: 'app.settings.synced-options.choose-sync-source.command-history-description',
+		defaultMessage: 'Pick the instance whose command history becomes the shared copy.',
+	},
+	creativeHotbarsSyncSourceDescription: {
+		id: 'app.settings.synced-options.choose-sync-source.creative-hotbars-description',
+		defaultMessage: 'Pick the instance whose saved creative hotbars become the shared copy.',
+	},
+	searchInstance: {
+		id: 'app.settings.synced-options.choose-sync-source.search-placeholder',
+		defaultMessage: 'Search instance',
+	},
+	noInstancesFound: {
+		id: 'app.settings.synced-options.choose-sync-source.no-instances-found',
+		defaultMessage: 'No instances found',
+	},
+	syncButton: {
+		id: 'app.settings.synced-options.choose-sync-source.sync',
+		defaultMessage: 'Sync',
 	},
 	commandHistoryEditorTitle: {
 		id: 'app.settings.synced-options.command-history.editor-title',
@@ -285,11 +311,6 @@ const globalRows: Array<{
 		title: 'creativeHotbars',
 		description: 'creativeHotbarsDescription',
 	},
-	{
-		option: 'screenshots',
-		title: 'screenshots',
-		description: 'screenshotsDescription',
-	},
 ]
 
 const globalSyncedOptionsQueryKey = ['global-synced-options'] as const
@@ -306,6 +327,11 @@ const globalOptionsQuery = useQuery({
 	queryFn: get_global_synced_options,
 })
 const globalOptions = computed(() => globalOptionsQuery.data.value ?? defaultGlobalOptions)
+const instances = ref(await listInstances().catch(() => []))
+const baseOption = ref<SyncedOption | null>(null)
+const baseInstanceId = ref(instances.value[0]?.id ?? '')
+const baseInstanceSearch = ref('')
+const baseModal = ref<InstanceType<typeof NewModal> | null>(null)
 const commandHistoryModal = ref<InstanceType<typeof NewModal> | null>(null)
 const serverEditorModal = ref<InstanceType<typeof NewModal> | null>(null)
 const editServerModal = ref<InstanceType<typeof NewModal> | null>(null)
@@ -340,24 +366,43 @@ const syncedServerCards = computed(() =>
 	})),
 )
 
+const baseInstanceDescription = computed(() => {
+	switch (baseOption.value) {
+		case 'multiplayer_servers':
+			return formatMessage(messages.multiplayerServersSyncSourceDescription)
+		case 'command_history':
+			return formatMessage(messages.commandHistorySyncSourceDescription)
+		case 'creative_hotbars':
+			return formatMessage(messages.creativeHotbarsSyncSourceDescription)
+		default:
+			return ''
+	}
+})
+
+const filteredBaseInstances = computed(() => {
+	const search = baseInstanceSearch.value.trim().toLowerCase()
+	if (!search) return instances.value
+	return instances.value.filter((instance) => instance.name.toLowerCase().includes(search))
+})
+
 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
+	baseInstanceId?: string
 }
 
 const globalOptionMutation = useMutation({
 	mutationKey: globalSyncedOptionsMutationKey,
-	mutationFn: ({ option, enabled }: GlobalOptionMutationVariables) =>
-		set_global_synced_option(option, enabled),
+	mutationFn: ({ option, enabled, baseInstanceId }: GlobalOptionMutationVariables) =>
+		set_global_synced_option(option, enabled, baseInstanceId),
 	onMutate: async ({ option, enabled }) => {
 		await queryClient.cancelQueries({ queryKey: globalSyncedOptionsQueryKey })
 		const previous = globalOptions.value[option]
@@ -376,6 +421,15 @@ const globalOptionMutation = useMutation({
 		}))
 		handleError(error)
 	},
+	onSuccess: async (_options, { option, enabled }) => {
+		if (enabled) baseModal.value?.hide()
+		if (enabled && option === 'multiplayer_servers') {
+			syncedServers.value = await list_synced_servers().catch((error) => {
+				handleError(error)
+				return []
+			})
+		}
+	},
 	onSettled: async () => {
 		if (queryClient.isMutating({ mutationKey: globalSyncedOptionsMutationKey }) === 1) {
 			await invalidateSyncedOptions()
@@ -383,12 +437,25 @@ const globalOptionMutation = useMutation({
 	},
 })
 
-function applyGlobalOption(option: SyncedOption, enabled: boolean) {
-	globalOptionMutation.mutate({ option, enabled })
+function applyGlobalOption(option: SyncedOption, enabled: boolean, baseInstanceId?: string) {
+	globalOptionMutation.mutate({ option, enabled, baseInstanceId })
 }
 
 function toggleGlobalOption(option: SyncedOption, enabled: boolean) {
-	applyGlobalOption(option, enabled)
+	if (!enabled) {
+		applyGlobalOption(option, false)
+		return
+	}
+
+	baseOption.value = option
+	baseInstanceId.value = instances.value[0]?.id ?? ''
+	baseInstanceSearch.value = ''
+	baseModal.value?.show()
+}
+
+function confirmBaseInstance() {
+	if (!baseOption.value || !baseInstanceId.value) return
+	applyGlobalOption(baseOption.value, true, baseInstanceId.value)
 }
 
 async function openCommandHistoryEditor() {
@@ -502,6 +569,79 @@ watch(
 
 <template>
 	<div>
+		<NewModal
+			ref="baseModal"
+			:header="formatMessage(messages.chooseSyncSourceTitle)"
+			no-padding
+			actions-divider
+			max-width="560px"
+			width="560px"
+		>
+			<p class="m-0 border-0 border-b border-solid border-surface-5 p-6 text-primary">
+				{{ baseInstanceDescription }}
+			</p>
+
+			<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 px-6 py-4">
+				<Input
+					v-model="baseInstanceSearch"
+					:icon="SearchIcon"
+					type="search"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.searchInstance)"
+					class="shrink-0"
+				/>
+
+				<div
+					v-if="filteredBaseInstances.length === 0"
+					class="flex flex-1 items-center justify-center text-secondary"
+				>
+					{{ formatMessage(messages.noInstancesFound) }}
+				</div>
+				<div
+					v-else
+					role="radiogroup"
+					:aria-label="formatMessage(messages.chooseSyncSourceTitle)"
+					class="flex flex-col gap-1"
+				>
+					<CheckCircleButton
+						v-for="instance in filteredBaseInstances"
+						:key="instance.id"
+						:checked="baseInstanceId === instance.id"
+						class="h-10"
+						@click="baseInstanceId = instance.id"
+					>
+						<span class="size-5 shrink-0 overflow-hidden rounded-[6px]">
+							<Avatar
+								:src="getInstanceIconUrl(instance.icon_path)"
+								:alt="instance.name"
+								:tint-by="instance.id"
+								size="1.25rem"
+								no-shadow
+							/>
+						</span>
+						<span class="truncate">{{ instance.name }}</span>
+					</CheckCircleButton>
+				</div>
+			</div>
+			<template #actions>
+				<div class="flex justify-end gap-2 p-2">
+					<Button type="outlined" @click="baseModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!baseInstanceId || globalOptionMutation.isPending.value"
+						@click="confirmBaseInstance"
+					>
+						<RefreshCwIcon />
+						{{ formatMessage(messages.syncButton) }}
+					</Button>
+				</div>
+			</template>
+		</NewModal>
+
 		<NewModal
 			ref="commandHistoryModal"
 			:header="formatMessage(messages.commandHistoryEditorTitle)"
diff --git a/apps/app-frontend/src/helpers/instance.ts b/apps/app-frontend/src/helpers/instance.ts
index 64af3c336f..49297e1699 100644
--- a/apps/app-frontend/src/helpers/instance.ts
+++ b/apps/app-frontend/src/helpers/instance.ts
@@ -338,10 +338,12 @@ export async function get_global_synced_options(): Promise<GlobalSyncedOptions>
 export async function set_global_synced_option(
 	option: SyncedOption,
 	enabled: boolean,
+	baseInstanceId?: string,
 ): Promise<GlobalSyncedOptions> {
 	return await invoke('plugin:instance|instance_set_global_synced_option', {
 		option,
 		enabled,
+		baseInstanceId,
 	})
 }
 
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 0f06178e09..4dc1854696 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -215,6 +215,12 @@
   "app.behavior-settings.content.title": {
     "message": "Home and content"
   },
+  "app.behavior-settings.show-all-screenshots.description": {
+    "message": "View screenshots from all your instances on the Screenshots page."
+  },
+  "app.behavior-settings.show-all-screenshots.title": {
+    "message": "Show all screenshots together"
+  },
   "app.behavior-settings.startup-and-navigation.title": {
     "message": "Startup and navigation"
   },
@@ -1691,6 +1697,27 @@
   "app.settings.sidebar.label.instances": {
     "message": "Instances"
   },
+  "app.settings.synced-options.choose-sync-source.command-history-description": {
+    "message": "Pick the instance whose command history becomes the shared copy."
+  },
+  "app.settings.synced-options.choose-sync-source.creative-hotbars-description": {
+    "message": "Pick the instance whose saved creative hotbars become the shared copy."
+  },
+  "app.settings.synced-options.choose-sync-source.multiplayer-servers-description": {
+    "message": "Pick the instance whose multiplayer servers become the shared copy."
+  },
+  "app.settings.synced-options.choose-sync-source.no-instances-found": {
+    "message": "No instances found"
+  },
+  "app.settings.synced-options.choose-sync-source.search-placeholder": {
+    "message": "Search instance"
+  },
+  "app.settings.synced-options.choose-sync-source.sync": {
+    "message": "Sync"
+  },
+  "app.settings.synced-options.choose-sync-source.title": {
+    "message": "Choose a sync source"
+  },
   "app.settings.synced-options.command-history": {
     "message": "Command history"
   },
@@ -1727,12 +1754,6 @@
   "app.settings.synced-options.multiplayer-servers.none-synced-yet": {
     "message": "No servers synced yet"
   },
-  "app.settings.synced-options.screenshots": {
-    "message": "Screenshots"
-  },
-  "app.settings.synced-options.screenshots.description": {
-    "message": "View screenshots from your instances in one place."
-  },
   "app.settings.tabs.appearance": {
     "message": "Appearance"
   },
@@ -2678,8 +2699,8 @@
   "instance.settings.tabs.synced-options.command-history.disabled-in-app": {
     "message": "Command history syncing is turned off in app settings."
   },
-  "instance.settings.tabs.synced-options.command-history.exclude-description": {
-    "message": "Exclude this instance from command history syncing."
+  "instance.settings.tabs.synced-options.command-history.override-description": {
+    "message": "Keep this instance's command history separate from synced command history."
   },
   "instance.settings.tabs.synced-options.creative-hotbars": {
     "message": "Saved creative hotbars"
@@ -2687,8 +2708,8 @@
   "instance.settings.tabs.synced-options.creative-hotbars.disabled-in-app": {
     "message": "Saved creative hotbar syncing is turned off in app settings."
   },
-  "instance.settings.tabs.synced-options.creative-hotbars.exclude-description": {
-    "message": "Exclude this instance from saved creative hotbar syncing."
+  "instance.settings.tabs.synced-options.creative-hotbars.override-description": {
+    "message": "Keep this instance's saved creative hotbars separate from synced hotbars."
   },
   "instance.settings.tabs.synced-options.hotbars-conflict.backup-description": {
     "message": "The version being replaced will be backed up before anything changes."
@@ -2711,23 +2732,14 @@
   "instance.settings.tabs.synced-options.multiplayer-servers.disabled-in-app": {
     "message": "Multiplayer server syncing is turned off in app settings."
   },
-  "instance.settings.tabs.synced-options.multiplayer-servers.exclude-description": {
-    "message": "Exclude this instance from multiplayer server syncing."
+  "instance.settings.tabs.synced-options.multiplayer-servers.override-description": {
+    "message": "Keep this instance's multiplayer servers separate from synced servers."
   },
   "instance.settings.tabs.synced-options.open-app-settings": {
-    "message": "Open synced settings"
-  },
-  "instance.settings.tabs.synced-options.screenshots": {
-    "message": "Screenshots"
-  },
-  "instance.settings.tabs.synced-options.screenshots.disabled-in-app": {
-    "message": "Screenshots are turned off in app settings."
-  },
-  "instance.settings.tabs.synced-options.screenshots.exclude-description": {
-    "message": "Exclude this instance’s screenshots from the Screenshots page."
+    "message": "Manage synced settings"
   },
   "instance.settings.tabs.synced-options.shared-settings.description": {
-    "message": "Game settings can be shared between instances. Choose what to share in app settings."
+    "message": "Enable an override to keep a synced setting separate for this instance."
   },
   "instance.settings.tabs.window": {
     "message": "Window"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
index b7f83911cb..8e214fdf31 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
@@ -7,7 +7,6 @@ import { get } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
-import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -28,6 +27,16 @@ const hooks = ref({
 	post_exit: hooksRaw.post_exit ?? '',
 })
 
+watch(overrideHooks, (enabled) => {
+	if (!enabled) {
+		hooks.value = {
+			pre_launch: globalSettings.hooks.pre_launch ?? '',
+			wrapper: globalSettings.hooks.wrapper ?? '',
+			post_exit: globalSettings.hooks.post_exit ?? '',
+		}
+	}
+})
+
 const editInstanceObject = computed(() => ({
 	hooks: overrideHooks.value
 		? {
@@ -139,62 +148,63 @@ const messages = defineMessages({
 			<Toggle id="override-launch-hooks" v-model="overrideHooks" />
 		</div>
 
-		<SettingsOptionsTransition :show="overrideHooks">
-			<div class="pt-6">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.preLaunch) }}
-				</h2>
-				<Input
-					id="pre-launch"
-					v-model="hooks.pre_launch"
-					autocomplete="off"
-					:placeholder="formatMessage(messages.preLaunchEnter)"
-					wrapper-class="w-full my-2.5"
-				/>
-				<p class="m-0">
-					{{ formatMessage(messages.preLaunchDescription) }}
-				</p>
+		<div class="pt-6" :class="{ 'opacity-50': !overrideHooks }">
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.preLaunch) }}
+			</h2>
+			<Input
+				id="pre-launch"
+				v-model="hooks.pre_launch"
+				autocomplete="off"
+				:disabled="!overrideHooks"
+				:placeholder="formatMessage(messages.preLaunchEnter)"
+				wrapper-class="w-full my-2.5"
+			/>
+			<p class="m-0">
+				{{ formatMessage(messages.preLaunchDescription) }}
+			</p>
 
-				<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.wrapper) }}
-				</h2>
-				<Input
-					id="wrapper"
-					v-model="hooks.wrapper"
-					autocomplete="off"
-					:placeholder="formatMessage(messages.wrapperEnter)"
-					wrapper-class="w-full my-2.5"
-				/>
-				<p class="m-0">
-					{{ formatMessage(messages.wrapperDescription) }}
-				</p>
+			<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.wrapper) }}
+			</h2>
+			<Input
+				id="wrapper"
+				v-model="hooks.wrapper"
+				autocomplete="off"
+				:disabled="!overrideHooks"
+				:placeholder="formatMessage(messages.wrapperEnter)"
+				wrapper-class="w-full my-2.5"
+			/>
+			<p class="m-0">
+				{{ formatMessage(messages.wrapperDescription) }}
+			</p>
 
-				<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.postExit) }}
-				</h2>
-				<Input
-					id="post-exit"
-					v-model="hooks.post_exit"
-					autocomplete="off"
-					:placeholder="formatMessage(messages.postExitEnter)"
-					wrapper-class="w-full my-2.5"
-				/>
-				<p class="m-0">
-					{{ formatMessage(messages.postExitDescription) }}
-				</p>
+			<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.postExit) }}
+			</h2>
+			<Input
+				id="post-exit"
+				v-model="hooks.post_exit"
+				autocomplete="off"
+				:disabled="!overrideHooks"
+				:placeholder="formatMessage(messages.postExitEnter)"
+				wrapper-class="w-full my-2.5"
+			/>
+			<p class="m-0">
+				{{ formatMessage(messages.postExitDescription) }}
+			</p>
 
-				<div class="m-0 mt-6">
-					{{ formatMessage(messages.hookVariablesDescription) }}
-				</div>
-				<ul class="m-0 mt-2">
-					<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 class="m-0 mt-6">
+				{{ formatMessage(messages.hookVariablesDescription) }}
 			</div>
-		</SettingsOptionsTransition>
+			<ul class="m-0 mt-2">
+				<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>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
index 09e1f43b81..64402d3030 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
@@ -28,7 +28,6 @@ import { get, parseEnvVars, serializeEnvVars } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
-import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -42,11 +41,14 @@ const optimalJava = readonly(await get_optimal_jre_key(instance.value.id).catch(
 const overrideJavaInstall = ref(!!instance.value.java_path)
 const javaPath = ref(instance.value.java_path ?? optimalJava?.path ?? '')
 
-const activePath = computed(() => (overrideJavaInstall.value ? javaPath.value : ''))
+const activePath = computed(() => javaPath.value)
+const javaTestPath = computed(() => (overrideJavaInstall.value ? javaPath.value : ''))
 
 watch(overrideJavaInstall, (enabled) => {
 	if (enabled && !javaPath.value) {
 		javaPath.value = optimalJava?.path ?? ''
+	} else if (!enabled) {
+		javaPath.value = optimalJava?.path ?? ''
 	}
 })
 
@@ -57,7 +59,7 @@ const hoveringTest = ref(false)
 let hasInitialized = false
 
 watch(
-	activePath,
+	javaTestPath,
 	(newPath) => {
 		if (newPath && optimalJava?.parsed_version) {
 			if (!hasInitialized) {
@@ -95,12 +97,30 @@ const envVars = ref(
 )
 
 const overrideMemorySettings = ref(!!instance.value.memory)
-const memory = ref(instance.value.memory ?? globalSettings.memory)
+const memory = ref(instance.value.memory ?? { ...globalSettings.memory })
 const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
 	maxMemory: number
 	snapPoints: number[]
 }
 
+watch(overrideJavaArgs, (enabled) => {
+	if (!enabled) {
+		javaArgs.value = globalSettings.extra_launch_args.join(' ')
+	}
+})
+
+watch(overrideEnvVars, (enabled) => {
+	if (!enabled) {
+		envVars.value = serializeEnvVars(globalSettings.custom_env_vars)
+	}
+})
+
+watch(overrideMemorySettings, (enabled) => {
+	if (!enabled) {
+		memory.value = { ...globalSettings.memory }
+	}
+})
+
 const editInstanceObject = computed(() => {
 	return {
 		java_path:
@@ -198,90 +218,89 @@ const messages = defineMessages({
 				</div>
 				<Toggle id="override-java-installation" v-model="overrideJavaInstall" />
 			</div>
-			<SettingsOptionsTransition :show="overrideJavaInstall">
-				<div class="pt-3">
-					<div class="flex gap-4 rounded-2xl bg-bg p-4">
-						<div class="flex gap-3 items-start flex-1 min-w-0">
-							<div
-								class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
+			<div class="pt-3" :class="{ 'opacity-50': !overrideJavaInstall }">
+				<div class="flex gap-4 rounded-2xl bg-bg p-4">
+					<div class="flex gap-3 items-start flex-1 min-w-0">
+						<div
+							class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
+						>
+							<CoffeeIcon />
+						</div>
+						<div class="flex flex-col gap-2 flex-1 min-w-0">
+							<span class="font-semibold leading-none mt-2"
+								>Java {{ optimalJava?.parsed_version }}</span
 							>
-								<CoffeeIcon />
-							</div>
-							<div class="flex flex-col gap-2 flex-1 min-w-0">
-								<span class="font-semibold leading-none mt-2"
-									>Java {{ optimalJava?.parsed_version }}</span
-								>
-								<div class="flex gap-2 items-center">
-									<Input
-										:model-value="activePath"
-										autocomplete="off"
-										:placeholder="formatMessage(messages.javaPathPlaceholder)"
-										wrapper-class="flex-1 min-w-0"
-										@update:model-value="(val) => (javaPath = String(val))"
-									/>
-									<Button
-										type="quiet"
-										:color="
-											!hoveringTest && !testingJava
+							<div class="flex gap-2 items-center">
+								<Input
+									:model-value="activePath"
+									autocomplete="off"
+									:disabled="!overrideJavaInstall"
+									:placeholder="formatMessage(messages.javaPathPlaceholder)"
+									wrapper-class="flex-1 min-w-0"
+									@update:model-value="(val) => (javaPath = String(val))"
+								/>
+								<Button
+									type="quiet"
+									:color="
+										overrideJavaInstall && !hoveringTest && !testingJava
+											? javaTestResult === true
+												? 'green'
+												: 'red'
+											: undefined
+									"
+									:disabled="!overrideJavaInstall || testingJava"
+									:style="{
+										'--legacy-button-color':
+											(overrideJavaInstall && !hoveringTest && !testingJava
 												? javaTestResult === true
 													? 'green'
 													: 'red'
-												: undefined
-										"
-										:disabled="testingJava"
-										:style="{
-											'--legacy-button-color':
-												(!hoveringTest && !testingJava
-													? javaTestResult === true
-														? 'green'
-														: 'red'
-													: 'standard') &&
-												(!hoveringTest && !testingJava
-													? javaTestResult === true
-														? 'green'
-														: 'red'
-													: 'standard') !== 'standard'
-													? `var(--color-${
-															!hoveringTest && !testingJava
-																? javaTestResult === true
-																	? 'green'
-																	: 'red'
-																: 'standard'
-														})`
-													: undefined,
-										}"
-										class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
-										@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
-										@mouseenter="hoveringTest = true"
-										@mouseleave="hoveringTest = false"
-									>
-										<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-										<CheckCircleIcon
-											v-else-if="javaTestResult === true && !hoveringTest"
-											class="h-4 w-4"
-										/>
-										<XCircleIcon
-											v-else-if="javaTestResult !== true && !hoveringTest"
-											class="h-4 w-4"
-										/>
-										<RefreshCwIcon v-else class="h-4 w-4" />
-									</Button>
-								</div>
-								<div class="flex gap-2">
-									<Button @click="handleDetectJava">
-										<SearchIcon />
-										Detect
-									</Button>
-									<Button @click="handleBrowseJava">
-										<FolderSearchIcon />
-										Browse
-									</Button>
-								</div>
+												: 'standard') &&
+											(overrideJavaInstall && !hoveringTest && !testingJava
+												? javaTestResult === true
+													? 'green'
+													: 'red'
+												: 'standard') !== 'standard'
+												? `var(--color-${
+														overrideJavaInstall && !hoveringTest && !testingJava
+															? javaTestResult === true
+																? 'green'
+																: 'red'
+															: 'standard'
+													})`
+												: undefined,
+									}"
+									class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
+									@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
+									@mouseenter="hoveringTest = true"
+									@mouseleave="hoveringTest = false"
+								>
+									<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+									<CheckCircleIcon
+										v-else-if="overrideJavaInstall && javaTestResult === true && !hoveringTest"
+										class="h-4 w-4"
+									/>
+									<XCircleIcon
+										v-else-if="overrideJavaInstall && javaTestResult !== true && !hoveringTest"
+										class="h-4 w-4"
+									/>
+									<RefreshCwIcon v-else class="h-4 w-4" />
+								</Button>
+							</div>
+							<div class="flex gap-2">
+								<Button :disabled="!overrideJavaInstall" @click="handleDetectJava">
+									<SearchIcon />
+									Detect
+								</Button>
+								<Button :disabled="!overrideJavaInstall" @click="handleBrowseJava">
+									<FolderSearchIcon />
+									Browse
+								</Button>
 							</div>
 						</div>
 					</div>
 				</div>
-			</SettingsOptionsTransition>
+			</div>
 		</section>
 
 		<section class="flex flex-col">
@@ -294,20 +313,19 @@ const messages = defineMessages({
 				</div>
 				<Toggle id="override-memory-allocation" v-model="overrideMemorySettings" />
 			</div>
-			<SettingsOptionsTransition :show="overrideMemorySettings">
-				<div class="pt-3">
-					<Slider
-						id="max-memory"
-						v-model="memory.maximum"
-						:min="512"
-						:max="maxMemory"
-						:step="64"
-						:snap-points="snapPoints"
-						:snap-range="512"
-						unit="MB"
-					/>
-				</div>
-			</SettingsOptionsTransition>
+			<div class="pt-3">
+				<Slider
+					id="max-memory"
+					v-model="memory.maximum"
+					:disabled="!overrideMemorySettings"
+					:min="512"
+					:max="maxMemory"
+					:step="64"
+					:snap-points="snapPoints"
+					:snap-range="512"
+					unit="MB"
+				/>
+			</div>
 		</section>
 
 		<section class="flex flex-col">
@@ -320,17 +338,16 @@ const messages = defineMessages({
 				</div>
 				<Toggle id="override-java-arguments" v-model="overrideJavaArgs" />
 			</div>
-			<SettingsOptionsTransition :show="overrideJavaArgs">
-				<div class="pt-3">
-					<Input
-						id="java-args"
-						v-model="javaArgs"
-						autocomplete="off"
-						:placeholder="formatMessage(messages.enterJavaArguments)"
-						wrapper-class="w-full"
-					/>
-				</div>
-			</SettingsOptionsTransition>
+			<div class="pt-3" :class="{ 'opacity-50': !overrideJavaArgs }">
+				<Input
+					id="java-args"
+					v-model="javaArgs"
+					autocomplete="off"
+					:disabled="!overrideJavaArgs"
+					:placeholder="formatMessage(messages.enterJavaArguments)"
+					wrapper-class="w-full"
+				/>
+			</div>
 		</section>
 
 		<section class="flex flex-col">
@@ -343,17 +360,16 @@ const messages = defineMessages({
 				</div>
 				<Toggle id="override-environment-variables" v-model="overrideEnvVars" />
 			</div>
-			<SettingsOptionsTransition :show="overrideEnvVars">
-				<div class="pt-3">
-					<Input
-						id="env-vars"
-						v-model="envVars"
-						autocomplete="off"
-						:placeholder="formatMessage(messages.enterEnvironmentVariables)"
-						wrapper-class="w-full"
-					/>
-				</div>
-			</SettingsOptionsTransition>
+			<div class="pt-3" :class="{ 'opacity-50': !overrideEnvVars }">
+				<Input
+					id="env-vars"
+					v-model="envVars"
+					autocomplete="off"
+					:disabled="!overrideEnvVars"
+					:placeholder="formatMessage(messages.enterEnvironmentVariables)"
+					wrapper-class="w-full"
+				/>
+			</div>
 		</section>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
index f4458d87bc..2c61cc712a 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	EditIcon,
-	RefreshCwIcon,
-	RotateCounterClockwiseIcon,
-	SpinnerIcon,
-	XIcon,
-} from '@modrinth/assets'
+import { EditIcon, RefreshCwIcon, RotateCounterClockwiseIcon, XIcon } from '@modrinth/assets'
 import {
 	Button,
 	commonMessages,
@@ -17,7 +11,6 @@ import {
 } from '@modrinth/ui'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, inject, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 
 import {
 	get_synced_option_join_preview,
@@ -29,7 +22,7 @@ import {
 import type { GameInstance } from '@/helpers/types'
 import { appSettingsModalOpenSyncedOptionsKey } from '@/providers/app-settings-modal'
 
-import { instanceKeys, screenshotKeys } from '../../query-options'
+import { instanceKeys } from '../../query-options'
 import HooksSettings from './hooks-settings.vue'
 import { injectInstanceSettings } from './instance-settings-context'
 import JavaSettings from './java-settings.vue'
@@ -39,27 +32,24 @@ const { instance, closeModal } = injectInstanceSettings()
 const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
 const queryClient = useQueryClient()
-const route = useRoute()
-const router = useRouter()
 const openAppSettingsSyncedOptions = inject(appSettingsModalOpenSyncedOptionsKey, () => {})
 
 const messages = defineMessages({
 	sharedSettingsDescription: {
 		id: 'instance.settings.tabs.synced-options.shared-settings.description',
-		defaultMessage:
-			'Game settings can be shared between instances. Choose what to share in app settings.',
+		defaultMessage: 'Enable an override to keep a synced setting separate for this instance.',
 	},
 	openSyncedOptions: {
 		id: 'instance.settings.tabs.synced-options.open-app-settings',
-		defaultMessage: 'Open synced settings',
+		defaultMessage: 'Manage synced settings',
 	},
 	multiplayerServers: {
 		id: 'instance.settings.tabs.synced-options.multiplayer-servers',
 		defaultMessage: 'Multiplayer servers',
 	},
 	multiplayerServersDescription: {
-		id: 'instance.settings.tabs.synced-options.multiplayer-servers.exclude-description',
-		defaultMessage: 'Exclude this instance from multiplayer server syncing.',
+		id: 'instance.settings.tabs.synced-options.multiplayer-servers.override-description',
+		defaultMessage: "Keep this instance's multiplayer servers separate from synced servers.",
 	},
 	multiplayerServersDisabled: {
 		id: 'instance.settings.tabs.synced-options.multiplayer-servers.disabled-in-app',
@@ -70,8 +60,8 @@ const messages = defineMessages({
 		defaultMessage: 'Command history',
 	},
 	commandHistoryDescription: {
-		id: 'instance.settings.tabs.synced-options.command-history.exclude-description',
-		defaultMessage: 'Exclude this instance from command history syncing.',
+		id: 'instance.settings.tabs.synced-options.command-history.override-description',
+		defaultMessage: "Keep this instance's command history separate from synced command history.",
 	},
 	commandHistoryDisabled: {
 		id: 'instance.settings.tabs.synced-options.command-history.disabled-in-app',
@@ -82,25 +72,13 @@ const messages = defineMessages({
 		defaultMessage: 'Saved creative hotbars',
 	},
 	creativeHotbarsDescription: {
-		id: 'instance.settings.tabs.synced-options.creative-hotbars.exclude-description',
-		defaultMessage: 'Exclude this instance from saved creative hotbar syncing.',
+		id: 'instance.settings.tabs.synced-options.creative-hotbars.override-description',
+		defaultMessage: "Keep this instance's saved creative hotbars separate from synced hotbars.",
 	},
 	creativeHotbarsDisabled: {
 		id: 'instance.settings.tabs.synced-options.creative-hotbars.disabled-in-app',
 		defaultMessage: 'Saved creative hotbar syncing is turned off in app settings.',
 	},
-	screenshots: {
-		id: 'instance.settings.tabs.synced-options.screenshots',
-		defaultMessage: 'Screenshots',
-	},
-	screenshotsDescription: {
-		id: 'instance.settings.tabs.synced-options.screenshots.exclude-description',
-		defaultMessage: 'Exclude this instance’s screenshots from the Screenshots page.',
-	},
-	screenshotsDisabled: {
-		id: 'instance.settings.tabs.synced-options.screenshots.disabled-in-app',
-		defaultMessage: 'Screenshots are turned off in app settings.',
-	},
 	hotbarConflictTitle: {
 		id: 'instance.settings.tabs.synced-options.hotbars-conflict.title',
 		defaultMessage: 'Choose creative hotbars',
@@ -124,15 +102,16 @@ const messages = defineMessages({
 	},
 })
 
-const globalDisabledMessages: Record<SyncedOption, keyof typeof messages> = {
+type InstanceSyncedOption = Exclude<SyncedOption, 'screenshots'>
+
+const globalDisabledMessages: Record<InstanceSyncedOption, keyof typeof messages> = {
 	multiplayer_servers: 'multiplayerServersDisabled',
 	command_history: 'commandHistoryDisabled',
 	creative_hotbars: 'creativeHotbarsDisabled',
-	screenshots: 'screenshotsDisabled',
 }
 
 const rows: Array<{
-	option: SyncedOption
+	option: InstanceSyncedOption
 	title: keyof typeof messages
 	description?: keyof typeof messages
 }> = [
@@ -151,11 +130,6 @@ const rows: Array<{
 		title: 'creativeHotbars',
 		description: 'creativeHotbarsDescription',
 	},
-	{
-		option: 'screenshots',
-		title: 'screenshots',
-		description: 'screenshotsDescription',
-	},
 ]
 
 const overviewQuery = useQuery(
@@ -173,16 +147,29 @@ const capabilities = computed(
 		),
 )
 const hotbarResolutionModal = ref<InstanceType<typeof NewModal> | null>(null)
-const previewingOption = ref<SyncedOption | null>(null)
+const previewingOption = ref<InstanceSyncedOption | null>(null)
+const previewExcluded = ref<Partial<Record<InstanceSyncedOption, boolean>>>({})
+
+function excluded(option: InstanceSyncedOption): boolean {
+	const preview = previewExcluded.value[option]
+	if (preview !== undefined) return preview
 
-function excluded(option: SyncedOption): boolean {
 	return (
 		overviewQuery.data.value?.global_options[option] === true &&
 		!instance.value.synced_options[option]
 	)
 }
 
-function disabledReason(option: SyncedOption): string | undefined {
+function setPreviewExcluded(option: InstanceSyncedOption, value?: boolean) {
+	if (value === undefined) {
+		const { [option]: _, ...next } = previewExcluded.value
+		previewExcluded.value = next
+	} else {
+		previewExcluded.value = { ...previewExcluded.value, [option]: value }
+	}
+}
+
+function disabledReason(option: InstanceSyncedOption): string | undefined {
 	if (overviewQuery.data.value?.global_options[option] === false) {
 		return formatMessage(messages[globalDisabledMessages[option]])
 	}
@@ -194,52 +181,97 @@ function showAppSyncedOptions(): void {
 	openAppSettingsSyncedOptions()
 }
 
+type SyncedOptionMutationVariables = {
+	option: InstanceSyncedOption
+	enabled: boolean
+	resolution?: SyncedOptionJoinResolution
+}
+
+const mutationKey = ['instance-synced-options', 'set', instance.value.id] as const
 const mutation = useMutation({
-	mutationFn: ({
-		option,
-		enabled,
-		resolution,
-	}: {
-		option: SyncedOption
-		enabled: boolean
-		resolution?: SyncedOptionJoinResolution
-	}) => set_synced_option(instance.value.id, option, enabled, resolution),
-	onSuccess: async (updatedInstance, variables) => {
-		hotbarResolutionModal.value?.hide()
-		queryClient.setQueryData(instanceKeys.detail(updatedInstance.id), updatedInstance)
-		queryClient.setQueryData<GameInstance[]>(instanceKeys.list(), (instances) =>
+	mutationKey,
+	mutationFn: ({ option, enabled, resolution }: SyncedOptionMutationVariables) =>
+		set_synced_option(instance.value.id, option, enabled, resolution),
+	onMutate: async ({ option, enabled }) => {
+		const instanceId = instance.value.id
+		const detailKey = instanceKeys.detail(instanceId)
+		const listKey = instanceKeys.list()
+		await Promise.all([
+			queryClient.cancelQueries({ queryKey: detailKey }),
+			queryClient.cancelQueries({ queryKey: listKey }),
+		])
+
+		const previousEnabled = instance.value.synced_options[option]
+		const applyOption = (current: GameInstance): GameInstance => ({
+			...current,
+			synced_options: {
+				...current.synced_options,
+				[option]: enabled,
+			},
+		})
+
+		queryClient.setQueryData<GameInstance>(detailKey, (current) =>
+			applyOption(current ?? instance.value),
+		)
+		queryClient.setQueryData<GameInstance[]>(listKey, (instances) =>
 			instances?.map((candidate) =>
-				candidate.id === updatedInstance.id ? updatedInstance : candidate,
+				candidate.id === instanceId ? applyOption(candidate) : candidate,
 			),
 		)
-		await queryClient.invalidateQueries({
-			queryKey: ['instance-synced-options', updatedInstance.id],
-		})
+		setPreviewExcluded(option)
+
+		return { instanceId, previousEnabled }
+	},
+	onSuccess: () => {
+		hotbarResolutionModal.value?.hide()
+	},
+	onError: (error, { option }, context) => {
+		if (context) {
+			const rollbackOption = (current: GameInstance): GameInstance => ({
+				...current,
+				synced_options: {
+					...current.synced_options,
+					[option]: context.previousEnabled,
+				},
+			})
+			queryClient.setQueryData<GameInstance>(instanceKeys.detail(context.instanceId), (current) =>
+				current ? rollbackOption(current) : current,
+			)
+			queryClient.setQueryData<GameInstance[]>(instanceKeys.list(), (instances) =>
+				instances?.map((candidate) =>
+					candidate.id === context.instanceId ? rollbackOption(candidate) : candidate,
+				),
+			)
+		}
+		setPreviewExcluded(option)
+		handleError(error)
+	},
+	onSettled: async (_data, _error, variables) => {
 		if (variables.option === 'multiplayer_servers') {
 			await queryClient.invalidateQueries({
-				queryKey: instanceKeys.worlds(updatedInstance.id),
+				queryKey: instanceKeys.worlds(instance.value.id),
 			})
 		}
-
-		if (variables.option === 'screenshots') {
-			await queryClient.invalidateQueries({ queryKey: screenshotKeys.all })
-			if (updatedInstance.synced_options.screenshots && route.name === 'InstanceScreenshots') {
-				await router.replace(`/instance/${encodeURIComponent(updatedInstance.id)}`)
-			} else if (!updatedInstance.synced_options.screenshots && route.name === 'Screenshots') {
-				await router.replace('/')
-			}
+		if (queryClient.isMutating({ mutationKey }) === 1) {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: instanceKeys.detail(instance.value.id) }),
+				queryClient.invalidateQueries({ queryKey: instanceKeys.list() }),
+				queryClient.invalidateQueries({
+					queryKey: ['instance-synced-options', instance.value.id],
+				}),
+			])
 		}
 	},
-	onError: handleError,
 })
 
-async function setExcluded(option: SyncedOption, nextExcluded: boolean) {
+async function setExcluded(option: InstanceSyncedOption, nextExcluded: boolean) {
 	const enabled = !nextExcluded
 	if (!enabled || option !== 'creative_hotbars') {
 		mutation.mutate({ option, enabled })
 		return
 	}
 
+	setPreviewExcluded(option, nextExcluded)
 	previewingOption.value = option
 	try {
 		const preview = await get_synced_option_join_preview(instance.value.id, option)
@@ -249,12 +281,18 @@ async function setExcluded(option: SyncedOption, nextExcluded: boolean) {
 			mutation.mutate({ option, enabled })
 		}
 	} catch (error) {
+		setPreviewExcluded(option)
 		handleError(error)
 	} finally {
 		previewingOption.value = null
 	}
 }
 
+function cancelHotbarResolution() {
+	setPreviewExcluded('creative_hotbars')
+	hotbarResolutionModal.value?.hide()
+}
+
 function resolveHotbars(resolution: SyncedOptionJoinResolution) {
 	mutation.mutate({
 		option: 'creative_hotbars',
@@ -271,6 +309,7 @@ function resolveHotbars(resolution: SyncedOptionJoinResolution) {
 			:header="formatMessage(messages.hotbarConflictTitle)"
 			fade="warning"
 			max-width="560px"
+			@hide="setPreviewExcluded('creative_hotbars')"
 		>
 			<div class="flex flex-col gap-3 text-primary">
 				<p class="m-0">
@@ -289,7 +328,7 @@ function resolveHotbars(resolution: SyncedOptionJoinResolution) {
 					<Button
 						type="outlined"
 						:disabled="mutation.isPending.value"
-						@click="hotbarResolutionModal?.hide()"
+						@click="cancelHotbarResolution"
 					>
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
@@ -336,20 +375,12 @@ function resolveHotbars(resolution: SyncedOptionJoinResolution) {
 						{{ formatMessage(messages[row.description]) }}
 					</p>
 				</div>
-				<div class="flex shrink-0 items-center gap-2">
-					<SpinnerIcon
-						v-if="
-							(mutation.isPending.value && mutation.variables.value?.option === row.option) ||
-							previewingOption === row.option
-						"
-						class="size-5 animate-spin"
-					/>
+				<div class="flex shrink-0 items-center">
 					<span v-tooltip="disabledReason(row.option)" class="flex">
 						<Toggle
 							:id="`exclude-${row.option}`"
 							:model-value="excluded(row.option)"
 							:disabled="
-								mutation.isPending.value ||
 								previewingOption !== null ||
 								overviewQuery.isPending.value ||
 								!!disabledReason(row.option)
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
index 0965160794..70dc3b0c3b 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
@@ -7,7 +7,6 @@ import { get } from '@/helpers/settings.ts'
 
 import type { AppSettings } from '../../../../helpers/types'
 import { injectInstanceSettings } from './instance-settings-context'
-import SettingsOptionsTransition from './settings-options-transition.vue'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -26,6 +25,13 @@ const fullscreenSetting: Ref<boolean> = ref(
 	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
 )
 
+watch(overrideWindowSettings, (enabled) => {
+	if (!enabled) {
+		resolution.value = globalSettings.game_resolution.slice() as [number, number]
+		fullscreenSetting.value = globalSettings.force_fullscreen
+	}
+})
+
 const editInstanceObject = computed(() => {
 	if (!overrideWindowSettings.value) {
 		return {
@@ -102,58 +108,56 @@ const messages = defineMessages({
 			</div>
 			<Toggle id="override-window-settings" v-model="overrideWindowSettings" />
 		</div>
-		<SettingsOptionsTransition :show="overrideWindowSettings">
-			<div class="flex flex-col gap-6 pt-6">
-				<div class="flex items-center gap-4 justify-between">
-					<div class="flex flex-col gap-1">
-						<h2 class="m-0 text-lg font-semibold text-contrast">
-							{{ formatMessage(messages.fullscreen) }}
-						</h2>
-						<p class="m-0">
-							{{ formatMessage(messages.fullscreenDescription) }}
-						</p>
-					</div>
-					<Toggle id="fullscreen" v-model="fullscreenSetting" />
+		<div class="flex flex-col gap-6 pt-6" :class="{ 'opacity-50': !overrideWindowSettings }">
+			<div class="flex items-center gap-4 justify-between">
+				<div class="flex flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.fullscreen) }}
+					</h2>
+					<p class="m-0">
+						{{ formatMessage(messages.fullscreenDescription) }}
+					</p>
 				</div>
+				<Toggle id="fullscreen" v-model="fullscreenSetting" :disabled="!overrideWindowSettings" />
+			</div>
 
-				<div class="flex items-center gap-4 justify-between">
-					<div class="flex flex-col gap-1">
-						<h2 class="m-0 text-lg font-semibold text-contrast">
-							{{ formatMessage(messages.width) }}
-						</h2>
-						<p class="m-0">
-							{{ formatMessage(messages.widthDescription) }}
-						</p>
-					</div>
-					<Input
-						id="width"
-						v-model="resolution[0]"
-						autocomplete="off"
-						:disabled="fullscreenSetting"
-						type="number"
-						:placeholder="formatMessage(messages.enterWidth)"
-					/>
+			<div class="flex items-center gap-4 justify-between">
+				<div class="flex flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.width) }}
+					</h2>
+					<p class="m-0">
+						{{ formatMessage(messages.widthDescription) }}
+					</p>
 				</div>
+				<Input
+					id="width"
+					v-model="resolution[0]"
+					autocomplete="off"
+					:disabled="!overrideWindowSettings || fullscreenSetting"
+					type="number"
+					:placeholder="formatMessage(messages.enterWidth)"
+				/>
+			</div>
 
-				<div class="flex items-center gap-4 justify-between">
-					<div class="flex flex-col gap-1">
-						<h2 class="m-0 text-lg font-semibold text-contrast">
-							{{ formatMessage(messages.height) }}
-						</h2>
-						<p class="m-0">
-							{{ formatMessage(messages.heightDescription) }}
-						</p>
-					</div>
-					<Input
-						id="height"
-						v-model="resolution[1]"
-						autocomplete="off"
-						:disabled="fullscreenSetting"
-						type="number"
-						:placeholder="formatMessage(messages.enterHeight)"
-					/>
+			<div class="flex items-center gap-4 justify-between">
+				<div class="flex flex-col gap-1">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.height) }}
+					</h2>
+					<p class="m-0">
+						{{ formatMessage(messages.heightDescription) }}
+					</p>
 				</div>
+				<Input
+					id="height"
+					v-model="resolution[1]"
+					autocomplete="off"
+					:disabled="!overrideWindowSettings || fullscreenSetting"
+					type="number"
+					:placeholder="formatMessage(messages.enterHeight)"
+				/>
 			</div>
-		</SettingsOptionsTransition>
+		</div>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index 6ece98f1f7..6764e5397f 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -502,9 +502,7 @@ const tabs = computed(() => {
 		},
 	]
 
-	const screenshotsSynced =
-		globalSyncedOptionsQuery.data.value?.screenshots === true &&
-		instance.value?.synced_options.screenshots === true
+	const screenshotsSynced = globalSyncedOptionsQuery.data.value?.screenshots === true
 	if (!screenshotsSynced) {
 		instanceTabs.splice(2, 0, {
 			label: formatMessage(messages.screenshotsTab),
diff --git a/apps/app/src/api/instance.rs b/apps/app/src/api/instance.rs
index 705201788b..6cbb60b904 100644
--- a/apps/app/src/api/instance.rs
+++ b/apps/app/src/api/instance.rs
@@ -839,8 +839,14 @@ pub async fn instance_get_global_synced_options()
 pub async fn instance_set_global_synced_option(
     option: InstanceSyncedOption,
     enabled: bool,
+    base_instance_id: Option<String>,
 ) -> Result<theseus::instance::GlobalSyncedOptions> {
-    Ok(theseus::instance::set_global_synced_option(option, enabled).await?)
+    Ok(theseus::instance::set_global_synced_option(
+        option,
+        enabled,
+        base_instance_id.as_deref(),
+    )
+    .await?)
 }
 
 #[tauri::command]
diff --git a/packages/app-lib/migrations/20260828120000_reset-synced-option-defaults.sql b/packages/app-lib/migrations/20260828120000_reset-synced-option-defaults.sql
new file mode 100644
index 0000000000..15abd6094c
--- /dev/null
+++ b/packages/app-lib/migrations/20260828120000_reset-synced-option-defaults.sql
@@ -0,0 +1,15 @@
+UPDATE sync_feature_settings
+SET globally_enabled = 0, new_instance_default = 1
+WHERE feature IN (
+	'command_history',
+	'multiplayer_servers',
+	'creative_hotbars'
+);
+
+UPDATE instance_sync_preferences
+SET enabled = 1
+WHERE feature IN (
+	'command_history',
+	'multiplayer_servers',
+	'creative_hotbars'
+);
diff --git a/packages/app-lib/src/api/instance/screenshots/operations.rs b/packages/app-lib/src/api/instance/screenshots/operations.rs
index 7c7c3cea47..4506b5b5c0 100644
--- a/packages/app-lib/src/api/instance/screenshots/operations.rs
+++ b/packages/app-lib/src/api/instance/screenshots/operations.rs
@@ -67,9 +67,14 @@ pub async fn list_screenshots(
 
 pub async fn list_synced_screenshots() -> crate::Result<Vec<InstanceScreenshot>>
 {
+    if !super::super::synced_options::get_global_options()
+        .await?
+        .screenshots
+    {
+        return Ok(Vec::new());
+    }
     let state = State::get().await?;
-    let sources =
-        instance_rows::list_synced_screenshot_sources(&state.pool).await?;
+    let sources = instance_rows::list_screenshot_sources(&state.pool).await?;
     list_source_screenshot_sets(&state, sources).await
 }
 
diff --git a/packages/app-lib/src/api/instance/synced_options/orchestration.rs b/packages/app-lib/src/api/instance/synced_options/orchestration.rs
index 16eeb0c8e5..32888467e4 100644
--- a/packages/app-lib/src/api/instance/synced_options/orchestration.rs
+++ b/packages/app-lib/src/api/instance/synced_options/orchestration.rs
@@ -288,12 +288,57 @@ async fn version_capability(
 pub async fn set_global_option(
     option: SyncedOption,
     enabled: bool,
+    base_instance_id: Option<&str>,
 ) -> crate::Result<GlobalSyncedOptions> {
     let state = State::get().await?;
     let _guard = state.lock_synced_options().await;
-    let reset_participation =
-        enabled && !canonical_exists(option, &state).await?;
 
+    if enabled && option != SyncedOption::Screenshots {
+        let base_instance_id = base_instance_id.ok_or_else(|| {
+            ErrorKind::InputError(
+                "Choose an instance to use as the sync source.".to_string(),
+            )
+        })?;
+        return enable_global_option_from_base(
+            option,
+            base_instance_id,
+            &state,
+        )
+        .await;
+    }
+
+    set_global_option_enabled(option, enabled, &state).await?;
+
+    let instances = crate::state::list_instances(&state.pool).await?;
+    for metadata in instances {
+        if sync_files_are_protected(&metadata)
+            || instance_is_running(&metadata, &state).await?
+        {
+            continue;
+        }
+        if !instance_option_enabled(&metadata, option) {
+            detach_option(&metadata, option, &state).await?;
+            continue;
+        }
+        match capability_status(&metadata, option, enabled, &state).await {
+            CapabilityStatus::Supported => {
+                reconcile_option(&metadata, option, &state).await?
+            }
+            CapabilityStatus::Unsupported(_) => {
+                detach_option(&metadata, option, &state).await?
+            }
+            CapabilityStatus::Indeterminate(_) => {}
+        }
+    }
+
+    get_global_options_with_state(&state).await
+}
+
+async fn set_global_option_enabled(
+    option: SyncedOption,
+    enabled: bool,
+    state: &State,
+) -> crate::Result<()> {
     let option_name = option.as_str();
     sqlx::query!(
         "
@@ -308,49 +353,91 @@ pub async fn set_global_option(
     )
     .execute(&state.pool)
     .await?;
+    Ok(())
+}
+
+async fn enable_global_option_from_base(
+    option: SyncedOption,
+    base_instance_id: &str,
+    state: &State,
+) -> crate::Result<GlobalSyncedOptions> {
+    let source = crate::state::get_instance(base_instance_id, &state.pool)
+        .await?
+        .ok_or_else(|| {
+            ErrorKind::InputError("Unknown sync source instance.".to_string())
+        })?;
+    if sync_files_are_protected(&source)
+        || instance_is_running(&source, state).await?
+    {
+        return Err(ErrorKind::InputError(
+            "Close the source instance before using it for syncing."
+                .to_string(),
+        )
+        .into());
+    }
+    match capability_status(&source, option, true, state).await {
+        CapabilityStatus::Supported => {}
+        CapabilityStatus::Unsupported(reason)
+        | CapabilityStatus::Indeterminate(reason) => {
+            return Err(ErrorKind::InputError(reason).into());
+        }
+    }
 
     let instances = crate::state::list_instances(&state.pool).await?;
-    if reset_participation {
-        for metadata in instances {
-            if instance_option_enabled(&metadata, option) {
-                instance_rows::set_instance_sync_preference(
-                    &metadata.instance.id,
-                    option,
-                    false,
-                    &state.pool,
-                )
-                .await?;
-            }
-            if !sync_files_are_protected(&metadata)
-                && !instance_is_running(&metadata, &state).await?
-            {
-                detach_option(&metadata, option, &state).await?;
-            }
+    for metadata in &instances {
+        if instance_option_enabled(metadata, option)
+            && (sync_files_are_protected(metadata)
+                || instance_is_running(metadata, state).await?)
+        {
+            return Err(ErrorKind::InputError(
+                "Close all instances using this synced setting before choosing a new sync source."
+                    .to_string(),
+            )
+            .into());
         }
-        return get_global_options_with_state(&state).await;
     }
-    for metadata in instances {
+
+    for metadata in &instances {
+        if instance_option_enabled(metadata, option) {
+            detach_option(metadata, option, state).await?;
+        }
+    }
+    if !instance_option_enabled(&source, option) {
+        detach_option(&source, option, state).await?;
+    }
+
+    seed_from_instance(&source, option, state).await?;
+    instance_rows::set_instance_sync_preference(
+        base_instance_id,
+        option,
+        true,
+        &state.pool,
+    )
+    .await?;
+    set_global_option_enabled(option, true, state).await?;
+
+    for metadata in crate::state::list_instances(&state.pool).await? {
         if sync_files_are_protected(&metadata)
-            || instance_is_running(&metadata, &state).await?
+            || instance_is_running(&metadata, state).await?
         {
             continue;
         }
         if !instance_option_enabled(&metadata, option) {
-            detach_option(&metadata, option, &state).await?;
+            detach_option(&metadata, option, state).await?;
             continue;
         }
-        match capability_status(&metadata, option, enabled, &state).await {
+        match capability_status(&metadata, option, true, state).await {
             CapabilityStatus::Supported => {
-                reconcile_option(&metadata, option, &state).await?
+                ensure_option(&metadata, option, state).await?
             }
             CapabilityStatus::Unsupported(_) => {
-                detach_option(&metadata, option, &state).await?
+                detach_option(&metadata, option, state).await?
             }
             CapabilityStatus::Indeterminate(_) => {}
         }
     }
 
-    get_global_options_with_state(&state).await
+    get_global_options_with_state(state).await
 }
 
 pub async fn set_instance_option(
diff --git a/packages/app-lib/src/api/instance/synced_servers/operations.rs b/packages/app-lib/src/api/instance/synced_servers/operations.rs
index 753391f9d4..1d93cec454 100644
--- a/packages/app-lib/src/api/instance/synced_servers/operations.rs
+++ b/packages/app-lib/src/api/instance/synced_servers/operations.rs
@@ -172,7 +172,48 @@ pub(in crate::api::instance) async fn detach_servers(
 ) -> crate::Result<()> {
     let generated = generated_path(state, &metadata.instance.id);
     let local = instance_dir(metadata, state).join(SERVERS_FILE);
-    detach_link(&generated, &local).await
+    let Some(current_checkpoint) = checkpoint(
+        &metadata.instance.id,
+        SyncedOption::MultiplayerServers,
+        "default",
+        state,
+    )
+    .await?
+    else {
+        return detach_link(&generated, &local).await;
+    };
+    let linked_to_generated = tokio::fs::symlink_metadata(&local)
+        .await
+        .is_ok_and(|metadata| metadata.file_type().is_symlink())
+        && tokio::fs::read_link(&local)
+            .await
+            .is_ok_and(|target| target == generated);
+    let matches_checkpoint = local.exists()
+        && sha1_file(&local).await? == current_checkpoint.expected_sha1;
+    if current_checkpoint.status != CheckpointStatus::Ready
+        || (!linked_to_generated && !matches_checkpoint)
+    {
+        return detach_link(&generated, &local).await;
+    }
+
+    let current = read_servers(&local).await?;
+    let projections =
+        load_projection_entries(&metadata.instance.id, state).await?;
+    let projection_matches = match_projection_entries(&current, &projections);
+    let instance_servers = current
+        .into_iter()
+        .zip(projection_matches)
+        .filter_map(|(server, projection)| {
+            projection
+                .is_none_or(|projection| {
+                    projection.owner == ProjectionOwner::Instance
+                })
+                .then_some(server)
+        })
+        .collect::<Vec<_>>();
+
+    detach_link(&generated, &local).await?;
+    write_servers(&local, &instance_servers).await
 }
 
 pub(in crate::api::instance) async fn reconcile_servers(
diff --git a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
index 25ce58a714..2cc2c3007e 100644
--- a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
+++ b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
@@ -494,32 +494,6 @@ pub(crate) async fn get_instance_screenshot_source(
     Ok(source)
 }
 
-pub(crate) async fn list_synced_screenshot_sources(
-    pool: &SqlitePool,
-) -> crate::Result<Vec<InstanceScreenshotSource>> {
-    let sources = sqlx::query_as!(
-        InstanceScreenshotSource,
-        "
-		SELECT instances.id, instances.name, instances.path
-		FROM instances
-		INNER JOIN instance_sync_preferences preferences
-			ON preferences.instance_id = instances.id
-		WHERE preferences.feature = 'screenshots'
-			AND preferences.enabled = 1
-			AND EXISTS (
-				SELECT 1
-				FROM sync_feature_settings
-				WHERE feature = 'screenshots' AND globally_enabled = 1
-			)
-		ORDER BY instances.name, instances.id
-		",
-    )
-    .fetch_all(pool)
-    .await?;
-
-    Ok(sources)
-}
-
 pub(crate) async fn list_screenshot_sources(
     pool: &SqlitePool,
 ) -> crate::Result<Vec<InstanceScreenshotSource>> {
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index a7e6f35275..fe3c3e451a 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -1,25 +1,29 @@
 <template>
-	<div class="flex flex-row items-center w-full">
-		<div class="w-full relative">
-			<div class="absolute top-0 h-1/2 w-full">
-				<div
-					class="relative inline-block align-middle w-[calc(100%-0.75rem)] h-3 left-[calc(0.75rem/2)]"
-				>
-					<div
-						v-for="snapPoint in snapPoints"
-						:key="snapPoint"
-						class="absolute inline-block w-1 h-full rounded-sm -translate-x-1/2"
-						:class="{
-							'opacity-0': disabled,
-						}"
-						:style="{
-							left: ((snapPoint - min) / (max - min)) * 100 + '%',
-							backgroundColor:
-								snapPoint <= currentValue ? 'var(--color-brand)' : 'var(--color-base)',
-						}"
-					></div>
-				</div>
+	<div class="flex w-full items-center gap-4">
+		<span class="shrink-0 whitespace-nowrap py-2 text-sm leading-5 text-secondary">
+			{{ min }}
+		</span>
+
+		<div class="relative h-10 min-w-0 flex-1" :class="disabled ? 'opacity-50' : ''">
+			<div
+				class="pointer-events-none absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-surface-5"
+			>
+				<div class="h-full rounded-full bg-brand" :style="{ width: `${currentPercentage}%` }" />
 			</div>
+
+			<div
+				v-if="visibleSnapPoints.length"
+				class="pointer-events-none absolute inset-x-0 top-1/2 h-6 -translate-y-1/2"
+			>
+				<span
+					v-for="snapPoint in visibleSnapPoints"
+					:key="snapPoint"
+					class="absolute top-0 h-6 w-1 -translate-x-1/2 rounded-full"
+					:class="snapPoint <= currentValue ? 'bg-brand' : 'bg-surface-5'"
+					:style="{ left: `${getPercentage(snapPoint)}%` }"
+				/>
+			</div>
+
 			<input
 				ref="input"
 				v-model="currentValue"
@@ -27,27 +31,24 @@
 				:min="min"
 				:max="max"
 				:step="step"
-				class="slider relative rounded-sm h-1 w-full p-0 min-h-0 shadow-none outline-none align-middle appearance-none"
-				:class="{
-					'opacity-50 cursor-not-allowed': disabled,
-				}"
+				class="slider absolute top-0 h-10 min-h-0 appearance-none border-0 bg-transparent p-0 shadow-none outline-none"
+				:class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
 				:disabled="disabled"
-				:style="{
-					'--current-value': currentValue,
-					'--min-value': min,
-					'--max-value': max,
-				}"
 				@input="onInputWithSnap(($event.target as HTMLInputElement).value)"
 			/>
-			<div class="flex flex-row justify-between text-xs m-0">
-				<span> {{ min }} {{ unit }} </span>
-				<span> {{ max }} {{ unit }} </span>
-			</div>
 		</div>
+
+		<span class="shrink-0 whitespace-nowrap py-2 text-sm leading-5 text-secondary">
+			{{ formatValue(max) }}
+		</span>
+
 		<Input
 			:model-value="String(currentValue)"
 			type="number"
-			class="w-24 ml-3"
+			size="medium"
+			wrapper-class="slider-value shrink-0"
+			input-class="!font-semibold"
+			:style="{ width: valueInputWidth }"
 			:disabled="disabled"
 			:min="min"
 			:max="max"
@@ -58,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import Input from './inputs/Input.vue'
 
@@ -88,104 +89,133 @@ const props = withDefaults(defineProps<Props>(), {
 	unit: '',
 })
 
-const currentValue = ref(Math.max(props.min, props.modelValue))
+const currentValue = ref(clampValue(props.modelValue))
+const currentPercentage = computed(() => getPercentage(currentValue.value))
+const valueInputWidth = computed(
+	() => `calc(${Math.max(String(currentValue.value).length, 1)}ch + 2.125rem)`,
+)
+const visibleSnapPoints = computed(() =>
+	props.snapPoints.filter((snapPoint) => snapPoint >= props.min && snapPoint <= props.max),
+)
 
 watch(
 	() => props.modelValue,
 	(newValue) => {
-		currentValue.value = Math.max(props.min, newValue ?? props.min)
+		currentValue.value = clampValue(newValue ?? props.min)
 	},
 )
 
-const inputValueValid = (inputValue: number) => {
-	let newValue = inputValue || props.min
+function clampValue(value: number) {
+	return Math.max(props.min, Math.min(value, props.max))
+}
+
+function getPercentage(value: number) {
+	const range = props.max - props.min
+	if (range <= 0) return 0
+
+	return Math.max(0, Math.min(((value - props.min) / range) * 100, 100))
+}
+
+function formatValue(value: number) {
+	return props.unit ? `${value} ${props.unit}` : String(value)
+}
 
-	if (props.forceStep) {
+function inputValueValid(inputValue: number) {
+	if (Number.isNaN(inputValue)) return
+
+	let newValue = inputValue
+	if (props.forceStep && props.step > 0) {
 		newValue -= newValue % props.step
 	}
-	newValue = Math.max(props.min, Math.min(newValue, props.max))
 
-	currentValue.value = newValue
+	currentValue.value = clampValue(newValue)
 	emit('update:modelValue', currentValue.value)
 }
 
-const onInputWithSnap = (value: string) => {
-	let parsedValue = parseInt(value)
+function onInputWithSnap(value: string) {
+	let parsedValue = Number.parseFloat(value)
 
 	for (const snapPoint of props.snapPoints) {
 		const distance = Math.abs(snapPoint - parsedValue)
-
-		if (distance < props.snapRange) {
-			parsedValue = snapPoint
-		}
+		if (distance < props.snapRange) parsedValue = snapPoint
 	}
 
 	inputValueValid(parsedValue)
 }
 
-const onInput = (value: string) => {
-	inputValueValid(parseInt(value))
+function onInput(value: string) {
+	inputValueValid(Number.parseFloat(value))
 }
 </script>
 
 <style lang="scss" scoped>
 .slider {
-	-webkit-appearance: none;
-	appearance: none;
-	background: linear-gradient(
-			to right,
-			var(--color-brand) 0%,
-			var(--color-brand)
-				calc(
-					(var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
-				),
-			var(--color-base)
-				calc(
-					(var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
-				),
-			var(--color-base) 100%
-		)
-		100% 100% no-repeat;
+	left: -0.625rem;
+	width: calc(100% + 1.25rem);
+
+	&::-webkit-slider-runnable-track {
+		height: 0.25rem;
+		background: transparent;
+	}
+
+	&::-moz-range-track,
+	&::-moz-range-progress {
+		height: 0.25rem;
+		background: transparent;
+	}
 
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: 0.75rem;
-		height: 0.75rem;
-		background: var(--color-brand);
-		border-radius: 50%;
-		transition:
-			width 0.2s,
-			height 0.2s;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-top: -0.5rem;
+		border: 0;
+		border-radius: 9999px;
+		background: var(--color-text-default);
+		box-shadow:
+			0 0 0 2px var(--surface-3),
+			0 0 0 4px var(--color-brand);
 	}
 
 	&::-moz-range-thumb {
-		border: none;
-		width: 0.75rem;
-		height: 0.75rem;
-		background: var(--color-brand);
-		border-radius: 50%;
-		transition:
-			width 0.2s,
-			height 0.2s;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
+		width: 1.25rem;
+		height: 1.25rem;
+		border: 0;
+		border-radius: 9999px;
+		background: var(--color-text-default);
+		box-shadow:
+			0 0 0 2px var(--surface-3),
+			0 0 0 4px var(--color-brand);
 	}
 
-	&:hover:not(:disabled)::-webkit-slider-thumb,
-	&:hover:not(:disabled)::-moz-range-thumb {
-		width: 1rem;
-		height: 1rem;
+	&:focus-visible::-webkit-slider-thumb {
+		box-shadow:
+			0 0 0 2px var(--surface-3),
+			0 0 0 4px var(--color-brand),
+			0 0 0 8px var(--color-brand-highlight);
+	}
+
+	&:focus-visible::-moz-range-thumb {
+		box-shadow:
+			0 0 0 2px var(--surface-3),
+			0 0 0 4px var(--color-brand),
+			0 0 0 8px var(--color-brand-highlight);
 	}
 
 	&:disabled {
 		pointer-events: none;
+		opacity: 1;
+	}
+}
+
+.slider-value :deep(input[type='number']) {
+	-moz-appearance: textfield;
+
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		margin: 0;
+		-webkit-appearance: none;
 	}
 }
 </style>

From 1a560c64c7ddb0666a211d071d0dad4f17996aad Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 28 Aug 2026 12:04:52 +0100
Subject: [PATCH 2/3] fix: screenshots page lag + better virtualization pass

---
 .../components/ui/screenshots-page/card.vue   | 119 ++++++++++--
 .../components/ui/screenshots-page/group.vue  |  76 ++++++--
 .../components/ui/screenshots-page/index.vue  | 166 +++++++++++------
 .../ui/screenshots-page/section.vue           |  37 +++-
 apps/app/src/api/instance.rs                  |  30 ++-
 .../instance/screenshots/reconciliation.rs    | 173 ++++++++----------
 6 files changed, 413 insertions(+), 188 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/screenshots-page/card.vue b/apps/app-frontend/src/components/ui/screenshots-page/card.vue
index adf1222ef8..f1de4c6532 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/card.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/card.vue
@@ -3,11 +3,16 @@
 <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 {
+	defineMessages,
+	IconButton,
+	useDebugLogger,
+	useFormatDateTime,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { InstanceScreenshot } from '@/helpers/instance'
-const loadedScreenshotUrls = new Set<string>()
 
 const props = defineProps<{
 	screenshot: InstanceScreenshot
@@ -29,9 +34,12 @@ const emit = defineEmits<{
 
 const card = ref<HTMLElement>()
 const image = ref<HTMLImageElement>()
-const loaded = ref(loadedScreenshotUrls.has(props.screenshot.url))
+const imageReady = ref(false)
 const { formatMessage } = useVIntl()
+const debugImage = useDebugLogger('Screenshots:Card')
 const formatTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+let loadStartedAt = performance.now()
+let loadGeneration = 0
 const messages = defineMessages({
 	select: { id: 'app.screenshots.select', defaultMessage: 'Select {name}' },
 	deselect: { id: 'app.screenshots.deselect', defaultMessage: 'Deselect {name}' },
@@ -69,19 +77,86 @@ function activate(event: MouseEvent | KeyboardEvent) {
 	emit('activate', event)
 }
 
-function markImageLoaded() {
-	loadedScreenshotUrls.add(props.screenshot.url)
-	loaded.value = true
+async function markImageLoaded() {
+	const loadedImage = image.value
+	const loadedUrl = props.screenshot.url
+	const generation = loadGeneration
+	if (!loadedImage) return
+
+	try {
+		await loadedImage.decode()
+	} catch {
+		if (!loadedImage.complete || loadedImage.naturalWidth === 0) return
+	}
+
+	await new Promise<void>((resolve) => {
+		window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()))
+	})
+
+	if (
+		generation !== loadGeneration ||
+		image.value !== loadedImage ||
+		props.screenshot.url !== loadedUrl
+	) {
+		return
+	}
+
+	const wasReady = imageReady.value
+	imageReady.value = true
+	if (!wasReady) {
+		debugImage('image loaded', {
+			id: props.screenshot.id,
+			fileName: props.screenshot.file_name,
+			url: props.screenshot.url,
+			loadDurationMs: performance.now() - loadStartedAt,
+			naturalWidth: image.value?.naturalWidth,
+			naturalHeight: image.value?.naturalHeight,
+		})
+	}
+}
+
+function markImageFailed(event: Event) {
+	debugImage('image failed', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		loadDurationMs: performance.now() - loadStartedAt,
+		event,
+	})
 }
 
 onMounted(() => {
+	debugImage('mounted', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		complete: image.value?.complete,
+	})
 	if (image.value?.complete && image.value.naturalWidth > 0) markImageLoaded()
 })
 
+onBeforeUnmount(() => {
+	loadGeneration += 1
+	debugImage('unmounted', {
+		id: props.screenshot.id,
+		fileName: props.screenshot.file_name,
+		url: props.screenshot.url,
+		loaded: imageReady.value,
+	})
+})
+
 watch(
 	() => props.screenshot.url,
-	(url) => {
-		loaded.value = loadedScreenshotUrls.has(url)
+	(url, previousUrl) => {
+		loadGeneration += 1
+		loadStartedAt = performance.now()
+		imageReady.value = false
+		debugImage('source changed', {
+			id: props.screenshot.id,
+			fileName: props.screenshot.file_name,
+			previousUrl,
+			url,
+		})
 	},
 )
 </script>
@@ -91,7 +166,7 @@ watch(
 		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="group relative isolate 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,
@@ -115,7 +190,7 @@ watch(
 	>
 		<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"
+			class="selection-button group/selection absolute right-0.5 top-0 z-[3] 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,
@@ -134,19 +209,25 @@ watch(
 				<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"
+			loading="eager"
+			decoding="async"
 			draggable="false"
-			class="h-full w-full object-cover transition duration-200"
-			:class="loaded ? 'opacity-100' : 'opacity-0'"
+			class="screenshot-card-fade absolute inset-0 z-[1] h-full w-full object-cover"
+			:class="imageReady ? 'opacity-100' : 'opacity-0'"
 			@load="markImageLoaded"
+			@error="markImageFailed"
 		/>
 		<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"
+			aria-hidden="true"
+			class="pointer-events-none absolute inset-0 bg-button-bg"
+			:class="{ 'animate-pulse': !imageReady }"
+		/>
+		<div
+			class="absolute inset-x-0 bottom-0 z-[2] 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">
@@ -193,3 +274,9 @@ watch(
 		</div>
 	</article>
 </template>
+
+<style scoped>
+.screenshot-card-fade {
+	transition: opacity 350ms ease-in-out;
+}
+</style>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/group.vue b/apps/app-frontend/src/components/ui/screenshots-page/group.vue
index 2a5c1c2997..358126f221 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/group.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/group.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useDroppable } from '@dnd-kit/vue'
-import { defineMessages, useVIntl } from '@modrinth/ui'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { InstanceScreenshot } from '@/helpers/instance'
 
@@ -27,7 +27,6 @@ const props = defineProps<{
 	highlightedScreenshotId?: string
 	copiedScreenshotIds: ReadonlySet<string>
 	forceOpen: boolean
-	animateEntry: boolean
 	hideHeader?: boolean
 	editableTitle?: boolean
 	startEditingTitle?: boolean
@@ -39,6 +38,7 @@ const props = defineProps<{
 const collapsed = defineModel<boolean>('collapsed', { required: true })
 const dropTarget = ref<HTMLElement>()
 const { formatMessage } = useVIntl()
+const debugLayout = useDebugLogger('Screenshots:Group')
 const messages = defineMessages({
 	emptyGroup: {
 		id: 'app.screenshots.group.empty',
@@ -60,14 +60,42 @@ const visibleGridStyle = computed(() =>
 		: { transform: `translateY(${props.virtualGridTop}px)` },
 )
 let unmountGridTimeout: ReturnType<typeof setTimeout> | undefined
+let resizeObserver: ResizeObserver | undefined
+
+async function logGeometry(reason: string) {
+	await nextTick()
+	const rect = dropTarget.value?.getBoundingClientRect()
+	debugLayout(reason, {
+		id: props.id,
+		title: props.title,
+		collapsed: collapsed.value,
+		shouldShowGrid: shouldShowGrid.value,
+		renderGrid: renderGrid.value,
+		screenshotCount: props.screenshots.length,
+		renderedCount: visibleScreenshots.value.length,
+		firstScreenshotId: visibleScreenshots.value.at(0)?.id,
+		lastScreenshotId: visibleScreenshots.value.at(-1)?.id,
+		virtualGridHeight: props.virtualGridHeight,
+		virtualGridTop: props.virtualGridTop,
+		actual: rect
+			? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
+			: undefined,
+	})
+}
 
 watch(
 	() => props.renderedScreenshots ?? props.screenshots,
 	(screenshots) => {
 		if (shouldShowGrid.value) visibleScreenshots.value = screenshots
+		void logGeometry('rendered screenshots changed')
 	},
 )
 
+watch(
+	() => [props.virtualGridHeight, props.virtualGridTop] as const,
+	() => void logGeometry('virtual grid geometry changed'),
+)
+
 watch(
 	shouldShowGrid,
 	(showGrid, previouslyShown) => {
@@ -75,6 +103,7 @@ watch(
 		if (showGrid) {
 			visibleScreenshots.value = props.renderedScreenshots ?? props.screenshots
 			renderGrid.value = true
+			void logGeometry('grid shown')
 			return
 		}
 		if (!previouslyShown) {
@@ -83,13 +112,41 @@ watch(
 		}
 		unmountGridTimeout = setTimeout(() => {
 			renderGrid.value = false
+			void logGeometry('grid unmounted after collapse')
 			unmountGridTimeout = undefined
 		}, 300)
 	},
 	{ flush: 'post' },
 )
 
+onMounted(() => {
+	debugLayout('mounted', { id: props.id, title: props.title })
+	void logGeometry('mounted geometry')
+	if (dropTarget.value) {
+		resizeObserver = new ResizeObserver(([entry]) => {
+			const rect = entry?.target.getBoundingClientRect()
+			debugLayout('actual size changed', {
+				id: props.id,
+				title: props.title,
+				width: rect?.width,
+				height: rect?.height,
+				expectedHeight:
+					(props.hideHeader ? 0 : 40) +
+					(shouldShowGrid.value ? 10 + (props.virtualGridHeight ?? 0) : 0) +
+					12,
+			})
+		})
+		resizeObserver.observe(dropTarget.value)
+	}
+})
+
 onBeforeUnmount(() => {
+	debugLayout('unmounted', {
+		id: props.id,
+		title: props.title,
+		renderedCount: visibleScreenshots.value.length,
+	})
+	resizeObserver?.disconnect()
 	if (unmountGridTimeout) clearTimeout(unmountGridTimeout)
 })
 
@@ -149,19 +206,10 @@ function getSelectionKey(screenshot: InstanceScreenshot) {
 				<slot name="actions" :start-editing="startEditing" />
 			</template>
 			<div v-if="renderGrid" class="relative min-h-[45px] w-full" :style="virtualGridStyle">
-				<TransitionGroup
-					tag="div"
+				<div
 					class="grid min-h-[45px] w-full grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4"
 					:class="{ 'absolute inset-x-0 top-0': virtualGridHeight !== undefined }"
 					:style="visibleGridStyle"
-					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 visibleScreenshots"
@@ -188,7 +236,7 @@ function getSelectionKey(screenshot: InstanceScreenshot) {
 					>
 						{{ formatMessage(messages.emptyGroup) }}
 					</p>
-				</TransitionGroup>
+				</div>
 			</div>
 		</ScreenshotSection>
 	</div>
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/index.vue b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
index d845fe8b68..99296d7c6c 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/index.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/index.vue
@@ -34,6 +34,7 @@ import {
 	type ImageViewerEditorSavePayload,
 	injectNotificationManager,
 	ReadyTransition,
+	useDebugLogger,
 	useFormatDateTime,
 	useReadyState,
 	useScrollViewport,
@@ -109,6 +110,7 @@ type ScreenshotDropData = {
 }
 
 type ScreenshotGroupLayout = {
+	id: string
 	group: ScreenshotGroupData
 	top: number
 	height: number
@@ -117,7 +119,7 @@ type ScreenshotGroupLayout = {
 	gridTop: number
 }
 
-type VisibleScreenshotGroupLayout = ScreenshotGroupLayout & {
+type VirtualizedScreenshotGroupLayout = ScreenshotGroupLayout & {
 	renderedScreenshots: InstanceScreenshot[]
 	virtualGridTop: number
 }
@@ -126,7 +128,7 @@ const SCREENSHOT_GRID_GAP = 12
 const SCREENSHOT_GROUP_SPACING = 12
 const SCREENSHOT_GROUP_HEADER_HEIGHT = 40
 const SCREENSHOT_GROUP_CONTENT_SPACING = 10
-const SCREENSHOT_GROUP_OVERSCAN = 900
+const SCREENSHOT_GROUP_OVERSCAN = 2000
 const SCREENSHOT_GRID_MIN_HEIGHT = 45
 const FALLBACK_SCREENSHOT_CARD_WIDTH = 320
 
@@ -173,8 +175,6 @@ const selectedKeys = ref(new Set<string>())
 const copiedScreenshotIds = ref(new Set<string>())
 const copiedResetTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 const screenshotsPage = ref<HTMLElement>()
-const regrouping = ref(false)
-const screenshotsScrolling = ref(false)
 const screenshotToDelete = ref<InstanceScreenshot | null>(null)
 const deleteFromPreview = ref(false)
 const activeDrag = ref<ActiveScreenshotDrag | null>(null)
@@ -197,7 +197,8 @@ const route = useRoute()
 const router = useRouter()
 const { formatMessage } = useVIntl()
 const { addNotification, handleError } = injectNotificationManager()
-let screenshotsScrollIdleTimeout: ReturnType<typeof setTimeout> | undefined
+const debugLayout = useDebugLogger('Screenshots:Layout')
+let screenshotsScrollLogFrame: number | undefined
 const {
 	listContainer: screenshotListContainer,
 	containerOffset: screenshotListOffset,
@@ -206,12 +207,18 @@ const {
 	viewportHeight: screenshotViewportHeight,
 } = useScrollViewport({
 	onScroll: () => {
-		screenshotsScrolling.value = true
-		if (screenshotsScrollIdleTimeout) clearTimeout(screenshotsScrollIdleTimeout)
-		screenshotsScrollIdleTimeout = setTimeout(() => {
-			screenshotsScrolling.value = false
-			screenshotsScrollIdleTimeout = undefined
-		}, 120)
+		if (screenshotsScrollLogFrame === undefined) {
+			screenshotsScrollLogFrame = requestAnimationFrame(() => {
+				screenshotsScrollLogFrame = undefined
+				debugLayout('scroll', {
+					groupBy: groupBy.value,
+					relativeScrollTop: screenshotListScrollTop.value,
+					listOffset: screenshotListOffset.value,
+					viewportHeight: screenshotViewportHeight.value,
+					listWidth: screenshotListWidth.value,
+				})
+			})
+		}
 	},
 })
 const { width: screenshotListWidth } = useElementSize(screenshotListContainer)
@@ -546,19 +553,14 @@ const screenshotGroupLayouts = computed<ScreenshotGroupLayout[]>(() => {
 			(isOpen ? SCREENSHOT_GROUP_CONTENT_SPACING + gridHeight : 0) +
 			SCREENSHOT_GROUP_SPACING
 
-		layouts.push({ group, top, height, isOpen, gridHeight, gridTop })
+		layouts.push({ id: group.id, group, top, height, isOpen, gridHeight, gridTop })
 		top += height
 	}
 
 	return layouts
 })
 
-const screenshotListHeight = computed(() => {
-	const lastGroup = screenshotGroupLayouts.value[screenshotGroupLayouts.value.length - 1]
-	return lastGroup ? lastGroup.top + lastGroup.height : 0
-})
-
-const visibleScreenshotGroups = computed<VisibleScreenshotGroupLayout[]>(() => {
+const virtualizedScreenshotGroups = computed<VirtualizedScreenshotGroupLayout[]>(() => {
 	const hasViewport = Boolean(screenshotListContainer.value && screenshotScrollContainer.value)
 	const viewportStart = hasViewport
 		? Math.max(0, screenshotListScrollTop.value - SCREENSHOT_GROUP_OVERSCAN)
@@ -567,36 +569,90 @@ const visibleScreenshotGroups = computed<VisibleScreenshotGroupLayout[]>(() => {
 		? screenshotListScrollTop.value + screenshotViewportHeight.value + SCREENSHOT_GROUP_OVERSCAN
 		: SCREENSHOT_GROUP_OVERSCAN
 
-	return screenshotGroupLayouts.value
-		.filter((layout) => layout.top + layout.height >= viewportStart && layout.top <= viewportEnd)
-		.map((layout) => {
-			if (!layout.isOpen || layout.group.screenshots.length === 0) {
-				return { ...layout, renderedScreenshots: [], virtualGridTop: 0 }
-			}
+	return screenshotGroupLayouts.value.map((layout) => {
+		const isInRenderRange = layout.top + layout.height >= viewportStart && layout.top <= viewportEnd
+		if (!layout.isOpen || layout.group.screenshots.length === 0) {
+			return { ...layout, renderedScreenshots: [], virtualGridTop: 0 }
+		}
+		if (!isInRenderRange) {
+			return { ...layout, renderedScreenshots: [], virtualGridTop: 0 }
+		}
 
-			const rowCount = Math.ceil(layout.group.screenshots.length / screenshotColumnCount.value)
-			const firstRow = Math.min(
-				rowCount,
-				Math.max(0, Math.floor((viewportStart - layout.gridTop) / screenshotRowHeight.value)),
-			)
-			const lastRow = Math.min(
-				rowCount,
-				Math.max(
-					firstRow,
-					Math.ceil(
-						(viewportEnd - layout.gridTop + SCREENSHOT_GRID_GAP) / screenshotRowHeight.value,
-					),
-				),
-			)
-			const firstScreenshot = firstRow * screenshotColumnCount.value
-			const lastScreenshot = lastRow * screenshotColumnCount.value
+		const rowCount = Math.ceil(layout.group.screenshots.length / screenshotColumnCount.value)
+		const firstRow = Math.min(
+			rowCount,
+			Math.max(0, Math.floor((viewportStart - layout.gridTop) / screenshotRowHeight.value)),
+		)
+		const lastRow = Math.min(
+			rowCount,
+			Math.max(
+				firstRow,
+				Math.ceil((viewportEnd - layout.gridTop + SCREENSHOT_GRID_GAP) / screenshotRowHeight.value),
+			),
+		)
+		const firstScreenshot = firstRow * screenshotColumnCount.value
+		const lastScreenshot = lastRow * screenshotColumnCount.value
 
-			return {
-				...layout,
-				renderedScreenshots: layout.group.screenshots.slice(firstScreenshot, lastScreenshot),
-				virtualGridTop: firstRow * screenshotRowHeight.value,
-			}
+		return {
+			...layout,
+			renderedScreenshots: layout.group.screenshots.slice(firstScreenshot, lastScreenshot),
+			virtualGridTop: firstRow * screenshotRowHeight.value,
+		}
+	})
+})
+
+watch(
+	[groupBy, screenshotListWidth, windowWidth, screenshotColumnCount, screenshotCardHeight],
+	([currentGroupBy, listWidth, currentWindowWidth, columns, cardHeight], previous) => {
+		debugLayout('responsive geometry changed', {
+			groupBy: currentGroupBy,
+			listWidth,
+			windowWidth: currentWindowWidth,
+			columns,
+			cardHeight,
+			previous,
+		})
+	},
+	{ immediate: true },
+)
+
+watch(
+	screenshotGroupLayouts,
+	(layouts) => {
+		debugLayout('group layouts changed', {
+			groupBy: groupBy.value,
+			groupCount: layouts.length,
+			totalHeight: layouts.at(-1) ? layouts.at(-1)!.top + layouts.at(-1)!.height : 0,
+			layouts: layouts.map((layout) => ({
+				id: layout.id,
+				top: layout.top,
+				height: layout.height,
+				gridTop: layout.gridTop,
+				gridHeight: layout.gridHeight,
+				isOpen: layout.isOpen,
+				screenshotCount: layout.group.screenshots.length,
+			})),
 		})
+	},
+	{ immediate: true },
+)
+
+watch(virtualizedScreenshotGroups, (groups) => {
+	debugLayout('render window changed', {
+		groupBy: groupBy.value,
+		relativeScrollTop: screenshotListScrollTop.value,
+		viewportHeight: screenshotViewportHeight.value,
+		renderedGroups: groups
+			.filter((group) => group.renderedScreenshots.length > 0)
+			.map((group) => ({
+				id: group.id,
+				top: group.top,
+				virtualGridTop: group.virtualGridTop,
+				renderedCount: group.renderedScreenshots.length,
+				firstScreenshotId: group.renderedScreenshots.at(0)?.id,
+				lastScreenshotId: group.renderedScreenshots.at(-1)?.id,
+			})),
+	})
 })
 
 const previewItems = computed(() =>
@@ -685,10 +741,8 @@ watch(groupBy, async (currentGroupBy, previousGroupBy) => {
 	if (currentGroupBy === previousGroupBy) return
 
 	const previousPositions = getScreenshotCardPositions()
-	regrouping.value = true
 	await nextTick()
 	animateScreenshotCardsFrom(previousPositions)
-	regrouping.value = false
 })
 
 let handledFocus: string | undefined
@@ -1335,7 +1389,7 @@ watch(activeDropGroupId, (groupId) => {
 onBeforeUnmount(() => {
 	clearGroupHoverOpenTimeout()
 	if (revealTimeout) clearTimeout(revealTimeout)
-	if (screenshotsScrollIdleTimeout) clearTimeout(screenshotsScrollIdleTimeout)
+	if (screenshotsScrollLogFrame !== undefined) cancelAnimationFrame(screenshotsScrollLogFrame)
 	for (const timeout of copiedResetTimeouts.values()) clearTimeout(timeout)
 	copiedResetTimeouts.clear()
 })
@@ -1479,20 +1533,21 @@ onBeforeUnmount(() => {
 			>
 				<div
 					ref="screenshotListContainer"
-					class="relative w-full"
-					:style="{ height: `${screenshotListHeight}px`, overflowAnchor: 'none' }"
+					class="w-full"
+					:style="{
+						overflowAnchor: 'none',
+						visibility: screenshotListWidth > 0 ? 'visible' : 'hidden',
+					}"
 				>
 					<div
 						v-for="{
+							id,
 							group,
-							top,
 							gridHeight,
 							renderedScreenshots,
 							virtualGridTop,
-						} in visibleScreenshotGroups"
-						:key="group.id"
-						class="absolute inset-x-0 transition-transform duration-300 ease-in-out will-change-transform motion-reduce:transition-none"
-						:style="{ transform: `translateY(${top}px)` }"
+						} in virtualizedScreenshotGroups"
+						:key="id"
 					>
 						<ScreenshotGroupSection
 							:id="group.id"
@@ -1514,7 +1569,6 @@ onBeforeUnmount(() => {
 							:show-instance-name="isGlobal && groupBy !== 'instance'"
 							:highlighted-screenshot-id="highlightedScreenshotId"
 							:copied-screenshot-ids="copiedScreenshotIds"
-							:animate-entry="!regrouping && !screenshotsScrolling"
 							:force-open="search.length > 0"
 							:hide-header="groupBy === 'none'"
 							:editable-title="Boolean(group.customGroupId)"
diff --git a/apps/app-frontend/src/components/ui/screenshots-page/section.vue b/apps/app-frontend/src/components/ui/screenshots-page/section.vue
index b5872c4ddf..82f4fdf0df 100644
--- a/apps/app-frontend/src/components/ui/screenshots-page/section.vue
+++ b/apps/app-frontend/src/components/ui/screenshots-page/section.vue
@@ -6,9 +6,10 @@ import {
 	defineMessages,
 	InlineEditableText,
 	TagItem,
+	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -37,6 +38,7 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
+const debugLayout = useDebugLogger('Screenshots:Section')
 const accordion = ref<InstanceType<typeof Accordion>>()
 const titleInput = ref<InstanceType<typeof InlineEditableText>>()
 const titleModel = ref(props.title)
@@ -46,6 +48,11 @@ const messages = defineMessages({
 })
 
 function toggle() {
+	debugLayout('toggle requested', {
+		title: props.title,
+		count: props.count,
+		isOpen: accordion.value?.isOpen,
+	})
 	if (accordion.value?.isOpen) {
 		accordion.value.close()
 	} else {
@@ -53,6 +60,30 @@ function toggle() {
 	}
 }
 
+function handleOpen() {
+	debugLayout('opened', { title: props.title, count: props.count })
+	emit('update:collapsed', false)
+}
+
+function handleClose() {
+	debugLayout('closed', { title: props.title, count: props.count })
+	emit('update:collapsed', true)
+}
+
+onMounted(() => {
+	debugLayout('mounted', {
+		title: props.title,
+		count: props.count,
+		collapsed: props.collapsed,
+		hideHeader: props.hideHeader,
+		forceOpen: props.forceOpen,
+	})
+})
+
+onBeforeUnmount(() => {
+	debugLayout('unmounted', { title: props.title, count: props.count })
+})
+
 async function startTitleEditing() {
 	if (!props.editable) return
 	await titleInput.value?.startEditing()
@@ -127,8 +158,8 @@ watch(
 			:force-open="forceOpen"
 			overflow-visible
 			class="w-full"
-			@on-open="emit('update:collapsed', false)"
-			@on-close="emit('update:collapsed', true)"
+			@on-open="handleOpen"
+			@on-close="handleClose"
 		>
 			<div class="mt-2.5">
 				<slot />
diff --git a/apps/app/src/api/instance.rs b/apps/app/src/api/instance.rs
index 6cbb60b904..6188ecc555 100644
--- a/apps/app/src/api/instance.rs
+++ b/apps/app/src/api/instance.rs
@@ -2,7 +2,7 @@ use crate::api::Result;
 use dashmap::DashMap;
 use path_util::SafeRelativeUtf8UnixPathBuf;
 use serde::{Deserialize, Serialize};
-use std::collections::HashMap;
+use std::collections::{HashMap, HashSet};
 use std::path::{Path, PathBuf};
 use tauri::{AppHandle, Manager, Runtime};
 use tauri_plugin_fs::FsExt;
@@ -906,13 +906,25 @@ fn serialize_screenshots<R: Runtime>(
     app_handle: &AppHandle<R>,
     screenshots: Vec<theseus::instance::InstanceScreenshot>,
 ) -> Result<Vec<InstanceScreenshot>> {
-    let mut result = Vec::with_capacity(screenshots.len());
-
-    for screenshot in screenshots {
-        result.push(serialize_screenshot(app_handle, screenshot)?);
+    let screenshot_directories = screenshots
+        .iter()
+        .filter_map(|screenshot| screenshot.path.parent())
+        .collect::<HashSet<_>>();
+    for directory in screenshot_directories {
+        app_handle
+            .asset_protocol_scope()
+            .allow_directory(directory, false)
+            .map_err(|error| std::io::Error::other(error.to_string()))?;
+        app_handle
+            .fs_scope()
+            .allow_directory(directory, false)
+            .map_err(|error| std::io::Error::other(error.to_string()))?;
     }
 
-    Ok(result)
+    screenshots
+        .into_iter()
+        .map(serialize_screenshot_data)
+        .collect()
 }
 
 fn serialize_screenshot<R: Runtime>(
@@ -927,6 +939,12 @@ fn serialize_screenshot<R: Runtime>(
         .fs_scope()
         .allow_file(&screenshot.path)
         .map_err(|error| std::io::Error::other(error.to_string()))?;
+    serialize_screenshot_data(screenshot)
+}
+
+fn serialize_screenshot_data(
+    screenshot: theseus::instance::InstanceScreenshot,
+) -> Result<InstanceScreenshot> {
     let mut url = super::utils::tauri_convert_file_src(&screenshot.path)?;
     url.query_pairs_mut()
         .append_pair("revision", &screenshot.modified_at.to_string());
diff --git a/packages/app-lib/src/api/instance/screenshots/reconciliation.rs b/packages/app-lib/src/api/instance/screenshots/reconciliation.rs
index 67882d497f..c77db13884 100644
--- a/packages/app-lib/src/api/instance/screenshots/reconciliation.rs
+++ b/packages/app-lib/src/api/instance/screenshots/reconciliation.rs
@@ -8,12 +8,15 @@ use crate::state::instances::adapters::sqlite::{
     screenshot_rows::{self, ScreenshotRow},
 };
 use crate::util::fetch::sha1_file_async;
-use crate::util::io::{self, IOError};
+use crate::util::io::IOError;
 use chrono::{DateTime, Utc};
+use futures::stream::{self, StreamExt, TryStreamExt};
 use std::collections::HashMap;
-use std::path::PathBuf;
+use std::path::{Path, PathBuf};
 use uuid::Uuid;
 
+const SCREENSHOT_HASH_CONCURRENCY: usize = 8;
+
 pub(super) struct ScannedScreenshot {
     file_name: String,
     created_at: DateTime<Utc>,
@@ -109,7 +112,14 @@ pub(super) async fn scan_source_screenshots(
     }
 
     let screenshots_dir = source_screenshots_dir(state, source).await?;
-    let mut entries = match io::read_dir(&screenshots_dir).await {
+    tokio::task::spawn_blocking(move || scan_screenshots_dir(&screenshots_dir))
+        .await?
+}
+
+fn scan_screenshots_dir(
+    screenshots_dir: &Path,
+) -> crate::Result<Vec<ScannedScreenshot>> {
+    let entries = match std::fs::read_dir(screenshots_dir) {
         Ok(entries) => entries,
         Err(error) if error.kind() == std::io::ErrorKind::NotFound => {
             return Ok(Vec::new());
@@ -118,14 +128,11 @@ pub(super) async fn scan_source_screenshots(
     };
     let mut screenshots = Vec::new();
 
-    while let Some(entry) = entries
-        .next_entry()
-        .await
-        .map_err(|error| IOError::with_path(error, &screenshots_dir))?
-    {
+    for entry in entries {
+        let entry = entry
+            .map_err(|error| IOError::with_path(error, screenshots_dir))?;
         let file_type = entry
             .file_type()
-            .await
             .map_err(|error| IOError::with_path(error, entry.path()))?;
         if !file_type.is_file() {
             continue;
@@ -142,7 +149,6 @@ pub(super) async fn scan_source_screenshots(
         };
         let metadata = entry
             .metadata()
-            .await
             .map_err(|error| IOError::with_path(error, &path))?;
         let created_at = metadata
             .created()
@@ -179,53 +185,34 @@ pub(super) async fn reconcile_source_screenshots(
 ) -> crate::Result<Vec<InstanceScreenshot>> {
     let existing =
         screenshot_rows::list_screenshots(&source.id, &state.pool).await?;
-    let existing_by_name = existing
-        .iter()
-        .map(|row| (row.file_name.as_str(), row))
+    let mut unmatched_by_name = existing
+        .into_iter()
+        .map(|row| (row.file_name.clone(), row))
         .collect::<HashMap<_, _>>();
-    let metadata_matches = existing.len() == scanned.len()
-        && scanned.iter().all(|scanned| {
-            existing_by_name
-                .get(scanned.file_name.as_str())
-                .is_some_and(|row| {
-                    row.file_size == scanned.file_size
-                        && row.modified_at == scanned.modified_at
-                        && row.created_at
-                            == scanned.created_at.timestamp_millis()
-                })
-        });
-    let mut unmatched_by_hash =
-        HashMap::<(String, i64), Vec<ScreenshotRow>>::new();
     let mut resolved = Vec::with_capacity(scanned.len());
+    let mut needs_hash = Vec::new();
 
-    if metadata_matches {
-        let mut existing_by_name = existing
-            .into_iter()
-            .map(|row| (row.file_name.clone(), row))
-            .collect::<HashMap<_, _>>();
-        for scanned in scanned {
-            let row = existing_by_name.remove(&scanned.file_name).ok_or_else(
-                || {
-                    crate::ErrorKind::InputError(
-                        "Screenshot index changed during reconciliation"
-                            .to_string(),
-                    )
-                },
-            )?;
-            resolved.push(ResolvedScreenshot {
-                scanned,
-                row,
-                is_new: false,
-                changed: false,
-            });
+    for scanned in scanned {
+        match unmatched_by_name.remove(&scanned.file_name) {
+            Some(row)
+                if row.file_size == scanned.file_size
+                    && row.modified_at == scanned.modified_at
+                    && row.created_at
+                        == scanned.created_at.timestamp_millis() =>
+            {
+                resolved.push(ResolvedScreenshot {
+                    scanned,
+                    row,
+                    is_new: false,
+                    changed: false,
+                });
+            }
+            matched => needs_hash.push((scanned, matched)),
         }
-    } else {
-        let mut unmatched_by_name = existing
-            .into_iter()
-            .map(|row| (row.file_name.clone(), row))
-            .collect::<HashMap<_, _>>();
-        let mut hashed = Vec::with_capacity(scanned.len());
-        for mut scanned in scanned {
+    }
+
+    let hashed = stream::iter(needs_hash.into_iter().map(
+        |(mut scanned, matched)| async move {
             let (file_size, content_hash) =
                 sha1_file_async(&scanned.path).await?;
             scanned.file_size = i64::try_from(file_size).map_err(|_| {
@@ -233,54 +220,54 @@ pub(super) async fn reconcile_source_screenshots(
                     "Screenshot is too large to index".to_string(),
                 )
             })?;
-            hashed.push((scanned, content_hash));
-        }
-
-        let mut renamed_or_new = Vec::new();
-        for (scanned, content_hash) in hashed {
-            if let Some(row) = unmatched_by_name.remove(&scanned.file_name) {
-                resolved.push(resolve_scanned_screenshot(
-                    source,
-                    scanned,
-                    content_hash,
-                    Some(row),
-                ));
-            } else {
-                renamed_or_new.push((scanned, content_hash));
-            }
-        }
+            Ok::<_, crate::Error>((scanned, content_hash, matched))
+        },
+    ))
+    .buffer_unordered(SCREENSHOT_HASH_CONCURRENCY)
+    .try_collect::<Vec<_>>()
+    .await?;
 
-        for row in unmatched_by_name.into_values() {
-            unmatched_by_hash
-                .entry((row.content_hash.clone(), row.file_size))
-                .or_default()
-                .push(row);
-        }
+    let mut unmatched_by_hash =
+        HashMap::<(String, i64), Vec<ScreenshotRow>>::new();
+    for row in unmatched_by_name.into_values() {
+        unmatched_by_hash
+            .entry((row.content_hash.clone(), row.file_size))
+            .or_default()
+            .push(row);
+    }
 
-        for (scanned, content_hash) in renamed_or_new {
-            let hash_key = (content_hash.clone(), scanned.file_size);
-            let matched =
-                unmatched_by_hash.get_mut(&hash_key).and_then(|rows| {
-                    if rows.is_empty() {
-                        return None;
-                    }
-                    let created_at = scanned.created_at.timestamp_millis();
-                    let index = rows
-                        .iter()
-                        .position(|row| {
-                            row.modified_at == scanned.modified_at
-                                && row.created_at == created_at
-                        })
-                        .unwrap_or(rows.len() - 1);
-                    Some(rows.swap_remove(index))
-                });
+    for (scanned, content_hash, matched_by_name) in hashed {
+        if let Some(row) = matched_by_name {
             resolved.push(resolve_scanned_screenshot(
                 source,
                 scanned,
                 content_hash,
-                matched,
+                Some(row),
             ));
+            continue;
         }
+
+        let hash_key = (content_hash.clone(), scanned.file_size);
+        let matched = unmatched_by_hash.get_mut(&hash_key).and_then(|rows| {
+            if rows.is_empty() {
+                return None;
+            }
+            let created_at = scanned.created_at.timestamp_millis();
+            let index = rows
+                .iter()
+                .position(|row| {
+                    row.modified_at == scanned.modified_at
+                        && row.created_at == created_at
+                })
+                .unwrap_or(rows.len() - 1);
+            Some(rows.swap_remove(index))
+        });
+        resolved.push(resolve_scanned_screenshot(
+            source,
+            scanned,
+            content_hash,
+            matched,
+        ));
     }
 
     let mut tx = state.pool.begin().await?;

From b1387160352b77a0ac253469c71ff35b4530ef16 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 29 Aug 2026 13:56:00 +0100
Subject: [PATCH 3/3] fix: gallery issues

---
 .../instances/InstancesSyncedSettings.vue     |  12 +-
 .../app-frontend/src/locales/en-US/index.json |  42 +++---
 .../settings-modal/hooks-settings.vue         |   5 +-
 .../settings-modal/java-settings.vue          |  16 +-
 .../synced-options-settings.vue               |   6 +-
 .../settings-modal/window-settings.vue        |   4 +-
 .../components/image-viewer-editor/editor.vue | 142 +++++++-----------
 .../components/image-viewer-editor/index.vue  |  48 ++----
 .../image-viewer-editor/use-image-editor.ts   |  11 ++
 9 files changed, 118 insertions(+), 168 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
index f96b836b53..548abba7af 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/InstancesSyncedSettings.vue
@@ -67,27 +67,27 @@ const messages = defineMessages({
 	// },
 	multiplayerServers: {
 		id: 'app.settings.synced-options.multiplayer-servers',
-		defaultMessage: 'Multiplayer servers',
+		defaultMessage: 'Sync multiplayer servers',
 	},
 	multiplayerServersDescription: {
 		id: 'app.settings.synced-options.multiplayer-servers.description',
-		defaultMessage: 'Sync multiplayer servers across your instances.',
+		defaultMessage: 'Use the same multiplayer servers across your instances.',
 	},
 	commandHistory: {
 		id: 'app.settings.synced-options.command-history',
-		defaultMessage: 'Command history',
+		defaultMessage: 'Sync command history',
 	},
 	commandHistoryDescription: {
 		id: 'app.settings.synced-options.command-history.description',
-		defaultMessage: 'Sync command history across your instances.',
+		defaultMessage: 'Use the same command history across your instances.',
 	},
 	creativeHotbars: {
 		id: 'app.settings.synced-options.creative-hotbars',
-		defaultMessage: 'Saved creative hotbars',
+		defaultMessage: 'Sync saved creative hotbars',
 	},
 	creativeHotbarsDescription: {
 		id: 'app.settings.synced-options.creative-hotbars.description',
-		defaultMessage: 'Sync saved creative hotbars across your instances.',
+		defaultMessage: 'Use the same saved creative hotbars across your instances.',
 	},
 	chooseSyncSourceTitle: {
 		id: 'app.settings.synced-options.choose-sync-source.title',
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 4dc1854696..cb74a71b57 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -1719,28 +1719,28 @@
     "message": "Choose a sync source"
   },
   "app.settings.synced-options.command-history": {
-    "message": "Command history"
+    "message": "Sync command history"
   },
   "app.settings.synced-options.command-history.description": {
-    "message": "Sync command history across your instances."
+    "message": "Use the same command history across your instances."
   },
   "app.settings.synced-options.command-history.editor-title": {
     "message": "Edit command history"
   },
   "app.settings.synced-options.creative-hotbars": {
-    "message": "Saved creative hotbars"
+    "message": "Sync saved creative hotbars"
   },
   "app.settings.synced-options.creative-hotbars.description": {
-    "message": "Sync saved creative hotbars across your instances."
+    "message": "Use the same saved creative hotbars across your instances."
   },
   "app.settings.synced-options.multiplayer-servers": {
-    "message": "Multiplayer servers"
+    "message": "Sync multiplayer servers"
   },
   "app.settings.synced-options.multiplayer-servers.address": {
     "message": "Server address"
   },
   "app.settings.synced-options.multiplayer-servers.description": {
-    "message": "Sync multiplayer servers across your instances."
+    "message": "Use the same multiplayer servers across your instances."
   },
   "app.settings.synced-options.multiplayer-servers.editor-title": {
     "message": "Edit synced servers"
@@ -2589,7 +2589,7 @@
     "message": "Select update channel"
   },
   "instance.settings.tabs.hooks.description": {
-    "message": "Hooks allow advanced users to run certain system commands before and after launching the game."
+    "message": "Run instance-specific system commands before and after launching the game."
   },
   "instance.settings.tabs.hooks.post-exit": {
     "message": "Post-exit"
@@ -2610,7 +2610,7 @@
     "message": "Enter pre-launch command..."
   },
   "instance.settings.tabs.hooks.title": {
-    "message": "Game launch hooks"
+    "message": "Custom game launch hooks"
   },
   "instance.settings.tabs.hooks.variables.description": {
     "message": "Hooks run in the working directory of the instance, with the following variables:"
@@ -2652,16 +2652,16 @@
     "message": "Installation settings are unavailable while this instance is locked."
   },
   "instance.settings.tabs.java.custom-environment-variables": {
-    "message": "Use custom environment variables for this instance."
+    "message": "Set environment variables separately for this instance."
   },
   "instance.settings.tabs.java.custom-java-arguments": {
-    "message": "Use custom Java arguments for this instance."
+    "message": "Set Java arguments separately for this instance."
   },
   "instance.settings.tabs.java.custom-java-installation": {
-    "message": "Use a custom Java installation for this instance."
+    "message": "Choose a different Java installation for this instance."
   },
   "instance.settings.tabs.java.custom-memory-allocation": {
-    "message": "Use a custom memory allocation for this instance."
+    "message": "Set the memory allocation separately for this instance."
   },
   "instance.settings.tabs.java.enter-environment-variables": {
     "message": "Enter environmental variables..."
@@ -2670,19 +2670,19 @@
     "message": "Enter Java arguments..."
   },
   "instance.settings.tabs.java.environment-variables": {
-    "message": "Environment variables"
+    "message": "Custom environment variables"
   },
   "instance.settings.tabs.java.hooks": {
     "message": "Hooks"
   },
   "instance.settings.tabs.java.java-arguments": {
-    "message": "Java arguments"
+    "message": "Custom Java arguments"
   },
   "instance.settings.tabs.java.java-installation": {
-    "message": "Java installation"
+    "message": "Custom Java installation"
   },
   "instance.settings.tabs.java.java-memory": {
-    "message": "Memory allocated"
+    "message": "Custom memory allocation"
   },
   "instance.settings.tabs.java.java-path-placeholder": {
     "message": "/path/to/java"
@@ -2694,7 +2694,7 @@
     "message": "Sharing"
   },
   "instance.settings.tabs.synced-options.command-history": {
-    "message": "Command history"
+    "message": "Unsync command history"
   },
   "instance.settings.tabs.synced-options.command-history.disabled-in-app": {
     "message": "Command history syncing is turned off in app settings."
@@ -2703,7 +2703,7 @@
     "message": "Keep this instance's command history separate from synced command history."
   },
   "instance.settings.tabs.synced-options.creative-hotbars": {
-    "message": "Saved creative hotbars"
+    "message": "Unsync saved creative hotbars"
   },
   "instance.settings.tabs.synced-options.creative-hotbars.disabled-in-app": {
     "message": "Saved creative hotbar syncing is turned off in app settings."
@@ -2727,7 +2727,7 @@
     "message": "Use synced"
   },
   "instance.settings.tabs.synced-options.multiplayer-servers": {
-    "message": "Multiplayer servers"
+    "message": "Unsync multiplayer servers"
   },
   "instance.settings.tabs.synced-options.multiplayer-servers.disabled-in-app": {
     "message": "Multiplayer server syncing is turned off in app settings."
@@ -2742,10 +2742,10 @@
     "message": "Enable an override to keep a synced setting separate for this instance."
   },
   "instance.settings.tabs.window": {
-    "message": "Window"
+    "message": "Custom window settings"
   },
   "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Use custom window settings for this instance."
+    "message": "Configure fullscreen and launch resolution separately for this instance."
   },
   "instance.settings.tabs.window.fullscreen": {
     "message": "Fullscreen"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
index 8e214fdf31..3dfc0ca208 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
@@ -61,12 +61,11 @@ watch(
 const messages = defineMessages({
 	hooks: {
 		id: 'instance.settings.tabs.hooks.title',
-		defaultMessage: 'Game launch hooks',
+		defaultMessage: 'Custom game launch hooks',
 	},
 	hooksDescription: {
 		id: 'instance.settings.tabs.hooks.description',
-		defaultMessage:
-			'Hooks allow advanced users to run certain system commands before and after launching the game.',
+		defaultMessage: 'Run instance-specific system commands before and after launching the game.',
 	},
 	hookVariablesDescription: {
 		id: 'instance.settings.tabs.hooks.variables.description',
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
index 64402d3030..b3dadad3c1 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
@@ -155,11 +155,11 @@ watch(
 const messages = defineMessages({
 	javaInstallation: {
 		id: 'instance.settings.tabs.java.java-installation',
-		defaultMessage: 'Java installation',
+		defaultMessage: 'Custom Java installation',
 	},
 	customJavaInstallation: {
 		id: 'instance.settings.tabs.java.custom-java-installation',
-		defaultMessage: 'Use a custom Java installation for this instance.',
+		defaultMessage: 'Choose a different Java installation for this instance.',
 	},
 	javaPathPlaceholder: {
 		id: 'instance.settings.tabs.java.java-path-placeholder',
@@ -167,19 +167,19 @@ const messages = defineMessages({
 	},
 	javaMemory: {
 		id: 'instance.settings.tabs.java.java-memory',
-		defaultMessage: 'Memory allocated',
+		defaultMessage: 'Custom memory allocation',
 	},
 	customMemoryAllocation: {
 		id: 'instance.settings.tabs.java.custom-memory-allocation',
-		defaultMessage: 'Use a custom memory allocation for this instance.',
+		defaultMessage: 'Set the memory allocation separately for this instance.',
 	},
 	javaArguments: {
 		id: 'instance.settings.tabs.java.java-arguments',
-		defaultMessage: 'Java arguments',
+		defaultMessage: 'Custom Java arguments',
 	},
 	customJavaArguments: {
 		id: 'instance.settings.tabs.java.custom-java-arguments',
-		defaultMessage: 'Use custom Java arguments for this instance.',
+		defaultMessage: 'Set Java arguments separately for this instance.',
 	},
 	enterJavaArguments: {
 		id: 'instance.settings.tabs.java.enter-java-arguments',
@@ -187,11 +187,11 @@ const messages = defineMessages({
 	},
 	javaEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.environment-variables',
-		defaultMessage: 'Environment variables',
+		defaultMessage: 'Custom environment variables',
 	},
 	customEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.custom-environment-variables',
-		defaultMessage: 'Use custom environment variables for this instance.',
+		defaultMessage: 'Set environment variables separately for this instance.',
 	},
 	enterEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.enter-environment-variables',
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
index 2c61cc712a..3410a58c7b 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/synced-options-settings.vue
@@ -45,7 +45,7 @@ const messages = defineMessages({
 	},
 	multiplayerServers: {
 		id: 'instance.settings.tabs.synced-options.multiplayer-servers',
-		defaultMessage: 'Multiplayer servers',
+		defaultMessage: 'Unsync multiplayer servers',
 	},
 	multiplayerServersDescription: {
 		id: 'instance.settings.tabs.synced-options.multiplayer-servers.override-description',
@@ -57,7 +57,7 @@ const messages = defineMessages({
 	},
 	commandHistory: {
 		id: 'instance.settings.tabs.synced-options.command-history',
-		defaultMessage: 'Command history',
+		defaultMessage: 'Unsync command history',
 	},
 	commandHistoryDescription: {
 		id: 'instance.settings.tabs.synced-options.command-history.override-description',
@@ -69,7 +69,7 @@ const messages = defineMessages({
 	},
 	creativeHotbars: {
 		id: 'instance.settings.tabs.synced-options.creative-hotbars',
-		defaultMessage: 'Saved creative hotbars',
+		defaultMessage: 'Unsync saved creative hotbars',
 	},
 	creativeHotbarsDescription: {
 		id: 'instance.settings.tabs.synced-options.creative-hotbars.override-description',
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
index 70dc3b0c3b..7c88c49e85 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
@@ -56,11 +56,11 @@ watch(
 const messages = defineMessages({
 	window: {
 		id: 'instance.settings.tabs.window',
-		defaultMessage: 'Window',
+		defaultMessage: 'Custom window settings',
 	},
 	customWindowSettings: {
 		id: 'instance.settings.tabs.window.custom-window-settings',
-		defaultMessage: 'Use custom window settings for this instance.',
+		defaultMessage: 'Configure fullscreen and launch resolution separately for this instance.',
 	},
 	fullscreen: {
 		id: 'instance.settings.tabs.window.fullscreen',
diff --git a/packages/ui/src/components/image-viewer-editor/editor.vue b/packages/ui/src/components/image-viewer-editor/editor.vue
index 19e793b016..0d1fed9f37 100644
--- a/packages/ui/src/components/image-viewer-editor/editor.vue
+++ b/packages/ui/src/components/image-viewer-editor/editor.vue
@@ -43,7 +43,6 @@ const emit = defineEmits<{
 	cancel: []
 	close: []
 	edit: []
-	imageReady: []
 	next: []
 	previous: []
 	save: [payload: ImageViewerEditorSavePayload]
@@ -85,6 +84,7 @@ const {
 	fitToViewport,
 	setZoom,
 	setFit,
+	waitForRender,
 	exportPng,
 	handleKeyboardShortcut,
 	isTextEditing,
@@ -108,11 +108,31 @@ const viewZoom = computed(() => zoom.value / Math.max(fitScale.value, Number.EPS
 const viewZoomPercent = computed(() => Math.round(viewZoom.value * 100))
 const viewZoomed = computed(() => viewZoom.value > 1.001)
 const canViewZoomIn = computed(() => canZoomIn.value && viewZoom.value < MAX_VIEW_ZOOM)
+const nativeImageView = computed(
+	() =>
+		props.mode === 'view' &&
+		[props.item.src, props.item.editorSource?.path].some(isGifOrWebpSource),
+)
 
 let resizeObserver: ResizeObserver | undefined
 let initializationGeneration = 0
 let initializationChain = Promise.resolve()
-let imageReadyFrame: number | undefined
+
+function isGifOrWebpSource(source?: string) {
+	if (!source) return false
+	let pathname = source
+	try {
+		pathname = new URL(source, 'https://modrinth.invalid').pathname
+	} catch {
+		// ... ignore
+	}
+	try {
+		pathname = decodeURIComponent(pathname)
+	} catch {
+		// ... ignore
+	}
+	return /\.(?:gif|webp)$/i.test(pathname)
+}
 
 function queueInitialization() {
 	const generation = ++initializationGeneration
@@ -120,7 +140,6 @@ function queueInitialization() {
 	const editorDataPromise = props.loadData(props.item)
 	initializationChain = initializationChain.then(async () => {
 		if (generation !== initializationGeneration) return
-		let initialized = false
 		try {
 			const editorData = await editorDataPromise
 			if (generation !== initializationGeneration || !canvasElement.value) return
@@ -128,7 +147,8 @@ function queueInitialization() {
 			if (generation !== initializationGeneration) return
 			setInteractionEnabled(props.mode === 'edit')
 			observeViewport()
-			initialized = true
+			await waitForRender()
+			if (generation !== initializationGeneration) return
 		} catch (error) {
 			if (generation !== initializationGeneration) return
 			handleError(error)
@@ -136,20 +156,11 @@ function queueInitialization() {
 		} finally {
 			if (generation === initializationGeneration) {
 				loadingEditorData.value = false
-				if (initialized) notifyImageReady()
 			}
 		}
 	})
 }
 
-function notifyImageReady() {
-	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
-	imageReadyFrame = requestAnimationFrame(() => {
-		imageReadyFrame = undefined
-		emit('imageReady')
-	})
-}
-
 function observeViewport() {
 	resizeObserver?.disconnect()
 	if (!viewport.value || !fitBounds.value) return
@@ -164,7 +175,6 @@ function fitEditorToViewport() {
 	if (!viewportSize) return
 	fitToViewport(viewportSize.width, viewportSize.height)
 	if (isFit.value) centerViewport()
-	else notifyImageReady()
 }
 
 function getViewportSize() {
@@ -186,72 +196,9 @@ function centerViewport() {
 			0,
 			(viewport.value.scrollHeight - viewport.value.clientHeight) / 2,
 		)
-		notifyImageReady()
 	})
 }
 
-function getTextContrast(target: HTMLElement): 'dark' | 'light' {
-	const renderedCanvas = viewport.value?.querySelector<HTMLCanvasElement>('canvas.lower-canvas')
-	const context = renderedCanvas?.getContext('2d', { willReadFrequently: true })
-	if (!renderedCanvas || !context) return 'light'
-
-	const targetBounds = target.getBoundingClientRect()
-	const canvasBounds = renderedCanvas.getBoundingClientRect()
-	const intersection = {
-		left: Math.max(targetBounds.left, canvasBounds.left),
-		top: Math.max(targetBounds.top, canvasBounds.top),
-		right: Math.min(targetBounds.right, canvasBounds.right),
-		bottom: Math.min(targetBounds.bottom, canvasBounds.bottom),
-	}
-	if (intersection.right <= intersection.left || intersection.bottom <= intersection.top)
-		return 'light'
-
-	const scaleX = renderedCanvas.width / canvasBounds.width
-	const scaleY = renderedCanvas.height / canvasBounds.height
-	const sourceX = Math.max(0, Math.floor((intersection.left - canvasBounds.left) * scaleX))
-	const sourceY = Math.max(0, Math.floor((intersection.top - canvasBounds.top) * scaleY))
-	const sourceWidth = Math.min(
-		renderedCanvas.width - sourceX,
-		Math.max(1, Math.ceil((intersection.right - intersection.left) * scaleX)),
-	)
-	const sourceHeight = Math.min(
-		renderedCanvas.height - sourceY,
-		Math.max(1, Math.ceil((intersection.bottom - intersection.top) * scaleY)),
-	)
-
-	try {
-		const pixels = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight).data
-		const sampleStride = Math.max(1, Math.floor(Math.sqrt((sourceWidth * sourceHeight) / 4096)))
-		let luminanceTotal = 0
-		let sampleCount = 0
-		for (let y = 0; y < sourceHeight; y += sampleStride) {
-			for (let x = 0; x < sourceWidth; x += sampleStride) {
-				const offset = (y * sourceWidth + x) * 4
-				const red = srgbToLinear(pixels[offset] / 255)
-				const green = srgbToLinear(pixels[offset + 1] / 255)
-				const blue = srgbToLinear(pixels[offset + 2] / 255)
-				const alpha = pixels[offset + 3] / 255
-				luminanceTotal += (0.2126 * red + 0.7152 * green + 0.0722 * blue) * alpha
-				sampleCount++
-			}
-		}
-
-		const targetArea = targetBounds.width * targetBounds.height
-		const intersectionArea =
-			(intersection.right - intersection.left) * (intersection.bottom - intersection.top)
-		const coverage = targetArea > 0 ? intersectionArea / targetArea : 0
-		if (coverage < 0.9) return 'light'
-		const averageLuminance = sampleCount > 0 ? luminanceTotal / sampleCount : 0
-		return averageLuminance > 0.179 ? 'dark' : 'light'
-	} catch {
-		return 'light'
-	}
-}
-
-function srgbToLinear(value: number) {
-	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
-}
-
 function resetView() {
 	setFit()
 	centerViewport()
@@ -360,10 +307,7 @@ function stopPan() {
 	const pan = panning.value
 	panning.value = undefined
 	if (!pan || props.mode !== 'view') return
-	if (pan.moved) {
-		notifyImageReady()
-		return
-	}
+	if (pan.moved) return
 	if (viewZoomed.value) resetView()
 	else setViewZoom(CLICK_ZOOM)
 }
@@ -427,7 +371,6 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
 	initializationGeneration++
-	if (imageReadyFrame !== undefined) cancelAnimationFrame(imageReadyFrame)
 	document.removeEventListener('keydown', handleKeydown)
 	document.removeEventListener('keyup', handleKeyup)
 	document.removeEventListener('edit-menu:undo', handleEditMenuUndo)
@@ -436,7 +379,7 @@ onBeforeUnmount(() => {
 	void dispose()
 })
 
-defineExpose({ getTextContrast, markSaved })
+defineExpose({ markSaved })
 </script>
 
 <template>
@@ -456,20 +399,31 @@ defineExpose({ getTextContrast, markSaved })
 		@wheel="handleWheel"
 	>
 		<img
-			v-if="mode === 'view' && loadingEditorData"
+			v-if="mode === 'view' && loadingEditorData && !nativeImageView"
 			:src="item.src"
 			:alt="item.alt"
-			class="pointer-events-none relative z-[2] m-auto block max-h-full max-w-full shrink-0 object-contain"
+			class="pointer-events-none relative z-[2] m-auto block h-full w-full shrink-0 object-contain"
 			draggable="false"
 		/>
 		<div
-			v-show="!loadingEditorData"
+			v-show="nativeImageView || !loadingEditorData"
 			class="editor-canvas relative z-[2] m-auto shrink-0"
+			:class="{
+				'h-full w-full': nativeImageView && loadingEditorData,
+				'is-native-image-view': nativeImageView,
+			}"
 			@pointerenter="updateBrushPointer"
 			@pointermove="updateBrushPointer"
 			@pointerleave="brushPointer.visible = false"
 		>
 			<canvas ref="canvasElement" :aria-label="item.alt" role="img" />
+			<img
+				v-if="nativeImageView"
+				:src="item.src"
+				:alt="item.alt"
+				class="pointer-events-none absolute inset-0 z-[2] h-full w-full object-contain"
+				draggable="false"
+			/>
 			<div
 				v-if="hasBrushPointer && brushPointer.visible"
 				class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid shadow-[0_0_0_1px_rgb(0_0_0_/_80%),inset_0_0_0_1px_rgb(255_255_255_/_35%)]"
@@ -582,6 +536,22 @@ defineExpose({ getTextContrast, markSaved })
 	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
 }
 
+.editor-canvas.is-native-image-view :deep(.canvas-container) {
+	visibility: hidden;
+}
+
+.editor-viewport.is-view .editor-canvas.is-native-image-view {
+	cursor: zoom-in;
+}
+
+.editor-viewport.is-view-zoomed .editor-canvas.is-native-image-view {
+	cursor: grab;
+}
+
+.editor-viewport.is-panning .editor-canvas.is-native-image-view {
+	cursor: grabbing;
+}
+
 .editor-viewport.is-view :deep(.upper-canvas) {
 	cursor: zoom-in !important;
 }
diff --git a/packages/ui/src/components/image-viewer-editor/index.vue b/packages/ui/src/components/image-viewer-editor/index.vue
index 9e257ac1b0..84fc717384 100644
--- a/packages/ui/src/components/image-viewer-editor/index.vue
+++ b/packages/ui/src/components/image-viewer-editor/index.vue
@@ -34,16 +34,11 @@ const emit = defineEmits<{
 
 const activeId = ref<string | null>(null)
 const mode = ref<ImageViewerEditorMode>('view')
-const titleContrast = ref<'dark' | 'light'>('light')
-const descriptionContrast = ref<'dark' | 'light'>('light')
 const closeAfterEditing = ref(false)
 const editorComponent = ref<InstanceType<typeof Editor>>()
-const titleElement = ref<HTMLElement>()
-const descriptionElement = ref<HTMLElement>()
 const context = injectImageViewerEditor(null)
 const itemDataCache = new Map<string, Promise<ImageViewerEditorData>>()
 const itemImageCache = new Map<string, HTMLImageElement>()
-let headingContrastTimer: ReturnType<typeof setTimeout> | undefined
 
 const activeIndex = computed(() => props.items.findIndex((item) => item.id === activeId.value))
 const activeItem = computed(() => props.items[activeIndex.value] ?? null)
@@ -129,11 +124,8 @@ function preloadItemsAround(index: number) {
 function show(index: number) {
 	const item = props.items[index]
 	if (!item) return
-	cancelHeadingContrastUpdate()
 	preloadItemsAround(index)
 	if (activeId.value === null) {
-		titleContrast.value = 'light'
-		descriptionContrast.value = 'light'
 		context?.onShow?.()
 	}
 	activeId.value = item.id
@@ -165,7 +157,6 @@ function finishEditing() {
 
 function hide() {
 	if (activeId.value === null || props.saving) return
-	cancelHeadingContrastUpdate()
 	activeId.value = null
 	mode.value = 'view'
 	closeAfterEditing.value = false
@@ -177,33 +168,12 @@ function hide() {
 
 function navigate(offset: number, direction: 'next' | 'previous') {
 	if (mode.value !== 'view' || props.items.length < 2) return
-	cancelHeadingContrastUpdate()
 	const index = (activeIndex.value + offset + props.items.length) % props.items.length
 	preloadItemsAround(index)
 	activeId.value = props.items[index].id
 	emit('navigate', props.items[index], index, direction)
 }
 
-function updateHeadingContrast() {
-	cancelHeadingContrastUpdate()
-	headingContrastTimer = setTimeout(() => {
-		headingContrastTimer = undefined
-		if (titleElement.value) {
-			titleContrast.value = editorComponent.value?.getTextContrast(titleElement.value) ?? 'light'
-		}
-		if (descriptionElement.value) {
-			descriptionContrast.value =
-				editorComponent.value?.getTextContrast(descriptionElement.value) ?? 'light'
-		}
-	}, 120)
-}
-
-function cancelHeadingContrastUpdate() {
-	if (headingContrastTimer === undefined) return
-	clearTimeout(headingContrastTimer)
-	headingContrastTimer = undefined
-}
-
 function next() {
 	navigate(1, 'next')
 }
@@ -237,7 +207,6 @@ function handleKeydown(event: KeyboardEvent) {
 onMounted(() => document.addEventListener('keydown', handleKeydown))
 onBeforeUnmount(() => {
 	document.removeEventListener('keydown', handleKeydown)
-	cancelHeadingContrastUpdate()
 	itemDataCache.clear()
 	itemImageCache.clear()
 	if (activeId.value !== null) context?.onHide?.()
@@ -261,20 +230,16 @@ defineExpose({ show, edit, hide, next, previous, markSavedAndView })
 				class="absolute inset-x-6 top-[calc(var(--top-bar-height,3rem)_+_1.5rem)] z-10 min-w-0"
 				@click.stop
 			>
-				<div class="w-fit min-w-0 max-w-full">
+				<div class="viewer-heading-text w-fit min-w-0 max-w-full">
 					<h2
 						v-if="activeItem.title"
-						ref="titleElement"
-						class="m-0 max-w-[min(42rem,70vw)] truncate text-base font-semibold leading-snug transition-colors duration-200 ease-out"
-						:class="titleContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+						class="m-0 max-w-[min(42rem,70vw)] truncate text-base font-semibold leading-snug text-contrast"
 					>
 						{{ activeItem.title }}
 					</h2>
 					<p
 						v-if="activeItem.description"
-						ref="descriptionElement"
-						class="mb-0 mt-1 max-w-[min(42rem,70vw)] truncate text-xs leading-snug opacity-70 transition-colors duration-200 ease-out"
-						:class="descriptionContrast === 'dark' ? 'text-gray-950' : 'text-white'"
+						class="mb-0 mt-1 max-w-[min(42rem,70vw)] truncate text-xs leading-snug text-white"
 					>
 						{{ activeItem.description }}
 					</p>
@@ -296,7 +261,6 @@ defineExpose({ show, edit, hide, next, previous, markSavedAndView })
 				@previous="previous"
 				@cancel="finishEditing"
 				@save="emit('save', $event)"
-				@image-ready="updateHeadingContrast"
 			>
 				<template #actions>
 					<slot name="actions" :item="activeItem" :index="activeIndex" :hide="hide" />
@@ -305,3 +269,9 @@ defineExpose({ show, edit, hide, next, previous, markSavedAndView })
 		</div>
 	</Teleport>
 </template>
+
+<style scoped>
+.viewer-heading-text {
+	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 90%));
+}
+</style>
diff --git a/packages/ui/src/components/image-viewer-editor/use-image-editor.ts b/packages/ui/src/components/image-viewer-editor/use-image-editor.ts
index a3ca1bcad9..b2b0deee23 100644
--- a/packages/ui/src/components/image-viewer-editor/use-image-editor.ts
+++ b/packages/ui/src/components/image-viewer-editor/use-image-editor.ts
@@ -1353,6 +1353,16 @@ export function useImageEditor() {
 		applyDisplayScale()
 	}
 
+	function waitForRender() {
+		const editorCanvas = canvas.value
+		if (!editorCanvas) return Promise.resolve()
+
+		return new Promise<void>((resolve) => {
+			editorCanvas.once('after:render', () => resolve())
+			editorCanvas.requestRenderAll()
+		})
+	}
+
 	function applyDisplayScale() {
 		const editorCanvas = canvas.value
 		if (!editorCanvas) return
@@ -1621,6 +1631,7 @@ export function useImageEditor() {
 		fitToViewport,
 		setZoom,
 		setFit,
+		waitForRender,
 		exportPng,
 		handleKeyboardShortcut,
 		isTextEditing,