feat: update versions table (#6502)

* feat: add new versions table, move environments column to be feature flag toggled, and add header/cell class props to Table.vue * feat: implement much better table column widths * feat: update version filter control to use multiselect * feat: implement clicking table row to go to version * feat: mobile pass on versions table * feat: use multiselect for platform, and fix game version show all versions when dont exist * pnpm prepr * feat: replace dashboard projects table with new table * feat: update projects so its out of card * fix: version actions buttons column width * feat: implement overflow on loaders cell * update platform and version width * feat: update project icon * feat: change edit links to use floating action bar * pnpm prepr
2026-08-28 02:24:56 +00:00 · 2026-06-29 15:01:07 +00:00
parent fc3e384f54
commit b0c6a06909
39 changed files with 1251 additions and 1143 deletions
@@ -100,6 +100,32 @@ export const HorizontalOverflow: StoryObj = {
 	}),
 }

+export const CustomClasses: StoryObj = {
+	args: {},
+	render: () => ({
+		components: { Table },
+		setup() {
+			const columns = [
+				{ key: 'name', label: 'Name', cellClass: '!overflow-visible py-3' },
+				{ key: 'email', label: 'Email' },
+				{
+					key: 'status',
+					label: 'Status',
+					headerClass: 'text-center',
+					cellClass: 'text-center',
+				},
+				{ key: 'role', label: 'Role' },
+			]
+			const data = sampleUsers
+			const rowClass = (_row: User, index: number) => (index === 0 ? 'font-semibold' : '')
+			return { columns, data, rowClass }
+		},
+		template: /* html */ `
+			<Table :columns="columns" :data="data" :row-class="rowClass" />
+		`,
+	}),
+}
+
 export const WithSelection: StoryObj = {
 	args: {},
 	render: () => ({
@@ -0,0 +1,206 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, MoreVerticalIcon } from '@modrinth/assets'
+import type { GameVersionTag, Version } from '@modrinth/utils'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ProjectPageVersions from '../../components/project/ProjectPageVersions.vue'
+
+type StoryVersion = Version & {
+	displayUrlEnding: string
+	environment?: Labrinth.Projects.v3.Environment
+	mrpack_loaders?: string[]
+	files_missing_attribution?: string[]
+}
+
+const gameVersions: GameVersionTag[] = [
+	{ version: '1.21.4', version_type: 'release', date: '2024-12-03', major: true },
+	{ version: '1.21.3', version_type: 'release', date: '2024-10-23', major: false },
+	{ version: '1.21.1', version_type: 'release', date: '2024-08-08', major: true },
+	{ version: '1.20.6', version_type: 'release', date: '2024-04-29', major: false },
+	{ version: '1.20.4', version_type: 'release', date: '2023-12-07', major: true },
+	{ version: '1.20.1', version_type: 'release', date: '2023-06-12', major: true },
+	{ version: '1.19.4', version_type: 'release', date: '2023-03-14', major: true },
+]
+
+const loaders: Labrinth.Tags.v2.Loader[] = [
+	{ icon: '', name: 'fabric', supported_project_types: ['mod', 'modpack'] },
+	{ icon: '', name: 'forge', supported_project_types: ['mod', 'modpack'] },
+	{ icon: '', name: 'neoforge', supported_project_types: ['mod', 'modpack'] },
+	{ icon: '', name: 'quilt', supported_project_types: ['mod', 'modpack'] },
+]
+
+const versions: StoryVersion[] = [
+	{
+		id: 'version-1',
+		project_id: 'project-1',
+		author_id: 'author-1',
+		name: 'Performance improvements and bug fixes',
+		version_number: 'mc1.21.4-0.6.13',
+		displayUrlEnding: 'mc1.21.4-0.6.13',
+		changelog: '',
+		dependencies: [],
+		game_versions: ['1.21.4', '1.21.3', '1.21.1'],
+		version_type: 'release',
+		loaders: ['fabric', 'quilt', 'forge', 'neoforge'],
+		featured: true,
+		status: 'listed',
+		date_published: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2).toISOString(),
+		downloads: 1258400,
+		environment: 'client_only',
+		files: [
+			{
+				hashes: { sha512: 'sha512-1', sha1: 'sha1-1' },
+				url: 'https://cdn.modrinth.com/data/story/version-1.jar',
+				filename: 'sodium-fabric-0.6.13.jar',
+				primary: true,
+				size: 1248200,
+			},
+		],
+	},
+	{
+		id: 'version-2',
+		project_id: 'project-1',
+		author_id: 'author-1',
+		name: 'NeoForge compatibility',
+		version_number: 'mc1.20.6-0.5.11',
+		displayUrlEnding: 'mc1.20.6-0.5.11',
+		changelog: '',
+		dependencies: [],
+		game_versions: ['1.20.6', '1.20.4', '1.20.1', '1.19.4'],
+		version_type: 'beta',
+		loaders: ['neoforge'],
+		featured: false,
+		status: 'listed',
+		date_published: new Date(Date.now() - 1000 * 60 * 60 * 24 * 16).toISOString(),
+		downloads: 84200,
+		environment: 'client_and_server',
+		files_missing_attribution: ['bundled-library.jar'],
+		files: [
+			{
+				hashes: { sha512: 'sha512-2', sha1: 'sha1-2' },
+				url: 'https://cdn.modrinth.com/data/story/version-2.jar',
+				filename: 'sodium-neoforge-0.5.11.jar',
+				primary: true,
+				size: 1424200,
+			},
+			{
+				hashes: { sha512: 'sha512-3', sha1: 'sha1-3' },
+				url: 'https://cdn.modrinth.com/data/story/version-2-sources.jar',
+				filename: 'sodium-neoforge-0.5.11-sources.jar',
+				primary: false,
+				size: 624200,
+				file_type: 'sources-jar',
+			},
+		],
+	},
+	{
+		id: 'version-3',
+		project_id: 'project-1',
+		author_id: 'author-1',
+		name: 'Server pack with no mod loader',
+		version_number: 'server-pack-1.0.0',
+		displayUrlEnding: 'server-pack-1.0.0',
+		changelog: '',
+		dependencies: [],
+		game_versions: ['1.21.4'],
+		version_type: 'alpha',
+		loaders: ['minecraft'],
+		mrpack_loaders: [],
+		featured: false,
+		status: 'listed',
+		date_published: new Date(Date.now() - 1000 * 60 * 60 * 24 * 45).toISOString(),
+		downloads: 1200,
+		environment: 'server_only',
+		files: [
+			{
+				hashes: { sha512: 'sha512-4', sha1: 'sha1-4' },
+				url: 'https://cdn.modrinth.com/data/story/version-3.mrpack',
+				filename: 'server-pack-1.0.0.mrpack',
+				primary: true,
+				size: 2048200,
+			},
+		],
+	},
+]
+
+const meta = {
+	title: 'Project/ProjectPageVersions',
+	component: ProjectPageVersions,
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div class="p-4"><story /></div>',
+		}),
+	],
+	args: {
+		project: {
+			project_type: 'mod',
+			slug: 'sodium',
+			id: 'project-1',
+		},
+		versions,
+		loaders,
+		gameVersions,
+		baseId: 'project-page-versions-story',
+		showFiles: false,
+		showEnvironmentColumn: false,
+		versionLink: (version: Version) => `https://modrinth.com/mod/sodium/version/${version.id}`,
+	},
+	render: (args) => ({
+		components: { ButtonStyled, DownloadIcon, MoreVerticalIcon, ProjectPageVersions },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<ProjectPageVersions v-bind="args">
+				<template #actions="{ version }">
+					<ButtonStyled circular type="transparent">
+						<a
+							v-tooltip="'Download'"
+							:href="version.files[0]?.url"
+							:download="version.files[0]?.filename"
+							aria-label="Download"
+						>
+							<DownloadIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
+					<ButtonStyled circular type="transparent">
+						<button v-tooltip="'More options'" aria-label="More options">
+							<MoreVerticalIcon aria-hidden="true" />
+						</button>
+					</ButtonStyled>
+				</template>
+			</ProjectPageVersions>
+		`,
+	}),
+} satisfies Meta<typeof ProjectPageVersions>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithFiles: Story = {
+	args: {
+		showFiles: true,
+	},
+}
+
+export const WithEnvironmentColumn: Story = {
+	args: {
+		showEnvironmentColumn: true,
+	},
+}
+
+export const MobileWidth: Story = {
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobile1',
+		},
+	},
+	args: {
+		showFiles: true,
+		showEnvironmentColumn: true,
+	},
+}