refactor: use DI for instance page + subpages (#6987)

* refactor: use DI for instance page + subpages * fix: qa * refactor: layout.vue bring up a layer * refactor: rename folders * import order * refactor: move settings into instance page * fix: lint --------- Co-authored-by: tdgao <mr.trumgao@gmail.com>
2026-08-27 18:14:49 +00:00 · 2026-08-04 16:52:00 +00:00
parent 99377f8436
commit fe0c97190a
42 changed files with 1009 additions and 1142 deletions
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import { edit } from '@/helpers/instance'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, Hooks } from '../../../../helpers/types'
+import { injectInstanceSettings } from './instance-settings-context'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const { instance } = injectInstanceSettings()
+
+const globalSettings = (await get().catch(handleError)) as AppSettings
+
+const overrideHooks = ref(
+	!!instance.value.hooks.pre_launch ||
+		!!instance.value.hooks.wrapper ||
+		!!instance.value.hooks.post_exit,
+)
+const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
+
+const editInstanceObject = computed(() => {
+	const editInstancePatch: {
+		hooks?: Hooks
+	} = {}
+
+	// When hooks are not overridden per-instance, we want to clear them
+	editInstancePatch.hooks = overrideHooks.value ? hooks.value : {}
+
+	return editInstancePatch
+})
+
+watch(
+	[overrideHooks, hooks],
+	async () => {
+		await edit(instance.value.id, editInstanceObject.value)
+	},
+	{ deep: true },
+)
+const messages = defineMessages({
+	hooks: {
+		id: 'instance.settings.tabs.hooks.title',
+		defaultMessage: '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.',
+	},
+	customHooks: {
+		id: 'instance.settings.tabs.hooks.custom-hooks',
+		defaultMessage: 'Custom launch hooks',
+	},
+	preLaunch: {
+		id: 'instance.settings.tabs.hooks.pre-launch',
+		defaultMessage: 'Pre-launch',
+	},
+	preLaunchDescription: {
+		id: 'instance.settings.tabs.hooks.pre-launch.description',
+		defaultMessage: 'Ran before the instance is launched.',
+	},
+	preLaunchEnter: {
+		id: 'instance.settings.tabs.hooks.pre-launch.enter',
+		defaultMessage: 'Enter pre-launch command...',
+	},
+	wrapper: {
+		id: 'instance.settings.tabs.hooks.wrapper',
+		defaultMessage: 'Wrapper',
+	},
+	wrapperDescription: {
+		id: 'instance.settings.tabs.hooks.wrapper.description',
+		defaultMessage: 'Wrapper command for launching Minecraft.',
+	},
+	wrapperEnter: {
+		id: 'instance.settings.tabs.hooks.wrapper.enter',
+		defaultMessage: 'Enter wrapper command...',
+	},
+	postExit: {
+		id: 'instance.settings.tabs.hooks.post-exit',
+		defaultMessage: 'Post-exit',
+	},
+	postExitDescription: {
+		id: 'instance.settings.tabs.hooks.post-exit.description',
+		defaultMessage: 'Ran after the game closes.',
+	},
+	postExitEnter: {
+		id: 'instance.settings.tabs.hooks.post-exit.enter',
+		defaultMessage: 'Enter post-exit command...',
+	},
+})
+</script>
+
+<template>
+	<div>
+		<h2 class="m-0 m-0 text-lg font-semibold text-contrast">
+			{{ formatMessage(messages.hooks) }}
+		</h2>
+		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="my-2.5" />
+		<p class="m-0">
+			{{ formatMessage(messages.hooksDescription) }}
+		</p>
+
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+			{{ formatMessage(messages.preLaunch) }}
+		</h2>
+		<StyledInput
+			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>
+		<StyledInput
+			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>
+		<StyledInput
+			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>
+</template>