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

packages/ui/src/components/nav/PopupNotificationPanel.vue

@@ -24,11 +24,15 @@
 									:class="{
 										'text-red': item.type === 'error',
 										'text-orange': item.type === 'warning',
+										'text-green': item.type === 'download',
 										'text-contrast': item.type === 'success',
-										'text-blue': !item.type || !['error', 'warning', 'success'].includes(item.type),
+										'text-blue':
+											!item.type ||
+											!['error', 'warning', 'success', 'download'].includes(item.type),
 									}"
 								>
 									<IssuesIcon v-if="item.type === 'warning'" class="h-5 w-5" />
+									<DownloadIcon v-else-if="item.type === 'download'" class="h-5 w-5" />
 									<CheckCircleIcon v-else-if="item.type === 'success'" class="h-5 w-5" />
 									<XCircleIcon v-else-if="item.type === 'error'" class="h-5 w-5" />
 									<InfoIcon v-else class="h-5 w-5" />
@@ -47,6 +51,37 @@
 							{{ item.text }}
 						</span>
 					</div>
+					<div v-if="item.progressItems?.length" class="flex flex-col gap-3">
+						<div
+							v-for="progressItem in item.progressItems"
+							:key="progressItem.id"
+							class="flex flex-col gap-2"
+						>
+							<div class="text-contrast truncate">
+								{{ progressItem.title }}
+							</div>
+							<ProgressBar
+								:progress="progressItem.progress"
+								:max="1"
+								:waiting="progressItem.waiting"
+								:color="progressColorForType(item.type)"
+								:gradient-border="false"
+								full-width
+							/>
+							<div v-if="progressItem.text" class="text-sm text-secondary truncate">
+								{{ progressItem.text }}
+							</div>
+						</div>
+					</div>
+					<ProgressBar
+						v-else-if="item.progress != null || item.waiting"
+						:progress="item.progress ?? 0"
+						:max="1"
+						:waiting="item.waiting ?? false"
+						:color="progressColorForType(item.type)"
+						:gradient-border="false"
+						full-width
+					/>
 					<div v-if="item.buttons?.length" class="flex gap-1.5">
 						<ButtonStyled
 							v-for="(btn, idx) in item.buttons"
@@ -65,7 +100,14 @@
 </template>
 
 <script setup lang="ts">
-import { CheckCircleIcon, InfoIcon, IssuesIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import {
+	CheckCircleIcon,
+	DownloadIcon,
+	InfoIcon,
+	IssuesIcon,
+	XCircleIcon,
+	XIcon,
+} from '@modrinth/assets'
 import { computed } from 'vue'
 
 import {
@@ -74,6 +116,7 @@ import {
 	type PopupNotificationButton,
 } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
+import ProgressBar from '../base/ProgressBar.vue'
 
 const popupNotificationManager = injectPopupNotificationManager()
 const notifications = computed<PopupNotification[]>(() =>
@@ -90,6 +133,21 @@ function handleButtonClick(id: string | number, btn: PopupNotificationButton) {
 	popupNotificationManager.removeNotification(id)
 }
 
+function progressColorForType(type: PopupNotification['type']) {
+	if (type === 'error') {
+		return 'red'
+	} else if (type === 'warning') {
+		return 'orange'
+	} else if (type === 'download') {
+		return 'green'
+	} else if (type === 'success') {
+		return 'green'
+	} else if (type === 'info') {
+		return 'blue'
+	}
+	return 'green'
+}
+
 withDefaults(
 	defineProps<{
 		hasSidebar?: boolean