feat: instances v2 (#6431)

* feat: base of instances v2

* feat: use old profiles with compat layer

* prototype: instances v2

* fix: install_from using profile

* fix: skins migration fix

* fix: frontend still using profile path

* fix: add update proj multiselect guard

* fix: cargo fmt

* fix: content missing fields

* feat: break up app-lib/api/instance.rs

* fix: check_content_updates mismatch

* fix: updater modal cleanup w/new structure

* feat: better update all handling

* fix: remove preview_update_all

* fix: feedback on bulk update + lint

* fix: rem transitions

* fix: change to jsonb

* feat: app db backup after update

* fix: lint

* fix: sqlx prepare + use sqlx macros

* fix: lint

* fix: bugs

* feat: defuck the installing process up

* fix: bug of hell

* fix: shear

* fix: fmt

* fix: install progress spacing + change mc/content/overrides to bytes

* fix: lint

* fix: prepr

* fix: navtabs anim not working in app

* fix: worlds.vue improvements + browse page fixes

* feat: optimise queries + adapter fns

* fix: lint

* fix: lint

* feat: shared modrinth-content-management crate (#6469)

* feat: disable warnings setting

* feat: add instances shortcuts (#6329)

* Add modrinth://launch deep link to start a profile

Support external profile launching via modrinth://launch/{profile_path} for integrations such as Stream Deck.

* Change route to /launch/profile/{id} for future extensibility

* fix: ensure profile path is url decoded

* fix: URL-decode profile path from deep link

* fix: use urlencoding crate for URL decoding

* feat: implement app instance shortcuts

* feat: change windows shortcut creation to use windows api instead

* feat: implement creating a shortcut launching world/server

* format

* fmt

* fix multiline inline tables

* pnpm prepr

* feat: move create shortcut to last item

* refactor: split up shortcuts.rs for individual platforms

* refactor: turn profile launch url into url type

* use string literal and add safety comment

* pt2

* refactor: rename anything that's profile into instance

* update mac shortcut

---------

Co-authored-by: DJCheesusReal <134006619+DJCheesusReal@users.noreply.github.com>

---------

Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com>
Co-authored-by: DJCheesusReal <134006619+DJCheesusReal@users.noreply.github.com>

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

@@ -300,8 +300,6 @@ watch(
 watch(
 	() => props.links,
 	async () => {
-		sliderReady.value = false
-		transitionsEnabled.value = false
 		await nextTick()
 		updateActiveTab()
 	},

packages/ui/src/components/modal/ShareModal.vue

@@ -148,122 +148,135 @@ defineExpose({
 
 <template>
 	<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
-		<div class="flex flex-col flex-wrap items-center gap-2">
-			<div v-if="link" class="group relative mx-auto">
-				<div ref="qrCode">
-					<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
-				</div>
-				<ButtonStyled circular type="transparent">
-					<button
-						v-tooltip="'Copy QR code'"
-						class="absolute top-0 right-0 m-2"
-						aria-label="Copy QR code"
-						@click="copyImage"
-					>
-						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					</button>
-				</ButtonStyled>
-			</div>
-			<StyledInput
-				v-else
-				v-model="content"
-				multiline
-				resize="vertical"
-				wrapper-class="h-full w-[30rem]"
+		<div class="flex flex-col items-center gap-2">
+			<div
+				:class="['flex items-center justify-center', link ? 'flex-wrap gap-4' : 'flex-col gap-2']"
 			>
-				<template #right>
+				<div v-if="link" class="group relative shrink-0">
+					<div ref="qrCode">
+						<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
+					</div>
 					<ButtonStyled circular type="transparent">
 						<button
-							v-tooltip="'Copy Text'"
-							type="button"
-							aria-label="Copy Text"
+							v-tooltip="'Copy QR code'"
 							class="absolute top-0 right-0 m-2"
-							@click="copyText"
+							aria-label="Copy QR code"
+							@click="copyImage"
 						>
 							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 						</button>
 					</ButtonStyled>
-				</template>
-			</StyledInput>
-			<div class="flex flex-grow flex-col justify-center gap-2">
-				<button
-					v-if="link"
-					v-tooltip="'Copy Link'"
-					type="button"
-					aria-label="Copy Link"
-					class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-xl border-none bg-button-bg px-3 pr-1.5 text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
-					@click="copyText"
+				</div>
+				<StyledInput
+					v-else
+					v-model="content"
+					multiline
+					resize="vertical"
+					wrapper-class="h-full w-[30rem]"
 				>
-					<span class="cursor-pointer truncate text-left font-semibold text-primary">
-						{{ url }}
-					</span>
-					<div class="grid h-10 w-10 place-content-center">
-						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					</div>
-				</button>
-				<ButtonStyled v-if="link">
-					<a :href="url" target="_blank" rel="noopener noreferrer" aria-label="Open in new tab">
-						Open in new tab
-						<ExternalIcon aria-hidden="true" />
-					</a>
-				</ButtonStyled>
-				<div v-if="socialButtons" class="flex flex-row gap-1">
-					<ButtonStyled v-if="canShare" circular>
-						<button v-tooltip="'Share'" aria-label="Share" @click="share">
-							<ShareIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular>
+					<template #right>
+						<ButtonStyled circular type="transparent">
+							<button
+								v-tooltip="'Copy Text'"
+								type="button"
+								aria-label="Copy Text"
+								class="absolute top-0 right-0 m-2"
+								@click="copyText"
+							>
+								<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+					</template>
+				</StyledInput>
+				<div
+					v-if="link || socialButtons"
+					:class="['flex flex-col justify-center gap-2', link ? 'w-64 max-w-full' : 'flex-grow']"
+				>
+					<button
+						v-if="link"
+						v-tooltip="'Copy Link'"
+						type="button"
+						aria-label="Copy Link"
+						class="flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-xl border-none bg-button-bg px-3 pr-1.5 text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
+						@click="copyText"
+					>
+						<span class="min-w-0 cursor-pointer truncate text-left font-semibold text-primary">
+							{{ url }}
+						</span>
+						<div class="grid h-10 w-10 place-content-center">
+							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+						</div>
+					</button>
+					<ButtonStyled v-if="link">
 						<a
-							v-tooltip="'Send as an email'"
-							:href="sendEmail"
-							:target="targetParameter"
-							aria-label="Send as an email"
-						>
-							<MailIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-if="link"
-							v-tooltip="'Open link in browser'"
-							:target="targetParameter"
 							:href="url"
-							aria-label="Open link in browser"
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label="Open in new tab"
+							class="w-full"
 						>
-							<GlobeIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Toot about it'"
-							:target="targetParameter"
-							:href="sendToot"
-							aria-label="Toot about it"
-						>
-							<MastodonIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Tweet about it'"
-							:target="targetParameter"
-							:href="sendTweet"
-							aria-label="Tweet about it"
-						>
-							<TwitterIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<a
-							v-tooltip="'Share on Reddit'"
-							:target="targetParameter"
-							:href="postOnReddit"
-							aria-label="Share on Reddit"
-						>
-							<RedditIcon aria-hidden="true" />
+							Open in new tab
+							<ExternalIcon aria-hidden="true" />
 						</a>
 					</ButtonStyled>
+					<div v-if="socialButtons" class="flex flex-row gap-1">
+						<ButtonStyled v-if="canShare" circular>
+							<button v-tooltip="'Share'" aria-label="Share" @click="share">
+								<ShareIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Send as an email'"
+								:href="sendEmail"
+								:target="targetParameter"
+								aria-label="Send as an email"
+							>
+								<MailIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-if="link"
+								v-tooltip="'Open link in browser'"
+								:target="targetParameter"
+								:href="url"
+								aria-label="Open link in browser"
+							>
+								<GlobeIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Toot about it'"
+								:target="targetParameter"
+								:href="sendToot"
+								aria-label="Toot about it"
+							>
+								<MastodonIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Tweet about it'"
+								:target="targetParameter"
+								:href="sendTweet"
+								aria-label="Tweet about it"
+							>
+								<TwitterIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Share on Reddit'"
+								:target="targetParameter"
+								:href="postOnReddit"
+								aria-label="Share on Reddit"
+							>
+								<RedditIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+					</div>
 				</div>
 			</div>
 		</div>

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

@@ -25,6 +25,10 @@
 					:status-text="item.toast.statusText"
 					:progress="item.toast.progress"
 					:waiting="item.toast.waiting"
+					:show-progress="item.toast.showProgress"
+					:progress-type="item.toast.progressType"
+					:progress-current="item.toast.progressCurrent"
+					:progress-total="item.toast.progressTotal"
 					@accept="handleToastAction(item, item.toast.onAccept)"
 					@decline="handleToastAction(item, item.toast.onDecline)"
 					@dismiss="handleToastAction(item, item.toast.onDismiss)"
@@ -33,17 +37,25 @@
 					@open-instance="handleToastAction(item, item.toast.onOpenInstance)"
 				/>
 				<div v-else-if="isDownloadNotification(item)" class="flex flex-col gap-4">
-					<NotificationToast
-						v-for="progressItem in downloadToastItems(item)"
-						:key="progressItem.id"
-						type="instance-download"
-						:entity-name="progressItem.title || item.title"
-						:entity-icon-url="progressItem.iconUrl ?? item.iconUrl ?? MinecraftServerIcon"
-						:status-text="downloadStatusText(progressItem)"
-						:progress="progressItem.progress"
-						:waiting="progressItem.waiting"
-						@dismiss="dismiss(item.id)"
-					/>
+					<div v-for="progressItem in downloadToastItems(item)" :key="progressItem.id">
+						<NotificationToast
+							type="instance-download"
+							:entity-name="progressItem.title || item.title"
+							:entity-icon-url="progressItem.iconUrl ?? item.iconUrl ?? MinecraftServerIcon"
+							:status-text="progressItem.text"
+							:progress="progressItem.progress"
+							:waiting="progressItem.waiting"
+							:show-progress="progressItem.showProgress"
+							:wrap-text="progressItem.wrapText"
+							:progress-type="progressItem.progressType"
+							:progress-current="progressItem.progressCurrent"
+							:progress-total="progressItem.progressTotal"
+							:action-label="progressItem.buttons?.[0]?.label"
+							:action-icon="progressItem.buttons?.[0]?.icon"
+							@dismiss="handleProgressItemDismiss(item, progressItem)"
+							@action="handleProgressItemAction(progressItem)"
+						/>
+					</div>
 				</div>
 				<div
 					v-else
@@ -203,12 +215,39 @@ function downloadToastItems(item: PopupNotification): PopupNotificationProgressI
 			iconUrl: item.iconUrl,
 			progress: item.progress ?? 0,
 			waiting: item.waiting ?? false,
+			showProgress: true,
+			progressType: 'percentage',
 		},
 	]
 }
 
-function downloadStatusText(progressItem: PopupNotificationProgressItem) {
-	return progressItem.text?.replace(/^\d+%\s*/, '') ?? ''
+async function handleProgressItemDismiss(
+	item: PopupNotification,
+	progressItem: PopupNotificationProgressItem,
+) {
+	if (progressItem.onDismiss) {
+		await progressItem.onDismiss()
+		return
+	}
+
+	dismiss(item.id)
+}
+
+async function handleProgressItemAction(progressItem: PopupNotificationProgressItem) {
+	const button = progressItem.buttons?.[0]
+	if (button) {
+		await handleProgressItemButtonClick(progressItem, button)
+	}
+}
+
+async function handleProgressItemButtonClick(
+	progressItem: PopupNotificationProgressItem,
+	btn: PopupNotificationButton,
+) {
+	await btn.action()
+	if (!btn.keepOpen) {
+		await progressItem.onDismiss?.()
+	}
 }
 
 function handleButtonClick(id: string | number, btn: PopupNotificationButton) {

packages/ui/src/components/notifications/NotificationToast.vue

@@ -83,24 +83,15 @@
 				:tint-by="entityLabel"
 				class="!rounded-xl border border-solid border-surface-5"
 			/>
-			<div class="flex min-w-0 flex-1 flex-col" :class="{ 'gap-2.5': type === 'instance-ready' }">
-				<div class="flex min-w-0 flex-1 items-start gap-1">
-					<div class="flex min-w-0 flex-1 flex-col gap-[3px] text-base leading-5">
-						<p
-							ref="titleRef"
-							v-tooltip="truncatedTooltip(titleRef, entityLabel)"
-							class="m-0 min-w-0 truncate text-lg font-semibold leading-6 text-contrast"
-						>
-							{{ entityLabel }}
-						</p>
-						<p
-							ref="statusRef"
-							v-tooltip="truncatedTooltip(statusRef, statusLine)"
-							class="m-0 min-w-0 truncate font-normal leading-tight text-contrast/85"
-						>
-							{{ statusLine }}
-						</p>
-					</div>
+			<div class="notification-toast-main-grid min-w-0 flex-1 text-base leading-5">
+				<p
+					ref="titleRef"
+					v-tooltip="truncatedTooltip(titleRef, entityLabel)"
+					class="col-start-1 col-end-3 row-start-1 m-0 min-w-0 truncate pr-9 text-lg font-semibold leading-6 text-contrast"
+				>
+					{{ entityLabel }}
+				</p>
+				<div class="col-start-2 row-start-1 justify-self-end">
 					<ButtonStyled size="small" type="transparent" circular>
 						<button
 							type="button"
@@ -112,12 +103,49 @@
 						</button>
 					</ButtonStyled>
 				</div>
-				<div v-if="type === 'instance-ready'" class="flex items-center gap-2">
+				<div
+					class="col-start-1 col-end-3 row-start-2 flex min-w-0 items-center justify-between gap-0.5"
+				>
+					<p
+						ref="statusRef"
+						v-tooltip="truncatedTooltip(statusRef, statusLine)"
+						class="m-0 min-w-0 flex-1 font-normal leading-tight text-contrast/85"
+						:class="wrapText ? 'whitespace-normal break-words' : 'truncate'"
+					>
+						{{ statusLine }}
+					</p>
+					<div
+						v-if="type === 'instance-download' && progressLabel"
+						class="notification-inline-progress-label flex-none text-xs"
+					>
+						{{ progressLabel }}
+					</div>
+				</div>
+				<div
+					v-if="type === 'instance-ready'"
+					class="col-start-1 col-end-3 row-start-3 mt-2 flex min-w-0 items-center justify-between gap-2"
+				>
+					<div class="flex min-w-0 items-center gap-2">
+						<ButtonStyled color="brand">
+							<button @click="$emit('launch')">Launch game</button>
+						</ButtonStyled>
+						<ButtonStyled type="outlined">
+							<button @click="$emit('open-instance')">Instance</button>
+						</ButtonStyled>
+					</div>
+					<div v-if="progressLabel" class="notification-inline-progress-label flex-none">
+						{{ progressLabel }}
+					</div>
+				</div>
+				<div
+					v-if="type === 'instance-download' && actionLabel"
+					class="col-start-1 row-start-3 mt-2 flex min-w-0 items-center gap-2"
+				>
 					<ButtonStyled color="brand">
-						<button @click="$emit('launch')">Launch game</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined">
-						<button @click="$emit('open-instance')">Instance</button>
+						<button @click="$emit('action')">
+							<component :is="actionIcon" v-if="actionIcon" />
+							{{ actionLabel }}
+						</button>
 					</ButtonStyled>
 				</div>
 			</div>
@@ -144,8 +172,10 @@
 
 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 
+import { useFormatBytes, useFormatNumber } from '../../composables'
+import type { PopupNotificationProgressType } from '../../providers'
 import { truncatedTooltip } from '../../utils/truncate'
 import Avatar from '../base/Avatar.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
@@ -167,6 +197,13 @@ const props = withDefaults(
 		statusText?: string
 		progress?: number
 		waiting?: boolean
+		showProgress?: boolean
+		wrapText?: boolean
+		progressType?: PopupNotificationProgressType
+		progressCurrent?: number
+		progressTotal?: number
+		actionLabel?: string
+		actionIcon?: Component
 	}>(),
 	{
 		actorName: null,
@@ -174,6 +211,9 @@ const props = withDefaults(
 		entityName: '',
 		entityIconUrl: null,
 		waiting: false,
+		showProgress: true,
+		wrapText: false,
+		progressType: 'percentage',
 	},
 )
 
@@ -181,6 +221,7 @@ defineEmits<{
 	accept: []
 	decline: []
 	dismiss: []
+	action: []
 	launch: []
 	'open-actor': []
 	'open-instance': []
@@ -198,6 +239,8 @@ const entityLabel = computed(() => props.entityName || '')
 const progressValue = computed(() => Math.max(0, Math.min(1, props.progress ?? 0)))
 const progressPercent = computed(() => Math.round(progressValue.value * 100))
 const isWaitingProgress = computed(() => props.type === 'instance-download' && props.waiting)
+const formatBytes = useFormatBytes()
+const formatNumber = useFormatNumber()
 
 const inviteActionText = computed(() => {
 	if (props.type === 'server-invite') {
@@ -216,20 +259,56 @@ const resolvedStatusText = computed(() => {
 })
 
 const statusLine = computed(() => {
-	if (props.type !== 'instance-download' || props.waiting) {
-		return resolvedStatusText.value
-	}
-
-	const status = resolvedStatusText.value.trim()
-	return status ? `${status} ${progressPercent.value}%` : `${progressPercent.value}%`
+	return resolvedStatusText.value
 })
 
 const showsBottomProgress = computed(
 	() =>
-		props.type === 'instance-download' ||
+		(props.type === 'instance-download' && props.showProgress) ||
 		(props.type === 'instance-ready' && props.progress != null),
 )
 
+const progressCurrent = computed(() => {
+	if (props.progressCurrent != null) {
+		return Math.max(0, props.progressCurrent)
+	}
+	if (props.progressTotal != null) {
+		return Math.round(progressValue.value * props.progressTotal)
+	}
+	return progressPercent.value
+})
+
+const progressTotal = computed(() => Math.max(0, props.progressTotal ?? 0))
+
+function formatProgressLabel(
+	type: PopupNotificationProgressType | undefined,
+	current: number,
+	total: number,
+): string {
+	if (type === 'bytes' && total > 0) {
+		return `${formatBytes(Math.min(current, total), 1)} / ${formatBytes(total, 1)}`
+	}
+
+	if (type === 'count' && total > 0) {
+		return `${formatNumber(Math.min(current, total))} / ${formatNumber(total)}`
+	}
+
+	return `${progressPercent.value}%`
+}
+
+const progressLabel = computed(() => {
+	if (!showsBottomProgress.value || isWaitingProgress.value) {
+		return ''
+	}
+
+	const primary = formatProgressLabel(
+		props.progressType,
+		progressCurrent.value,
+		progressTotal.value,
+	)
+	return primary
+})
+
 const titleRef = ref<HTMLElement | null>(null)
 const statusRef = ref<HTMLElement | null>(null)
 </script>
@@ -239,6 +318,22 @@ const statusRef = ref<HTMLElement | null>(null)
 	width: min(420px, calc(100vw - 1.5rem));
 }
 
+.notification-toast-main-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	column-gap: 0.25rem;
+	row-gap: 0.1875rem;
+}
+
+.notification-inline-progress-label {
+	flex: 0 0 auto;
+	color: var(--color-secondary);
+	font-variant-numeric: tabular-nums;
+	pointer-events: none;
+	text-align: right;
+	white-space: nowrap;
+}
+
 .notification-toast-dismiss {
 	--_height: 1.25rem;
 	--_width: 1.25rem;