fix: info admon breaking

packages/ui/src/components/base/StackedAdmonitions.vue

@@ -31,6 +31,7 @@ const props = withDefaults(
 		maxVisibleBehind?: number
 		dismissAllEnabled?: boolean
 		expanded?: boolean
+		animateSingleItem?: boolean
 	}>(),
 	{
 		peek: 8,
@@ -41,6 +42,7 @@ const props = withDefaults(
 		maxVisibleBehind: 2,
 		dismissAllEnabled: true,
 		expanded: undefined,
+		animateSingleItem: true,
 	},
 )
 
@@ -128,6 +130,12 @@ const phase = ref<StackPhase>(isExpanded.value ? 'expanded' : 'collapsed')
 const isSettledCollapsed = computed(() => phase.value === 'collapsed')
 const containerHeightSettled = ref(true)
 const singleItemEntrance = ref(false)
+const singleItemAnimationDisabled = computed(
+	() => !props.animateSingleItem && props.items.length <= 1,
+)
+const instantSingleItem = computed(() =>
+	!props.animateSingleItem && props.items.length === 1 ? props.items[0]! : null,
+)
 
 // Behind cards morph between a collapsed placeholder and real content. The shell
 // height owns that morph so mixed-height cards do not swap DOM midway through motion.
@@ -183,20 +191,30 @@ const containerOverflow = computed(() => {
 })
 
 const springTransition = computed(() =>
-	prefersReducedMotion.value || !initialMeasurementSettled.value
+	prefersReducedMotion.value ||
+	!initialMeasurementSettled.value ||
+	singleItemAnimationDisabled.value
 		? { duration: 0 }
 		: { type: 'spring' as const, stiffness: 260, damping: 32 },
 )
 const heightTransition = computed(() =>
-	singleItemEntrance.value ? { duration: 0.12, ease: 'easeOut' as const } : springTransition.value,
+	singleItemAnimationDisabled.value
+		? { duration: 0 }
+		: singleItemEntrance.value
+			? { duration: 0.12, ease: 'easeOut' as const }
+			: springTransition.value,
 )
 
 const exitTransition = computed(() =>
-	prefersReducedMotion.value ? { duration: 0 } : { duration: 0.18 },
+	prefersReducedMotion.value || singleItemAnimationDisabled.value
+		? { duration: 0 }
+		: { duration: 0.18 },
 )
 
 const shellExitTransition = computed(() =>
-	prefersReducedMotion.value ? { duration: 0 } : { duration: 0.16 },
+	prefersReducedMotion.value || singleItemAnimationDisabled.value
+		? { duration: 0 }
+		: { duration: 0.16 },
 )
 
 function collapsedCardPosition(index: number) {
@@ -219,7 +237,7 @@ function expandedCardPosition(index: number) {
 function cardPosition(index: number) {
 	const position = isExpanded.value ? expandedCardPosition(index) : collapsedCardPosition(index)
 	const item = props.items[index]
-	if (index === 0 && singleItemEntrance.value) {
+	if (index === 0 && singleItemEntrance.value && !singleItemAnimationDisabled.value) {
 		return {
 			...position,
 			opacity: 0,
@@ -242,7 +260,13 @@ function contentOpacity(index: number) {
 // Newly inserted cards need an explicit two-frame enter target because Motion's
 // initial state is disabled to avoid animating from zero-height on first mount.
 function markEntering(ids: string[]) {
-	if (!itemEntrancesEnabled.value || prefersReducedMotion.value || ids.length === 0) return
+	if (
+		!itemEntrancesEnabled.value ||
+		prefersReducedMotion.value ||
+		singleItemAnimationDisabled.value ||
+		ids.length === 0
+	)
+		return
 
 	const next = new Set(enteringItemIds.value)
 	for (const id of ids) next.add(id)
@@ -367,10 +391,11 @@ watch(
 			previousLength === 0 &&
 			n === 1 &&
 			itemEntrancesEnabled.value &&
-			!prefersReducedMotion.value
+			!prefersReducedMotion.value &&
+			props.animateSingleItem
 		) {
 			singleItemEntrance.value = true
-		} else if (n !== 1) {
+		} else if (n !== 1 || !props.animateSingleItem) {
 			singleItemEntrance.value = false
 		}
 
@@ -397,16 +422,19 @@ watch(containerHeight, (height, previousHeight) => {
 			height > 0 &&
 			props.items.length === 1 &&
 			itemEntrancesEnabled.value &&
-			!prefersReducedMotion.value
+			!prefersReducedMotion.value &&
+			props.animateSingleItem
 
 		if (openingSingleItem) {
 			singleItemEntrance.value = true
-		} else if (height === 0 || props.items.length !== 1) {
+		} else if (height === 0 || props.items.length !== 1 || !props.animateSingleItem) {
 			singleItemEntrance.value = false
 		}
 
 		containerHeightSettled.value =
-			prefersReducedMotion.value || (!initialMeasurementSettled.value && !openingSingleItem)
+			prefersReducedMotion.value ||
+			singleItemAnimationDisabled.value ||
+			(!initialMeasurementSettled.value && !openingSingleItem)
 	}
 })
 
@@ -476,7 +504,17 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<AnimatePresence :initial="false">
+	<div v-if="instantSingleItem" v-bind="attrs" class="relative">
+		<slot
+			name="item"
+			:item="instantSingleItem"
+			:index="0"
+			:is-front="true"
+			:expanded="false"
+			:dismissible="itemDismissible(instantSingleItem)"
+		/>
+	</div>
+	<AnimatePresence v-else :initial="false">
 		<Motion
 			v-if="items.length > 0"
 			v-bind="attrs"

packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue

@@ -23,6 +23,7 @@ import UploadAdmonition from './UploadAdmonition.vue'
 const props = defineProps<{
 	syncProgress?: SyncProgress | null
 	contentError?: ContentError | null
+	showInstanceInfo?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -119,6 +120,7 @@ const INSTANCE_INFO_ADMONITION_KEY = 'server-instances-info-admonition-dismissed
 const instanceCount = computed(() => ctx.serverFull.value?.worlds.length ?? null)
 const showInstanceInfoAdmonition = computed(
 	() =>
+		props.showInstanceInfo &&
 		isOnInstancesList.value &&
 		instanceInfoAdmonitionStorageLoaded.value &&
 		!instanceInfoAdmonitionDismissed.value &&
@@ -457,6 +459,7 @@ function onInstanceInfoDismiss() {
 	<StackedAdmonitions
 		:items="stackItems"
 		:dismiss-all-enabled="hasBulkDismissableItems"
+		:animate-single-item="false"
 		class="w-full"
 		@dismiss-all="onDismissAll"
 	>

packages/ui/src/components/servers/admonitions/context.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue'
+
+import { createContext } from '#ui/providers'
+
+export interface ServerPanelAdmonitionsContext {
+	readonly showInstanceInfo: Ref<boolean>
+}
+
+export const [injectServerPanelAdmonitionsContext, provideServerPanelAdmonitionsContext] =
+	createContext<ServerPanelAdmonitionsContext>('[id].vue', 'serverPanelAdmonitionsContext')

packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue

@@ -264,6 +264,7 @@
 						class="mb-4"
 						:sync-progress="syncProgress"
 						:content-error="contentError"
+						:show-instance-info="showInstanceInfoAdmonition"
 						@content-retry="handleContentRetry"
 					/>
 					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
@@ -332,6 +333,7 @@ import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+import { provideServerPanelAdmonitionsContext } from '#ui/components/servers/admonitions/context'
 import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
 import { ServerManageHeader } from '#ui/components/servers/server-header'
@@ -695,6 +697,7 @@ const debug = useDebugLogger('ServerManage')
 const isReconnecting = ref(false)
 const isLoading = ref(true)
 const isMounted = ref(true)
+const showInstanceInfoAdmonition = ref(false)
 const copied = ref(false)
 const installError = ref<Error | null>(null)
 type InstallErrorTitle = 'generic' | 'installation'
@@ -1539,6 +1542,9 @@ provideServerSettingsModal({
 		openServerInstanceSettingsModal(options?.tabId, options?.worldId),
 	browseServerContent: (args) => handleBrowseContent(args),
 })
+provideServerPanelAdmonitionsContext({
+	showInstanceInfo: showInstanceInfoAdmonition,
+})
 
 function safeStringify(obj: unknown, indent = ' '): string {
 	const seen = new WeakSet()

packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-4">
+	<div ref="instancesPage" class="flex flex-col gap-4">
 		<div
 			v-if="worldsPending"
 			class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6"
@@ -41,7 +41,8 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
+import { computed, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import {
@@ -49,6 +50,7 @@ import {
 	CreationFlowModal,
 	UploadProgressModal,
 } from '#ui/components'
+import { injectServerPanelAdmonitionsContext } from '#ui/components/servers/admonitions/context'
 import InstanceCard from '#ui/components/servers/instances/InstanceCard.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerPermissions } from '#ui/composables/server-permissions'
@@ -117,6 +119,7 @@ const SERVER_LOADERS = ['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'pape
 
 const client = injectModrinthClient()
 const { serverId, server, isServerRunning } = injectModrinthServerContext()
+const panelAdmonitions = injectServerPanelAdmonitionsContext(null)
 const { openServerInstanceSettings } = injectServerSettingsModal()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -124,6 +127,7 @@ const router = useRouter()
 const route = useRoute()
 const queryClient = useQueryClient()
 const { canSetup, permissionDeniedMessage } = useServerPermissions()
+const instancesPage = useTemplateRef<HTMLElement>('instancesPage')
 const createWorldModalRef =
 	useTemplateRef<InstanceType<typeof CreationFlowModal>>('createWorldModalRef')
 const uploadProgressModal =
@@ -137,6 +141,17 @@ const worldsQuery = useQuery({
 
 const worldsPending = computed(() => worldsQuery.isLoading.value && !worldsQuery.data.value)
 const worldSlots = computed(() => worldsQuery.data.value ?? [])
+const instancesPageVisible = useElementVisibility(instancesPage)
+
+watch(
+	instancesPageVisible,
+	(visible) => {
+		if (panelAdmonitions) {
+			panelAdmonitions.showInstanceInfo.value = visible
+		}
+	},
+	{ immediate: true },
+)
 
 onMounted(() => {
 	if (route.query.resumeModal !== 'create-instance') return
@@ -144,7 +159,12 @@ onMounted(() => {
 	createWorldModalRef.value?.show()
 })
 
-onBeforeUnmount(() => createWorldModalRef.value?.hide())
+onBeforeUnmount(() => {
+	createWorldModalRef.value?.hide()
+	if (panelAdmonitions) {
+		panelAdmonitions.showInstanceInfo.value = false
+	}
+})
 
 async function searchModpacks(query: string, limit: number = 10) {
 	return client.labrinth.projects_v2.search({

packages/ui/src/stories/base/StackedAdmonitions.stories.ts

@@ -121,6 +121,35 @@ export const SingleItem: Story = {
 	}),
 }
 
+export const SingleItemWithoutAnimation: Story = {
+	render: () => ({
+		components: { StackedAdmonitions, Admonition },
+		setup() {
+			const items = ref<DemoItem[]>([])
+			function toggle() {
+				items.value = items.value.length === 0 ? [completedBackupItem] : []
+			}
+			return { items, toggle }
+		},
+		template: /* html */ `
+			<div>
+				<button
+					type="button"
+					style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
+					@click="toggle"
+				>
+					Toggle item
+				</button>
+				<StackedAdmonitions :items="items" :animate-single-item="false">
+					<template #item="{ item }">
+						<Admonition :type="item.type" :header="item.header" :body="item.body" />
+					</template>
+				</StackedAdmonitions>
+			</div>
+		`,
+	}),
+}
+
 export const TwoItems: Story = {
 	render: () => ({
 		components: { StackedAdmonitions, Admonition },

packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts

@@ -138,6 +138,9 @@ type Story = StoryObj<typeof meta>
 export const WithUploadFileOpAndBusy: Story = {}
 
 export const InstanceInfo: Story = {
+	args: {
+		showInstanceInfo: true,
+	},
 	parameters: {
 		routePath: '/hosting/manage/demo-server/instances',
 		resetInstanceInfoAdmonition: true,