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/stories/base/InlineEditableText.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import InlineEditableText from '../../components/base/InlineEditableText.vue'
+
+const meta = {
+	title: 'Base/InlineEditableText',
+	component: InlineEditableText,
+	render: (args) => ({
+		components: { InlineEditableText },
+		setup() {
+			const value = ref('Editable text')
+			return { args, value }
+		},
+		template: '<InlineEditableText v-model="value" v-bind="args" />',
+	}),
+	args: {
+		editLabel: 'Edit text',
+	},
+} satisfies Meta<typeof InlineEditableText>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const IconActivated: Story = {
+	args: {
+		activationMode: 'icon',
+		iconTextClass: '!text-brand',
+	},
+}
+
+export const CustomClasses: Story = {
+	args: {
+		buttonClass: '!rounded-lg !bg-surface-3 !px-2',
+		inputClass: '!text-brand',
+	},
+}
+
+export const ConstrainedWidth: Story = {
+	args: {
+		maxWidth: '12rem',
+	},
+	render: (args) => ({
+		components: { InlineEditableText },
+		setup() {
+			const value = ref('A long value that truncates within its available width')
+			return { args, value }
+		},
+		template: '<InlineEditableText v-model="value" v-bind="args" />',
+	}),
+}
+
+export const Placeholder: Story = {
+	args: {
+		placeholder: 'Click to add a value',
+	},
+	render: (args) => ({
+		components: { InlineEditableText },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: '<InlineEditableText v-model="value" v-bind="args" />',
+	}),
+}
+
+export const DefaultValue: Story = {
+	args: {
+		defaultValue: 'Default value',
+	},
+	render: (args) => ({
+		components: { InlineEditableText },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: '<InlineEditableText v-model="value" v-bind="args" />',
+	}),
+}
+
+export const RejectedValue: Story = {
+	args: {
+		validate: (value: string) => value.toLowerCase() !== 'reserved',
+	},
+	render: (args) => ({
+		components: { InlineEditableText },
+		setup() {
+			const value = ref('Try changing this to "reserved"')
+			return { args, value }
+		},
+		template: '<InlineEditableText v-model="value" v-bind="args" />',
+	}),
+}

packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts

@@ -19,6 +19,7 @@ export const Default: StoryObj = {
 
 			const showSuccess = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Install complete',
 					text: 'Complex Gaming [Cobblemon] is installed and ready to play.',
 					type: 'success',
@@ -38,6 +39,7 @@ export const Default: StoryObj = {
 
 			const showError = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Download failed',
 					text: 'Failed to download the modpack. Please try again.',
 					type: 'error',
@@ -53,6 +55,7 @@ export const Default: StoryObj = {
 
 			const showWarning = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Update available',
 					text: "Modrinth App v2.1.0 is available now! Since you're on a metered network, we didn't automatically download it.",
 					type: 'warning',
@@ -73,6 +76,7 @@ export const Default: StoryObj = {
 
 			const showInfo = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Download complete',
 					text: 'Modrinth App v2.1.0 has finished downloading. Reload to update now.',
 					type: 'info',
@@ -92,6 +96,7 @@ export const Default: StoryObj = {
 
 			const showNoButtons = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Heads up',
 					text: 'This notification has no action buttons and will auto-close in 30 seconds.',
 					type: 'info',
@@ -100,6 +105,7 @@ export const Default: StoryObj = {
 
 			const showPermanent = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Permanent notification',
 					text: 'This notification will stay open until manually dismissed.',
 					type: 'warning',
@@ -109,6 +115,7 @@ export const Default: StoryObj = {
 
 			const showBlocking = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Your privacy and how ads support Modrinth',
 					text: 'Ads make Modrinth possible and fund creator rewards. Our partners may store unique identifiers to personalize ads and measure performance.',
 					type: 'info',
@@ -139,6 +146,7 @@ export const Default: StoryObj = {
 
 			const showWaitingProgress = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Installing modpack...',
 					text: 'example-pack-1.0.0.mrpack',
 					type: 'info',
@@ -149,6 +157,7 @@ export const Default: StoryObj = {
 
 			const showDeterminateProgress = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Downloading update',
 					text: 'Downloading files...',
 					type: 'success',
@@ -159,6 +168,7 @@ export const Default: StoryObj = {
 
 			const showGroupedDownloads = () => {
 				popupManager.addPopupNotification({
+					contentType: 'standard',
 					title: 'Downloads',
 					type: 'download',
 					autoCloseMs: null,

packages/ui/src/stories/servers/CreationFlowModal.stories.ts

@@ -2,7 +2,10 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import { Button } from '../../components/base/buttons'
-import type { CreationFlowContextValue } from '../../components/flows/creation-flow-modal/creation-flow-context'
+import type {
+	CreationFlowContextValue,
+	ProjectInstallCreateData,
+} from '../../components/flows/creation-flow-modal/creation-flow-context'
 import CreationFlowModal from '../../components/flows/creation-flow-modal/index.vue'
 
 const meta = {
@@ -102,7 +105,50 @@ export const Instance: Story = {
 			const onCreate = (config: CreationFlowContextValue) => {
 				lastEvent.value = `create emitted — loader: ${config.selectedLoader.value}, version: ${config.selectedGameVersion.value}`
 			}
-			return { modalRef, openModal, lastEvent, onCreate }
+			const prepareProjectInstall = async (projectId: string, projectType: string) => {
+				lastEvent.value = `project selected — ${projectId}`
+				if (projectType === 'modpack') return null
+				return {
+					projectId,
+					title: 'Fabric API',
+					iconUrl: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+					link: '/project/fabric-api',
+					compatibleLoaders: ['fabric'],
+					gameVersions: ['1.21.5', '1.21.4'],
+					releaseGameVersions: new Set(['1.21.5', '1.21.4']),
+				}
+			}
+			const createProjectInstall = async (data: ProjectInstallCreateData) => {
+				lastEvent.value = `project instance created — ${data.name}`
+			}
+			const searchProjects = async () => ({
+				hits: [
+					{
+						project_id: 'fabric-api',
+						project_type: 'mod',
+						title: 'Fabric API',
+						icon_url: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
+					},
+					{
+						project_id: 'adrenaline',
+						project_type: 'modpack',
+						title: 'Adrenaline',
+						icon_url: 'https://cdn.modrinth.com/data/RPYx1T0D/icon.png',
+					},
+				],
+				offset: 0,
+				limit: 10,
+				total_hits: 2,
+			})
+			return {
+				modalRef,
+				openModal,
+				lastEvent,
+				onCreate,
+				prepareProjectInstall,
+				createProjectInstall,
+				searchProjects,
+			}
 		},
 		template: /*html*/ `
 			<div class="flex flex-col gap-4 items-center">
@@ -112,6 +158,9 @@ export const Instance: Story = {
 					ref="modalRef"
 					type="instance"
 					:show-snapshot-toggle="true"
+					:search-projects="searchProjects"
+					:prepare-project-install="prepareProjectInstall"
+					:create-project-install="createProjectInstall"
 					@hide="() => {}"
 					@browse-modpacks="() => console.log('browse-modpacks emitted')"
 					@create="onCreate"

packages/ui/src/stories/servers/ServerListEmpty.stories.ts

@@ -8,9 +8,34 @@ const meta = {
 	parameters: {
 		layout: 'centered',
 	},
+	args: {
+		onClickNewServer: () => undefined,
+		onClickSignIn: () => undefined,
+	},
 } satisfies Meta<typeof ServerListEmpty>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const SignedOut: Story = {
+	args: {
+		loggedIn: false,
+	},
+}
+
+export const LoggedIn: Story = {
+	args: {
+		loggedIn: true,
+	},
+}
+
+export const Narrow: Story = {
+	args: {
+		loggedIn: false,
+	},
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobile2',
+		},
+	},
+}