feat: implement improved flow for server panel edit installation (#5711)

* feat: implement improved flow for server panel edit installation * feat: installation form finalized * feat: error state for InstallingBanner * feat: action button refactor + save banner text fix * fix: lint * fix: content card alignment * feat: better copy * fix: lint * fix: hide shift click + fix NeoForge chip * fix: lint
2026-04-01 19:53:19 +02:00
parent c52abece44
commit fa4711ff7b
19 changed files with 785 additions and 168 deletions
--- a/packages/ui/src/stories/servers/InstallingBanner.stories.ts
+++ b/packages/ui/src/stories/servers/InstallingBanner.stories.ts
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import InstallingBanner from '../../components/servers/InstallingBanner.vue'
+
+const meta = {
+	title: 'Servers/InstallingBanner',
+	component: InstallingBanner,
+} satisfies Meta<typeof InstallingBanner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	name: 'Default (no progress)',
+}
+
+export const WithProgress: Story = {
+	args: {
+		progress: {
+			phase: 'InstallingLoader',
+			percent: 45,
+		},
+	},
+}
+
+export const InstallingModpack: Story = {
+	args: {
+		progress: {
+			phase: 'InstallingPack',
+			percent: 72,
+		},
+	},
+}
+
+export const InstallingAddons: Story = {
+	args: {
+		progress: {
+			phase: 'Addons',
+			percent: 90,
+		},
+	},
+}
+
+export const ErrorInvalidVersion: Story = {
+	name: 'Error: Invalid Version',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'the specified version may be incorrect',
+		},
+	},
+}
+
+export const ErrorUnsupportedVersion: Story = {
+	name: 'Error: Unsupported Version',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'this version is not yet supported',
+		},
+	},
+}
+
+export const ErrorInternal: Story = {
+	name: 'Error: Internal',
+	args: {
+		contentError: {
+			step: 'modloader',
+			description: 'internal error',
+		},
+	},
+}
+
+export const ErrorModpackInstall: Story = {
+	name: 'Error: Modpack Install Failed',
+	args: {
+		contentError: {
+			step: 'modpack',
+			description: 'Failed to install modpack',
+		},
+	},
+}
+
+export const ErrorModpackNoFile: Story = {
+	name: 'Error: Modpack No Primary File',
+	args: {
+		contentError: {
+			step: 'modpack',
+			description: 'Modpack version has no primary file',
+		},
+	},
+}
+
+export const AllStates: Story = {
+	render: () => ({
+		components: { InstallingBanner },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<InstallingBanner />
+				<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 45 }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'the specified version may be incorrect' }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'this version is not yet supported' }" />
+				<InstallingBanner :content-error="{ step: 'modloader', description: 'internal error' }" />
+				<InstallingBanner :content-error="{ step: 'modpack', description: 'Failed to install modpack' }" />
+			</div>
+		`,
+	}),
+}