refactor: align files tab with content tab design (#5621)

* fix: files.vue bugs before styling changes * feat: move files tab to shared layout structure * fix: qa * fix: qa * fix: bugs * fix: lint * fix: admonition cleanup with progress + actions * fix: cleanup * fix: modals * fix: admon title * fix: i18n standard * fix: lint + i18n pass * fix: remove transition * fix: type errors * feat: files tab in app * fix: qa * fix: backup item minmax * fix: use ContentPageHeader for server panel * fix: lint * fix: lint * fix: lint * feat: page leave safety * fix: lint * fix: cargo fmt fix * fix: blank in prod * fix: content card table stuff * Revert "fix: blank in prod" This reverts commit 74758fe185cf85a4a20355857f889cb091b97ace. * fix: import * feat: browse worlds/servers flow * fix: worlds tab parity with content tab * fix: perf bug + shader filter pill copy * feat: singleplayer filter * fix: ordering * fix: breadcrumbs * fix: lint * fix: qa * feat: store server proj id when adding to a non-linked instance * fix: lint * fix: i18n + qa * fix: conflict * qa: already installed modal + placeholders not server-specific * fix: qa * fix: add + edit server modals * fix: qa * fix: security * fix: devin flags * fix: lint * chore: change file to break build cache * fix: admon * fix: import path stuff * feat: qa * fix: fmt fmt idiot --------- Signed-off-by: Calum H. <calum@modrinth.com>
2026-03-26 18:55:15 +00:00
parent 706eb800cb
commit 381ea51cce
170 changed files with 8052 additions and 4571 deletions
--- a/packages/ui/src/stories/base/Admonition.stories.ts
+++ b/packages/ui/src/stories/base/Admonition.stories.ts
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'

 import Admonition from '../../components/base/Admonition.vue'
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ProgressBar from '../../components/base/ProgressBar.vue'

 const meta = {
 	title: 'Base/Admonition',
@@ -45,3 +47,92 @@ export const Success: Story = {
 		body: 'Everything went smoothly.',
 	},
 }
+
+export const Dismissible: Story = {
+	args: {
+		type: 'info',
+		header: 'Dismissible Notice',
+		body: 'This admonition can be dismissed by clicking the X button.',
+		dismissible: true,
+	},
+}
+
+export const WithTopRightActions: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<Admonition type="info" header="Uploading files (2/5)">
+					Uploading server files...
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+				<Admonition type="critical" header="Extraction failed">
+					Something went wrong while extracting the archive.
+					<template #top-right-actions>
+						<ButtonStyled color="red">
+							<button>Retry</button>
+						</ButtonStyled>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="red">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+				<Admonition type="success" header="Extraction complete">
+					All files have been extracted successfully.
+					<template #top-right-actions>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+				</Admonition>
+			</div>
+		`,
+	}),
+}
+
+export const WithProgressBar: Story = {
+	render: () => ({
+		components: { Admonition, ButtonStyled, ProgressBar },
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem;">
+				<Admonition type="info" header="Uploading files (2/5)">
+					128 KB / 1.2 MB (45%)
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="0.45" :max="1" color="blue" full-width />
+					</template>
+				</Admonition>
+				<Admonition type="info" header="Extracting modpack.zip">
+					24 MB extracted — config/settings.yml
+					<template #top-right-actions>
+						<ButtonStyled type="outlined" color="blue">
+							<button class="!border">Cancel</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="0.7" :max="1" color="blue" full-width />
+					</template>
+				</Admonition>
+				<Admonition type="success" header="Extraction complete — Done">
+					56 MB extracted
+					<template #top-right-actions>
+						<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
+							<button>✕</button>
+						</ButtonStyled>
+					</template>
+					<template #progress>
+						<ProgressBar :progress="1" :max="1" color="green" full-width />
+					</template>
+				</Admonition>
+			</div>
+		`,
+	}),
+}
--- a/packages/ui/src/stories/base/NavTabs.stories.ts
+++ b/packages/ui/src/stories/base/NavTabs.stories.ts
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { getCurrentInstance, ref } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import NavTabs from '../../components/base/NavTabs.vue'
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [{ path: '/', component: { template: '<div />' } }],
+})
+
+const meta = {
+	title: 'Base/NavTabs',
+	component: NavTabs,
+	decorators: [
+		(story) => {
+			return {
+				components: { story },
+				setup() {
+					const app = getCurrentInstance()?.appContext.app
+					if (app && !app.config.globalProperties.$router) {
+						app.use(router)
+					}
+				},
+				template: '<story />',
+			}
+		},
+	],
+} satisfies Meta<typeof NavTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		mode: 'local',
+		activeIndex: 0,
+		links: [
+			{ label: 'Overview', href: '' },
+			{ label: 'Gallery', href: 'gallery' },
+			{ label: 'Changelog', href: 'changelog' },
+			{ label: 'Versions', href: 'versions' },
+		],
+	},
+}
+
+export const LocalMode: StoryObj = {
+	render: () => ({
+		components: { NavTabs },
+		setup() {
+			const activeIndex = ref(0)
+			const links = [
+				{ label: 'Overview', href: '' },
+				{ label: 'Gallery', href: 'gallery' },
+				{ label: 'Changelog', href: 'changelog' },
+				{ label: 'Versions', href: 'versions' },
+			]
+			function onTabClick(index: number) {
+				activeIndex.value = index
+			}
+			return { activeIndex, links, onTabClick }
+		},
+		template: /* html */ `
+			<NavTabs
+				mode="local"
+				:active-index="activeIndex"
+				:links="links"
+				@tab-click="onTabClick"
+			/>
+		`,
+	}),
+}
+
+export const TwoTabs: StoryObj = {
+	render: () => ({
+		components: { NavTabs },
+		setup() {
+			const activeIndex = ref(0)
+			const links = [
+				{ label: 'Details', href: '' },
+				{ label: 'Settings', href: 'settings' },
+			]
+			function onTabClick(index: number) {
+				activeIndex.value = index
+			}
+			return { activeIndex, links, onTabClick }
+		},
+		template: /* html */ `
+			<NavTabs
+				mode="local"
+				:active-index="activeIndex"
+				:links="links"
+				@tab-click="onTabClick"
+			/>
+		`,
+	}),
+}
--- a/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts
+++ b/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts
@@ -0,0 +1,86 @@
+import type { StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ConfirmLeaveModal from '../../components/modal/ConfirmLeaveModal.vue'
+
+const meta = {
+	title: 'Modal/ConfirmLeaveModal',
+	component: ConfirmLeaveModal,
+}
+
+export default meta
+type Story = StoryObj<typeof ConfirmLeaveModal>
+
+export const Default: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const result = ref<string>('')
+			async function openModal() {
+				result.value = ''
+				const confirmed = await modalRef.value?.prompt()
+				result.value = confirmed ? 'User chose to leave' : 'User chose to stay'
+			}
+			return { modalRef, result, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="red">
+					<button @click="openModal">Trigger Leave Confirmation</button>
+				</ButtonStyled>
+				<p v-if="result" class="mt-4 text-secondary">{{ result }}</p>
+				<ConfirmLeaveModal ref="modalRef" />
+			</div>
+		`,
+	}),
+}
+
+export const CustomMessages: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const openModal = () => modalRef.value?.prompt()
+			return { modalRef, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="red">
+					<button @click="openModal">Discard Draft?</button>
+				</ButtonStyled>
+				<ConfirmLeaveModal
+					ref="modalRef"
+					title="Discard draft?"
+					header="Your draft will be lost"
+					body="If you leave now, your draft will not be saved."
+					stay-label="Keep editing"
+					leave-label="Discard"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const WarningAdmonition: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const openModal = () => modalRef.value?.prompt()
+			return { modalRef, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="orange">
+					<button @click="openModal">Open Warning Variant</button>
+				</ButtonStyled>
+				<ConfirmLeaveModal
+					ref="modalRef"
+					admonition-type="warning"
+				/>
+			</div>
+		`,
+	}),
+}
--- a/packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts
+++ b/packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts
@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import BackupProgressAdmonition from '../../components/servers/backups/BackupProgressAdmonition.vue'
-
-const meta = {
-	title: 'Servers/BackupProgressAdmonition',
-	component: BackupProgressAdmonition,
-	parameters: {
-		layout: 'padded',
-	},
-} satisfies Meta<typeof BackupProgressAdmonition>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const justNow = new Date().toISOString()
-const eightMinsAgo = new Date(Date.now() - 8 * 60 * 1000).toISOString()
-const fiveHoursAgo = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
-
-export const AllStates: Story = {
-	render: () => ({
-		components: { BackupProgressAdmonition },
-		setup() {
-			const now = new Date().toISOString()
-			const mins8 = new Date(Date.now() - 8 * 60 * 1000).toISOString()
-			const hours5 = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
-			return { now, mins8, hours5 }
-		},
-		template: /*html*/ `
-			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 1020px;">
-				<h3 style="margin: 0; color: var(--color-contrast);">Backup Creation</h3>
-				<BackupProgressAdmonition type="create" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
-				<BackupProgressAdmonition type="create" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
-				<BackupProgressAdmonition type="create" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
-
-				<h3 style="margin: 1rem 0 0; color: var(--color-contrast);">Backup Restoration</h3>
-				<BackupProgressAdmonition type="restore" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
-				<BackupProgressAdmonition type="restore" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
-				<BackupProgressAdmonition type="restore" state="done" :progress="1" backup-name="World Backup 1" :created-at="hours5" />
-				<BackupProgressAdmonition type="restore" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
-			</div>
-		`,
-	}),
-}
-
-export const BackupQueued: Story = {
-	args: {
-		type: 'create',
-		state: 'ongoing',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: justNow,
-	},
-}
-
-export const CreatingBackup: Story = {
-	args: {
-		type: 'create',
-		state: 'ongoing',
-		progress: 0.33,
-		backupName: 'World Backup 1',
-		createdAt: eightMinsAgo,
-	},
-}
-
-export const BackupFailed: Story = {
-	args: {
-		type: 'create',
-		state: 'failed',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}
-
-export const RestoreQueued: Story = {
-	args: {
-		type: 'restore',
-		state: 'ongoing',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: justNow,
-	},
-}
-
-export const RestoringBackup: Story = {
-	args: {
-		type: 'restore',
-		state: 'ongoing',
-		progress: 0.33,
-		backupName: 'World Backup 1',
-		createdAt: eightMinsAgo,
-	},
-}
-
-export const RestoreSuccessful: Story = {
-	args: {
-		type: 'restore',
-		state: 'done',
-		progress: 1,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}
-
-export const RestoreFailed: Story = {
-	args: {
-		type: 'restore',
-		state: 'failed',
-		progress: 0,
-		backupName: 'World Backup 1',
-		createdAt: fiveHoursAgo,
-	},
-}