feat: app onboarding and library (#6923)

* refactor: remove unused legacy onboarded flag

* sqlx prepare

* feat: add onboarding checklist app db and add vue provider

* feat: add welcome page

* feat: add onboarding checklist component

* feat: move checklist visibility source of truth in app db

* feat: split up import modpack button

* feat-small: style tweak

* feat: remove discover section from homepage and add library

* refactor: move welcome screen to component

* refactor: move grid display into /library

* refactor: rename existing components

* refactor: split up the current library page files

* feat: add create group modal

* feat: add instance group definitions

* feat: update accordian for instance groups

* feat: add delete group

* feat: implement rename instance groups

* refactor: move instance group api out

* feat: add context menu for groups

* feat: style instance items in library

* feat: add selected instance item state

* feat: implement action bar for selection

* feat: drag and drop to move between groups

* feat: show ungrouped with header

* feat: improve edit group name

* small fix

* small style fixes

* feat: improve selection behaviour

* fix: dont toggle group when context menu open

* feat: drag and drop multiple selected

* small

* feat: add remove from group in action bar

* feat: add delay on icon hiding in inline input

* feat: improve icon hiding delay

* fix: bad routes.js

* feat: implement sort and filter options

* refactor: dont prefix filenames

* feat: change open/collapse group target

* feat: improve ungrouped behaviour

* feat: add shift to select multiple instances

* fix: icon disappear transition

* feat: add esc while dragging to cancel

* feat: update sorting and moved label

* feat: update context menu

* fix: multiple context menus can be opened

* refactor: instance groups to be identified by ID instead of name, names become display data

* feat: creating new group always adds instance

* feat: create group button, fix instance selection, and increase group name max length

* feat: strokes

* fix: show getting started checklist in all sidebar

* feat: set size on microsoft login screen

* fix: use ButtonStyled in Chips component

* feat: creating groups with selected instances and fix some moving selection and duplication bugs

* pnpm prepr

* feat: add tooltip for instance already in group

* feat: create instance with content in creation flow modal

- search modpack becomes search projects
- creation flow modal context receives prepareProjectInstall and createProjectInstall callbacks, from content-install.ts (shared with ContentInstallModal)

* feat: update instance card styles

* refactor: separate out instance card content

* update styles

* refactor: instance card

* fix: width of instance

* feat: update empty state

* feat: update sort and grouping dropdowns

* feat: better context menu options

* feat: add group action buttons

* feat: add/remove favourites group

* remove manual sort

* feat: improve the "New group" jank

* feat: add group by instance type and change group sorting

* feat: welcome screen styles match figma

* feat: not signed in skins demo

* feat: new hosting empty state

* feat: new instance card style

* feat: add tooltip and spice up animation more

* feat: improve the transitions for groups after dropping many instances

* feat: set instance group membership for bulk moving

* feat: remove fade out

* fix: allow dragging from buttons inside instance card

* fix: library page load in behaviour

* small fix

* feat: add group ordering and reordering

* feat: add drag to reorder groups

* fix: switching page not clearing selected instances

* style fixes

* style fix

* fix spacing

* feat: jump in changes

* feat: add styled newly created instances

* feat: improve jump in cards styles

* fix: welcome screen style

* fix: empty state styles

* feat: max 5 jump in items

* feat: max new instances to 3

* fix: search icon

* feat: clear selection after move

* feat: skins list use check icon styles

* feat: list will be deleted instances and default sort last played

* fix: stroke

* remove: no more group settings in instance general settings

* fix: resolving modpack server install

* feat: icon editor

* feat: add three hue shifted variants

* fix: surprise me doesnt pick symbol

* feat: add customize icon to create instance modal

* feat: skins loading state style

* fix: welcome logo

* fix: copy

* fix: left over usage of ButtonStyled from main's refactor

* feat: some leaked merge stuff

* feat: server empty state styles

* remove: instance helper text

* remove: auto link in set up stage

* feat: auto focus on search when modal open

* fix: delete instance modal style

* remove: modpack meta repeating

* fix: icon

* fix: font weight

* fix: dropdown filter preview heights

* pnpm prepr

* fix: sign into modrinth flashing change in position

* feat: add avatar transparent corner gets padding

* feat: drag and hold over group opens group

* feat: add random icon for custom instance

* feat: update loading icon

* polish: empty state for search

* polish: jump in cards

* fix: avatar could skip checking for image if tauri loads it first

* feat: add icon customize and randomizer in content install modal for add to new instances

* fix: avatar cannot read image pixels due to cors

* refactor: popup notifications toast type for instance sharing notifications

* feat: apply random icons modal and add popup notification for it

* polish: style

* fix: set_webview_visible

* QA

* qa

* feat: add inner white 15 opacity stroke around avatar

* add to catalog

* pnpm prepr

* fix: app event import

* feat: add new icons and backgrounds for icon editor

* feat: recents list generate from randomized icons and save icon in editor + icon editor modal fixes

* qa

* refactor: recipe -> config

* fix: event bus

* polish

* feat: add safe guard against randomizing empty icons

* feat: navigate to instance after creation

* fix: icon file names

* i18n on welcome screen

* i18n pass on PR

* fix: inconsistent max group name length

* refactor: use sqlx macro

* feat: add instance icon background selection drag

* feat: update catalog order

* fix: remove gradient for welcome screen

* remove: frog

* fix: min width

* feat: update corner size

* fix: context menu styles

* prepr

* fix: instance name trimming

* reorder

* fix: instance card loading state stayed until hovering

* feat: add icon randomizer blacklist

* blog

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -4,30 +4,32 @@ import {
 	FolderOpenIcon,
 	MoreVerticalIcon,
 	PlayIcon,
+	SparklesIcon,
 	SpinnerIcon,
 	StopCircleIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
+	BulletDivider,
 	Button,
 	commonMessages,
+	defineMessages,
 	injectNotificationManager,
 	SmartClickable,
+	TagItem,
 	TeleportOverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Dayjs } from 'dayjs'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useAppEvent } from '@/composables/use-app-event'
 import { trackEvent } from '@/helpers/analytics'
-import { get_project } from '@/helpers/cache'
-import { kill, run } from '@/helpers/instance'
+import { getInstanceIconUrl, kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
 import { showInstanceInFolder } from '@/helpers/utils'
@@ -50,18 +52,35 @@ const emit = defineEmits<{
 const props = defineProps<{
 	instance: GameInstance
 	last_played: Dayjs
+	newlyAdded?: boolean
 }>()
 
-const loadingModpack = ref(!!props.instance.link)
-
-const modpack = ref()
-
-if (props.instance.link) {
-	nextTick().then(async () => {
-		modpack.value = await get_project(props.instance.link?.project_id, 'must_revalidate')
-		loadingModpack.value = false
-	})
-}
+const messages = defineMessages({
+	newInstance: {
+		id: 'app.home.jump-back-in.new-instance',
+		defaultMessage: 'New instance',
+	},
+	neverPlayed: {
+		id: 'app.home.jump-back-in.never-played',
+		defaultMessage: 'Never played',
+	},
+	lockedTooltip: {
+		id: 'app.home.jump-back-in.instance-locked',
+		defaultMessage: 'This instance has been locked',
+	},
+	alreadyOpenTooltip: {
+		id: 'app.home.jump-back-in.instance-open',
+		defaultMessage: 'Instance is already open',
+	},
+	moreOptions: {
+		id: 'app.home.jump-back-in.more-options',
+		defaultMessage: 'More options',
+	},
+	viewInstance: {
+		id: 'app.home.jump-back-in.view-instance',
+		defaultMessage: 'View instance',
+	},
+})
 
 const instanceIcon = computed(() => props.instance.icon_path)
 
@@ -82,8 +101,12 @@ const play = async (event: MouseEvent) => {
 	event?.stopPropagation()
 	if (props.instance.quarantined) return
 	loading.value = true
-	await run(props.instance.id)
-		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
+	const launched = await run(props.instance.id)
+		.then(() => true)
+		.catch((err) => {
+			handleSevereError(err, { instanceId: props.instance.id })
+			return false
+		})
 		.finally(() => {
 			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
@@ -91,7 +114,7 @@ const play = async (event: MouseEvent) => {
 				source: 'InstanceItem',
 			})
 		})
-	emit('play')
+	if (launched) emit('play')
 	loading.value = false
 }
 
@@ -123,7 +146,7 @@ onMounted(() => {
 })
 </script>
 <template>
-	<SmartClickable>
+	<SmartClickable class="[--active-scale:0.99]">
 		<template #clickable>
 			<router-link
 				class="no-click-animation"
@@ -131,56 +154,53 @@ onMounted(() => {
 			/>
 		</template>
 		<div
-			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow rounded-xl smart-clickable:highlight-on-hover"
+			class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 border border-surface-4 rounded-[20px] smart-clickable:highlight-on-hover transition-[filter] ease-out [--hover-brightness:1.1] min-h-20 p-3"
+			:class="newlyAdded ? 'border-dashed bg-surface-2' : 'bg-bg-raised border-solid'"
 		>
 			<Avatar
-				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+				:src="getInstanceIconUrl(instanceIcon)"
 				:tint-by="instance.id"
+				no-shadow
+				class="!rounded-[14px]"
 				size="48px"
 			/>
-			<div class="flex flex-col col-span-2 justify-between h-full">
-				<div class="flex items-center gap-2">
-					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+			<div class="flex flex-col col-span-2 justify-center gap-1 h-full">
+				<div class="flex items-center gap-1.5">
+					<div class="text-contrast truncate text-base font-semibold">
 						{{ instance.name }}
 					</div>
-				</div>
-				<div class="flex items-center gap-2 text-sm text-secondary">
-					<div
-						v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
-						class="w-fit shrink-0"
-						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
+					<TagItem
+						v-if="newlyAdded"
+						class="!border-green !bg-bg-green !px-2 !font-medium !text-green"
 					>
-						<template v-if="last_played">
-							{{
-								formatMessage(commonMessages.playedLabel, {
-									ago: formatRelativeTime(last_played.toISOString?.()),
-								})
-							}}
-						</template>
-						<template v-else> Not played yet </template>
-					</div>
-					•
-					<span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
-						<router-link
-							class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
-							:to="`/project/${modpack.id}`"
-						>
-							<Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
-							<span class="truncate">{{ modpack.title }}</span>
-						</router-link>
-						({{ loader }} {{ instance.game_version }})
-					</span>
-					<span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
-						<SpinnerIcon class="animate-spin shrink-0" />
-						<span class="truncate">Loading modpack...</span>
-					</span>
-					<span v-else class="flex items-center gap-1 truncate text-secondary">
+						<SparklesIcon aria-hidden="true" />
+						{{ formatMessage(messages.newInstance) }}
+					</TagItem>
+				</div>
+				<div class="flex items-center gap-1.5 text-sm text-secondary">
+					<span class="flex items-center gap-1 truncate text-secondary">
 						{{ loader }}
 						{{ instance.game_version }}
 					</span>
+					<BulletDivider class="shrink-0" />
+					<div
+						v-tooltip="!newlyAdded ? formatDateTime(last_played.toDate()) : null"
+						class="w-fit shrink-0"
+						:class="{
+							'cursor-help smart-clickable:allow-pointer-events': !newlyAdded,
+						}"
+					>
+						<template v-if="newlyAdded">
+							{{ formatMessage(messages.neverPlayed) }}
+						</template>
+						<template v-else-if="last_played">
+							{{ formatRelativeTime(last_played.toISOString?.()) }}
+						</template>
+						<template v-else>{{ formatMessage(messages.neverPlayed) }}</template>
+					</div>
 				</div>
 			</div>
-			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+			<div data-no-card-click class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
 				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
 					<StopCircleIcon aria-hidden="true" />
 					{{ formatMessage(commonMessages.stopButton) }}
@@ -189,12 +209,14 @@ onMounted(() => {
 					v-else
 					v-tooltip="
 						instance.quarantined
-							? 'This instance has been locked'
+							? formatMessage(messages.lockedTooltip)
 							: playing
-								? 'Instance is already open'
+								? formatMessage(messages.alreadyOpenTooltip)
 								: null
 					"
 					:disabled="instance.quarantined || playing || loading"
+					type="colored"
+					color="green"
 					@click="play"
 				>
 					<SpinnerIcon v-if="loading" class="animate-spin" />
@@ -203,11 +225,11 @@ onMounted(() => {
 				</Button>
 				<TeleportOverflowMenu
 					type="quiet"
-					label="More options"
+					:label="formatMessage(messages.moreOptions)"
 					:options="[
 						{
 							id: 'open-instance',
-							label: 'View instance',
+							label: formatMessage(messages.viewInstance),
 							shown: !!instance.id,
 							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
 						},
@@ -221,7 +243,7 @@ onMounted(() => {
 					<MoreVerticalIcon aria-hidden="true" />
 					<template #open-instance>
 						<EyeIcon aria-hidden="true" />
-						View instance
+						{{ formatMessage(messages.viewInstance) }}
 					</template>
 					<template #open-folder>
 						<FolderOpenIcon aria-hidden="true" />
@@ -232,3 +254,8 @@ onMounted(() => {
 		</div>
 	</SmartClickable>
 </template>
+<style scoped>
+.clickable-card:has([data-no-card-click]:hover) {
+	--hover-brightness: 1;
+}
+</style>