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>

apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue

@@ -0,0 +1,66 @@
+<template>
+	<Admonition
+		type="info"
+		inline-actions
+		:header="formatMessage(messages.sharedInstanceChangesHeader)"
+	>
+		{{ formatMessage(messages.sharedInstanceChangesBody) }}
+		<template #actions>
+			<ButtonStyled color="blue">
+				<button class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
+					<SpinnerIcon
+						v-if="isReviewingPublish || isPublishing"
+						class="animate-spin"
+						aria-hidden="true"
+					/>
+					<UploadIcon v-else aria-hidden="true" />
+					{{
+						isPublishing
+							? formatMessage(messages.sharedInstancePublishingButton)
+							: isReviewingPublish
+								? formatMessage(messages.sharedInstanceReviewingButton)
+								: formatMessage(messages.sharedInstancePublishButton)
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</Admonition>
+
+	<SharedInstancePublishModal
+		ref="publishModal"
+		:instance="instance"
+		@published="emit('published')"
+		@state-change="publishState = $event"
+	/>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'
+import type { GameInstance } from '@/helpers/types'
+
+import { instanceAdmonitionsMessages as messages } from './messages'
+
+defineProps<{
+	instance: GameInstance
+}>()
+
+const emit = defineEmits<{
+	published: []
+}>()
+
+const { formatMessage } = useVIntl()
+const publishModal = ref<InstanceType<typeof SharedInstancePublishModal>>()
+const publishState = ref<'idle' | 'reviewing' | 'publishing'>('idle')
+const isPublishing = computed(() => publishState.value === 'publishing')
+const isReviewingPublish = computed(() => publishState.value === 'reviewing')
+
+const isPublishButtonDisabled = computed(() => isPublishing.value || isReviewingPublish.value)
+
+function reviewChanges(e?: MouseEvent) {
+	publishModal.value?.show(e)
+}
+</script>