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>

packages/ui/src/components/skin/SkinButton.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
 import { ref, watch } from 'vue'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	selectNamedSkin: { id: 'skins.select-named', defaultMessage: 'Select {name}' },
+	selectSkin: { id: 'skins.select', defaultMessage: 'Select skin' },
+})
+
 const emit = defineEmits<{
 	(e: 'select'): void
 	(e: 'edit', event: MouseEvent): void
@@ -63,7 +72,11 @@ watch(
 
 		<button
 			class="absolute inset-0 z-10 cursor-pointer border-none bg-transparent p-0 focus-visible:outline-none"
-			:aria-label="tooltip ? `Select ${tooltip}` : 'Select skin'"
+			:aria-label="
+				tooltip
+					? formatMessage(messages.selectNamedSkin, { name: tooltip })
+					: formatMessage(messages.selectSkin)
+			"
 			:aria-pressed="selected"
 			:disabled="disabled"
 			@click="emit('select')"
@@ -74,6 +87,14 @@ watch(
 			class="pointer-events-none absolute right-3 top-3 z-20 size-3 rounded-full border-2 border-solid border-surface-3 bg-green"
 		></span>
 
+		<span
+			v-if="selected"
+			class="pointer-events-none absolute right-3 top-3 z-20 flex size-6 items-center justify-center rounded-full"
+		>
+			<span class="absolute inset-0 rounded-full bg-contrast"></span>
+			<CheckIcon class="relative size-4 invert [stroke-width:3]" />
+		</span>
+
 		<div v-if="!imagesLoaded.forward" class="skeleton-loader h-full w-full">
 			<div class="skeleton absolute inset-0 aspect-[5/7]"></div>
 		</div>
@@ -109,22 +130,23 @@ watch(
 }
 
 .skeleton {
-	background: linear-gradient(
-		90deg,
-		var(--color-bg) 25%,
-		var(--color-raised-bg) 50%,
-		var(--color-bg) 75%
-	);
-	background-size: 200% 100%;
-	animation: wave 1500ms infinite linear;
+	background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
+	animation: skeleton-pulse 2700ms ease-in-out infinite;
 }
 
-@keyframes wave {
-	0% {
-		background-position: -200% 0;
-	}
+@keyframes skeleton-pulse {
+	0%,
 	100% {
-		background-position: 200% 0;
+		filter: brightness(0.95);
+	}
+	50% {
+		filter: brightness(1.15);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.skeleton {
+		animation: none;
 	}
 }
 
@@ -168,13 +190,10 @@ watch(
 .skin-button.skin-button--selected:hover,
 .skin-button.skin-button--selected:focus-within,
 .skin-button.skin-button--selected.skin-button--with-actions:hover,
-.skin-button.skin-button--selected.skin-button--with-actions:focus-within,
-.skin-button.skin-button--active:hover,
-.skin-button.skin-button--active:focus-within,
-.skin-button.skin-button--active.skin-button--with-actions:hover,
-.skin-button.skin-button--active.skin-button--with-actions:focus-within {
-	border-color: var(--color-brand);
-	background: var(--color-brand-highlight);
+.skin-button.skin-button--selected.skin-button--with-actions:focus-within {
+	border-color: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
+	background: var(--surface-3);
+	filter: brightness(1.1);
 }
 
 .skin-button--disabled {