feat: add unknown .mrpack install warning modal (#5942)

* Update modpack button copy

* Change outlined button style for standard buttons

* add unknown pack warning modal

* implementation

* Redo download toasts

* prepr

* improve hit area of window controls

* implement "don't show again"

* prepr

* duplicate modal ref declarations

* increase spacing of progress items

* address truman review

apps/app-frontend/src/providers/setup.ts

@@ -1,16 +1,19 @@
-import type { AbstractWebNotificationManager } from '@modrinth/ui'
+import type { AbstractPopupNotificationManager, AbstractWebNotificationManager } from '@modrinth/ui'
 
 import { setupCreationModal } from './setup/creation-modal'
 import { setupFilePickerProvider } from './setup/file-picker'
 import { setupInstanceImportProvider } from './setup/instance-import'
 import { setupTagsProvider } from './setup/tags'
 
-export function setupProviders(notificationManager: AbstractWebNotificationManager) {
+export function setupProviders(
+	notificationManager: AbstractWebNotificationManager,
+	popupNotificationManager: AbstractPopupNotificationManager,
+) {
 	setupTagsProvider(notificationManager)
 	setupFilePickerProvider()
 	setupInstanceImportProvider(notificationManager)
 
 	return {
-		...setupCreationModal(notificationManager),
+		...setupCreationModal(notificationManager, popupNotificationManager),
 	}
 }

apps/app-frontend/src/providers/setup/creation-modal.ts

@@ -1,12 +1,15 @@
 import type {
+	AbstractPopupNotificationManager,
 	AbstractWebNotificationManager,
 	CreationFlowContextValue,
 	CreationFlowModal,
 } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@modrinth/ui'
 import { provide, ref, useTemplateRef } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { useRouter } from 'vue-router'
 
+import type UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import type ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_search_results } from '@/helpers/cache.js'
@@ -16,12 +19,29 @@ import { create_profile_and_install, create_profile_and_install_from_file } from
 import { create, list } from '@/helpers/profile.js'
 import type { InstanceLoader } from '@/helpers/types'
 
-export function setupCreationModal(notificationManager: AbstractWebNotificationManager) {
+export function setupCreationModal(
+	notificationManager: AbstractWebNotificationManager,
+	popupNotificationManager: AbstractPopupNotificationManager,
+) {
 	const { handleError } = notificationManager
+	const { formatMessage } = useVIntl()
 	const router = useRouter()
 
+	const messages = defineMessages({
+		installingModpackTitle: {
+			id: 'app.creation-modal.installing-modpack.title',
+			defaultMessage: 'Installing modpack...',
+		},
+		installingModpackDescription: {
+			id: 'app.creation-modal.installing-modpack.description',
+			defaultMessage: '{fileName}',
+		},
+	})
+
 	const installationModal =
 		useTemplateRef<ComponentExposed<typeof CreationFlowModal>>('installationModal')
+	const unknownPackWarningModal =
+		useTemplateRef<InstanceType<typeof UnknownPackWarningModal>>('unknownPackWarningModal')
 	const modpackAlreadyInstalledModal = ref<InstanceType<typeof ModpackAlreadyInstalledModal>>()
 
 	function setModpackAlreadyInstalledModal(
@@ -88,7 +108,24 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM
 			}
 
 			if (config.modpackFilePath.value) {
-				await create_profile_and_install_from_file(config.modpackFilePath.value).catch(handleError)
+				const waitingNotification = popupNotificationManager.addPopupNotification({
+					title: formatMessage(messages.installingModpackTitle),
+					text: formatMessage(messages.installingModpackDescription, {
+						fileName: config.modpackFilePath.value.split('/').pop() ?? config.modpackFilePath.value,
+					}),
+					type: 'info',
+					autoCloseMs: null,
+					waiting: true,
+				})
+
+				await create_profile_and_install_from_file(
+					config.modpackFilePath.value,
+					(createProfile, fileName) => {
+						popupNotificationManager.removeNotification(waitingNotification.id)
+						unknownPackWarningModal.value?.show(createProfile, fileName)
+					},
+				).catch(handleError)
+				popupNotificationManager.removeNotification(waitingNotification.id)
 				trackEvent('InstanceCreate', { source: 'CreationModalModpackFile' })
 				return
 			}
@@ -161,6 +198,7 @@ export function setupCreationModal(notificationManager: AbstractWebNotificationM
 
 	return {
 		installationModal,
+		unknownPackWarningModal,
 		fetchExistingInstanceNames,
 		handleCreate,
 		handleBrowseModpacks,